Update app.py

app.py

@@ -100,7 +100,7 @@ def create_lesson(segments_state):
             'wrong': f"wrong_{i}.mp4",
             'duration': seg['duration'],
             'options': seg['options'],
-            'correct': seg['correct']
+            'correct': seg['correct']  # Это 0 или 1, не имя файла!
         })
     
     # Сохраняем метаданные
@@ -140,9 +140,14 @@ def generate_player_html(meta_path):
     for segment in metadata['timestamps']:
         idx = segment['index']
         
-        lecture_path = os.path.join(lesson_dir, segment['lecture'])
-        correct_path = os.path.join(lesson_dir, segment['correct'])
-        wrong_path = os.path.join(lesson_dir, segment['wrong'])
+        # Используем правильные имена файлов из метаданных
+        lecture_file = segment['lecture']
+        correct_file = segment['correct']
+        wrong_file = segment['wrong']
+        
+        lecture_path = os.path.join(lesson_dir, lecture_file)
+        correct_path = os.path.join(lesson_dir, correct_file)
+        wrong_path = os.path.join(lesson_dir, wrong_file)
         
         try:
             with open(lecture_path, 'rb') as f:
@@ -162,203 +167,231 @@ def generate_player_html(meta_path):
         'index': seg['index'],
         'duration': seg['duration'],
         'options': seg['options'],
