Sync widgets demo

packages/tasks/README.md

@@ -9,7 +9,7 @@ The Task pages are made to lower the barrier of entry to understand a task that
 The task pages avoid jargon to let everyone understand the documentation, and if specific terminology is needed, it is explained on the most basic level possible. This is important to understand before contributing to Tasks: at the end of every task page, the user is expected to be able to find and pull a model from the Hub and use it on their data and see if it works for their use case to come up with a proof of concept.
 
 ## How to Contribute
-You can open a pull request to contribute a new documentation about a new task. Under `src` we have a folder for every task that contains two files, `about.md` and `data.ts`. `about.md` contains the markdown part of the page, use cases, resources and minimal code block to infer a model that belongs to the task. `data.ts` contains redirections to canonical models and datasets, metrics, the schema of the task and the information the inference widget needs. 
+You can open a pull request to contribute a new documentation about a new task. Under `src/tasks` we have a folder for every task that contains two files, `about.md` and `data.ts`. `about.md` contains the markdown part of the page, use cases, resources and minimal code block to infer a model that belongs to the task. `data.ts` contains redirections to canonical models and datasets, metrics, the schema of the task and the information the inference widget needs. 
 
 ![Anatomy of a Task Page](https://huggingface.co/datasets/huggingfacejs/tasks/resolve/main/contribution-guide/anatomy.png)
 
@@ -17,4 +17,18 @@ We have a [`dataset`](https://huggingface.co/datasets/huggingfacejs/tasks) that
 
 ![Libraries of a Task](https://huggingface.co/datasets/huggingfacejs/tasks/resolve/main/contribution-guide/libraries.png)
 
-This might seem overwhelming, but you don't necessarily need to add all of these in one pull request or on your own, you can simply contribute one section. Feel free to ask for help whenever you need. 
+This might seem overwhelming, but you don't necessarily need to add all of these in one pull request or on your own, you can simply contribute one section. Feel free to ask for help whenever you need. 
+
+## Other data
+
+This package contains the definition files (written in Typescript) for the huggingface.co hub's:
+
+- **pipeline types** a.k.a. **task types** (used to determine which widget to display on the model page, and which inference API to run)
+- **default widget inputs** (when they aren't provided in the model card)
+- definitions and UI elements for **third party libraries**.
+
+Please add to any of those definitions by opening a PR. Thanks 🔥
+
+⚠️ The hub's definitive doc is at https://huggingface.co/docs/hub.
+
+## Feedback (feature requests, bugs, etc.) is super welcome 💙💚💛💜♥️🧡

packages/tasks/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@huggingface/tasks",
 	"packageManager": "pnpm@8.10.5",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"description": "List of ML tasks for huggingface.co/tasks",
 	"repository": "https://github.com/huggingface/huggingface.js.git",
 	"publishConfig": {

packages/tasks/src/Types.ts

@@ -1,64 +0,0 @@
-import type { ModelLibraryKey } from "./modelLibraries";
-import type { PipelineType } from "./pipelines";
-
-export interface ExampleRepo {
-	description: string;
-	id: string;
-}
-
-export type TaskDemoEntry =
-	| {
-			filename: string;
-			type: "audio";
-	  }
-	| {
-			data: Array<{
-				label: string;
-				score: number;
-			}>;
-			type: "chart";
-	  }
-	| {
-			filename: string;
-			type: "img";
-	  }
-	| {
-			table: string[][];
-			type: "tabular";
-	  }
-	| {
-			content: string;
-			label: string;
-			type: "text";
-	  }
-	| {
-			text: string;
-			tokens: Array<{
-				end: number;
-				start: number;
-				type: string;
-			}>;
-			type: "text-with-tokens";
-	  };
-
-export interface TaskDemo {
-	inputs: TaskDemoEntry[];
-	outputs: TaskDemoEntry[];
-}
-
-export interface TaskData {
-	datasets: ExampleRepo[];
-	demo: TaskDemo;
-	id: PipelineType;
-	isPlaceholder?: boolean;
-	label: string;
-	libraries: ModelLibraryKey[];
-	metrics: ExampleRepo[];
-	models: ExampleRepo[];
-	spaces: ExampleRepo[];
-	summary: string;
-	widgetModels: string[];
-	youtubeId?: string;
-}
-
-export type TaskDataCustom = Omit<TaskData, "id" | "label" | "libraries">;

packages/tasks/src/const.ts

@@ -1,62 +0,0 @@
-import type { ModelLibraryKey } from "./modelLibraries";
-import type { PipelineType } from "./pipelines";
-
-/**
- * Model libraries compatible with each ML task
- */
-export const TASKS_MODEL_LIBRARIES: Record<PipelineType, ModelLibraryKey[]> = {
-	"audio-classification": ["speechbrain", "transformers"],
-	"audio-to-audio": ["asteroid", "speechbrain"],
-	"automatic-speech-recognition": ["espnet", "nemo", "speechbrain", "transformers", "transformers.js"],
-	conversational: ["transformers"],
-	"depth-estimation": ["transformers"],
-	"document-question-answering": ["transformers"],
-	"feature-extraction": ["sentence-transformers", "transformers", "transformers.js"],
-	"fill-mask": ["transformers", "transformers.js"],
-	"graph-ml": ["transformers"],
-	"image-classification": ["keras", "timm", "transformers", "transformers.js"],
-	"image-segmentation": ["transformers", "transformers.js"],
-	"image-to-image": ["diffusers"],
-	"image-to-text": ["transformers.js"],
-	"image-to-video": ["diffusers"],
-	"video-classification": ["transformers"],
-	"mask-generation": ["transformers"],
-	"multiple-choice": ["transformers"],
-	"object-detection": ["transformers", "transformers.js"],
-	other: [],
-	"question-answering": ["adapter-transformers", "allennlp", "transformers", "transformers.js"],
-	robotics: [],
-	"reinforcement-learning": ["transformers", "stable-baselines3", "ml-agents", "sample-factory"],
-	"sentence-similarity": ["sentence-transformers", "spacy", "transformers.js"],
-	summarization: ["transformers", "transformers.js"],
-	"table-question-answering": ["transformers"],
-	"table-to-text": ["transformers"],
-	"tabular-classification": ["sklearn"],
-	"tabular-regression": ["sklearn"],
-	"tabular-to-text": ["transformers"],
-	"text-classification": ["adapter-transformers", "spacy", "transformers", "transformers.js"],
-	"text-generation": ["transformers", "transformers.js"],
-	"text-retrieval": [],
-	"text-to-image": ["diffusers"],
-	"text-to-speech": ["espnet", "tensorflowtts", "transformers"],
-	"text-to-audio": ["transformers"],
-	"text-to-video": ["diffusers"],
-	"text2text-generation": ["transformers", "transformers.js"],
-	"time-series-forecasting": [],
-	"token-classification": [
-		"adapter-transformers",
-		"flair",
-		"spacy",
-		"span-marker",
-		"stanza",
-		"transformers",
-		"transformers.js",
-	],
-	translation: ["transformers", "transformers.js"],
-	"unconditional-image-generation": ["diffusers"],
-	"visual-question-answering": ["transformers"],
-	"voice-activity-detection": [],
-	"zero-shot-classification": ["transformers", "transformers.js"],
-	"zero-shot-image-classification": ["transformers", "transformers.js"],
-	"zero-shot-object-detection": ["transformers"],
-};

packages/{widgets/src/lib/interfaces/DefaultWidget.ts → tasks/src/default-widget-inputs.ts}

@@ -1,5 +1,5 @@
-import type { PipelineType } from "@huggingface/tasks";
-import type { WidgetExample } from "../components/InferenceWidget/shared/WidgetExample.js";
+import type { WidgetExample } from "./model-data";
+import type { PipelineType } from "./pipelines";
 
 type LanguageCode = string;
 

packages/tasks/src/index.ts

@@ -1,5 +1,8 @@
-export type { TaskData, TaskDemo, TaskDemoEntry, ExampleRepo } from "./Types";
-export { TASKS_DATA } from "./tasksData";
+export { LIBRARY_TASK_MAPPING_EXCLUDING_TRANSFORMERS } from "./library-to-tasks";
+export { MODEL_LIBRARIES_UI_ELEMENTS } from "./library-ui-elements";
+export { MAPPING_DEFAULT_WIDGET } from "./default-widget-inputs";
+export type { TaskData, TaskDemo, TaskDemoEntry, ExampleRepo } from "./tasks";
+export * from "./tasks";
 export {
 	PIPELINE_DATA,
 	PIPELINE_TYPES,
@@ -11,7 +14,35 @@ export {
 	SUBTASK_TYPES,
 	PIPELINE_TYPES_SET,
 } from "./pipelines";
-export { ModelLibrary, ALL_DISPLAY_MODEL_LIBRARY_KEYS } from "./modelLibraries";
-export type { ModelLibraryKey } from "./modelLibraries";
+export { ModelLibrary, ALL_DISPLAY_MODEL_LIBRARY_KEYS } from "./model-libraries";
+export type { ModelLibraryKey } from "./model-libraries";
+export {
+	ModelData,
+	TransformersInfo,
+	WidgetExample,
+	WidgetExampleAttribute,
+	WidgetExampleAssetAndPromptInput,
+	WidgetExampleAssetAndTextInput,
+	WidgetExampleAssetAndZeroShotInput,
+	WidgetExampleAssetInput,
+	WidgetExampleSentenceSimilarityInput,
+	WidgetExampleStructuredDataInput,
+	WidgetExampleTableDataInput,
+	WidgetExampleTextAndContextInput,
+	WidgetExampleTextAndTableInput,
+	WidgetExampleTextInput,
+	WidgetExampleZeroShotTextInput,
+	WidgetExampleOutput,
+	WidgetExampleOutputUrl,
+	WidgetExampleOutputLabels,
+	WidgetExampleOutputAnswerScore,
+	WidgetExampleOutputText,
+} from "./model-data";
+export { InferenceDisplayability } from "./model-data";
 
 export { TAG_NFAA_CONTENT, OTHER_TAGS_SUGGESTIONS, TAG_TEXT_GENERATION_INFERENCE, TAG_CUSTOM_CODE } from "./tags";
+
+import * as snippets from "./snippets";
+export { snippets };
+
+export type { LibraryUiElement } from "./library-ui-elements";

packages/{widgets/src/lib/interfaces/LibrariesToTasks.ts → tasks/src/library-to-tasks.ts}

@@ -1,4 +1,5 @@
-import type { ModelLibraryKey, PipelineType } from "@huggingface/tasks";
+import type { ModelLibraryKey } from "./model-libraries";
+import type { PipelineType } from "./pipelines";
 
 /**
  * Mapping from library name (excluding Transformers) to its supported tasks.

packages/{widgets/src/lib/interfaces/Libraries.ts → tasks/src/library-ui-elements.ts}

@@ -1,6 +1,5 @@
-import type { ModelLibraryKey } from "@huggingface/tasks";
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { ModelData } from "./Types.js";
+import type { ModelData } from "./model-data";
+import type { ModelLibraryKey } from "./model-libraries";
 
 /**
  * Elements configurable by a model library.

packages/{widgets/src/lib/components/InferenceWidget/shared/WidgetExample.ts → tasks/src/model-data.ts}

@@ -1,3 +1,5 @@
+import type { PipelineType } from "./pipelines";
+
 type TableData = Record<string, (string | number)[]>;
 
 //#region outputs
@@ -112,3 +114,126 @@ export type WidgetExample<TOutput = WidgetExampleOutput> =
 type KeysOfUnion<T> = T extends unknown ? keyof T : never;
 
 export type WidgetExampleAttribute = KeysOfUnion<WidgetExample>;
+
+export enum InferenceDisplayability {
+	/**
+	 * Yes
+	 */
+	Yes = "Yes",
+	/**
+	 * And then, all the possible reasons why it's no:
+	 */
+	ExplicitOptOut = "ExplicitOptOut",
+	CustomCode = "CustomCode",
+	LibraryNotDetected = "LibraryNotDetected",
+	PipelineNotDetected = "PipelineNotDetected",
+	PipelineLibraryPairNotSupported = "PipelineLibraryPairNotSupported",
+}
+
+/**
+ * Public interface for model metadata
+ */
+export interface ModelData {
+	/**
+	 * id of model (e.g. 'user/repo_name')
+	 */
+	id: string;
+	/**
+	 * Kept for backward compatibility
+	 */
+	modelId?: string;
+	/**
+	 * Whether or not to enable inference widget for this model
+	 */
+	inference: InferenceDisplayability;
+	/**
+	 * is this model private?
+	 */
+	private?: boolean;
+	/**
+	 * this dictionary has useful information about the model configuration
+	 */
+	config?: Record<string, unknown> & {
+		adapter_transformers?: { model_class?: string; model_name?: string };
+		architectures?: string[];
+		sklearn?: {
+			filename?: string;
+			model_format?: string;
+		};
+		speechbrain?: {
+			interface?: string;
+		};
+		peft?: {
+			base_model_name?: string;
+			task_type?: string;
+		};
+	};
+	/**
+	 * all the model tags
+	 */
+	tags?: string[];
+	/**
+	 * transformers-specific info to display in the code sample.
+	 */
+	transformersInfo?: TransformersInfo;
+	/**
+	 * Pipeline type
+	 */
+	pipeline_tag?: 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?: WidgetExample[] | undefined;
+	/**
+	 * Parameters that will be used by the widget when calling Inference API
+	 * https://huggingface.co/docs/api-inference/detailed_parameters
+	 *
+	 * can be set in the model card metadata (under `inference/parameters`)
+	 * Example:
+	 * inference:
+	 *     parameters:
+	 *         key: val
+	 */
+	cardData?: {
+		inference?:
+			| boolean
+			| {
+					parameters?: Record<string, unknown>;
+			  };
+		base_model?: string;
+	};
+	/**
+	 * Library name
+	 * Example: transformers, SpeechBrain, Stanza, etc.
+	 */
+	library_name?: string;
+}
+
+/**
+ * transformers-specific info to display in the code sample.
+ */
+export interface TransformersInfo {
+	/**
+	 * e.g. AutoModelForSequenceClassification
+	 */
+	auto_model: string;
+	/**
+	 * if set in config.json's auto_map
+	 */
+	custom_class?: string;
+	/**
+	 * e.g. text-classification
+	 */
+	pipeline_tag?: PipelineType;
+	/**
+	 * e.g. "AutoTokenizer" | "AutoFeatureExtractor" | "AutoProcessor"
+	 */
+	processor?: string;
+}

packages/{widgets/src/lib/inferenceSnippets/serveCurl.ts → tasks/src/snippets/curl.ts}

@@ -1,5 +1,5 @@
-import type { PipelineType } from "@huggingface/tasks";
-import type { ModelData } from "../interfaces/Types.js";
+import type { ModelData } from "../model-data.js";
+import type { PipelineType } from "../pipelines.js";
 import { getModelInputSnippet } from "./inputs.js";
 
 export const snippetBasic = (model: ModelData, accessToken: string): string =>

packages/tasks/src/snippets/index.ts

@@ -0,0 +1,6 @@
+import * as inputs from "./inputs";
+import * as curl from "./curl";
+import * as python from "./python";
+import * as js from "./js";
+
+export { inputs, curl, python, js };

packages/{widgets/src/lib/inferenceSnippets → tasks/src/snippets}/inputs.ts

@@ -1,5 +1,5 @@
-import type { PipelineType } from "@huggingface/tasks";
-import type { ModelData } from "../interfaces/Types.js";
+import type { ModelData } from "../model-data";
+import type { PipelineType } from "../pipelines";
 
 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!"`;

packages/{widgets/src/lib/inferenceSnippets/serveJs.ts → tasks/src/snippets/js.ts}

@@ -1,5 +1,5 @@
-import type { PipelineType } from "@huggingface/tasks";
-import type { ModelData } from "../interfaces/Types.js";
+import type { ModelData } from "../model-data.js";
+import type { PipelineType } from "../pipelines.js";
 import { getModelInputSnippet } from "./inputs.js";
 
 export const snippetBasic = (model: ModelData, accessToken: string): string =>

packages/{widgets/src/lib/inferenceSnippets/servePython.ts → tasks/src/snippets/python.ts}

@@ -1,5 +1,5 @@
-import type { PipelineType } from "@huggingface/tasks";
-import type { ModelData } from "../interfaces/Types.js";
+import type { ModelData } from "../model-data.js";
+import type { PipelineType } from "../pipelines.js";
 import { getModelInputSnippet } from "./inputs.js";
 
 export const snippetZeroShotClassification = (model: ModelData): string =>

packages/tasks/src/{audio-classification → tasks/audio-classification}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{audio-to-audio → tasks/audio-to-audio}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{automatic-speech-recognition → tasks/automatic-speech-recognition}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{conversational → tasks/conversational}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{depth-estimation → tasks/depth-estimation}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{document-question-answering → tasks/document-question-answering}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{feature-extraction → tasks/feature-extraction}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{fill-mask → tasks/fill-mask}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{image-classification → tasks/image-classification}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{image-segmentation → tasks/image-segmentation}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{image-to-image → tasks/image-to-image}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{image-to-text → tasks/image-to-text}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{tasksData.ts → tasks/index.ts}

@@ -1,5 +1,4 @@
-import { type PipelineType, PIPELINE_DATA } from "./pipelines";
-import type { TaskDataCustom, TaskData } from "./Types";
+import { type PipelineType, PIPELINE_DATA } from "../pipelines";
 
 import audioClassification from "./audio-classification/data";
 import audioToAudio from "./audio-to-audio/data";
@@ -34,7 +33,82 @@ import videoClassification from "./video-classification/data";
 import visualQuestionAnswering from "./visual-question-answering/data";
 import zeroShotClassification from "./zero-shot-classification/data";
 import zeroShotImageClassification from "./zero-shot-image-classification/data";
-import { TASKS_MODEL_LIBRARIES } from "./const";
+
+import type { ModelLibraryKey } from "../model-libraries";
+
+/**
+ * Model libraries compatible with each ML task
+ */
+export const TASKS_MODEL_LIBRARIES: Record<PipelineType, ModelLibraryKey[]> = {
+	"audio-classification": ["speechbrain", "transformers"],
+	"audio-to-audio": ["asteroid", "speechbrain"],
+	"automatic-speech-recognition": ["espnet", "nemo", "speechbrain", "transformers", "transformers.js"],
+	conversational: ["transformers"],
+	"depth-estimation": ["transformers"],
+	"document-question-answering": ["transformers"],
+	"feature-extraction": ["sentence-transformers", "transformers", "transformers.js"],
+	"fill-mask": ["transformers", "transformers.js"],
+	"graph-ml": ["transformers"],
+	"image-classification": ["keras", "timm", "transformers", "transformers.js"],
+	"image-segmentation": ["transformers", "transformers.js"],
+	"image-to-image": ["diffusers"],
+	"image-to-text": ["transformers.js"],
+	"image-to-video": ["diffusers"],
+	"video-classification": ["transformers"],
+	"mask-generation": ["transformers"],
+	"multiple-choice": ["transformers"],
+	"object-detection": ["transformers", "transformers.js"],
+	other: [],
+	"question-answering": ["adapter-transformers", "allennlp", "transformers", "transformers.js"],
+	robotics: [],
+	"reinforcement-learning": ["transformers", "stable-baselines3", "ml-agents", "sample-factory"],
+	"sentence-similarity": ["sentence-transformers", "spacy", "transformers.js"],
+	summarization: ["transformers", "transformers.js"],
+	"table-question-answering": ["transformers"],
+	"table-to-text": ["transformers"],
+	"tabular-classification": ["sklearn"],
+	"tabular-regression": ["sklearn"],
+	"tabular-to-text": ["transformers"],
+	"text-classification": ["adapter-transformers", "spacy", "transformers", "transformers.js"],
+	"text-generation": ["transformers", "transformers.js"],
+	"text-retrieval": [],
+	"text-to-image": ["diffusers"],
+	"text-to-speech": ["espnet", "tensorflowtts", "transformers"],
+	"text-to-audio": ["transformers"],
+	"text-to-video": ["diffusers"],
+	"text2text-generation": ["transformers", "transformers.js"],
+	"time-series-forecasting": [],
+	"token-classification": [
+		"adapter-transformers",
+		"flair",
+		"spacy",
+		"span-marker",
+		"stanza",
+		"transformers",
+		"transformers.js",
+	],
+	translation: ["transformers", "transformers.js"],
+	"unconditional-image-generation": ["diffusers"],
+	"visual-question-answering": ["transformers"],
+	"voice-activity-detection": [],
+	"zero-shot-classification": ["transformers", "transformers.js"],
+	"zero-shot-image-classification": ["transformers", "transformers.js"],
+	"zero-shot-object-detection": ["transformers"],
+};
+
+/**
+ * Return the whole TaskData object for a certain task.
+ * If the partialTaskData argument is left undefined,
+ * the default placholder data will be used.
+ */
+function getData(type: PipelineType, partialTaskData: TaskDataCustom = placeholder): TaskData {
+	return {
+		...partialTaskData,
+		id: type,
+		label: PIPELINE_DATA[type].name,
+		libraries: TASKS_MODEL_LIBRARIES[type],
+	};
+}
 
 // To make comparisons easier, task order is the same as in const.ts
 // Tasks set to undefined won't have an associated task page.
@@ -89,16 +163,64 @@ export const TASKS_DATA: Record<PipelineType, TaskData | undefined> = {
 	"zero-shot-object-detection": getData("zero-shot-object-detection", placeholder),
 } as const;
 
-/**
- * Return the whole TaskData object for a certain task.
- * If the partialTaskData argument is left undefined,
- * the default placholder data will be used.
- */
-function getData(type: PipelineType, partialTaskData: TaskDataCustom = placeholder): TaskData {
-	return {
-		...partialTaskData,
-		id: type,
-		label: PIPELINE_DATA[type].name,
-		libraries: TASKS_MODEL_LIBRARIES[type],
-	};
+export interface ExampleRepo {
+	description: string;
+	id: string;
 }
+
+export type TaskDemoEntry =
+	| {
+			filename: string;
+			type: "audio";
+	  }
+	| {
+			data: Array<{
+				label: string;
+				score: number;
+			}>;
+			type: "chart";
+	  }
+	| {
+			filename: string;
+			type: "img";
+	  }
+	| {
+			table: string[][];
+			type: "tabular";
+	  }
+	| {
+			content: string;
+			label: string;
+			type: "text";
+	  }
+	| {
+			text: string;
+			tokens: Array<{
+				end: number;
+				start: number;
+				type: string;
+			}>;
+			type: "text-with-tokens";
+	  };
+
+export interface TaskDemo {
+	inputs: TaskDemoEntry[];
+	outputs: TaskDemoEntry[];
+}
+
+export interface TaskData {
+	datasets: ExampleRepo[];
+	demo: TaskDemo;
+	id: PipelineType;
+	isPlaceholder?: boolean;
+	label: string;
+	libraries: ModelLibraryKey[];
+	metrics: ExampleRepo[];
+	models: ExampleRepo[];
+	spaces: ExampleRepo[];
+	summary: string;
+	widgetModels: string[];
+	youtubeId?: string;
+}
+
+export type TaskDataCustom = Omit<TaskData, "id" | "label" | "libraries">;

packages/tasks/src/{object-detection → tasks/object-detection}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{placeholder → tasks/placeholder}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [],

packages/tasks/src/{question-answering → tasks/question-answering}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{reinforcement-learning → tasks/reinforcement-learning}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [

packages/tasks/src/{sentence-similarity → tasks/sentence-similarity}/data.ts

@@ -1,4 +1,4 @@
-import type { TaskDataCustom } from "../Types";
+import type { TaskDataCustom } from "..";
 
 const taskData: TaskDataCustom = {
 	datasets: [