tts3

Running

App Files Files Community

Opera8 commited on about 22 hours ago

Commit

d5befac

verified ·

1 Parent(s): d6ee588

Create templates/vevo-voice.html

Browse files

Files changed (1) hide show

templates/vevo-voice.html +351 -0

templates/vevo-voice.html ADDED Viewed

	@@ -0,0 +1,351 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>استودیو تبدیل صدای Vevo آلفا</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+        }
+        .progress-slim { height: 4px; border-radius: 10px; background: #1e293b; overflow: hidden; margin-top: 8px; }
+        .progress-bar-anim {
+            height: 100%; width: 100%;
+            animation: shimmy 1.5s infinite linear;
+            background: linear-gradient(90deg, #3b82f6, #6366f1, #3b82f6);
+            background-size: 200% 100%;
+        }
+        @keyframes shimmy { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
+    </style>
+</head>
+<body class="bg-slate-950 text-slate-100 min-h-screen flex flex-col">
+    <header class="border-b border-slate-800 bg-slate-900/50 py-4 px-6 mb-8">
+        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
+            <div>
+                <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400">
+                    سامانه تبدیل صدای Vevo (Opera8 / Sada)
+                </h1>
+                <p class="text-xs text-slate-400 mt-1 font-medium">اجرا و پردازش ایمن بر روی کلودهای توزیع‌شده گیت‌هاب اکشنز</p>
+            </div>
+            <div class="text-xs text-slate-500 bg-slate-900 px-3 py-1.5 rounded-md border border-slate-800">
+                GitHub Action Load-Balanced Client v2
+            </div>
+        </div>
+    </header>
+    <main class="flex-grow max-w-7xl w-full mx-auto px-4 md:px-6 pb-12">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="lg:col-span-1 bg-slate-900 border border-slate-800 p-6 rounded-xl flex flex-col gap-5 h-fit">
+                <h2 class="text-lg font-semibold text-blue-400 border-b border-slate-800 pb-2">تنظیمات اتصال به سرویس</h2>
+                <div>
+                    <label class="block text-xs text-slate-400 mb-2 font-medium">آدرس پایه سرور RVC (Gradio Space):</label>
+                    <input type="text" id="baseUrl" value="https://opera8-sada.hf.space"
+                           class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition-colors">
+                </div>
+                <div class="bg-slate-950 p-4 rounded-lg border border-slate-800">
+                    <span class="block text-xs text-slate-400 mb-1 font-medium">سابقه کارهای من:</span>
+                    <button onclick="confirmClearAll()" class="mt-2 text-xs text-red-400 hover:text-red-300 font-medium transition-colors">
+                        <i class="fas fa-trash-alt me-1"></i> پاک‌سازی تاریخچه صوتی
+                    </button>
+                    <div id="historyList" class="mt-4 flex flex-col gap-3 max-h-96 overflow-y-auto">
+                        <!-- کارهای ذخیره شده اینجا نمایش داده می‌شوند -->
+                    </div>
+                </div>
+            </div>
+            <div class="lg:col-span-2 flex flex-col gap-6">
+                <div class="bg-slate-900 border border-slate-800 p-6 rounded-xl">
+                    <h2 class="text-lg font-semibold text-blue-400 border-b border-slate-800 pb-2 mb-6">آپلود فایلهای ورودی</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div class="border border-dashed border-slate-700 hover:border-blue-500 p-4 rounded-lg bg-slate-950/50 flex flex-col items-center justify-center text-center transition-colors">
+                            <span class="text-2xl mb-2">🎙️</span>
+                            <span class="text-sm font-medium text-slate-200 mb-1">فایل صوتی اصلی (Source Audio)</span>
+                            <input type="file" id="sourceAudio" accept="audio/*" class="text-xs text-slate-400 file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700">
+                        </div>
+                        <div class="border border-dashed border-slate-700 hover:border-blue-500 p-4 rounded-lg bg-slate-950/50 flex flex-col items-center justify-center text-center transition-colors">
+                            <span class="text-2xl mb-2">👤</span>
+                            <span class="text-sm font-medium text-slate-200 mb-1">فایل صوتی مرجع (Reference Timbre)</span>
+                            <input type="file" id="refAudio" accept="audio/*" class="text-xs text-slate-400 file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700">
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <button id="convertBtn" onclick="startVoiceConversion()" class="w-full py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-800 disabled:text-slate-500 disabled:cursor-not-allowed text-white rounded-lg font-bold text-sm shadow-lg shadow-blue-900/20 transition-all">
+                            شروع فرآیند تبدیل صدا
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-8 bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col">
+            <div class="flex justify-between items-center border-b border-slate-800 pb-2 mb-3">
+                <h3 class="text-sm font-semibold text-slate-300">لاگ‌ها و گزارشات فنی (Developer Console)</h3>
+                <button onclick="clearLogs()" class="text-[10px] text-slate-500 hover:text-slate-300">پاک کردن لاگ‌ها</button>
+            </div>
+            <div id="consoleLogs" class="bg-slate-950 p-4 rounded-lg font-mono text-xs overflow-y-auto h-64 border border-slate-800/80 flex flex-col gap-1 leading-relaxed"></div>
+        </div>
+    </main>
+    <footer class="border-t border-slate-800 py-6 text-center text-xs text-slate-600 bg-slate-950">
+        <div class="max-w-7xl mx-auto px-4">
+            طراحی شده با سیستم توزیع پردازش بر روی ریپازیتوری‌های گیت‌هاب اکشنز.
+        </div>
+    </footer>
+    <script>
+        let pollIntervals = {};
+        function log(message, type = 'info') {
+            const consoleEl = document.getElementById('consoleLogs');
+            const logItem = document.createElement('div');
+            let colorClass = 'text-slate-300';
+            let prefix = '⚙️';
+            if (type === 'error') { colorClass = 'text-red-400 font-semibold'; prefix = '❌'; }
+            else if (type === 'success') { colorClass = 'text-emerald-400 font-semibold'; prefix = '✅'; }
+            else if (type === 'warning') { colorClass = 'text-amber-400'; prefix = '⚠️'; }
+            else if (type === 'debug') { colorClass = 'text-sky-400'; prefix = '🔍'; }
+            logItem.className = `py-1 border-b border-slate-900/50 ${colorClass}`;
+            logItem.innerHTML = `<span class="opacity-40 select-none">[${new Date().toLocaleTimeString()}]</span> <span class="mr-1">${prefix}</span> ${message}`;
+            consoleEl.appendChild(logItem);
+            consoleEl.scrollTop = consoleEl.scrollHeight;
+        }
+        function clearLogs() {
+            document.getElementById('consoleLogs').innerHTML = '';
+            log("کنسول پاکسازی شد.");
+        }
+        async function uploadFileToDocker(file, runId, suffix) {
+            const formData = new FormData();
+            const ext = file.name.split('.').pop().toLowerCase();
+            formData.append('run_id', `${runId}_${suffix}`);
+            formData.append('ext', ext);
+            formData.append('file', file);
+            const response = await fetch('/api/webhook/upload', { method: 'POST', body: formData });
+            if (!response.ok) throw new Error("خطا در آپلود صوتی ورودی به هاست اصلی.");
+            return ext;
+        }
+        function safeBase64Encode(str) {
+            return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
+                return String.fromCharCode('0x' + p1);
+            }));
+        }
+        function getJobs() { return JSON.parse(localStorage.getItem('alpha_vevo_jobs_v1') || '[]'); }
+        function saveJob(job) {
+            const jobs = getJobs();
+            jobs.unshift(job);
+            localStorage.setItem('alpha_vevo_jobs_v1', JSON.stringify(jobs));
+            renderHistory();
+        }
+        function renameJobId(oldId, newId) {
+            const jobs = getJobs();
+            const idx = jobs.findIndex(j => j.id === oldId);
+            if (idx !== -1) {
+                jobs[idx].id = newId;
+                localStorage.setItem('alpha_vevo_jobs_v1', JSON.stringify(jobs));
+            }
+        }
+        function updateJobStatus(id, status, filename, logMsg) {
+            const jobs = getJobs(); const idx = jobs.findIndex(j => j.id === id);
+            if (idx !== -1) {
+                jobs[idx].status = status; if(filename) jobs[idx].filename = filename; if(logMsg) jobs[idx].log = logMsg;
+                localStorage.setItem('alpha_vevo_jobs_v1', JSON.stringify(jobs)); renderHistory();
+            }
+        }
+        function deleteJob(id) {
+            const jobs = getJobs().filter(j => j.id !== id);
+            localStorage.setItem('alpha_vevo_jobs_v1', JSON.stringify(jobs));
+            if (pollIntervals[id]) clearInterval(pollIntervals[id]);
+            renderHistory();
+        }
+        function confirmClearAll() {
+            if(confirm("تمام تاریخچه تبدیل صدای Vevo شما پاک شود؟")) {
+                Object.values(pollIntervals).forEach(clearInterval);
+                localStorage.removeItem('alpha_vevo_jobs_v1');
+                renderHistory();
+                log("تمام تاریخچه‌های صوتی پاک شدند.");
+            }
+        }
+        function renderHistory() {
+            const jobs = getJobs();
+            const list = document.getElementById('historyList');
+            list.innerHTML = '';
+            if (jobs.length === 0) {
+                list.innerHTML = `<div class="text-center py-4 text-slate-500 text-xs">تاریخچه خالی است.</div>`;
+                return;
+            }
+            jobs.forEach(job => {
+                let badge = '';
+                let content = '';
+                if (job.status === 'completed') {
+                    badge = `<span class="text-[10px] bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded font-bold">آماده</span>`;
+                    content = `<div class="mt-2"><audio controls src="${job.filename}" class="w-full h-8 rounded bg-slate-900"></audio></div>`;
+                } else if (job.status === 'failed') {
+                    badge = `<span class="text-[10px] bg-red-500/20 text-red-400 px-2 py-0.5 rounded font-bold">خطا</span>`;
+                    content = `<div class="mt-1 text-[11px] text-red-400 bg-red-950/20 p-2 rounded border border-red-900/30">${job.log || 'خطا در گیت‌هاب'}</div>`;
+                } else {
+                    badge = `<span class="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded font-bold">در حال پردازش</span>`;
+                    content = `
+                        <div class="mt-2 text-[11px] text-slate-400">
+                            <div>${job.log || 'درحال انتقال...'}</div>
+                            <div class="progress-slim"><div class="progress-bar-anim"></div></div>
+                        </div>`;
+                }
+                const item = document.createElement('div');
+                item.className = "bg-slate-950 p-3 rounded-lg border border-slate-800/80 relative flex flex-col";
+                item.innerHTML = `
+                    <button class="absolute top-2 left-2 text-slate-500 hover:text-red-400 text-xs" onclick="deleteJob('${job.id}')">&times;</button>
+                    <div class="flex justify-between items-center mb-1">
+                        <span class="text-xs font-semibold text-slate-200">پروژه #${job.id.substring(0, 6)}</span>
+                        ${badge}
+                    </div>
+                    <span class="text-[10px] text-slate-500">${job.date}</span>
+                    ${content}
+                `;
+                list.appendChild(item);
+            });
+        }
+        function startPolling(runId) {
+            if (pollIntervals[runId]) clearInterval(pollIntervals[runId]);
+            pollIntervals[runId] = setInterval(async () => {
+                try {
+                    const statusRes = await fetch(`/api/status/${runId}`);
+                    const statusData = await statusRes.json();
+                    if (statusData.status === 'ready') {
+                        clearInterval(pollIntervals[runId]);
+                        updateJobStatus(runId, 'completed', statusData.url, 'تکمیل شد.');
+                        log(`پردازش با موفقیت به پایان رسید. آدرس خروجی: ${statusData.url}`, "success");
+                    } else if (statusData.status === 'failed') {
+                        clearInterval(pollIntervals[runId]);
+                        updateJobStatus(runId, 'failed', null, statusData.message || 'خطا در عملیات.');
+                        log(`خطای سیستمی گیت‌هاب: ${statusData.message || 'Error'}`, "error");
+                    } else {
+                        const activeRes = await fetch('/api/actions/active');
+                        const activeData = await activeRes.json();
+                        const hasActiveActions = activeData.status === 'success' && activeData.actions.length > 0;
+                        if (hasActiveActions) {
+                            updateJobStatus(runId, 'processing', null, 'رانر گیت‌هاب در حال آماده‌سازی خط لوله Vevo و تبدیل فرکانس صدا...');
+                        } else {
+                            updateJobStatus(runId, 'processing', null, 'در انتظار تخصیص پردازشگر موازی در سرورهای گیت‌هاب...');
+                        }
+                    }
+                } catch (e) {
+                    console.error("Error polling:", e);
+                }
+            }, 4000);
+        }
+        async function startVoiceConversion() {
+            const baseUrlRaw = document.getElementById('baseUrl').value.trim();
+            const sourceFileInput = document.getElementById('sourceAudio');
+            const refFileInput = document.getElementById('refAudio');
+            const convertBtn = document.getElementById('convertBtn');
+            if (!sourceFileInput.files[0] || !refFileInput.files[0]) {
+                alert("لطفاً هم فایل صوتی اصلی و هم مرجع را انتخاب کنید.");
+                return;
+            }
+            convertBtn.disabled = true;
+            convertBtn.textContent = "در حال انتقال فرآیند...";
+            const currentRunId = "vev" + Math.random().toString(36).substring(2, 14);
+            try {
+                saveJob({
+                    id: currentRunId,
+                    status: 'processing',
+                    date: new Date().toLocaleTimeString('fa-IR'),
+                    log: 'در حال آپلود صوتی به سرور اصلی...',
+                    filename: null
+                });
+                log("شروع آپلود فایل صوتی اصلی...", "info");
+                const sourceExt = await uploadFileToDocker(sourceFileInput.files[0], currentRunId, 'vevo_source');
+                log("فایل صوتی اصلی با موفقیت به سرور داکر منتقل شد.", "success");
+                log("شروع آپلود فایل صوتی مرجع...", "info");
+                const refExt = await uploadFileToDocker(refFileInput.files[0], currentRunId, 'vevo_ref');
+                log("فایل صوتی مرجع با موفقیت به سرور داکر منتقل شد.", "success");
+                const b64SpaceUrl = safeBase64Encode(baseUrlRaw);
+                const vevoPayload = `VEVOCONFIG_userRunId_${currentRunId}_sourceExt_${sourceExt}_refExt_${refExt}_spaceUrl_${b64SpaceUrl}`;
+                log("تخصیص نوبت در صف پردازشی سرورهای گیت‌هاب اکشنز...", "info");
+                updateJobStatus(currentRunId, 'processing', null, 'ارسال درخواست به صف سرورهای موازی گیت‌هاب...');
+                const response = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        prompt: vevoPayload,
+                        action_name: 'vevo-voice'
+                    })
+                });
+                const data = await response.json();
+                if (data.status === 'success') {
+                    renameJobId(currentRunId, data.run_id);
+                    startPolling(data.run_id);
+                    log(`درخواست به صورت رسمی با شناسه رهگیری ${data.run_id} در صف گیت‌هاب ثبت شد.`, "success");
+                    sourceFileInput.value = "";
+                    refFileInput.value = "";
+                } else {
+                    throw new Error(data.message || 'خطا در ثبت نوبت صف.');
+                }
+            } catch (err) {
+                log(`بروز خطا در شروع فرآیند: ${err.message}`, "error");
+                updateJobStatus(currentRunId, 'failed', null, err.message || "خطا در شروع عملیات.");
+            } finally {
+                convertBtn.disabled = false;
+                convertBtn.textContent = "شروع فرآیند تبدیل صدا";
+            }
+        }
+        window.addEventListener('DOMContentLoaded', () => {
+            log("کلاینت وب لود شد.");
+            renderHistory();
+            // بازگردانی مانیتورینگ کارها در صورت رفرش تصادفی صفحه
+            const jobs = getJobs();
+            jobs.forEach(job => {
+                if (job.status === 'processing') {
+                    startPolling(job.id);
+                }
+            });
+        });
+    </script>
+</body>
+</html>