Hugging Face's logo

Spaces:
elevow
/
seedance2api
Running

App Files Community
seedance2api
File size: 4,787 Bytes
8ed6b56
f4f1523
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8ed6b56
f4f1523
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8ed6b56
f4f1523
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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>