-        'correct': seg['correct']
+        'correct': seg['correct']  # Это целое число (0 или 1), не имя файла
     } for seg in metadata['timestamps']], ensure_ascii=False)
     
     # Создаем словарь с видео для JavaScript
     videos_json = json.dumps(video_data)
     
     html = f"""
-    <style>
-        * {{
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }}
-        
-        .player-wrapper {{
-            width: 100%;
-            max-width: 900px;
-            margin: 20px auto;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        }}
-        
-        .player-container {{
-            position: relative;
-            width: 100%;
-            background: #000;
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
-        }}
-        
-        #mainVideo {{
-            width: 100%;
-            height: auto;
-            display: block;
-            min-height: 400px;
-        }}
-        
-        .quiz-overlay {{
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 50%, transparent 100%);
-            padding: 40px 30px 30px;
-            display: none;
-        }}
-        
-        .quiz-question {{
-            color: #ffffff;
-            font-size: 20px;
-            font-weight: 600;
-            text-align: center;
-            margin-bottom: 20px;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
-        }}
-        
-        .quiz-options {{
-            display: flex;
-            gap: 15px;
-            flex-direction: column;
-            max-width: 600px;
-            margin: 0 auto;
-        }}
-        
-        .option-btn {{
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            padding: 18px 30px;
-            border-radius: 12px;
-            font-size: 17px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.3s;
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-        }}
-        
-        .option-btn:hover {{
-            transform: translateY(-3px);
-            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
-        }}
-        
-        .option-btn:active {{
-            transform: translateY(-1px);
-        }}
-        
-        .timer {{
-            color: #ffd700;
-            font-size: 15px;
-            font-weight: 600;
-            text-align: center;
-            margin-top: 15px;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
-        }}
-        
-        .timer.warning {{
-            color: #ff6b6b;
-        }}
-        
-        .progress-bar {{
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 4px;
-            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s linear;
-            z-index: 10;
-        }}
-        
-        .segment-info {{
-            position: absolute;
-            top: 15px;
-            right: 15px;
-            background: rgba(0,0,0,0.7);
-            color: white;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 14px;
-            font-weight: 500;
-            z-index: 10;
-        }}
-        
-        .loading {{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            color: white;
-            font-size: 18px;
-            display: none;
-            z-index: 20;
-        }}
-        
-        .controls {{
-            padding: 15px;
-            background: #1a1a1a;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }}
-        
-        .play-pause-btn {{
-            background: #667eea;
-            border: none;
-            color: white;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s;
-            font-size: 16px;
-        }}
-        
-        .play-pause-btn:hover {{
-            background: #764ba2;
-            transform: scale(1.1);
-        }}
-        
-        .time-display {{
-            color: #ffffff;
-            font-size: 14px;
-            font-weight: 500;
-        }}
-    </style>
-    
-    <div class="player-wrapper">
-        <div class="player-container">
-            <div class="progress-bar" id="progressBar"></div>
-            <div class="segment-info" id="segmentInfo">Сегмент 1 из {metadata['total_segments']}</div>
-            <div class="loading" id="loading">Загрузка...</div>
-            
-            <video id="mainVideo" preload="auto">
-                Ваш браузер не поддерживает видео
-            </video>
-            
-            <div class="quiz-overlay" id="quizOverlay">
-                <div class="quiz-question">Выберите правильный ответ:</div>
-                <div class="quiz-options">
-                    <button class="option-btn" id="option1"></button>
-                    <button class="option-btn" id="option2"></button>
+    <!DOCTYPE html>
+    <html lang="ru">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Интерактивный Урок</title>
+        <style>
+            * {{
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }}
+            
+            body {{
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                background: #f5f5f5;
+                padding: 20px;
+            }}
+            
+            .player-wrapper {{
+                width: 100%;
+                max-width: 900px;
+                margin: 0 auto;
+                background: white;
+                border-radius: 16px;
+                overflow: hidden;
+                box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            }}
+            
+            .player-container {{
+                position: relative;
+                width: 100%;
+                background: #000;
+                overflow: hidden;
+            }}
+            
+            #mainVideo {{
+                width: 100%;
+                height: auto;
+                display: block;
+                max-height: 600px;
+            }}
+            
+            .quiz-overlay {{
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 50%, transparent 100%);
+                padding: 40px 30px 30px;
+                display: none;
+            }}
+            
+            .quiz-question {{
+                color: #ffffff;
+                font-size: 22px;
+                font-weight: 600;
+                text-align: center;
+                margin-bottom: 25px;
+                text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+            }}
+            
+            .quiz-options {{
+                display: flex;
+                gap: 15px;
+                flex-direction: column;
+                max-width: 600px;
+                margin: 0 auto;
+            }}
+            
+            .option-btn {{
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                color: white;
+                border: none;
+                padding: 20px 35px;
+                border-radius: 12px;
+                font-size: 18px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s;
+                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+            }}
+            
+            .option-btn:hover {{
+                transform: translateY(-3px);
+                box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
+            }}
+            
+            .option-btn:active {{
+                transform: translateY(-1px);
+            }}
+            
+            .timer {{
+                color: #ffd700;
+                font-size: 16px;
+                font-weight: 600;
+                text-align: center;
+                margin-top: 20px;
+                text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+            }}
+            
+            .timer.warning {{
+                color: #ff6b6b;
+                animation: pulse 1s infinite;
+            }}
+            
+            @keyframes pulse {{
+                0% {{ opacity: 1; }}
+                50% {{ opacity: 0.7; }}
+                100% {{ opacity: 1; }}
+            }}
+            
+            .progress-bar {{
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 4px;
+                background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+                width: 0%;
+                transition: width 0.1s linear;
+                z-index: 10;
+            }}
+            
+            .segment-info {{
+                position: absolute;
+                top: 15px;
+                right: 15px;
+                background: rgba(0,0,0,0.7);
+                color: white;
+                padding: 8px 16px;
+                border-radius: 20px;
+                font-size: 14px;
+                font-weight: 500;
+                z-index: 10;
+            }}
+            
+            .loading {{
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: white;
+                font-size: 18px;
+                display: none;
+                z-index: 20;
+            }}
+            
+            .controls {{
+                padding: 20px;
+                background: #1a1a1a;
+                display: flex;
+                align-items: center;
+                gap: 20px;
+            }}
+            
+            .play-pause-btn {{
+                background: #667eea;
+                border: none;
+                color: white;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.3s;
+                font-size: 18px;
+            }}
+            
+            .play-pause-btn:hover {{
+                background: #764ba2;
+                transform: scale(1.1);
+            }}
+            
+            .time-display {{
+                color: #ffffff;
+                font-size: 16px;
+                font-weight: 500;
+                flex-grow: 1;
+            }}
+            
+            .lesson-progress {{
+                color: #aaa;
+                font-size: 14px;
+                margin-left: 10px;
+            }}
+        </style>
+    </head>
+    <body>
+        <div class="player-wrapper">
+            <div class="player-container">
+                <div class="progress-bar" id="progressBar"></div>
+                <div class="segment-info" id="segmentInfo">Сегмент 1 из {metadata['total_segments']}</div>
+                <div class="loading" id="loading">Загрузка...</div>
+                
+                <video id="mainVideo" preload="auto">
+                    Ваш браузер не поддерживает видео
+                </video>
+                
+                <div class="quiz-overlay" id="quizOverlay">
+                    <div class="quiz-question">Выберите правильный ответ:</div>
+                    <div class="quiz-options">
+                        <button class="option-btn" id="option1"></button>
+                        <button class="option-btn" id="option2"></button>
+                    </div>
+                    <div class="timer" id="timer">⏱ Времени осталось: <span id="timeLeft">7</span> сек</div>
                 </div>
-                <div class="timer" id="timer">⏱ Времени осталось: <span id="timeLeft">7</span> сек</div>
+            </div>
+            
+            <div class="controls">
+                <button class="play-pause-btn" id="playPauseBtn">▶</button>
+                <div class="time-display" id="timeDisplay">0:00</div>
+                <div class="lesson-progress" id="lessonProgress">1/{metadata['total_segments']}</div>
             </div>
         </div>
         
-        <div class="controls">
-            <button class="play-pause-btn" id="playPauseBtn">▶</button>
-            <div class="time-display" id="timeDisplay">0:00</div>
-        </div>
-    </div>
-    
-    <script>
-        (function() {{
+        <script>
             const mainVideo = document.getElementById('mainVideo');
             const quizOverlay = document.getElementById('quizOverlay');
             const option1Btn = document.getElementById('option1');
@@ -370,6 +403,7 @@ def generate_player_html(meta_path):
             const playPauseBtn = document.getElementById('playPauseBtn');
             const timeDisplay = document.getElementById('timeDisplay');
             const timerElement = document.getElementById('timer');
+            const lessonProgress = document.getElementById('lessonProgress');
             
             const segments = {segments_json};
             const videosBase64 = {videos_json};
@@ -389,6 +423,7 @@ def generate_player_html(meta_path):
             
             function updateSegmentInfo() {{
                 segmentInfo.textContent = 'Сегмент ' + (currentSegmentIndex + 1) + ' из ' + segments.length;
+                lessonProgress.textContent = (currentSegmentIndex + 1) + '/' + segments.length;
             }}
             
             function showLoading() {{
@@ -487,6 +522,7 @@ def generate_player_html(meta_path):
                 if (currentSegmentIndex >= segments.length) {{
                     alert('🎉 Поздравляем! Вы завершили урок!');
                     currentSegmentIndex = 0;
+                    updateSegmentInfo();
                     return;
                 }}
                 
@@ -509,6 +545,12 @@ def generate_player_html(meta_path):
                 
                 const isCorrect = choice === segment.correct;
                 
+                if (isCorrect) {{
+                    console.log('✅ Правильный ответ!');
+                }} else {{
+                    console.log('❌ Неправильный ответ');
+                }}
+                
                 playReaction(isCorrect).then(function() {{
                     currentSegmentIndex++;
                     
@@ -574,14 +616,15 @@ def generate_player_html(meta_path):
             
             // Запускаем первый сегмент
             loadNextSegment();
-        }})();
-    </script>
+        </script>
+    </body>
+    </html>
     """
     
     return html
 
 # Создаем интерфейс
