Open source Inference widgets + optimize for community contributions

.github/workflows/js-widgets-tests.yml

@@ -0,0 +1,58 @@
+name: JS Widgets
+
+on:
+  push:
+    paths:
+      - "widgets/**"
+  pull_request:
+    paths:
+      - "widgets/**"
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - working-directory: widgets
+        run: |
+          npm ci
+      - name: Check style
+        working-directory: widgets
+        run: |
+          npm run lint
+      - name: Check svelte
+        working-directory: widgets
+        run: |
+          npm run check
+      - name: Build front
+        working-directory: widgets
+        run: |
+          npm run build
+
+      # CD of static site
+      - name: Netlify install
+        working-directory: widgets
+        run: |
+          npm i netlify-cli
+
+      - name: Netlify find out whether push to prod
+        if: endsWith(github.ref, '/master')
+        run: |
+          echo "::set-env name=NETLIFY_EXTRA_FLAG::--prod"
+
+      - name: Netlify deploy
+        working-directory: widgets
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: 69b9df00-bfdd-4499-bd7f-6add4d703d99
+        run: |
+          npx netlify deploy --auth "$NETLIFY_AUTH_TOKEN" --dir ./build/ --site ${NETLIFY_SITE_ID} ${NETLIFY_EXTRA_FLAG}

.github/workflows/python-quality.yml

@@ -6,10 +6,12 @@ on:
       - main
     paths-ignore:
       - "interfaces/**"
+      - "widgets/**"
   pull_request:
     types: [assigned, opened, synchronize, reopened]
     paths-ignore:
       - "interfaces/**"
+      - "widgets/**"
 
 jobs:
   check_code_quality:

.github/workflows/python-tests.yml

@@ -6,10 +6,12 @@ on:
       - main
     paths-ignore:
       - "interfaces/**"
+      - "widgets/**"
   pull_request:
     types: [assigned, opened, synchronize, reopened]
     paths-ignore:
       - "interfaces/**"
+      - "widgets/**"
 
 jobs:
   build:

.gitignore

@@ -14,7 +14,6 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/

interfaces/DefaultWidget.ts

@@ -1,4 +1,4 @@
-import { PipelineType } from './Types';
+import type { PipelineType } from './Types';
 
 type LanguageCode = string;
 

interfaces/Libraries.ts

@@ -1,3 +1,4 @@
+import type { ModelData } from "./Types";
 
 /**
  * Add your new library here.
@@ -18,33 +19,6 @@ export enum ModelLibrary {
 
 export const ALL_MODEL_LIBRARY_KEYS = Object.keys(ModelLibrary) as (keyof typeof ModelLibrary)[];
 
-/**
- * subset of model metadata that
- * a code snippet can depend on.
- */
-interface ModelData {
-	/**
-	 * id of model (e.g. 'user/repo_name')
-	 */
-	modelId: string;
-	/**
-	 * is this model private?
-	 */
-	private: boolean;
-	/**
-	 * all the model tags
-	 */
-	tags: string[];
-	/**
-	 * this is transformers-specific
-	 */
-	autoArchitecture: string;
-	/**
-	 * this dictionary has useful information about the model configuration
-	 */
-	config?: Record<string, any>;
-}
-
 
 /**
  * Elements configurable by a model library.

interfaces/Types.ts

@@ -55,3 +55,45 @@ export const PIPELINE_TYPE_PRETTY_NAMES: { [key in PipelineType]: string } = {
 	"image-segmentation":                                       "Image Segmentation",
 };
 
+
+
+/**
+ * Public interface for model metadata
+ */
+export interface ModelData {
+	/**
+	 * id of model (e.g. 'user/repo_name')
+	 */
+	modelId: string;
+	/**
+	 * is this model private?
+	 */
+	private?: boolean;
+	/**
+	 * this dictionary has useful information about the model configuration
+	 */
+	config?: Record<string, any>;
+	/**
+	 * all the model tags
+	 */
+	tags?: string[];
+	/**
+	 * this is transformers-specific
+	 */
+	autoArchitecture?: string;
+	/**
+	 * Pipeline type
+	 */
+	pipeline_tag?: (keyof typeof PipelineType) | undefined;
+	/**
+	 * for relevant models, get mask token
+	 */
+	mask_token?: string | undefined;
+	/**
+	 * Example data that will be fed into the widget.
+	 *
+	 * can be set in the model card metadata (under `widget`),
+	 * or by default in `DefaultWidget.ts`
+	 */
+	widgetData?: Record<string, any>[] | undefined;
+}

widgets/.gitignore

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

widgets/.netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "69b9df00-bfdd-4499-bd7f-6add4d703d99"
+}

widgets/.prettierignore

@@ -0,0 +1,10 @@
+.svelte-kit/**
+static/**
+build/**
+node_modules/**
+*.js
+*.mjs
+*.cjs
+*.md
+*.ts
+*.css

widgets/.prettierrc

@@ -0,0 +1,3 @@
+{
+	"useTabs": true
+}

widgets/README.md

@@ -0,0 +1,31 @@
+# huggingface-widgets
+
+Open-source version of the inference widgets from huggingface.co
+
+> 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
+
+## How to develop
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Build for production
+
+```bash
+npm run build
+```
+