حل هذة المشكلة {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %}
{{ message }}
{% endfor %} {% endif %} {% endwith %} من هذا الكود <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTubeGen Pro - لوحة التحكم</title>
    <!-- إضافة Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- إضافة خط Tajawal من Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Tajawal', sans-serif;
        }
        h1, h2 {
            color: #0d6efd;
        }
        .form-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0b5ed7;
        }
        .form-label {
            font-weight: bold;
        }
        .log-area {
            background-color: #f4f4f4;
            font-family: monospace;
            font-size: 14px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            height: 300px;
            overflow-y: auto;
        }
        .progress-bar {
            height: 20px;
            margin-top: 10px;
        }
        .countdown-label {
            font-size: 16px;
            color: red;
        }
        .operation-time-label {
            font-size: 16px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <!-- عرض رسائل flash -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <h1 class="text-center mb-4">YouTubeGen Pro - لوحة التحكم</h1>

        <!-- تبويب الإعدادات النصية والمرئية -->
        <div class="form-container">
            <h2 class="mb-3">الإعدادات النصية والمرئية</h2>
            <form id="combinedSettingsForm" action="/update_settings" method="POST">
                <div class="mb-3">
                    <label for="topic" class="form-label">📝 موضوع الفيديو:</label>
                    <textarea class="form-control" id="topic" name="topic" rows="3" required>{{ env_data.get('TOPIC', '') }}</textarea>
                </div>
                <div class="mb-3">
                    <label for="word_count" class="form-label">🔢 عدد الكلمات:</label>
                    <input type="number" class="form-control" id="word_count" name="word_count" value="{{ env_data.get('WORD_COUNT', '6000') }}" required>
                </div>
                <div class="mb-3">
                    <label for="text_type" class="form-label">🖋️ نوع النص:</label>
                    <select class="form-select" id="text_type" name="text_type" required>
                        <option value="حكاية" {% if env_data.get('TEXT_TYPE') == 'حكاية' %}selected{% endif %}>حكاية</option>
                        <option value="مقال" {% if env_data.get('TEXT_TYPE') == 'مقال' %}selected{% endif %}>مقال</option>
                        <option value="وصف" {% if env_data.get('TEXT_TYPE') == 'وصف' %}selected{% endif %}>وصف</option>
                        <option value="قصة" {% if env_data.get('TEXT_TYPE') == 'قصة' %}selected{% endif %}>قصة</option>
                        <option value="أفكار" {% if env_data.get('TEXT_TYPE') == 'أفكار' %}selected{% endif %}>أفكار</option>
                        <option value="تحليل" {% if env_data.get('TEXT_TYPE') == 'تحليل' %}selected{% endif %}>تحليل</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="language_type" class="form-label">🌐 لغة النص:</label>
                    <select class="form-select" id="language_type" name="language_type" required>
                        <option value="ar" {% if env_data.get('LANGUAGE_TYPE') == 'ar' %}selected{% endif %}>العربية</option>
                        <option value="en" {% if env_data.get('LANGUAGE_TYPE') == 'en' %}selected{% endif %}>الإنجليزية</option>
                        <option value="fr" {% if env_data.get('LANGUAGE_TYPE') == 'fr' %}selected{% endif %}>الفرنسية</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="style_number" class="form-label">🎨 اختر الاستايل:</label>
                    <select class="form-select" id="style_number" name="style_number" required>
                        <option value="1" {% if env_data.get('STYLE_NUMBER') == '1' %}selected{% endif %}>1 - 3D Render with High Detail</option>
                        <option value="2" {% if env_data.get('STYLE_NUMBER') == '2' %}selected{% endif %}>2 - Cyberpunk with Neon Lights</option>
                        <option value="3" {% if env_data.get('STYLE_NUMBER') == '3' %}selected{% endif %}>3 - Realistic Photo</option>
                        <option value="4" {% if env_data.get('STYLE_NUMBER') == '4' %}selected{% endif %}>4 - 3D Cartoon</option>
                        <option value="5" {% if env_data.get('STYLE_NUMBER') == '5' %}selected{% endif %}>5 - Vintage Watercolor Art</option>
                        <option value="6" {% if env_data.get('STYLE_NUMBER') == '6' %}selected{% endif %}>6 - Dark Fantasy with Dramatic Lighting</option>
                        <option value="7" {% if env_data.get('STYLE_NUMBER') == '7' %}selected{% endif %}>7 - Sci-Fi with Futuristic Technology</option>
                        <option value="8" {% if env_data.get('STYLE_NUMBER') == '8' %}selected{% endif %}>8 - Steampunk with Victorian Aesthetic</option>
                        <option value="9" {% if env_data.get('STYLE_NUMBER') == '9' %}selected{% endif %}>9 - Minimalist with Clean Lines</option>
                        <option value="10" {% if env_data.get('STYLE_NUMBER') == '10' %}selected{% endif %}>10 - Nature Photography with Soft Lighting</option>
                        <option value="11" {% if env_data.get('STYLE_NUMBER') == '11' %}selected{% endif %}>11 - Fantasy Creature Design</option>
                        <option value="12" {% if env_data.get('STYLE_NUMBER') == '12' %}selected{% endif %}>12 - Retro 80s Neon Art</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="size_number" class="form-label">📏 اختر حجم الفيديو:</label>
                    <select class="form-select" id="size_number" name="size_number" required>
                        <option value="1" {% if env_data.get('SIZE_NUMBER') == '1' %}selected{% endif %}>1 - العرض الأفقي (1920x1080) - ستاندرد</option>
                        <option value="2" {% if env_data.get('SIZE_NUMBER') == '2' %}selected{% endif %}>2 - العرض الرأسي (1080x1920) - شورت</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="voice_number" class="form-label">🔊 رقم الصوت:</label>
                    <input type="number" class="form-control" id="voice_number" name="voice_number" value="{{ env_data.get('VOICE_NUMBER', '1') }}" required>
                </div>
                <div class="mb-3">
                    <label for="speed" class="form-label">⚡️ سرعة الصوت:</label>
                    <input type="range" class="form-range" id="speed" name="speed" min="50" max="200" value="{{ env_data.get('SPEED', '100') }}">
                    <span id="speedValue">{{ (env_data.get('SPEED', '100') | int) / 100 }}</span>
                </div>
                <button type="submit" class="btn btn-primary w-100">💾 حفظ الإعدادات النصية والمرئية</button>
            </form>
        </div>

        <!-- تبويب التحكم بالسكربتات -->
        <div class="form-container">
            <h2 class="mb-3">التحكم بالسكربتات</h2>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>✅ تشغيل</th>
                        <th>📝 اسم السكربت</th>
                        <th>📁 مسار السكربت</th>
                        <th>▶️ تشغيل منفرد</th>
                    </tr>
                </thead>
                <tbody id="scriptTableBody">
                    <!-- سيتم ملء هذا الجدول بالبيانات من JavaScript -->
                </tbody>
            </table>
            <div class="mb-3">
                <label for="start_script" class="form-label">🛫 ابدأ التشغيل من السكربت رقم:</label>
                <select class="form-select" id="start_script" name="start_script">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                </select>
            </div>
            <button class="btn btn-primary w-100" onclick="startScripts()">🚀 تشغيل السكربتات المحددة</button>
            <button class="btn btn-danger w-100 mt-2" onclick="stopScripts()">⏹️ إيقاف</button>
        </div>

        <!-- تبويب سجل العمليات -->
        <div class="form-container">
            <h2 class="mb-3">سجل العمليات</h2>
            <div class="log-area" id="logArea"></div>
            <div class="progress-bar bg-success" id="progressBar" style="width: 0%;"></div>
            <div class="d-flex justify-content-between mt-2">
                <span class="countdown-label" id="countdownLabel"></span>
                <span class="operation-time-label" id="operationTimeLabel">⏰ وقت العملية المستغرق: 00:00:00</span>
            </div>
            <button class="btn btn-secondary w-100 mt-2" onclick="clearLog()">🧹 مسح شاشة الترمينال</button>
        </div>
    </div>

    <!-- إضافة Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // دالة لتحديث قيمة سرعة الصوت
        document.getElementById('speed').addEventListener('input', function () {
            const speedValue = (this.value / 100).toFixed(2);
            document.getElementById('speedValue').textContent = speedValue;
        });

        // دالة لتشغيل السكربتات
        function startScripts() {
            const selectedScripts = [];
            const scriptRows = document.querySelectorAll('#scriptTableBody tr');
            scriptRows.forEach(row => {
                const checkbox = row.querySelector('input[type="checkbox"]');
                if (checkbox.checked) {
                    const scriptName = row.querySelector('td:nth-child(2)').textContent;
                    const scriptPath = row.querySelector('td:nth-child(3)').textContent;
                    selectedScripts.push({ name: scriptName, path: scriptPath });
                }
            });

            if (selectedScripts.length === 0) {
                alert('❗️ لم يتم اختيار أي سكربت للتشغيل.');
                return;
            }

            const startScript = document.getElementById('start_script').value;
            log(`🚀 بدء تشغيل السكربتات من السكربت رقم ${startScript}...`, 'green');

            // هنا يمكنك إضافة كود لإرسال طلب إلى الخادم لتشغيل السكربتات
        }

        // دالة لإيقاف السكربتات
        function stopScripts() {
            log('⏹️ جاري إيقاف التشغيل...', 'orange');
            // هنا يمكنك إضافة كود لإرسال طلب إلى الخادم لإيقاف السكربتات
        }

        // دالة لتسجيل الرسائل في سجل العمليات
        function log(message, color = 'black') {
            const logArea = document.getElementById('logArea');
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span style="color:${color};">${message}</span>`;
            logArea.appendChild(logEntry);
            logArea.scrollTop = logArea.scrollHeight;
        }

        // دالة لمسح سجل العمليات
        function clearLog() {
            document.getElementById('logArea').innerHTML = '';
            log('🧹 تم مسح شاشة الترمينال.', 'grey');
        }

        // دالة لملء جدول السكربتات
        function populateScriptTable() {
            const scripts = [
                { name: "1 TOPICE GENERATE TEXT", path: "D:/YoutubeGen Pro Online/Models/1 TOPICE GENERATE TEXT.py" },
                { name: "2 Prompts", path: "D:/YoutubeGen Pro Online/Models/2 Prompts.py" },
                { name: "3 Generate Images", path: "D:/YoutubeGen Pro Online/Models/3 Generate Images.py" },
                { name: "4 Generate Tashkeel", path: "D:/YoutubeGen Pro Online/Models/4 Generate Tashkeel.py" },
                { name: "5 Generate Audio", path: "D:/YoutubeGen Pro Online/Models/5 Generate Audio.py" },
                { name: "6 Generate Video 1", path: "D:/YoutubeGen Pro Online/Models/6 Generate Video 1.py" },
                { name: "7 Generate Video Translate 2", path: "D:/YoutubeGen Pro Online/Models/7 Generate Video Teranslate 2.py" },
                { name: "8 Generate Video Final 3", path: "D:/YoutubeGen Pro Online/Models/8 Generate Video Final 3.py" },
                { name: "9 UPLOUD VIDEO YOUTUBE", path: "D:/YoutubeGen Pro Online/Models/9 UPLOUD VIDEO YOUTUBE.py" }
            ];

            const scriptTableBody = document.getElementById('scriptTableBody');
            scripts.forEach((script, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td><input type="checkbox" checked></td>
                    <td>${script.name}</td>
                    <td>${script.path}</td>
                    <td><button class="btn btn-sm btn-primary" onclick="runSingleScript(${index})">▶️ تشغيل</button></td>
                `;
                scriptTableBody.appendChild(row);
            });
        }

        // دالة لتشغيل سكربت منفرد
        function runSingleScript(index) {
            const scripts = [
                { name: "1 TOPICE GENERATE TEXT", path: "D:/YoutubeGen Pro Online/Models/1 TOPICE GENERATE TEXT.py" },
                { name: "2 Prompts", path: "D:/YoutubeGen Pro Online/Models/2 Prompts.py" },
                { name: "3 Generate Images", path: "D:/YoutubeGen Pro Online/Models/3 Generate Images.py" },
                { name: "4 Generate Tashkeel", path: "D:/YoutubeGen Pro Online/Models/4 Generate Tashkeel.py" },
                { name: "5 Generate Audio", path: "D:/YoutubeGen Pro Online/Models/5 Generate Audio.py" },
                { name: "6 Generate Video 1", path: "D:/YoutubeGen Pro Online/Models/6 Generate Video 1.py" },
                { name: "7 Generate Video Translate 2", path: "D:/YoutubeGen Pro Online/Models/7 Generate Video Teranslate 2.py" },
                { name: "8 Generate Video Final 3", path: "D:/YoutubeGen Pro Online/Models/8 Generate Video Final 3.py" },
                { name: "9 UPLOUD VIDEO YOUTUBE", path: "D:/YoutubeGen Pro Online/Models/9 UPLOUD VIDEO YOUTUBE.py" }
            ];

            const script = scripts[index];
            log(`🔄 تشغيل السكربت الفردي: ${script.name}`, 'blue');
            // هنا يمكنك إضافة كود لإرسال طلب إلى الخادم لتشغيل السكربت الفردي
        }

        // دالة لتحديث شريط التقدم
        function updateProgressBar(value) {
            const progressBar = document.getElementById('progressBar');
            progressBar.style.width = `${value}%`;
        }

        // دالة لتحديث العد التنازلي
        function updateCountdown(seconds) {
            const countdownLabel = document.getElementById('countdownLabel');
            countdownLabel.textContent = `⏳ إعادة التشغيل بعد: ${formatTime(seconds)}`;
        }

        // دالة لتنسيق الوقت
        function formatTime(seconds) {
            const hrs = Math.floor(seconds / 3600);
            const mins = Math.floor((seconds % 3600) / 60);
            const secs = seconds % 60;
            return `${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
        }

        // دالة لتحديث وقت العملية
        function updateOperationTime(seconds) {
            const operationTimeLabel = document.getElementById('operationTimeLabel');
            operationTimeLabel.textContent = `⏰ وقت العملية المستغرق: ${formatTime(seconds)}`;
        }

        // تشغيل دالة ملء جدول السكربتات عند تحميل الصفحة
        window.onload = function () {
            populateScriptTable();
        };
    </script>
</body>
</html>