-with gr.Blocks(title="Интерактивный Урок") as demo:
+with gr.Blocks(title="Интерактивный Урок", theme=gr.themes.Soft()) as demo:
     gr.Markdown("""
     # 🎓 Интерактивный Урок (Coursera-style)
     
@@ -594,6 +637,8 @@ with gr.Blocks(title="Интерактивный Урок") as demo:
     3. Нажмите **"Добавить Сегмент"** (повторите для каждого фрагмента)
     4. Когда все сегменты добавлены, нажмите **"Создать Урок"**
     5. Нажмите **"Запустить Плеер"** для прохождения урока
+    
+    ---
     """)
     
     # Состояния
@@ -601,31 +646,63 @@ with gr.Blocks(title="Интерактивный Урок") as demo:
     meta_state = gr.State(None)
     
     with gr.Tab("📝 Создание Урока"):
-        gr.Markdown("### Добавление сегмента")
-        
         with gr.Row():
-            with gr.Column(scale=1):
-                lecture_input = gr.Video(label="🎥 Видео Лекции")
-                correct_input = gr.Video(label="✅ Реакция: Правильный ответ")
-                wrong_input = gr.Video(label="❌ Реакция: Неправильный ответ")
+            with gr.Column(scale=2):
+                gr.Markdown("### 1. Загрузите видео")
+                lecture_input = gr.Video(
+                    label="🎥 Видео Лекции",
+                    info="Основное видео лекции с вопросом в конце"
+                )
+                with gr.Row():
+                    correct_input = gr.Video(
+                        label="✅ Реакция: Правильный ответ",
+                        info="Короткое видео реакции лектора на правильный ответ"
+                    )
+                    wrong_input = gr.Video(
+                        label="❌ Реакция: Неправильный ответ",
+                        info="Короткое видео реакции лектора на неправильный ответ"
+                    )
             
             with gr.Column(scale=1):
