Create app.py

app.py

@@ -0,0 +1,668 @@
+import gradio as gr
+import tempfile
+import os
+import json
+import shutil
+import base64
+from pathlib import Path
+
+try:
+    from moviepy.editor import VideoFileClip
+    MOVIEPY_AVAILABLE = True
+except ImportError:
+    print("MoviePy не установлен, используем альтернативный метод")
+    MOVIEPY_AVAILABLE = False
+
+# Глобальная переменная для хранения созданных уроков
+current_lesson_dir = None
+
+def add_segment(lecture_video, correct_video, wrong_video, option1_text, option2_text, correct_option, segments_state):
+    """Добавляет сегмент: видео лекции + видео реакций + текст вариантов"""
+    if lecture_video is None or correct_video is None or wrong_video is None:
+        return segments_state, "⚠️ Загрузите все три видео (лекция, правильная реакция, неправильная реакция)", None, None, None
+    
+    if not option1_text or not option2_text:
+        return segments_state, "⚠️ Введите оба варианта ответа", None, None, None
+    
+    if correct_option is None:
+        return segments_state, "⚠️ Выберите правильный вариант", None, None, None
+    
+    # Получаем длительность лекции
+    try:
+        if MOVIEPY_AVAILABLE:
+            clip = VideoFileClip(lecture_video)
+            duration = clip.duration
+            clip.close()
+        else:
+            # Альтернативный метод через subprocess
+            import subprocess
+            result = subprocess.run(
+                ['ffprobe', '-v', 'error', '-show_entries', 'format=duration',
+                 '-of', 'default=noprint_wrappers=1:nokey=1', lecture_video],
+                stdout=subprocess.PIPE,
+                stderr=subprocess.STDOUT
+            )
+            duration = float(result.stdout)
+    except Exception as e:
+        print(f"Ошибка получения длительности: {e}")
+        duration = 10  # Значение по умолчанию
+    
+    # Сохраняем оригинальные пути
+    new_segment = {
+        'lecture_path': lecture_video,
+        'correct_path': correct_video,
+        'wrong_path': wrong_video,
+        'options': [option1_text, option2_text],
+        'correct': 0 if correct_option == "Вариант 1" else 1,
+        'duration': duration
+    }
+    
+    segments_state.append(new_segment)
+    
+    info = f"✅ **Всего сегментов: {len(segments_state)}**\n\n"
+    for i, seg in enumerate(segments_state, 1):
+        info += f"**Сегмент {i}:** ({seg['duration']:.1f} сек)\n"
+        info += f"- 🎯 Вариант 1: {seg['options'][0]}\n"
+        info += f"- 🎯 Вариант 2: {seg['options'][1]}\n"
+        info += f"- ✅ Правильный: Вариант {seg['correct'] + 1}\n\n"
+    
+    # Очищаем поля ввода
+    return segments_state, info, None, None, None
+
+def create_lesson(segments_state):
+    """Подготавливает урок - копирует файлы и создает метаданные"""
+    global current_lesson_dir
+    
+    if not segments_state:
+        return "⚠️ Нет добавленных сегментов", None
+    
+    # Создаем временную директорию для урока
+    lesson_dir = tempfile.mkdtemp(prefix="lesson_")
+    current_lesson_dir = lesson_dir  # Сохраняем глобально
+    
+    timestamps = []
+    
+    for i, seg in enumerate(segments_state):
+        # Копируем видео в директорию урока
+        lecture_new = os.path.join(lesson_dir, f"lecture_{i}.mp4")
+        correct_new = os.path.join(lesson_dir, f"correct_{i}.mp4")
+        wrong_new = os.path.join(lesson_dir, f"wrong_{i}.mp4")
+        
+        # Копируем файлы
+        shutil.copy2(seg['lecture_path'], lecture_new)
+        shutil.copy2(seg['correct_path'], correct_new)
+        shutil.copy2(seg['wrong_path'], wrong_new)
+        
+        timestamps.append({
+            'index': i,
+            'lecture': f"lecture_{i}.mp4",  # Только имя файла
+            'correct': f"correct_{i}.mp4",
+            'wrong': f"wrong_{i}.mp4",
+            'duration': seg['duration'],
+            'options': seg['options'],
+            'correct': seg['correct']
+        })
+    
+    # Сохраняем метаданные
+    metadata = {
+        'timestamps': timestamps,
+        'total_segments': len(segments_state),
+        'lesson_dir': lesson_dir  # Сохраняем путь к директории
+    }
+    
+    meta_path = os.path.join(lesson_dir, 'metadata.json')
+    with open(meta_path, 'w', encoding='utf-8') as f:
+        json.dump(metadata, f, ensure_ascii=False, indent=2)
+    
+    total_duration = sum(seg['duration'] for seg in segments_state)
+    
+    return (f"✅ Урок создан!\n- Всего сегментов: {len(segments_state)}\n- Примерная длительность: {total_duration:.1f} сек\n- Путь: {lesson_dir}",
+            meta_path)
+
+def generate_player_html(meta_path):
+    """Генерирует HTML плеер с интерактивными кнопками"""
+    global current_lesson_dir
+    
+    if not meta_path or not os.path.exists(meta_path):
+        return "<p style='color: red; text-align: center; padding: 40px;'>⚠️ Сначала создайте урок!</p>"
+    
+    with open(meta_path, 'r', encoding='utf-8') as f:
+        metadata = json.load(f)
+    
+    # Используем сохраненную директорию
+    lesson_dir = metadata.get('lesson_dir', current_lesson_dir)
+    if not lesson_dir or not os.path.exists(lesson_dir):
+        return "<p style='color: red; text-align: center; padding: 40px;'>⚠️ Файлы урока не найдены. Создайте урок заново.</p>"
+    
+    # Конвертируем все видео в base64
+    video_data = {}
+    
+    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'])
+        
+        try:
+            with open(lecture_path, 'rb') as f:
+                video_data[f'lecture_{idx}'] = base64.b64encode(f.read()).decode()
+            
+            with open(correct_path, 'rb') as f:
+                video_data[f'correct_{idx}'] = base64.b64encode(f.read()).decode()
+            
+            with open(wrong_path, 'rb') as f:
+                video_data[f'wrong_{idx}'] = base64.b64encode(f.read()).decode()
+        except Exception as e:
+            print(f"Ошибка чтения файла: {e}")
+            return f"<p style='color: red; text-align: center; padding: 40px;'>⚠️ Ошибка загрузки видео: {str(e)}</p>"
+    
+    # Создаем структуру данных для JavaScript
+    segments_json = json.dumps([{
+        'index': seg['index'],
+        'duration': seg['duration'],
+        'options': seg['options'],
+        'correct': seg['correct']
+    } 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>
+                </div>
+                <div class="timer" id="timer">⏱ Времени осталось: <span id="timeLeft">7</span> сек</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() {{
+            const mainVideo = document.getElementById('mainVideo');
+            const quizOverlay = document.getElementById('quizOverlay');
+            const option1Btn = document.getElementById('option1');
+            const option2Btn = document.getElementById('option2');
+            const timerDisplay = document.getElementById('timeLeft');
+            const progressBar = document.getElementById('progressBar');
+            const segmentInfo = document.getElementById('segmentInfo');
+            const loadingDiv = document.getElementById('loading');
+            const playPauseBtn = document.getElementById('playPauseBtn');
+            const timeDisplay = document.getElementById('timeDisplay');
+            const timerElement = document.getElementById('timer');
+            
+            const segments = {segments_json};
+            const videosBase64 = {videos_json};
+            
+            let currentSegmentIndex = 0;
+            let isPlayingReaction = false;
+            let quizShown = false;
+            let answered = false;
+            let timerInterval = null;
+            let timeRemaining = 7;
+            
+            function formatTime(seconds) {{
+                const mins = Math.floor(seconds / 60);
+                const secs = Math.floor(seconds % 60);
+                return mins + ':' + (secs < 10 ? '0' : '') + secs;
+            }}
+            
+            function updateSegmentInfo() {{
+                segmentInfo.textContent = 'Сегмент ' + (currentSegmentIndex + 1) + ' из ' + segments.length;
+            }}
+            
+            function showLoading() {{
+                loadingDiv.style.display = 'block';
+            }}
+            
+            function hideLoading() {{
+                loadingDiv.style.display = 'none';
+            }}
+            
+            function loadVideo(base64Data) {{
+                return new Promise(function(resolve, reject) {{
+                    showLoading();
+                    mainVideo.src = 'data:video/mp4;base64,' + base64Data;
+                    mainVideo.load();
+                    
+                    mainVideo.onloadeddata = function() {{
+                        hideLoading();
+                        resolve();
+                    }};
+                    
+                    mainVideo.onerror = function() {{
+                        hideLoading();
+                        reject(new Error('Ошибка загрузки видео'));
+                    }};
+                }});
+            }}
+            
+            function showQuiz(segment) {{
+                quizOverlay.style.display = 'block';
+                option1Btn.textContent = segment.options[0];
+                option2Btn.textContent = segment.options[1];
+                quizShown = true;
+                answered = false;
+                timeRemaining = 7;
+                timerDisplay.textContent = timeRemaining;
+                
+                if (timerInterval) {{
+                    clearInterval(timerInterval);
+                }}
+                
+                timerInterval = setInterval(function() {{
+                    timeRemaining--;
+                    timerDisplay.textContent = timeRemaining;
+                    
+                    if (timeRemaining <= 3) {{
+                        timerElement.classList.add('warning');
+                    }} else {{
+                        timerElement.classList.remove('warning');
+                    }}
+                    
+                    if (timeRemaining <= 0) {{
+                        clearInterval(timerInterval);
+                        if (!answered) {{
+                            handleAnswer(-1, segment);
+                        }}
+                    }}
+                }}, 1000);
+            }}
+            
+            function hideQuiz() {{
+                quizOverlay.style.display = 'none';
+                quizShown = false;
+                timerElement.classList.remove('warning');
+                if (timerInterval) {{
+                    clearInterval(timerInterval);
+                    timerInterval = null;
+                }}
+            }}
+            
+            function playReaction(isCorrect) {{
+                return new Promise(function(resolve) {{
+                    isPlayingReaction = true;
+                    hideQuiz();
+                    
+                    const segment = segments[currentSegmentIndex];
+                    const reactionKey = isCorrect ? ('correct_' + segment.index) : ('wrong_' + segment.index);
+                    
+                    loadVideo(videosBase64[reactionKey]).then(function() {{
+                        mainVideo.play();
+                        
+                        mainVideo.onended = function() {{
+                            isPlayingReaction = false;
+                            mainVideo.onended = null;
+                            resolve();
+                        }};
+                    }}).catch(function(error) {{
+                        console.error('Ошибка воспроизведения реакции:', error);
+                        isPlayingReaction = false;
+                        resolve();
+                    }});
+                }});
+            }}
+            
+            function loadNextSegment() {{
+                if (currentSegmentIndex >= segments.length) {{
+                    alert('🎉 Поздравляем! Вы завершили урок!');
+                    currentSegmentIndex = 0;
+                    return;
+                }}
+                
+                const segment = segments[currentSegmentIndex];
+                const lectureKey = 'lecture_' + segment.index;
+                
+                loadVideo(videosBase64[lectureKey]).then(function() {{
+                    updateSegmentInfo();
+                    mainVideo.play();
+                    playPauseBtn.textContent = '⏸';
+                }}).catch(function(error) {{
+                    console.error('Ошибка загрузки лекции:', error);
+                    alert('Ошибка загрузки видео');
+                }});
+            }}
+            
+            function handleAnswer(choice, segment) {{
+                if (answered) return;
+                answered = true;
+                
+                const isCorrect = choice === segment.correct;
+                
+                playReaction(isCorrect).then(function() {{
+                    currentSegmentIndex++;
+                    
+                    if (currentSegmentIndex < segments.length) {{
+                        loadNextSegment();
+                    }} else {{
+                        alert('🎉 Поздравляем! Вы завершили урок!');
+                    }}
+                }});
+            }}
+            
+            option1Btn.addEventListener('click', function() {{
+                if (currentSegmentIndex >= 0 && currentSegmentIndex < segments.length && !answered) {{
+                    handleAnswer(0, segments[currentSegmentIndex]);
+                }}
+            }});
+            
+            option2Btn.addEventListener('click', function() {{
+                if (currentSegmentIndex >= 0 && currentSegmentIndex < segments.length && !answered) {{
+                    handleAnswer(1, segments[currentSegmentIndex]);
+                }}
+            }});
+            
+            mainVideo.addEventListener('timeupdate', function() {{
+                if (isPlayingReaction) return;
+                
+                const currentTime = mainVideo.currentTime;
+                const duration = mainVideo.duration;
+                
+                if (!isNaN(currentTime)) {{
+                    timeDisplay.textContent = formatTime(currentTime);
+                }}
+                
+                if (duration > 0 && !isNaN(duration)) {{
+                    const progress = (currentTime / duration) * 100;
+                    progressBar.style.width = progress + '%';
+                    
+                    const timeLeft = duration - currentTime;
+                    
+                    if (!quizShown && timeLeft <= 7 && timeLeft > 0 && !answered) {{
+                        showQuiz(segments[currentSegmentIndex]);
+                    }}
+                }}
+            }});
+            
+            playPauseBtn.addEventListener('click', function() {{
+                if (mainVideo.paused) {{
+                    mainVideo.play();
+                    playPauseBtn.textContent = '⏸';
+                }} else {{
+                    mainVideo.pause();
+                    playPauseBtn.textContent = '▶';
+                }}
+            }});
+            
+            mainVideo.addEventListener('play', function() {{
+                playPauseBtn.textContent = '⏸';
+            }});
+            
+            mainVideo.addEventListener('pause', function() {{
+                playPauseBtn.textContent = '▶';
+            }});
+            
+            // Запускаем первый сегмент
+            loadNextSegment();
+        }})();
+    </script>
+    """
+    
+    return html
+
+# Создаем интерфейс
+with gr.Blocks(title="Интерактивный Урок") as demo:
+    gr.Markdown("""
+    # 🎓 Интерактивный Урок (Coursera-style)
+    
+    ### Инструкция:
+    1. **Загрузите 3 видео для каждого сегмента:**
+       - 🎥 Видео лекции (в конце которого задается вопрос)
+       - ✅ Видео реакции на правильный ответ
+       - ❌ Видео реакции на неправильный ответ
+    2. **Введите варианты ответов** и выберите правильный
+    3. Нажмите **"Добавить Сегмент"** (повторите для каждого фрагмента)
+    4. Когда все сегменты добавлены, нажмите **"Создать Урок"**
+    5. Нажмите **"Запустить Плеер"** для прохождения урока
+    """)
+    
+    # Состояния
+    segments_state = gr.State([])
+    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=1):
+                option1_input = gr.Textbox(
+                    label="Вариант 1",
+                    placeholder="Например: Париж"
+                )
+                option2_input = gr.Textbox(
+                    label="Вариант 2",
+                    placeholder="Например: Лондон"
+                )
+                correct_radio = gr.Radio(
+                    ["Вариант 1", "Вариант 2"],
+                    label="✅ Правильный вариант",
+                    value="Вариант 1"
+                )
+        
+        add_btn = gr.Button("➕ Добавить Сегмент", variant="primary")
+        segments_info = gr.Markdown("*Нет добавленных сегментов*")
+        
+        add_btn.click(
+            fn=add_segment,
+            inputs=[lecture_input, correct_input, wrong_input, option1_input, option2_input, correct_radio, segments_state],
+            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],
+            outputs=[create_status, meta_state]
+        )
+    
+    with gr.Tab("▶️ Прохождение Урока"):
+        gr.Markdown("""
+        ### Как проходить урок:
+        - 🎬 Видео проигрывается автоматически
+        - ⏱ **За 7 секунд** до конца появятся кнопки с вариантами ответа
+        - 🎯 Выберите правильный ответ до окончания времени
+        - ✅ После ответа покажется видео реакции лектора
+        - ➡️ Затем автоматически начнется следующий сегмент
+        - 🏆 Пройдите все сегменты до конца!
+        """)
+        
+        start_btn = gr.Button("🚀 Запустить Плеер", variant="primary")
+        player_html = gr.HTML()
+        
+        start_btn.click(
+            fn=generate_player_html,
+            inputs=[meta_state],
+            outputs=[player_html]
+        )
+
+if __name__ == '__main__':
+    demo.launch()