├── .gitignore ├── .prettierrc ├── .scripts ├── build.js └── update.js ├── LICENSE ├── README.md ├── adaptive-retrieval ├── .eslintrc.cjs ├── .gitignore ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src │ ├── App.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── attention-visualization ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── banner.png │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── browser-extension ├── .gitignore ├── README.md ├── build │ └── .gitignore ├── package-lock.json ├── package.json ├── public │ ├── icons │ │ └── icon.png │ └── manifest.json ├── src │ ├── background.js │ ├── constants.js │ ├── content.js │ ├── popup.css │ ├── popup.html │ └── popup.js └── webpack.config.js ├── bun ├── .gitignore ├── README.md ├── bun.lockb ├── index.ts ├── package.json └── tsconfig.json ├── code-completion ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── components │ │ └── Progress.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── conversational-webgpu ├── .gitignore ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── logo.png ├── src │ ├── App.jsx │ ├── constants.js │ ├── index.css │ ├── main.jsx │ ├── play-worklet.js │ ├── vad-processor.js │ └── worker.js └── vite.config.js ├── cross-encoder ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── deepseek-r1-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── BrainIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── deno-embed ├── README.md ├── deno.json ├── deno.lock └── main.ts ├── depth-anything ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── depth-estimation-video ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── depth-pro-node ├── README.md ├── assets │ ├── depth.png │ └── image.jpg ├── index.js ├── package-lock.json └── package.json ├── florence2-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── components │ │ ├── ImageInput.jsx │ │ └── Progress.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── gemma-2-2b-jpn-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── janus-pro-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── ImagePreview.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── CrossIcon.jsx │ │ │ ├── ImageIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── janus-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── ImagePreview.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── CrossIcon.jsx │ │ │ ├── ImageIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── llama-3.2-node ├── README.md ├── index.js ├── package-lock.json └── package.json ├── llama-3.2-reasoning-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── BrainIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── llama-3.2-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── moonshine-web ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── AnimatedMesh.jsx │ │ └── BloomScene.jsx │ ├── constants.js │ ├── index.css │ ├── main.jsx │ ├── processor.js │ ├── utils.js │ └── worker.js └── vite.config.js ├── musicgen-web ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── index.css │ ├── main.jsx │ └── utils.js └── vite.config.js ├── next-client ├── .gitignore ├── README.md ├── app │ ├── classifier.js │ ├── favicon.ico │ ├── globals.css │ ├── layout.js │ └── page.js ├── eslint.config.mjs ├── jsconfig.json ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.mjs ├── public │ ├── github.svg │ ├── globe.svg │ ├── hf-logo.svg │ ├── next.svg │ └── window.svg └── tailwind.config.mjs ├── next-server ├── .eslintrc.json ├── .gitignore ├── Dockerfile ├── README.md ├── app │ ├── api │ │ └── classify │ │ │ └── route.js │ ├── classifier.js │ ├── favicon.ico │ ├── fonts │ │ ├── GeistMonoVF.woff │ │ └── GeistVF.woff │ ├── globals.css │ ├── layout.js │ └── page.js ├── jsconfig.json ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.mjs ├── public │ ├── github.svg │ ├── globe.svg │ ├── hf-logo.svg │ ├── next.svg │ └── window.svg └── tailwind.config.js ├── node-audio-processing ├── index.js ├── package-lock.json └── package.json ├── node-cjs ├── README.md ├── index.js ├── package-lock.json └── package.json ├── node-esm ├── README.md ├── index.js ├── package-lock.json └── package.json ├── omniparser-node ├── captioning.js ├── detector.js ├── index.js ├── package-lock.json └── package.json ├── package-lock.json ├── package.json ├── pglite-semantic-search ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── globals.css │ ├── main.jsx │ ├── utils │ │ └── db.js │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── phi-3.5-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── qwen3-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── BrainIcon.jsx │ │ │ ├── LightBulbIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── realtime-whisper-webgpu ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ ├── logo.png │ └── realtime-whisper-webgpu.mp4 ├── src │ ├── App.jsx │ ├── components │ │ ├── AudioVisualizer.jsx │ │ ├── LanguageSelector.jsx │ │ └── Progress.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── remove-background-web ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── remove-background-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── banner.jpg ├── src │ ├── App.jsx │ ├── index.css │ └── main.jsx ├── tailwind.config.js └── vite.config.js ├── sapiens-node ├── README.md ├── assets │ ├── depth.png │ ├── image.jpg │ └── normal.png ├── index.js ├── package-lock.json └── package.json ├── segment-anything-webgpu ├── README.md ├── index.css ├── index.html └── index.js ├── semantic-audio-search ├── .gitignore ├── index.html ├── index.js ├── package-lock.json ├── package.json ├── style.css ├── utils.js └── worker.js ├── semantic-image-search-web ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── components │ │ ├── Image.jsx │ │ ├── ImageGrid.jsx │ │ ├── Modal.jsx │ │ └── SearchBar.jsx │ ├── index.css │ ├── main.jsx │ ├── utils.js │ └── worker.js └── vite.config.js ├── smollm-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── smolvlm-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── ImagePreview.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── CrossIcon.jsx │ │ │ ├── ImageIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── speecht5-web ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── components │ │ ├── AudioPlayer.jsx │ │ └── Progress.jsx │ ├── constants.js │ ├── index.css │ ├── main.jsx │ ├── utils.js │ └── worker.js └── vite.config.js ├── sveltekit ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── Dockerfile ├── README.md ├── eslint.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── src │ ├── app.css │ ├── app.d.ts │ ├── app.html │ ├── lib │ │ └── Classifier.svelte │ └── routes │ │ ├── +layout.svelte │ │ ├── +page.svelte │ │ └── api │ │ └── classify │ │ └── +server.ts ├── static │ ├── favicon.ico │ ├── github.svg │ ├── globe.svg │ ├── hf-logo.svg │ ├── next.svg │ ├── sveltekit.svg │ └── window.svg ├── svelte.config.js ├── tailwind.config.ts ├── tsconfig.json └── vite.config.ts ├── text-to-speech-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── banner.png │ ├── hf-logo.svg │ └── wave.svg ├── src │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── the-tokenizer-playground ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src │ ├── App.css │ ├── App.jsx │ ├── components │ │ └── Token.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js ├── tailwind.config.js └── vite.config.js ├── tinyswallow-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── banner.png │ └── logo.png ├── src │ ├── App.jsx │ ├── components │ │ ├── Chat.css │ │ ├── Chat.jsx │ │ ├── Progress.jsx │ │ └── icons │ │ │ ├── ArrowRightIcon.jsx │ │ │ ├── BotIcon.jsx │ │ │ ├── StopIcon.jsx │ │ │ └── UserIcon.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── vanilla-js ├── README.md ├── index.html ├── index.js └── style.css ├── video-background-removal ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── video-object-detection ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── webgpu-clip ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── webgpu-embedding-benchmark ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── webgpu-nomic-embed ├── .gitignore ├── index.html ├── main.js ├── package-lock.json ├── package.json ├── style.css └── vite.config.js ├── whisper-node ├── README.md ├── index.js ├── package-lock.json ├── package.json ├── utils.js └── word-level-timestamps.js ├── whisper-word-timestamps ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── components │ │ ├── LanguageSelector.jsx │ │ ├── MediaInput.jsx │ │ ├── Progress.jsx │ │ └── Transcript.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js ├── zero-shot-classification ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── hf-logo.svg ├── src │ ├── App.jsx │ ├── index.css │ ├── main.jsx │ └── worker.js └── vite.config.js └── zyphra-zr1-webgpu ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public ├── banner.png └── logo.png ├── src ├── App.jsx ├── components │ ├── Chat.css │ ├── Chat.jsx │ ├── Progress.jsx │ └── icons │ │ ├── ArrowRightIcon.jsx │ │ ├── BotIcon.jsx │ │ ├── BrainIcon.jsx │ │ ├── StopIcon.jsx │ │ └── UserIcon.jsx ├── index.css ├── main.jsx └── worker.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .next 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /adaptive-retrieval/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:react/recommended", 7 | "plugin:react/jsx-runtime", 8 | "plugin:react-hooks/recommended", 9 | ], 10 | ignorePatterns: ["dist", ".eslintrc.cjs"], 11 | parserOptions: { ecmaVersion: "latest", sourceType: "module" }, 12 | settings: { react: { version: "18.2" } }, 13 | plugins: ["react-refresh"], 14 | rules: { 15 | "react-refresh/only-export-components": [ 16 | "warn", 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /adaptive-retrieval/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /adaptive-retrieval/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Adaptive Retrieval w/ Transformers.js 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /adaptive-retrieval/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /adaptive-retrieval/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /adaptive-retrieval/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /adaptive-retrieval/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /adaptive-retrieval/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /attention-visualization/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /attention-visualization/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Attention Visualization 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /attention-visualization/public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/attention-visualization/public/banner.png -------------------------------------------------------------------------------- /attention-visualization/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /attention-visualization/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App.jsx"; 5 | 6 | createRoot(document.getElementById("root")).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /attention-visualization/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import tailwindcss from "@tailwindcss/vite"; 3 | import react from "@vitejs/plugin-react"; 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [tailwindcss(), react()], 8 | build: { target: "esnext" }, 9 | worker: { format: "es" }, 10 | }); 11 | -------------------------------------------------------------------------------- /browser-extension/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /browser-extension/build/.gitignore: -------------------------------------------------------------------------------- 1 | # Running `npm run build` will build the project and output the files here. 2 | * 3 | !.gitignore 4 | -------------------------------------------------------------------------------- /browser-extension/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "browser-extension", 3 | "version": "0.0.1", 4 | "description": "Transformers.js | Sample browser extension", 5 | "scripts": { 6 | "build": "webpack", 7 | "dev": "webpack --watch" 8 | }, 9 | "type": "module", 10 | "author": "Hugging Face", 11 | "license": "Apache-2.0", 12 | "dependencies": { 13 | "@huggingface/transformers": "3.5.0" 14 | }, 15 | "devDependencies": { 16 | "copy-webpack-plugin": "^12.0.2", 17 | "html-webpack-plugin": "^5.6.3", 18 | "webpack": "^5.96.1", 19 | "webpack-cli": "^5.1.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /browser-extension/public/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/browser-extension/public/icons/icon.png -------------------------------------------------------------------------------- /browser-extension/src/constants.js: -------------------------------------------------------------------------------- 1 | export const CONTEXT_MENU_ITEM_ID = "classify-selection"; 2 | export const ACTION_NAME = "classify"; 3 | -------------------------------------------------------------------------------- /browser-extension/src/content.js: -------------------------------------------------------------------------------- 1 | // content.js - the content scripts which is run in the context of web pages, and has access 2 | // to the DOM and other web APIs. 3 | // 4 | // Example usage: 5 | // 6 | // import { ACTION_NAME } from "./constants.js"; 7 | // const message = { 8 | // action: ACTION_NAME, 9 | // text: 'text to classify', 10 | // } 11 | // const response = await chrome.runtime.sendMessage(message); 12 | // console.log('received user data', response) 13 | -------------------------------------------------------------------------------- /browser-extension/src/popup.css: -------------------------------------------------------------------------------- 1 | /* Styles go here */ 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | font-family: "Roboto", sans-serif; 8 | } 9 | 10 | h1 { 11 | font-size: 40px; 12 | text-align: center; 13 | font-weight: 500; 14 | } 15 | 16 | h2 { 17 | font-size: 20px; 18 | text-align: center; 19 | font-weight: 400; 20 | margin-bottom: 16px; 21 | } 22 | 23 | .container { 24 | width: 360px; 25 | } 26 | 27 | html, 28 | body { 29 | min-width: 400px; 30 | min-height: 500px; 31 | } 32 | 33 | body { 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | } 38 | 39 | #text { 40 | width: 100%; 41 | padding: 8px; 42 | font-size: 20px; 43 | margin-bottom: 8px; 44 | } 45 | 46 | #output { 47 | font-size: 20px; 48 | font-family: "Roboto Mono", monospace; 49 | height: 100px; 50 | } 51 | -------------------------------------------------------------------------------- /browser-extension/src/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transformers.js | Sample Browser Extension 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Transformers.js

