🎉 @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"
+}