Update index.html

index.html

@@ -2,28 +2,31 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>AI Storyboard - Final Bypass</title>
+    <title>AI Storyboard - Proxy Bypass</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
     <style>
         :root { --bg: #0f172a; --accent: #8b5cf6; }
         body { font-family: sans-serif; background: var(--bg); color: white; padding: 20px; text-align: center; }
-        .box { max-width: 700px; margin: auto; background: #1e293b; padding: 25px; border-radius: 12px; }
+        .box { max-width: 600px; margin: auto; background: #1e293b; padding: 25px; border-radius: 12px; border: 1px solid #334155; }
         textarea, input { width: 100%; padding: 12px; margin: 10px 0; border-radius: 6px; border: 1px solid #334155; background: #0f172a; color: white; box-sizing: border-box; }
         button { width: 100%; padding: 15px; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 16px; }
         #status { margin: 15px 0; padding: 10px; border-radius: 6px; display: none; }
         .loading { background: #1e3a8a; border: 1px solid #3b82f6; }
-        .error { background: #7f1d1d; border: 1px solid #ef4444; }
-        .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 25px; }
-        .card img { width: 100%; border-radius: 8px; border: 1px solid #475569; }
+        .gallery { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 25px; }
+        .card { background: #0f172a; padding: 10px; border-radius: 10px; }
+        .card img { width: 100%; border-radius: 8px; }
     </style>
 </head>
 <body>
 
 <div class="box">
-    <h2>🚀 Storyboard Pro (Safe Mode)</h2>
+    <h2>🚀 Storyboard (Bypass Mode)</h2>
+    <p style="font-size: 12px; color: #94a3b8;">Using Proxy to fix 'Failed to Fetch' error</p>
+    
     <input type="password" id="hfToken" placeholder="Enter WRITE Token (hf_...)">
-    <textarea id="scriptInput" rows="5" placeholder="Paste Scene 1 / 50 format..."></textarea>
-    <button onclick="generate()">Start Generating</button>
+    <textarea id="promptInput" rows="4" placeholder="Scene Description..."></textarea>
+    <button onclick="generate()">Generate Image</button>
+    
     <div id="status"></div>
     <div class="gallery" id="gallery"></div>
 </div>
@@ -31,59 +34,46 @@
 <script>
     async function generate() {
         const token = document.getElementById('hfToken').value.trim();
-        const script = document.getElementById('scriptInput').value.trim();
+        const prompt = document.getElementById('promptInput').value.trim();
         const status = document.getElementById('status');
         const gallery = document.getElementById('gallery');
 
-        if (!token || !script) { alert("Please fill all fields!"); return; }
+        if (!token || !prompt) { alert("Fields are empty!"); return; }
 
-        const scenes = script.split(/Scene \d+ \/ \d+/).filter(s => s.trim().length > 10);
         status.style.display = "block";
         status.className = "loading";
+        status.innerText = "Connecting through Proxy... Please wait.";
         gallery.innerHTML = "";
 
-        for (let i = 0; i < scenes.length; i++) {
-            status.innerText = `Generating Scene ${i+1}...`;
-            const prompt = scenes[i].split("SCENE IMAGE PROMPT:")[1] || scenes[i];
+        try {
+            // ہم یہاں براہ راست کال کے بجائے CORS Proxy استعمال کر رہے ہیں
+            const proxyUrl = "https://corsproxy.io/?";
+            const apiUrl = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell";
 
-            try {
-                // ہم براہ راست کال کے بجائے یہ نیا طریقہ استعمال کر رہے ہیں
-                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"
-                        },
-                        body: JSON.stringify({ 
-                            inputs: prompt + ", cinematic 3d render, high quality, pixar style",
-                            options: { wait_for_model: true, use_cache: false }
-                        })
-                    }
-                );
+            const response = await fetch(proxyUrl + encodeURIComponent(apiUrl), {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${token}`,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({ inputs: prompt })
+            });
 
-                if (!response.ok) {
-                    const errObj = await response.json();
-                    throw new Error(errObj.error || "Model Error");
-                }
+            if (!response.ok) {
+                const err = await response.json();
+                throw new Error(err.error || "API Error");
+            }
 
-                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 blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            
+            status.innerText = "Success!";
+            gallery.innerHTML = `<div class="card"><img src="${url}"></div>`;
 
-            } catch (err) {
-                console.error(err);
-                // اگر Failed to fetch آئے تو ہم ایک متبادل میسج دکھائیں گے
-                status.className = "error";
-                status.innerHTML = `<b>Error:</b> ${err.message}<br><small>If it says 'Failed to fetch', try disabling your Browser's Ad-blocker or VPN.</small>`;
-                return;
-            }
+        } catch (err) {
+            status.style.background = "#7f1d1d";
+            status.innerText = "Error: " + err.message;
         }
-        status.innerText = "All Scenes Done!";
     }
 </script>
 </body>