Spaces:

Diwashbarla
/

Ai-image

Sleeping

App Files Files Community

Diwashbarla commited on Feb 1

Commit

c2b6f10

verified ·

1 Parent(s): 9247d0e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +78 -75

templates/index.html CHANGED Viewed

@@ -3,121 +3,124 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Vision Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com"></script>
     <style>
-        .loading-ring { border: 4px solid #f3f3f3; border-top: 4px solid #3b82f6; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        .glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }
     </style>
 </head>
-<body class="bg-[#020617] text-slate-200 min-h-screen flex items-center justify-center p-6">
-    <div class="glass max-w-2xl w-full p-8 rounded-[2rem] shadow-2xl">
-        <h1 class="text-3xl font-black text-center mb-8 bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text text-transparent">AI IMAGE STUDIO</h1>
-        <div class="space-y-5">
-            <!-- Prompt Area with Enhance Icon -->
             <div class="relative">
-                <label class="text-xs font-bold text-slate-500 ml-1 uppercase">Positive Prompt</label>
-                <textarea id="prompt" class="w-full bg-slate-900/50 border border-slate-700 rounded-2xl p-4 pr-12 focus:border-blue-500 outline-none transition-all" rows="3"></textarea>
-                <button onclick="enhancePrompt()" class="absolute right-4 bottom-4 text-slate-400 hover:text-cyan-400 transition-colors" title="Enhance Prompt">
-                    <i data-lucide="sparkles"></i>
                 </button>
             </div>
-            <!-- Negative Prompt -->
-            <div>
-                <label class="text-xs font-bold text-slate-500 ml-1 uppercase">Negative Prompt (क्या नहीं चाहिए)</label>
-                <input id="negative" type="text" class="w-full bg-slate-900/50 border border-slate-700 rounded-xl p-3 focus:border-red-500 outline-none" placeholder="blur, distorted, low quality...">
-            </div>
-            <!-- Options -->
             <div class="grid grid-cols-2 gap-4">
-                <select id="ratio" class="bg-slate-900 border border-slate-700 rounded-xl p-3 outline-none">
                     <option value="1024/1024">1:1 Square</option>
-                    <option value="1280/720">16:9 Cinema</option>
-                    <option value="720/1280">9:16 Portrait</option>
                 </select>
-                <select id="model" class="bg-slate-900 border border-slate-700 rounded-xl p-3 outline-none">
-                    <option value="flux">Flux (High Quality)</option>
                     <option value="turbo">Turbo (Fast)</option>
                 </select>
             </div>
-            <button onclick="generate()" id="genBtn" class="w-full bg-blue-600 hover:bg-blue-500 py-4 rounded-2xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-900/20">
-                <i data-lucide="wand-2" id="btnIcon"></i> <span id="btnText">Generate Magic</span>
             </button>
         </div>
-        <!-- Output Animation & Image -->
-        <div class="mt-8 relative group">
-            <div id="loader" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-slate-900/80 rounded-2xl z-10">
-                <div class="loading-ring mb-4"></div>
-                <p class="text-cyan-400 font-medium animate-pulse">Dreaming up your image...</p>
             </div>
-            <img id="output" class="w-full rounded-2xl hidden shadow-2xl border border-slate-700">
-            <!-- Download Button -->
-            <button id="dlBtn" onclick="downloadImg()" class="hidden absolute top-4 right-4 bg-black/50 hover:bg-black p-3 rounded-full backdrop-blur-md transition-all">
-                <i data-lucide="download" class="w-5 h-5"></i>
-            </button>
         </div>
     </div>
     <script>
         lucide.createIcons();
-        function enhancePrompt() {
-            const p = document.getElementById('prompt');
-            p.value += ", highly detailed, 8k, masterpiece, cinematic lighting";
         }
         async function generate() {
-            const btn = document.getElementById('genBtn');
-            const loader = document.getElementById('loader');
-            const output = document.getElementById('output');
-            const dlBtn = document.getElementById('dlBtn');
             const prompt = document.getElementById('prompt').value;
-            const negative = document.getElementById('negative').value;
-            const [w, h] = document.getElementById('ratio').value.split('/');
-            const model = document.getElementById('model').value;
-            if(!prompt) return;
-            // Start UI
-            loader.classList.remove('hidden');
-            output.classList.add('hidden');
-            dlBtn.classList.add('hidden');
             btn.disabled = true;
-            const res = await fetch('/generate', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({ prompt, negative, width: w, height: h, model })
-            });
-            const data = await res.json();
-            output.src = data.url;
-            output.onload = () => {
-                loader.classList.add('hidden');
-                output.classList.remove('hidden');
-                dlBtn.classList.remove('hidden');
                 btn.disabled = false;
-            };
         }
-        function downloadImg() {
-            const url = document.getElementById('output').src;
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'ai-image.png';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
         }
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Studio Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Lucide Icons के लिए सही CDN -->
     <script src="https://unpkg.com"></script>
     <style>
