🎉 @huggingface/widgets (#297)

.eslintrc.cjs

@@ -1,13 +1,18 @@
 module.exports = {
- extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+ extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:svelte/recommended", "prettier"],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "prettier"],
  root: true,
  env: {
  browser: true,
- amd: true,
+ es2017: true,
  node: true,
  },
+ parserOptions: {
+ sourceType: "module",
+ ecmaVersion: 2020,
+ extraFileExtensions: [".svelte"],
+ },
  rules: {
  "no-constant-condition": "off",
  "@typescript-eslint/no-empty-function": "off",
@@ -20,4 +25,13 @@ module.exports = {
  // For doc purposes, prefer interfaces
  "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
  },
+ overrides: [
+ {
+ files: ["*.svelte"],
+ parser: "svelte-eslint-parser",
+ parserOptions: {
+ parser: "@typescript-eslint/parser",
+ },
+ },
+ ],
 };

.github/workflows/lint-and-test.yml

@@ -45,7 +45,7 @@ jobs:
  pnpm --filter ...[${{ steps.since.outputs.SINCE }}] format:check
 
  - name: Check types
- run: pnpm --filter ...[${{ steps.since.outputs.SINCE }}] type-check
+ run: pnpm --filter ...[${{ steps.since.outputs.SINCE }}] check
 
  - name: Test
  run: VCR_MODE=playback pnpm --filter ...[${{ steps.since.outputs.SINCE }}] test

.github/workflows/widgets-publish.yml

@@ -0,0 +1,51 @@
+name: Widgets - Version and Release
+
+on:
+ workflow_dispatch:
+ inputs:
+ newversion:
+ description: "Semantic Version Bump Type (major minor patch)"
+ default: patch
+
+defaults:
+ run:
+ working-directory: packages/widgets
+
+jobs:
+ version_and_release:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ with:
+ token: ${{ secrets.BOT_ACCESS_TOKEN }}
+ - run: corepack enable
+ - uses: actions/setup-node@v3
+ with:
+ node-version: "18"
+ cache: "pnpm"
+ cache-dependency-path: |
+ packages/widgets/pnpm-lock.yaml
+ # setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token. REQUIRED
+ registry-url: "https://registry.npmjs.org"
+ - run: pnpm install
+ - run: git config --global user.name machineuser
+ - run: git config --global user.email [email protected]
+ - run: |
+ PACKAGE_VERSION=$(node -p "require('./package.json').version")
+ BUMPED_VERSION=$(node -p "require('semver').inc('$PACKAGE_VERSION', '${{ github.event.inputs.newversion }}')")
+ # Update package.json with the new version
+ node -e "const fs = require('fs'); const package = JSON.parse(fs.readFileSync('./package.json')); package.version = '$BUMPED_VERSION'; fs.writeFileSync('./package.json', JSON.stringify(package, null, '\t') + '\n');"
+ git commit . -m "🔖 @hugginface/widgets $BUMPED_VERSION"
+ git tag "widgets-v$BUMPED_VERSION"
+ - run: pnpm publish --no-git-checks .
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+ - run: git push --follow-tags
+ # hack - reuse actions/setup-node@v3 just to set a new registry
+ - uses: actions/setup-node@v3
+ with:
+ node-version: "18"
+ registry-url: "https://npm.pkg.github.com"
+ - run: pnpm publish --no-git-checks .
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierrc

@@ -3,5 +3,7 @@
  "useTabs": true,
  "tabWidth": 2,
  "printWidth": 120,
- "trailingComma": "es5"
+ "trailingComma": "es5",
+ "plugins": ["prettier-plugin-svelte"],
+ "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package.json

@@ -1,15 +1,17 @@
 {
  "license": "MIT",
- "packageManager": "pnpm@8.3.1",
+ "packageManager": "pnpm@8.10.5",
  "dependencies": {
  "@typescript-eslint/eslint-plugin": "^5.51.0",
  "@typescript-eslint/parser": "^5.51.0",
  "eslint": "^8.35.0",
- "eslint-config-prettier": "^8.6.0",
+ "eslint-config-prettier": "^9.0.0",
  "eslint-plugin-prettier": "^4.2.1",
- "prettier": "^2.8.4",
- "typescript": "^4.9.5",
- "vite": "^4.1.4"
+ "eslint-plugin-svelte": "^2.30.0",
+ "prettier": "^3.0.0",
+ "prettier-plugin-svelte": "^3.0.0",
+ "typescript": "^5.0.0",
+ "vite": "4.1.4"
  },
  "scripts": {
  "lint": "eslint --quiet --fix --ext .cjs,.ts .eslintrc.cjs",
@@ -20,8 +22,8 @@
  "devDependencies": {
  "@vitest/browser": "^0.29.7",
  "semver": "^7.5.0",
- "tsup": "^6.7.0",
  "ts-node": "^10.9.1",
+ "tsup": "^6.7.0",
  "vitest": "^0.29.4",
  "webdriverio": "^8.6.7"
  }

packages/agents/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@huggingface/agents",
- "packageManager": "pnpm@8.3.1",
+ "packageManager": "pnpm@8.10.5",
  "version": "0.0.5",
  "description": "Multi-modal agents using Hugging Face's models",
  "repository": "https://github.com/huggingface/huggingface.js.git",
@@ -34,7 +34,7 @@
  "build": "tsup",
  "test": "vitest run",
  "test:browser": "vitest run --browser.name=chrome --browser.headless --config ./vitest-browser.config.ts",
- "type-check": "tsc"
+ "check": "tsc"
  },
  "files": [
  "src",

packages/doc-internal/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@huggingface/doc-internal",
- "packageManager": "pnpm@8.3.1",
+ "packageManager": "pnpm@8.10.5",
  "version": "1.0.0",
  "description": "Package to generate doc for other @huggingface packages",
  "private": true,

packages/hub/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@huggingface/hub",
- "packageManager": "pnpm@8.3.1",
+ "packageManager": "pnpm@8.10.5",
  "version": "0.12.2",
  "description": "Utilities to interact with the Hugging Face hub",
  "repository": "https://github.com/huggingface/huggingface.js.git",
@@ -36,7 +36,7 @@
  "build": "tsup",
  "test": "vitest run",
  "test:browser": "vitest run --browser.name=chrome --browser.headless --config ./vitest-browser.config.ts",
- "type-check": "tsc"
+ "check": "tsc"
  },
  "files": [
  "src",

packages/inference/package.json

@@ -1,7 +1,7 @@
 {
  "name": "@huggingface/inference",
  "version": "2.6.4",
- "packageManager": "pnpm@8.3.1",
+ "packageManager": "pnpm@8.10.5",
  "license": "MIT",
  "author": "Tim Mikeladze <[email protected]>",
  "description": "Typescript wrapper for the Hugging Face Inference API",
@@ -44,10 +44,11 @@
  "lint:check": "eslint --ext .cjs,.ts .",
  "format": "prettier --write .",
  "format:check": "prettier --check .",
+ "prepare": "pnpm run build",
  "prepublishOnly": "pnpm run build",
  "test": "vitest run --config vitest.config.ts",
  "test:browser": "vitest run --browser.name=chrome --browser.headless --config vitest.config.ts",
- "type-check": "tsc"
+ "check": "tsc"
  },
  "devDependencies": {
  "@types/node": "18.13.0",

packages/languages/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@huggingface/languages",
- "packageManager": "pnpm@8.3.1",
+ "packageManager": "pnpm@8.10.5",
  "version": "1.0.0",
  "description": "List of ISO-639 languages used in the Hub",
  "repository": "https://github.com/huggingface/huggingface.js.git",
@@ -26,7 +26,7 @@
  "prepublishOnly": "pnpm run build",
  "build": "tsup src/index.ts --format cjs,esm --clean --dts",
  "test": "vitest run",
- "type-check": "tsc"
+ "check": "tsc"
  },
  "files": [
  "dist",

packages/tasks/package.json

@@ -1,8 +1,8 @@
 {
  "name": "@huggingface/tasks",
- "packageManager": "pnpm@8.3.1",
- "version": "0.0.4",
- "description": "List of ISO-639 languages used in the Hub",
+ "packageManager": "pnpm@8.10.5",
+ "version": "0.0.5",
+ "description": "List of ML tasks for huggingface.co/tasks",
  "repository": "https://github.com/huggingface/huggingface.js.git",
  "publishConfig": {
  "access": "public"
@@ -25,7 +25,8 @@
  "format:check": "prettier --check .",
  "prepublishOnly": "pnpm run build",
  "build": "tsup src/index.ts --format cjs,esm --clean --dts",
- "type-check": "tsc"
+ "prepare": "pnpm run build",
+ "check": "tsc"
  },
  "files": [
  "dist",

packages/tasks/src/index.ts

@@ -1,4 +1,13 @@
 export type { TaskData, TaskDemo, TaskDemoEntry, ExampleRepo } from "./Types";
 export { TASKS_DATA } from "./tasksData";
-export { PIPELINE_DATA, type PipelineType, type PipelineData, type Modality, MODALITIES } from "./pipelines";
+export {
+ PIPELINE_DATA,
+ PIPELINE_TYPES,
+ type PipelineType,
+ type PipelineData,
+ type Modality,
+ MODALITIES,
+ MODALITY_LABELS,
+} from "./pipelines";
 export { ModelLibrary } from "./modelLibraries";
+export type { ModelLibraryKey } from "./modelLibraries";

packages/tasks/src/pipelines.ts

@@ -2,6 +2,16 @@ export const MODALITIES = ["cv", "nlp", "audio", "tabular", "multimodal", "rl",
 
 export type Modality = (typeof MODALITIES)[number];
 
+export const MODALITY_LABELS = {
+ multimodal: "Multimodal",
+ nlp: "Natural Language Processing",
+ audio: "Audio",
+ cv: "Computer Vision",
+ rl: "Reinforcement Learning",
+ tabular: "Tabular",
+ other: "Other",
+} satisfies Record<Modality, string>;
+
 /**
  * Public interface for a sub task.
  *
@@ -606,3 +616,4 @@ export const PIPELINE_DATA = {
 } satisfies Record<string, PipelineData>;
 
 export type PipelineType = keyof typeof PIPELINE_DATA;
+export const PIPELINE_TYPES = Object.keys(PIPELINE_DATA) as PipelineType[];

packages/widgets/.eslintignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules
+/dist
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

packages/widgets/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/dist
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

packages/widgets/.prettierignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules
+/dist
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

packages/widgets/README.md

@@ -0,0 +1,18 @@
+# Huggingface Widgets
+
+Open-source version of the inference widgets from huggingface.co
+
+> Built with Svelte and SvelteKit
+
+**Demo page:** https://huggingface.co/spaces/huggingfacejs/inference-widgets
+
+You can also run the demo locally:
+
+```console
+pnpm install
+pnpm dev
+```
+
+## Publishing
+
+Because `@huggingface/widgets` depends on `@huggingface/tasks`, you need to publish `@huggingface/tasks` first, and then `@huggingface/widgets`.

packages/widgets/package.json

@@ -0,0 +1,59 @@
+{
+ "name": "@huggingface/widgets",
+ "packageManager": "[email protected]",
+ "version": "0.0.4",
+ "publishConfig": {
+ "access": "public"
+ },
+ "scripts": {
+ "dev": "vite dev",
+ "build": "vite build && npm run package",
+ "preview": "vite preview",
+ "package": "svelte-kit sync && svelte-package && publint",
+ "prepublishOnly": "npm run package",
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+ "lint": "eslint --quiet --fix --ext .cjs,.ts .",
+ "lint:check": "eslint --ext .cjs,.ts .",
+ "format": "prettier --write .",
+ "format:check": "prettier --check ."
+ },
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "svelte": "./dist/index.js"
+ }
+ },
+ "files": [
+ "dist",
+ "src",
+ "!dist/**/*.test.*",
+ "!dist/**/*.spec.*",
+ "static/audioProcessor.js"
+ ],
+ "dependencies": {
+ "@huggingface/tasks": "workspace:^"
+ },
+ "peerDependencies": {
+ "svelte": "^3.59.2"
+ },
+ "devDependencies": {
+ "@sveltejs/adapter-auto": "^2.0.0",
+ "@sveltejs/kit": "^1.27.4",
+ "@sveltejs/package": "^2.0.0",
+ "@tailwindcss/forms": "^0.5.7",
+ "autoprefixer": "^10.4.16",
+ "eslint": "^8.28.0",
+ "postcss": "^8.4.31",
+ "publint": "^0.1.9",
+ "svelte": "^3.59.2",
+ "svelte-check": "^3.6.0",
+ "tailwindcss": "^3.3.5",
+ "tslib": "^2.4.1",
+ "typescript": "^5.0.0",
+ "vite": "^4.0.0"
+ },
+ "svelte": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "type": "module"
+}