search

huggingface / huggingface.js

Utilities to use the Hugging Face Hub API
https://hf.co/docs/huggingface.js
MIT License
1.35k stars 197 forks source link

When or if will there be an NPM package? #69

Closed hpssjellis closed 1 year ago

hpssjellis commented 1 year ago

When or if will there be an NPM package?

@coyotte508

I am a high school teacher who is very good at taking npm packages and making simple machine learning, single page, JavaScript demos, see what I did years ago with tensorflowJS here.

Presently I am completely lost at how to get these examples running. I can load huggingface.js onto gitpod (a browser based docker) and install everything but still nothing works.

Your package.json file does not seem to have many useful scripts.

HuggingFace.js package.json

    "scripts": {
        "format": "prettier --write .eslintrc.cjs && eslint --quiet --fix --ext .cjs,.ts .eslintrc.cjs",
        "test": "pnpm -r test"
    }

TensorflowJS package.json (Probably not all of these are useful, but the release scripts would be nice.)

  "scripts": {
    "lint": "tslint -p tsconfig_tslint.json",
    "test": "bazel test //:tests",
    "test-packages-ci": "yarn generate-cloudbuild-for-packages && ./scripts/run-build.sh",
    "nightly-cloudbuild": "NIGHTLY=true yarn generate-cloudbuild-for-packages && gcloud builds submit . --config=cloudbuild_generated.yml --substitutions=_NIGHTLY=true",
    "generate-cloudbuild-for-packages": "ts-node -s ./scripts/generate_cloudbuild_for_packages.ts",
    "test-generate-cloudbuild": "cd scripts && node --require ts-node/register ../node_modules/jasmine/bin/jasmine.js run generate_cloudbuild_test.ts",
    "test-run-flaky": "jasmine run scripts/run_flaky_test.js",
    "release": "ts-node -s ./scripts/release.ts",
    "release-tfjs": "ts-node -s ./scripts/release-tfjs.ts",
    "publish-npm": "ts-node -s ./scripts/publish-npm.ts",
    "release-notes": "ts-node -s ./scripts/release_notes/release_notes.ts",
    "test-release-notes": "ts-node -s ./scripts/release_notes/run_tests.ts",
    "update-tfjs-lockfiles": "ts-node -s ./scripts/update-tfjs-lockfiles",
    "tag-tfjs-release": "ts-node -s ./scripts/tag-tfjs-release",
    "update-cloudbuild-tests": "yarn generate-cloudbuild-for-packages tfjs-node -o scripts/cloudbuild_tfjs_node_expected.yml && yarn generate-cloudbuild-for-packages e2e -o scripts/cloudbuild_e2e_expected.yml",
    "bazel:format": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-actions,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,out-of-order-load,output-group,package-name,package-on-top,positional-args,redefined-variable,repository-name,same-origin-load,string-iteration,unsorted-dict-items,unused-variable",
    "bazel:format-check": "yarn bazel:format --mode=check",
    "bazel:lint": "yarn bazel:format --lint=warn",
    "bazel:lint-fix": "yarn bazel:format --lint=fix",
    "bazel:lint-check": "yarn bazel:format --lint=warn --mode=check",
    "buildifier-ci": "./scripts/buildifier-ci.sh",
    "start-local-debugger-server": "node ./scripts/start_local_debugger_server.js"
  },

In conclusing:

  1. Is an NPM coming?
  2. Do you have more, simple webpage demos/examples
  3. Do you need a teacher simplification consultant? LOL
radames commented 1 year ago

Hi @hpssjellis, Thank you for your feedback. We agree with you that we need simple examples in the repository, we have been discussing and planning it on #57. You can't import the package directly from NPM to a webpage. However, you can use an alternative bundler/CDN skypack.dev to accomplish this.

Here's a minimal example

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello huggingface.js</title>
</head>

