seedance2api

Running

App Files Files Community

elevow commited on Mar 18

Commit

f4f1523

verified ·

1 Parent(s): 8ed6b56

Update index.html

Browse files

Files changed (1) hide show

index.html +96 -114

index.html CHANGED Viewed

@@ -1,117 +1,99 @@
 <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Seedance AI API</title>
-        <style>
-            body {
-                font-family: sans-serif;
-                margin: 0;
-                background-color: #f0f0f0;
-                color: #333;
-            }
-            .container {
-                max-width: 800px;
-                margin: 40px auto;
-                padding: 20px;
-                background-color: #fff;
-                border-radius: 8px;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            }
-            header {
-                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                color: white;
-                padding: 20px 0;
-                text-align: center;
-                border-radius: 8px 8px 0 0;
-            }
-            header h1 {
-                margin: 0;
-                font-size: 2em;
-            }
-            main {
-                padding: 20px;
-            }
-            .input-section {
-                margin-bottom: 20px;
-            }
-            .input-section label {
-                display: block;
-                margin-bottom: 8px;
-                font-weight: bold;
-                color: #555;
-            }
-            textarea {
-                width: calc(100% - 22px);
-                padding: 10px;
-                border: 1px solid #ccc;
-                border-radius: 4px;
-                min-height: 100px;
-                font-family: monospace;
-                resize: vertical;
-            }
-            button {
-                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                color: white;
-                padding: 10px 20px;
-                border: none;
-                border-radius: 4px;
-                cursor: pointer;
-                font-size: 1em;
-                transition: background 0.3s ease;
-            }
-            button:hover {
-                background: linear-gradient(135deg, #5a6fd0 0%, #673f8a 100%);
-            }
-            .output-section {
-                margin-top: 30px;
-            }
-            .output-section h2 {
-                color: #444;
-                border-bottom: 2px solid #eee;
-                padding-bottom: 10px;
-                margin-bottom: 15px;
-            }
-            #model-output {
-                background-color: #f9f9f9;
-                border: 1px solid #eee;
-                border-radius: 4px;
-                padding: 15px;
-                min-height: 150px;
-                white-space: pre-wrap;
-                word-wrap: break-word;
-                font-family: monospace;
-                color: #666;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <header>
-                <h1>Seedance AI API</h1>
-            </header>
-            <main>
-                <section class="input-section">
-                    <label for="model-prompt">Model Prompt:</label>
-                    <textarea id="model-prompt" placeholder="Enter your prompt here..."></textarea>
-                    <br><br>
-                    <button onclick="generateOutput()">Generate</button>
-                </section>
-                <section class="output-section">
-                    <h2>Model Output:</h2>
-                    <div id="model-output">[Output will appear here]</div>
-                </section>
-            </main>
         </div>
-        <script>
-            function generateOutput() {
-                // Placeholder for API call and output display
-                document.getElementById('model-output').innerText = 'Generating output for: ' + document.getElementById('model-prompt').value;
-                // In a real scenario, you would make an API call here
-                // and update the #model-output with the response.
             }
-        </script>
-    </body>
-    </html>

 <!DOCTYPE html>
+<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>