Sync widgets demo

packages/tasks/src/snippets/curl.ts

@@ -1,8 +1,8 @@
-import type { ModelData } from "../model-data.js";
 import type { PipelineType } from "../pipelines.js";
 import { getModelInputSnippet } from "./inputs.js";
+import type { ModelDataMinimal } from "./types.js";
 
-export const snippetBasic = (model: ModelData, accessToken: string): string =>
+export const snippetBasic = (model: ModelDataMinimal, accessToken: string): string =>
 	`curl https://api-inference.huggingface.co/models/${model.id} \\
 	-X POST \\
 	-d '{"inputs": ${getModelInputSnippet(model, true)}}' \\
@@ -10,7 +10,7 @@ export const snippetBasic = (model: ModelData, accessToken: string): string =>
 	-H "Authorization: Bearer ${accessToken || `{API_TOKEN}`}"
 `;
 
-export const snippetZeroShotClassification = (model: ModelData, accessToken: string): string =>
+export const snippetZeroShotClassification = (model: ModelDataMinimal, accessToken: string): string =>
 	`curl https://api-inference.huggingface.co/models/${model.id} \\
 	-X POST \\
 	-d '{"inputs": ${getModelInputSnippet(model, true)}, "parameters": {"candidate_labels": ["refund", "legal", "faq"]}}' \\
@@ -18,14 +18,14 @@ export const snippetZeroShotClassification = (model: ModelData, accessToken: str
 	-H "Authorization: Bearer ${accessToken || `{API_TOKEN}`}"
 `;
 
-export const snippetFile = (model: ModelData, accessToken: string): string =>
+export const snippetFile = (model: ModelDataMinimal, accessToken: string): string =>
 	`curl https://api-inference.huggingface.co/models/${model.id} \\
 	-X POST \\
 	--data-binary '@${getModelInputSnippet(model, true, true)}' \\
 	-H "Authorization: Bearer ${accessToken || `{API_TOKEN}`}"
 `;
 