+                gr.Markdown("### 2. Настройте вопрос")
                 option1_input = gr.Textbox(
-                    label="Вариант 1",
-                    placeholder="Например: Париж"
+                    label="Вариант ответа 1",
+                    placeholder="Например: Париж",
+                    info="Первый вариант ответа"
                 )
                 option2_input = gr.Textbox(
-                    label="Вариант 2",
-                    placeholder="Например: Лондон"
+                    label="Вариант ответа 2",
+                    placeholder="Например: Лондон",
+                    info="Второй вариант ответа"
                 )
                 correct_radio = gr.Radio(
                     ["Вариант 1", "Вариант 2"],
                     label="✅ Правильный вариант",
-                    value="Вариант 1"
+                    value="Вариант 1",
+                    info="Выберите правильный вариант ответа"
+                )
+                
+                add_btn = gr.Button(
+                    "➕ Добавить Сегмент",
+                    variant="primary",
+                    size="lg"
                 )
         
-        add_btn = gr.Button("➕ Добавить Сегмент", variant="primary")
-        segments_info = gr.Markdown("*Нет добавленных сегментов*")
+        gr.Markdown("---")
+        
+        segments_info = gr.Markdown(
+            "### 📋 Добавленные сегменты\n\n*Нет добавленных сегментов*"
+        )
+        
+        gr.Markdown("---")
+        
+        with gr.Row():
+            create_btn = gr.Button(
+                "🎬 Создать Урок",
+                variant="primary",
+                size="lg"
+            )
+            create_status = gr.Markdown("**Статус:** Урок еще не создан")
         
         add_btn.click(
             fn=add_segment,
@@ -633,11 +710,6 @@ with gr.Blocks(title="Интерактивный Урок") as demo:
             outputs=[segments_state, segments_info, lecture_input, correct_input, wrong_input]
         )
         
-        gr.Markdown("---")
-        
-        create_btn = gr.Button("🎬 Создать Урок", variant="primary")
-        create_status = gr.Markdown("")
-        
         create_btn.click(
             fn=create_lesson,
             inputs=[segments_state],
@@ -647,22 +719,75 @@ with gr.Blocks(title="Интерактивный Урок") as demo:
     with gr.Tab("▶️ Прохождение Урока"):
         gr.Markdown("""
         ### Как проходить урок:
-        - 🎬 Видео проигрывается автоматически
+        
+        - 🎬 **Видео проигрывается автоматически**
         - ⏱ **За 7 секунд** до конца появятся кнопки с вариантами ответа
-        - 🎯 Выберите правильный ответ до окончания времени
-        - ✅ После ответа покажется видео реакции лектора
-        - ➡️ Затем автоматически начнется следующий сегмент
-        - 🏆 Пройдите все сегменты до конца!
+        - 🎯 **Выберите правильный ответ** до окончания времени (7 секунд)
+        - ✅ **После ответа** покажется видео реакции лектора
+        - ➡️ **Затем автоматически** начнется следующий сегмент
+        - 🏆 **Пройдите все сегменты** до конца!
+        
+        ---
         """)
         
-        start_btn = gr.Button("🚀 Запустить Плеер", variant="primary")
-        player_html = gr.HTML()
+        start_btn = gr.Button(
+            "🚀 Запустить Плеер",
+            variant="primary",
+            size="lg"
+        )
+        
+        player_html = gr.HTML(
+            value="<div style='text-align: center; padding: 40px; color: #666;'>Нажмите 'Запустить Плеер', чтобы начать урок</div>"
+        )
         
         start_btn.click(
             fn=generate_player_html,
             inputs=[meta_state],
             outputs=[player_html]
         )
+    
+    with gr.Tab("ℹ️ Информация"):
+        gr.Markdown("""
+        ### 📚 О приложении
+        
+        **Интерактивный Урок** - это система для создания и прохождения образовательных видеоуроков в стиле Coursera.
+        
+        ### ✨ Особенности:
+        
+        - 🎥 **Интерактивные видео** с вопросами
+        - ⏱ **Таймер ответа** (7 секунд)
+        - ✅ **Мгновенная обратная связь** через видео реакции
+        - 📊 **Пошаговое прохождение** уроков
+        - 🎨 **Современный интерфейс** с анимациями
+        
+        ### 🛠 Технические требования:
+        
+        - Видео в формате **MP4**
+        - Размер каждого видео: **до 500 MB**
+        - **Оптимальная длина** видео лекции: 30-120 секунд
+        - **Оптимальная длина** видео реакций: 5-15 секунд
+        
+        ### 🔧 Установка зависимостей:
+        
+        ```bash
+        pip install gradio moviepy
+        ```
+        
+        Для работы с видео также рекомендуется установить ffmpeg.
+        
+        ### 📁 Структура урока:
+        
+        1. **Видео лекции** - основной контент
+        2. **Видео реакции на правильный ответ**
+        3. **Видео реакции на неправильный ответ**
+        4. **Варианты ответов** (2 варианта)
+        5. **Правильный ответ** (выбирается при создании)
+        """)
 
 if __name__ == '__main__':
-    demo.launch()
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        debug=True
+    )