Spaces:

Opera8
/

runflare

Sleeping

App Files Files Community

Sada8888 commited on May 15

Commit

851081c

verified ·

1 Parent(s): add895c

Update index.html

Browse files

Files changed (1) hide show

index.html +75 -70

index.html CHANGED Viewed

@@ -3,18 +3,18 @@
 <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 {
-            --primary: #2ea44f;
-            --primary-hover: #2c974b;
-            --bg-color: #f6f8fa;
             --panel-bg: #ffffff;
-            --border: #d0d7de;
-            --text-main: #24292f;
-            --text-muted: #57606a;
-            --radius: 8px;
         }
         body {
@@ -34,131 +34,135 @@
             background-color: var(--panel-bg);
             border: 1px solid var(--border);
             border-radius: var(--radius);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
             width: 100%;
             max-width: 550px;
             padding: 30px;
         }
-        h2 { text-align: center; margin-top: 0; margin-bottom: 25px; color: var(--text-main); font-weight: 800; }
         .form-group { margin-bottom: 20px; }
         label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; }
         input[type="text"], input[type="password"], textarea {
             width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
-            font-family: inherit; font-size: 1rem; box-sizing: border-box; background-color: #f6f8fa;
         }
         input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
-            outline: none; border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3); background-color: #ffffff;
         }