16 |

Run 🤗 Transformers in a Browser Extension!

17 | 18 | 

19 |     

20 |   
21 | 
22 | 


--------------------------------------------------------------------------------
/bun/README.md:
--------------------------------------------------------------------------------
 1 | # Transformers.js x Bun demo application
 2 | 
 3 | To install dependencies:
 4 | 
 5 | ```bash
 6 | bun install
 7 | ```
 8 | 
 9 | To run:
10 | 
11 | ```bash
12 | bun run index.ts
13 | ```
14 | 
15 | This project was created using `bun init` in bun v1.1.24. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
16 | 


--------------------------------------------------------------------------------
/bun/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/bun/bun.lockb


--------------------------------------------------------------------------------
/bun/index.ts:
--------------------------------------------------------------------------------
 1 | import { pipeline } from "@huggingface/transformers";
 2 | 
 3 | // Create a feature-extraction pipeline
 4 | const extractor = await pipeline(
 5 |   "feature-extraction",
 6 |   "Xenova/all-MiniLM-L6-v2",
 7 | );
 8 | 
 9 | // Compute sentence embeddings
10 | const sentences = ["Hello world", "This is an example sentence"];
11 | const output = await extractor(sentences, { pooling: "mean", normalize: true });
12 | console.log(output.tolist());
13 | // [
14 | //   [ -0.03172111138701439, 0.04395204409956932, 0.00014728980022482574, ... ],
15 | //   [ 0.0646488294005394, 0.0715673640370369, 0.05925070866942406, ... ]
16 | // ]
17 | 


--------------------------------------------------------------------------------
/bun/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bun",
 3 |   "module": "index.ts",
 4 |   "type": "module",
 5 |   "devDependencies": {
 6 |     "@types/bun": "latest"
 7 |   },
 8 |   "peerDependencies": {
 9 |     "typescript": "^5.0.0"
10 |   },
11 |   "dependencies": {
12 |     "@huggingface/transformers": "3.5.0"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/bun/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     // Enable latest features
 4 |     "lib": ["ESNext", "DOM"],
 5 |     "target": "ESNext",
 6 |     "module": "ESNext",
 7 |     "moduleDetection": "force",
 8 |     "jsx": "react-jsx",
 9 |     "allowJs": true,
10 | 
11 |     // Bundler mode
12 |     "moduleResolution": "bundler",
13 |     "allowImportingTsExtensions": true,
14 |     "verbatimModuleSyntax": true,
15 |     "noEmit": true,
16 | 
17 |     // Best practices
18 |     "strict": true,
19 |     "skipLibCheck": true,
20 |     "noFallthroughCasesInSwitch": true,
21 | 
22 |     // Some stricter flags (disabled by default)
23 |     "noUnusedLocals": false,
24 |     "noUnusedParameters": false,
25 |     "noPropertyAccessFromIndexSignature": false
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/code-completion/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/code-completion/README.md:
--------------------------------------------------------------------------------
 1 | # Code Completion
 2 | 
 3 | ## Getting Started
 4 | 
 5 | Follow the steps below to set up and run the application.
 6 | 
 7 | ### 1. Clone the Repository
 8 | 
 9 | Clone the examples repository from GitHub:
10 | 
11 | ```sh
12 | git clone https://github.com/huggingface/transformers.js-examples.git
13 | ```
14 | 
15 | ### 2. Navigate to the Project Directory
16 | 
17 | Change your working directory to the `code-completion` folder:
18 | 
19 | ```sh
20 | cd transformers.js-examples/code-completion
21 | ```
22 | 
23 | ### 3. Install Dependencies
24 | 
25 | Install the necessary dependencies using npm:
26 | 
27 | ```sh
28 | npm i
29 | ```
30 | 
31 | ### 4. Run the Development Server
32 | 
33 | Start the development server:
34 | 
35 | ```sh
36 | npm run dev
37 | ```
38 | 
39 | The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
40 | 


--------------------------------------------------------------------------------
/code-completion/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     In-browser Code Completion /w Transformers.js
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/code-completion/src/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | 


--------------------------------------------------------------------------------
/code-completion/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/code-completion/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/conversational-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/conversational-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Transformers.js | Conversational demo
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/conversational-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/conversational-webgpu/public/logo.png


--------------------------------------------------------------------------------
/conversational-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | @keyframes ripple {
 4 |   from {
 5 |     transform: scale(1);
 6 |     opacity: 0.7;
 7 |   }
 8 |   to {
 9 |     transform: scale(2);
10 |     opacity: 0;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/conversational-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/conversational-webgpu/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import tailwindcss from "@tailwindcss/vite";
 4 | 
 5 | // https://vite.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [tailwindcss(), react()],
 8 |   build: {
 9 |     target: "esnext",
10 |   },
11 |   worker: {
12 |     format: "es",
13 |   },
14 |   resolve: {
15 |     // Only bundle a single instance of Transformers.js
16 |     // (shared by `@huggingface/transformers` and `kokoro-js`)
17 |     dedupe: ["@huggingface/transformers"],
18 |   },
19 | });
20 | 


--------------------------------------------------------------------------------
/cross-encoder/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/cross-encoder/README.md:
--------------------------------------------------------------------------------
 1 | # Cross Encoder
 2 | 
 3 | ## Getting Started
 4 | 
 5 | Follow the steps below to set up and run the application.
 6 | 
 7 | ### 1. Clone the Repository
 8 | 
 9 | Clone the examples repository from GitHub:
10 | 
11 | ```sh
12 | git clone https://github.com/huggingface/transformers.js-examples.git
13 | ```
14 | 
15 | ### 2. Navigate to the Project Directory
16 | 
17 | Change your working directory to the `cross-encoder` folder:
18 | 
19 | ```sh
20 | cd transformers.js-examples/cross-encoder
21 | ```
22 | 
23 | ### 3. Install Dependencies
24 | 
25 | Install the necessary dependencies using npm:
26 | 
27 | ```sh
28 | npm i
29 | ```
30 | 
31 | ### 4. Run the Development Server
32 | 
33 | Start the development server:
34 | 
35 | ```sh
36 | npm run dev
37 | ```
38 | 
39 | The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
40 | 


--------------------------------------------------------------------------------
/cross-encoder/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Reranking w/ Transformers.js
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/cross-encoder/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cross-encoder",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@huggingface/transformers": "3.5.0",
14 |     "@tailwindcss/vite": "^4.0.0-beta.8",
15 |     "react": "^18.3.1",
16 |     "react-dom": "^18.3.1",
17 |     "tailwindcss": "^4.0.0-beta.8"
18 |   },
19 |   "devDependencies": {
20 |     "@eslint/js": "^9.17.0",
21 |     "@types/react": "^18.3.17",
22 |     "@types/react-dom": "^18.3.5",
23 |     "@vitejs/plugin-react": "^4.3.4",
24 |     "eslint": "^9.17.0",
25 |     "eslint-plugin-react": "^7.37.2",
26 |     "eslint-plugin-react-hooks": "^5.0.0",
27 |     "eslint-plugin-react-refresh": "^0.4.16",
28 |     "globals": "^15.13.0",
29 |     "vite": "^6.0.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/cross-encoder/src/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | 


--------------------------------------------------------------------------------
/cross-encoder/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/cross-encoder/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     DeepSeek-R1 WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/deepseek-r1-webgpu/public/banner.png


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/deepseek-r1-webgpu/public/logo.png


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/deepseek-r1-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/deno-embed/README.md:
--------------------------------------------------------------------------------
 1 | # deno-embed
 2 | 
 3 | This project demonstrates how to compute text embeddings with Transformers.js in a Deno environment.
 4 | 
 5 | ## Instructions
 6 | 
 7 | 1. Clone the repository:
 8 | 
 9 |    ```sh
10 |    git clone https://github.com/huggingface/transformers.js-examples.git
11 |    ```
12 | 
13 | 2. Change directory to the `deno-embed` project:
14 | 
15 |    ```sh
16 |    cd transformers.js-examples/deno-embed
17 |    ```
18 | 
19 | 3. Install the dependencies:
20 | 
21 |    ```sh
22 |    deno install --allow-scripts
23 |    ```
24 | 
25 | 4. Run the example:
26 |    ```sh
27 |    deno run --allow-net --allow-ffi --allow-env --allow-read --allow-write main.ts
28 |    ```
29 | 


--------------------------------------------------------------------------------
/deno-embed/deno.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tasks": {
 3 |     "dev": "deno run --watch main.ts"
 4 |   },
 5 |   "imports": {
 6 |     "@huggingface/transformers": "npm:@huggingface/transformers@3.5.0"
 7 |   },
 8 |   "nodeModulesDir": "auto"
 9 | }
