Spaces:

Opera8
/

runflare

Sleeping

App Files Files Community

Sada8888 commited on May 15

Commit

1fd9cfa

verified ·

1 Parent(s): 851081c

Update index.html

Browse files

Files changed (1) hide show

index.html +128 -60

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>پنل ساخت تصویر با GitHub Actions</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
         :root {
@@ -52,37 +52,33 @@
             outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.3); background-color: #ffffff;
         }
-        .size-grid {
-            display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
-        }
         .size-btn {
             padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
             background-color: #F7FAFC; color: var(--text-muted); cursor: pointer;
-            font-family: inherit; font-size: 0.9rem; font-weight: 600; transition: all 0.2s;
-        }
-        .size-btn.active {
-            background-color: var(--primary); color: white; border-color: var(--primary);
         }
         button.main-btn {
             width: 100%; padding: 14px; background-color: var(--primary); color: #ffffff; border: none;
             border-radius: var(--radius); font-size: 1.1rem; font-weight: bold; cursor: pointer; margin-top: 10px;
-            transition: background-color 0.2s;
         }
         button.main-btn:hover { background-color: var(--primary-hover); }
         button.main-btn:disabled { background-color: #A3B1E1; cursor: not-allowed; }
         hr { border: 0; border-top: 1px solid var(--border); margin: 25px 0; }
-        .notice { font-size: 0.85rem; color: var(--text-muted); margin-top: 5px; display: block; }
-        #status-box { margin-top: 25px; padding: 15px; border-radius: var(--radius); display: none; line-height: 1.6; text-align: center; }
         .status-loading { background-color: #EBF4FF; border: 1px solid #90CDF4; color: #3182CE; }
-        .status-success { background-color: #F0FFF4; border: 1px solid #9AE6B4; color: #276749; }
         .status-error { background-color: #FFF5F5; border: 1px solid #FEB2B2; color: #C53030; }
-        .action-link {
-            display: inline-block; margin-top: 15px; padding: 10px 20px; background-color: var(--primary);
-            border-radius: var(--radius); color: white; text-decoration: none; font-weight: 600;
         }
     </style>
 </head>
@@ -92,26 +88,23 @@
     <h2>🎨 استودیو تصویر Flux</h2>
     <div class="form-group">
-        <label>نام کاربری GitHub</label>
-        <input type="text" id="gh-username" value="Hamed744" readonly style="color: #718096; background: #EDF2F7;">
-    </div>
-    <div class="form-group">
-        <label>نام مخزن (Repository)</label>
-        <input type="text" id="gh-repo" value="vid-test" readonly style="color: #718096; background: #EDF2F7;">
     </div>
     <div class="form-group">
         <label>توکن امنیتی (PAT)</label>
         <input type="password" id="gh-token" placeholder="ghp_....................................">
-        <span class="notice">توکن شما فقط در مرورگر خودتان استفاده می‌شود.</span>
     </div>
     <hr>
     <div class="form-group">
         <label>دستور ساخت تصویر (Prompt به انگلیسی)</label>
-        <textarea id="prompt" rows="4" placeholder="مثال: A futuristic cyberpunk city, neon lights, highly detailed, 8k..."></textarea>
     </div>
     <div class="form-group">
@@ -124,16 +117,21 @@
         </div>
     </div>
-    <button id="btn-submit" class="main-btn" onclick="triggerGitHubAction()">🚀 ارسال درخواست ساخت تصویر</button>
     <div id="status-box"></div>
 </div>
 <script>
     let selectedWidth = 1024;
     let selectedHeight = 1024;
-    // انتخاب سایز عکس
     function selectSize(btn) {
         document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
@@ -142,63 +140,133 @@
     }
     async function triggerGitHubAction() {
-        const username = document.getElementById('gh-username').value;
-        const repo = document.getElementById('gh-repo').value;
         const token = document.getElementById('gh-token').value.trim();
         const prompt = document.getElementById('prompt').value.trim();
         const statusBox = document.getElementById('status-box');
         const submitBtn = document.getElementById('btn-submit');
-        if (!token || !prompt) {
-            alert('لطفاً توکن و دستور ساخت تصویر را وارد کنید.');
-            return;
-        }
         submitBtn.disabled = true;
         statusBox.style.display = 'block';
         statusBox.className = 'status-loading';
         statusBox.innerHTML = 'در حال ارتباط با سرور گیت‌هاب...';
         try {
             const apiUrl = `https://api.github.com/repos/${username}/${repo}/dispatches`;
-            // ارسال فقط متن‌ها (بدون نیاز به آپلود فایل!)
             const response = await fetch(apiUrl, {
                 method: 'POST',
-                headers: {
-                    'Accept': 'application/vnd.github.v3+json',
-                    'Authorization': `token ${token}`,
-                    'Content-Type': 'application/json'
-                },
                 body: JSON.stringify({
-                    event_type: 'generate-image', // این نام باید دقیقا با main.yml یکی باشد
-                    client_payload: {
-                        prompt: prompt,
-                        width: selectedWidth.toString(),
-                        height: selectedHeight.toString()
-                    }
                 })
             });
-            if (response.ok) {
-                statusBox.className = 'status-success';
-                statusBox.innerHTML = `
-                    <strong>درخواست با موفقیت ارسال شد! 🎉</strong><br>
-                    گیت‌هاب در حال ساخت تصویر است. (حدود ۳۰ تا ۶۰ ثانیه زمان می‌برد).<br><br>
-                    برای مشاهده پیشرفت و دانلود تصویر نهایی روی دکمه زیر کلیک کنید:<br>
-                    <a href="https://github.com/${username}/${repo}/actions" target="_blank" class="action-link">دریافت تصویر از گیت‌هاب</a>
-                `;
             } else {
-                const errorText = await response.text();
                 statusBox.className = 'status-error';
-                statusBox.innerHTML = `<strong>خطا در ارسال!</strong><br>کد خطا: ${response.status}<br><small>بررسی کنید توکن دسترسی Repo داشته باشد.</small>`;
             }
-        } catch (error) {
             statusBox.className = 'status-error';
-            statusBox.innerHTML = `<strong>خطای اینترنت!</strong><br><small>${error.message}</small>`;
         } finally {
-            submitBtn.disabled = false;
-            submitBtn.innerHTML = '🚀 ارسال درخواست ساخت تصویر';
         }
     }
 </script>

 <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>
         :root {
             outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.3); background-color: #ffffff;
         }
+        .size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
         .size-btn {
             padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
             background-color: #F7FAFC; color: var(--text-muted); cursor: pointer;
+            font-weight: 600; transition: all 0.2s;
         }
+        .size-btn.active { background-color: var(--primary); color: white; border-color: var(--primary); }
         button.main-btn {
             width: 100%; padding: 14px; background-color: var(--primary); color: #ffffff; border: none;
             border-radius: var(--radius); font-size: 1.1rem; font-weight: bold; cursor: pointer; margin-top: 10px;
         }
         button.main-btn:hover { background-color: var(--primary-hover); }
         button.main-btn:disabled { background-color: #A3B1E1; cursor: not-allowed; }
         hr { border: 0; border-top: 1px solid var(--border); margin: 25px 0; }
+        /* استایل‌های پیام و نمایش نتیجه */
+        #status-box { margin-top: 20px; padding: 15px; border-radius: var(--radius); display: none; text-align: center; font-weight: 600; }
         .status-loading { background-color: #EBF4FF; border: 1px solid #90CDF4; color: #3182CE; }
         .status-error { background-color: #FFF5F5; border: 1px solid #FEB2B2; color: #C53030; }
+        #result-container {
+            margin-top: 20px; display: none; text-align: center;
+        }
+        #result-container img {
+            max-width: 100%; border-radius: var(--radius); border: 2px solid var(--border); box-shadow: 0 4px 6px rgba(0,0,0,0.1);
         }
     </style>
 </head>
     <h2>🎨 استودیو تصویر Flux</h2>
     <div class="form-group">
+        <label>نام کاربری GitHub و نام مخزن</label>
+        <div style="display: flex; gap: 10px;">
+            <input type="text" id="gh-username" value="Hamed744" placeholder="نام کاربری">
+            <input type="text" id="gh-repo" value="vid-test" placeholder="مخزن">
+        </div>
     </div>
     <div class="form-group">
         <label>توکن امنیتی (PAT)</label>
         <input type="password" id="gh-token" placeholder="ghp_....................................">
     </div>
     <hr>
     <div class="form-group">
         <label>دستور ساخت تصویر (Prompt به انگلیسی)</label>
+        <textarea id="prompt" rows="3" placeholder="مثال: A beautiful glowing cat in cyberpunk style..."></textarea>
     </div>
     <div class="form-group">
         </div>
     </div>
+    <button id="btn-submit" class="main-btn" onclick="triggerGitHubAction()">🚀 ساخت تصویر</button>
     <div id="status-box"></div>
+    <div id="result-container">
+        <h3 style="color: #2ea44f; margin-bottom: 10px;">🎉 تصویر شما آماده است!</h3>
+        <img id="generated-image" src="" alt="AI Generated Image">
+    </div>
 </div>
 <script>
     let selectedWidth = 1024;
     let selectedHeight = 1024;
+    let checkInterval;
     function selectSize(btn) {
         document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('active'));
         btn.classList.add('active');
     }
     async function triggerGitHubAction() {
+        const username = document.getElementById('gh-username').value.trim();
+        const repo = document.getElementById('gh-repo').value.trim();
         const token = document.getElementById('gh-token').value.trim();
         const prompt = document.getElementById('prompt').value.trim();
         const statusBox = document.getElementById('status-box');
         const submitBtn = document.getElementById('btn-submit');
+        const resultContainer = document.getElementById('result-container');
+        if (!token || !prompt) return alert('توکن و دستور متحرک‌سازی الزامی است.');
+        // ریست کردن بخش نتایج و دکمه
         submitBtn.disabled = true;
+        resultContainer.style.display = 'none';
         statusBox.style.display = 'block';
         statusBox.className = 'status-loading';
         statusBox.innerHTML = 'در حال ارتباط با سرور گیت‌هاب...';
+        clearInterval(checkInterval);
         try {
             const apiUrl = `https://api.github.com/repos/${username}/${repo}/dispatches`;
+            // ۱. ارسال دستور شروع به گیت هاب
             const response = await fetch(apiUrl, {
                 method: 'POST',
+                headers: { 'Accept': 'application/vnd.github.v3+json', 'Authorization': `token ${token}`, 'Content-Type': 'application/json' },
                 body: JSON.stringify({
+                    event_type: 'generate-image',
+                    client_payload: { prompt: prompt, width: selectedWidth.toString(), height: selectedHeight.toString() }
                 })
             });
+            if (!response.ok) throw new Error('خطا در ارسال دستور به گیت‌هاب');
+            statusBox.innerHTML = 'درخواست ارسال شد. منتظر روشن شدن سرور... (این مرحله حدود ۱ دقیقه زمان می‌برد) ⏳';
+            // ۲. ۲ ثانیه صبر میکنیم تا اکشن در گیت هاب ثبت شود
+            setTimeout(() => {
+                checkWorkflowStatus(username, repo, token);
+            }, 3000);
+        } catch (error) {
+            statusBox.className = 'status-error';
+            statusBox.innerHTML = `خطا: ${error.message}`;
+            submitBtn.disabled = false;
+        }
+    }
+    // تابع برای پیگیری وضعیت گیت هاب در پس‌زمینه
+    async function checkWorkflowStatus(username, repo, token) {
+        const statusBox = document.getElementById('status-box');
+        const submitBtn = document.getElementById('btn-submit');
+        const headers = { 'Accept': 'application/vnd.github.v3+json', 'Authorization': `token ${token}` };
+        try {
+            // پیدا کردن ID جدی��ترین پردازش
+            let runsRes = await fetch(`https://api.github.com/repos/${username}/${repo}/actions/runs?event=repository_dispatch&per_page=1`, { headers });
+            let runsData = await runsRes.json();
+            if (!runsData.workflow_runs || runsData.workflow_runs.length === 0) {
+                setTimeout(() => checkWorkflowStatus(username, repo, token), 3000);
+                return;
+            }
+            const runId = runsData.workflow_runs[0].id;
+            // شروع به پرسیدن مداوم وضعیت هر ۵ ثانیه یکبار
+            checkInterval = setInterval(async () => {
+                let runDetailRes = await fetch(`https://api.github.com/repos/${username}/${repo}/actions/runs/${runId}`, { headers });
+                let runDetail = await runDetailRes.json();
+                if (runDetail.status === 'in_progress') {
+                    statusBox.innerHTML = 'سرور روشن شد. در حال تولید تصویر توسط هوش مصنوعی... 🎨<br><small>(لطفاً صفحه را نبندید)</small>';
+                }
+                else if (runDetail.status === 'completed') {
+                    clearInterval(checkInterval);
+                    if (runDetail.conclusion === 'success') {
+                        statusBox.innerHTML = 'تصویر ساخته شد! در حال استخراج تصویر... 📥';
+                        extractImageUrl(username, repo, token, runId);
+                    } else {
+                        statusBox.className = 'status-error';
+                        statusBox.innerHTML = 'خطا! ساخت تصویر در سرور گیت‌هاب با شکست مواجه شد ❌';
+                        submitBtn.disabled = false;
+                    }
+                }
+            }, 5000);
+        } catch (e) {
+            clearInterval(checkInterval);
+            statusBox.className = 'status-error';
+            statusBox.innerHTML = 'ارتباط برای پیگیری وضعیت قطع شد.';
+            submitBtn.disabled = false;
+        }
+    }
+    // خواندن لاگ‌های گیت هاب و بیرون کشیدن لینک عکس
+    async function extractImageUrl(username, repo, token, runId) {
+        const headers = { 'Accept': 'application/vnd.github.v3+json', 'Authorization': `token ${token}` };
+        const statusBox = document.getElementById('status-box');
+        try {
+            // پیدا کردن Job ID
+            let jobsRes = await fetch(`https://api.github.com/repos/${username}/${repo}/actions/runs/${runId}/jobs`, { headers });
+            let jobsData = await jobsRes.json();
+            const jobId = jobsData.jobs[0].id;
+            // دریافت فایل متنی لاگ‌ها
+            let logsRes = await fetch(`https://api.github.com/repos/${username}/${repo}/actions/jobs/${jobId}/logs`, { headers });
+            let logsText = await logsRes.text();
+            // جستجو در متن برای پیدا کردن لینکی که کد پایتون چاپ کرده بود
+            const urlMatch = logsText.match(/\[FINAL_IMAGE_URL\]\s*(https:\/\/[^\s]+)/);
+            if (urlMatch && urlMatch[1]) {
+                const imageUrl = urlMatch[1];
+                statusBox.style.display = 'none'; // مخفی کردن وضعیت
+                document.getElementById('result-container').style.display = 'block'; // نمایش عکس
+                document.getElementById('generated-image').src = imageUrl;
             } else {
                 statusBox.className = 'status-error';
+                statusBox.innerHTML = 'عملیات موفق بود اما نتوانستیم لینک تصویر را از سرور استخراج کنیم!';
             }
+        } catch (e) {
             statusBox.className = 'status-error';
+            statusBox.innerHTML = 'خطا در خواندن فایل‌های نهایی از گیت‌هاب.';
         } finally {
+            document.getElementById('btn-submit').disabled = false;
         }
     }
 </script>