Update index.html

index.html

@@ -1,19 +1,77 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>AI Storyboard - Final Test</title>
+    <style>
+        body { font-family: sans-serif; background: #111; color: white; padding: 40px; text-align: center; }
+        .box { background: #222; padding: 20px; border-radius: 10px; max-width: 600px; margin: auto; }
+        input, textarea { width: 100%; padding: 10px; margin-top: 10px; border-radius: 5px; border: none; }
+        button { background: #7c3aed; color: white; padding: 15px 30px; border: none; border-radius: 5px; cursor: pointer; margin-top: 20px; width: 100%; font-weight: bold; }
+        #output img { width: 100%; margin-top: 20px; border-radius: 10px; border: 2px solid #555; }
+        #status { margin-top: 15px; color: #fbbf24; }
+    </style>
+</head>
+<body>
+
+<div class="box">
+    <h2>Storyboard Creator</h2>
+    <input type="password" id="token" placeholder="Paste your hf_... token here">
+    <textarea id="prompt" rows="4" placeholder="Describe the scene (e.g. A cat sitting on a throne, pixar style)"></textarea>
+    <button onclick="generateImage()">Generate Image</button>
+    <div id="status"></div>
+    <div id="output"></div>
+</div>
+
+<script>
+    async function generateImage() {
+        const token = document.getElementById('token').value.trim();
+        const prompt = document.getElementById('prompt').value.trim();
+        const status = document.getElementById('status');
+        const output = document.getElementById('output');
+
+        if (!token || !prompt) { alert("Please fill both fields!"); return; }
+
+        status.innerText = "Connecting to AI Model... (Please wait 20-30 seconds)";
+        output.innerHTML = "";
+
+        try {
+            const response = await fetch(
+                "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell",
+                {
+                    headers: { 
+                        "Authorization": `Bearer ${token}`,
+                        "Content-Type": "application/json"
+                    },
+                    method: "POST",
+                    body: JSON.stringify({ inputs: prompt }),
+                }
+            );
+
+            if (response.status === 503) {
+                status.innerText = "Model is loading... Retrying in 5 seconds.";
+                setTimeout(generateImage, 5000);
+                return;
+            }
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || "API Error");
+            }
+
+            const blob = await response.blob();
+            const imgUrl = URL.createObjectURL(blob);
+            output.innerHTML = `<img src="${imgUrl}">`;
+            status.innerText = "Image Generated Successfully!";
+
+        } catch (error) {
+            status.innerText = "Error: " + error.message;
+            console.error(error);
+        }
+    }
+</script>
+
+</body>
 </html>
+
+