SimpleViva / static /index.html
gladguy's picture
Initial deployment
8d22bb4
<!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>