10 | 


--------------------------------------------------------------------------------
/deno-embed/main.ts:
--------------------------------------------------------------------------------
 1 | import { pipeline } from "@huggingface/transformers";
 2 | 
 3 | if (import.meta.main) {
 4 |   // Create a feature-extraction pipeline
 5 |   const extractor = await pipeline(
 6 |     "feature-extraction",
 7 |     "Xenova/all-MiniLM-L6-v2",
 8 |   );
 9 | 
10 |   // Compute sentence embeddings
11 |   const sentences = ["Hello world", "This is an example sentence"];
12 |   const output = await extractor(sentences, {
13 |     pooling: "mean",
14 |     normalize: true,
15 |   });
16 |   console.log(output.tolist());
17 |   // [
18 |   //   [ -0.03172111138701439, 0.04395204409956932, 0.00014728980022482574, ... ],
19 |   //   [ 0.0646488294005394, 0.0715673640370369, 0.05925070866942406, ... ]
20 |   // ]
21 | }
22 | 


--------------------------------------------------------------------------------
/depth-anything/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/depth-anything/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "depth-anything",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.5"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0",
16 |     "three": "^0.171.0"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/depth-anything/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/depth-estimation-video/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/depth-estimation-video/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "depth-estimation-video",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.5"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/depth-estimation-video/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/depth-pro-node/assets/depth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/depth-pro-node/assets/depth.png


--------------------------------------------------------------------------------
/depth-pro-node/assets/image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/depth-pro-node/assets/image.jpg


