Hugging Face's logo

Spaces:
yasserrmd
/
MathMentor
Running

App Files Community
yasserrmd commited on
Commit
8323129
·
verified ·
1 Parent(s): 7fca962

Create static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +298 -0
static/index.html ADDED
@@ -0,0 +1,298 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Mathematical Insight Tutor</title>
8
+ <!-- Bootstrap CSS -->
9
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
10
+ <!-- Font Awesome Icons -->
11
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ background-color: #f4f6f9;
15
+ }
16
+ .card-header {
17
+ background-color: #007bff;
18
+ color: white;
19
+ }
20
+ .nav-pills .nav-link.active {
21
+ background-color: #007bff;
22
+ }
23
+ .result-container {
24
+ background-color: white;
25
+ border-radius: 8px;
26
+ padding: 20px;
27
+ margin-top: 20px;
28
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
29
+ max-height: 400px;
30
+ overflow-y: auto;
31
+ }
32
+ .typing-indicator {
33
+ display: none;
34
+ color: #007bff;
35
+ font-style: italic;
36
+ }
37
+ .markdown-content code {
38
+ background-color: #f4f4f4;
39
+ padding: 2px 4px;
40
+ border-radius: 4px;
41
+ }
42
+ .markdown-content pre {
43
+ background-color: #f4f4f4;
44
+ padding: 10px;
45
+ border-radius: 4px;
46
+ overflow-x: auto;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body>
51
+ <div class="container mt-5">
52
+ <div class="row justify-content-center">
53
+ <div class="col-md-10">
54
+ <div class="card shadow-lg">
55
+ <div class="card-header text-center">
56
+ <h2 class="mb-0">
57
+ <i class="fas fa-calculator me-2"></i>Mathematical Insight Tutor
58
+ </h2>
59
+ </div>
60
+ <div class="card-body">
61
+ <!-- Navigation Tabs -->
62
+ <ul class="nav nav-pills nav-fill mb-4" id="mathTabs" role="tablist">
63
+ <li class="nav-item" role="presentation">
64
+ <button class="nav-link active" id="solve-tab" data-bs-toggle="tab" data-bs-target="#solve" type="button" role="tab">
65
+ <i class="fas fa-calculator me-2"></i>Solve Problem
66
+ </button>
67
+ </li>
68
+ <li class="nav-item" role="presentation">
69
+ <button class="nav-link" id="hint-tab" data-bs-toggle="tab" data-bs-target="#hint" type="button" role="tab">
70
+ <i class="fas fa-lightbulb me-2"></i>Generate Hint
71
+ </button>
72
+ </li>
73
+ <li class="nav-item" role="presentation">
74
+ <button class="nav-link" id="verify-tab" data-bs-toggle="tab" data-bs-target="#verify" type="button" role="tab">
75
+ <i class="fas fa-check-circle me-2"></i>Verify Solution
76
+ </button>
77
+ </li>
78
+ <li class="nav-item" role="presentation">
79
+ <button class="nav-link" id="generate-tab" data-bs-toggle="tab" data-bs-target="#generate" type="button" role="tab">
80
+ <i class="fas fa-file-alt me-2"></i>Practice Question
81
+ </button>
82
+ </li>
83
+ <li class="nav-item" role="presentation">
84
+ <button class="nav-link" id="explain-tab" data-bs-toggle="tab" data-bs-target="#explain" type="button" role="tab">
85
+ <i class="fas fa-chalkboard-teacher me-2"></i>Explain Concept
86
+ </button>
87
+ </li>
88
+ </ul>
89
+
90
+ <!-- Tab Content -->
91
+ <div class="tab-content" id="mathTabsContent">
92
+ <!-- Solve Problem Tab -->
93
+ <div class="tab-pane fade show active" id="solve" role="tabpanel">
94
+ <form id="solveForm" class="math-form" data-endpoint="solve">
95
+ <div class="mb-3">
96
+ <label for="solveProblem" class="form-label">Enter Math Problem</label>
97
+ <input type="text" class="form-control" id="solveProblem" name="problem"
98
+ placeholder="e.g., Solve for x: 2x + 5 = 15" required>
99
+ </div>
100
+ <div class="mb-3">
101
+ <label for="solveDifficulty" class="form-label">Difficulty Level</label>
102
+ <select class="form-select" id="solveDifficulty" name="difficulty" required>
103
+ <option value="">Select Difficulty</option>
104
+ <option>Beginner</option>
105
+ <option>Intermediate</option>
106
+ <option>Advanced</option>
107
+ </select>
108
+ </div>
109
+ <button type="submit" class="btn btn-primary">
110
+ <i class="fas fa-play me-2"></i>Solve Problem
111
+ </button>
112
+ </form>
113
+ </div>
114
+
115
+ <!-- Hint Tab -->
116
+ <div class="tab-pane fade" id="hint" role="tabpanel">
117
+ <form id="hintForm" class="math-form" data-endpoint="hint">
118
+ <div class="mb-3">
119
+ <label for="hintProblem" class="form-label">Enter Math Problem for Hint</label>
120
+ <input type="text" class="form-control" id="hintProblem" name="problem"
121
+ placeholder="e.g., Solve for x: 2x + 5 = 15" required>
122
+ </div>
123
+ <div class="mb-3">
124
+ <label for="hintDifficulty" class="form-label">Difficulty Level</label>
125
+ <select class="form-select" id="hintDifficulty" name="difficulty" required>
126
+ <option value="">Select Difficulty</option>
127
+ <option>Beginner</option>
128
+ <option>Intermediate</option>
129
+ <option>Advanced</option>
130
+ </select>
131
+ </div>
132
+ <button type="submit" class="btn btn-primary">
133
+ <i class="fas fa-lightbulb me-2"></i>Generate Hint
134
+ </button>
135
+ </form>
136
+ </div>
137
+
138
+ <!-- Verify Solution Tab -->
139
+ <div class="tab-pane fade" id="verify" role="tabpanel">
140
+ <form id="verifyForm" class="math-form" data-endpoint="verify">
141
+ <div class="mb-3">
142
+ <label for="verifyProblem" class="form-label">Enter Math Problem</label>
143
+ <input type="text" class="form-control" id="verifyProblem" name="problem"
144
+ placeholder="e.g., Solve for x: 2x + 5 = 15" required>
145
+ </div>
146
+ <div class="mb-3">
147
+ <label for="verifySolution" class="form-label">Enter Your Solution</label>
148
+ <input type="text" class="form-control" id="verifySolution" name="solution"
149
+ placeholder="e.g., x = 5" required>
150
+ </div>
151
+ <button type="submit" class="btn btn-primary">
152
+ <i class="fas fa-check-circle me-2"></i>Verify Solution
153
+ </button>
154
+ </form>
155
+ </div>
156
+
157
+ <!-- Generate Practice Question Tab -->
158
+ <div class="tab-pane fade" id="generate" role="tabpanel">
159
+ <form id="generateForm" class="math-form" data-endpoint="generate">
160
+ <div class="mb-3">
161
+ <label for="generateTopic" class="form-label">Enter Math Topic</label>
162
+ <input type="text" class="form-control" id="generateTopic" name="topic"
163
+ placeholder="e.g., Algebra, Calculus" required>
164
+ </div>
165
+ <div class="mb-3">
166
+ <label for="generateDifficulty" class="form-label">Difficulty Level</label>
167
+ <select class="form-select" id="generateDifficulty" name="difficulty" required>
168
+ <option value="">Select Difficulty</option>
169
+ <option>Beginner</option>
170
+ <option>Intermediate</option>
171
+ <option>Advanced</option>
172
+ </select>
173
+ </div>
174
+ <button type="submit" class="btn btn-primary">
175
+ <i class="fas fa-file-alt me-2"></i>Generate Practice Question
176
+ </button>
177
+ </form>
178
+ </div>
179
+
180
+ <!-- Explain Concept Tab -->
181
+ <div class="tab-pane fade" id="explain" role="tabpanel">
182
+ <form id="explainForm" class="math-form" data-endpoint="explain">
183
+ <div class="mb-3">
184
+ <label for="explainProblem" class="form-label">Enter Math Problem</label>
185
+ <input type="text" class="form-control" id="explainProblem" name="problem"
186
+ placeholder="e.g., Solve for x: 2x + 5 = 15" required>
187
+ </div>
188
+ <div class="mb-3">
189
+ <label for="explainDifficulty" class="form-label">Difficulty Level</label>
190
+ <select class="form-select" id="explainDifficulty" name="difficulty" required>
191
+ <option value="">Select Difficulty</option>
192
+ <option>Beginner</option>
193
+ <option>Intermediate</option>
194
+ <option>Advanced</option>
195
+ </select>
196
+ </div>
197
+ <button type="submit" class="btn btn-primary">
198
+ <i class="fas fa-chalkboard-teacher me-2"></i>Explain Concept
199
+ </button>
200
+ </form>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Result Container -->
205
+ <div class="result-container mt-4">
206
+ <div class="typing-indicator" id="typingIndicator">
207
+ <i class="fas fa-spinner fa-spin me-2"></i>Generating response...
208
+ </div>
209
+ <div id="resultContent" class="markdown-content"></div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Bootstrap JS and Popper -->
218
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
219
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
220
+ <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
221
+ <script>
222
+ document.addEventListener('DOMContentLoaded', () => {
223
+ // WebSocket connection management
224
+ let socket = null;
225
+
226
+ // Function to handle WebSocket connection and streaming
227
+ function handleWebSocketStream(endpoint, formData) {
228
+ // Close any existing socket
229
+ if (socket) {
230
+ socket.close();
231
+ }
232
+
233
+ // Get DOM elements
234
+ const resultContent = document.getElementById('resultContent');
235
+ const typingIndicator = document.getElementById('typingIndicator');
236
+
237
+ // Reset result container
238
+ resultContent.innerHTML = '';
239
+ typingIndicator.style.display = 'block';
240
+
241
+ // Establish WebSocket connection
242
+ const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
243
+ socket = new WebSocket(`${protocol}//${window.location.host}/ws/${endpoint}`);
244
+
245
+ socket.onopen = () => {
246
+ // Send form data through WebSocket
247
+ socket.send(JSON.stringify(formData));
248
+ };
249
+
250
+ socket.onmessage = (event) => {
251
+ const data = JSON.parse(event.data);
252
+
253
+ if (data.chunk) {
254
+ // Append streaming chunks
255
+ resultContent.innerHTML += data.chunk;
256
+ }
257
+
258
+ if (data.complete) {
259
+ // Streaming complete
260
+ typingIndicator.style.display = 'none';
261
+ socket.close();
262
+ }
263
+
264
+ if (data.error) {
265
+ // Handle errors
266
+ resultContent.innerHTML = `Error: ${data.error}`;
267
+ typingIndicator.style.display = 'none';
268
+ socket.close();
269
+ }
270
+ };
271
+
272
+ socket.onerror = (error) => {
273
+ console.error('WebSocket Error:', error);
274
+ resultContent.innerHTML = 'WebSocket connection error';
275
+ typingIndicator.style.display = 'none';
276
+ };
277
+ }
278
+
279
+ // Attach submit event to all math forms
280
+ const forms = document.querySelectorAll('.math-form');
281
+ forms.forEach(form => {
282
+ form.addEventListener('submit', (e) => {
283
+ e.preventDefault();
284
+
285
+ // Get the WebSocket endpoint from the form's data attribute
286
+ const endpoint = form.dataset.endpoint;
287
+
288
+ // Prepare form data
289
+ const formData = Object.fromEntries(new FormData(form));
290
+
291
+ // Initiate WebSocket streaming
292
+ handleWebSocketStream(endpoint, formData);
293
+ });
294
+ });
295
+ });
296
+ </script>
297
+ </body>
298
+ </html>