-export const curlSnippets: Partial<Record<PipelineType, (model: ModelData, accessToken: string) => string>> = {
+export const curlSnippets: Partial<Record<PipelineType, (model: ModelDataMinimal, accessToken: string) => string>> = {
 	// Same order as in js/src/lib/interfaces/Types.ts
 	"text-classification": snippetBasic,
 	"token-classification": snippetBasic,
@@ -51,12 +51,12 @@ export const curlSnippets: Partial<Record<PipelineType, (model: ModelData, acces
 	"image-segmentation": snippetFile,
 };
 
-export function getCurlInferenceSnippet(model: ModelData, accessToken: string): string {
+export function getCurlInferenceSnippet(model: ModelDataMinimal, accessToken: string): string {
 	return model.pipeline_tag && model.pipeline_tag in curlSnippets
 		? curlSnippets[model.pipeline_tag]?.(model, accessToken) ?? ""
 		: "";
 }
 
-export function hasCurlInferenceSnippet(model: ModelData): boolean {
+export function hasCurlInferenceSnippet(model: Pick<ModelDataMinimal, "pipeline_tag">): boolean {
 	return !!model.pipeline_tag && model.pipeline_tag in curlSnippets;
 }

packages/tasks/src/snippets/inputs.ts

@@ -1,5 +1,5 @@
-import type { ModelData } from "../model-data";
 import type { PipelineType } from "../pipelines";
+import type { ModelDataMinimal } from "./types";
 
 const inputsZeroShotClassification = () =>
 	`"Hi, I recently bought a device from your company but it is not working as advertised and I would like to get reimbursed!"`;
@@ -44,7 +44,7 @@ const inputsTextGeneration = () => `"Can you please let us know more details abo
 
 const inputsText2TextGeneration = () => `"The answer to the universe is"`;
 
-const inputsFillMask = (model: ModelData) => `"The answer to the universe is ${model.mask_token}."`;
+const inputsFillMask = (model: ModelDataMinimal) => `"The answer to the universe is ${model.mask_token}."`;
 
 const inputsSentenceSimilarity = () =>
 	`{
@@ -84,7 +84,7 @@ const inputsTabularPrediction = () =>
 const inputsZeroShotImageClassification = () => `"cats.jpg"`;
 
 const modelInputSnippets: {
-	[key in PipelineType]?: (model: ModelData) => string;
+	[key in PipelineType]?: (model: ModelDataMinimal) => string;
 } = {
 	"audio-to-audio": inputsAudioToAudio,
 	"audio-classification": inputsAudioClassification,
@@ -116,7 +116,7 @@ const modelInputSnippets: {
 
 // Use noWrap to put the whole snippet on a single line (removing new lines and tabulations)
 // Use noQuotes to strip quotes from start & end (example: "abc" -> abc)
-export function getModelInputSnippet(model: ModelData, noWrap = false, noQuotes = false): string {
+export function getModelInputSnippet(model: ModelDataMinimal, noWrap = false, noQuotes = false): string {
 	if (model.pipeline_tag) {
 		const inputs = modelInputSnippets[model.pipeline_tag];
 		if (inputs) {

packages/tasks/src/snippets/js.ts

@@ -1,8 +1,8 @@
-import type { ModelData } from "../model-data.js";
 import type { PipelineType } from "../pipelines.js";
 import { getModelInputSnippet } from "./inputs.js";
+import type { ModelDataMinimal } from "./types.js";
 
-export const snippetBasic = (model: ModelData, accessToken: string): string =>
+export const snippetBasic = (model: ModelDataMinimal, accessToken: string): string =>
 	`async function query(data) {
 	const response = await fetch(
 		"https://api-inference.huggingface.co/models/${model.id}",
@@ -20,7 +20,7 @@ query({"inputs": ${getModelInputSnippet(model)}}).then((response) => {
 	console.log(JSON.stringify(response));
 });`;
 
-export const snippetZeroShotClassification = (model: ModelData, accessToken: string): string =>
+export const snippetZeroShotClassification = (model: ModelDataMinimal, accessToken: string): string =>
 	`async function query(data) {
 	const response = await fetch(
 		"https://api-inference.huggingface.co/models/${model.id}",
@@ -40,7 +40,7 @@ query({"inputs": ${getModelInputSnippet(
 	console.log(JSON.stringify(response));
 });`;
 
-export const snippetTextToImage = (model: ModelData, accessToken: string): string =>
+export const snippetTextToImage = (model: ModelDataMinimal, accessToken: string): string =>
 	`async function query(data) {
 	const response = await fetch(
 		"https://api-inference.huggingface.co/models/${model.id}",
@@ -57,7 +57,7 @@ query({"inputs": ${getModelInputSnippet(model)}}).then((response) => {
 	// Use image
 });`;
 
-export const snippetTextToAudio = (model: ModelData, accessToken: string): string => {
+export const snippetTextToAudio = (model: ModelDataMinimal, accessToken: string): string => {
 	const commonSnippet = `async function query(data) {
 		const response = await fetch(
 			"https://api-inference.huggingface.co/models/${model.id}",
@@ -93,7 +93,7 @@ export const snippetTextToAudio = (model: ModelData, accessToken: string): strin
 	}
 };
 
-export const snippetFile = (model: ModelData, accessToken: string): string =>
+export const snippetFile = (model: ModelDataMinimal, accessToken: string): string =>
 	`async function query(filename) {
 	const data = fs.readFileSync(filename);
 	const response = await fetch(
@@ -112,7 +112,7 @@ query(${getModelInputSnippet(model)}).then((response) => {
 	console.log(JSON.stringify(response));
 });`;
 
-export const jsSnippets: Partial<Record<PipelineType, (model: ModelData, accessToken: string) => string>> = {
+export const jsSnippets: Partial<Record<PipelineType, (model: ModelDataMinimal, accessToken: string) => string>> = {
 	// Same order as in js/src/lib/interfaces/Types.ts
 	"text-classification": snippetBasic,
 	"token-classification": snippetBasic,
@@ -138,12 +138,12 @@ export const jsSnippets: Partial<Record<PipelineType, (model: ModelData, accessT
 	"image-segmentation": snippetFile,
 };
 
-export function getJsInferenceSnippet(model: ModelData, accessToken: string): string {
+export function getJsInferenceSnippet(model: ModelDataMinimal, accessToken: string): string {
 	return model.pipeline_tag && model.pipeline_tag in jsSnippets
 		? jsSnippets[model.pipeline_tag]?.(model, accessToken) ?? ""
 		: "";
 }
 
-export function hasJsInferenceSnippet(model: ModelData): boolean {
+export function hasJsInferenceSnippet(model: ModelDataMinimal): boolean {
 	return !!model.pipeline_tag && model.pipeline_tag in jsSnippets;
 }

packages/tasks/src/snippets/python.ts

@@ -1,8 +1,8 @@
-import type { ModelData } from "../model-data.js";
 import type { PipelineType } from "../pipelines.js";
 import { getModelInputSnippet } from "./inputs.js";
+import type { ModelDataMinimal } from "./types.js";
 
-export const snippetZeroShotClassification = (model: ModelData): string =>
+export const snippetZeroShotClassification = (model: ModelDataMinimal): string =>
 	`def query(payload):
 	response = requests.post(API_URL, headers=headers, json=payload)
 	return response.json()
@@ -12,7 +12,7 @@ output = query({
     "parameters": {"candidate_labels": ["refund", "legal", "faq"]},
 })`;
 
-export const snippetZeroShotImageClassification = (model: ModelData): string =>
+export const snippetZeroShotImageClassification = (model: ModelDataMinimal): string =>
 	`def query(data):
 	with open(data["image_path"], "rb") as f:
 		img = f.read()
@@ -28,7 +28,7 @@ output = query({
     "parameters": {"candidate_labels": ["cat", "dog", "llama"]},
 })`;
 
-export const snippetBasic = (model: ModelData): string =>
+export const snippetBasic = (model: ModelDataMinimal): string =>
 	`def query(payload):
 	response = requests.post(API_URL, headers=headers, json=payload)
 	return response.json()
@@ -37,7 +37,7 @@ output = query({
 	"inputs": ${getModelInputSnippet(model)},
 })`;
 
-export const snippetFile = (model: ModelData): string =>
+export const snippetFile = (model: ModelDataMinimal): string =>
 	`def query(filename):
     with open(filename, "rb") as f:
         data = f.read()
@@ -46,7 +46,7 @@ export const snippetFile = (model: ModelData): string =>
 
 output = query(${getModelInputSnippet(model)})`;
 
-export const snippetTextToImage = (model: ModelData): string =>
+export const snippetTextToImage = (model: ModelDataMinimal): string =>
 	`def query(payload):
 	response = requests.post(API_URL, headers=headers, json=payload)
 	return response.content
@@ -58,7 +58,7 @@ import io
 from PIL import Image
 image = Image.open(io.BytesIO(image_bytes))`;
 
-export const snippetTabular = (model: ModelData): string =>
+export const snippetTabular = (model: ModelDataMinimal): string =>
 	`def query(payload):
 	response = requests.post(API_URL, headers=headers, json=payload)
 	return response.content
@@ -66,7 +66,7 @@ response = query({
 	"inputs": {"data": ${getModelInputSnippet(model)}},
 })`;
 
-export const snippetTextToAudio = (model: ModelData): string => {
+export const snippetTextToAudio = (model: ModelDataMinimal): string => {
 	// Transformers TTS pipeline and api-inference-community (AIC) pipeline outputs are diverged
 	// with the latest update to inference-api (IA).
 	// Transformers IA returns a byte object (wav file), whereas AIC returns wav and sampling_rate.
@@ -95,7 +95,7 @@ Audio(audio, rate=sampling_rate)`;
 	}
 };
 
-export const snippetDocumentQuestionAnswering = (model: ModelData): string =>
+export const snippetDocumentQuestionAnswering = (model: ModelDataMinimal): string =>
 	`def query(payload):
  	with open(payload["image"], "rb") as f:
   		img = f.read()
@@ -107,7 +107,7 @@ output = query({
     "inputs": ${getModelInputSnippet(model)},
 })`;
 
-export const pythonSnippets: Partial<Record<PipelineType, (model: ModelData) => string>> = {
+export const pythonSnippets: Partial<Record<PipelineType, (model: ModelDataMinimal) => string>> = {
 	// Same order as in tasks/src/pipelines.ts
 	"text-classification": snippetBasic,
 	"token-classification": snippetBasic,
@@ -137,7 +137,7 @@ export const pythonSnippets: Partial<Record<PipelineType, (model: ModelData) =>
 	"zero-shot-image-classification": snippetZeroShotImageClassification,
 };
 
-export function getPythonInferenceSnippet(model: ModelData, accessToken: string): string {
+export function getPythonInferenceSnippet(model: ModelDataMinimal, accessToken: string): string {
 	const body =
 		model.pipeline_tag && model.pipeline_tag in pythonSnippets ? pythonSnippets[model.pipeline_tag]?.(model) ?? "" : "";
 
@@ -149,6 +149,6 @@ headers = {"Authorization": ${accessToken ? `"Bearer ${accessToken}"` : `f"Beare
 ${body}`;
 }
 
-export function hasPythonInferenceSnippet(model: ModelData): boolean {
+export function hasPythonInferenceSnippet(model: ModelDataMinimal): boolean {
 	return !!model.pipeline_tag && model.pipeline_tag in pythonSnippets;
 }

packages/tasks/src/snippets/types.ts

@@ -0,0 +1,8 @@
+import type { ModelData } from "../model-data";
+
+/**
+ * Minimal model data required for snippets.
+ *
+ * Add more fields as needed.
+ */
+export type ModelDataMinimal = Pick<ModelData, "id" | "pipeline_tag" | "mask_token" | "library_name">;