File size: 7,019 Bytes
4d67ec7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | <!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>
<!-- ============ AMBIENT BACKGROUND ============ -->
<div class="ambient-bg">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<!-- ============ NAVBAR ============ -->
<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 CONTENT ============ -->
<main class="main-container">
<!-- HERO SECTION -->
<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>
<!-- INPUT 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>
<!-- LOADING INDICATOR -->
<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>
<!-- RESULTS SECTION -->
<section class="results-section" id="resultsSection" style="display: none;">
<!-- Classification Card -->
<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>
<!-- Answer Card -->
<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>
<!-- Justification Card -->
<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>
<!-- Sources Card -->
<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>
<!-- ERROR 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 ============ -->
<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>
|