-        .file-upload-wrapper { border: 2px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center; background-color: #fcfcfc; cursor: pointer; }
-        .file-upload-wrapper:hover { border-color: #0969da; }
-        input[type="file"] { width: 100%; cursor: pointer; }
-        button {
             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:hover { background-color: var(--primary-hover); }
-        button:disabled { background-color: #94d3a2; 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: #ddf4ff; border: 1px solid #54aeff; color: #0969da; }
-        .status-success { background-color: #dafbe1; border: 1px solid #4ac26b; color: #1a7f37; }
-        .status-error { background-color: #ffebe9; border: 1px solid #ff8182; color: #cf222e; }
         .action-link {
-            display: inline-block; margin-top: 15px; padding: 8px 16px; background-color: #ffffff;
-            border: 1px solid var(--border); border-radius: var(--radius); color: #0969da; text-decoration: none; font-weight: 600;
         }
     </style>
 </head>
 <body>
 <div class="container">
-    <h2>استودیو تولید ویدیو</h2>
     <div class="form-group">
-        <label for="gh-username">نام کاربری GitHub</label>
-        <input type="text" id="gh-username" value="Hamed744" readonly style="background-color: #eef1f5; color: #57606a;">
     </div>
     <div class="form-group">
-        <label for="gh-repo">نام مخزن (Repository)</label>
-        <input type="text" id="gh-repo" value="vid-test" readonly style="background-color: #eef1f5; color: #57606a;">
     </div>
     <div class="form-group">
-        <label for="gh-token">توکن امنیتی (PAT)</label>
         <input type="password" id="gh-token" placeholder="ghp_....................................">
-        <span class="notice">توکن شما در مرورگر خودتان می‌ماند و جایی ذخیره نمی‌شود.</span>
     </div>
     <hr>
     <div class="form-group">
-        <label for="imageFile">تصویر اولیه ویدیو</label>
-        <div class="file-upload-wrapper">
-            <input type="file" id="imageFile" accept="image/png, image/jpeg, image/webp">
-        </div>
     </div>
     <div class="form-group">
-        <label for="prompt">دستور متحرک‌سازی (Prompt)</label>
-        <textarea id="prompt" rows="4" placeholder="مثال: A slow pan over a beautiful landscape, cinematic lighting..."></textarea>
     </div>
-    <button id="btn-submit" onclick="triggerGitHubAction()">ارسال درخواست ساخت به سرور</button>
     <div id="status-box"></div>
 </div>
 <script>
     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 fileInput = document.getElementById('imageFile');
         const statusBox = document.getElementById('status-box');
         const submitBtn = document.getElementById('btn-submit');
-        if (!token || !prompt || fileInput.files.length === 0) {
-            alert('لطفاً توکن، دستور متحرک‌سازی و یک تصویر را وارد کنید.');
             return;
         }
         submitBtn.disabled = true;
         statusBox.style.display = 'block';
         statusBox.className = 'status-loading';
         try {
-            // مرحله اول: آپلود موقت تصویر برای دریافت لینک
-            statusBox.innerHTML = 'در حال آپلود موقت تصویر... (مرحله ۱ از ۲)';
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            // استفاده از سرور موقت و رایگان tmpfiles.org
-            const uploadRes = await fetch('https://tmpfiles.org/api/v1/upload', {
-                method: 'POST',
-                body: formData
-            });
-            const uploadData = await uploadRes.json();
-            if (uploadData.status !== 'success') {
-                throw new Error('آپلود تصویر ناموفق بود.');
-            }
-            // تبدیل لینک آپلود به لینک دانلود مستقیم
-            const imageUrl = uploadData.data.url.replace('tmpfiles.org/', 'tmpfiles.org/dl/');
-            // مرحله دوم: ارسال لینک تصویر و دستور به گیت‌هاب
-            statusBox.innerHTML = 'در حال ارسال دستور ساخت به گیت‌هاب... (مرحله ۲ از ۲)';
             const apiUrl = `https://api.github.com/repos/${username}/${repo}/dispatches`;
             const response = await fetch(apiUrl, {
                 method: 'POST',
                 headers: {
@@ -167,10 +171,11 @@
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
-                    event_type: 'generate-video',
                     client_payload: {
                         prompt: prompt,
-                        image_url: imageUrl  // در اینجا فقط لینک ارسال می‌شود که حجمش چند بایت است
                     }
                 })
             });
@@ -178,22 +183,22 @@
             if (response.ok) {
                 statusBox.className = 'status-success';
                 statusBox.innerHTML = `
-                    <strong>ارسال موفقیت‌آمیز! 🎉</strong><br>
-                    دستور ساخت ویدیو به سرور ارسال شد. فرآیند ساخت معمولاً بین ۵ الی ۱۰ دقیقه زمان می‌برد.<br>
-                    برای مشاهده وضعیت پردازش و دانلود فایل نهایی (در قالب فایل zip)، روی دکمه زیر کلیک کنید:<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>${errorText}</small>`;
             }
         } catch (error) {
             statusBox.className = 'status-error';
-            statusBox.innerHTML = `<strong>خطای ارتباطی!</strong><br><small>${error.message}</small>`;
         } finally {
             submitBtn.disabled = false;
-            submitBtn.innerText = 'ارسال درخواست ساخت به سرور';
         }
     }
 </script>

 <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 {
+            --primary: #5A67D8;
+            --primary-hover: #4C51BF;
+            --bg-color: #EDF2F7;
             --panel-bg: #ffffff;
+            --border: #E2E8F0;
+            --text-main: #1A202C;
+            --text-muted: #718096;
+            --radius: 12px;
         }
         body {
             background-color: var(--panel-bg);
             border: 1px solid var(--border);
             border-radius: var(--radius);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
             width: 100%;
             max-width: 550px;
             padding: 30px;
         }
+        h2 { text-align: center; margin-top: 0; margin-bottom: 25px; color: var(--primary); font-weight: 800; }
         .form-group { margin-bottom: 20px; }
         label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; }
         input[type="text"], input[type="password"], textarea {
             width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
+            font-family: inherit; font-size: 1rem; box-sizing: border-box; background-color: #F7FAFC;
         }
         input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+            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>
 <body>
 <div class="container">
+    <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">
+        <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>
     </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');
+        selectedWidth = parseInt(btn.getAttribute('data-w'));
+        selectedHeight = parseInt(btn.getAttribute('data-h'));
+    }
     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: {
                     '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>