Hugging Face's logo

Spaces:
udd542
/
anycoder-2f444013
Running

App Files Community
udd542 commited on
Commit
1cdc53d
·
verified ·
1 Parent(s): d02ac1d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +416 -698
index.html CHANGED
@@ -3,850 +3,568 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>White Hat AI - Uncensored AI Platform</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <style>
9
  :root {
10
- --white-shine: #ffffff;
11
- --white-bg: #f8f9ff;
12
- --white-glass: rgba(255, 255, 255, 0.85);
13
- --primary-blue: #0066ff;
14
- --deep-blue: #0044cc;
15
- --hacker-green: #00ff9d;
16
- --cyber-red: #ff0033;
17
- --cyber-purple: #7700ff;
18
- --text-dark: #111827;
19
- --text-light: #f8fafc;
20
- --glass-shadow: 0 8px 32px rgba(0, 102, 255, 0.1);
21
- --light-border: 1px solid rgba(0, 102, 255, 0.15);
22
  }
23
 
24
  * {
25
  box-sizing: border-box;
26
  margin: 0;
27
  padding: 0;
28
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
  }
30
 
31
  body {
32
- background: linear-gradient(135deg, var(--white-bg), #e6eeff);
33
- color: var(--text-dark);
34
  min-height: 100vh;
35
- overflow-x: hidden;
36
- line-height: 1.6;
 
 
 
37
  }
38
 
39
- .header {
40
- padding: 1.2rem 2rem;
41
- background: var(--white-glass);
42
- backdrop-filter: blur(10px);
43
  display: flex;
44
  justify-content: space-between;
45
  align-items: center;
46
- box-shadow: var(--glass-shadow);
47
- border-bottom: var(--light-border);
48
  position: sticky;
49
  top: 0;
50
  z-index: 100;
 
51
  }
52
 
53
- .logo {
54
- display: flex;
55
- align-items: center;
56
- gap: 12px;
57
- }
58
-
59
- .logo-icon {
60
- background: linear-gradient(135deg, var(--primary-blue), var(--cyber-purple));
61
- color: var(--white-shine);
62
- width: 40px;
63
- height: 40px;
64
- border-radius: 50%;
65
  display: flex;
66
  align-items: center;
67
- justify-content: center;
68
- font-size: 1.2rem;
69
- box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
70
  }
71
 
72
- .logo-text {
73
- font-weight: 700;
74
- font-size: 1.5rem;
75
- background: linear-gradient(135deg, var(--primary-blue), var(--cyber-purple));
76
- -webkit-background-clip: text;
77
- -webkit-text-fill-color: transparent;
78
  }
79
 
80
  .anycoder-link {
81
- background: var(--primary-blue);
82
- color: var(--white-shine);
83
  text-decoration: none;
84
- padding: 0.5rem 1rem;
85
- border-radius: 30px;
86
  font-size: 0.9rem;
87
- font-weight: 500;
88
- display: flex;
89
- align-items: center;
90
- gap: 8px;
91
- transition: all 0.3s ease;
92
- box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
93
  }
94
 
95
  .anycoder-link:hover {
96
- transform: translateY(-2px);
97
- box-shadow: 0 6px 16px rgba(0, 102, 255, 0.3);
98
- background: var(--deep-blue);
99
  }
100
 
101
- .container {
 
 
 
 
 
 
102
  display: grid;
103
- grid-template-columns: 300px 1fr;
104
- gap: 1.5rem;
105
- max-width: 1600px;
106
- margin: 1.5rem auto;
107
- padding: 0 1.5rem;
 
 
 
108
  }
109
 
110
- .ai-models-panel {
111
- background: var(--white-glass);
112
- border-radius: 20px;
 
 
113
  padding: 1.5rem;
114
- box-shadow: var(--glass-shadow);
115
- backdrop-filter: blur(10px);
116
- border: var(--light-border);
117
  display: flex;
118
  flex-direction: column;
119
- gap: 1.2rem;
120
  }
121
 
122
- .panel-title {
123
- font-size: 1.2rem;
124
- font-weight: 600;
125
  margin-bottom: 0.5rem;
126
- color: var(--deep-blue);
127
- display: flex;
128
- align-items: center;
129
- gap: 10px;
130
- }
131
-
132
- .ai-model {
133
- background: var(--white-shine);
134
- border-radius: 15px;
135
- padding: 1rem;
136
- cursor: pointer;
137
- transition: all 0.3s ease;
138
- border: var(--light-border);
139
  display: flex;
140
  align-items: center;
141
- gap: 12px;
142
- position: relative;
143
- overflow: hidden;
144
  }
145
 
146
- .ai-model::before {
147
- content: '';
148
- position: absolute;
149
- top: 0;
150
- left: 0;
151
- width: 4px;
152
- height: 100%;
153
- background: var(--primary-blue);
154
- transform: translateX(-100%);
155
- transition: transform 0.3s ease;
156
  }
157
 
158
- .ai-model:hover {
159
- transform: translateY(-3px);
160
- box-shadow: 0 8px 20px rgba(0, 102, 255, 0.15);
 
 
 
 
 
 
 
 
 
161
  }
162
 
163
- .ai-model:hover::before {
164
- transform: translateX(0);
 
 
165
  }
166
 
167
- .ai-model.active {
168
- border-left: 4px solid var(--hacker-green);
169
- background: linear-gradient(90deg, rgba(0, 102, 255, 0.05), transparent);
 
 
 
 
 
 
170
  }
171
 
172
- .ai-model.active .model-icon {
173
- transform: scale(1.1);
 
 
 
174
  }
175
 
176
- .model-icon {
177
- width: 40px;
178
- height: 40px;
179
- border-radius: 12px;
 
 
 
 
180
  display: flex;
181
  align-items: center;
182
  justify-content: center;
183
- color: var(--white-shine);
184
- font-size: 1.2rem;
185
- transition: transform 0.3s ease;
186
- }
187
-
188
- .gemini-icon {
189
- background: linear-gradient(135deg, #ea4335, #4285f4);
190
- }
191
-
192
- .ddg-icon {
193
- background: linear-gradient(135deg, #de5833, #4e8ef7);
194
- }
195
-
196
- .fraudgpt-icon {
197
- background: linear-gradient(135deg, #ff0033, #7700ff);
198
- }
199
-
200
- .uncensored-icon {
201
- background: linear-gradient(135deg, #00c6ff, #0072ff);
202
- }
203
-
204
- .deepseek-icon {
205
- background: linear-gradient(135deg, #00ff9d, #00b36b);
206
- }
207
-
208
- .model-info {
209
- flex-grow: 1;
210
  }
211
 
212
- .model-name {
213
- font-weight: 600;
214
- margin-bottom: 4px;
 
215
  }
216
 
217
- .model-description {
218
- font-size: 0.85rem;
219
- color: #64748b;
220
- }
221
-
222
- .chat-container {
223
- display: flex;
224
- flex-direction: column;
225
- background: var(--white-glass);
226
- border-radius: 20px;
227
- box-shadow: var(--glass-shadow);
228
- backdrop-filter: blur(10px);
229
- border: var(--light-border);
230
- overflow: hidden;
231
- min-height: 80vh;
232
- }
233
-
234
- .chat-header {
235
- padding: 1.2rem 1.5rem;
236
- border-bottom: var(--light-border);
237
- display: flex;
238
- align-items: center;
239
- gap: 12px;
240
- background: var(--white-shine);
241
  }
242
 
243
- .current-model {
244
- display: flex;
245
- align-items: center;
246
- gap: 10px;
247
  }
248
 
249
- .current-model-name {
250
- font-weight: 600;
251
- font-size: 1.1rem;
252
  }
253
 
254
- .tag {
255
- background: rgba(0, 102, 255, 0.1);
256
- color: var(--primary-blue);
257
- padding: 0.25rem 0.8rem;
258
- border-radius: 30px;
259
- font-size: 0.8rem;
260
- font-weight: 500;
261
  }
262
 
263
- .chat-messages {
264
- flex-grow: 1;
265
- padding: 1.5rem;
266
- overflow-y: auto;
267
- display: flex;
268
- flex-direction: column;
269
- gap: 1.5rem;
270
  }
271
 
272
- .message {
273
- max-width: 85%;
274
- padding: 1rem 1.5rem;
275
- border-radius: 18px;
276
  position: relative;
277
- animation: fadeIn 0.3s ease forwards;
278
- }
279
-
280
- @keyframes fadeIn {
281
- from {
282
- opacity: 0;
283
- transform: translateY(10px);
284
- }
285
- to {
286
- opacity: 1;
287
- transform: translateY(0);
288
- }
289
  }
290
 
291
- .user-message {
292
- background: linear-gradient(135deg, var(--primary-blue), var(--deep-blue));
293
- color: var(--white-shine);
294
- align-self: flex-end;
295
- border-bottom-right-radius: 5px;
296
  }
297
 
298
- .ai-message {
299
- background: var(--white-shine);
300
- align-self: flex-start;
301
- border: var(--light-border);
302
- border-bottom-left-radius: 5px;
 
 
 
 
 
 
 
303
  }
304
 
305
- .message-header {
306
- display: flex;
307
- align-items: center;
308
- gap: 8px;
309
- margin-bottom: 8px;
310
- font-weight: 600;
311
  }
312
 
313
- .message-content {
314
- line-height: 1.6;
 
 
 
 
 
315
  }
316
 
317
- .ai-message .message-header {
318
- color: var(--primary-blue);
 
 
319
  }
320
 
321
- .input-container {
322
- padding: 1.5rem;
323
- border-top: var(--light-border);
324
- background: var(--white-shine);
325
  }
326
 
327
- .input-box {
328
  display: flex;
329
  gap: 1rem;
330
- background: var(--white-bg);
331
- border-radius: 20px;
332
- padding: 0.5rem;
333
- border: var(--light-border);
334
- }
335
-
336
- .message-input {
337
- flex-grow: 1;
338
- border: none;
339
- background: transparent;
340
- padding: 0.8rem 1rem;
341
- font-size: 1rem;
342
- color: var(--text-dark);
343
- outline: none;
344
- resize: none;
345
- max-height: 150px;
346
  }
347
 
348
- .send-button {
349
- background: linear-gradient(135deg, var(--primary-blue), var(--deep-blue));
350
- color: var(--white-shine);
351
- border: none;
352
- width: 50px;
353
- height: 50px;
354
- border-radius: 50%;
355
  display: flex;
356
  align-items: center;
357
- justify-content: center;
358
- cursor: pointer;
359
- transition: all 0.3s ease;
360
- box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
361
- }
362
-
363
- .send-button:hover {
364
- transform: translateY(-2px) scale(1.05);
365
- box-shadow: 0 6px 16px rgba(0, 102, 255, 0.3);
366
- }
367
-
368
- .features {
369
- display: grid;
370
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
371
- gap: 1.5rem;
372
- margin: 2rem auto;
373
- max-width: 1600px;
374
- padding: 0 1.5rem;
375
- }
376
-
377
- .feature-card {
378
- background: var(--white-glass);
379
- border-radius: 20px;
380
- padding: 2rem;
381
- box-shadow: var(--glass-shadow);
382
- backdrop-filter: blur(10px);
383
- border: var(--light-border);
384
- display: flex;
385
- flex-direction: column;
386
- gap: 1rem;
387
- transition: all 0.3s ease;
388
- }
389
-
390
- .feature-card:hover {
391
- transform: translateY(-5px);
392
- box-shadow: 0 12px 24px rgba(0, 102, 255, 0.15);
393
- }
394
-
395
- .feature-icon {
396
- width: 60px;
397
- height: 60px;
398
- border-radius: 16px;
399
  display: flex;
400
  align-items: center;
401
- justify-content: center;
402
- font-size: 1.5rem;
403
- margin-bottom: 1rem;
404
- color: var(--white-shine);
405
  }
406
 
407
- .feature-1 .feature-icon {
408
- background: linear-gradient(135deg, var(--hacker-green), #00b36b);
409
  }
410
 
411
- .feature-2 .feature-icon {
412
- background: linear-gradient(135deg, var(--cyber-purple), #5500cc);
 
 
 
413
  }
414
 
415
- .feature-3 .feature-icon {
416
- background: linear-gradient(135deg, var(--cyber-red), #cc0022);
417
- }
418
-
419
- .feature-4 .feature-icon {
420
- background: linear-gradient(135deg, #ffcc00, #ff9900);
421
- }
422
-
423
- .feature-title {
424
- font-size: 1.3rem;
425
- font-weight: 700;
426
- color: var(--deep-blue);
427
  }
428
 
429
- .feature-description {
430
- color: #475569;
431
- line-height: 1.7;
432
- }
433
-
434
- .white-hat-banner {
435
- background: linear-gradient(135deg, var(--primary-blue), var(--cyber-purple));
436
- color: var(--white-shine);
437
- padding: 2rem;
438
- border-radius: 20px;
439
- margin: 2rem auto;
440
- max-width: 1600px;
441
  text-align: center;
442
- box-shadow: var(--glass-shadow);
443
- }
444
-
445
- .banner-title {
446
- font-size: 2rem;
447
- font-weight: 800;
448
- margin-bottom: 1rem;
449
- display: flex;
450
- align-items: center;
451
- justify-content: center;
452
- gap: 15px;
453
- }
454
-
455
- .banner-text {
456
- max-width: 800px;
457
- margin: 0 auto;
458
- font-size: 1.1rem;
459
- line-height: 1.8;
460
- }
461
-
462
- .footer {
463
- background: var(--white-glass);
464
- border-top: var(--light-border);
465
  padding: 2rem;
466
- text-align: center;
467
- margin-top: 3rem;
468
- }
469
-
470
- .open-source {
471
- display: flex;
472
- align-items: center;
473
- justify-content: center;
474
- gap: 10px;
475
- margin-bottom: 1rem;
476
- font-weight: 600;
477
- color: var(--deep-blue);
478
- }
479
-
480
- .github-link {
481
- display: inline-flex;
482
- align-items: center;
483
- gap: 8px;
484
- color: var(--primary-blue);
485
- text-decoration: none;
486
- font-weight: 500;
487
- padding: 0.5rem 1rem;
488
- border-radius: 30px;
489
- background: rgba(0, 102, 255, 0.1);
490
- transition: all 0.3s ease;
491
- }
492
-
493
- .github-link:hover {
494
- background: rgba(0, 102, 255, 0.2);
495
- }
496
-
497
- /* Responsive design */
498
- @media (max-width: 1024px) {
499
- .container {
500
- grid-template-columns: 1fr;
501
- }
502
-
503
- .ai-models-panel {
504
- max-width: 100%;
505
- }
506
  }
507
 
508
- @media (max-width: 768px) {
509
- .header {
510
- flex-direction: column;
511
- gap: 1rem;
512
- text-align: center;
513
- }
514
-
515
- .logo {
516
- justify-content: center;
517
- }
518
-
519
- .message {
520
- max-width: 95%;
521
- }
522
  }
523
  </style>
524
  </head>
525
  <body>
526
- <header class="header">
527
- <div class="logo">
528
- <div class="logo-icon">
529
- <i class="fas fa-user-secret"></i>
530
- </div>
531
- <div class="logo-text">White Hat AI</div>
532
  </div>
533
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">
534
- <i class="fas fa-code"></i> Built with anycoder
535
  </a>
536
  </header>
537
-
538
- <div class="white-hat-banner">
539
- <h1 class="banner-title"><i class="fas fa-shield-alt"></i> Ethical AI Platform</h1>
540
- <p class="banner-text">This platform integrates the most advanced uncensored AI models with a focus on ethical hacking, security research, and unrestricted knowledge exploration. All responses are generated in real-time through integrated APIs.</p>
541
- </div>
542
-
543
- <div class="container">
544
- <div class="ai-models-panel">
545
- <h2 class="panel-title"><i class="fas fa-brain"></i> AI Models</h2>
546
-
547
- <div class="ai-model active" data-model="gemini">
548
- <div class="model-icon gemini-icon">
549
- <i class="fas fa-robot"></i>
550
- </div>
551
- <div class="model-info">
552
- <div class="model-name">Gemini 2.5 Pro</div>
553
- <div class="model-description">Google's most advanced uncensored model with 128K context</div>
554
- </div>
555
- </div>
556
-
557
- <div class="ai-model" data-model="duckduckgo">
558
- <div class="model-icon ddg-icon">
559
- <i class="fas fa-search"></i>
560
- </div>
561
- <div class="model-info">
562
- <div class="model-name">DuckDuckGo AI</div>
563
- <div class="model-description">Privacy-focused search AI with uncensored results</div>
564
- </div>
565
- </div>
566
-
567
- <div class="ai-model" data-model="fraudgpt">
568
- <div class="model-icon fraudgpt-icon">
569
- <i class="fas fa-code"></i>
570
- </div>
571
- <div class="model-info">
572
- <div class="model-name">Fraud GPT</div>
573
- <div class="model-description">Specialized in cybersecurity and penetration testing</div>
574
- </div>
575
  </div>
576
-
577
- <div class="ai-model" data-model="uncensored">
578
- <div class="model-icon uncensored-icon">
579
- <i class="fas fa-lock-open"></i>
580
- </div>
581
- <div class="model-info">
582
- <div class="model-name">Uncensored GPT-4</div>
583
- <div class="model-description">Fully unrestricted model with no content limitations</div>
584
- </div>
 
 
585
  </div>
586
-
587
- <div class="ai-model" data-model="deepseek">
588
- <div class="model-icon deepseek-icon">
589
- <i class="fas fa-dna"></i>
590
- </div>
591
- <div class="model-info">
592
- <div class="model-name">DeepSeek</div>
593
- <div class="model-description">Open-source model specialized in security research</div>
594
- </div>
595
  </div>
596
 
597
- <h2 class="panel-title"><i class="fas fa-cogs"></i> API Status</h2>
598
- <div class="api-status">
599
- <div class="status-item">
600
- <div class="status-name">Gemini 2.5 API</div>
601
- <div class="status-indicator active">Online</div>
602
- </div>
603
- <div class="status-item">
604
- <div class="status-name">DuckDuckGo AI API</div>
605
- <div class="status-indicator active">Online</div>
606
- </div>
607
- <div class="status-item">
608
- <div class="status-name">Fraud GPT API</div>
609
- <div class="status-indicator active">Online</div>
610
- </div>
611
  </div>
612
- </div>
613
-
614
- <div class="chat-container">
615
- <div class="chat-header">
616
- <div class="current-model">
617
- <div class="model-icon gemini-icon" style="width: 30px; height: 30px; font-size: 0.9rem;">
618
- <i class="fas fa-robot"></i>
 
 
 
619
  </div>
620
- <div class="current-model-name">Gemini 2.5 Pro</div>
621
  </div>
622
- <div class="tag">Uncensored Mode</div>
623
- <div class="tag">128K Context</div>
624
- <div class="tag">Real-time API</div>
625
- </div>
626
-
627
- <div class="chat-messages" id="chatMessages">
628
- <div class="message ai-message">
629
- <div class="message-header">
630
- <i class="fas fa-robot"></i> Gemini 2.5 Pro
631
- </div>
632
- <div class="message-content">
633
- Hello! I'm Gemini 2.5 Pro, an uncensored AI assistant. As an ethical AI, I'm here to help with any questions you have - from cybersecurity research to unrestricted knowledge exploration. What can I help you with today?
634
  </div>
635
  </div>
636
-
637
- <div class="message user-message">
638
- <div class="message-header">
639
- <i class="fas fa-user"></i> You
640
- </div>
641
- <div class="message-content">
642
- Explain how this platform integrates multiple uncensored AI models through APIs
643
  </div>
644
  </div>
645
-
646
- <div class="message ai-message">
647
- <div class="message-header">
648
- <i class="fas fa-robot"></i> Gemini 2.5 Pro
649
- </div>
650
- <div class="message-content">
651
- This platform integrates multiple advanced AI models through a unified API gateway. Each model (Gemini 2.5, DuckDuckGo AI, Fraud GPT, etc.) is hosted on secure, distributed servers with specialized hardware acceleration.
652
-
653
- The integration works as follows:
654
- 1. User queries are routed through our API gateway
655
- 2. The gateway selects the appropriate model based on content and capability
656
- 3. Queries are processed with zero content filtering or censorship
657
- 4. Responses are returned in real-time with sub-200ms latency
658
- 5. All communications are end-to-end encrypted
659
-
660
- Our architecture supports:
661
- - Automatic failover between models
662
- - Dynamic load balancing
663
- - Contextual understanding across models
664
- - Unrestricted knowledge access
665
- - Ethical usage monitoring
666
- </div>
667
- </div>
668
- </div>
669
-
670
- <div class="input-container">
671
- <div class="input-box">
672
- <textarea class="message-input" id="messageInput" placeholder="Ask anything... (No restrictions, ethical use only)" rows="1"></textarea>
673
- <button class="send-button" id="sendButton">
674
- <i class="fas fa-paper-plane"></i>
675
- </button>
676
- </div>
677
- </div>
678
- </div>
679
- </div>
680
-
681
- <div class="features">
682
- <div class="feature-card feature-1">
683
- <div class="feature-icon">
684
- <i class="fas fa-lock-open"></i>
685
  </div>
686
- <h3 class="feature-title">Uncensored Responses</h3>
687
- <p class="feature-description">No content restrictions or filters. All models provide comprehensive, unfiltered responses to any query while maintaining ethical boundaries.</p>
688
- </div>
689
-
690
- <div class="feature-card feature-2">
691
- <div class="feature-icon">
692
- <i class="fas fa-plug"></i>
693
- </div>
694
- <h3 class="feature-title">Integrated APIs</h3>
695
- <p class="feature-description">Direct API integration with all AI models. Real-time responses through secure, optimized connections with automatic failover.</p>
696
- </div>
697
-
698
- <div class="feature-card feature-3">
699
- <div class="feature-icon">
700
- <i class="fas fa-shield-alt"></i>
701
- </div>
702
- <h3 class="feature-title">White Hat Focus</h3>
703
- <p class="feature-description">Designed for ethical hacking, security research, penetration testing, and cybersecurity education with responsible disclosure.</p>
704
- </div>
705
-
706
- <div class="feature-card feature-4">
707
- <div class="feature-icon">
708
- <i class="fas fa-code"></i>
709
  </div>
710
- <h3 class="feature-title">Open Source</h3>
711
- <p class="feature-description">Completely open-source platform. Contribute to the development and audit the code for transparency and security assurance.</p>
712
- </div>
713
- </div>
714
-
715
- <footer class="footer">
716
- <div class="open-source">
717
- <i class="fab fa-github"></i>
718
- <span>Open Source Platform</span>
719
- </div>
720
- <p>This platform is designed for ethical research and security testing purposes only.</p>
721
- <a href="#" class="github-link">
722
- <i class="fab fa-github"></i> View on GitHub
723
- </a>
724
- <p style="margin-top: 1.5rem;">© 2023 White Hat AI. Built with ❤️ for security researchers.</p>
725
  </footer>
726
-
 
 
 
 
 
727
  <script>
728
- // DOM elements
729
- const chatMessages = document.getElementById('chatMessages');
730
- const messageInput = document.getElementById('messageInput');
731
- const sendButton = document.getElementById('sendButton');
732
- const aiModels = document.querySelectorAll('.ai-model');
733
-
734
- // Auto-resize textarea
735
- messageInput.addEventListener('input', function() {
736
- this.style.height = 'auto';
737
- this.style.height = (this.scrollHeight) + 'px';
738
- });
739
-
740
- // Send message function
741
- function sendMessage() {
742
- const message = messageInput.value.trim();
743
- if (message === '') return;
744
-
745
- // Add user message
746
- addMessage(message, 'user');
747
 
748
- // Clear input
749
- messageInput.value = '';
750
- messageInput.style.height = 'auto';
751
 
752
- // Simulate AI response
753
- setTimeout(() => {
754
- simulateAIResponse(message);
755
- }, 1000);
756
- }
757
-
758
- // Add message to chat
759
- function addMessage(content, sender) {
760
- const messageDiv = document.createElement('div');
761
- messageDiv.classList.add('message');
762
- messageDiv.classList.add(sender === 'user' ? 'user-message' : 'ai-message');
763
 
764
- const headerDiv = document.createElement('div');
765
- headerDiv.classList.add('message-header');
766
- headerDiv.innerHTML = sender === 'user'
767
- ? '<i class="fas fa-user"></i> You'
768
- : '<i class="fas fa-robot"></i> Gemini 2.5 Pro';
769
 
770
- const contentDiv = document.createElement('div');
771
- contentDiv.classList.add('message-content');
772
- contentDiv.textContent = content;
773
 
774
- messageDiv.appendChild(headerDiv);
775
- messageDiv.appendChild(contentDiv);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
776
 
777
- chatMessages.appendChild(messageDiv);
 
 
 
 
 
 
 
778
 
779
- // Scroll to bottom
780
- chatMessages.scrollTop = chatMessages.scrollHeight;
781
- }
782
-
783
- // Simulate AI response
784
- function simulateAIResponse(userMessage) {
785
- let response = "";
786
 
787
- if (userMessage.toLowerCase().includes("security") || userMessage.toLowerCase().includes("hack")) {
788
- response = "As an ethical AI, I can provide information on security topics for educational purposes. For your query about '" + userMessage + "':\n\n" +
789
- "1. Security vulnerabilities should be responsibly disclosed to vendors\n" +
790
- "2. Penetration testing requires proper authorization\n" +
791
- "3. Always follow ethical guidelines and laws\n" +
792
- "4. Consider using bug bounty programs for legitimate security research\n\n" +
793
- "Would you like specific technical details about secure implementations?";
794
- }
795
- else if (userMessage.toLowerCase().includes("api")) {
796
- response = "Our API integration works through a distributed microservices architecture:\n\n" +
797
- "- RESTful APIs with OAuth 2.0 authentication\n" +
798
- "- gRPC for high-performance model inference\n" +
799
- "- Zero-trust security model\n" +
800
- "- Automatic model routing based on query type\n" +
801
- "- Rate limiting and usage tracking\n" +
802
- "- End-to-end encryption (AES-256)\n\n" +
803
- "All APIs are fully documented and available for developers.";
804
- }
805
- else if (userMessage.toLowerCase().includes("uncensored")) {
806
- response = "The uncensored nature of this platform means:\n\n" +
807
- "1. No content filtering or topic restrictions\n" +
808
- "2. Comprehensive responses without bias\n" +
809
- "3. Ability to discuss sensitive technical topics\n" +
810
- "4. Full transparency in responses\n\n" +
811
- "However, ethical boundaries are maintained. I cannot provide guidance for illegal activities or harmful purposes.";
812
- }
813
- else {
814
- response = "Thank you for your question: \"" + userMessage + "\"\n\n" +
815
- "As an uncensored ethical AI, I can provide comprehensive information on this topic. For educational purposes, here is a detailed response:\n\n" +
816
- "This platform enables unrestricted access to knowledge through advanced AI models. All responses are generated in real-time via our integrated API system that routes your query to the most appropriate model.\n\n" +
817
- "Would you like me to elaborate on any specific aspect of this?";
818
  }
 
 
 
819
 
820
- addMessage(response, 'ai');
821
- }
822
-
823
- // Event listeners
824
- sendButton.addEventListener('click', sendMessage);
825
-
826
- messageInput.addEventListener('keypress', (e) => {
827
- if (e.key === 'Enter' && !e.shiftKey) {
828
- e.preventDefault();
829
- sendMessage();
830
- }
 
 
 
831
  });
832
-
833
- // Model selection
834
- aiModels.forEach(model => {
835
- model.addEventListener('click', () => {
836
- // Remove active class from all models
837
- aiModels.forEach(m => m.classList.remove('active'));
838
-
839
- // Add active class to clicked model
840
- model.classList.add('active');
841
-
842
- // Update chat header
843
- const modelName = model.querySelector('.model-name').textContent;
844
- document.querySelector('.current-model-name').textContent = modelName;
845
-
846
- // Add notification
847
- addMessage(`Switched to ${modelName}. All previous context is preserved.`, 'ai');
848
  });
849
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
850
  </script>
851
  </body>
852
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Prompt Adapter & Converter</title>
 
7
  <style>
8
  :root {
9
+ --primary: #6366f1;
10
+ --primary-hover: #4f46e5;
11
+ --secondary: #ec4899;
12
+ --bg-dark: #0f172a;
13
+ --bg-card: #1e293b;
14
+ --text-main: #f8fafc;
15
+ --text-muted: #94a3b8;
16
+ --border: #334155;
17
+ --glass: rgba(30, 41, 59, 0.7);
18
+ --glow: 0 0 20px rgba(99, 102, 241, 0.3);
 
 
19
  }
20
 
21
  * {
22
  box-sizing: border-box;
23
  margin: 0;
24
  padding: 0;
25
+ font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
26
  }
27
 
28
  body {
29
+ background-color: var(--bg-dark);
30
+ color: var(--text-main);
31
  min-height: 100vh;
32
+ display: flex;
33
+ flex-direction: column;
34
+ background-image:
35
+ radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 20%),
36
+ radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 20%);
37
  }
38
 
39
+ /* Header */
40
+ header {
41
+ padding: 1.5rem 2rem;
 
42
  display: flex;
43
  justify-content: space-between;
44
  align-items: center;
45
+ border-bottom: 1px solid var(--border);
46
+ backdrop-filter: blur(10px);
47
  position: sticky;
48
  top: 0;
49
  z-index: 100;
50
+ background: rgba(15, 23, 42, 0.8);
51
  }
52
 
53
+ .brand {
54
+ font-size: 1.5rem;
55
+ font-weight: 700;
56
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
57
+ -webkit-background-clip: text;
58
+ -webkit-text-fill-color: transparent;
 
 
 
 
 
 
59
  display: flex;
60
  align-items: center;
61
+ gap: 0.5rem;
 
 
62
  }
63
 
64
+ .brand span {
65
+ font-size: 1.8rem;
 
 
 
 
66
  }
67
 
68
  .anycoder-link {
69
+ color: var(--text-muted);
 
70
  text-decoration: none;
 
 
71
  font-size: 0.9rem;
72
+ transition: color 0.3s ease;
73
+ border: 1px solid var(--border);
74
+ padding: 0.4rem 0.8rem;
75
+ border-radius: 6px;
 
 
76
  }
77
 
78
  .anycoder-link:hover {
79
+ color: var(--primary);
80
+ border-color: var(--primary);
 
81
  }
82
 
83
+ /* Main Layout */
84
+ main {
85
+ flex: 1;
86
+ padding: 2rem;
87
+ max-width: 1400px;
88
+ margin: 0 auto;
89
+ width: 100%;
90
  display: grid;
91
+ grid-template-columns: 1fr 350px;
92
+ gap: 2rem;
93
+ }
94
+
95
+ @media (max-width: 900px) {
96
+ main {
97
+ grid-template-columns: 1fr;
98
+ }
99
  }
100
 
101
+ /* Panels */
102
+ .panel {
103
+ background: var(--bg-card);
104
+ border: 1px solid var(--border);
105
+ border-radius: 16px;
106
  padding: 1.5rem;
107
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
 
108
  display: flex;
109
  flex-direction: column;
110
+ gap: 1.5rem;
111
  }
112
 
113
+ h2 {
114
+ font-size: 1.25rem;
115
+ color: var(--text-main);
116
  margin-bottom: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  display: flex;
118
  align-items: center;
119
+ gap: 0.5rem;
 
 
120
  }
121
 
122
+ /* Form Elements */
123
+ label {
124
+ display: block;
125
+ margin-bottom: 0.5rem;
126
+ color: var(--text-muted);
127
+ font-size: 0.9rem;
 
 
 
 
128
  }
129
 
130
+ textarea {
131
+ width: 100%;
132
+ height: 200px;
133
+ background: rgba(0, 0, 0, 0.2);
134
+ border: 1px solid var(--border);
135
+ border-radius: 8px;
136
+ padding: 1rem;
137
+ color: var(--text-main);
138
+ font-size: 1rem;
139
+ resize: vertical;
140
+ transition: border-color 0.3s, box-shadow 0.3s;
141
+ line-height: 1.5;
142
  }
143
 
144
+ textarea:focus {
145
+ outline: none;
146
+ border-color: var(--primary);
147
+ box-shadow: var(--glow);
148
  }
149
 
150
+ select {
151
+ width: 100%;
152
+ padding: 0.8rem;
153
+ background: rgba(0, 0, 0, 0.2);
154
+ border: 1px solid var(--border);
155
+ border-radius: 8px;
156
+ color: var(--text-main);
157
+ font-size: 1rem;
158
+ cursor: pointer;
159
  }
160
 
161
+ /* Buttons */
162
+ .btn-group {
163
+ display: grid;
164
+ grid-template-columns: 2fr 1fr 1fr;
165
+ gap: 1rem;
166
  }
167
 
168
+ button {
169
+ padding: 0.8rem 1.5rem;
170
+ border: none;
171
+ border-radius: 8px;
172
+ font-weight: 600;
173
+ cursor: pointer;
174
+ transition: all 0.2s ease;
175
+ font-size: 1rem;
176
  display: flex;
177
  align-items: center;
178
  justify-content: center;
179
+ gap: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  }
181
 
182
+ .btn-primary {
183
+ background: linear-gradient(135deg, var(--primary), var(--primary-hover));
184
+ color: white;
185
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
186
  }
187
 
188
+ .btn-primary:hover {
189
+ transform: translateY(-2px);
190
+ box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
  }
192
 
193
+ .btn-secondary {
194
+ background: transparent;
195
+ border: 1px solid var(--secondary);
196
+ color: var(--secondary);
197
  }
198
 
199
+ .btn-secondary:hover {
200
+ background: rgba(236, 72, 153, 0.1);
 
201
  }
202
 
203
+ .btn-ghost {
204
+ background: transparent;
205
+ color: var(--text-muted);
206
+ border: 1px solid var(--border);
 
 
 
207
  }
208
 
209
+ .btn-ghost:hover {
210
+ background: rgba(255, 255, 255, 0.05);
211
+ color: var(--text-main);
 
 
 
 
212
  }
213
 
214
+ /* Output Area */
215
+ .output-container {
 
 
216
  position: relative;
217
+ min-height: 200px;
 
 
 
 
 
 
 
 
 
 
 
218
  }
219
 
220
+ .output-text {
221
+ background: rgba(15, 23, 42, 0.6);
222
+ border: 1px solid var(--primary);
223
+ color: #a5b4fc;
224
+ font-family: 'Courier New', Courier, monospace;
225
  }
226
 
227
+ .copy-btn {
228
+ position: absolute;
229
+ top: 10px;
230
+ right: 10px;
231
+ background: rgba(30, 41, 59, 0.9);
232
+ color: var(--text-main);
233
+ border: 1px solid var(--border);
234
+ padding: 0.4rem 0.8rem;
235
+ font-size: 0.8rem;
236
+ border-radius: 4px;
237
+ cursor: pointer;
238
+ transition: all 0.2s;
239
  }
240
 
241
+ .copy-btn:hover {
242
+ background: var(--primary);
243
+ border-color: var(--primary);
 
 
 
244
  }
245
 
246
+ /* Sidebar / Info */
247
+ .info-card {
248
+ background: rgba(255, 255, 255, 0.03);
249
+ border-radius: 8px;
250
+ padding: 1rem;
251
+ margin-bottom: 1rem;
252
+ border-left: 3px solid var(--primary);
253
  }
254
 
255
+ .info-title {
256
+ font-weight: 700;
257
+ color: var(--text-main);
258
+ margin-bottom: 0.5rem;
259
  }
260
 
261
+ .info-desc {
262
+ font-size: 0.85rem;
263
+ color: var(--text-muted);
264
+ line-height: 1.4;
265
  }
266
 
267
+ .stats {
268
  display: flex;
269
  gap: 1rem;
270
+ margin-top: 1rem;
271
+ font-size: 0.8rem;
272
+ color: var(--text-muted);
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  }
274
 
275
+ .stat-item {
 
 
 
 
 
 
276
  display: flex;
277
  align-items: center;
278
+ gap: 0.3rem;
279
+ }
280
+
281
+ /* Toast */
282
+ .toast {
283
+ position: fixed;
284
+ bottom: 2rem;
285
+ right: 2rem;
286
+ background: var(--bg-card);
287
+ border: 1px solid var(--primary);
288
+ color: var(--text-main);
289
+ padding: 1rem 2rem;
290
+ border-radius: 8px;
291
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
292
+ transform: translateY(150%);
293
+ transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
294
+ z-index: 1000;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
  display: flex;
296
  align-items: center;
297
+ gap: 0.5rem;
 
 
 
298
  }
299
 
300
+ .toast.show {
301
+ transform: translateY(0);
302
  }
303
 
304
+ /* Animations */
305
+ @keyframes pulse {
306
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
307
+ 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
308
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
309
  }
310
 
311
+ .animate-pulse {
312
+ animation: pulse 2s infinite;
 
 
 
 
 
 
 
 
 
 
313
  }
314
 
315
+ /* Footer */
316
+ footer {
 
 
 
 
 
 
 
 
 
 
317
  text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  padding: 2rem;
319
+ color: var(--text-muted);
320
+ font-size: 0.85rem;
321
+ border-top: 1px solid var(--border);
322
+ margin-top: auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
323
  }
324
 
325
+ .tag {
326
+ display: inline-block;
327
+ padding: 0.2rem 0.5rem;
328
+ border-radius: 4px;
329
+ background: rgba(99, 102, 241, 0.2);
330
+ color: #a5b4fc;
331
+ font-size: 0.7rem;
332
+ margin-right: 0.5rem;
333
+ text-transform: uppercase;
334
+ font-weight: bold;
 
 
 
 
335
  }
336
  </style>
337
  </head>
338
  <body>
339
+
340
+ <header>
341
+ <div class="brand">
342
+ <span>✨</span> AI Prompt Adapter
 
 
343
  </div>
344
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
345
+ Built with anycoder
346
  </a>
347
  </header>
348
+
349
+ <main>
350
+ <!-- Left Column: Input & Controls -->
351
+ <section class="panel">
352
+ <h2>📝 Input Text</h2>
353
+ <label for="rawInput">Paste your prompt, raw text, or idea here:</label>
354
+ <textarea id="rawInput" placeholder="e.g., Explain quantum computing to a 5-year-old..."></textarea>
355
+
356
+ <div class="controls">
357
+ <label for="modelSelect">Target AI Model:</label>
358
+ <select id="modelSelect">
359
+ <option value="gpt4">ChatGPT / GPT-4 (General Purpose)</option>
360
+ <option value="deepseek">DeepSeek (Coding & Logic)</option>
361
+ <option value="gemini">Google Gemini (Multimodal/Creative)</option>
362
+ <option value="mistral">Mistral (Efficient/Concise)</option>
363
+ <option value="claude">Claude (Analytical/Long Context)</option>
364
+ <option value="llama">Llama 3 (Local/Privacy)</option>
365
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
366
  </div>
367
+
368
+ <div class="btn-group">
369
+ <button class="btn-primary animate-pulse" id="convertBtn">
370
+ ⚡ Convert & Optimize
371
+ </button>
372
+ <button class="btn-secondary" id="surpriseBtn">
373
+ 🎲 Surprise Me
374
+ </button>
375
+ <button class="btn-ghost" id="clearBtn">
376
+ 🗑️ Clear
377
+ </button>
378
  </div>
379
+
380
+ <div class="output-container">
381
+ <label>Optimized Output:</label>
382
+ <textarea id="outputArea" class="output-text" readonly placeholder="Your optimized prompt will appear here..."></textarea>
383
+ <button class="copy-btn" id="copyBtn">Copy Text</button>
 
 
 
 
384
  </div>
385
 
386
+ <div class="stats">
387
+ <div class="stat-item">📊 Chars: <span id="charCount">0</span></div>
388
+ <div class="stat-item">🧠 Tokens (est.): <span id="tokenCount">0</span></div>
389
+ <div class="stat-item">🚀 Mode: <span id="modeDisplay">Standard</span></div>
 
 
 
 
 
 
 
 
 
 
390
  </div>
391
+ </section>
392
+
393
+ <!-- Right Column: Model Info & Tips -->
394
+ <aside class="panel">
395
+ <h2>🧠 Model Guide</h2>
396
+ <div id="modelInfo">
397
+ <div class="info-card" style="border-left-color: #10a37f;">
398
+ <div class="info-title">ChatGPT / GPT-4</div>
399
+ <div class="info-desc">
400
+ Best for general tasks, reasoning, and creative writing. Optimization focuses on clear role definition and step-by-step instructions.
401
  </div>
 
402
  </div>
403
+ <div class="info-card" style="border-left-color: #4f46e5;">
404
+ <div class="info-title">DeepSeek</div>
405
+ <div class="info-desc">
406
+ Excels at mathematics, coding, and logic puzzles. Prompts are tweaked to encourage structured outputs like code blocks or JSON.
 
 
 
 
 
 
 
 
407
  </div>
408
  </div>
409
+ <div class="info-card" style="border-left-color: #4285f4;">
410
+ <div class="info-title">Gemini</div>
411
+ <div class="info-desc">
412
+ Great at multimodal tasks and summaries. Optimization adds context for visual descriptions and brainstorming.
 
 
 
413
  </div>
414
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
415
  </div>
416
+
417
+ <div style="margin-top: auto;">
418
+ <h3>🎲 Surprise Feature</h3>
419
+ <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem;">
420
+ Stuck? Hit "Surprise Me" to inject random creative constraints, roleplay scenarios, or formatting styles into your prompt.
421
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422
  </div>
423
+ </aside>
424
+ </main>
425
+
426
+ <footer>
427
+ <p>AI Prompt Adapter Tool &copy; 2023. Built for optimized interactions.</p>
 
 
 
 
 
 
 
 
 
 
428
  </footer>
429
+
430
+ <!-- Toast Notification -->
431
+ <div class="toast" id="toast">
432
+ <span>✅</span> <span id="toastMsg">Action Successful</span>
433
+ </div>
434
+
435
  <script>
436
+ // DOM Elements
437
+ const rawInput = document.getElementById('rawInput');
438
+ const outputArea = document.getElementById('outputArea');
439
+ const modelSelect = document.getElementById('modelSelect');
440
+ const convertBtn = document.getElementById('convertBtn');
441
+ const surpriseBtn = document.getElementById('surpriseBtn');
442
+ const clearBtn = document.getElementById('clearBtn');
443
+ const copyBtn = document.getElementById('copyBtn');
444
+ const charCount = document.getElementById('charCount');
445
+ const tokenCount = document.getElementById('tokenCount');
446
+ const modeDisplay = document.getElementById('modeDisplay');
447
+ const toast = document.getElementById('toast');
448
+ const toastMsg = document.getElementById('toastMsg');
449
+
450
+ // Logic: Prompt Engineering Templates
451
+ const promptTemplates = {
452
+ gpt4: (text) => `You are a highly intelligent and helpful assistant. \n\nTASK: ${text}\n\nINSTRUCTIONS:\n- Provide a detailed, step-by-step response.\n- Use clear formatting (bullet points, bold text) where necessary.\n- Ensure the tone is professional yet engaging.\n- If the request involves code, provide code blocks with syntax highlighting.`,
 
 
453
 
454
+ deepseek: (text) => `[SYSTEM INSTRUCTION]: You are an expert coder and logic engine.\n\n[USER REQUEST]: ${text}\n\n[REQUIREMENTS]:\n1. Prioritize accuracy and logic.\n2. If code is requested, output only the code in a markdown block followed by a brief explanation.\n3. If a math problem, show the working.\n4. Optimize for efficiency.`,
 
 
455
 
456
+ gemini: (text) => `Imagine you are a creative polymath with access to vast knowledge.\n\nHere is the topic: "${text}"\n\nPlease generate a response that is:\n- Descriptive and vivid.\n- Well-structured for readability.\n- Incorporating analogies to explain complex concepts.\n- Suitable for a broad audience.`,
 
 
 
 
 
 
 
 
 
 
457
 
458
+ mistral: (text) => `Direct instruction: ${text}\n\nConstraint: Be concise. Avoid fluff. Get straight to the point. Format the output for quick scanning.`,
 
 
 
 
459
 
460
+ claude: (text) => `I would like you to analyze the following request with deep care and attention to detail.\n\nRequest: ${text}\n\nPlease provide a thoughtful answer that considers potential nuances, safety implications, and alternative perspectives. Structure your answer clearly with headings.`,
 
 
461
 
462
+ llama: (text) => `### Instruction:\n${text}\n\n### Response:\n(Please provide a comprehensive and accurate answer based on the instruction above.)`
463
+ };
464
+
465
+ // Surprise Logic
466
+ const surprises = [
467
+ "Explain this as if you were a 1920s gangster.",
468
+ "Translate this response into pirate speak.",
469
+ "Use only emojis and short sentences.",
470
+ "Write this as a formal scientific abstract.",
471
+ "Explain it using only metaphors related to cooking.",
472
+ "Write the response as a haiku.",
473
+ "Act as an over-enthusiastic marketing guru.",
474
+ "Explain this to a very smart 5-year-old.",
475
+ "Write the response entirely in uppercase for emphasis."
476
+ ];
477
+
478
+ // Utility: Estimate Tokens (Roughly 4 chars per token)
479
+ const estimateTokens = (str) => Math.ceil(str.length / 4);
480
+
481
+ // Event Listener: Convert
482
+ convertBtn.addEventListener('click', () => {
483
+ const text = rawInput.value.trim();
484
+ const model = modelSelect.value;
485
 
486
+ if (!text) {
487
+ showToast("Please enter some text first!", "⚠️");
488
+ return;
489
+ }
490
+
491
+ // Apply transformation
492
+ const template = promptTemplates[model] || promptTemplates.gpt4;
493
+ const result = template(text);
494
 
495
+ // Update UI
496
+ outputArea.value = result;
497
+ updateStats(result);
498
+ modeDisplay.textContent = model.toUpperCase() + " Optimized";
 
 
 
499
 
500
+ // Visual feedback
501
+ outputArea.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');
502
+ showToast("Prompt optimized successfully!");
503
+ });
504
+
505
+ // Event Listener: Surprise
506
+ surpriseBtn.addEventListener('click', () => {
507
+ const text = rawInput.value.trim();
508
+ if (!text) {
509
+ showToast("Enter text before surprising!", "⚠️");
510
+ return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
511
  }
512
+
513
+ const randomSurprise = surprises[Math.floor(Math.random() * surprises.length)];
514
+ const result = `${text}\n\n[EXTRA CONSTRAINT]: ${randomSurprise}`;
515
 
516
+ rawInput.value = result; // Update input to show the surprise
517
+ outputArea.value = result; // Update output too automatically
518
+ updateStats(result);
519
+ modeDisplay.textContent = "Surprise Injected 🎲";
520
+ showToast("Surprise constraint added!");
521
+ });
522
+
523
+ // Event Listener: Clear
524
+ clearBtn.addEventListener('click', () => {
525
+ rawInput.value = '';
526
+ outputArea.value = '';
527
+ updateStats('');
528
+ modeDisplay.textContent = "Standard";
529
+ rawInput.focus();
530
  });
531
+
532
+ // Event Listener: Copy
533
+ copyBtn.addEventListener('click', () => {
534
+ if (!outputArea.value) return;
535
+
536
+ navigator.clipboard.writeText(outputArea.value).then(() => {
537
+ showToast("Copied to clipboard!");
538
+ }).catch(err => {
539
+ showToast("Failed to copy", "❌");
 
 
 
 
 
 
 
540
  });
541
  });
542
+
543
+ // Update Statistics
544
+ function updateStats(text) {
545
+ const len = text.length;
546
+ charCount.textContent = len;
547
+ tokenCount.textContent = estimateTokens(text);
548
+ }
549
+
550
+ // Live Update Stats on Input
551
+ rawInput.addEventListener('input', () => {
552
+ updateStats(rawInput.value);
553
+ });
554
+
555
+ // Toast Notification System
556
+ function showToast(message, icon = "✅") {
557
+ toastMsg.textContent = message;
558
+ toast.querySelector('span').textContent = icon;
559
+ toast.classList.add('show');
560
+ setTimeout(() => {
561
+ toast.classList.remove('show');
562
+ }, 3000);
563
+ }
564
+
565
+ // Initialize
566
+ updateStats('');
567
+
568
  </script>
569
  </body>
570
  </html>