--------------------------------------------------------------------------------
/depth-pro-node/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "depth-pro-node",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "description": "",
13 |   "dependencies": {
14 |     "@huggingface/transformers": "3.5.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/florence2-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/florence2-webgpu/README.md:
--------------------------------------------------------------------------------
 1 | # Florence-2 WebGPU
 2 | 
 3 | ## Getting Started
 4 | 
 5 | Follow the steps below to set up and run the application.
 6 | 
 7 | ### 1. Clone the Repository
 8 | 
 9 | Clone the examples repository from GitHub:
10 | 
11 | ```sh
12 | git clone https://github.com/huggingface/transformers.js-examples.git
13 | ```
14 | 
15 | ### 2. Navigate to the Project Directory
16 | 
17 | Change your working directory to the `florence2-webgpu` folder:
18 | 
19 | ```sh
20 | cd transformers.js-examples/florence2-webgpu
21 | ```
22 | 
23 | ### 3. Install Dependencies
24 | 
25 | Install the necessary dependencies using npm:
26 | 
27 | ```sh
28 | npm i
29 | ```
30 | 
31 | ### 4. Run the Development Server
32 | 
33 | Start the development server:
34 | 
35 | ```sh
36 | npm run dev
37 | ```
38 | 
39 | The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
40 | 


--------------------------------------------------------------------------------
/florence2-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Florence-2 WebGPU
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/florence2-webgpu/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "florence2-webgpu",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@huggingface/transformers": "3.5.0",
14 |     "@tailwindcss/vite": "^4.0.0-beta.8",
15 |     "react": "^18.3.1",
16 |     "react-dom": "^18.3.1",
17 |     "tailwindcss": "^4.0.0-beta.8"
18 |   },
19 |   "devDependencies": {
20 |     "@eslint/js": "^9.17.0",
21 |     "@types/react": "^18.3.17",
22 |     "@types/react-dom": "^18.3.5",
23 |     "@vitejs/plugin-react": "^4.3.4",
24 |     "eslint": "^9.17.0",
25 |     "eslint-plugin-react": "^7.37.2",
26 |     "eslint-plugin-react-hooks": "^5.0.0",
27 |     "eslint-plugin-react-refresh": "^0.4.16",
28 |     "globals": "^15.13.0",
29 |     "vite": "^6.0.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/florence2-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/florence2-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | *::-webkit-scrollbar {
 4 |   width: 0.5rem;
 5 | }
 6 | 
 7 | *::-webkit-scrollbar-track {
 8 |   border-radius: 9999px;
 9 |   background-color: #f3f4f6;
10 |   /* bg-gray-100 */
11 | }
12 | 
13 | *::-webkit-scrollbar-thumb {
14 |   border-radius: 9999px;
15 |   background-color: #d1d5db;
16 |   /* bg-gray-300 */
17 | }
18 | 
19 | *::-webkit-scrollbar-thumb:hover {
20 |   background-color: #6b7280;
21 |   /* bg-gray-500 */
22 | }
23 | 
24 | @media (prefers-color-scheme: dark) {
25 |   *::-webkit-scrollbar-track {
26 |     background-color: #374151;
27 |     /* dark:bg-gray-700 */
28 |   }
29 | 
30 |   *::-webkit-scrollbar-thumb {
31 |     background-color: #4b5563;
32 |     /* dark:bg-gray-600 */
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/florence2-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/florence2-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Gemma 2 JPN WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 | 
13 |     
26 |     
30 |     
31 |   
32 | 
33 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/gemma-2-2b-jpn-webgpu/public/banner.png


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/gemma-2-2b-jpn-webgpu/public/logo.png


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .scrollbar-thin::-webkit-scrollbar {
 7 |     @apply w-2;
 8 |   }
 9 | 
10 |   .scrollbar-thin::-webkit-scrollbar-track {
11 |     @apply rounded-full bg-gray-100 dark:bg-gray-700;
12 |   }
13 | 
14 |   .scrollbar-thin::-webkit-scrollbar-thumb {
15 |     @apply rounded-full bg-gray-300 dark:bg-gray-600;
16 |   }
17 | 
18 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
19 |     @apply bg-gray-500;
20 |   }
21 | 
22 |   .animation-delay-200 {
23 |     animation-delay: 200ms;
24 |   }
25 |   .animation-delay-400 {
26 |     animation-delay: 400ms;
27 |   }
28 | 
29 |   .overflow-wrap-anywhere {
30 |     overflow-wrap: anywhere;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/gemma-2-2b-jpn-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Janus Pro WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 | 
13 |     
26 |     
30 |     
31 |   
32 | 
33 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/janus-pro-webgpu/public/banner.png


--------------------------------------------------------------------------------
/janus-pro-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/janus-pro-webgpu/public/logo.png


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/ImagePreview.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import CrossIcon from "./icons/CrossIcon";
 3 | 
 4 | export default function ImagePreview({ src, onRemove, ...props }) {
 5 |   const [hover, setHover] = useState(false);
 6 | 
 7 |   return (
 8 |     
 setHover(true)}
11 |       onMouseLeave={() => setHover(false)}
12 |     >
13 |       
17 |       Upload preview
22 |     

23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/icons/CrossIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function CrossIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |     
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/icons/ImageIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ImageIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |     
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .scrollbar-thin::-webkit-scrollbar {
 7 |     @apply w-2;
 8 |   }
 9 | 
10 |   .scrollbar-thin::-webkit-scrollbar-track {
11 |     @apply rounded-full bg-gray-100 dark:bg-gray-700;
12 |   }
13 | 
14 |   .scrollbar-thin::-webkit-scrollbar-thumb {
15 |     @apply rounded-full bg-gray-300 dark:bg-gray-600;
16 |   }
17 | 
18 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
19 |     @apply bg-gray-500;
20 |   }
21 | 
22 |   .animation-delay-200 {
23 |     animation-delay: 200ms;
24 |   }
25 |   .animation-delay-400 {
26 |     animation-delay: 400ms;
27 |   }
28 | 
29 |   .overflow-wrap-anywhere {
30 |     overflow-wrap: anywhere;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/janus-pro-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/janus-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/janus-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Janus WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 | 
13 |     
26 |     
30 |     
31 |   
32 | 
33 | 


--------------------------------------------------------------------------------
/janus-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/janus-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/janus-webgpu/public/banner.png


--------------------------------------------------------------------------------
/janus-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/janus-webgpu/public/logo.png


--------------------------------------------------------------------------------
/janus-webgpu/src/components/ImagePreview.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import CrossIcon from "./icons/CrossIcon";
 3 | 
 4 | export default function ImagePreview({ src, onRemove, ...props }) {
 5 |   const [hover, setHover] = useState(false);
 6 | 
 7 |   return (
 8 |     
 setHover(true)}
11 |       onMouseLeave={() => setHover(false)}
12 |     >
13 |       
17 |       Upload preview
22 |     

23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/components/icons/CrossIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function CrossIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |     
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/components/icons/ImageIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ImageIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |     
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .scrollbar-thin::-webkit-scrollbar {
 7 |     @apply w-2;
 8 |   }
 9 | 
10 |   .scrollbar-thin::-webkit-scrollbar-track {
11 |     @apply rounded-full bg-gray-100 dark:bg-gray-700;
12 |   }
13 | 
14 |   .scrollbar-thin::-webkit-scrollbar-thumb {
15 |     @apply rounded-full bg-gray-300 dark:bg-gray-600;
16 |   }
17 | 
18 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
19 |     @apply bg-gray-500;
20 |   }
21 | 
22 |   .animation-delay-200 {
23 |     animation-delay: 200ms;
24 |   }
25 |   .animation-delay-400 {
26 |     animation-delay: 400ms;
27 |   }
28 | 
29 |   .overflow-wrap-anywhere {
30 |     overflow-wrap: anywhere;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/janus-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/janus-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/janus-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/llama-3.2-node/README.md:
--------------------------------------------------------------------------------
 1 | # llama-3.2-node
 2 | 
 3 | This project demonstrates how to use [Llama 3.2 1B](https://huggingface.co/onnx-community/Llama-3.2-1B-Instruct) in a Node.js environment.
 4 | 
 5 | ## Instructions
 6 | 
 7 | 1. Clone the repository:
 8 |    ```sh
 9 |    git clone https://github.com/huggingface/transformers.js-examples.git
10 |    ```
11 | 2. Change directory to the `llama-3.2-node` project:
12 |    ```sh
13 |    cd transformers.js-examples/llama-3.2-node
14 |    ```
15 | 3. Install the dependencies:
16 |    ```sh
17 |    npm install
18 |    ```
19 | 4. Run the example:
20 |    ```sh
21 |    node index.js
22 |    ```
23 | 


--------------------------------------------------------------------------------
/llama-3.2-node/index.js:
--------------------------------------------------------------------------------
 1 | import { pipeline } from "@huggingface/transformers";
 2 | 
 3 | // Create a text-generation pipeline
 4 | const generator = await pipeline(
 5 |   "text-generation",
 6 |   "onnx-community/Llama-3.2-1B-Instruct",
 7 | );
 8 | 
 9 | // Define the list of messages
10 | const messages = [
11 |   { role: "system", content: "You are a helpful assistant." },
12 |   { role: "user", content: "Tell me a funny joke." },
13 | ];
14 | 
15 | // Generate a response
16 | const output = await generator(messages, { max_new_tokens: 128 });
17 | console.log(output[0].generated_text.at(-1).content);
18 | 


--------------------------------------------------------------------------------
/llama-3.2-node/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "llama-3.2-node",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "description": "",
13 |   "dependencies": {
14 |     "@huggingface/transformers": "3.5.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Llama-3.2 Reasoning WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/llama-3.2-reasoning-webgpu/public/banner.png


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/llama-3.2-reasoning-webgpu/public/logo.png


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/llama-3.2-reasoning-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Llama-3.2 WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 | 
13 |     
26 |     
30 |     
31 |   
32 | 
33 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/llama-3.2-webgpu/public/banner.png


--------------------------------------------------------------------------------
/llama-3.2-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/llama-3.2-webgpu/public/logo.png


--------------------------------------------------------------------------------
/llama-3.2-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .scrollbar-thin::-webkit-scrollbar {
 7 |     @apply w-2;
 8 |   }
 9 | 
10 |   .scrollbar-thin::-webkit-scrollbar-track {
11 |     @apply rounded-full bg-gray-100 dark:bg-gray-700;
12 |   }
13 | 
14 |   .scrollbar-thin::-webkit-scrollbar-thumb {
15 |     @apply rounded-full bg-gray-300 dark:bg-gray-600;
16 |   }
17 | 
18 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
19 |     @apply bg-gray-500;
20 |   }
21 | 
22 |   .animation-delay-200 {
23 |     animation-delay: 200ms;
24 |   }
25 |   .animation-delay-400 {
26 |     animation-delay: 400ms;
27 |   }
28 | 
29 |   .overflow-wrap-anywhere {
30 |     overflow-wrap: anywhere;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/llama-3.2-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/moonshine-web/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/moonshine-web/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/moonshine-web/public/banner.png


--------------------------------------------------------------------------------
/moonshine-web/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/moonshine-web/public/logo.png


--------------------------------------------------------------------------------
/moonshine-web/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
 2 | @import "tailwindcss";
 3 | 
 4 | * {
 5 |   font-family: "Poppins", sans-serif;
 6 | }
 7 | 
 8 | html {
 9 |   overflow: hidden;
10 | }
11 | 


--------------------------------------------------------------------------------
/moonshine-web/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/moonshine-web/src/utils.js:
--------------------------------------------------------------------------------
 1 | export function formatDate(timestamp) {
 2 |   return new Date(timestamp).toLocaleString("zh", {
 3 |     hour12: false,
 4 |     year: "numeric",
 5 |     month: "numeric",
 6 |     day: "numeric",
 7 |     hour: "numeric",
 8 |     minute: "numeric",
 9 |     second: "numeric",
10 |     fractionalSecondDigits: 3,
11 |   });
12 | }
13 | 
14 | export async function supportsWebGPU() {
15 |   try {
16 |     if (!navigator.gpu) return false;
17 |     await navigator.gpu.requestAdapter();
18 |     return true;
19 |   } catch (e) {
20 |     return false;
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/moonshine-web/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import tailwindcss from "@tailwindcss/vite";
 4 | 
 5 | // https://vite.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [react(), tailwindcss()],
 8 |   build: { target: "esnext" },
 9 |   worker: { format: "es" },
10 | });
11 | 


--------------------------------------------------------------------------------
/musicgen-web/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/musicgen-web/README.md:
--------------------------------------------------------------------------------
 1 | # MusicGen Web
 2 | 
 3 | ## Getting Started
 4 | 
 5 | Follow the steps below to set up and run the application.
 6 | 
 7 | ### 1. Clone the Repository
 8 | 
 9 | Clone the examples repository from GitHub:
10 | 
11 | ```sh
12 | git clone https://github.com/huggingface/transformers.js-examples.git
13 | ```
14 | 
15 | ### 2. Navigate to the Project Directory
16 | 
17 | Change your working directory to the `musicgen-web` folder:
18 | 
19 | ```sh
20 | cd transformers.js-examples/musicgen-web
21 | ```
22 | 
23 | ### 3. Install Dependencies
24 | 
25 | Install the necessary dependencies using npm:
26 | 
27 | ```sh
28 | npm i
29 | ```
30 | 
31 | ### 4. Run the Development Server
32 | 
33 | Start the development server:
34 | 
35 | ```sh
36 | npm run dev
37 | ```
38 | 
39 | The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
40 | 


--------------------------------------------------------------------------------
/musicgen-web/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     
 8 |       MusicGen Web | In-browser text-to-music w/ 🤗 Transformers.js!
 9 |     
10 |   
11 |   
12 |     

13 |     
14 |   
15 | 
16 | 


--------------------------------------------------------------------------------
/musicgen-web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "musicgen-web",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@huggingface/transformers": "3.5.0",
14 |     "@tailwindcss/vite": "^4.0.0-beta.8",
15 |     "react": "^18.3.1",
16 |     "react-dom": "^18.3.1",
17 |     "tailwindcss": "^4.0.0-beta.8"
18 |   },
19 |   "devDependencies": {
20 |     "@eslint/js": "^9.17.0",
21 |     "@types/react": "^18.3.17",
22 |     "@types/react-dom": "^18.3.5",
23 |     "@vitejs/plugin-react": "^4.3.4",
24 |     "eslint": "^9.17.0",
25 |     "eslint-plugin-react": "^7.37.2",
26 |     "eslint-plugin-react-hooks": "^5.0.0",
27 |     "eslint-plugin-react-refresh": "^0.4.16",
28 |     "globals": "^15.13.0",
29 |     "vite": "^6.0.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/musicgen-web/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/musicgen-web/src/App.css


--------------------------------------------------------------------------------
/musicgen-web/src/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | 


--------------------------------------------------------------------------------
/musicgen-web/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/musicgen-web/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/next-client/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/next-client/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/next-client/app/favicon.ico


--------------------------------------------------------------------------------
/next-client/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --background: #0a0a0a;
13 |     --foreground: #ededed;
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background: var(--background);
20 |   font-family: Arial, Helvetica, sans-serif;
21 | }
22 | 


--------------------------------------------------------------------------------
/next-client/app/layout.js:
--------------------------------------------------------------------------------
 1 | import { Geist, Geist_Mono } from "next/font/google";
 2 | import "./globals.css";
 3 | 
 4 | const geistSans = Geist({
 5 |   variable: "--font-geist-sans",
 6 |   subsets: ["latin"],
 7 | });
 8 | 
 9 | const geistMono = Geist_Mono({
10 |   variable: "--font-geist-mono",
11 |   subsets: ["latin"],
12 | });
13 | 
14 | export const metadata = {
15 |   title: "Create Next App",
16 |   description: "Generated by create next app",
17 | };
18 | 
19 | export default function RootLayout({ children }) {
20 |   return (
21 |     
22 |       
25 |         {children}
26 |       
27 |     
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/next-client/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [...compat.extends("next/core-web-vitals")];
13 | 
14 | export default eslintConfig;
15 | 


--------------------------------------------------------------------------------
/next-client/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/next-client/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   // https://nextjs.org/docs/app/api-reference/config/next-config-js/output
 4 |   output: "standalone",
 5 |   // https://nextjs.org/docs/app/api-reference/config/next-config-js/serverExternalPackages
 6 |   serverExternalPackages: ["@huggingface/transformers"],
 7 | };
 8 | 
 9 | export default nextConfig;
10 | 


--------------------------------------------------------------------------------
/next-client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@huggingface/transformers": "3.5.0",
13 |     "next": "^15.2.4",
14 |     "react": "^19.0.0",
15 |     "react-dom": "^19.0.0"
16 |   },
17 |   "devDependencies": {
18 |     "@eslint/eslintrc": "^3",
19 |     "eslint": "^9",
20 |     "eslint-config-next": "15.1.6",
21 |     "postcss": "^8",
22 |     "tailwindcss": "^3.4.1"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/next-client/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/next-client/public/window.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/next-client/tailwind.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 5 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       colors: {
11 |         background: "var(--background)",
12 |         foreground: "var(--foreground)",
13 |       },
14 |     },
15 |   },
16 |   plugins: [],
17 | };
18 | 


--------------------------------------------------------------------------------
/next-server/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/next-server/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | 
32 | # env files (can opt-in for commiting if needed)
33 | .env*
34 | 
35 | # vercel
36 | .vercel
37 | 
38 | # typescript
39 | *.tsbuildinfo
40 | next-env.d.ts
41 | 


--------------------------------------------------------------------------------
/next-server/app/api/classify/route.js:
--------------------------------------------------------------------------------
 1 | // https://nextjs.org/docs/app/building-your-application/routing/route-handlers
 2 | 
 3 | import { pipeline } from "@huggingface/transformers";
 4 | 
 5 | // NOTE: We attach the classifier to the global object to avoid unnecessary reloads during development
 6 | const classifier = (globalThis.classifier ??= await pipeline(
 7 |   "text-classification",
 8 |   "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
 9 | ));
10 | 
11 | export async function GET(request) {
12 |   const text = request.nextUrl.searchParams.get("text");
13 | 
14 |   if (!text) {
15 |     return Response.json({ message: "No text provided" }, { status: 400 });
16 |   }
17 | 
18 |   const result = await classifier(text);
19 |   return Response.json(result[0]);
20 | }
21 | 


--------------------------------------------------------------------------------
/next-server/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/next-server/app/favicon.ico


--------------------------------------------------------------------------------
/next-server/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/next-server/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/next-server/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/next-server/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/next-server/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --background: #0a0a0a;
13 |     --foreground: #ededed;
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background: var(--background);
20 |   font-family: Arial, Helvetica, sans-serif;
21 | }
22 | 


--------------------------------------------------------------------------------
/next-server/app/layout.js:
--------------------------------------------------------------------------------
 1 | import localFont from "next/font/local";
 2 | import "./globals.css";
 3 | 
 4 | const geistSans = localFont({
 5 |   src: "./fonts/GeistVF.woff",
 6 |   variable: "--font-geist-sans",
 7 |   weight: "100 900",
 8 | });
 9 | const geistMono = localFont({
10 |   src: "./fonts/GeistMonoVF.woff",
11 |   variable: "--font-geist-mono",
12 |   weight: "100 900",
13 | });
14 | 
15 | export const metadata = {
16 |   title: "Create Next App",
17 |   description: "Generated by create next app",
18 | };
19 | 
20 | export default function RootLayout({ children }) {
21 |   return (
22 |     
23 |       
26 |         {children}
27 |       
28 |     
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/next-server/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/next-server/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   // https://nextjs.org/docs/app/api-reference/config/next-config-js/output
 4 |   output: "standalone",
 5 |   // https://nextjs.org/docs/app/api-reference/config/next-config-js/serverExternalPackages
 6 |   serverExternalPackages: ["@huggingface/transformers"],
 7 | };
 8 | 
 9 | export default nextConfig;
10 | 


--------------------------------------------------------------------------------
/next-server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-server",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@huggingface/transformers": "3.5.0",
13 |     "next": "^15.2.4",
14 |     "react": "^19.0.0",
15 |     "react-dom": "^19.0.0"
16 |   },
17 |   "devDependencies": {
18 |     "@eslint/eslintrc": "^3",
19 |     "eslint": "^9",
20 |     "eslint-config-next": "15.1.6",
21 |     "postcss": "^8",
22 |     "tailwindcss": "^3.4.1"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/next-server/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/next-server/public/window.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/next-server/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 5 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       colors: {
11 |         background: "var(--background)",
12 |         foreground: "var(--foreground)",
13 |       },
14 |     },
15 |   },
16 |   plugins: [],
17 | };
18 | 