<body>
    <script type="module">
        import { HfInference } from 'https://cdn.skypack.dev/@huggingface/inference@1.5.2';
        const TOKEN = ""
        let hf = new HfInference(TOKEN)

        const imgBlob = await fetch("https://raw.githubusercontent.com/huggingface/huggingface.js/main/packages/inference/test/cats.png")
            .then((res) => res.blob())
        const objectDetectionRes = await hf.objectDetection({
            data: imgBlob,
            model: "facebook/detr-resnet-50"
        })
        console.log(objectDetectionRes)
    </script>
</body>
</html>

A better complete example objectDetection https://huggingface.co/spaces/radames/hello-huggingface.js source-code https://huggingface.co/spaces/radames/hello-huggingface.js/blob/main/index.html

o-az commented 1 year ago

Disclaimer: I'm not affiliated with huggingface.

  1. Is an NPM coming?

npm packages have been available AFAIK since this repo became public:

Both names are available in each package.json respectively.

  1. Do you have more, simple webpage demos/examples

A playground directory with a number of examples and live links is coming very soon (https://github.com/huggingface/huggingface.js/issues/57)

  1. Do you need a teacher simplification consultant? LOL

From the landing README.md:

"the libraries is still very young, please help us by opening issues!"

You can help by creating issues if you find any problems or make prs. Also take a look at how package.json works: https://docs.npmjs.com/creating-a-package-json-file#required-name-and-version-fields. The name field is the name of the package.

{
  "name": "@huggingface/hub" // <-- https://www.npmjs.com/package/@huggingface/hub
  // ...
}
radames commented 1 year ago

hi @o-az yes you're right, it's available if you're loading it from Node/Deno/Bun that supports TypeScript out of the box. However, beginners to this space may be more familiar to load packages direct from NPM into a simple index.html i.e <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>.

@coyotte508 I think we should also consider bundling the package as ES module without TypeScript? This way, users could load it from NPM as well as skypack.dev

o-az commented 1 year ago

@radames I'm actually not used to typescript files being bundled and published with the transpiled js file/s. I don't see any great benefit of doing that - so I agree with you that would be very useful. I'm working on adding a couple of examples including Node.js and browser examples.

coyotte508 commented 1 year ago

hi @o-az yes you're right, it's available if you're loading it from Node/Deno/Bun that supports TypeScript out of the box. However, beginners to this space may be more familiar to load packages direct from NPM into a simple index.html i.e <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>.

@coyotte508 I think we should also consider bundling the package as ES module without TypeScript? This way, users could load it from NPM as well as skypack.dev

Can you give me an example of something that should work when importing from NPM but doesn't work?

hpssjellis commented 1 year ago

Thanks @o-az and @coyotte508 for the great replies. I will also try to get some examples working.

By the way TensorflowJS/deeplearn.js also started as Typescript until I believe some community members put forward a strong case for a JavaScript version. I think the argument went something like this: Typescript is much better, but the point of a JS capable framework is to reach the general public which is more familiar with JavaScript.

I will see what I can do with some examples. Thanks again.

coyotte508 commented 1 year ago

The example in the README is in pure JavaScript: https://github.com/huggingface/huggingface.js#usage-example

hpssjellis commented 1 year ago

The example in the README is in pure JavaScript: https://github.com/huggingface/huggingface.js#usage-example

That is pure JavaScript but not yet static Vanilla JavaScript.

The reason I work with static Vanilla JavaScript is that after 30 years of teaching coding, 20 out of my 30 high school grade 11-12 students can do static JavaScript. Yes, 5 students easily learn how to use VScode or some other TypeScript/JavaScript compiler/transpiler, and 5 students never learn, but the majority of students just want to learn how to make JavaScript webpages. So I teach Browser Machine Learning using gitPages! For example this page (sound on) here does some cool edgeimpulse.com WASM vision ML from a static webpage.

With some help and @o-az may already have done it, I think we can get it working. Very cool to have access to the huggingface datasets. This is only the first step. I have big plans for ML and Education.

radames commented 1 year ago

thanks @hpssjellis, how do you feel about using JavaScript modules? it's vanilla js and you can load the packaged from skypack.dev which transforms and bundle it without the TypeScript, indeed any NPM package can be used via skypack. You're only required to use the

<body>
    <script type="module">
        import { HfInference } from 'https://cdn.skypack.dev/@huggingface/inference@1.5.2';
        const TOKEN = ""
        let hf = new HfInference(TOKEN)

        const imgBlob = await fetch("https://raw.githubusercontent.com/huggingface/huggingface.js/main/packages/inference/test/cats.png")
            .then((res) => res.blob())
        const objectDetectionRes = await hf.objectDetection({
            data: imgBlob,
            model: "facebook/detr-resnet-50"
        })
        console.log(objectDetectionRes)
    </script>
</body>
</html>

Many modern packages are using this approach, three.js, d3.js , vue.js

coyotte508 commented 1 year ago

There are two .js files in each package: https://www.npmjs.com/package/@huggingface/inference?activeTab=explore and two NPM packages: https://www.npmjs.com/package/@huggingface/inference and https://www.npmjs.com/package/@huggingface/hub

I guess maybe what's confusing is the monorepo approach, you can do pnpm -r build and use packages/inference/dist/index.mjs or packages/inference/dist/index.js locally.

I'll add a bit of doc

radames commented 1 year ago

yes @coyotte508 I think it will be nice to add to the docs Installing info like three.js

Btw you can also usejsdelivr CDN with the extra +esm param, that will serve the package described as module here https://github.com/huggingface/huggingface.js/blob/21b240b28ddba9d1d02264785633f9bfb4e80807/packages/inference/package.json#L30-L33. So it's perfect. 

    <script type="module">
        import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@1.5.2/+esm';
        import { createRepo, commit, deleteRepo, listFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.1.5/+esm";
   </script>
hpssjellis commented 1 year ago

@radames

how do you feel about using JavaScript modules?

I use modules when it is too complex to convert a set of pages over, but I am good with anything that works and your example works great. Thanks so much. I think I can take it from here.

Out of curiosity is there anyone I should tag for school level problems (ie. as simple as I can get it) or just post a regular issue.

image

coyotte508 commented 1 year ago

For simple questions regarding the libraries you can use discussions: https://github.com/huggingface/huggingface.js/discussions/categories/q-a

For community-related questions or ML-related questions you can join the discord: https://discuss.huggingface.co/t/join-the-hugging-face-discord/11263

hpssjellis commented 1 year ago

@radames If anyone is interested my HuggingFace Github will be at https://github.com/hpssjellis/my-examples-of-huggingfacejs and the index of examples will be at https://hpssjellis.github.io/my-examples-of-huggingfacejs/public/index.html and I have my first real problem.

I have hit my rate limit, especially trying to load every inference example. I am fine running the code every hour, what is the approximate free rate in models per hour or per min? I can work it out by running the simple program over and over until it works, but would be nice to have an educated guess at the rate.

This is a problem for Education. Anyone got a solution?

I typically don't enjoy forcing my students to signup for some cloud service and I know my school will not pay a monthly fee. By the way, I am part of the tinyML4D team trying to bring machine learning on microcontrollers to students in developing countries. http://tinyml.seas.harvard.edu/team/ look for me, Jeremy Ellis. I am fairly sure students in Developing countries will not be able to pay a monthly fee.

coyotte508 commented 1 year ago

@hpssjellis just having a free account gets you a much better rate limit.

You just need to create a token here: https://huggingface.co/settings/tokens and then use it, no payment required.

radames commented 1 year ago

great @hpssjellis, we'll be adding examples on the project soon, please feel free to send more. Maybe we can create a list of links as well.

ps. with the token you can a have much better rate limit like @coyotte508 said, just keep in mind this token was not meant to be public on a web page, read more here . So when you're working with students I'd recommend add an input field type password an save the token on a password manager.

hpssjellis commented 1 year ago

All of this is awesome. I will be working on lots of examples over the next few days at

https://hpssjellis.github.io/my-examples-of-huggingfacejs/public/index.html

We can close this issue. Thanks so much.