Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Ultimate Storyboard Fix</title> | |
| <style> | |
| body { font-family: sans-serif; background: #0b0f19; color: white; text-align: center; padding: 20px; } | |
| .card { background: #161e2e; padding: 25px; border-radius: 12px; max-width: 600px; margin: auto; border: 1px solid #2d3748; } | |
| input, textarea { width: 100%; padding: 12px; margin: 10px 0; border-radius: 6px; border: 1px solid #374151; background: #0f172a; color: white; box-sizing: border-box; } | |
| button { width: 100%; padding: 15px; background: #7c3aed; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; } | |
| .proxy-link { color: #fbbf24; font-size: 13px; margin: 10px 0; display: block; text-decoration: none; border: 1px dashed #fbbf24; padding: 10px; } | |
| #output img { width: 100%; border-radius: 8px; margin-top: 20px; border: 2px solid #3b82f6; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h2>🎨 Storyboard Engine (Universal Fix)</h2> | |
| <a class="proxy-link" href="https://cors-anywhere.herokuapp.com/corsdemo" target="_blank"> | |
| 1. Click here and press "Request temporary access" (Only once) | |
| </a> | |
| <input type="password" id="hfToken" placeholder="Paste Hugging Face WRITE Token (hf_...)"> | |
| <textarea id="promptInput" rows="3" placeholder="A simple cat in a hat..."></textarea> | |
| <button onclick="generate()">Generate Image 🚀</button> | |
| <div id="status" style="margin-top:10px; color:#94a3b8;"></div> | |
| <div id="output"></div> | |
| </div> | |
| <script> | |
| async function generate() { | |
| const token = document.getElementById('hfToken').value.trim(); | |
| const prompt = document.getElementById('promptInput').value.trim(); | |
| const status = document.getElementById('status'); | |
| const output = document.getElementById('output'); | |
| if (!token || !prompt) { alert("Please fill fields!"); return; } | |
| status.innerText = "Generating... (Bypassing Security)"; | |
| output.innerHTML = ""; | |
| try { | |
| // ہم ایک پراکسی استعمال کر رہے ہیں تاکہ 'Failed to Fetch' نہ آئے | |
| const proxy = "https://cors-anywhere.herokuapp.com/"; | |
| const apiUrl = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell"; | |
| const response = await fetch(proxy + apiUrl, { | |
| method: "POST", | |
| headers: { | |
| "Authorization": `Bearer ${token}`, | |
| "Content-Type": "application/json", | |
| "X-Requested-With": "XMLHttpRequest" | |
| }, | |
| body: JSON.stringify({ inputs: prompt }) | |
| }); | |
| if (!response.ok) { | |
| const err = await response.text(); | |
| if (err.includes("Missing required header")) { | |
| throw new Error("Please click the yellow link above and enable access first!"); | |
| } | |
| throw new Error(err); | |
| } | |
| const blob = await response.blob(); | |
| const url = URL.createObjectURL(blob); | |
| output.innerHTML = `<img src="${url}">`; | |
| status.innerText = "Success!"; | |
| } catch (err) { | |
| status.innerText = "Error: " + err.message; | |
| status.style.color = "#ef4444"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |