Sync widgets demo

packages/tasks/src/tasks/feature-extraction/about.md

@@ -1,20 +1,13 @@
-## About the Task
-
-Feature extraction is the task of building features intended to be informative from a given dataset,
-facilitating the subsequent learning and generalization steps in various domains of machine learning.
-
 ## Use Cases
 
-Feature extraction can be used to do transfer learning in natural language processing, computer vision and audio models.
+Models trained on a specific dataset can learn features about the data. For instance, a model trained on an English poetry dataset learns English grammar at a very high level. This information can be transferred to a new model that is going to be trained on tweets. This process of extracting features and transferring to another model is called transfer learning. One can pass their dataset through a feature extraction pipeline and feed the result to a classifier.
 
 ## Inference
 
-#### Feature Extraction
-
 ```python
 from transformers import pipeline
 checkpoint = "facebook/bart-base"
-feature_extractor = pipeline("feature-extraction",framework="pt",model=checkpoint)
+feature_extractor = pipeline("feature-extraction", framework="pt", model=checkpoint)
 text = "Transformers is an awesome library!"
 
 #Reducing along the first dimension to get a 768 dimensional array

packages/tasks/src/tasks/feature-extraction/data.ts

@@ -41,8 +41,7 @@ const taskData: TaskDataCustom = {
 		},
 	],
 	spaces: [],
-	summary:
-		"Feature extraction refers to the process of transforming raw data into numerical features that can be processed while preserving the information in the original dataset.",
+	summary: "Feature extraction is the task of extracting features learnt in a model.",
 	widgetModels: ["facebook/bart-base"],
 };
 

packages/tasks/src/tasks/image-feature-extraction/about.md

@@ -0,0 +1,23 @@
+## Use Cases
+
+### Transfer Learning
+
+Models trained on a specific dataset can learn features about the data. For instance, a model trained on a car classification dataset learns to recognize edges and curves on a very high level and car-specific features on a low level. This information can be transferred to a new model that is going to be trained on classifying trucks. This process of extracting features and transferring to another model is called transfer learning.
+
+### Similarity
+
+Features extracted from models contain semantically meaningful information about the world. These features can be used to detect the similarity between two images. Assume there are two images: a photo of a stray cat in a street setting and a photo of a cat at home. These images both contain cats, and the features will contain the information that there's a cat in the image. Thus, comparing the features of a stray cat photo to the features of a domestic cat photo will result in higher similarity compared to any other image that doesn't contain any cats.
+
+## Inference
+
+```python
+import torch
+from transformers import pipeline
+
+pipe = pipeline(task="image-feature-extraction", model_name="google/vit-base-patch16-384", framework="pt", pool=True)
+pipe("https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/cats.png")
+
+feature_extractor(text,return_tensors = "pt")[0].numpy().mean(axis=0)
+
+'[[[0.21236686408519745, 1.0919708013534546, 0.8512550592422485, ...]]]'
+```

packages/tasks/src/tasks/image-feature-extraction/data.ts

@@ -0,0 +1,51 @@
+import type { TaskDataCustom } from "..";
+
+const taskData: TaskDataCustom = {
+	datasets: [
+		{
+			description:
+				"ImageNet-1K is a image classification dataset in which images are used to train image-feature-extraction models.",
+			id: "imagenet-1k",
+		},
+	],
+	demo: {
+		inputs: [
+			{
+				filename: "mask-generation-input.png",
+				type: "img",
+			},
+		],
+		outputs: [
+			{
+				table: [
+					["Dimension 1", "Dimension 2", "Dimension 3"],
+					["0.21236686408519745", "1.0919708013534546", "0.8512550592422485"],
+					["0.809657871723175", "-0.18544459342956543", "-0.7851548194885254"],
+					["1.3103108406066895", "-0.2479034662246704", "-0.9107287526130676"],
+					["1.8536205291748047", "-0.36419737339019775", "0.09717650711536407"],
+				],
+				type: "tabular",
+			},
+		],
+	},
+	metrics: [],
+	models: [
+		{
+			description: "A powerful image feature extraction model.",
+			id: "timm/vit_large_patch14_dinov2.lvd142m",
+		},
+		{
+			description: "A strong image feature extraction model.",
+			id: "google/vit-base-patch16-224-in21k",
+		},
+		{
+			description: "A robust image feature extraction models.",
+			id: "facebook/dino-vitb16",
+		},
+	],
+	spaces: [],
+	summary: "Image feature extraction is the task of extracting features learnt in a computer vision model.",
+	widgetModels: [],
+};
+
+export default taskData;

packages/tasks/src/tasks/index.ts

@@ -8,6 +8,7 @@ import documentQuestionAnswering from "./document-question-answering/data";
 import featureExtraction from "./feature-extraction/data";
 import fillMask from "./fill-mask/data";
 import imageClassification from "./image-classification/data";
+import imageFeatureExtraction from "./image-feature-extraction/data";
 import imageToImage from "./image-to-image/data";
 import imageToText from "./image-to-text/data";
 import imageSegmentation from "./image-segmentation/data";
@@ -200,6 +201,7 @@ export const TASKS_DATA: Record<PipelineType, TaskData | undefined> = {
 	"fill-mask": getData("fill-mask", fillMask),
 	"graph-ml": undefined,
 	"image-classification": getData("image-classification", imageClassification),
+	"image-feature-extraction": getData("image-feature-extraction", imageFeatureExtraction),
 	"image-segmentation": getData("image-segmentation", imageSegmentation),
 	"image-text-to-text": undefined,
 	"image-to-image": getData("image-to-image", imageToImage),
@@ -239,7 +241,6 @@ export const TASKS_DATA: Record<PipelineType, TaskData | undefined> = {
 	"zero-shot-object-detection": getData("zero-shot-object-detection", zeroShotObjectDetection),
 	"text-to-3d": getData("text-to-3d", placeholder),
 	"image-to-3d": getData("image-to-3d", placeholder),
-	"image-feature-extraction": getData("image-feature-extraction", placeholder),
 } as const;
 
 export interface ExampleRepo {