--------------------------------------------------------------------------------
/node-audio-processing/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "node-audio-processing",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "@huggingface/transformers": "3.5.0",
15 |     "wavefile": "11.0.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/node-cjs/README.md:
--------------------------------------------------------------------------------
 1 | # node-cjs
 2 | 
 3 | This project demonstrates how to use `@huggingface/transformers` in a Node.js environment using CommonJS Modules (CJS). The example utilizes `require` statements for module loading.
 4 | 
 5 | ## Instructions
 6 | 
 7 | 1. Clone the repository:
 8 |    ```sh
 9 |    git clone https://github.com/huggingface/transformers.js-examples.git
10 |    ```
11 | 2. Change directory to the `node-cjs` project:
12 |    ```sh
13 |    cd transformers.js-examples/node-cjs
14 |    ```
15 | 3. Install the dependencies:
16 |    ```sh
17 |    npm install
18 |    ```
19 | 4. Run the example:
20 |    ```sh
21 |    node index.js
22 |    ```
23 | 


--------------------------------------------------------------------------------
/node-cjs/index.js:
--------------------------------------------------------------------------------
1 | const { pipeline } = require("@huggingface/transformers");
2 | 
3 | async function main() {
4 |   const classifier = await pipeline("text-classification");
5 |   const result = await classifier("I love Transformers.js!");
6 |   console.log(result); // [{ label: 'POSITIVE', score: 0.9997673034667969 }]
7 | }
8 | main();
9 | 


