Update index.html

index.html

@@ -2,125 +2,106 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Ultimate Storyboard Engine - Fixed Fetch</title>
+    <title>AI Storyboard Pro - Auto Fix</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; }
+        :root { --bg: #0b0f19; --card: #161e2e; --accent: #8b5cf6; --text: #f3f4f6; }
+        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 20px; }
+        .wrapper { max-width: 850px; margin: auto; background: var(--card); padding: 30px; border-radius: 12px; border: 1px solid #2d3748; }
+        textarea, input { width: 100%; padding: 12px; margin: 10px 0; border-radius: 6px; border: 1px solid #374151; background: #1f2937; color: white; box-sizing: border-box; }
+        button { width: 100%; padding: 15px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; }
+        #status { margin: 15px 0; padding: 12px; border-radius: 6px; display: none; text-align: center; }
+        .loading { background: #1e3a8a; border: 1px solid #3b82f6; }
+        .error { background: #7f1d1d; border: 1px solid #ef4444; }
+        .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 25px; }
+        .card { background: #111827; padding: 10px; border-radius: 8px; border: 1px solid #374151; text-align: center; }
+        .card img { width: 100%; border-radius: 5px; margin-top: 8px; }
     </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>
+<div class="wrapper">
+    <h2>🎨 Pro AI Storyboard Engine</h2>
+    <input type="password" id="hfToken" placeholder="Paste your Hugging Face Token (hf_...) here">
     
-    <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 style="display: flex; gap: 10px;">
+        <textarea id="char1" placeholder="Char 1 details (e.g. Grandma, red cloth)"></textarea>
+        <textarea id="char2" placeholder="Char 2 details (e.g. Young boy, 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>
+    <textarea id="scriptInput" rows="6" placeholder="Paste Scenes here (Scene 1 / 50 format)"></textarea>
     
+    <button onclick="runProcess()">Generate Storyboard 🚀</button>
     <div id="status"></div>
     <div class="gallery" id="gallery"></div>
 </div>
 
 <script>
-    async function startGeneration() {
+    async function runProcess() {
         const token = document.getElementById('hfToken').value.trim();
-        const script = document.getElementById('promptInput').value.trim();
+        const script = document.getElementById('scriptInput').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; }
+        if (!token) { alert("Please paste your Token!"); return; }
+        
+        const scenes = script.split(/Scene \d+ \/ \d+/).filter(s => s.trim().length > 10);
+        if (scenes.length === 0) { alert("Format not correct! Use 'Scene 1 / 50' format."); 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;
-        }
+        gallery.innerHTML = "";
 
         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}`;
+            status.innerText = `Generating Scene ${i+1} of ${scenes.length}...`;
             
-            updateStatus(`Generating Scene ${i+1} of ${scenes.length}...`, "loading");
+            let scenePrompt = scenes[i].split("SCENE IMAGE PROMPT:")[1] || scenes[i];
+            let fullPrompt = `${scenePrompt}, 8k resolution, cinematic lighting, ${char1}, ${char2}`.trim();
 
             try {
-                const blob = await callAI(finalPrompt, token);
+                // ہگنگ فیس کی اس ماڈل URL کو براہ راست کال کریں
+                const response = await fetch(
+                    "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell",
+                    {
+                        method: "POST",
+                        headers: {
+                            "Authorization": `Bearer ${token}`,
+                            "Content-Type": "application/json",
+                            "x-use-cache": "false" // تاکہ نیا امیج بنے
+                        },
+                        body: JSON.stringify({ inputs: fullPrompt })
+                    }
+                );
+
+                if (response.status === 503) {
+                    status.innerText = "AI Model is starting up... Waiting 10 seconds.";
+                    await new Promise(r => setTimeout(r, 10000));
+                    i--; // اس سین کو دوبارہ ٹرائی کریں
+                    continue;
+                }
+
+                if (!response.ok) {
+                    throw new Error(`API Error: ${response.status}`);
+                }
+
+                const blob = await response.blob();
                 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);
-                
+                const card = document.createElement('div');
+                card.className = "card";
+                card.innerHTML = `<strong>Scene ${i+1}</strong><br><img src="${url}">`;
+                gallery.appendChild(card);
+
             } catch (err) {
-                updateStatus(`Error at Scene ${i+1}: ${err.message}. Make sure your token has 'Inference' permissions.`, "error");
+                status.className = "error";
+                status.innerText = "Failed to Fetch! Try a 'Write' Token instead of 'Read'.";
+                console.error(err);
                 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;
+        status.innerText = "✅ Storyboard Completed!";
     }
 </script>