Create templates/index.html

templates/index.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>استودیو تصویر هوش مصنوعی</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Vazirmatn', Tahoma, sans-serif; background-color: #EDF2F7; padding: 40px 20px; display: flex; justify-content: center; }
+        .container { background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); width: 100%; max-width: 500px; padding: 30px; }
+        h2 { text-align: center; color: #5A67D8; margin-top: 0; }
+        .form-group { margin-bottom: 20px; }
+        label { display: block; margin-bottom: 8px; font-weight: 600; }
+        textarea { width: 100%; padding: 12px; border: 1px solid #E2E8F0; border-radius: 8px; box-sizing: border-box; background: #F7FAFC; }
+        .size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
+        .size-btn { padding: 10px; border: 1px solid #E2E8F0; border-radius: 8px; background: #F7FAFC; cursor: pointer; font-weight: 600; transition: 0.2s; }
+        .size-btn.active { background: #5A67D8; color: white; border-color: #5A67D8; }
+        button.main-btn { width: 100%; padding: 14px; background: #5A67D8; color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer; }
+        button.main-btn:disabled { background: #A3B1E1; cursor: not-allowed; }
+        #status-box { margin-top: 20px; padding: 15px; border-radius: 8px; display: none; text-align: center; background: #EBF4FF; color: #3182CE; font-weight: bold; }
+        #result-container { margin-top: 20px; display: none; text-align: center; }
+        #result-container img { max-width: 100%; border-radius: 8px; border: 2px solid #E2E8F0; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h2>استودیو تصویر هوش مصنوعی</h2>
+    <div class="form-group">
+        <label>دستور ساخت تصویر (Prompt)</label>
+        <textarea id="prompt" rows="4" placeholder="مثال: A futuristic cyberpunk city..."></textarea>
+    </div>
+    <div class="form-group">
+        <label>ابعاد تصویر</label>
+        <div class="size-grid">
+            <button class="size-btn active" data-w="1024" data-h="1024" onclick="selectSize(this)">۱:۱ مربع</button>
+            <button class="size-btn" data-w="1344" data-h="768" onclick="selectSize(this)">۱۶:۹ افقی</button>
+        </div>
+    </div>
+    <button id="btn-submit" class="main-btn" onclick="generateImage()">🚀 ساخت تصویر</button>
+    <div id="status-box"></div>
+    <div id="result-container">
+        <h3 style="color: #2ea44f;">🎉 تصویر شما آماده است!</h3>
+        <img id="generated-image" src="" alt="AI Image">
+    </div>
+</div>
+
+<script>
+    let w = 1024, h = 1024, timer;
+
+    function selectSize(btn) {
+        document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        w = btn.getAttribute('data-w');
+        h = btn.getAttribute('data-h');
+    }
+
+    async function generateImage() {
+        const prompt = document.getElementById('prompt').value.trim();
+        if (!prompt) return alert('پرامپت خالی است!');
+        
+        document.getElementById('btn-submit').disabled = true;
+        document.getElementById('result-container').style.display = 'none';
+        const statusBox = document.getElementById('status-box');
+        statusBox.style.display = 'block';
+        statusBox.innerHTML = 'در حال ارتباط با سرور... ⏳';
+
+        try {
+            // درخواست به بک‌اندِ داکر اسپیسِ خودمان
+            const res = await fetch('/api/generate', {
+                method: 'POST', headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ prompt, width: w, height: h })
+            });
+            const data = await res.json();
+            
+            if (data.status === 'success') {
+                statusBox.innerHTML = 'گیت‌هاب در حال ساخت و آپلود تصویر است... (حدود ۳۰ تا ۶۰ ثانیه) 🎨';
+                // بررسی دوره‌ای تا زمانی که گیت هاب عکس را در سرور آپلود کند
+                timer = setInterval(() => checkStatus(data.run_id), 3000);
+            } else {
+                statusBox.innerHTML = 'خطا در ارسال به گیت‌هاب!';
+                document.getElementById('btn-submit').disabled = false;
+            }
+        } catch (e) {
+            statusBox.innerHTML = 'خطای ارتباط با سرور.';
+            document.getElementById('btn-submit').disabled = false;
+        }
+    }
+
+    async function checkStatus(run_id) {
+        let res = await fetch(`/api/status/${run_id}`);
+        let data = await res.json();
+        
+        if (data.status === 'ready') {
+            clearInterval(timer);
+            document.getElementById('status-box').style.display = 'none';
+            document.getElementById('result-container').style.display = 'block';
+            document.getElementById('generated-image').src = data.url; // نمایش عکسی که در داکر ذخیره شده
+            document.getElementById('btn-submit').disabled = false;
+        }
+    }
+</script>
+</body>
+</html>