npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gliff-ai/upload

v1.3.0

Published

gliff.ai UPLOAD - a React component for uploading multidimensional images

Downloads

45

Readme

gliff.ai UPLOAD

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

👋 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!

Table of Contents

Looking for something specific? 🔍

Installation

{{back to navigation}}

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

Development

{{back to navigation}}

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

{{back to navigation}}

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

{{back to navigation}}

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

{{back to navigation}}

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

{{back to navigation}}

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!

Contact

{{back to navigation}}

Need some help? 🤔 Have a question? 🧠
Reach out to the gliff.ai team at [email protected] or on our GitHub discussions.

License

{{back to navigation}}

This code is licensed under a GNU AGPLv3 license 📝
Curious about our reasoning for this? Read about them here!