Hugging Face's logo

Spaces:
Dharun72
/
StackOverflow
Running

App Files Community
Dharun72 commited on
Commit
ab9f989
·
verified ·
1 Parent(s): 11dce8e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +594 -19
index.html CHANGED
@@ -1,19 +1,594 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Stack Overflow - Where Developers Learn, Share, & Build</title>
7
+ <style>
8
+ /* --- RESET & BASIC VARS --- */
9
+ :root {
10
+ --orange: #f48024;
11
+ --black: #232629;
12
+ --black-700: #525960;
13
+ --blue: #0a95ff;
14
+ --blue-dark: #0074cc;
15
+ --bg-body: #f8f9f9;
16
+ --white: #ffffff;
17
+ --border: #d6d9dc;
18
+ --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.05);
19
+ }
20
+
21
+ * { box-sizing: border-box; }
22
+ body {
23
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
24
+ background-color: var(--bg-body);
25
+ color: var(--black);
26
+ margin: 0;
27
+ display: flex;
28
+ flex-direction: column;
29
+ min-height: 100vh;
30
+ }
31
+
32
+ /* --- HEADER --- */
33
+ header {
34
+ background-color: var(--bg-body);
35
+ border-top: 3px solid var(--orange);
36
+ box-shadow: 0 1px 2px rgba(0,0,0,0.1);
37
+ position: fixed;
38
+ width: 100%;
39
+ top: 0;
40
+ z-index: 100;
41
+ height: 50px;
42
+ display: flex;
43
+ align-items: center;
44
+ padding: 0 20px;
45
+ }
46
+
47
+ .logo {
48
+ font-size: 1.2rem;
49
+ font-weight: bold;
50
+ margin-right: 20px;
51
+ display: flex;
52
+ align-items: center;
53
+ cursor: pointer;
54
+ }
55
+ .logo span:first-child { margin-right: 5px; }
56
+ /* Stack Icon Mock */
57
+ .icon-stack { width: 25px; height: 25px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 37"><path d="M26 33v-9h4v13H0V24h4v9h22Z" fill="%23BCBBBB"/><path d="M21.5 0l-2.7 2 9.9 13.3 2.7-2L21.5 0ZM26 18.4L13.3 7.8l2.1-2.5 12.7 10.6-2.1 2.5ZM9.1 15.2l15 7 1.4-3-15-7-1.4 3Zm14 10.79l.68-2.95-16.1-3.35L7 23l16.1 2.99ZM23 30H7v-3h16v3Z" fill="%23F48024"/></svg>') no-repeat center; background-size: contain; }
58
+
59
+ .search-bar {
60
+ flex-grow: 1;
61
+ max-width: 700px;
62
+ position: relative;
63
+ }
64
+ .search-bar input {
65
+ width: 100%;
66
+ padding: 8px 10px 8px 35px;
67
+ border: 1px solid #babfc4;
68
+ border-radius: 3px;
69
+ font-size: 13px;
70
+ }
71
+ .search-icon {
72
+ position: absolute;
73
+ left: 10px;
74
+ top: 50%;
75
+ transform: translateY(-50%);
76
+ color: #888;
77
+ }
78
+
79
+ .nav-links {
80
+ margin-left: auto;
81
+ display: flex;
82
+ gap: 15px;
83
+ font-size: 13px;
84
+ color: var(--black-700);
85
+ }
86
+ .nav-btn {
87
+ padding: 8px 12px;
88
+ border-radius: 3px;
89
+ cursor: pointer;
90
+ }
91
+ .nav-btn.primary { background-color: #e1ecf4; color: #39739d; }
92
+ .nav-btn.blue { background-color: var(--blue); color: var(--white); }
93
+
94
+ /* --- LAYOUT --- */
95
+ .container {
96
+ display: flex;
97
+ max-width: 1264px;
98
+ width: 100%;
99
+ margin: 50px auto 0;
100
+ flex: 1;
101
+ }
102
+
103
+ /* --- SIDEBAR --- */
104
+ .sidebar {
105
+ width: 164px;
106
+ flex-shrink: 0;
107
+ padding: 20px 0;
108
+ border-right: 1px solid var(--border);
109
+ font-size: 13px;
110
+ }
111
+ .sidebar ul { list-style: none; padding: 0; margin: 0; }
112
+ .sidebar li { margin-bottom: 5px; }
113
+ .sidebar a {
114
+ text-decoration: none;
115
+ color: var(--black-700);
116
+ display: block;
117
+ padding: 8px 10px;
118
+ }
119
+ .sidebar a.active {
120
+ font-weight: bold;
121
+ color: var(--black);
122
+ background-color: #f1f2f3;
123
+ border-right: 3px solid var(--orange);
124
+ }
125
+
126
+ /* --- CONTENT --- */
127
+ .content {
128
+ flex-grow: 1;
129
+ padding: 24px;
130
+ }
131
+ .content-header {
132
+ display: flex;
133
+ justify-content: space-between;
134
+ align-items: center;
135
+ margin-bottom: 24px;
136
+ }
137
+ .content-header h1 { font-size: 27px; margin: 0; font-weight: 400; }
138
+ .ask-btn {
139
+ background-color: var(--blue);
140
+ color: white;
141
+ border: none;
142
+ padding: 10px 15px;
143
+ border-radius: 3px;
144
+ font-size: 13px;
145
+ cursor: pointer;
146
+ box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
147
+ }
148
+
149
+ .filter-bar {
150
+ display: flex;
151
+ justify-content: flex-end;
152
+ margin-bottom: 15px;
153
+ border-bottom: 1px solid var(--border);
154
+ padding-bottom: 15px;
155
+ }
156
+ .btn-group { border: 1px solid var(--black-700); border-radius: 3px; display: flex; }
157
+ .btn-group button {
158
+ background: white;
159
+ border: none;
160
+ border-right: 1px solid var(--black-700);
161
+ padding: 8px 10px;
162
+ font-size: 12px;
163
+ cursor: pointer;
164
+ color: var(--black-700);
165
+ }
166
+ .btn-group button:last-child { border-right: none; }
167
+ .btn-group button.active { background-color: #e3e6e8; color: var(--black); }
168
+
169
+ /* --- QUESTIONS LIST --- */
170
+ .question-item {
171
+ display: flex;
172
+ padding: 16px;
173
+ border-bottom: 1px solid var(--border);
174
+ }
175
+ .stats {
176
+ display: flex;
177
+ flex-direction: column;
178
+ align-items: flex-end;
179
+ margin-right: 16px;
180
+ font-size: 13px;
181
+ gap: 6px;
182
+ min-width: 60px;
183
+ color: var(--black-700);
184
+ }
185
+ .stats .votes { color: var(--black); }
186
+ .stats .answers { border: 1px solid #48a868; color: #48a868; padding: 2px 4px; border-radius: 3px; }
187
+ .stats .answers.has-answers { background-color: #48a868; color: white; }
188
+
189
+ .q-summary { flex-grow: 1; }
190
+ .q-title {
191
+ color: var(--blue-dark);
192
+ font-size: 17px;
193
+ margin: 0 0 5px 0;
194
+ text-decoration: none;
195
+ cursor: pointer;
196
+ }
197
+ .q-excerpt {
198
+ font-size: 13px;
199
+ color: #3b4045;
200
+ margin: 0 0 8px 0;
201
+ line-height: 1.4;
202
+ display: -webkit-box;
203
+ -webkit-line-clamp: 2;
204
+ -webkit-box-orient: vertical;
205
+ overflow: hidden;
206
+ }
207
+ .tags { display: flex; gap: 5px; margin-bottom: 10px; }
208
+ .tag {
209
+ background-color: #e1ecf4;
210
+ color: #39739d;
211
+ font-size: 12px;
212
+ padding: 4px 6px;
213
+ border-radius: 3px;
214
+ text-decoration: none;
215
+ }
216
+ .user-card {
217
+ display: flex;
218
+ justify-content: flex-end;
219
+ font-size: 12px;
220
+ color: var(--black-700);
221
+ }
222
+
223
+ /* --- CHATBOT WIDGET --- */
224
+ .chat-toggle {
225
+ position: fixed;
226
+ bottom: 20px;
227
+ right: 20px;
228
+ width: 60px;
229
+ height: 60px;
230
+ background-color: var(--orange);
231
+ border-radius: 50%;
232
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
233
+ display: flex;
234
+ justify-content: center;
235
+ align-items: center;
236
+ cursor: pointer;
237
+ z-index: 1000;
238
+ transition: transform 0.2s;
239
+ }
240
+ .chat-toggle:hover { transform: scale(1.05); }
241
+ .chat-toggle svg { width: 30px; height: 30px; fill: white; }
242
+
243
+ .chat-window {
244
+ position: fixed;
245
+ bottom: 90px;
246
+ right: 20px;
247
+ width: 350px;
248
+ height: 500px;
249
+ background-color: white;
250
+ border: 1px solid var(--border);
251
+ border-radius: 8px;
252
+ box-shadow: 0 5px 20px rgba(0,0,0,0.15);
253
+ display: flex;
254
+ flex-direction: column;
255
+ z-index: 999;
256
+ transform-origin: bottom right;
257
+ transform: scale(0);
258
+ transition: transform 0.3s ease;
259
+ overflow: hidden;
260
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
261
+ }
262
+ .chat-window.open { transform: scale(1); }
263
+
264
+ .chat-header {
265
+ background-color: var(--orange);
266
+ color: white;
267
+ padding: 15px;
268
+ font-weight: bold;
269
+ display: flex;
270
+ justify-content: space-between;
271
+ align-items: center;
272
+ }
273
+ .chat-close { cursor: pointer; font-size: 1.2rem; }
274
+
275
+ .chat-messages {
276
+ flex-grow: 1;
277
+ padding: 15px;
278
+ overflow-y: auto;
279
+ background-color: #f1f2f3;
280
+ display: flex;
281
+ flex-direction: column;
282
+ gap: 10px;
283
+ }
284
+
285
+ .message {
286
+ max-width: 85%;
287
+ padding: 10px;
288
+ border-radius: 8px;
289
+ font-size: 14px;
290
+ line-height: 1.4;
291
+ word-wrap: break-word;
292
+ }
293
+ .message.bot {
294
+ background-color: white;
295
+ align-self: flex-start;
296
+ border: 1px solid #e0e0e0;
297
+ }
298
+ .message.user {
299
+ background-color: #dbeafe; /* Light blue */
300
+ align-self: flex-end;
301
+ color: #1e40af;
302
+ }
303
+ .message strong { font-weight: bold; }
304
+ .message code {
305
+ background-color: #f6f6f6;
306
+ padding: 2px 4px;
307
+ border-radius: 3px;
308
+ font-family: monospace;
309
+ font-size: 90%;
310
+ }
311
+ .message pre {
312
+ background-color: #f6f6f6;
313
+ padding: 10px;
314
+ border-radius: 5px;
315
+ overflow-x: auto;
316
+ margin: 5px 0;
317
+ }
318
+
319
+ .chat-input-area {
320
+ padding: 10px;
321
+ border-top: 1px solid var(--border);
322
+ display: flex;
323
+ gap: 5px;
324
+ background: white;
325
+ }
326
+ .chat-input-area input {
327
+ flex-grow: 1;
328
+ padding: 10px;
329
+ border: 1px solid var(--border);
330
+ border-radius: 4px;
331
+ outline: none;
332
+ }
333
+ .chat-input-area input:focus { border-color: var(--blue); }
334
+ .chat-send {
335
+ background-color: var(--blue);
336
+ color: white;
337
+ border: none;
338
+ padding: 0 15px;
339
+ border-radius: 4px;
340
+ cursor: pointer;
341
+ font-weight: bold;
342
+ }
343
+ .chat-send:disabled { background-color: #ccc; cursor: not-allowed; }
344
+
345
+ /* Loading Dots */
346
+ .typing-indicator { font-style: italic; color: #888; font-size: 12px; margin-left: 5px; display: none; }
347
+ </style>
348
+ </head>
349
+ <body>
350
+
351
+ <header>
352
+ <div class="logo">
353
+ <div class="icon-stack"></div>
354
+ <span>stack</span><b>overflow</b>
355
+ </div>
356
+ <div class="search-bar">
357
+ <span class="search-icon">🔍</span>
358
+ <input type="text" placeholder="Search...">
359
+ </div>
360
+ <div class="nav-links">
361
+ <div class="nav-btn primary">Log in</div>
362
+ <div class="nav-btn blue">Sign up</div>
363
+ </div>
364
+ </header>
365
+
366
+ <div class="container">
367
+ <nav class="sidebar">
368
+ <ul>
369
+ <li><a href="#" class="active">Home</a></li>
370
+ <li><span style="padding: 8px 10px; color: #888; text-transform: uppercase; font-size: 11px;">Public</span></li>
371
+ <li><a href="#">Questions</a></li>
372
+ <li><a href="#">Tags</a></li>
373
+ <li><a href="#">Users</a></li>
374
+ <li><a href="#">Companies</a></li>
375
+ </ul>
376
+ </nav>
377
+
378
+ <main class="content">
379
+ <div class="content-header">
380
+ <h1>Top Questions</h1>
381
+ <button class="ask-btn">Ask Question</button>
382
+ </div>
383
+
384
+ <div class="filter-bar">
385
+ <div class="btn-group">
386
+ <button class="active">Interesting</button>
387
+ <button>Hot</button>
388
+ <button>Week</button>
389
+ <button>Month</button>
390
+ </div>
391
+ </div>
392
+
393
+ <div id="questions-list">
394
+ <div class="question-item">
395
+ <div class="stats">
396
+ <div class="votes"><strong>12</strong> votes</div>
397
+ <div class="answers has-answers"><strong>4</strong> answers</div>
398
+ <div class="views">123 views</div>
399
+ </div>
400
+ <div class="q-summary">
401
+ <div class="q-title">How do I merge two dictionaries in a single expression in Python?</div>
402
+ <div class="q-excerpt">I want to merge two dictionaries into a new one. I have x = {'a': 1, 'b': 2} and y = {'b': 3, 'c': 4}. I want z = {'a': 1, 'b': 3, 'c': 4}. How do I do this effectively?</div>
403
+ <div class="tags">
404
+ <a href="#" class="tag">python</a>
405
+ <a href="#" class="tag">dictionary</a>
406
+ <a href="#" class="tag">merge</a>
407
+ </div>
408
+ <div class="user-card">asked 2 min ago by <strong>py_dev_99</strong></div>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="question-item">
413
+ <div class="stats">
414
+ <div class="votes"><strong>5</strong> votes</div>
415
+ <div class="answers"><strong>0</strong> answers</div>
416
+ <div class="views">45 views</div>
417
+ </div>
418
+ <div class="q-summary">
419
+ <div class="q-title">Java Stream API - filtering and collecting a list of objects</div>
420
+ <div class="q-excerpt">I have a list of Person objects. I want to filter out anyone under 18 and collect their names into a List&lt;String&gt;. What is the most concise way to do this using Streams?</div>
421
+ <div class="tags">
422
+ <a href="#" class="tag">java</a>
423
+ <a href="#" class="tag">stream-api</a>
424
+ <a href="#" class="tag">lambda</a>
425
+ </div>
426
+ <div class="user-card">asked 15 min ago by <strong>java_guru</strong></div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="question-item">
431
+ <div class="stats">
432
+ <div class="votes"><strong>0</strong> votes</div>
433
+ <div class="answers"><strong>0</strong> answers</div>
434
+ <div class="views">8 views</div>
435
+ </div>
436
+ <div class="q-summary">
437
+ <div class="q-title">Understanding Python's GIL (Global Interpreter Lock)</div>
438
+ <div class="q-excerpt">Can someone explain why Python has a GIL and how it affects multi-threaded applications? Is it possible to bypass it for CPU-bound tasks?</div>
439
+ <div class="tags">
440
+ <a href="#" class="tag">python</a>
441
+ <a href="#" class="tag">multithreading</a>
442
+ <a href="#" class="tag">gil</a>
443
+ </div>
444
+ <div class="user-card">asked 1 hour ago by <strong>concurrency_fan</strong></div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </main>
449
+ </div>
450
+
451
+ <div class="chat-toggle" id="chat-toggle" title="Ask AI Helper">
452
+ <svg viewBox="0 0 24 24">
453
+ <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
454
+ </svg>
455
+ </div>
456
+
457
+ <div class="chat-window" id="chat-window">
458
+ <div class="chat-header">
459
+ <span>Stack Overflow AI Helper</span>
460
+ <span class="chat-close" id="chat-close">×</span>
461
+ </div>
462
+ <div class="chat-messages" id="chat-messages">
463
+ <div class="message bot">
464
+ Hello! I am an AI assistant powered by Gemini Flash 1.5. I can help you with <strong>Python</strong> and <strong>Java</strong> queries.<br><br>To get started, please paste your Gemini API Key below. (It will not be stored permanently).
465
+ </div>
466
+ </div>
467
+ <div class="typing-indicator" id="typing-indicator">AI is typing...</div>
468
+ <div class="chat-input-area">
469
+ <input type="text" id="chat-input" placeholder="Type a message..." autocomplete="off">
470
+ <button class="chat-send" id="chat-send">Send</button>
471
+ </div>
472
+ </div>
473
+
474
+ <script>
475
+ // --- CHAT UI LOGIC ---
476
+ const toggleBtn = document.getElementById('chat-toggle');
477
+ const chatWindow = document.getElementById('chat-window');
478
+ const closeBtn = document.getElementById('chat-close');
479
+ const messagesContainer = document.getElementById('chat-messages');
480
+ const inputField = document.getElementById('chat-input');
481
+ const sendBtn = document.getElementById('chat-send');
482
+ const typingIndicator = document.getElementById('typing-indicator');
483
+
484
+ let apiKey = null;
485
+
486
+ toggleBtn.addEventListener('click', () => {
487
+ chatWindow.classList.toggle('open');
488
+ if(chatWindow.classList.contains('open')) inputField.focus();
489
+ });
490
+
491
+ closeBtn.addEventListener('click', () => {
492
+ chatWindow.classList.remove('open');
493
+ });
494
+
495
+ // Add message to chat
496
+ function addMessage(text, sender) {
497
+ const div = document.createElement('div');
498
+ div.classList.add('message', sender);
499
+
500
+ // Basic formatting for bot messages
501
+ if (sender === 'bot') {
502
+ // Convert simple markdown code blocks (```...```) to <pre>
503
+ let formatted = text.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');
504
+ // Convert inline code (`...`) to <code>
505
+ formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');
506
+ // Convert bold (**...**)
507
+ formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
508
+ div.innerHTML = formatted;
509
+ } else {
510
+ div.textContent = text;
511
+ }
512
+
513
+ messagesContainer.appendChild(div);
514
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
515
+ }
516
+
517
+ // --- GEMINI API LOGIC ---
518
+ async function callGemini(prompt) {
519
+ if (!apiKey) return;
520
+
521
+ typingIndicator.style.display = 'block';
522
+
523
+ const systemInstruction = `
524
+ You are a helpful assistant on a Stack Overflow-style website.
525
+ You are an expert in Python and Java.
526
+ 1. If the user asks a question about Python or Java, answer it clearly with code examples where necessary.
527
+ 2. If the user asks about other programming languages or general life topics, politely refuse and remind them you only handle Python and Java.
528
+ 3. Keep answers concise and helpful.
529
+ `;
530
+
531
+ const fullPrompt = systemInstruction + "\n\nUser Question: " + prompt;
532
+
533
+ const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-flash-latest:generateContent?key=${apiKey}`;
534
+
535
+ try {
536
+ const response = await fetch(url, {
537
+ method: 'POST',
538
+ headers: { 'Content-Type': 'application/json' },
539
+ body: JSON.stringify({
540
+ contents: [{
541
+ parts: [{ text: fullPrompt }]
542
+ }]
543
+ })
544
+ });
545
+
546
+ const data = await response.json();
547
+
548
+ if (data.error) {
549
+ addMessage("Error: " + data.error.message, 'bot');
550
+ } else {
551
+ const text = data.candidates[0].content.parts[0].text;
552
+ addMessage(text, 'bot');
553
+ }
554
+
555
+ } catch (err) {
556
+ addMessage("Network Error: Unable to reach Gemini API.", 'bot');
557
+ console.error(err);
558
+ } finally {
559
+ typingIndicator.style.display = 'none';
560
+ }
561
+ }
562
+
563
+ async function handleSend() {
564
+ const text = inputField.value.trim();
565
+ if (!text) return;
566
+
567
+ // Clear input
568
+ inputField.value = '';
569
+
570
+ // If API Key is not set yet, treat this input as the key
571
+ if (!apiKey) {
572
+ // Basic validation (Google API keys usually start with AIza)
573
+ if (text.startsWith('AIza') && text.length > 20) {
574
+ apiKey = text;
575
+ addMessage('API Key accepted! How can I help you with Python or Java today?', 'bot');
576
+ } else {
577
+ addMessage("That doesn't look like a valid Google API Key. It should start with 'AIza'. Please try again.", 'bot');
578
+ }
579
+ return;
580
+ }
581
+
582
+ // Normal chat flow
583
+ addMessage(text, 'user');
584
+ await callGemini(text);
585
+ }
586
+
587
+ sendBtn.addEventListener('click', handleSend);
588
+ inputField.addEventListener('keypress', (e) => {
589
+ if (e.key === 'Enter') handleSend();
590
+ });
591
+
592
+ </script>
593
+ </body>
594
+ </html>