[Task Label & Icon] for Image-to-Video (#317)

This is how it looks

<img width="407" alt="image"
src="https://github.com/huggingface/huggingface.js/assets/11827707/428d78e9-0dc5-4a38-ac01-09936ed8e0e6">

Author: Mishig

packages/hub/src/types/public.d.ts

@@ -69,6 +69,7 @@ export type Task =
 	| "text-to-image"
 	| "image-to-text"
 	| "image-to-image"
+	| "image-to-video"
 	| "unconditional-image-generation"
 	| "video-classification"
 	| "reinforcement-learning"

packages/tasks/src/const.ts

@@ -18,6 +18,7 @@ export const TASKS_MODEL_LIBRARIES: Record<PipelineType, ModelLibraryKey[]> = {
 	"image-segmentation": ["transformers", "transformers.js"],
 	"image-to-image": [],
 	"image-to-text": ["transformers.js"],
+	"image-to-video": ["diffusers"],
 	"video-classification": [],
 	"mask-generation": ["transformers"],
 	"multiple-choice": ["transformers"],

packages/tasks/src/pipelines.ts

@@ -438,6 +438,11 @@ export const PIPELINE_DATA = {
 		modality: "cv",
 		color: "indigo",
 	},
+	"image-to-video": {
+		name: "Image-to-Video",
+		modality: "multimodal",
+		color: "indigo",
+	},
 	"unconditional-image-generation": {
 		name: "Unconditional Image Generation",
 		modality: "cv",

packages/tasks/src/tasksData.ts

@@ -54,6 +54,7 @@ export const TASKS_DATA: Record<PipelineType, TaskData | undefined> = {
 	"image-segmentation": getData("image-segmentation", imageSegmentation),
 	"image-to-image": getData("image-to-image", imageToImage),
 	"image-to-text": getData("image-to-text", imageToText),
+	"image-to-video": undefined,
 	"mask-generation": getData("mask-generation", placeholder),
 	"multiple-choice": undefined,
 	"object-detection": getData("object-detection", objectDetection),

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" class={classNames} width="1em" height="1em" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M1.43 1.2h6.63a.7.7 0 0 1 .7.7v4.44a.79.79 0 0 0-.34-.08h-.36V1.9H1.43v3.55l.9-.9a.7.7 0 0 1 .99 0l1.74 1.74a.79.79 0 0 0-.51.47L2.82 5.04l-1.4 1.4v2.09H4.5v.7H1.43a.7.7 0 0 1-.7-.7V1.9a.7.7 0 0 1 .7-.7ZM6.8 5.94l.32.32H5.5l.32-.32a.7.7 0 0 1 .99 0ZM6.2 4.52a1.05 1.05 0 1 1-1.17-1.75A1.05 1.05 0 0 1 6.2 4.52Zm-.4-1.16a.35.35 0 1 0-.38.58.35.35 0 0 0 .39-.58Zm3.9 5.16 1.57-1.26v3.14L9.7 9.15V10a.79.79 0 0 1-.79.79H5.77a.79.79 0 0 1-.79-.79V7.65a.79.79 0 0 1 .79-.78H8.9a.79.79 0 0 1 .79.78v.87Zm-3.93-.87v2.36H8.9V7.65H5.77Z" clip-rule="evenodd"/></svg>

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

@@ -23,6 +23,7 @@
 	import IconTextGeneration from "../Icons/IconTextGeneration.svelte";
 	import IconTextToImage from "../Icons/IconTextToImage.svelte";
 	import IconImageToText from "../Icons/IconImageToText.svelte";
+	import IconImageToVideo from "../Icons/IconImageToVideo.svelte";
 	import IconTextToSpeech from "../Icons/IconTextToSpeech.svelte";
 	import IconTextToVideo from "../Icons/IconTextToVideo.svelte";
 	import IconTokenClassification from "../Icons/IconTokenClassification.svelte";
@@ -74,6 +75,7 @@
 		"text-to-image": IconTextToImage,
 		"image-to-text": IconImageToText,
 		"image-to-image": IconImageToImage,
+		"image-to-video": IconImageToVideo,
 		"unconditional-image-generation": IconUnconditionalImageGeneration,
 		"reinforcement-learning": IconReinforcementLearning,
 		robotics: IconRobotics,