👋 Welcome in! 👋
This repository contains the Open Source code for gliff.ai’s UPLOAD support library (gliff.ai’s component for uploading multidimensional images).
UPLOAD aims to allow users to easily upload a variety of image files, including multidimensional TIFFs, for the purposes of developing imaging AI products. When the full gliff.ai platform is used, UPLOAD provides just one step in developing high-quality and auditable datasets that satisfy any relevant regulatory frameworks which enables our users to build world-changing and trustworthy AI models and products.
✅ We welcome contributions on this repository! ✅
Looking for something specific? 🔍
- Repository Introduction
- Table of Contents
- Installation
- Development
- Linting and Formatting
- Testing
- Examples of Use
- Contribute
- Contact
- License
Run npm install @gliff-ai/upload
in your command line to install the package from the npm registry.
Frontend code should always be written in Typescript and transpiled using the options in tsconfig.json
in this repository. npm should always be used for package management.
npm run serve
will run a local webpack developer server for quick access.
To get started, run npm i
and npm run build
from the root directory.
As a standard, all code contributions should be linted with ESLint using .eslintrc.js
and formatted with Prettier. Note: HTML + CSS, mark-up and mark-down code are exemptions and should be formatted using Prettier but do not need to be linted.
npm run lint
will lint the codebase.
Our GitHub Actions will also lint any pull requests before they're merged.
All code contributions should be tested using both the Jest and React Testing Library.
npm run test
will run any existing tests in our codebase.
Our GitHub Actions will also test any pull requests before they're merged! These all must pass and have 2 reviewers approval before a pull request can merge. If one or a few fail and your troubleshooting is not giving an answer, please check out the gliff.ai Contribution Guide 👋 for further guidance.
GitHub Actions should only be included under the .github/workflows
path.
Import the UploadImage
module and the ImageFileInfo
type:
import { UploadImage } from @gliff-ai/upload;
import type { ImageFileInfo } from @gliff-ai/upload;
Use the UploadImage
module:
setUploadedImage = (
imageFileInfo: ImageFileInfo,
slicesData: Array<Array<ImageBitmap>>
): void => {
this.imageFileInfo = imageFileInfo;
this.slicesData = slicesData;
};
render = (): ReactNode => (
<UploadImage
setUploadedImage={this.setUploadedImage}
spanElement={
<Button aria-label="upload-picture" component="span">
<Backup />
</Button>
} // A <span> element that marks the clickable area.
multiple // allow uploading multiple files at once; use multiple={false} to disallow
/>
);
The example above uses Material-UI.
We welcome all contributors and any contributions on this project through the likes of feedback on or suggesting features and enhancements, raising bug problems, reporting on security vulnerabilities, reviewing code, requesting or creating tests, user testing etc. to ensure gliff.ai can help enable the best and biggest positive impact possible.
Sounds good and want to contribute to the project? 🧑💻
Please check the gliff.ai Contribution Guide 👋 before you get started. Don’t forget the gliff.ai Code of Conduct
A big thank you from the entire gliff.ai team to these fellow contributors (emoji key):
Josh 📖 |
Chas Nelson 💻 🤔 📆 👀 🚧 |
philipjackson 💻 👀 🤔 |
Craig Cooper 💻 👀 🤔 |
This project follows the all-contributors specification and makes use of the all-contributors emoji key to credit the types of contributions from our community!
Need some help? 🤔 Have a question? 🧠
Reach out to the gliff.ai team at community@gliff.ai or on our GitHub discussions.
This code is licensed under a GNU AGPLv3 license 📝
Curious about our reasoning for this? Read about them here!