Update index.html

index.html

@@ -1,77 +1,129 @@
-<!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>
-
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ultimate Storyboard Engine - Fixed Fetch</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
+    <style>
+        :root { --bg: #0f172a; --panel: #1e293b; --accent: #7c3aed; --text: #f8fafc; }
+        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
+        .container { max-width: 900px; margin: auto; background: var(--panel); padding: 30px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
+        textarea, input { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #475569; background: #0f172a; color: white; box-sizing: border-box; }
+        button { width: 100%; padding: 15px; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 16px; transition: 0.3s; }
+        button:hover { background: #6d28d9; }
+        #status { margin: 20px 0; padding: 15px; border-radius: 8px; display: none; font-size: 14px; line-height: 1.5; }
+        .loading { background: #1e3a8a; color: #bfdbfe; border: 1px solid #3b82f6; }
+        .error { background: #7f1d1d; color: #fecaca; border: 1px solid #ef4444; }
+        .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; }
+        .card { background: #0f172a; padding: 10px; border-radius: 10px; border: 1px solid #334155; }
+        .card img { width: 100%; border-radius: 8px; border: 1px solid #475569; }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h2>🚀 AI Storyboard Engine (FLUX Fixed)</h2>
+    <p style="font-size: 13px; color: #94a3b8;">Paste your Hugging Face Token and Script below.</p>
+    
+    <input type="password" id="hfToken" placeholder="Enter Hugging Face Token (hf_...)">
+    
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+        <textarea id="char1" placeholder="Character 1 Description (e.g. 60yo woman in red dress)"></textarea>
+        <textarea id="char2" placeholder="Character 2 Description (e.g. 10yo boy in blue shirt)"></textarea>
+    </div>
+    
+    <textarea id="promptInput" rows="8" placeholder="Paste your script here... (Scene 1 / 50 etc.)"></textarea>
+    
+    <button onclick="startGeneration()">Generate My Storyboard</button>
+    
+    <div id="status"></div>
+    <div class="gallery" id="gallery"></div>
+</div>
+
+<script>
+    async function startGeneration() {
+        const token = document.getElementById('hfToken').value.trim();
+        const script = document.getElementById('promptInput').value.trim();
+        const char1 = document.getElementById('char1').value.trim();
+        const char2 = document.getElementById('char2').value.trim();
+        const status = document.getElementById('status');
+        const gallery = document.getElementById('gallery');
+
+        if (!token) { alert("Please enter your Token!"); return; }
+        if (!script) { alert("Please paste your script!"); return; }
+
+        // Clear previous
+        gallery.innerHTML = "";
+        status.style.display = "block";
+        status.className = "loading";
+        
+        // Parsing Scenes
+        const scenes = script.split(/Scene \d+ \/ \d+/).filter(s => s.trim().length > 10);
+        
+        if (scenes.length === 0) {
+            updateStatus("Error: No scenes found. Please check your script format.", "error");
+            return;
+        }
+
+        for (let i = 0; i < scenes.length; i++) {
+            let scenePrompt = scenes[i].split("SCENE IMAGE PROMPT:")[1] || scenes[i];
+            // Combine with character descriptions
+            let finalPrompt = `Photo, 8k, highly detailed, ${scenePrompt} , ${char1} , ${char2}`;
+            
+            updateStatus(`Generating Scene ${i+1} of ${scenes.length}...`, "loading");
+
+            try {
+                const blob = await callAI(finalPrompt, token);
+                const url = URL.createObjectURL(blob);
+                
+                const div = document.createElement('div');
+                div.className = "card";
+                div.innerHTML = `<strong>Scene ${i+1}</strong><br><img src="${url}">`;
+                gallery.appendChild(div);
+                
+            } catch (err) {
+                updateStatus(`Error at Scene ${i+1}: ${err.message}. Make sure your token has 'Inference' permissions.`, "error");
+                return;
+            }
+        }
+        updateStatus("🎉 All scenes generated successfully!", "loading");
+    }
+
+    async function callAI(prompt, token) {
+        // We use a slightly different fetch method to avoid CORS
+        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) {
+            // Model is loading, wait 5 seconds and retry
+            await new Promise(r => setTimeout(r, 5000));
+            return callAI(prompt, token);
+        }
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`API returned ${response.status}: ${errorText}`);
+        }
+
+        return await response.blob();
+    }
+
+    function updateStatus(msg, type) {
+        const status = document.getElementById('status');
+        status.innerText = msg;
+        status.className = type;
+    }
+</script>
+
+</body>
+</html>
+