Update index.html

index.html

@@ -1,19 +1,89 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Caption Prototype</title>
+</head>
+
+<body>
+    <h1>Image Caption Prototype</h1>
+
+    <input type="file" id="imageInput" accept="image/*">
+
+    <br><br>
+
+    <img
+        id="preview"
+        style="max-width: 500px; display: none;"
+        alt="Selected image"
+    >
+
+    <br><br>
+
+    <button id="captionButton" disabled>
+        Generate caption
+    </button>
+
+    <p id="status"></p>
+
+    <h2>Caption</h2>
+    <p id="caption"></p>
+
+    <script type="module">
+        import { pipeline }
+            from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";
+
+        const imageInput = document.getElementById("imageInput");
+        const preview = document.getElementById("preview");
+        const captionButton = document.getElementById("captionButton");
+        const status = document.getElementById("status");
+        const caption = document.getElementById("caption");
+
+        let selectedImage = null;
+        let captioner = null;
+
+        imageInput.addEventListener("change", (event) => {
+            selectedImage = event.target.files[0];
+
+            if (!selectedImage) {
+                captionButton.disabled = true;
+                preview.style.display = "none";
+                return;
+            }
+
+            preview.src = URL.createObjectURL(selectedImage);
+            preview.style.display = "block";
+            captionButton.disabled = false;
+            caption.textContent = "";
+        });
+
+        captionButton.addEventListener("click", async () => {
+            try {
+                captionButton.disabled = true;
+                status.textContent = "Loading model...";
+
+                if (!captioner) {
+                    captioner = await pipeline(
+                        "image-to-text",
+                        "Xenova/vit-gpt2-image-captioning"
+                    );
+                }
+
+                status.textContent = "Generating caption...";
+
+                const result = await captioner(selectedImage);
+
+                caption.textContent = result[0].generated_text;
+
+                status.textContent = "Done.";
+            } catch (error) {
+                console.error(error);
+                status.textContent = "Error: " + error.message;
+            } finally {
+                captionButton.disabled = false;
+            }
+        });
+    </script>
+</body>
+</html>