Closed hpssjellis closed 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
Disclaimer: I'm not affiliated with huggingface
.
- Is an NPM coming?
npm
packages have been available AFAIK since this repo became public:
@huggingface/hub
https://www.npmjs.com/package/@huggingface/hub@huggingface/inference
https://www.npmjs.com/package/@huggingface/inferenceBoth names are available in each package.json
respectively.
- 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)
- 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
// ...
}
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
@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.
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?
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.
The example in the README is in pure JavaScript: https://github.com/huggingface/huggingface.js#usage-example
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.
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
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
dist/index.js
for CJS javascriptdist/index.mjs
for ESM javascriptI 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
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>
@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.
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
@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.
@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.
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.
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.
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
TensorflowJS package.json (Probably not all of these are useful, but the release scripts would be nice.)
In conclusing: