Packaging & publishing to npm

widgets/.gitignore

@@ -1,4 +1,4 @@
 .DS_Store
 node_modules
 /.svelte-kit
-/package
+package

widgets/.prettierignore

@@ -2,6 +2,7 @@
 static/**
 build/**
 node_modules/**
+package/**
 *.js
 *.mjs
 *.cjs

widgets/README.md

@@ -1,16 +1,16 @@
-# huggingface-widgets
+<h1 align="center">huggingface-widgets</h1>
 
-Open-source version of the inference widgets from huggingface.co
+<p align="center">
+  <a href="https://huggingface-widgets.netlify.app/"><img src="https://img.shields.io/badge/demo_page-Netlify-008080.svg" alt="demo page with Netlify"></a>
+  <a href="https://github.com/huggingface/huggingface_hub/actions/workflows/js-widgets-tests.yml?query=branch%3Amain"><img src="https://github.com/huggingface/huggingface_hub/actions/workflows/js-widgets-tests.yml/badge.svg?query=branch%3Amain" alt="Build Status"></a>
+  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" alt="styled with prettier"></a>
+  <a href="https://kit.svelte.dev/"><img src="https://img.shields.io/badge/made_with-SvelteKit-ff3e00.svg" alt="made with SvelteKit"></a>
+  <a href="https://github.com/huggingface/huggingface_hub/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-informational" alt="License"></a>
+</p>
 
-> Built with Svelte and SvelteKit
+# 
 
-**Demo page:** https://huggingface-widgets.netlify.app/
-
-## Documentation
-
-For now checkout the Pull Request's description: https://github.com/huggingface/huggingface_hub/pull/87
-
-TODO: write more documentation
+Open-source version of the inference widgets from huggingface.co. Widgets allow anyone to do inference directly on the browser! For more information about widgets, please go to our [documentation](https://huggingface.co/docs/hub/main#whats-a-widget).
 
 ## How to develop
 
@@ -23,9 +23,23 @@ npm run dev
 npm run dev -- --open
 ```
 
-## Build for production
+## Build for Netlify
 
 ```bash
 npm run build
 ```
+## Publish package
+
+```bash
+npm run publish
+```
 
+## Contribution guideline
+1. Create a new branch to which you will be pushing your updates
+2. Use descriptive name for your branch (e.g. `widget_object_detection`)
+3. Create your widget in `src/lib/InferenceWidget/widgets/[MyNewWidget].svelte`
+4. Try to use as many components as possible from [`shared`](https://github.com/huggingface/huggingface_hub/tree/main/widgets/src/lib/InferenceWidget/shared)
+5. For the API contract, check out [Accelerated Inference API doc](https://api-inference.huggingface.co/docs/python/html/detailed_parameters.html) & [Integrating your library to the Hub](https://huggingface.co/docs/hub/adding-a-library)
+6. For your widget, make sure to implement [getOutput](https://github.com/huggingface/huggingface_hub/blob/main/widgets/src/lib/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte#L28), [isValidOutput](https://github.com/huggingface/huggingface_hub/blob/main/widgets/src/lib/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte#L69), [parseOutput](https://github.com/huggingface/huggingface_hub/blob/main/widgets/src/lib/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte#L78) ([raise TypeError](https://github.com/huggingface/huggingface_hub/blob/main/widgets/src/lib/InferenceWidget/widgets/ImageClassificationWidget/ImageClassificationWidget.svelte#L82) on invalid output), and all other necessary functions for your widget to work
+7. Submit a PR when done (or draft PR if you are still working on it & would like to collaborate)
+8. See [previous widget PRs](https://github.com/huggingface/huggingface_hub/pulls?q=is%3Apr+label%3Awidgets+) 

widgets/package.json

@@ -1,10 +1,23 @@
 {
 	"name": "huggingface-widgets",
-	"version": "0.0.1",
+	"version": "0.15.0",
+	"type": "module",
+	"main": "./InferenceWidget/InferenceWidget.svelte",
+	"svelte": "./InferenceWidget/InferenceWidget.svelte",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/huggingface/huggingface_hub.git"
+	},
+	"bugs": {
+		"url": "https://github.com/huggingface/huggingface_hub/issues"
+	},
+	"homepage": "https://github.com/huggingface/huggingface_hub/tree/main/widgets",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",
+		"package": "svelte-kit package && node postpackage.js",
 		"preview": "svelte-kit preview",
+		"publish": "npm run package && npm publish package",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check --plugin-search-dir=. .",
@@ -15,18 +28,37 @@
 		"@sveltejs/kit": "next",
 		"@tailwindcss/forms": "^0.3.3",
 		"@tailwindcss/line-clamp": "^0.2.1",
+		"@tsconfig/svelte": "^2.0.1",
 		"@types/dom-mediacapture-record": "^1.0.7",
 		"autoprefixer": "^10.2.6",
 		"postcss": "^8.3.1",
 		"postcss-load-config": "^3.0.1",
 		"prettier": "2.3.0",
 		"prettier-plugin-svelte": "2.3.0",
 		"svelte": "^3.34.0",
-		"svelte-check": "^2.0.0",
+		"svelte-check": "^2.2.3",
 		"svelte-preprocess": "^4.0.0",
+		"svelte2tsx": "^0.4.5",
 		"tailwindcss": "^2.1.4",
 		"tslib": "^2.0.0",
 		"typescript": "^4.0.0"
 	},
-	"type": "module"
+	"keywords": [
+		"hugging face",
+		"machine learning inference",
+		"svelte"
+	],
+	"exports": {
+		".": "./InferenceWidget/InferenceWidget.svelte",
+		"./WidgetHeader.svelte": "./InferenceWidget/shared/WidgetHeader/WidgetHeader.svelte",
+		"./ModelPipelineIcon.svelte": "./ModelPipelineIcon/ModelPipelineIcon.svelte",
+		"./ModelPipelineTag.svelte": "./ModelPipelineTag/ModelPipelineTag.svelte",
+		"./inferenceSnippets": "./inferenceSnippets/index.js",
+		"./inferenceSnippets/inputs": "./inferenceSnippets/inputs.js",
+		"./interfaces/DefaultWidget": "./interfaces/DefaultWidget.js",
+		"./interfaces/Language": "./interfaces/Language.js",
+		"./interfaces/Libraries": "./interfaces/Libraries.js",
+		"./interfaces/Types": "./interfaces/Types.js"
+	},
+	"license": "Apache-2.0"
 }

widgets/postpackage.js

@@ -0,0 +1,25 @@
+import fs from "fs";
+import path from "path";
+
+const copyRecursiveSync = (src, dest) => {
+    const exists = fs.existsSync(src);
+    const stats = exists && fs.statSync(src);
+    const isDirectory = exists && stats.isDirectory();
+    if (isDirectory) {
+      fs.mkdirSync(dest);
+      fs.readdirSync(src).forEach(function(childItemName) {
+        copyRecursiveSync(path.join(src, childItemName),
+                          path.join(dest, childItemName));
+      });
+    } else {
+      fs.copyFileSync(src, dest);
+    }
+  };
+
+const pathtToJson = './package/package.json';
+let pkg = fs.readFileSync(pathtToJson);
+pkg = JSON.parse(pkg);
+delete pkg.type;
+fs.writeFileSync(pathtToJson, JSON.stringify(pkg));
+
+copyRecursiveSync("../docs", "./package/docs");

widgets/src/lib/InferenceWidget/InferenceWidget.svelte

@@ -1,6 +1,6 @@
 <script>
 	import type { SvelteComponent } from "svelte";
-	import type { PipelineType } from "$lib/interfaces/Types";
+	import type { PipelineType } from "../interfaces/Types";
 	import type { WidgetProps } from "./shared/types";
 
 	import AudioClassificationWidget from "./widgets/AudioClassificationWidget/AudioClassificationWidget.svelte";

widgets/src/lib/InferenceWidget/shared/helpers.ts

@@ -1,4 +1,4 @@
-import type { ModelData } from '$lib/interfaces/Types';
+import type { ModelData } from '../../interfaces/Types';
 import { randomItem, parseJSON, } from './ViewUtils';
 import type { LoadingStatus } from './types';
 

widgets/src/lib/InferenceWidget/shared/types.ts

@@ -1,4 +1,4 @@
-import type { ModelData } from '$lib/interfaces/Types';
+import type { ModelData } from '../../interfaces/Types';
 
 export interface WidgetProps {
 	apiToken?: string;

widgets/src/lib/InferenceWidget/widgets/TextGenerationWidget/TextGenerationWidget.svelte

@@ -1,6 +1,6 @@
 <script>
 	import type { WidgetProps } from "../../shared/types";
-	import type { PipelineType } from "$lib/interfaces/Types";
+	import type { PipelineType } from "../../../interfaces/Types";
 
 	import { onMount } from "svelte";
 	import WidgetOutputText from "../../shared/WidgetOutputText/WidgetOutputText.svelte";

widgets/src/lib/ModelPipelineIcon/ModelPipelineIcon.svelte

@@ -1,6 +1,6 @@
 <script>
 	import type { SvelteComponent } from "svelte";
-	import type { PipelineType } from "$lib/interfaces/Types";
+	import type { PipelineType } from "../interfaces/Types";
 
 	import IconAudioClassification from "../Icons/IconAudioClassification.svelte";
 	import IconAudioToAudio from "../Icons/IconAudioToAudio.svelte";

widgets/src/lib/ModelPipelineTag/ModelPipelineTag.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { PipelineType } from "$lib/interfaces/Types";
+	import { PipelineType } from "../interfaces/Types";
 	import ModelPipelineIcon from "../ModelPipelineIcon/ModelPipelineIcon.svelte";
 
 	export let pipeline = "";

widgets/src/routes/[...model].svelte

@@ -1,8 +1,8 @@
 <script context="module">
 	import type { Load } from "@sveltejs/kit";
-	import type { ModelData } from "$lib/interfaces/Types";
+	import type { ModelData } from "../../src/lib/interfaces/Types";
 
-	import InferenceWidget from "$lib/InferenceWidget/InferenceWidget.svelte";
+	import InferenceWidget from "../../src/lib/InferenceWidget/InferenceWidget.svelte";
 
 	/**
 	 * This page is capable of loading any model
@@ -31,7 +31,7 @@
 </script>
 
 <script>
-	import ModeSwitcher from "$lib/_demo/ModeSwitcher.svelte";
+	import ModeSwitcher from "../lib/_demo/ModeSwitcher.svelte";
 
 	export let model: ModelData | undefined;
 	export let message: string | undefined;

widgets/src/routes/index.svelte

@@ -1,7 +1,7 @@
 <script>
-	import InferenceWidget from "$lib/InferenceWidget/InferenceWidget.svelte";
-	import ModeSwitcher from "$lib/_demo/ModeSwitcher.svelte";
-	import type { ModelData } from "$lib/interfaces/Types";
+	import InferenceWidget from "../lib/InferenceWidget/InferenceWidget.svelte";
+	import ModeSwitcher from "../lib/_demo/ModeSwitcher.svelte";
+	import type { ModelData } from "../lib/interfaces/Types";
 
 	const models: ModelData[] = [
 		{

widgets/svelte.config.js

@@ -7,6 +7,7 @@ const config = {
 	// for more information about preprocessors
 	preprocess: preprocess({
 		defaults: { script: "typescript" },
+		typescript: { tsconfigFile: `./tsconfig.svelte.json` },
 		postcss: true,
 	}),
 

widgets/tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		"moduleResolution": "node",
-		"module": "es2020",
+		"module": "commonjs",
 		"lib": ["es2020"],
 		"target": "es2019",
 		/**
@@ -21,10 +21,7 @@
 		"forceConsistentCasingInFileNames": true,
 		"baseUrl": ".",
 		"allowJs": true,
-		"checkJs": true,
-		"paths": {
-			"$lib/*": ["src/lib/*"]
-		}
+		"checkJs": true
 	},
 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
 }

widgets/tsconfig.svelte.json

@@ -0,0 +1,12 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+	"include": ["src/lib/**/*"],
+	"compilerOptions": {
+		"target": "es2018",
+		"alwaysStrict": true,
+		"strictFunctionTypes": true,
+		"strictNullChecks": true,
+		"strictBindCallApply": true,
+		"lib": ["es6", "es2016", "es2017", "es2018", "esnext"]
+	}
+}