Update templates/index.html

templates/index.html

@@ -2,108 +2,191 @@
 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>استودیو تصویر هوش مصنوعی</title>
+    <title>مولد تصویر آلفا - Flux Pro</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; margin: 0;}
-        .container { background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 15px rgba(0,0,0,0.1); width: 100%; max-width: 550px; padding: 30px; }
-        h2 { text-align: center; color: #5A67D8; margin-top: 0; }
+        /* دقیقاً همان CSS ارسالی شما */
+        :root {
+            --igadlm-alpha-color-primary: #5A67D8; --igadlm-alpha-color-primary-darker: #4C51BF;
+            --igadlm-alpha-color-secondary: #805AD5; --igadlm-alpha-color-secondary-darker: #6B46C1;
+            --igadlm-alpha-color-text: #1A202C; --igadlm-alpha-color-text-light: #4A5568;
+            --igadlm-alpha-color-text-muted: #718096; --igadlm-alpha-color-bg-card: #FFFFFF;
+            --igadlm-alpha-color-border: #CBD5E0; --igadlm-alpha-color-input-bg: #EDF2F7;
+            --igadlm-alpha-color-white: #FFFFFF; --igadlm-alpha-color-success: #38A169;
+            --igadlm-alpha-color-error: #E53E3E;
+            --igadlm-alpha-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.07);
+            --igadlm-alpha-shadow-md: 0 4px 8px -2px rgba(0,0,0,0.1);
+            --igadlm-alpha-shadow-lg: 0 10px 20px -5px rgba(0,0,0,0.1);
+            --igadlm-alpha-border-radius-md: 8px; --igadlm-alpha-border-radius-lg: 12px;
+            --igadlm-alpha-transition-speed: 0.25s;
+        }
+        body.standalone-igadlm-alpha-app { background-color: #f0f2f5; margin:0; padding:20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;}
+        #imageGeneratorAppAlphaV2 { font-family: 'Vazirmatn', sans-serif; color: var(--igadlm-alpha-color-text); line-height: 1.6; direction: rtl; width: 100%; }
+        .app-content-wrapper { display: flex; justify-content: center; width: 100%; }
+        .app-content { width: 100%; max-width: 550px; padding: 0 15px; }
+        .app-header { text-align: center; margin-bottom: 30px; }
+        .app-header h1 { font-size: clamp(1.8em, 5.5vw, 2.3em); font-weight: 700; color: var(--igadlm-alpha-color-primary); margin-bottom: 8px; }
+        .app-header p { font-size: 0.95em; color: var(--igadlm-alpha-color-text-light); }
+        .form-section-card { background-color: var(--igadlm-alpha-color-bg-card); padding: 30px; border-radius: var(--igadlm-alpha-border-radius-lg); box-shadow: var(--igadlm-alpha-shadow-lg); border: 1px solid var(--igadlm-alpha-color-border); }
         .form-group { margin-bottom: 20px; }
-        label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem;}
-        textarea { width: 100%; padding: 12px; border: 1px solid #E2E8F0; border-radius: 8px; box-sizing: border-box; background: #F7FAFC; font-family: inherit;}
-        textarea:focus { outline: none; border-color: #5A67D8; box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.2); background: #fff;}
-        .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; font-family: inherit;}
-        .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; transition: 0.2s;}
-        button.main-btn:hover { background: #4C51BF; }
-        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 { width: 100%; border-radius: 8px; border: 2px solid #E2E8F0; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+        .form-group label { display: block; font-size: 0.85rem; color: var(--igadlm-alpha-color-text-light); margin-bottom: 6px; font-weight: 600; }
+        #imagePromptAlpha { width: 100%; padding: 10px 14px; border: 1px solid var(--igadlm-alpha-color-border); border-radius: var(--igadlm-alpha-border-radius-md); font-size: 0.9rem; background-color: var(--igadlm-alpha-color-input-bg); min-height: 60px; resize: vertical; }
+        #imagePromptAlpha:focus { outline: none; border-color: var(--igadlm-alpha-color-primary); background-color: var(--igadlm-alpha-color-white); }
+        .dimension-buttons-simple { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
+        .dimension-button-simple { padding: 10px 8px; font-size: 0.9rem; font-weight: 500; border: 1px solid var(--igadlm-alpha-color-border); border-radius: var(--igadlm-alpha-border-radius-md); background-color: var(--igadlm-alpha-color-input-bg); cursor: pointer; text-align: center; }
+        .dimension-button-simple.selected { background: linear-gradient(60deg, var(--igadlm-alpha-color-primary) 0%, var(--igadlm-alpha-color-secondary) 100%); color: var(--igadlm-alpha-color-white); border-color: transparent; }
+        #generateBtnAlpha { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; border-radius: var(--igadlm-alpha-border-radius-md); font-size: 0.95rem; font-weight: 600; cursor: pointer; background: linear-gradient(60deg, var(--igadlm-alpha-color-primary) 0%, var(--igadlm-alpha-color-secondary) 100%); color: white; border: none; margin-top: 12px; }
+        #generateBtnAlpha:disabled { background: #cbd5e0; cursor: not-allowed; }
+        #aiLoaderAlpha { display: none; flex-direction: column; align-items: center; margin: 20px auto 10px auto; }
+        .ai-loader-bar-container-inline { display: flex; justify-content: center; align-items: flex-end; height: 25px; }
+        .ai-loader-bar-inline { width: 5px; height: 5px; background-color: var(--igadlm-alpha-color-primary); border-radius: 2.5px; margin: 0 2.5px; animation: igadlmAlphaV2LoaderAnim 1.2s infinite ease-in-out; }
+        .ai-loader-bar-inline:nth-child(2) { animation-delay: 0.2s; background-color: var(--igadlm-alpha-color-secondary); }
+        .ai-loader-bar-inline:nth-child(3) { animation-delay: 0.4s; }
+        #statusAlphaText { text-align: center; font-size: 0.85em; color: var(--igadlm-alpha-color-text-muted); font-weight: 500; margin-top: 10px; min-height: 1.4em; }
+        #imageResultContainerAlpha { margin-top: 15px; text-align: center; display: none; }
+        #generatedImageAlpha { max-width: 100%; height: auto; border-radius: var(--igadlm-alpha-border-radius-md); border: 1px solid var(--igadlm-alpha-color-border); }
+        #downloadImageBtnAlpha { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 11px 16px; border-radius: var(--igadlm-alpha-border-radius-md); margin-top: 10px; background-color: var(--igadlm-alpha-color-white); color: var(--igadlm-alpha-color-primary); border: 1px solid var(--igadlm-alpha-color-border); cursor: pointer; text-decoration: none; font-weight: bold;}
+        @keyframes igadlmAlphaV2LoaderAnim { 0%, 100% { transform: scaleY(0.5); opacity: 0.5; } 50% { transform: scaleY(1.5); opacity: 1; height: 15px; } }
     </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, glowing neon lights..."></textarea>
-    </div>
+<body class="standalone-igadlm-alpha-app">
 
-    <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>
-            <button class="size-btn" data-w="768" data-h="1344" onclick="selectSize(this)">۹:۱۶ (عمودی)</button>
-            <button class="size-btn" data-w="1152" data-h="864" onclick="selectSize(this)">۴:۳ (کلاسیک)</button>
+<div id="imageGeneratorAppAlphaV2">
+    <div class="app-content-wrapper">
+        <div class="app-content">
+            <div class="app-header">
+                <h1>🖼️ مولد تصویر آلفا</h1>
+                <p><span style="color: #339966; font-weight: bold;">Flux Pro</span></p>
+                <p>ایده خود را به یک تصویر خلاقانه تبدیل کنید</p>
+            </div>
+            
+            <div class="form-section-card" id="alphaFormSectionCard">
+                <div class="form-group">
+                    <label for="imagePromptAlpha">ایده خود را بنویسید (به فارسی):</label>
+                    <textarea id="imagePromptAlpha" rows="3" placeholder="مثال: یک قلعه باستانی بر فراز ابرها"></textarea>
+                </div>
+                
+                <div class="form-group">
+                    <label>اندازه تصویر (نسبت):</label>
+                    <div class="dimension-buttons-simple" id="alphaDimensionButtons"></div>
+                </div>
+                
+                <button id="generateBtnAlpha">🎨 ساخت تصویر</button>
+                
+                <div class="ai-loader-inline" id="aiLoaderAlpha">
+                    <div class="ai-loader-bar-container-inline">
+                        <div class="ai-loader-bar-inline"></div>
+                        <div class="ai-loader-bar-inline"></div>
+                        <div class="ai-loader-bar-inline"></div>
+                    </div>
+                </div>
+                
+                <div id="statusAlphaText">وضعیت: آماده برای تولید تصویر.</div>
+                
+                <div id="imageResultContainerAlpha">
+                    <img id="generatedImageAlpha" alt="تصویر ایجاد شده" />
+                    <a id="downloadImageBtnAlpha" href="#" download="flux_image.webp">📥 دانلود تصویر</a>
+                </div>
+            </div>
         </div>
     </div>
-    
-    <button id="btn-submit" class="main-btn" onclick="generateImage()">🚀 ساخت تصویر</button>
-    
-    <div id="status-box"></div>
-    
-    <div id="result-container">
-        <h3 style="color: #38A169; margin-bottom: 15px;">🎉 تصویر شما آماده است!</h3>
-        <img id="generated-image" src="" alt="AI Generated Image">
-    </div>
 </div>
 
 <script>
-    let w = 1024, h = 1024, timer;
+    const dimensionsMap = { 
+        "1:1": { w: 1024, h: 1024, text: "۱:۱ (مربع)" }, 
+        "16:9": { w: 1344, h: 768, text: "۱۶:۹ (افقی)" }, 
+        "9:16": { w: 768, h: 1344, text: "۹:۱۶ (عمودی)" }, 
+        "4:3":  { w: 1152, h: 864, text: "۴:۳ (کلاسیک)" } 
+    };
+    
+    let selectedW = 1024, selectedH = 1024;
+    const btnContainer = document.getElementById('alphaDimensionButtons');
+    const statusText = document.getElementById('statusAlphaText');
+    const loader = document.getElementById('aiLoaderAlpha');
+    const genBtn = document.getElementById('generateBtnAlpha');
+    const resultContainer = document.getElementById('imageResultContainerAlpha');
+    const imgEl = document.getElementById('generatedImageAlpha');
+    const downloadBtn = document.getElementById('downloadImageBtnAlpha');
+    let pollTimer;
 
-    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');
+    // ساخت دکمه‌های ابعاد
+    Object.keys(dimensionsMap).forEach((key, index) => {
+        const btn = document.createElement('button');
+        btn.className = 'dimension-button-simple' + (index === 0 ? ' selected' : '');
+        btn.textContent = dimensionsMap[key].text;
+        btn.onclick = () => {
+            document.querySelectorAll('.dimension-button-simple').forEach(b => b.classList.remove('selected'));
+            btn.classList.add('selected');
+            selectedW = dimensionsMap[key].w;
+            selectedH = dimensionsMap[key].h;
+        };
+        btnContainer.appendChild(btn);
+    });
+
+    function updateStatus(text, type='info') {
+        statusText.textContent = text;
+        statusText.style.color = type === 'error' ? 'var(--igadlm-alpha-color-error)' : 
+                                type === 'success' ? 'var(--igadlm-alpha-color-success)' : 'var(--igadlm-alpha-color-text-muted)';
     }
 
-    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 = 'در حال ارتباط با سرور پردازش... ⏳';
+    genBtn.onclick = async () => {
+        const prompt = document.getElementById('imagePromptAlpha').value.trim();
+        if(!prompt) return updateStatus('لطفا ایده خود را بنویسید!', 'error');
+
+        genBtn.disabled = true;
+        resultContainer.style.display = 'none';
+        loader.style.display = 'flex';
+        updateStatus('در حال ترجمه متن به انگلیسی... (مرحله ۱ از ۳)');
 
         try {
+            // ارسال به پایتون خودمان (پایتون هم ترجمه میکنه و هم میفرسته گیت هاب)
             const res = await fetch('/api/generate', {
-                method: 'POST', headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({ prompt, width: w, height: h })
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ 
+                    prompt: prompt, 
+                    width: selectedW, 
+                    height: selectedH,
+                    action_name: "generate-flux" // نام اکشن برای گیت هاب
+                })
             });
+            
             const data = await res.json();
             
             if (data.status === 'success') {
-                statusBox.innerHTML = 'در حال ساخت تصویر... لطفاً صبر کنید (حدود ۴۵ ثانیه) 🎨';
-                timer = setInterval(() => checkStatus(data.run_id), 3000);
+                updateStatus(`متن ترجمه شد: "${data.translated_prompt.substring(0, 25)}..."\nدر حال ساخت تصویر در سرور پردازشی... (مرحله ۲ از ۳)`);
+                // شروع به چک کردن نتیجه
+                pollTimer = setInterval(() => checkResult(data.run_id), 3000);
             } else {
-                statusBox.innerHTML = 'خطا در برقراری ارتباط با سرور اصلی!';
-                document.getElementById('btn-submit').disabled = false;
+                updateStatus('خطا در ارتباط با سرور پردازشی.', 'error');
+                genBtn.disabled = false;
+                loader.style.display = 'none';
             }
         } catch (e) {
-            statusBox.innerHTML = 'خطای اینترنت یا سرور.';
-            document.getElementById('btn-submit').disabled = false;
+            updateStatus('خطای ارتباط با سرور.', 'error');
+            genBtn.disabled = false;
+            loader.style.display = 'none';
         }
-    }
+    };
 
-    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;
+    async function checkResult(run_id) {
+        try {
+            const res = await fetch(`/api/status/${run_id}`);
+            const data = await res.json();
+            
+            if (data.status === 'ready') {
+                clearInterval(pollTimer);
+                loader.style.display = 'none';
+                updateStatus('تصویر با موفقیت ساخته شد! 🎉 (مرحله ۳ از ۳)', 'success');
+                
+                imgEl.src = data.url;
+                downloadBtn.href = data.url;
+                resultContainer.style.display = 'block';
+                genBtn.disabled = false;
+            }
+        } catch(e) {
+            console.log('Polling...', e);
         }
     }
 </script>