+        @keyframes progress { 0% { width: 0%; } 100% { width: 100%; } }
+        .loading-bar { height: 4px; background: #3b82f6; animation: progress 15s linear infinite; }
     </style>
 </head>
+<body class="bg-slate-950 text-white min-h-screen flex items-center justify-center p-4">
+    <div class="max-w-xl w-full bg-slate-900 border border-slate-800 p-8 rounded-[2.5rem] shadow-2xl relative overflow-hidden">
+        <!-- Loading Animation Bar -->
+        <div id="pBar" class="absolute top-0 left-0 hidden w-full"><div class="loading-bar"></div></div>
+        <h2 class="text-2xl font-black mb-6 text-blue-400 flex items-center gap-2">
+            <i data-lucide="sparkles"></i> AI Image Lab
+        </h2>
+        <div class="space-y-4">
             <div class="relative">
+                <textarea id="prompt" class="w-full bg-slate-800 border border-slate-700 rounded-2xl p-4 pr-12 focus:ring-2 focus:ring-blue-500 outline-none" placeholder="आपका प्रॉम्प्ट यहाँ लिखें..."></textarea>
+                <!-- Enhance Icon -->
+                <button onclick="enhance()" class="absolute right-4 bottom-4 text-blue-500 hover:scale-110 transition-transform">
+                    <i data-lucide="wand-2"></i>
                 </button>
             </div>
+            <input id="negative" type="text" class="w-full bg-slate-800 border border-slate-700 rounded-xl p-3 text-sm" placeholder="Negative Prompt (e.g. blur, text)">
             <div class="grid grid-cols-2 gap-4">
+                <select id="ratio" class="bg-slate-800 p-3 rounded-xl border border-slate-700">
                     <option value="1024/1024">1:1 Square</option>
+                    <option value="1280/720">16:9 Wide</option>
                 </select>
+                <select id="model" class="bg-slate-800 p-3 rounded-xl border border-slate-700">
+                    <option value="flux">Flux (HD)</option>
                     <option value="turbo">Turbo (Fast)</option>
                 </select>
             </div>
+            <button onclick="generate()" id="btn" class="w-full bg-blue-600 hover:bg-blue-500 py-4 rounded-2xl font-bold flex items-center justify-center gap-2 transition-all">
+                <i data-lucide="zap"></i> Generate Image
             </button>
         </div>
+        <!-- Result Area -->
+        <div class="mt-6">
+            <div id="status" class="text-center text-sm text-slate-500 mb-2 hidden">इमेज तैयार हो रही है, कृपया 10-15 सेकंड रुकें...</div>
+            <div id="box" class="rounded-2xl overflow-hidden border border-slate-800 min-h-[200px] flex items-center justify-center bg-slate-950 relative">
+                <img id="output" class="hidden w-full">
+                <button id="dl" onclick="download()" class="hidden absolute bottom-4 right-4 bg-white/10 p-2 rounded-full backdrop-blur-md">
+                    <i data-lucide="download"></i>
+                </button>
             </div>
         </div>
     </div>
     <script>
+        // आइकन्स लोड करें
         lucide.createIcons();
+        function enhance() {
+            document.getElementById('prompt').value += ", highly detailed, cinematic lighting, 8k resolution, photorealistic";
         }
         async function generate() {
             const prompt = document.getElementById('prompt').value;
+            if(!prompt) return alert("प्रॉम्प्ट खाली है!");
+            const btn = document.getElementById('btn');
+            const pBar = document.getElementById('pBar');
+            const status = document.getElementById('status');
+            const output = document.getElementById('output');
+            const dl = document.getElementById('dl');
+            // UI Reset
             btn.disabled = true;
+            btn.innerText = "Processing...";
+            pBar.classList.remove('hidden');
+            status.classList.remove('hidden');
+            output.classList.add('hidden');
+            dl.classList.add('hidden');
+            try {
+                const [w, h] = document.getElementById('ratio').value.split('/');
+                const model = document.getElementById('model').value;
+                const neg = document.getElementById('negative').value;
+                const res = await fetch('/generate', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({ prompt: encodeURIComponent(prompt), width: w, height: h, model, negative: neg })
+                });
+                const data = await res.json();
+                // इमेज लोड होने का इंतज़ार
+                output.src = data.url;
+                output.onload = () => {
+                    output.classList.remove('hidden');
+                    dl.classList.remove('hidden');
+                    pBar.classList.add('hidden');
+                    status.classList.add('hidden');
+                    btn.disabled = false;
+                    btn.innerText = "Generate Image";
+                };
+            } catch (e) {
+                alert("सर्वर में समस्या है!");
                 btn.disabled = false;
+            }
         }
+        function download() {
+            const link = document.createElement('a');
+            link.href = document.getElementById('output').src;
+            link.download = 'ai_image.png';
+            link.click();
         }
     </script>
 </body>