Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Seedance2API - Functional AI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| body { background-color: #0f172a; color: white; } | |
| .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } | |
| .loading { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } | |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center min-h-screen p-4"> | |
| <div class="glass max-w-2xl w-full rounded-2xl p-8 shadow-2xl"> | |
| <div class="flex items-center mb-8"> | |
| <div class="bg-indigo-500 p-3 rounded-lg mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold tracking-tight">Aligned AI - Seedance2API</h1> | |
| <p class="text-slate-400 text-sm">Live Model Interface with Aligned's safeguards over the scemantic.</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2">Input Prompt</label> | |
| <textarea id="promptInput" class="w-full bg-slate-800 border border-slate-700 rounded-xl p-4 text-white focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-all" rows="4" placeholder="Describe an image you want to generate..."></textarea> | |
| </div> | |
| <button onclick="generateImage()" id="genBtn" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-3 px-6 rounded-xl transition-all transform active:scale-95 flex items-center justify-center"> | |
| <span id="btnText">Generate Image</span> | |
| </button> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-slate-800"> | |
| <h3 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">Output Preview</h3> | |
| <div id="outputContainer" class="aspect-video w-full bg-slate-900 rounded-xl border-2 border-dashed border-slate-800 flex items-center justify-center text-slate-600 overflow-hidden"> | |
| <p id="placeholderText">Results will appear here...</p> | |
| <img id="resultImage" class="hidden w-full h-full object-cover" /> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // PASTE YOUR HUGGING FACE TOKEN HERE | |
| const HF_TOKEN = "aligned"; | |
| async function generateImage() { | |
| const prompt = document.getElementById('promptInput').value; | |
| const btn = document.getElementById('genBtn'); | |
| const btnText = document.getElementById('btnText'); | |
| const outputContainer = document.getElementById('outputContainer'); | |
| const placeholder = document.getElementById('placeholderText'); | |
| const resultImg = document.getElementById('resultImage'); | |
| if (!prompt) return alert("Please enter a prompt!"); | |
| // UI Loading State | |
| btn.disabled = true; | |
| btnText.innerText = "Generating... (may take 20s)"; | |
| outputContainer.classList.add('loading'); | |
| resultImg.classList.add('hidden'); | |
| placeholder.classList.remove('hidden'); | |
| placeholder.innerText = "AI is thinking..."; | |
| try { | |
| const response = await fetch( | |
| "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5", | |
| { | |
| headers: { Authorization: `Bearer ${HF_TOKEN}` }, | |
| method: "POST", | |
| body: JSON.stringify({ inputs: prompt }), | |
| } | |
| ); | |
| const blob = await response.blob(); | |
| const imageUrl = URL.createObjectURL(blob); | |
| resultImg.src = imageUrl; | |
| resultImg.classList.remove('hidden'); | |
| placeholder.classList.add('hidden'); | |
| } catch (error) { | |
| console.error(error); | |
| placeholder.innerText = "Error generating image. Check your token."; | |
| } finally { | |
| btn.disabled = false; | |
| btnText.innerText = "Generate Image"; | |
| outputContainer.classList.remove('loading'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |