Add Image feature extraction on Hub as a task (#402)

Co-authored-by: Mishig <[email protected]>

Author: merveenoyan

packages/tasks/src/pipelines.ts

@@ -651,6 +651,11 @@ export const PIPELINE_DATA = {
 		modality: "cv",
 		color: "green",
 	},
+	"image-feature-extraction": {
+		name: "Image Feature Extraction",
+		modality: "cv",
+		color: "indigo",
+	},
 	other: {
 		name: "Other",
 		modality: "other",

packages/tasks/src/tasks/index.ts

@@ -52,6 +52,7 @@ export const TASKS_MODEL_LIBRARIES: Record<PipelineType, ModelLibraryKey[]> = {
 	"fill-mask": ["transformers", "transformers.js"],
 	"graph-ml": ["transformers"],
 	"image-classification": ["keras", "timm", "transformers", "transformers.js"],
+	"image-feature-extraction": ["timm", "transformers"],
 	"image-segmentation": ["transformers", "transformers.js"],
 	"image-text-to-text": ["transformers"],
 	"image-to-image": ["diffusers", "transformers", "transformers.js"],
@@ -169,6 +170,7 @@ 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 {

packages/widgets/src/lib/components/Icons/IconImageFeatureExtraction.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	fill="currentColor"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 24 24"
+>
+	<path
+		fill="currentColor"
+		d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h5v2H5v14h14v-5.35l2 2V19q0 .825-.587 1.413T19 21H5Zm1-4l3-4l2.25 3l3-4L18 17H6Zm15.55-3.6l-3.1-3.1q-.525.35-1.125.525T16.05 11q-1.85 0-3.15-1.312T11.6 6.5q0-1.875 1.313-3.187T16.1 2q1.875 0 3.188 1.313T20.6 6.5q0 .675-.2 1.3t-.5 1.15L22.95 12l-1.4 1.4ZM16.1 9q1.05 0 1.775-.725T18.6 6.5q0-1.05-.725-1.775T16.1 4q-1.05 0-1.775.725T13.6 6.5q0 1.05.725 1.775T16.1 9Z"
+	/>
+</svg>

packages/widgets/src/lib/components/PipelineIcon/PipelineIcon.svelte

@@ -41,6 +41,7 @@
 	import IconMaskGeneration from "../Icons/IconMaskGeneration.svelte";
 	import IconTextTo3D from "../Icons/IconTextTo3D.svelte";
 	import IconImageTo3D from "../Icons/IconImageTo3D.svelte";
+	import IconImageFeatureExtraction from "../Icons/IconImageFeatureExtraction.svelte";
 	import type { PipelineType } from "@huggingface/tasks";
 
 	export let classNames = "";
@@ -92,6 +93,7 @@
 		"zero-shot-object-detection": IconZeroShotObjectDetection,
 		"text-to-3d": IconTextTo3D,
 		"image-to-3d": IconImageTo3D,
+		"image-feature-extraction": IconImageFeatureExtraction,
 	};
 
 	$: iconComponent =