♻️ Convert to image to text

README.md

@@ -1,15 +1,14 @@
 ---
-title: Streaming Text Generation
+title: Image to text
 emoji: 📚
 colorFrom: pink
 colorTo: indigo
 sdk: static
 pinned: false
 license: mit
-description: Showcase streaming text generation using huggingface.js
-duplicated_from: huggingfacejs/streaming-text-generation
+description: Showcase image captioning using huggingface.js
 ---
 
 Showcase streaming text generation using the `@huggingface/inference` JS lib.
 
-Default model for inference: https://huggingface.co/google/flan-t5-xxl
+Default model for inference: https://huggingface.co/nlpconnect/vit-gpt2-image-captioning

index.html

@@ -9,7 +9,7 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/inference@1.7.1/+esm"
+					"@huggingface/inference": "https://cdn.jsdelivr.net/npm/@huggingface/inference@1.8.0/+esm"
 				}
 			}
 		</script>
@@ -20,7 +20,7 @@
 				<span
 					class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
 				>
-					Streaming text generation demo with
+					Image to text demo with
 					<a href="https://github.com/huggingface/huggingface.js">
 						<kbd>@huggingface/inference</kbd>
 					</a>
@@ -46,10 +46,9 @@
 			/>
 
 			<p class="mt-8">
-				Pick the model you want to run. Check out over 10k models for text to
-				text generation
+				Pick the model you want to run. Check out over 100 models for image to text
 				<a
-					href="https://huggingface.co/models?pipeline_tag=text2text-generation&sort=likes"
+					href="https://huggingface.co/tasks/image-to-text"
 					class="underline text-blue-500"
 					target="_blank"
 				>
@@ -57,27 +56,22 @@
 				>
 			</p>
 
-			<!-- Default model: https://huggingface.co/google/flan-t5-xxl -->
+			<!-- Default model: https://huggingface.co/nlpconnect/vit-gpt2-image-captioning -->
 			<input
 				type="text"
 				id="model"
 				class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
-				value="google/flan-t5-xxl"
+				value="nlpconnect/vit-gpt2-image-captioning"
 				required
 			/>
 
-			<p class="mt-8">Finally the prompt</p>
+			<p class="mt-8">Finally the input image</p>
 
-			<textarea
+			<input type="file" required accept="image/*"
 				class="rounded border-blue-500 shadow-md px-3 py-2 w-96 mt-6 block"
 				rows="5"
 				id="prompt"
-			>
-Q: How is butter made? 
-
-Describe the process from the beginning
-			</textarea
-			>
+			/>
 
 			<button
 				id="submit"
@@ -91,7 +85,7 @@ Describe the process from the beginning
 				Output will be here
 			</div>
 
-			<p>Check out the <a class="underline text-blue-500" href="https://huggingface.co/spaces/huggingfacejs/streaming-text-generation/blob/main/index.html" target="_blank">source code</a></p>
+			<p>Check out the <a class="underline text-blue-500" href="https://huggingface.co/spaces/huggingfacejs/image-to-text/blob/main/index.html" target="_blank">source code</a></p>
 		</form>
 
 		<script type="module">
@@ -108,18 +102,12 @@ Describe the process from the beginning
 						document.getElementById("token").value.trim() || undefined
 					);
 					const model = document.getElementById("model").value.trim();
-					const prompt = document.getElementById("prompt").value.trim();
+					const prompt = document.getElementById("prompt").files[0];
 					document.getElementById("logs").textContent = "";
 
-					for await (const output of hf.textGenerationStream({
-						model,
-						inputs: prompt,
-						parameters: { max_new_tokens: 250 }
-					}, {
-						use_cache: false
-					})) {
-						document.getElementById("logs").textContent += output.token.text;
-					}
+					const {generated_text} = await hf.imageToText({model, data: prompt});
+
+					document.getElementById("logs").textContent = generated_text;
 				} catch (err) {
 					alert("Error: " + err.message);
 				} finally {