Hugging Face's logo

Spaces:
atlury
/
digitalhuman
Running

App Files Community
atlury commited on
Commit
888c52f
·
verified ·
1 Parent(s): 5d4c5e1

Upload 19 files

Browse files
Files changed (6) hide show
  1. 3d-explorer.css +53 -0
  2. 3d-explorer.js +26 -0
  3. digital.human.video.js +1 -1
  4. finalwork4.html +820 -0
  5. podcast.js +26 -0
  6. style.css +558 -0
3d-explorer.css ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* 3d-explorer.css */
2
+
3
+ /* --------------------3D Explorer Tabs Styling-------------------- */
4
+ .explorer-tabs {
5
+ display: flex;
6
+ gap: 10px;
7
+ margin-bottom: 20px;
8
+ }
9
+
10
+ .explorer-tab-button {
11
+ flex: 1;
12
+ padding: 10px 15px;
13
+ background: linear-gradient(135deg, #00796B, #004D40);
14
+ border: none;
15
+ color: white;
16
+ font-size: 1em;
17
+ border-radius: 8px;
18
+ cursor: pointer;
19
+ transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
20
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
21
+ }
22
+
23
+ .explorer-tab-button:hover:not(:disabled) {
24
+ background: linear-gradient(135deg, #005D56, #00332E);
25
+ transform: translateY(-2px);
26
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
27
+ }
28
+
29
+ .explorer-tab-button.active {
30
+ background: linear-gradient(135deg, #004D40, #00332E);
31
+ cursor: default;
32
+ box-shadow: none;
33
+ }
34
+
35
+ .explorer-tab-content .explorer-content {
36
+ display: none;
37
+ }
38
+
39
+ .explorer-tab-content .explorer-content.active {
40
+ display: block;
41
+ }
42
+
43
+ /* Responsive Adjustments */
44
+ @media (max-width: 800px) {
45
+ .explorer-tabs {
46
+ flex-direction: column;
47
+ }
48
+
49
+ .explorer-tab-button {
50
+ flex: none;
51
+ width: 100%;
52
+ }
53
+ }
3d-explorer.js ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // 3d-explorer.js
2
+
3
+ document.addEventListener('DOMContentLoaded', () => {
4
+ const explorerTabButtons = document.querySelectorAll('.explorer-tab-button');
5
+ const explorerContents = document.querySelectorAll('.explorer-content');
6
+
7
+ explorerTabButtons.forEach(button => {
8
+ button.addEventListener('click', () => {
9
+ // Remove 'active' class from all buttons
10
+ explorerTabButtons.forEach(btn => btn.classList.remove('active'));
11
+ // Hide all explorer contents
12
+ explorerContents.forEach(content => {
13
+ content.classList.remove('active');
14
+ content.classList.add('hidden');
15
+ });
16
+
17
+ // Add 'active' class to clicked button
18
+ button.classList.add('active');
19
+ // Show the selected explorer content
20
+ const target = button.getAttribute('data-explorer-tab');
21
+ const targetContent = document.getElementById(target);
22
+ targetContent.classList.add('active');
23
+ targetContent.classList.remove('hidden');
24
+ });
25
+ });
26
+ });
digital.human.video.js CHANGED
@@ -679,7 +679,7 @@ document.addEventListener("DOMContentLoaded", () => {
679
  "messages": [
680
  {
681
  "role": "user",
682
- "content": `Describe the image mathematically and solve it. <img src="data:image/png;base64,${imageB64}" />`
683
  }
684
  ],
685
  "max_tokens": 512,
 
679
  "messages": [
680
  {
681
  "role": "user",
682
+ "content": `Describe the image and solve it. <img src="data:image/png;base64,${imageB64}" />`
683
  }
684
  ],
685
  "max_tokens": 512,
finalwork4.html ADDED
@@ -0,0 +1,820 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Aged Guru</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <!-- Google Fonts for better typography -->
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
9
+ <!-- Include necessary CSS styles -->
10
+ <link rel="stylesheet" href="base.css">
11
+ <link rel="stylesheet" href="coder.css">
12
+ <link rel="stylesheet" href="digital.human.video.css">
13
+ <link rel="stylesheet" href="digital.human.audio.css">
14
+ <link rel="stylesheet" href="advanced.math.css">
15
+ <link rel="stylesheet" href="interdisciplinary.css"> <!-- New CSS for Interdisciplinary -->
16
+ <link rel="stylesheet" href="podcast.css">
17
+ <link rel="stylesheet" href="insights.css">
18
+ <!-- Add new CSS for 3D Explorer -->
19
+ <link rel="stylesheet" href="3d-explorer.css">
20
+ </head>
21
+ <body>
22
+
23
+ <!-- Sidebar -->
24
+ <div class="sidebar">
25
+ <h2>AGED GURU</h2>
26
+
27
+ <a href="#" class="active" data-content="home">Home</a>
28
+
29
+ <a href="#" data-content="remotevoice">Digital Human</a>
30
+ <a href="#" data-content="video">Workbench</a>
31
+ <a href="#" data-content="coder">Young Coder</a>
32
+
33
+ <!-- <a href="#" data-content="voice">Digital Human Voice</a> -->
34
+ <!-- <a href="#" data-content="interdisciplinary">Interdisciplinary Studies & Advanced Math</a> -->
35
+ <!-- <a href="#" data-content="advanced-math">Advanced Mathematics & Problem Solving</a> -->
36
+
37
+ <a href="#" data-content="insights">Insights</a>
38
+ <a href="#" data-content="podcast">Podcast</a>
39
+
40
+ <a href="#" data-content="magazines-base">Workshop & Wisdom</a>
41
+ <a href="#" data-content="digitaldustbin-base">Digital Dustbin</a>
42
+ <a href="#" data-content="treasured-base">Treasured Teachings</a>
43
+
44
+ <a href="#" data-content="3d-explorer">3D Explorer</a>
45
+ <a href="#" data-content="digital-twin">Digital Twin</a>
46
+
47
+ </div>
48
+
49
+ <!-- Main Content -->
50
+ <div class="main-content" id="main-content">
51
+ <div class="header">
52
+ <h1>5-MIN SCIENTIST PORTAL</h1>
53
+ <!-- You can add user profile or settings here -->
54
+ </div>
55
+ <!-- Content will be loaded here -->
56
+ <div id="content-area">
57
+
58
+
59
+
60
+ <!-- --------------------Home Starts------------------------------------------- -->
61
+ <div id="home" class="content-section">
62
+
63
+
64
+ </div>
65
+ <!-- --------------------Home ends---------------------------------------------- -->
66
+
67
+ <!-- --------------------Remote Voice Starts------------------------------------------- -->
68
+ <div id="remotevoice" class="content-section hidden">
69
+ <div class="card">
70
+ <iframe src="https://demo.dailybots.ai/"
71
+ width="100%"
72
+ height="600px"
73
+ style="border: none; border-radius: 12px;"
74
+ title="Document Podcast"
75
+ allow="microphone">
76
+ </iframe>
77
+ </div>
78
+ </div>
79
+ <!-- --------------------Remote Voice ends---------------------------------------------- -->
80
+
81
+
82
+
83
+
84
+ <!-- -----------------Digital Human Voice Content Starts---------------- -->
85
+ <div id="voice" class="content-section hidden">
86
+ <div class="card voice-card">
87
+ <!-- Digital Human Voice Layout -->
88
+ <div class="voice-options">
89
+ <!-- Model Selection Section -->
90
+ <div id="voice-model-selection-container" class="option-section">
91
+ <label for="voice-model-selection">Select Model:</label>
92
+ <select id="voice-model-selection"></select>
93
+ <button id="voice-download" disabled>Initialize Model</button>
94
+ </div>
95
+
96
+ <!-- Voice Selection Section -->
97
+ <div id="voice-tool-selection-container" class="option-section">
98
+ <label for="voice-tools">Select Voice:</label>
99
+ <select id="voice-tools"></select>
100
+ </div>
101
+
102
+ <!-- Speech Controls Section -->
103
+ <div id="voice-speech-controls" class="option-section">
104
+ <label for="voice-speech-rate">Speech Rate:</label>
105
+ <input type="range" id="voice-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
106
+
107
+ <label for="voice-speech-pitch">Speech Pitch:</label>
108
+ <input type="range" id="voice-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
109
+ </div>
110
+
111
+ <!-- Logs Section -->
112
+ <div id="voice-logs-container" class="option-section">
113
+ <h3>Logs</h3>
114
+ <div id="voice-logs">
115
+ <!-- Logs will appear here -->
116
+ </div>
117
+ <button id="voice-clear-logs">Clear Logs</button>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="chat-window">
122
+ <!-- Chat Box Section -->
123
+ <div id="voice-chat-container">
124
+ <div id="voice-chat-box">
125
+ <!-- Chat messages will appear here -->
126
+ </div>
127
+
128
+ <!-- Chat Stats -->
129
+ <div id="voice-chat-stats" class="hidden">Runtime Stats: N/A</div>
130
+
131
+ <!-- Chat Input Section -->
132
+ <div id="voice-text-input-container">
133
+ <input type="text" id="voice-text-input" placeholder="Type your message here..." disabled>
134
+ <button id="voice-submit-button" disabled>Send</button>
135
+ </div>
136
+
137
+ <!-- Microphone Controls -->
138
+ <div id="voice-mic-container">
139
+ <button id="voice-start_button" aria-label="Start Voice Input" disabled>
140
+ <!-- Mic Icon SVG -->
141
+ <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
142
+ <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>
143
+ </svg>
144
+ </button>
145
+ <button id="voice-stop_button" aria-label="Stop Speech" disabled>
146
+ <!-- Stop Icon SVG -->
147
+ <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
148
+ <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
149
+ </svg>
150
+ </button>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Loading Spinner -->
155
+ <div id="voice-loading-spinner" class="hidden">
156
+ <div class="spinner"></div>
157
+ </div>
158
+
159
+ <!-- Configuration Info -->
160
+ <div id="voice-configuration" class="hidden">
161
+ <p>Model Initialized: <span id="voice-selected-model">N/A</span></p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ <!-- -----------------Digital Human Voice Content Ends---------------- -->
167
+
168
+
169
+
170
+
171
+
172
+ <!-- --------------------Digital Human Mentor Video Content Starts---------------- -->
173
+ <div id="video" class="content-section hidden">
174
+ <div class="card video-card">
175
+ <!-- Video Options -->
176
+ <div class="video-options">
177
+ <!-- Model Selection Section -->
178
+ <div id="video-model-selection-container" class="option-section">
179
+ <label for="video-model-selection">Select Model:</label>
180
+ <select id="video-model-selection"></select>
181
+ <button id="video-download" disabled>Initialize Model</button>
182
+ </div>
183
+
184
+ <!-- Voice Selection Section -->
185
+ <div id="video-tool-selection-container" class="option-section">
186
+ <label for="video-tools">Select Voice:</label>
187
+ <select id="video-tools"></select>
188
+ </div>
189
+
190
+ <!-- Speech Controls Section -->
191
+ <div id="video-speech-controls" class="option-section">
192
+ <label for="video-speech-rate">Speech Rate:</label>
193
+ <input type="range" id="video-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
194
+
195
+ <label for="video-speech-pitch">Speech Pitch:</label>
196
+ <input type="range" id="video-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
197
+ </div>
198
+
199
+ <!-- Logs Section -->
200
+ <div id="video-logs-container" class="option-section">
201
+ <h3>Logs</h3>
202
+ <div id="video-logs">
203
+ <!-- Logs will appear here -->
204
+ </div>
205
+ <button id="video-clear-logs">Clear Logs</button>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- New: Wrapper for Chat Window and Image Upload Section -->
210
+ <div class="video-main">
211
+ <!-- Chat Window Section -->
212
+ <div class="chat-window">
213
+ <!-- Chat Box Section -->
214
+ <div id="video-chat-container">
215
+ <div id="video-chat-box">
216
+ <!-- Chat messages will appear here -->
217
+ </div>
218
+
219
+ <!-- Chat Stats -->
220
+ <div id="video-chat-stats" class="hidden">Runtime Stats: N/A</div>
221
+
222
+ <!-- Chat Input Section -->
223
+ <div id="video-text-input-container">
224
+ <input type="text" id="video-text-input" placeholder="Type your message here..." disabled>
225
+ <button id="video-submit-button" disabled>Send</button>
226
+ </div>
227
+
228
+ <!-- Microphone Controls -->
229
+ <div id="video-mic-container">
230
+ <button id="video-start_button" aria-label="Start Voice Input" disabled>
231
+ <!-- Mic Icon SVG -->
232
+ <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
233
+ <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>
234
+ </svg>
235
+ </button>
236
+ <button id="video-stop_button" aria-label="Stop Speech" disabled>
237
+ <!-- Stop Icon SVG -->
238
+ <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
239
+ <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
240
+ </svg>
241
+ </button>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Loading Spinner -->
246
+ <div id="video-loading-spinner" class="hidden">
247
+ <div class="spinner"></div>
248
+ </div>
249
+
250
+ <!-- Configuration Info -->
251
+ <div id="video-configuration" class="hidden">
252
+ <p>Model Initialized: <span id="video-selected-model">N/A</span></p>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Image Upload and Canvas Section -->
257
+ <div class="video-image-section">
258
+ <!-- Tab Navigation -->
259
+ <div class="image-tabs">
260
+ <button class="tab-button active" data-tab="upload">Upload Image</button>
261
+ <button class="tab-button" data-tab="webcam">Webcam</button>
262
+ <button class="tab-button" data-tab="draw">Draw</button>
263
+ </div>
264
+
265
+ <!-- Tab Contents -->
266
+ <div class="tab-content upload-tab">
267
+ <h3>Upload and Analyze Image</h3>
268
+ <input type="file" id="video-image-upload" accept="image/*" />
269
+ <canvas id="video-image-canvas"></canvas>
270
+ <button id="analyze-button">Analyze</button>
271
+ </div>
272
+
273
+ <div class="tab-content webcam-tab hidden">
274
+ <h3>Webcam Capture</h3>
275
+ <video id="webcam-video" autoplay playsinline></video>
276
+ <button id="capture-webcam-button">Explain Image</button>
277
+ </div>
278
+
279
+ <div class="tab-content draw-tab hidden">
280
+ <h3>Draw on Canvas</h3>
281
+ <canvas id="draw-canvas"></canvas>
282
+ <div class="draw-controls">
283
+ <button id="clear-draw-button">Clear Drawing</button>
284
+ <label for="draw-color">Color:</label>
285
+ <input type="color" id="draw-color" value="#000000">
286
+ <label for="draw-size">Size:</label>
287
+ <input type="range" id="draw-size" min="1" max="10" value="2">
288
+ <button id="discuss-button">Discuss</button>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+
294
+
295
+ </div>
296
+ </div>
297
+ </div>
298
+ <!-- --------------------Digital Human Mentor Video Content Ends----------------- -->
299
+
300
+
301
+
302
+
303
+
304
+ <!-- --------------------Coder Content Starts------------------------------------- -->
305
+ <div id="coder" class="content-section hidden">
306
+ <div class="card coder-card">
307
+ <!-- Wrapper for Top Options -->
308
+ <div class="coder-options">
309
+ <!-- Model Selection Section -->
310
+ <div id="coder-model-selection-container" class="option-section">
311
+ <label for="coder-model-selection">Select Model:</label>
312
+ <div class="option-control-group">
313
+ <select id="coder-model-selection"></select>
314
+ <button id="coder-download" disabled>Initialize Model</button>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Voice Selection Section -->
319
+ <div id="coder-tool-selection-container" class="option-section">
320
+ <label for="coder-tools">Select Voice:</label>
321
+ <select id="coder-tools"></select>
322
+ </div>
323
+
324
+ <!-- Speech Controls Section -->
325
+ <div id="coder-speech-controls" class="option-section">
326
+ <label for="coder-speech-rate">Speech Rate:</label>
327
+ <input type="range" id="coder-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
328
+
329
+ <label for="coder-speech-pitch">Speech Pitch:</label>
330
+ <input type="range" id="coder-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
331
+ </div>
332
+
333
+ <!-- Logs Section -->
334
+ <div id="coder-logs-container" class="option-section">
335
+ <h3>Logs</h3>
336
+ <div id="coder-logs">
337
+ <!-- Logs will appear here -->
338
+ </div>
339
+ <button id="coder-clear-logs">Clear Logs</button>
340
+ </div>
341
+ </div>
342
+ <!-- End of Top Options Wrapper -->
343
+
344
+ <!-- Wrapper for Chat and Python Interpreter -->
345
+ <div class="coder-main" style="display: flex; flex-direction: row; gap: 20px;">
346
+ <!-- Chat Window Section -->
347
+ <div class="chat-window" style="flex: 2;">
348
+ <!-- Chat Box Section -->
349
+ <div id="coder-chat-container">
350
+ <div id="coder-chat-box">
351
+ <!-- Chat messages will appear here -->
352
+ </div>
353
+
354
+ <!-- Chat Stats -->
355
+ <div id="coder-chat-stats" class="hidden">Runtime Stats: N/A</div>
356
+
357
+ <!-- Chat Input Section -->
358
+ <div id="coder-text-input-container">
359
+ <input type="text" id="coder-text-input" placeholder="Type your message here..." disabled>
360
+ <button id="coder-submit-button" disabled>Send</button>
361
+ </div>
362
+
363
+ <!-- Microphone Controls -->
364
+ <div id="coder-mic-container">
365
+ <button id="coder-start_button" aria-label="Start Voice Input" disabled>
366
+ <!-- Mic Icon SVG -->
367
+ <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
368
+ <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>
369
+ </svg>
370
+ </button>
371
+ <button id="coder-stop_button" aria-label="Stop Speech" disabled>
372
+ <!-- Stop Icon SVG -->
373
+ <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
374
+ <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
375
+ </svg>
376
+ </button>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Loading Spinner -->
381
+ <div id="coder-loading-spinner" class="hidden">
382
+ <div class="spinner"></div>
383
+ </div>
384
+
385
+ <!-- Configuration Info -->
386
+ <div id="coder-configuration" class="hidden">
387
+ <p>Model Initialized: <span id="coder-selected-model">N/A</span></p>
388
+ </div>
389
+ </div>
390
+ <!-- End of Chat Window Section -->
391
+
392
+ <!-- Python Interpreter Section -->
393
+ <div id="coder-python-container" style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
394
+ <iframe src="https://pyodide.org/en/stable/console.html" style="flex: 1; border: none; border-radius: var(--border-radius);"></iframe>
395
+ </div>
396
+ <!-- End of Python Interpreter Section -->
397
+ </div>
398
+ <!-- End of Wrapper for Chat and Python Interpreter -->
399
+
400
+ <!-- Loading Spinner and Configuration Info (if any additional) can remain as is -->
401
+ </div>
402
+ </div>
403
+ <!-- --------------------Coder Content Ends---------------------------------------- -->
404
+
405
+
406
+
407
+
408
+ <!-- --------------------Math Content Starts--------------------------------------- -->
409
+ <div id="advanced-math" class="content-section hidden">
410
+ <div class="card advanced-math-card">
411
+ <!-- Top Controls -->
412
+ <div class="math-options">
413
+ <!-- Model Selection Section -->
414
+ <div id="math-model-selection-container" class="option-section">
415
+ <label for="math-model-selection">Select Math Model:</label>
416
+ <select id="math-model-selection"></select>
417
+ <button id="math-download" disabled>Initialize Model</button>
418
+ </div>
419
+
420
+ <!-- Tool Selection Section -->
421
+ <div id="math-tool-selection-container" class="option-section">
422
+ <label for="math-tools">Select Voice:</label>
423
+ <select id="math-tools"></select>
424
+ </div>
425
+
426
+ <!-- Speech Controls Section -->
427
+ <div id="math-speech-controls" class="option-section">
428
+ <label for="math-speech-rate">Speech Rate:</label>
429
+ <input type="range" id="math-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
430
+
431
+ <label for="math-speech-pitch">Speech Pitch:</label>
432
+ <input type="range" id="math-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
433
+ </div>
434
+
435
+ <!-- Logs Section -->
436
+ <div id="math-logs-container" class="option-section">
437
+ <h3>Logs</h3>
438
+ <div id="math-logs">
439
+ <!-- Logs will appear here -->
440
+ </div>
441
+ <button id="math-clear-logs">Clear Logs</button>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Chat Window Section -->
446
+ <div class="chat-window">
447
+ <!-- Chat Box Section -->
448
+ <div id="math-chat-container">
449
+ <div id="math-chat-box">
450
+ <!-- Chat messages will appear here -->
451
+ </div>
452
+
453
+ <!-- Chat Stats -->
454
+ <div id="math-chat-stats" class="hidden">Runtime Stats: N/A</div>
455
+
456
+ <!-- Chat Input Section -->
457
+ <div id="math-text-input-container">
458
+ <input type="text" id="math-text-input" placeholder="Type your math problem here..." disabled>
459
+ <button id="math-submit-button" disabled>Submit</button>
460
+ </div>
461
+
462
+ <!-- Microphone Controls -->
463
+ <div id="math-mic-container">
464
+ <button id="math-start_button" aria-label="Start Voice Input" disabled>
465
+ <!-- Mic Icon SVG -->
466
+ <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
467
+ <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>
468
+ </svg>
469
+ </button>
470
+ <button id="math-stop_button" aria-label="Stop Speech" disabled>
471
+ <!-- Stop Icon SVG -->
472
+ <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
473
+ <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
474
+ </svg>
475
+ </button>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- Loading Spinner -->
480
+ <div id="math-loading-spinner" class="hidden">
481
+ <div class="spinner"></div>
482
+ </div>
483
+
484
+ <!-- Configuration Info -->
485
+ <div id="math-configuration" class="hidden">
486
+ <p>Model Initialized: <span id="math-selected-model">N/A</span></p>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ <!-- --------------------Math Content Ends----------------------------------------------- -->
492
+
493
+
494
+
495
+
496
+ <!-- --------------------Interdisciplinary Content Starts-------------------------------- -->
497
+ <div id="interdisciplinary" class="content-section hidden">
498
+ <div class="card interdisciplinary-card">
499
+ <!-- Interdisciplinary Studies Assistant Layout -->
500
+ <div class="inter-options">
501
+ <!-- Model Selection Section -->
502
+ <div id="inter-model-selection-container" class="option-section">
503
+ <label for="inter-model-selection">Select Model:</label>
504
+ <select id="inter-model-selection"></select>
505
+ <button id="inter-download" disabled>Initialize Model</button>
506
+ </div>
507
+
508
+ <!-- Voice Selection Section -->
509
+ <div id="inter-tool-selection-container" class="option-section">
510
+ <label for="inter-tools">Select Voice:</label>
511
+ <select id="inter-tools"></select>
512
+ </div>
513
+
514
+ <!-- Speech Controls Section -->
515
+ <div id="inter-speech-controls" class="option-section">
516
+ <label for="speech-rate">Speech Rate:</label>
517
+ <input type="range" id="speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
518
+
519
+ <label for="speech-pitch">Speech Pitch:</label>
520
+ <input type="range" id="speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
521
+ </div>
522
+
523
+ <!-- Logs Section -->
524
+ <div id="inter-logs-container" class="option-section">
525
+ <h3>Logs</h3>
526
+ <div id="inter-logs">
527
+ <!-- Logs will appear here -->
528
+ </div>
529
+ <button id="inter-clear-logs">Clear Logs</button>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="chat-window">
534
+ <!-- Chat Box Section -->
535
+ <div id="inter-chat-container">
536
+ <div id="inter-chat-box">
537
+ <!-- Chat messages will appear here -->
538
+ </div>
539
+
540
+ <!-- Chat Stats -->
541
+ <div id="inter-chat-stats" class="hidden">Runtime Stats: N/A</div>
542
+
543
+ <!-- Chat Input Section -->
544
+ <div id="inter-text-input-container">
545
+ <input type="text" id="inter-text-input" placeholder="Type your message here..." disabled>
546
+ <button id="inter-submit-button" disabled>Send</button>
547
+ </div>
548
+
549
+ <!-- Microphone Controls -->
550
+ <div id="inter-mic-container">
551
+ <button id="inter-start_button" aria-label="Start Voice Input" disabled>
552
+ <!-- Mic Icon SVG -->
553
+ <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
554
+ <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>
555
+ </svg>
556
+ </button>
557
+ <button id="inter-stop_button" aria-label="Stop Speech" disabled>
558
+ <!-- Stop Icon SVG -->
559
+ <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
560
+ <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
561
+ </svg>
562
+ </button>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Loading Spinner -->
567
+ <div id="loading-spinner" class="hidden">
568
+ <div class="spinner"></div>
569
+ </div>
570
+
571
+ <!-- Configuration Info -->
572
+ <div id="inter-configuration" class="hidden">
573
+ <p>Model Initialized: <span id="inter-selected-model">N/A</span></p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ <!-- --------------------Interdisciplinary Content Ends------------------------------------- -->
579
+
580
+
581
+
582
+
583
+ <!-- --------------------Insights Content Starts------------------------------------------- -->
584
+ <div id="insights" class="content-section hidden">
585
+ <div class="card">
586
+
587
+ <!-- New: Insights Tabs -->
588
+ <div class="insights-tabs">
589
+ <button class="insights-tab-button active" data-insights-tab="pdf">Insights PDF</button>
590
+ <button class="insights-tab-button" data-insights-tab="images">Insights Images</button>
591
+ <button class="insights-tab-button" data-insights-tab="translator">Translator</button>
592
+ <button class="insights-tab-button" data-insights-tab="youtube">Youtube Summarizer</button>
593
+ </div>
594
+
595
+ <!-- New: Insights Tab Contents -->
596
+ <div class="insights-tab-content">
597
+ <!-- Insights PDF Content -->
598
+ <div id="pdf" class="insights-content active">
599
+ <iframe
600
+ src="https://cin-model-kotaemon-demo.hf.space/"
601
+ width="100%"
602
+ height="600px"
603
+ style="border: none; border-radius: 12px;"
604
+ title="Insights PDF"
605
+ ></iframe>
606
+ </div>
607
+
608
+ <!-- Insights Images Content -->
609
+ <div id="images" class="insights-content hidden">
610
+ <iframe
611
+ src="https://adrienb134-rag-colpali-qwen2vl.hf.space/"
612
+ width="100%"
613
+ height="600px"
614
+ style="border: none; border-radius: 12px;"
615
+ title="Insights PDF"
616
+ ></iframe>
617
+ </div>
618
+
619
+ <!-- Translator Content -->
620
+ <div id="translator" class="insights-content hidden">
621
+ <p>Content for Translator will go here.</p>
622
+ </div>
623
+
624
+ <!-- Youtube Summarizer Content -->
625
+ <div id="youtube" class="insights-content hidden">
626
+ <p>Content for Youtube Summarizer will go here.</p>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ <!-- --------------------Insights Content Ends------------------------------------------- -->
632
+
633
+
634
+
635
+ <!-- --------------------Podcast Content Starts------------------------------------------- -->
636
+ <div id="podcast" class="content-section hidden">
637
+ <div class="card">
638
+
639
+ <!-- Podcast Tabs -->
640
+ <div class="podcast-tabs">
641
+ <button class="podcast-tab-button active" data-podcast-tab="document-podcast">Document Podcast</button>
642
+ <button class="podcast-tab-button" data-podcast-tab="conversational-podcast">Conversational Podcast</button>
643
+ </div>
644
+
645
+ <!-- Podcast Tab Contents -->
646
+ <div class="podcast-tab-content">
647
+ <!-- Document Podcast Content -->
648
+ <div id="document-podcast" class="podcast-content active">
649
+ <iframe src="https://lamm-mit-pdf2audio.hf.space/"
650
+ width="100%"
651
+ height="600px"
652
+ style="border: none; border-radius: 12px;"
653
+ title="Document Podcast">
654
+ </iframe>
655
+ </div>
656
+
657
+ <!-- Conversational Podcast Content -->
658
+ <div id="conversational-podcast" class="podcast-content hidden">
659
+ <iframe src="https://gabrielchua-open-notebooklm.hf.space/"
660
+ width="100%"
661
+ height="600px"
662
+ style="border: none; border-radius: 12px;"
663
+ title="Conversational Podcast">
664
+ </iframe>
665
+ </div>
666
+ </div>
667
+ <!-- End of Podcast Tab Contents -->
668
+
669
+ </div>
670
+ </div>
671
+ <!-- --------------------Podcast Content Ends--------------------------------------------- -->
672
+
673
+
674
+
675
+
676
+
677
+
678
+ <!-- --------------------3D Explorer Content Starts------------------------------------------- -->
679
+ <div id="3d-explorer" class="content-section hidden">
680
+ <div class="card">
681
+ <!-- 3D Explorer Tabs -->
682
+ <div class="explorer-tabs">
683
+ <button class="explorer-tab-button active" data-explorer-tab="stable-fast-3d">Fast 3D</button>
684
+ <button class="explorer-tab-button" data-explorer-tab="3dtopia-xl">Quality 3D</button>
685
+ </div>
686
+
687
+ <!-- 3D Explorer Tab Contents -->
688
+ <div class="explorer-tab-content">
689
+ <!-- Stable Fast 3D Content -->
690
+ <div id="stable-fast-3d" class="explorer-content active">
691
+ <iframe src="https://stabilityai-stable-fast-3d.hf.space/"
692
+ width="100%"
693
+ height="600px"
694
+ style="border: none; border-radius: 12px;"
695
+ title="Fast 3D">
696
+ </iframe>
697
+ </div>
698
+
699
+ <!-- 3Dtopia XL Content -->
700
+ <div id="3dtopia-xl" class="explorer-content hidden">
701
+ <iframe src="https://frozenburning-3dtopia-xl.hf.space/"
702
+ width="100%"
703
+ height="600px"
704
+ style="border: none; border-radius: 12px;"
705
+ title="Quality 3D">
706
+ </iframe>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ <!-- --------------------3D Explorer Content Ends--------------------------------------------- -->
712
+
713
+
714
+
715
+
716
+
717
+ <!-- --------------------Magazines Base Starts------------------------------------------- -->
718
+ <div id="magazines-base" class="content-section hidden">
719
+ <div class="card">
720
+ <h2>Classic Magazines Collection</h2>
721
+ <p>Content for magazines.</p>
722
+ </div>
723
+ </div>
724
+ <!-- --------------------Magazines Base ends---------------------------------------------- -->
725
+
726
+
727
+
728
+ <!-- --------------------Treasured Teachings Starts------------------------------------------- -->
729
+ <div id="treasured-base" class="content-section hidden">
730
+ <div class="card">
731
+ <h2>Treasured Teachings</h2>
732
+ <p>Content for Treasured Teachings.</p>
733
+ </div>
734
+ </div>
735
+ <!-- --------------------Treasured Teachings ends---------------------------------------------- -->
736
+
737
+
738
+ <!-- --------------------Magazines Base Starts------------------------------------------- -->
739
+ <div id="books-base" class="content-section hidden">
740
+ <div class="card">
741
+ <h2>Books Collection</h2>
742
+ <p>Content for Books.</p>
743
+ </div>
744
+ </div>
745
+ <!-- --------------------Magazines Base ends---------------------------------------------- -->
746
+
747
+
748
+
749
+
750
+
751
+ <!-- --------------------Digital-dustin Starts------------------------------------------- -->
752
+ <div id="digitaldustbin-base" class="content-section hidden">
753
+ <div class="card">
754
+ <h2>Digital Dustbin</h2>
755
+ <p>Content for Digital Dustbin.</p>
756
+ </div>
757
+ </div>
758
+ <!-- --------------------Digital-dustin ends---------------------------------------------- -->
759
+
760
+
761
+
762
+
763
+ <div id="digital-twin" class="content-section hidden">
764
+ <div class="card">
765
+ <h2>Digital Twin</h2>
766
+ <p>Persona, Memory, Social Graph, Class Notes, Homework, Tracker.</p>
767
+ </div>
768
+ </div>
769
+ </div>
770
+
771
+
772
+
773
+
774
+ </div>
775
+
776
+ <!-- Include Axios from CDN -->
777
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
778
+
779
+ <!-- Include the necessary scripts -->
780
+ <script type="module">
781
+ // Sidebar navigation
782
+ const sidebarLinks = document.querySelectorAll('.sidebar a');
783
+ const contentSections = document.querySelectorAll('.content-section');
784
+
785
+ sidebarLinks.forEach(link => {
786
+ link.addEventListener('click', (e) => {
787
+ e.preventDefault();
788
+ // Remove active class from all links
789
+ sidebarLinks.forEach(l => l.classList.remove('active'));
790
+ // Add active class to the clicked link
791
+ link.classList.add('active');
792
+
793
+ // Hide all content sections
794
+ contentSections.forEach(section => section.classList.add('hidden'));
795
+
796
+ // Show the selected content section
797
+ const target = link.getAttribute('data-content');
798
+ document.getElementById(target).classList.remove('hidden');
799
+ });
800
+ });
801
+ </script>
802
+
803
+
804
+ <!-- Include the necessary scripts -->
805
+ <!-- Include Pyodide Script -->
806
+
807
+
808
+ <script type="module" src="digital.human.audio.js"> </script>
809
+ <script type="module" src="digital.human.video.js"> </script>
810
+ <script type="module" src="coder.js"> </script>
811
+ <script type="module" src="advanced.math.js"></script>
812
+ <script type="module" src="interdisciplinary.js"></script> <!-- New JS for Interdisciplinary -->
813
+ <script type="module" src="insights.js"></script>
814
+ <script type="module" src="podcast.js"></script>
815
+
816
+ <!-- Include the new script for 3D Explorer -->
817
+ <script type="module" src="3d-explorer.js"></script>
818
+
819
+ </body>
820
+ </html>
podcast.js ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // --------------------Podcast Tabs Functionality--------------------
2
+ const podcastTabButtons = document.querySelectorAll('.podcast-tab-button');
3
+ const podcastContents = document.querySelectorAll('.podcast-content');
4
+
5
+ podcastTabButtons.forEach(button => {
6
+ button.addEventListener('click', () => {
7
+ // Remove active class from all buttons
8
+ podcastTabButtons.forEach(btn => btn.classList.remove('active'));
9
+ // Add active class to the clicked button
10
+ button.classList.add('active');
11
+
12
+ // Hide all podcast content
13
+ podcastContents.forEach(content => {
14
+ content.classList.add('hidden');
15
+ content.classList.remove('active');
16
+ });
17
+
18
+ // Show the selected podcast content
19
+ const target = button.getAttribute('data-podcast-tab');
20
+ const targetContent = document.getElementById(target);
21
+ if (targetContent) {
22
+ targetContent.classList.remove('hidden');
23
+ targetContent.classList.add('active');
24
+ }
25
+ });
26
+ });
style.css ADDED
@@ -0,0 +1,558 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Reset and base styles */
2
+ * {
3
+ box-sizing: border-box;
4
+ margin: 0;
5
+ padding: 0;
6
+ }
7
+
8
+ body {
9
+ font-family: 'Inter', sans-serif;
10
+ background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
11
+ display: flex;
12
+ min-height: 100vh;
13
+ color: #333;
14
+ overflow: hidden;
15
+ }
16
+
17
+ /* Sidebar styling */
18
+ .sidebar {
19
+ width: 260px;
20
+ background: linear-gradient(135deg, #ffffff, #e0f7fa);
21
+ box-shadow: 2px 0 10px rgba(0,0,0,0.1);
22
+ flex-shrink: 0;
23
+ display: flex;
24
+ flex-direction: column;
25
+ padding: 30px 20px;
26
+ position: fixed;
27
+ height: 100%;
28
+ overflow-y: auto;
29
+ transition: width 0.3s ease, background 0.3s ease;
30
+ }
31
+
32
+ .sidebar h2 {
33
+ text-align: center;
34
+ margin-bottom: 40px;
35
+ font-family: 'Roboto', sans-serif;
36
+ font-weight: 700;
37
+ font-size: 1.8em;
38
+ color: #00796B;
39
+ background: linear-gradient(90deg, #00796B, #004D40);
40
+ -webkit-background-clip: text;
41
+ -webkit-text-fill-color: transparent;
42
+ }
43
+
44
+ .sidebar a {
45
+ color: #555555;
46
+ padding: 12px 15px;
47
+ text-decoration: none;
48
+ font-size: 1em;
49
+ border-radius: 8px;
50
+ margin-bottom: 10px;
51
+ transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
52
+ display: flex;
53
+ align-items: center;
54
+ background: linear-gradient(135deg, #ffffff, #f9f9f9);
55
+ }
56
+
57
+ .sidebar a:hover {
58
+ background: linear-gradient(135deg, #e0f7fa, #ffffff);
59
+ color: #00796B;
60
+ transform: translateX(5px);
61
+ box-shadow: 0 4px 12px rgba(0,0,0,0.05);
62
+ }
63
+
64
+ .sidebar a.active {
65
+ background: linear-gradient(135deg, #80deea, #4dd0e1);
66
+ color: #004d40;
67
+ font-weight: 600;
68
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
69
+ }
70
+
71
+ .sidebar a::before {
72
+ content: '';
73
+ display: inline-block;
74
+ width: 8px;
75
+ height: 8px;
76
+ background-color: #004d40;
77
+ border-radius: 50%;
78
+ margin-right: 12px;
79
+ opacity: 0;
80
+ transition: opacity 0.3s;
81
+ }
82
+
83
+ .sidebar a.active::before {
84
+ opacity: 1;
85
+ }
86
+
87
+ /* Main content styling */
88
+ .main-content {
89
+ margin-left: 260px;
90
+ padding: 30px;
91
+ flex: 1;
92
+ background: linear-gradient(135deg, #f9f9f9, #e0f2f1);
93
+ overflow-y: auto;
94
+ height: 100vh;
95
+ transition: margin-left 0.3s ease, background 0.3s ease;
96
+ }
97
+
98
+ /* Header */
99
+ .header {
100
+ display: flex;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ margin-bottom: 25px;
104
+ background: linear-gradient(90deg, #80deea, #4dd0e1);
105
+ padding: 15px 20px;
106
+ border-radius: 12px;
107
+ box-shadow: 0 4px 10px rgba(0,0,0,0.05);
108
+ }
109
+
110
+ .header h1 {
111
+ font-family: 'Roboto', sans-serif;
112
+ font-size: 2em;
113
+ color: #ffffff;
114
+ background: linear-gradient(90deg, #ffffff, #e0f7fa);
115
+ -webkit-background-clip: text;
116
+ -webkit-text-fill-color: transparent;
117
+ }
118
+
119
+ /* Card Styling */
120
+ .card {
121
+ background: linear-gradient(135deg, #ffffff, #f1f8e9);
122
+ border-radius: 16px;
123
+ box-shadow: 0 4px 20px rgba(0,0,0,0.05);
124
+ padding: 25px;
125
+ margin-bottom: 25px;
126
+ transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
127
+ }
128
+
129
+ .card:hover {
130
+ transform: translateY(-5px);
131
+ box-shadow: 0 6px 25px rgba(0,0,0,0.1);
132
+ background: linear-gradient(135deg, #e0f7fa, #ffffff);
133
+ }
134
+
135
+ /* Button Styling */
136
+ button {
137
+ background: linear-gradient(135deg, #00796B, #004D40);
138
+ border: none;
139
+ color: white;
140
+ padding: 12px 20px;
141
+ font-size: 1em;
142
+ border-radius: 8px;
143
+ cursor: pointer;
144
+ transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
145
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
146
+ }
147
+
148
+ button:hover {
149
+ background: linear-gradient(135deg, #005D56, #00332E);
150
+ transform: translateY(-2px);
151
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
152
+ }
153
+
154
+ button:disabled {
155
+ background: linear-gradient(135deg, #A5D6A7, #81C784);
156
+ cursor: not-allowed;
157
+ box-shadow: none;
158
+ }
159
+
160
+ /* Select Dropdown Styling */
161
+ select {
162
+ width: 100%;
163
+ padding: 10px 15px;
164
+ border: 1px solid #cccccc;
165
+ border-radius: 8px;
166
+ font-size: 1em;
167
+ background-color: #ffffff;
168
+ transition: border-color 0.3s, box-shadow 0.3s;
169
+ margin-bottom: 15px;
170
+ }
171
+
172
+ select:focus {
173
+ border-color: #00796B;
174
+ box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
175
+ outline: none;
176
+ }
177
+
178
+ /* Chat Box Styling */
179
+ #chat-box {
180
+ height: 400px;
181
+ border: 1px solid #e0e0e0;
182
+ border-radius: 12px;
183
+ overflow-y: auto;
184
+ padding: 20px;
185
+ background-color: #ffffff;
186
+ margin-bottom: 20px;
187
+ position: relative;
188
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
189
+ }
190
+
191
+ .message-container {
192
+ margin-bottom: 20px;
193
+ display: flex;
194
+ }
195
+
196
+ .message {
197
+ padding: 12px 18px;
198
+ border-radius: 20px;
199
+ max-width: 75%;
200
+ position: relative;
201
+ word-wrap: break-word;
202
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
203
+ font-size: 0.95em;
204
+ line-height: 1.4;
205
+ background-color: #f1f8e9;
206
+ transition: background-color 0.3s, box-shadow 0.3s;
207
+ }
208
+
209
+ .user .message {
210
+ background: #DCF8C6;
211
+ border-bottom-right-radius: 0;
212
+ }
213
+
214
+ .assistant .message {
215
+ background: #e3f2fd;
216
+ border-bottom-left-radius: 0;
217
+ }
218
+
219
+ /* Microphone Button Styling */
220
+ #mic-container {
221
+ text-align: center;
222
+ margin-top: 20px;
223
+ margin-bottom: 20px;
224
+ }
225
+
226
+ /* Updated Start Button */
227
+ #start_button {
228
+ background: linear-gradient(135deg, #00796B, #004D40);
229
+ border: none;
230
+ color: white;
231
+ padding: 15px;
232
+ border-radius: 50%;
233
+ cursor: pointer;
234
+ transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
235
+ width: 60px;
236
+ height: 60px;
237
+ display: flex;
238
+ justify-content: center;
239
+ align-items: center;
240
+ position: relative;
241
+ overflow: hidden;
242
+ box-shadow: 0 4px 10px rgba(0,0,0,0.1);
243
+ }
244
+
245
+ #start_button::before {
246
+ content: '';
247
+ position: absolute;
248
+ width: 200%;
249
+ height: 200%;
250
+ background: rgba(255, 255, 255, 0.3);
251
+ top: 50%;
252
+ left: 50%;
253
+ transform: translate(-50%, -50%) scale(0);
254
+ border-radius: 50%;
255
+ transition: transform 0.5s ease-out;
256
+ }
257
+
258
+ #start_button:active::before {
259
+ transform: translate(-50%, -50%) scale(1);
260
+ }
261
+
262
+ #start_button:disabled {
263
+ background: linear-gradient(135deg, #A5D6A7, #81C784);
264
+ cursor: not-allowed;
265
+ box-shadow: none;
266
+ }
267
+
268
+ #start_button:hover:not(:disabled) {
269
+ background: linear-gradient(135deg, #005D56, #00332E);
270
+ transform: scale(1.05);
271
+ box-shadow: 0 6px 15px rgba(0,0,0,0.15);
272
+ }
273
+
274
+ /* Icon Styling */
275
+ .mic-icon {
276
+ width: 30px;
277
+ height: 30px;
278
+ transition: transform 0.3s;
279
+ fill: #ffffff;
280
+ }
281
+
282
+ /* Animation for Mic Icon */
283
+ .mic-animate {
284
+ animation: pulse 2s infinite;
285
+ }
286
+
287
+ @keyframes pulse {
288
+ 0% {
289
+ transform: scale(1);
290
+ }
291
+ 50% {
292
+ transform: scale(1.2);
293
+ }
294
+ 100% {
295
+ transform: scale(1);
296
+ }
297
+ }
298
+
299
+ /* Logs Styling */
300
+ #logs {
301
+ height: 120px;
302
+ border: 1px solid #e0e0e0;
303
+ border-radius: 12px;
304
+ overflow-y: auto;
305
+ padding: 15px;
306
+ background-color: #f1f1f1;
307
+ font-size: 0.85em;
308
+ margin-bottom: 10px;
309
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
310
+ }
311
+
312
+ #clear-logs {
313
+ background: linear-gradient(135deg, #FF5252, #E53935);
314
+ border: none;
315
+ color: white;
316
+ padding: 10px 18px;
317
+ font-size: 0.9em;
318
+ cursor: pointer;
319
+ border-radius: 8px;
320
+ transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
321
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
322
+ }
323
+
324
+ #clear-logs:hover {
325
+ background: linear-gradient(135deg, #E53935, #D32F2F);
326
+ transform: scale(1.02);
327
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
328
+ }
329
+
330
+ /* Chat Stats */
331
+ #chat-stats {
332
+ font-size: 0.85em;
333
+ color: #555555;
334
+ text-align: center;
335
+ margin-top: 10px;
336
+ }
337
+
338
+ /* Voice Selection Container */
339
+ #tts-voice-container label {
340
+ display: block;
341
+ margin-bottom: 8px;
342
+ color: #555555;
343
+ font-weight: 500;
344
+ }
345
+
346
+ /* Hidden Class */
347
+ .hidden {
348
+ display: none;
349
+ }
350
+
351
+ /* Scrollbar Styling */
352
+ #chat-box::-webkit-scrollbar,
353
+ #logs::-webkit-scrollbar {
354
+ width: 8px;
355
+ }
356
+
357
+ #chat-box::-webkit-scrollbar-track,
358
+ #logs::-webkit-scrollbar-track {
359
+ background: #f1f1f1;
360
+ border-radius: 4px;
361
+ }
362
+
363
+ #chat-box::-webkit-scrollbar-thumb,
364
+ #logs::-webkit-scrollbar-thumb {
365
+ background: #cccccc;
366
+ border-radius: 4px;
367
+ }
368
+
369
+ #chat-box::-webkit-scrollbar-thumb:hover,
370
+ #logs::-webkit-scrollbar-thumb:hover {
371
+ background: #a8a8a8;
372
+ }
373
+
374
+ /* Responsive Adjustments */
375
+ @media (max-width: 768px) {
376
+ .sidebar {
377
+ width: 220px;
378
+ }
379
+
380
+ .main-content {
381
+ margin-left: 220px;
382
+ }
383
+ }
384
+
385
+ @media (max-width: 600px) {
386
+ .sidebar {
387
+ position: relative;
388
+ width: 100%;
389
+ height: auto;
390
+ flex-direction: row;
391
+ overflow-x: auto;
392
+ padding: 15px 10px;
393
+ }
394
+
395
+ .sidebar h2 {
396
+ display: none;
397
+ }
398
+
399
+ .sidebar a {
400
+ margin-right: 10px;
401
+ margin-bottom: 0;
402
+ padding: 10px 12px;
403
+ font-size: 0.9em;
404
+ }
405
+
406
+ .main-content {
407
+ margin-left: 0;
408
+ padding: 20px 15px;
409
+ }
410
+
411
+ .header {
412
+ flex-direction: column;
413
+ align-items: flex-start;
414
+ }
415
+
416
+ .header h1 {
417
+ margin-bottom: 10px;
418
+ font-size: 1.5em;
419
+ }
420
+ }
421
+
422
+ /* Controls Container Styling */
423
+ #controls {
424
+ display: flex;
425
+ gap: 10px;
426
+ margin-bottom: 15px;
427
+ flex-wrap: wrap;
428
+ }
429
+
430
+ /* Initialize Button Styling */
431
+ #download {
432
+ flex: 0 0 auto;
433
+ background: linear-gradient(135deg, #00796B, #004D40);
434
+ border: none;
435
+ color: white;
436
+ padding: 10px 20px;
437
+ font-size: 1em;
438
+ border-radius: 8px;
439
+ cursor: pointer;
440
+ transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
441
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
442
+ }
443
+
444
+ #download:hover {
445
+ background: linear-gradient(135deg, #005D56, #00332E);
446
+ transform: translateY(-2px);
447
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
448
+ }
449
+
450
+ #download:disabled {
451
+ background: linear-gradient(135deg, #A5D6A7, #81C784);
452
+ cursor: not-allowed;
453
+ box-shadow: none;
454
+ }
455
+
456
+ /* Enhanced Layout for Digital Human Mentor Voice Section */
457
+ #voice .card {
458
+ display: grid;
459
+ grid-template-columns: 1fr 1fr;
460
+ grid-gap: 20px;
461
+ }
462
+
463
+ /* Adjust controls and voice selection */
464
+ #model-selection-container,
465
+ #tts-voice-container {
466
+ display: flex;
467
+ flex-direction: column;
468
+ }
469
+
470
+ #model-selection-container label,
471
+ #tts-voice-container label {
472
+ margin-bottom: 5px;
473
+ font-weight: 500;
474
+ color: #555555;
475
+ }
476
+
477
+ /* Chat and Controls Layout */
478
+ #chat-container {
479
+ display: flex;
480
+ flex-direction: column;
481
+ }
482
+
483
+ /* Ensure chat-box takes full width */
484
+ #chat-box {
485
+ width: 100%;
486
+ }
487
+
488
+ /* Adjust microphone container */
489
+ #mic-container {
490
+ display: flex;
491
+ justify-content: center;
492
+ margin-bottom: 20px;
493
+ }
494
+
495
+ /* Configuration Info */
496
+ #configuration {
497
+ margin-top: 15px;
498
+ font-size: 0.9em;
499
+ color: #555555;
500
+ }
501
+
502
+ /* Responsive Grid Adjustments */
503
+ @media (max-width: 800px) {
504
+ #voice .card {
505
+ grid-template-columns: 1fr;
506
+ }
507
+ }
508
+
509
+
510
+
511
+ /* Add New styles for the chat input container */
512
+ #text-input-container {
513
+ display: flex;
514
+ gap: 10px;
515
+ margin-top: 10px;
516
+ }
517
+
518
+ #text-input {
519
+ flex: 1;
520
+ padding: 10px 15px;
521
+ border: 1px solid #cccccc;
522
+ border-radius: 8px;
523
+ font-size: 1em;
524
+ background-color: #ffffff;
525
+ transition: border-color 0.3s, box-shadow 0.3s;
526
+ }
527
+
528
+ #text-input:focus {
529
+ border-color: #00796B;
530
+ box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
531
+ outline: none;
532
+ }
533
+
534
+ #submit-button {
535
+ background: linear-gradient(135deg, #00796B, #004D40);
536
+ border: none;
537
+ color: white;
538
+ padding: 10px 20px;
539
+ font-size: 1em;
540
+ border-radius: 8px;
541
+ cursor: pointer;
542
+ transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
543
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
544
+ }
545
+
546
+ #submit-button:hover {
547
+ background: linear-gradient(135deg, #005D56, #00332E);
548
+ transform: translateY(-2px);
549
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
550
+ }
551
+
552
+ #submit-button:disabled {
553
+ background: linear-gradient(135deg, #A5D6A7, #81C784);
554
+ cursor: not-allowed;
555
+ box-shadow: none;
556
+ }
557
+
558
+