| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>NEET Biology Q&A — AI Study Assistant</title> |
| <meta name="description" content="AI-powered NEET Biology question answering system using BERT classification and RAG pipeline with NCERT textbook context." /> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="styles.css" /> |
| </head> |
| <body> |
| |
| <div class="ambient-bg"> |
| <div class="orb orb-1"></div> |
| <div class="orb orb-2"></div> |
| <div class="orb orb-3"></div> |
| </div> |
|
|
| |
| <nav class="navbar" id="navbar"> |
| <div class="nav-brand"> |
| <span class="nav-icon">🧬</span> |
| <span class="nav-title">NEET Bio <span class="gradient-text">AI</span></span> |
| </div> |
| <div class="nav-status"> |
| <span class="status-dot" id="statusDot"></span> |
| <span class="status-text" id="statusText">Connecting...</span> |
| </div> |
| </nav> |
|
|
| |
| <main class="main-container"> |
|
|
| |
| <section class="hero"> |
| <h1 class="hero-title"> |
| Your AI-Powered |
| <span class="gradient-text">NEET Biology</span> |
| Study Assistant |
| </h1> |
| <p class="hero-subtitle"> |
| Ask any NCERT Biology question — get chapter classification, topic extraction, |
| and verified answers powered by BERT & RAG |
| </p> |
| </section> |
|
|
| |
| <section class="input-section"> |
| <div class="input-card glass-card"> |
| <div class="input-header"> |
| <span class="input-icon">💡</span> |
| <span class="input-label">Ask your question</span> |
| </div> |
| <textarea |
| id="questionInput" |
| class="question-textarea" |
| placeholder="e.g., What is the role of cofactors in enzyme activity?" |
| rows="3" |
| maxlength="500" |
| ></textarea> |
| <div class="input-footer"> |
| <span class="char-count" id="charCount">0 / 500</span> |
| <div class="action-buttons"> |
| <button class="btn btn-classify" id="btnClassify" onclick="handleClassify()"> |
| <span class="btn-icon">🏷️</span> |
| <span class="btn-text">Classify</span> |
| </button> |
| <button class="btn btn-answer" id="btnAnswer" onclick="handleAnswer()"> |
| <span class="btn-icon">📝</span> |
| <span class="btn-text">Generate Answer</span> |
| </button> |
| <button class="btn btn-full" id="btnFull" onclick="handleFullAnalysis()"> |
| <span class="btn-icon">🔬</span> |
| <span class="btn-text">Full Analysis</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="loading-section" id="loadingSection" style="display: none;"> |
| <div class="loader-card glass-card"> |
| <div class="loader-spinner"></div> |
| <p class="loader-text" id="loaderText">Analyzing your question...</p> |
| <div class="loader-steps" id="loaderSteps"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="results-section" id="resultsSection" style="display: none;"> |
|
|
| |
| <div class="result-card glass-card" id="classificationCard" style="display: none;"> |
| <div class="card-header"> |
| <span class="card-icon">🏷️</span> |
| <h2 class="card-title">Classification</h2> |
| <span class="confidence-badge" id="chapterConfidence"></span> |
| </div> |
| <div class="classification-content"> |
| <div class="chapter-info"> |
| <span class="label">Chapter</span> |
| <span class="value" id="chapterName"></span> |
| </div> |
| <div class="topics-list" id="topicsList"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="result-card glass-card" id="answerCard" style="display: none;"> |
| <div class="card-header"> |
| <span class="card-icon">📝</span> |
| <h2 class="card-title">Answer</h2> |
| <div class="verification-badge" id="verificationBadge"></div> |
| </div> |
| <div class="answer-content" id="answerContent"></div> |
| </div> |
|
|
| |
| <div class="result-card glass-card" id="justificationCard" style="display: none;"> |
| <div class="card-header"> |
| <span class="card-icon">📋</span> |
| <h2 class="card-title">Justification</h2> |
| </div> |
| <ol class="justification-list" id="justificationList"></ol> |
| </div> |
|
|
| |
| <div class="result-card glass-card" id="sourcesCard" style="display: none;"> |
| <div class="card-header"> |
| <span class="card-icon">📚</span> |
| <h2 class="card-title">NCERT Sources</h2> |
| <span class="confidence-badge" id="overallConfidence"></span> |
| </div> |
| <div class="sources-list" id="sourcesList"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="error-section" id="errorSection" style="display: none;"> |
| <div class="error-card glass-card"> |
| <span class="error-icon">⚠️</span> |
| <p class="error-message" id="errorMessage"></p> |
| <button class="btn btn-retry" onclick="hideError()">Try Again</button> |
| </div> |
| </section> |
|
|
| </main> |
|
|
| |
| <footer class="footer"> |
| <p>Built with <span class="gradient-text">BERT</span> + <span class="gradient-text">RAG</span> • NCERT Biology Chapters 1–31</p> |
| </footer> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
