Initial deployment

README.md

@@ -1,14 +0,0 @@
----
-title: SimpleViva
-emoji: 👁
-colorFrom: blue
-colorTo: indigo
-sdk: gradio
-sdk_version: 6.0.1
-app_file: app.py
-pinned: false
-license: apache-2.0
-short_description: Anatomy Viva verse
-----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,320 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+import json
+import time
+import base64
+import io
+import os
+from typing import Dict, Optional
+import torch
+import numpy as np
+from scipy.io.wavfile import write
+
+# Initialize FastAPI app
+app = FastAPI(title="Anatomy Viva Voice App", version="1.0.0")
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class FreeVoiceTTS:
+    def __init__(self):
+        self.model = None
+        self.device = "cpu"
+    
+    def load_silero_tts(self):
+        """Load Silero TTS - lightweight and reliable"""
+        try:
+            import torch
+            
+            device = torch.device('cpu')
+            torch.set_num_threads(4)
+            
+            model, example_text = torch.hub.load(
+                repo_or_dir='snakers4/silero-models',
+                model='silero_tts',
+                language='en',
+                speaker='v3_en'
+            )
+            self.silero_model = model
+            return True
+        except Exception as e:
+            print(f"Silero TTS loading failed: {e}")
+            return False
+    
+    def text_to_speech_silero(self, text: str) -> bytes:
+        """Convert text to speech using Silero TTS"""
+        try:
+            if not hasattr(self, 'silero_model'):
+                if not self.load_silero_tts():
+                    raise Exception("Silero TTS not available")
+            
+            # Generate audio using Silero
+            audio = self.silero_model.apply_tts(
+                text=text,
+                speaker='en_0',  # English female voice
+                sample_rate=24000
+            )
+            
+            # Convert to bytes
+            audio_buffer = io.BytesIO()
+            write(audio_buffer, 24000, (audio * 32767).numpy().astype(np.int16))
+            
+            return audio_buffer.getvalue()
+            
+        except Exception as e:
+            print(f"Silero TTS failed: {e}")
+            return self.generate_silence()
+    
+    def generate_silence(self) -> bytes:
+        """Generate 1 second of silence as fallback"""
+        silence = np.zeros(24000, dtype=np.int16)
+        audio_buffer = io.BytesIO()
+        write(audio_buffer, 24000, silence)
+        return audio_buffer.getvalue()
+
+# Initialize TTS
+tts_engine = FreeVoiceTTS()
+
+class AnatomyProfessor:
+    def __init__(self):
+        self.current_topic = None
+        self.conversation_history = []
+        self.question_bank = self._initialize_question_bank()
+    
+    def _initialize_question_bank(self):
+        return {
+            "upper_limb": [
+                {
+                    "question": "Describe the course and distribution of the median nerve from its origin to the hand.",
+                    "key_points": ["brachial plexus roots C5-T1", "medial and lateral cords", "carpal tunnel", "LOAF muscles"],
+                    "follow_up": "What clinical condition results from median nerve compression at the wrist?",
+                    "difficulty": "medium"
+                },
+                {
+                    "question": "Explain the brachial plexus in detail, including its major branches.",
+                    "key_points": ["roots, trunks, divisions, cords, branches", "mnemonic: Real Texans Drink Cold Beer", "musculocutaneous, axillary, radial, median, ulnar nerves"],
+                    "follow_up": "Which cord of the brachial plexus is most vulnerable in shoulder dislocations?",
+                    "difficulty": "hard"
+                },
+                {
+                    "question": "What are the muscles of the rotator cuff and their functions?",
+                    "key_points": ["supraspinatus", "infraspinatus", "teres minor", "subscapularis", "SITS mnemonic"],
+                    "follow_up": "Which rotator cuff muscle is most commonly injured?",
+                    "difficulty": "medium"
+                }
+            ],
+            "lower_limb": [
+                {
+                    "question": "Trace the course of the sciatic nerve from its origin to its terminal branches.",
+                    "key_points": ["L4-S3 roots", "passes through greater sciatic foramen", "divides into tibial and common fibular nerves", "innervates hamstrings"],
+                    "follow_up": "What are the clinical manifestations of sciatic nerve injury?",
+                    "difficulty": "medium"
+                },
+                {
+                    "question": "Describe the boundaries and contents of the femoral triangle.",
+                    "key_points": ["inguinal ligament", "sartorius", "adductor longus", "femoral nerve, artery, vein", "NAVY arrangement"],
+                    "follow_up": "Why is the femoral triangle important clinically?",
+                    "difficulty": "medium"
+                }
+            ],
+            "cardiology": [
+                {
+                    "question": "Describe the blood supply to the heart and the coronary circulation.",
+                    "key_points": ["left and right coronary arteries", "circumflex artery", "left anterior descending", "coronary sinus"],
+                    "follow_up": "Which coronary artery is most commonly involved in myocardial infarction?",
+                    "difficulty": "medium"
+                },
+                {
+                    "question": "Explain the conduction system of the heart.",
+                    "key_points": ["SA node", "AV node", "bundle of His", "bundle branches", "Purkinje fibers"],
+                    "follow_up": "What is the clinical significance of the AV node?",
+                    "difficulty": "hard"
+                }
+            ],
+            "neuroanatomy": [
+                {
+                    "question": "Describe the blood supply of the brain.",
+                    "key_points": ["internal carotid arteries", "vertebral arteries", "circle of Willis", "anterior, middle, posterior cerebral arteries"],
+                    "follow_up": "What is the clinical consequence of middle cerebral artery occlusion?",
+                    "difficulty": "hard"
+                },
+                {
+                    "question": "Name the twelve cranial nerves and their basic functions.",
+                    "key_points": ["olfactory, optic, oculomotor, trochlear, trigeminal, abducens, facial, vestibulocochlear, glossopharyngeal, vagus, accessory, hypoglossal"],
+                    "follow_up": "Which cranial nerve has the longest intracranial course?",
+                    "difficulty": "medium"
+                }
+            ]
+        }
+    
+    def set_topic(self, topic: str):
+        self.current_topic = topic
+        self.conversation_history = []
+    
+    def get_next_question(self) -> Dict:
+        """Get the next question for the current topic"""
+        if not self.current_topic or self.current_topic not in self.question_bank:
+            return {"error": "Invalid topic selected"}
+        
+        asked_indices = [conv.get("question_index", -1) for conv in self.conversation_history]
+        
+        for i, question_data in enumerate(self.question_bank[self.current_topic]):
+            if i not in asked_indices:
+                return {
+                    "question": question_data["question"],
+                    "question_index": i,
+                    "key_points": question_data["key_points"],
+                    "difficulty": question_data["difficulty"]
+                }
+        
+        return {"question": "You have completed all questions for this topic. Excellent work!", "completed": True}
+    
+    def evaluate_answer(self, question_index: int, student_answer: str) -> Dict:
+        """Evaluate student's answer and provide feedback"""
+        if self.current_topic not in self.question_bank or question_index >= len(self.question_bank[self.current_topic]):
+            return {"error": "Invalid question index"}
+        
+        question_data = self.question_bank[self.current_topic][question_index]
+        
+        # Enhanced evaluation
+        evaluation = self._evaluate_answer_comprehensive(question_data, student_answer)
+        
+        self.conversation_history.append({
+            "question_index": question_index,
+            "question": question_data["question"],
+            "answer": student_answer,
+            "feedback": evaluation["feedback"],
+            "score": evaluation["score"],
+            "timestamp": time.time()
+        })
+        
+        return {
+            "feedback": evaluation["feedback"],
+            "score": evaluation["score"],
+            "next_question": self.get_next_question(),
+            "conversation_history": self.conversation_history
+        }
+    
+    def _evaluate_answer_comprehensive(self, question_data: Dict, answer: str) -> Dict:
+        """Comprehensive answer evaluation"""
+        
+        base_score = self._calculate_comprehensiveness(answer, question_data["key_points"])
+        
+        # Generate appropriate feedback
+        if base_score >= 8:
+            feedback = f"Excellent! You demonstrated thorough understanding. {question_data.get('follow_up', '')}"
+        elif base_score >= 6:
+            feedback = f"Good attempt. You covered main concepts well. {question_data.get('follow_up', 'Consider the clinical applications.')}"
+        else:
+            missed_points = self._get_missed_points(answer, question_data["key_points"])
+            feedback = f"Let me help you improve. Key aspects: {', '.join(missed_points)}. {question_data.get('follow_up', '')}"
+        
+        return {
+            "feedback": feedback,
+            "score": base_score
+        }
+    
+    def _calculate_comprehensiveness(self, answer: str, key_points: list) -> float:
+        """Calculate score based on coverage of key points"""
+        answer_lower = answer.lower()
+        covered_points = sum(1 for point in key_points if any(word in answer_lower for word in point.lower().split()))
+        return min(10, (covered_points / len(key_points)) * 10)
+    
+    def _get_missed_points(self, answer: str, key_points: list) -> list:
+        """Get points that were missed in the answer"""
+        answer_lower = answer.lower()
+        missed = []
+        for point in key_points:
+            if not any(word in answer_lower for word in point.lower().split()):
+                missed.append(point)
+        return missed if missed else key_points[:2]  # Return first two if all covered
+
+# Global professor instance
+professor = AnatomyProfessor()
+
+# Serve the main page
+@app.get("/")
+async def read_index():
+    return FileResponse('static/index.html')
+
+# API Routes
+@app.post("/api/start_session")
+async def start_session(topic: str):
+    """Start a new viva session"""
+    professor.set_topic(topic)
+    first_question = professor.get_next_question()
+    
+    return JSONResponse({
+        "status": "started",
+        "topic": topic,
+        "first_question": first_question,
+        "message": f"Viva session started on {topic}"
+    })
+
+@app.post("/api/text_to_speech")
+async def text_to_speech(text: str):
+    """Convert text to speech using free TTS"""
+    try:
+        audio_data = tts_engine.text_to_speech_silero(text)
+        
+        return JSONResponse({
+            "audio_data": base64.b64encode(audio_data).decode('utf-8'),
+            "text": text,
+            "format": "wav"
+        })
+    
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"TTS failed: {str(e)}")
+
+@app.post("/api/evaluate_answer")
+async def evaluate_answer(question_index: int, answer: str):
+    """Evaluate student's answer"""
+    try:
+        evaluation = professor.evaluate_answer(question_index, answer)
+        return JSONResponse(evaluation)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Evaluation failed: {str(e)}")
+
+@app.get("/api/topics")
+async def get_topics():
+    """Get available anatomy topics"""
+    return JSONResponse({
+        "topics": {
+            "upper_limb": "Upper Limb Anatomy",
+            "lower_limb": "Lower Limb Anatomy", 
+            "cardiology": "Cardiac Anatomy",
+            "neuroanatomy": "Neuroanatomy"
+        }
+    })
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint"""
+    return JSONResponse({"status": "healthy", "timestamp": time.time()})
+
+# Initialize TTS on startup
+@app.on_event("startup")
+async def startup_event():
+    """Initialize TTS models on app startup"""
+    print("Initializing Anatomy Viva App...")
+    success = tts_engine.load_silero_tts()
+    if success:
+        print("Silero TTS initialized successfully")
+    else:
+        print("TTS initialization failed - will use fallbacks")
+
+# For Hugging Face Spaces - they look for this
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

static/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anatomy Viva Voce - Hugging Face</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <h1>🧠 Anatomy Viva Voce Simulator</h1>
+            <p>Practice medical anatomy with AI Professor - Deployed on Hugging Face</p>
+        </header>
+
+        <div class="topic-selection" id="topicSelection">
+            <h2>Select Anatomy Topic</h2>
+            <div class="topic-grid">
+                <div class="topic-card" onclick="startSession('upper_limb')">
+                    <h3>Upper Limb</h3>
+                    <p>Brachial plexus, nerves, muscles</p>
+                </div>
+                <div class="topic-card" onclick="startSession('lower_limb')">
+                    <h3>Lower Limb</h3>
+                    <p>Sciatic nerve, femoral triangle</p>
+                </div>
+                <div class="topic-card" onclick="startSession('cardiology')">
+                    <h3>Cardiology</h3>
+                    <p>Heart anatomy, coronary circulation</p>
+                </div>
+                <div class="topic-card" onclick="startSession('neuroanatomy')">
+                    <h3>Neuroanatomy</h3>
+                    <p>Brain, cranial nerves, blood supply</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="viva-session hidden" id="vivaSession">
+            <div class="session-header">
+                <h2 id="sessionTopic">Topic: Upper Limb</h2>
+                <div class="session-controls">
+                    <span class="score-display">Score: <span id="totalScore">0</span></span>
+                    <button onclick="resetSession()" class="btn-secondary">End Session</button>
+                </div>
+            </div>
+
+            <div class="conversation-area">
+                <div class="professor-message">
+                    <div class="avatar">👨‍🏫</div>
+                    <div class="message-content">
+                        <strong>Professor:</strong>
+                        <div id="questionText">Let's begin with your first question...</div>
+                    </div>
+                </div>
+
+                <div class="voice-controls">
+                    <button id="speakQuestionBtn" onclick="speakCurrentQuestion()" class="btn-voice">
+                        🔊 Speak Question
+                    </button>
+                    <div id="listeningIndicator" class="listening-indicator hidden">
+                        <div class="pulse"></div>
+                        <span>Professor is speaking...</span>
+                    </div>
+                </div>
+
+                <div class="answer-section">
+                    <h3>Your Answer:</h3>
+                    <textarea id="studentAnswer" placeholder="Type your answer here or use voice input..."></textarea>
+
+                    <div class="answer-buttons">
+                        <button onclick="submitAnswer()" class="btn-primary">Submit Answer</button>
+                        <button id="voiceBtn" onclick="toggleVoiceInput()" class="btn-voice">
+                            🎤 Voice Input
+                        </button>
+                    </div>
+                </div>
+
+                <div class="feedback-area hidden" id="feedbackArea">
+                    <div class="professor-message">
+                        <div class="avatar">👨‍🏫</div>
+                        <div class="message-content">
+                            <strong>Feedback:</strong>
+                            <div id="feedbackText"></div>
+                            <div class="score-badge">Score: <span id="scoreValue">0</span>/10</div>
+                            <button onclick="nextQuestion()" class="btn-primary" id="nextButton">
+                                Next Question
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="progress-section">
+                <h3>Session Progress</h3>
+                <div id="progressBar" class="progress-bar">
+                    <div class="progress-fill" style="width: 0%"></div>
+                </div>
+                <div id="conversationHistory" class="history-container"></div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+
+</html>

static/script.js

@@ -0,0 +1,304 @@
+let currentSession = {
+    topic: null,
+    currentQuestion: null,
+    questionIndex: null,
+    totalScore: 0,
+    questionCount: 0
+};
+
+// Voice recognition setup
+let recognition = null;
+if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    recognition = new SpeechRecognition();
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.lang = 'en-US';
+
+    recognition.onresult = (event) => {
+        const transcript = event.results[0][0].transcript;
+        document.getElementById('studentAnswer').value = transcript;
+    };
+
+    recognition.onerror = (event) => {
+        console.error('Speech recognition error:', event.error);
+        stopVoiceInput();
+    };
+}
+
+async function startSession(topic) {
+    try {
+        const response = await fetch('/api/start_session', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ topic: topic })
+        });
+
+        const data = await response.json();
+
+        if (data.status === 'started') {
+            currentSession.topic = topic;
+            currentSession.totalScore = 0;
+            currentSession.questionCount = 0;
+
+            displayQuestion(data.first_question);
+
+            document.getElementById('sessionTopic').textContent = `Topic: ${getTopicName(topic)}`;
+            document.getElementById('topicSelection').classList.add('hidden');
+            document.getElementById('vivaSession').classList.remove('hidden');
+
+            updateProgress();
+        }
+
+    } catch (error) {
+        console.error('Error starting session:', error);
+        alert('Failed to start session. Please try again.');
+    }
+}
+
+function getTopicName(topicKey) {
+    const topicNames = {
+        'upper_limb': 'Upper Limb Anatomy',
+        'lower_limb': 'Lower Limb Anatomy',
+        'cardiology': 'Cardiac Anatomy',
+        'neuroanatomy': 'Neuroanatomy'
+    };
+    return topicNames[topicKey] || topicKey;
+}
+
+function displayQuestion(questionData) {
+    if (questionData.completed) {
+        endSession();
+        return;
+    }
+
+    currentSession.currentQuestion = questionData.question;
+    currentSession.questionIndex = questionData.question_index;
+
+    document.getElementById('questionText').textContent = questionData.question;
+    document.getElementById('studentAnswer').value = '';
+    document.getElementById('feedbackArea').classList.add('hidden');
+
+    updateProgress();
+}
+
+async function speakCurrentQuestion() {
+    const questionText = currentSession.currentQuestion;
+    if (!questionText) return;
+
+    const listeningIndicator = document.getElementById('listeningIndicator');
+    listeningIndicator.classList.remove('hidden');
+
+    try {
+        const response = await fetch('/api/text_to_speech', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ text: questionText })
+        });
+
+        const data = await response.json();
+
+        if (data.audio_data) {
+            await playAudioData(data.audio_data);
+        }
+    } catch (error) {
+        console.error('TTS failed:', error);
+        // Fallback to browser TTS
+        speakWithBrowserTTS(questionText);
+    } finally {
+        listeningIndicator.classList.add('hidden');
+    }
+}
+
+async function playAudioData(base64Audio) {
+    return new Promise((resolve) => {
+        const audioBlob = base64ToBlob(base64Audio, 'audio/wav');
+        const audioUrl = URL.createObjectURL(audioBlob);
+        const audio = new Audio(audioUrl);
+
+        audio.onended = () => {
+            URL.revokeObjectURL(audioUrl);
+            resolve();
+        };
+
+        audio.onerror = () => resolve();
+
+        audio.play().catch(error => {
+            console.error('Audio play failed:', error);
+            resolve();
+        });
+    });
+}
+
+function speakWithBrowserTTS(text) {
+    if ('speechSynthesis' in window) {
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.rate = 0.8;
+        utterance.pitch = 1.0;
+
+        const voices = speechSynthesis.getVoices();
+        const englishVoice = voices.find(voice => voice.lang.startsWith('en-'));
+        if (englishVoice) {
+            utterance.voice = englishVoice;
+        }
+
+        speechSynthesis.speak(utterance);
+    }
+}
+
+function toggleVoiceInput() {
+    const voiceBtn = document.getElementById('voiceBtn');
+
+    if (!recognition) {
+        alert('Speech recognition not supported in this browser. Please use Chrome or Edge.');
+        return;
+    }
+
+    if (voiceBtn.textContent.includes('Start')) {
+        startVoiceInput();
+    } else {
+        stopVoiceInput();
+    }
+}
+
+function startVoiceInput() {
+    const voiceBtn = document.getElementById('voiceBtn');
+    voiceBtn.textContent = '🛑 Stop Listening';
+    voiceBtn.style.background = '#e74c3c';
+
+    recognition.start();
+}
+
+function stopVoiceInput() {
+    const voiceBtn = document.getElementById('voiceBtn');
+    voiceBtn.textContent = '🎤 Voice Input';
+    voiceBtn.style.background = '#9b59b6';
+
+    if (recognition) {
+        recognition.stop();
+    }
+}
+
+async function submitAnswer() {
+    const answer = document.getElementById('studentAnswer').value.trim();
+
+    if (!answer) {
+        alert('Please enter your answer');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/evaluate_answer', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                question_index: currentSession.questionIndex,
+                answer: answer
+            })
+        });
+
+        const data = await response.json();
+
+        displayFeedback(data);
+
+    } catch (error) {
+        console.error('Error submitting answer:', error);
+        alert('Failed to submit answer. Please try again.');
+    }
+}
+
+function displayFeedback(data) {
+    currentSession.totalScore += data.score;
+    currentSession.questionCount++;
+
+    document.getElementById('feedbackText').textContent = data.feedback;
+    document.getElementById('scoreValue').textContent = data.score.toFixed(1);
+    document.getElementById('totalScore').textContent = currentSession.totalScore.toFixed(1);
+    document.getElementById('feedbackArea').classList.remove('hidden');
+
+    updateProgress();
+    addToHistory(data);
+}
+
+function addToHistory(data) {
+    const historyContainer = document.getElementById('conversationHistory');
+    const historyItem = document.createElement('div');
+    historyItem.className = 'history-item';
+
+    historyItem.innerHTML = `
+        <strong>Q${currentSession.questionCount}:</strong> ${currentSession.currentQuestion}<br>
+        <strong>Your Answer:</strong> ${data.transcribed_answer || document.getElementById('studentAnswer').value.substring(0, 100)}...<br>
+        <strong>Score:</strong> ${data.score.toFixed(1)}/10
+    `;
+
+    historyContainer.appendChild(historyItem);
+    historyContainer.scrollTop = historyContainer.scrollHeight;
+}
+
+function updateProgress() {
+    const progressFill = document.querySelector('.progress-fill');
+    if (currentSession.questionCount > 0) {
+        const progress = (currentSession.questionCount / 5) * 100; // Assuming 5 questions per topic
+        progressFill.style.width = `${Math.min(progress, 100)}%`;
+    } else {
+        progressFill.style.width = '0%';
+    }
+}
+
+function nextQuestion() {
+    // In a real implementation, this would get the next question from the server
+    // For now, we'll simulate by ending the session after a few questions
+    if (currentSession.questionCount >= 3) {
+        endSession();
+    } else {
+        // Simulate getting next question
+        const nextQuestion = {
+            question: `Next question about ${currentSession.topic}...`,
+            question_index: currentSession.questionIndex + 1
+        };
+        displayQuestion(nextQuestion);
+    }
+}
+
+function endSession() {
+    const averageScore = currentSession.totalScore / currentSession.questionCount;
+    alert(`Session completed! Your average score: ${averageScore.toFixed(1)}/10\nWell done!`);
+    resetSession();
+}
+
+function resetSession() {
+    currentSession = {
+        topic: null,
+        currentQuestion: null,
+        questionIndex: null,
+        totalScore: 0,
+        questionCount: 0
+    };
+
+    document.getElementById('vivaSession').classList.add('hidden');
+    document.getElementById('topicSelection').classList.remove('hidden');
+    document.getElementById('conversationHistory').innerHTML = '';
+    document.getElementById('totalScore').textContent = '0';
+}
+
+// Utility function
+function base64ToBlob(base64, mimeType) {
+    const byteCharacters = atob(base64);
+    const byteNumbers = new Array(byteCharacters.length);
+    for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+    const byteArray = new Uint8Array(byteNumbers);
+    return new Blob([byteArray], { type: mimeType });
+}
+
+// Initialize speech synthesis voices
+if ('speechSynthesis' in window) {
+    speechSynthesis.getVoices();
+}

static/style.css

@@ -0,0 +1,305 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 15px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+header {
+    background: #2c3e50;
+    color: white;
+    padding: 30px;
+    text-align: center;
+}
+
+header h1 {
+    margin-bottom: 10px;
+    font-size: 2.5em;
+}
+
+header p {
+    opacity: 0.9;
+    font-size: 1.1em;
+}
+
+.topic-selection,
+.viva-session {
+    padding: 40px;
+}
+
+.topic-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-top: 30px;
+}
+
+.topic-card {
+    background: #f8f9fa;
+    padding: 25px;
+    border-radius: 10px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 2px solid #e9ecef;
+}
+
+.topic-card:hover {
+    transform: translateY(-5px);
+    border-color: #3498db;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.topic-card h3 {
+    color: #2c3e50;
+    margin-bottom: 10px;
+}
+
+.topic-card p {
+    color: #7f8c8d;
+    font-size: 0.9em;
+}
+
+.hidden {
+    display: none;
+}
+
+.session-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 2px solid #ecf0f1;
+}
+
+.session-controls {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.score-display {
+    background: #27ae60;
+    color: white;
+    padding: 8px 15px;
+    border-radius: 20px;
+    font-weight: bold;
+}
+
+.btn-primary,
+.btn-secondary,
+.btn-voice {
+    padding: 12px 25px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1em;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background: #3498db;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #2980b9;
+}
+
+.btn-secondary {
+    background: #e74c3c;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #c0392b;
+}
+
+.btn-voice {
+    background: #9b59b6;
+    color: white;
+}
+
+.btn-voice:hover {
+    background: #8e44ad;
+}
+
+.professor-message {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 20px;
+    align-items: flex-start;
+}
+
+.avatar {
+    font-size: 2em;
+    flex-shrink: 0;
+}
+
+.message-content {
+    flex: 1;
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 10px;
+    border-left: 4px solid #3498db;
+}
+
+.voice-controls {
+    margin: 20px 0;
+    text-align: center;
+}
+
+.listening-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: #fff3cd;
+    padding: 10px 20px;
+    border-radius: 25px;
+    border: 1px solid #ffeaa7;
+}
+
+.pulse {
+    width: 12px;
+    height: 12px;
+    background: #e74c3c;
+    border-radius: 50%;
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0.95);
+        opacity: 0.7;
+    }
+
+    50% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
+
+    100% {
+        transform: scale(0.95);
+        opacity: 0.7;
+    }
+}
+
+.answer-section {
+    margin: 30px 0;
+}
+
+.answer-section h3 {
+    margin-bottom: 15px;
+    color: #2c3e50;
+}
+
+#studentAnswer {
+    width: 100%;
+    height: 120px;
+    padding: 15px;
+    border: 2px solid #bdc3c7;
+    border-radius: 8px;
+    font-size: 1em;
+    resize: vertical;
+    font-family: inherit;
+}
+
+.answer-buttons {
+    display: flex;
+    gap: 15px;
+    margin-top: 15px;
+    flex-wrap: wrap;
+}
+
+.feedback-area {
+    margin-top: 30px;
+}
+
+.score-badge {
+    display: inline-block;
+    background: #27ae60;
+    color: white;
+    padding: 8px 15px;
+    border-radius: 15px;
+    margin: 10px 0;
+    font-weight: bold;
+}
+
+.progress-section {
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 2px solid #ecf0f1;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 10px;
+    background: #ecf0f1;
+    border-radius: 5px;
+    overflow: hidden;
+    margin: 15px 0;
+}
+
+.progress-fill {
+    height: 100%;
+    background: #27ae60;
+    transition: width 0.3s ease;
+}
+
+.history-container {
+    max-height: 300px;
+    overflow-y: auto;
+    margin-top: 20px;
+}
+
+.history-item {
+    background: #f8f9fa;
+    padding: 15px;
+    margin: 10px 0;
+    border-radius: 8px;
+    border-left: 4px solid #95a5a6;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .container {
+        margin: 10px;
+        border-radius: 10px;
+    }
+
+    .topic-selection,
+    .viva-session {
+        padding: 20px;
+    }
+
+    .session-header {
+        flex-direction: column;
+        gap: 15px;
+        align-items: flex-start;
+    }
+
+    .answer-buttons {
+        flex-direction: column;
+    }
+
+    header h1 {
+        font-size: 2em;
+    }
+}