--------------------------------------------------------------------------------
/node-cjs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "node-cjs",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "author": "Hugging Face",
 6 |   "license": "Apache-2.0",
 7 |   "description": "",
 8 |   "dependencies": {
 9 |     "@huggingface/transformers": "3.5.0"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/node-esm/README.md:
--------------------------------------------------------------------------------
 1 | # node-esm
 2 | 
 3 | This project demonstrates how to use `@huggingface/transformers` in a Node.js environment using ECMAScript Modules (ESM). The example utilizes `import` statements for module loading.
 4 | 
 5 | ## Instructions
 6 | 
 7 | 1. Clone the repository:
 8 |    ```sh
 9 |    git clone https://github.com/huggingface/transformers.js-examples.git
10 |    ```
11 | 2. Change directory to the `node-esm` project:
12 |    ```sh
13 |    cd transformers.js-examples/node-esm
14 |    ```
15 | 3. Install the dependencies:
16 |    ```sh
17 |    npm install
18 |    ```
19 | 4. Run the example:
20 |    ```sh
21 |    node index.js
22 |    ```
23 | 


--------------------------------------------------------------------------------
/node-esm/index.js:
--------------------------------------------------------------------------------
1 | import { pipeline } from "@huggingface/transformers";
2 | 
3 | const classifier = await pipeline("text-classification");
4 | const result = await classifier("I love Transformers.js!");
5 | console.log(result); // [{ label: 'POSITIVE', score: 0.9997673034667969 }]
6 | 


--------------------------------------------------------------------------------
/node-esm/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "node-esm",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "type": "module",
 6 |   "author": "Hugging Face",
 7 |   "license": "Apache-2.0",
 8 |   "description": "",
 9 |   "dependencies": {
10 |     "@huggingface/transformers": "3.5.0"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/omniparser-node/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "omniparser-node",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "description": "",
13 |   "dependencies": {
14 |     "@huggingface/transformers": "3.5.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "transformers.js-examples",
 3 |   "version": "1.0.0",
 4 |   "description": "A collection of [🤗 Transformers.js](https://huggingface.co/docs/transformers.js) demos and example applications.",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "update": "node .scripts/update.js",
 8 |     "audit": "node .scripts/update.js --audit_only",
 9 |     "build": "node .scripts/build.js",
10 |     "format": "prettier --write ."
11 |   },
12 |   "keywords": [
13 |     "transformers",
14 |     "transformers.js",
15 |     "hugging face",
16 |     "huggingface",
17 |     "machine learning",
18 |     "ai"
19 |   ],
20 |   "author": "Hugging Face",
21 |   "license": "Apache-2.0",
22 |   "devDependencies": {
23 |     "prettier": "^3.3.3",
24 |     "prettier-plugin-svelte": "^3.2.7",
25 |     "prettier-plugin-tailwindcss": "^0.6.8"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: PGlite Semantic Search
 3 | emoji: 🔎
 4 | colorFrom: blue
 5 | colorTo: yellow
 6 | sdk: static
 7 | pinned: false
 8 | models:
 9 |   - Supabase/gte-small
10 | license: mit
11 | short_description: In-browser Semantic Search
12 | ---
13 | 
14 | # In-Browser Semantic Search with Transformers.js and PGlite + pgvector
15 | 
16 | 100% in-browser Semantic Search with [Transformers.js](https://huggingface.co/docs/transformers.js), [PGlite](https://github.com/electric-sql/pglite) + [pgvector](https://github.com/pgvector/pgvector)!
17 | 
18 | Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
19 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Browser Vector Search
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/src/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --foreground-rgb: 0, 0, 0;
 7 |   --background-start-rgb: 214, 219, 220;
 8 |   --background-end-rgb: 255, 255, 255;
 9 | }
10 | 
11 | body {
12 |   color: rgb(var(--foreground-rgb));
13 |   background: linear-gradient(
14 |       to bottom,
15 |       transparent,
16 |       rgb(var(--background-end-rgb))
17 |     )
18 |     rgb(var(--background-start-rgb));
19 | }
20 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./globals.css";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/pglite-semantic-search/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   base: "/browser-vector-search/",
 7 |   plugins: [react()],
 8 |   optimizeDeps: {
 9 |     exclude: ["@electric-sql/pglite"],
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Phi-3.5 WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 | 
13 |     
26 |     
30 |     
31 |   
32 | 
33 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/phi-3.5-webgpu/public/banner.png


--------------------------------------------------------------------------------
/phi-3.5-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/phi-3.5-webgpu/public/logo.png


--------------------------------------------------------------------------------
/phi-3.5-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .scrollbar-thin::-webkit-scrollbar {
 7 |     @apply w-2;
 8 |   }
 9 | 
10 |   .scrollbar-thin::-webkit-scrollbar-track {
11 |     @apply rounded-full bg-gray-100 dark:bg-gray-700;
12 |   }
13 | 
14 |   .scrollbar-thin::-webkit-scrollbar-thumb {
15 |     @apply rounded-full bg-gray-300 dark:bg-gray-600;
16 |   }
17 | 
18 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
19 |     @apply bg-gray-500;
20 |   }
21 | 
22 |   .animation-delay-200 {
23 |     animation-delay: 200ms;
24 |   }
25 |   .animation-delay-400 {
26 |     animation-delay: 400ms;
27 |   }
28 | 
29 |   .overflow-wrap-anywhere {
30 |     overflow-wrap: anywhere;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/phi-3.5-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Qwen3 WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/qwen3-webgpu/public/banner.png


--------------------------------------------------------------------------------
/qwen3-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/qwen3-webgpu/public/logo.png


--------------------------------------------------------------------------------
/qwen3-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/src/components/icons/LightBulbIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function LightBulbIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |     
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/qwen3-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     "eslint:recommended",
 6 |     "plugin:react/recommended",
 7 |     "plugin:react/jsx-runtime",
 8 |     "plugin:react-hooks/recommended",
 9 |   ],
10 |   ignorePatterns: ["dist", ".eslintrc.cjs"],
11 |   parserOptions: { ecmaVersion: "latest", sourceType: "module" },
12 |   settings: { react: { version: "18.2" } },
13 |   plugins: ["react-refresh"],
14 |   rules: {
15 |     "react-refresh/only-export-components": [
16 |       "warn",
17 |       { allowConstantExport: true },
18 |     ],
19 |     "react/prop-types": "off",
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Whisper WebGPU
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/realtime-whisper-webgpu/public/banner.png


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/realtime-whisper-webgpu/public/logo.png


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/public/realtime-whisper-webgpu.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/realtime-whisper-webgpu/public/realtime-whisper-webgpu.mp4


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .scrollbar-thin::-webkit-scrollbar {
 7 |     @apply w-2;
 8 |   }
 9 | 
10 |   .scrollbar-thin::-webkit-scrollbar-track {
11 |     @apply rounded-full bg-gray-100 dark:bg-gray-700;
12 |   }
13 | 
14 |   .scrollbar-thin::-webkit-scrollbar-thumb {
15 |     @apply rounded-full bg-gray-300 dark:bg-gray-600;
16 |   }
17 | 
18 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
19 |     @apply bg-gray-500;
20 |   }
21 | 
22 |   .animation-delay-200 {
23 |     animation-delay: 200ms;
24 |   }
25 |   .animation-delay-400 {
26 |     animation-delay: 400ms;
27 |   }
28 | 
29 |   .overflow-wrap-anywhere {
30 |     overflow-wrap: anywhere;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/realtime-whisper-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/remove-background-web/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/remove-background-web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "remove-background-web",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.5"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/remove-background-web/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/remove-background-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/remove-background-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     Remove Background WebGPU
 7 |   
 8 |   
 9 |     

10 |     
11 |   
12 | 
13 | 


--------------------------------------------------------------------------------
/remove-background-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/remove-background-webgpu/public/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/remove-background-webgpu/public/banner.jpg


--------------------------------------------------------------------------------
/remove-background-webgpu/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/remove-background-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/remove-background-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/remove-background-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/sapiens-node/assets/depth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/sapiens-node/assets/depth.png


--------------------------------------------------------------------------------
/sapiens-node/assets/image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/sapiens-node/assets/image.jpg


--------------------------------------------------------------------------------
/sapiens-node/assets/normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/sapiens-node/assets/normal.png


--------------------------------------------------------------------------------
/sapiens-node/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sapiens-node",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "description": "",
13 |   "dependencies": {
14 |     "@huggingface/transformers": "3.5.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/segment-anything-webgpu/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Segment Anything WebGPU
 3 | emoji: ⚡
 4 | colorFrom: blue
 5 | colorTo: yellow
 6 | sdk: static
 7 | pinned: false
 8 | models:
 9 |   - Xenova/slimsam-77-uniform
10 | license: apache-2.0
11 | short_description: In-browser image segmentation w/ 🤗 Transformers.js
12 | ---
13 | 
14 | Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
15 | 


--------------------------------------------------------------------------------
/semantic-audio-search/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/semantic-audio-search/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "semantic-audio-search",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.5"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0",
16 |     "deepscatter": "github:nomic-ai/deepscatter"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/semantic-image-search-web/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/semantic-image-search-web/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Semantic Image Search w/ Transformers.js
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/semantic-image-search-web/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
 2 | @import "tailwindcss";
 3 | 
 4 | * {
 5 |   font-family: "Inter", sans-serif;
 6 | }
 7 | 
 8 | :root {
 9 |   --foreground-rgb: 255, 255, 255;
10 |   --background-start-rgb: 0, 0, 0;
11 |   --background-end-rgb: 0, 0, 0;
12 | }
13 | 
14 | body {
15 |   color: rgb(var(--foreground-rgb));
16 |   background: linear-gradient(
17 |       to bottom,
18 |       transparent,
19 |       rgb(var(--background-end-rgb))
20 |     )
21 |     rgb(var(--background-start-rgb));
22 | }
23 | 


--------------------------------------------------------------------------------
/semantic-image-search-web/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/semantic-image-search-web/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/smollm-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/smollm-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     SmolLM2 WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 | 
13 |     
26 |     
30 |     
31 |   
32 | 
33 | 


--------------------------------------------------------------------------------
/smollm-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/smollm-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/smollm-webgpu/public/banner.png


--------------------------------------------------------------------------------
/smollm-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/smollm-webgpu/public/logo.png


--------------------------------------------------------------------------------
/smollm-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/smollm-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/smollm-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/smollm-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/smollm-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/smollm-webgpu/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .scrollbar-thin::-webkit-scrollbar {
 7 |     @apply w-2;
 8 |   }
 9 | 
10 |   .scrollbar-thin::-webkit-scrollbar-track {
11 |     @apply rounded-full bg-gray-100 dark:bg-gray-700;
12 |   }
13 | 
14 |   .scrollbar-thin::-webkit-scrollbar-thumb {
15 |     @apply rounded-full bg-gray-300 dark:bg-gray-600;
16 |   }
17 | 
18 |   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
19 |     @apply bg-gray-500;
20 |   }
21 | 
22 |   .animation-delay-200 {
23 |     animation-delay: 200ms;
24 |   }
25 |   .animation-delay-400 {
26 |     animation-delay: 400ms;
27 |   }
28 | 
29 |   .overflow-wrap-anywhere {
30 |     overflow-wrap: anywhere;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/smollm-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/smollm-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/smollm-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     SmolVLM WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/smolvlm-webgpu/public/banner.png


--------------------------------------------------------------------------------
/smolvlm-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/smolvlm-webgpu/public/logo.png


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/ImagePreview.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import CrossIcon from "./icons/CrossIcon";
 3 | 
 4 | export default function ImagePreview({ src, onRemove, ...props }) {
 5 |   const [hover, setHover] = useState(false);
 6 | 
 7 |   return (
 8 |     
 setHover(true)}
11 |       onMouseLeave={() => setHover(false)}
12 |     >
13 |       
17 |       Upload preview
22 |     

23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/icons/CrossIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function CrossIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |     
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/icons/ImageIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ImageIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |     
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/smolvlm-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/speecht5-web/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/speecht5-web/README.md:
--------------------------------------------------------------------------------
 1 | # SpeechT5 Web
 2 | 
 3 | ## Getting Started
 4 | 
 5 | Follow the steps below to set up and run the application.
 6 | 
 7 | ### 1. Clone the Repository
 8 | 
 9 | Clone the examples repository from GitHub:
10 | 
11 | ```sh
12 | git clone https://github.com/huggingface/transformers.js-examples.git
13 | ```
14 | 
15 | ### 2. Navigate to the Project Directory
16 | 
17 | Change your working directory to the `speecht5-web` folder:
18 | 
19 | ```sh
20 | cd transformers.js-examples/speecht5-web
21 | ```
22 | 
23 | ### 3. Install Dependencies
24 | 
25 | Install the necessary dependencies using npm:
26 | 
27 | ```sh
28 | npm i
29 | ```
30 | 
31 | ### 4. Run the Development Server
32 | 
33 | Start the development server:
34 | 
35 | ```sh
36 | npm run dev
37 | ```
38 | 
39 | The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
40 | 


--------------------------------------------------------------------------------
/speecht5-web/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Transformers.js - Text-to-speech demo
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/speecht5-web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "speecht5-web",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@huggingface/transformers": "3.5.0",
14 |     "@tailwindcss/vite": "^4.0.0-beta.8",
15 |     "react": "^18.3.1",
16 |     "react-dom": "^18.3.1",
17 |     "tailwindcss": "^4.0.0-beta.8"
18 |   },
19 |   "devDependencies": {
20 |     "@eslint/js": "^9.17.0",
21 |     "@types/react": "^18.3.17",
22 |     "@types/react-dom": "^18.3.5",
23 |     "@vitejs/plugin-react": "^4.3.4",
24 |     "eslint": "^9.17.0",
25 |     "eslint-plugin-react": "^7.37.2",
26 |     "eslint-plugin-react-hooks": "^5.0.0",
27 |     "eslint-plugin-react-refresh": "^0.4.16",
28 |     "globals": "^15.13.0",
29 |     "vite": "^6.0.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/speecht5-web/src/components/AudioPlayer.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from "react";
 2 | 
 3 | export default function AudioPlayer({ audioUrl, mimeType }) {
 4 |   const audioPlayer = useRef(null);
 5 |   const audioSource = useRef(null);
 6 | 
 7 |   // Updates src when url changes
 8 |   useEffect(() => {
 9 |     if (audioPlayer.current && audioSource.current) {
10 |       audioSource.current.src = audioUrl;
11 |       audioPlayer.current.load();
12 |     }
13 |   }, [audioUrl]);
14 | 
15 |   return (
16 |     

17 |       
24 |     

25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/speecht5-web/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | export default function Progress({ text, percentage }) {
 2 |   percentage ??= 0;
 3 |   return (
 4 |     

 5 |       

 9 |         {text} ({`${percentage.toFixed(2)}%`})
10 |       

11 |     

12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/speecht5-web/src/constants.js:
--------------------------------------------------------------------------------
 1 | export const SPEAKERS = {
 2 |   "US female 1": "cmu_us_slt_arctic-wav-arctic_a0001",
 3 |   "US female 2": "cmu_us_clb_arctic-wav-arctic_a0001",
 4 |   "US male 1": "cmu_us_bdl_arctic-wav-arctic_a0003",
 5 |   "US male 2": "cmu_us_rms_arctic-wav-arctic_a0003",
 6 |   "Canadian male": "cmu_us_jmk_arctic-wav-arctic_a0002",
 7 |   "Scottish male": "cmu_us_awb_arctic-wav-arctic_b0002",
 8 |   "Indian male": "cmu_us_ksp_arctic-wav-arctic_a0007",
 9 | };
10 | 
11 | export const DEFAULT_SPEAKER = "cmu_us_slt_arctic-wav-arctic_a0001";
12 | 


--------------------------------------------------------------------------------
/speecht5-web/src/index.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | :root {
 4 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 5 |   line-height: 1.5;
 6 |   font-weight: 400;
 7 |   color: #213547;
 8 |   background-color: #ffffff;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   -webkit-text-size-adjust: 100%;
15 | }
16 | 
17 | audio::-webkit-media-controls-panel {
18 |   background-color: white;
19 | }
20 | 


--------------------------------------------------------------------------------
/speecht5-web/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/speecht5-web/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/sveltekit/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | /.svelte-kit
 7 | /build
 8 | 
 9 | # OS
10 | .DS_Store
11 | Thumbs.db
12 | 
13 | # Env
14 | .env
15 | .env.*
16 | !.env.example
17 | !.env.test
18 | 
19 | # Vite
20 | vite.config.js.timestamp-*
21 | vite.config.ts.timestamp-*
22 | 


--------------------------------------------------------------------------------
/sveltekit/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/sveltekit/.prettierignore:
--------------------------------------------------------------------------------
1 | # Package Managers
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/sveltekit/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 3 |   "overrides": [
 4 |     {
 5 |       "files": "*.svelte",
 6 |       "options": {
 7 |         "parser": "svelte"
 8 |       }
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/sveltekit/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import prettier from "eslint-config-prettier";
 2 | import js from "@eslint/js";
 3 | import svelte from "eslint-plugin-svelte";
 4 | import globals from "globals";
 5 | import ts from "typescript-eslint";
 6 | 
 7 | export default ts.config(
 8 |   js.configs.recommended,
 9 |   ...ts.configs.recommended,
10 |   ...svelte.configs["flat/recommended"],
11 |   prettier,
12 |   ...svelte.configs["flat/prettier"],
13 |   {
14 |     languageOptions: {
15 |       globals: {
16 |         ...globals.browser,
17 |         ...globals.node,
18 |       },
19 |     },
20 |   },
21 |   {
22 |     files: ["**/*.svelte"],
23 | 
24 |     languageOptions: {
25 |       parserOptions: {
26 |         parser: ts.parser,
27 |       },
28 |     },
29 |   },
30 |   {
31 |     ignores: ["build/", ".svelte-kit/", "dist/"],
32 |   },
33 | );
34 | 


--------------------------------------------------------------------------------
/sveltekit/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/sveltekit/src/app.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss/base";
 2 | @import "tailwindcss/components";
 3 | @import "tailwindcss/utilities";
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --background: #0a0a0a;
13 |     --foreground: #ededed;
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background: var(--background);
20 |   font-family: Arial, Helvetica, sans-serif;
21 | }
22 | 


--------------------------------------------------------------------------------
/sveltekit/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://svelte.dev/docs/kit/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 |   namespace App {
 5 |     // interface Error {}
 6 |     // interface Locals {}
 7 |     // interface PageData {}
 8 |     // interface PageState {}
 9 |     // interface Platform {}
10 |   }
11 | }
12 | 
13 | export {};
14 | 


--------------------------------------------------------------------------------
/sveltekit/src/app.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     %sveltekit.head%
 8 |   
 9 |   
10 |     
%sveltekit.body%

11 |   
12 | 
13 | 


--------------------------------------------------------------------------------
/sveltekit/src/lib/Classifier.svelte:
--------------------------------------------------------------------------------
 1 | 
15 | 
16 |  {
19 |     text = event.currentTarget.value;
20 |   }}
21 |   class="w-full rounded border border-gray-300 p-2 dark:bg-black dark:text-white"
22 | />
23 | 
24 | 
{result
26 |     ? JSON.stringify(result, null, 2)
27 |     : "Loading…"}

28 | 


--------------------------------------------------------------------------------
/sveltekit/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 | 
5 | 
6 | {@render children()}
7 | 


--------------------------------------------------------------------------------
/sveltekit/src/routes/api/classify/+server.ts:
--------------------------------------------------------------------------------
 1 | // https://svelte.dev/tutorial/kit/get-handlers
 2 | 
 3 | import { pipeline } from "@huggingface/transformers";
 4 | import { json, error } from "@sveltejs/kit";
 5 | 
 6 | import type { TextClassificationPipeline } from "@huggingface/transformers";
 7 | 
 8 | // NOTE: We attach the classifier to the global object to avoid unnecessary reloads during development
 9 | declare global {
10 |   var classifier: TextClassificationPipeline;
11 | }
12 | 
13 | const classifier = (globalThis.classifier ??= await pipeline(
14 |   "text-classification",
15 |   "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
16 | ));
17 | 
18 | export async function GET({ url }: { url: URL }) {
19 |   const text = url.searchParams.get("text");
20 | 
21 |   if (!text) {
22 |     return error(400, "No text provided");
23 |   }
24 | 
25 |   const result = await classifier(text);
26 |   return json(result[0]);
27 | }
28 | 


--------------------------------------------------------------------------------
/sveltekit/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/sveltekit/static/favicon.ico


--------------------------------------------------------------------------------
/sveltekit/static/window.svg:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/sveltekit/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from "@sveltejs/adapter-node";
 2 | 
 3 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 4 | 
 5 | /** @type {import('@sveltejs/kit').Config} */
 6 | const config = {
 7 |   // Consult https://svelte.dev/docs/kit/integrations#preprocessors
 8 |   // for more information about preprocessors
 9 |   preprocess: vitePreprocess(),
10 | 
11 |   kit: {
12 |     // See https://svelte.dev/docs/kit/adapters for more information about adapters.
13 |     adapter: adapter(),
14 |   },
15 | };
16 | 
17 | export default config;
18 | 


--------------------------------------------------------------------------------
/sveltekit/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   content: ["./src/**/*.{html,js,svelte,ts}"],
 5 | 
 6 |   theme: {
 7 |     extend: {
 8 |       colors: {
 9 |         background: "var(--background)",
10 |         foreground: "var(--foreground)",
11 |       },
12 |     },
13 |   },
14 | 
15 |   plugins: [],
16 | } as Config;
17 | 


--------------------------------------------------------------------------------
/sveltekit/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./.svelte-kit/tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "allowJs": true,
 5 |     "checkJs": true,
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "resolveJsonModule": true,
 9 |     "skipLibCheck": true,
10 |     "sourceMap": true,
11 |     "strict": true,
12 |     "moduleResolution": "bundler"
13 |   }
14 |   // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15 |   // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16 |   //
17 |   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 |   // from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 | 


--------------------------------------------------------------------------------
/sveltekit/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from "@sveltejs/kit/vite";
2 | import { defineConfig } from "vite";
3 | 
4 | export default defineConfig({
5 |   plugins: [sveltekit()],
6 | });
7 | 


--------------------------------------------------------------------------------
/text-to-speech-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/text-to-speech-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     WebGPU Text-to-Speech
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/text-to-speech-webgpu/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/text-to-speech-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/text-to-speech-webgpu/public/banner.png


--------------------------------------------------------------------------------
/text-to-speech-webgpu/public/wave.svg:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 |     
 4 |       
 5 |       
 6 |     
 7 |   
 8 |   
 9 | 
10 | 


--------------------------------------------------------------------------------
/text-to-speech-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/text-to-speech-webgpu/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/text-to-speech-webgpu/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | 
 4 | // https://vite.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   worker: { format: "es" },
 8 |   build: {
 9 |     target: "esnext",
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     The Tokenizer Playground
 7 |   
 8 | 
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/src/App.css:
--------------------------------------------------------------------------------
 1 | #root {
 2 |   max-width: 1280px;
 3 |   width: 100%;
 4 |   margin: 0 auto;
 5 |   padding: 2rem;
 6 |   text-align: center;
 7 |   display: flex;
 8 |   justify-content: center;
 9 |   align-items: center;
10 |   flex-direction: column;
11 | }
12 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/src/components/Token.jsx:
--------------------------------------------------------------------------------
 1 | import { Fragment } from "react";
 2 | 
 3 | const COLOURS = [
 4 |   "bg-purple-300",
 5 |   "bg-green-300",
 6 |   "bg-yellow-300",
 7 |   "bg-red-300",
 8 |   "bg-blue-300",
 9 | ];
10 | 
11 | export function Token({ text, position, margin }) {
12 |   const textWithLineBreaks = text.split("\n").map((line, index, array) => (
13 |     
14 |       {line}
15 |       {index !== array.length - 1 && 
}
16 |     
17 |   ));
18 |   return (
19 |     
23 |       {textWithLineBreaks}
24 |     
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/the-tokenizer-playground/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     TinySparrow WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/tinyswallow-webgpu/public/banner.png


--------------------------------------------------------------------------------
/tinyswallow-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/tinyswallow-webgpu/public/logo.png


--------------------------------------------------------------------------------
/tinyswallow-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/tinyswallow-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/vanilla-js/README.md:
--------------------------------------------------------------------------------
 1 | # Vanilla JS Application
 2 | 
 3 | This folder contains the source code for a simple web application that detects objects in images using Transformers.js! Check out the demo [here](https://huggingface.co/spaces/Scrimba/vanilla-js-object-detector).
 4 | 
 5 | If you'd like to build it yourself, you can follow the [written](https://huggingface.co/docs/transformers.js/tutorials/vanilla-js) or [interactive video](https://scrimba.com/scrim/cKm9bDAg) tutorials we have made!
 6 | 
 7 | Here's how it works: the user clicks “Upload image” and selects an image using an input dialog. After analysing the image with an object detection model, the predicted bounding boxes are overlaid on top of the image, like this:
 8 | 
 9 | ![Demo](https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/js-detection-interence-zebra.png)
10 | 


--------------------------------------------------------------------------------
/vanilla-js/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Transformers.js - Object Detection demo
 8 |   
 9 | 
10 |   
11 |     

12 |       
20 |       

21 |       

22 |     

23 |     
24 |   
25 | 
26 | 


--------------------------------------------------------------------------------
/video-background-removal/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/video-background-removal/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "video-background-removal",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.5"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/video-background-removal/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/video-object-detection/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/video-object-detection/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "video-object-detection",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.5"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/video-object-detection/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/webgpu-clip/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/webgpu-clip/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webgpu-clip",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.7"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/webgpu-clip/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/webgpu-embedding-benchmark/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/webgpu-embedding-benchmark/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webgpu-embedding-benchmark",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.7"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0",
16 |     "chart.js": "^4.4.2"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/webgpu-embedding-benchmark/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/webgpu-nomic-embed/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/webgpu-nomic-embed/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webgpu-clip",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "devDependencies": {
12 |     "vite": "^6.0.7"
13 |   },
14 |   "dependencies": {
15 |     "@huggingface/transformers": "3.5.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/webgpu-nomic-embed/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | export default defineConfig({
3 |   build: {
4 |     target: "esnext",
5 |   },
6 | });
7 | 


--------------------------------------------------------------------------------
/whisper-node/README.md:
--------------------------------------------------------------------------------
 1 | # whisper-node
 2 | 
 3 | This project demonstrates how to use OpenAI Whisper in a Node.js environment.
 4 | 
 5 | ## Instructions
 6 | 
 7 | 1. Clone the repository:
 8 |    ```sh
 9 |    git clone https://github.com/huggingface/transformers.js-examples.git
10 |    ```
11 | 2. Change directory to the `whisper-node` project:
12 |    ```sh
13 |    cd transformers.js-examples/whisper-node
14 |    ```
15 | 3. Install the dependencies:
16 |    ```sh
17 |    npm install
18 |    ```
19 | 4. Run the example:
20 |    ```sh
21 |    node index.js
22 |    ```
23 | 


--------------------------------------------------------------------------------
/whisper-node/index.js:
--------------------------------------------------------------------------------
 1 | import { pipeline } from "@huggingface/transformers";
 2 | import { read_audio } from "./utils.js";
 3 | 
 4 | // Load model
 5 | const transcriber = await pipeline(
 6 |   "automatic-speech-recognition",
 7 |   "onnx-community/whisper-tiny.en",
 8 |   { dtype: { encoder_model: "fp32", decoder_model_merged: "q4" } },
 9 | );
10 | 
11 | // Load audio data
12 | const audio = await read_audio(
13 |   "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav",
14 |   transcriber.processor.feature_extractor.config.sampling_rate,
15 | );
16 | 
17 | // Run model w/ default settings
18 | console.time("Execution time");
19 | const output = await transcriber(audio);
20 | console.timeEnd("Execution time");
21 | console.log(output);
22 | // { text: ' And so my fellow Americans ask not what your country can do for you, ask what you can do for your country.' }
23 | 


--------------------------------------------------------------------------------
/whisper-node/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "whisper-node",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "description": "",
13 |   "dependencies": {
14 |     "@huggingface/transformers": "3.5.0",
15 |     "wavefile": "^11.0.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/whisper-node/utils.js:
--------------------------------------------------------------------------------
 1 | import wavefile from "wavefile";
 2 | 
 3 | export async function read_audio(url, sampling_rate = 16000) {
 4 |   const buffer = Buffer.from(await fetch(url).then((x) => x.arrayBuffer()));
 5 | 
 6 |   // Read .wav file and convert it to required format
 7 |   const wav = new wavefile.WaveFile(buffer);
 8 |   wav.toBitDepth("32f");
 9 |   wav.toSampleRate(sampling_rate);
10 |   let samples = wav.getSamples();
11 |   if (Array.isArray(samples)) {
12 |     if (samples.length > 1) {
13 |       const SCALING_FACTOR = Math.sqrt(2);
14 | 
15 |       // Merge channels (into first channel to save memory)
16 |       for (let i = 0; i < samples[0].length; ++i) {
17 |         samples[0][i] = (SCALING_FACTOR * (samples[0][i] + samples[1][i])) / 2;
18 |       }
19 |     }
20 | 
21 |     // Select first channel
22 |     samples = samples[0];
23 |   }
24 |   return samples;
25 | }
26 | 


--------------------------------------------------------------------------------
/whisper-word-timestamps/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/whisper-word-timestamps/README.md:
--------------------------------------------------------------------------------
 1 | # Code Completion
 2 | 
 3 | ## Getting Started
 4 | 
 5 | Follow the steps below to set up and run the application.
 6 | 
 7 | ### 1. Clone the Repository
 8 | 
 9 | Clone the examples repository from GitHub:
10 | 
11 | ```sh
12 | git clone https://github.com/huggingface/transformers.js-examples.git
13 | ```
14 | 
15 | ### 2. Navigate to the Project Directory
16 | 
17 | Change your working directory to the `code-completion` folder:
18 | 
19 | ```sh
20 | cd transformers.js-examples/code-completion
21 | ```
22 | 
23 | ### 3. Install Dependencies
24 | 
25 | Install the necessary dependencies using npm:
26 | 
27 | ```sh
28 | npm i
29 | ```
30 | 
31 | ### 4. Run the Development Server
32 | 
33 | Start the development server:
34 | 
35 | ```sh
36 | npm run dev
37 | ```
38 | 
39 | The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
40 | 


--------------------------------------------------------------------------------
/whisper-word-timestamps/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Whisper Timestamped
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/whisper-word-timestamps/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/whisper-word-timestamps/src/index.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | *::-webkit-scrollbar {
 4 |   width: 0.5rem;
 5 | }
 6 | 
 7 | *::-webkit-scrollbar-track {
 8 |   border-radius: 9999px;
 9 |   background-color: #f3f4f6;
10 |   /* bg-gray-100 */
11 | }
12 | 
13 | *::-webkit-scrollbar-thumb {
14 |   border-radius: 9999px;
15 |   background-color: #d1d5db;
16 |   /* bg-gray-300 */
17 | }
18 | 
19 | *::-webkit-scrollbar-thumb:hover {
20 |   background-color: #6b7280;
21 |   /* bg-gray-500 */
22 | }
23 | 
24 | @media (prefers-color-scheme: dark) {
25 |   *::-webkit-scrollbar-track {
26 |     background-color: #374151;
27 |     /* dark:bg-gray-700 */
28 |   }
29 | 
30 |   *::-webkit-scrollbar-thumb {
31 |     background-color: #4b5563;
32 |     /* dark:bg-gray-600 */
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/whisper-word-timestamps/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/whisper-word-timestamps/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/zero-shot-classification/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/zero-shot-classification/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Zero-shot classication w/ Transformers.js
 8 |   
 9 |   
10 |     

11 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/zero-shot-classification/src/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | 


--------------------------------------------------------------------------------
/zero-shot-classification/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App.jsx";
 4 | import "./index.css";
 5 | 
 6 | ReactDOM.createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/zero-shot-classification/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     
 7 |     Zyphra-ZR1 WebGPU
 8 |   
 9 | 
10 |   
11 |     

12 |     
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/zyphra-zr1-webgpu/public/banner.png


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/transformers.js-examples/d3831d2e585e9536aa282dc3ad51380ad7721f02/zyphra-zr1-webgpu/public/logo.png


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/src/components/Progress.jsx:
--------------------------------------------------------------------------------
 1 | function formatBytes(size) {
 2 |   const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 3 |   return (
 4 |     +(size / Math.pow(1024, i)).toFixed(2) * 1 +
 5 |     ["B", "kB", "MB", "GB", "TB"][i]
 6 |   );
 7 | }
 8 | 
 9 | export default function Progress({ text, percentage, total }) {
10 |   percentage ??= 0;
11 |   return (
12 |     

13 |       

17 |         {text} ({percentage.toFixed(2)}%
18 |         {isNaN(total) ? "" : ` of ${formatBytes(total)}`})
19 |       

20 |     

21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/src/components/icons/ArrowRightIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function ArrowRightIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/src/components/icons/BotIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function BotIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |       
18 |       
19 |       
20 |       
21 |     
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/src/components/icons/StopIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function StopIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
20 |     
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/src/components/icons/UserIcon.jsx:
--------------------------------------------------------------------------------
 1 | export default function UserIcon(props) {
 2 |   return (
 3 |     
15 |       
16 |       
17 |     
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App.jsx";
 5 | 
 6 | createRoot(document.getElementById("root")).render(
 7 |   
 8 |     
 9 |   ,
10 | );
11 | 


--------------------------------------------------------------------------------
/zyphra-zr1-webgpu/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import react from "@vitejs/plugin-react";
4 | 
5 | // https://vite.dev/config/
6 | export default defineConfig({
7 |   plugins: [tailwindcss(), react()],
8 | });
9 | 


--------------------------------------------------------------------------------