templates/effects.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تولید صدا با Stable Audio 3</title>
    <style>
        body {
            font-family: Tahoma, Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            font-size: 20px;
            text-align: center;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: inherit;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-family: inherit;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        #status {
            margin-top: 15px;
            text-align: center;
            font-weight: bold;
        }
        audio {
            width: 100%;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>ابزار تولید صدا با Stable Audio 3</h1>
        
        <div class="form-group">
            <label for="variant">مدل (Model):</label>
            <select id="variant">
                <option value="medium">Medium — general audio (largest)</option>
                <option value="small-music">Small Music — 0.6B, music-focused</option>
                <option value="small-sfx">Small SFX — 0.6B, sound effects</option>
            </select>
        </div>

        <div class="form-group">
            <label for="prompt">پرامپت (توصیف صدا به انگلیسی):</label>
            <textarea id="prompt" rows="3">A dream-like Synthpop instrumental that would accompany a dream-sequence in a surrealist movie 120 BPM</textarea>
        </div>

        <div class="form-group">
            <label for="duration">مدت زمان به ثانیه (حداکثر 380):</label>
            <input type="number" id="duration" value="60" min="1" max="380">
        </div>

        <div class="form-group">
            <label for="steps">مراحل (Steps):</label>
            <input type="number" id="steps" value="8">
        </div>

        <div class="form-group">
            <label for="cfg_scale">مقیاس CFG:</label>
            <input type="number" step="0.1" id="cfg_scale" value="1.0">
        </div>

        <div class="form-group">
            <label for="sampler_type">نوع نمونه‌بردار (Sampler):</label>
            <select id="sampler_type">
                <option value="pingpong">pingpong</option>
            </select>
        </div>

        <div class="form-group">
            <label for="seed">سید (Seed):</label>
            <input type="number" id="seed" value="0">
        </div>

        <button id="generateBtn">تولید صدا</button>

        <div id="status"></div>
        <audio id="audioPlayer" controls style="display: none;"></audio>
    </div>

    <script>
        const generateBtn = document.getElementById('generateBtn');
        const statusDiv = document.getElementById('status');
        const audioPlayer = document.getElementById('audioPlayer');
        let pollInterval = null;

        // تابع کمکی تبدیل رشته متنی به Base64 بدون تداخل با کاراکترهای چندبایتی
        function safeBase64Encode(str) {
            return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
                return String.fromCharCode('0x' + p1);
            }));
        }

        // بررسی دوره‌ای سرور برای بارگیری خروجی تولید شده نهایی
        function startPolling(runId) {
            if (pollInterval) clearInterval(pollInterval);
            
            pollInterval = setInterval(async () => {
                try {
                    // ۱. بررسی مستقیم وجود فایل خروجی روی دایرکتوری سرور
                    const checkUrl = `/static/images/${runId}.wav`;
                    const audioCheck = await fetch(checkUrl, { method: 'HEAD' });
                    
                    if (audioCheck.ok) {
                        clearInterval(pollInterval);
                        audioPlayer.src = checkUrl;
                        audioPlayer.style.display = 'block';
                        statusDiv.innerText = 'تولید صدا با موفقیت انجام شد.';
                        generateBtn.disabled = false;
                        return;
                    }

                    // ۲. رهگیری وضعیت فرآیند جاری از دیتابیس واسط
                    const statusRes = await fetch(`/api/status/${runId}`);
                    const statusData = await statusRes.json();

                    if (statusData.status === 'ready') {
                        clearInterval(pollInterval);
                        audioPlayer.src = statusData.url;
                        audioPlayer.style.display = 'block';
                        statusDiv.innerText = 'تولید صدا با موفقیت انجام شد.';
                        generateBtn.disabled = false;
                    } else if (statusData.status === 'failed') {
                        clearInterval(pollInterval);
                        statusDiv.innerText = 'خطا در پردازش صدا: ' + (statusData.message || 'مشکلی رخ داد.');
                        generateBtn.disabled = false;
                    } else {
                        statusDiv.innerText = 'در حال ترکیب فرکانس‌ها و تولید فایل نهایی صوتی... لطفاً منتظر بمانید.';
                    }
                } catch (e) {
                    console.error("Polling error:", e);
                }
            }, 4000);
        }

        generateBtn.addEventListener('click', async () => {
            const variant = document.getElementById('variant').value;
            const prompt = document.getElementById('prompt').value.trim();
            const duration = parseFloat(document.getElementById('duration').value);
            const steps = parseInt(document.getElementById('steps').value);
            const cfg_scale = parseFloat(document.getElementById('cfg_scale').value);
            const sampler_type = document.getElementById('sampler_type').value;
            const seed = parseInt(document.getElementById('seed').value);

            if (!prompt) {
                statusDiv.innerText = 'لطفاً متن پرامپت را وارد کنید.';
                return;
            }

            if (duration > 380) {
                statusDiv.innerText = 'مدت زمان نمی‌تواند بیشتر از ۳۸۰ ثانیه باشد.';
                return;
            }

            try {
                generateBtn.disabled = true;
                statusDiv.innerText = 'در حال ثبت درخواست و اتصال به سرور پردازشی صوتی...';
                audioPlayer.style.display = 'none';

                // ایجاد یک شناسه رهگیری منحصربه‌فرد برای این اجرا
                const currentRunId = 'effects' + Math.random().toString(36).substring(2, 14);
                
                // رمزگذاری رشته پرامپت برای جلوگیری از تداخل کاراکترها در ساختار پارامترهای سرور
                const b64Prompt = safeBase64Encode(prompt);

                // فشرده‌سازی اطلاعات در هدر پیکربندی به روش شبیه‌ساز صدا برای ارسال پکیج
                const voicePayload = `VOICECONFIG_mode_effects_userRunId_${currentRunId}_variant_${variant}_duration_${duration}_steps_${steps}_cfg_${cfg_scale}_sampler_${sampler_type}_prompt_${b64Prompt}_seed_${seed}`;

                // ارسال به متد جنریت اصلی فلاسک و تخصیص تسک گیت‌هاب با نام اکشن 'effects'
                const response = await fetch('/api/generate', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        prompt: voicePayload,
                        width: 1024,
                        height: 1024,
                        action_name: 'effects'
                    })
                });

                const data = await response.json();

                if (data.status === 'success') {
                    statusDiv.innerText = 'درخواست در نوبت پردازش قرار گرفت. در حال آماده‌سازی فایل...';
                    startPolling(data.run_id);
                } else {
                    throw new Error(data.message || 'خطا در ثبت نوبت درخواست.');
                }
            } catch (error) {
                console.error(error);
                statusDiv.innerText = 'خطایی رخ داد: ' + error.message;
                generateBtn.disabled = false;
            }
        });
    </script>
</body>
</html>