@gliff-ai/upload NPM

gliff.ai UPLOAD

Repo License Repository Size Latest Tag Number of Open Issues Number of Open Pull Requests

👋 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? 🔍

Installation

Run npm install @gliff-ai/upload in your command line to install the package from the npm registry.

Development

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.

Linting and Formatting

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.

Testing

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.

Continuous Integration

GitHub Actions should only be included under the .github/workflows path.

Examples of Use

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.

Contribute

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 ⚠️ and gliff.ai Security Policy 🔒 too!

A big thank you from the entire gliff.ai team to these fellow contributors (emoji key):

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!