Hugging Face's logo

Spaces:
ParthSadaria
/
lokiai
Running

App Files Community
1
ParthSadaria commited on
Commit
ff0f756
·
verified ·
1 Parent(s): 008ba3f

Update playground.html

Browse files
Files changed (1) hide show
  1. playground.html +83 -98
playground.html CHANGED
@@ -485,120 +485,105 @@
485
  </head>
486
 
487
  <body class="bg-light-DEFAULT dark:bg-dark dark:text-gray-200 min-h-screen transition-colors duration-300 font-sans">
488
- <!-- GitHub Link -->
489
- <a href="https://github.com/ParthSadaria" target="_blank" rel="noopener noreferrer"
490
- class="fixed top-4 right-4 text-gray-500 hover:text-primary-light transition-colors duration-300 z-10"
491
- aria-label="Visit Parth Sadaria's GitHub profile">
492
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
493
- class="w-6 h-6" stroke-linecap="round" stroke-linejoin="round">
494
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
495
  </svg>
496
  </a>
497
 
498
- <!-- Toast Notification -->
499
  <div id="toast" class="toast">Message copied to clipboard!</div>
500
 
501
- <!-- Chat Container -->
502
- <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 opacity-0 transform translate-y-4 relative" id="chatWrapper">
503
- <!-- Header with Logo -->
504
- <div class="flex justify-between items-center mb-6 p-4 bg-light-darker dark:bg-dark-lighter rounded-xl shadow-lg border border-light-darker dark:border-dark-input">
505
- <div class="flex items-center">
506
- <span class="text-xl font-mono font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">LOKI.AI</span>
507
- <span class="ml-2 text-sm bg-light-input dark:bg-dark-input px-2 py-0.5 rounded-full text-gray-600 dark:text-gray-300">Playground</span>
508
- </div>
509
- <div class="flex flex-wrap items-center justify-between gap-2">
510
- <!-- Model Selector -->
511
- <div class="relative" id="modelSelector">
512
- <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-md text-sm flex items-center space-x-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm min-w-0" id="modelSelectButton" aria-label="Select AI model">
513
- <span id="modelSelectDisplay">Select Model</span>
514
- <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
515
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
516
- </svg>
517
- </button>
518
- <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-light-card dark:bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20 dropdown-transition" id="modelOptions">
519
- <div class="py-2 px-3 text-sm text-gray-600 dark:text-gray-400" id="modelLoader">Loading models...</div>
520
- </div>
521
- </div>
522
 
523
- <!-- Clear Chat Button -->
524
- <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Clear chat history">
525
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
526
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
527
- </svg>
528
- </button>
529
 
530
- <!-- Export Chat Button -->
531
- <button id="exportChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Export conversation">
532
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
533
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
534
- </svg>
535
- </button>
536
 
537
- <!-- Theme Toggle Button -->
538
- <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Toggle theme">
539
- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
540
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
541
- </svg>
542
- </button>
543
- </div>
544
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
545
 
546
- <!-- Initial Input -->
547
- <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
548
- <h2 class="text-2xl font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">Welcome to LOKI.AI</h2>
549
- <div class="w-full max-w-2xl relative">
550
- <input type="text" id="initialChatInput" class="w-full p-4 pr-12 rounded-xl border-2 border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-lighter focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white text-gray-800 shadow-lg transition-all"
551
- placeholder="What can I help you with today?">
552
- <button id="initialSendIcon" class="absolute right-4 top-4 text-gray-400 hover:text-primary transition-colors" aria-label="Send message">
553
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
554
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
555
- </svg>
556
- </button>
557
- </div>
558
- <!-- Model suggestions -->
559
- <div class="flex flex-wrap justify-center gap-2 max-w-2xl">
560
- <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Explain quantum computing</button>
561
- <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Write a poem about AI</button>
562
- <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Help debug my code</button>
563
- <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Recommend a book</button>
564
- </div>
565
- </div>
566
 
567
- <!-- Chat Area -->
568
- <div class="hidden flex-col h-[70vh] bg-light-card dark:bg-dark-lighter rounded-xl shadow-lg overflow-hidden border border-light-darker dark:border-dark-input" id="chatContainer">
569
- <!-- Fullscreen Button -->
570
- <button id="fullscreenButton" class="absolute right-4 top-4 z-10 text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors" aria-label="Fullscreen">
571
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
572
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
573
- d="M4 4h6M4 4v6M4 4l6 6M20 20h-6M20 20v-6M20 20l-6-6" />
574
- </svg>
575
- </button>
576
 
577
- <!-- Messages Area -->
578
- <div class="flex-1 overflow-y-auto p-4 space-y-5" id="chatMessages"></div>
579
-
580
- <!-- Input Area -->
581
- <div class="border-t border-light-darker dark:border-dark-input p-4 bg-light-card dark:bg-dark-lighter">
582
- <div class="relative">
583
- <textarea id="chatInput" class="w-full p-3 pr-12 rounded-xl border border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-light text-gray-800 dark:text-white transition-all shadow-inner resize-none min-h-[50px] max-h-[150px]" placeholder="Type your message..." rows="1"></textarea>
584
- <button id="sendButton" class="absolute right-3 bottom-3 text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors" aria-label="Send message">
585
- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" id="sendIcon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
586
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
587
- </svg>
588
- <div id="sendLoader" class="hidden">
589
- <div class="w-5 h-5 border-2 border-primary-light border-t-transparent rounded-full animate-spin"></div>
 
 
 
590
  </div>
591
- </button>
592
- </div>
593
- <div class="flex justify-between items-center mt-2">
594
- <p class="text-gray-500 text-xs">Ctrl+Enter to send</p>
595
- <p class="text-gray-500 text-xs">Models may make mistakes. Check important information.</p>
596
  </div>
597
- </div>
598
  </div>
599
- <!-- Resize Handle -->
600
- <div id="resizeHandle"></div>
601
- </div>
602
  <script>
603
  const chatContainer = document.getElementById('chatContainer');
604
  const fullscreenButton = document.getElementById('fullscreenButton');
 
485
  </head>
486
 
487
  <body class="bg-light-DEFAULT dark:bg-dark dark:text-gray-200 min-h-screen transition-colors duration-300 font-sans">
488
+ <a href="https://github.com/ParthSadaria" target="_blank" rel="noopener noreferrer"
489
+ class="fixed top-4 right-4 text-gray-500 hover:text-primary-light transition-colors duration-300 z-10"
490
+ aria-label="Visit Parth Sadaria's GitHub profile">
491
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
492
+ class="w-6 h-6" stroke-linecap="round" stroke-linejoin="round">
 
493
  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
494
  </svg>
495
  </a>
496
 
 
497
  <div id="toast" class="toast">Message copied to clipboard!</div>
498
 
499
+ <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 opacity-0 transform translate-y-4 relative" id="chatWrapper">
500
+ <div class="flex justify-between items-center mb-6 p-4 bg-light-darker dark:bg-dark-lighter rounded-xl shadow-lg border border-light-darker dark:border-dark-input">
501
+ <div class="flex items-center">
502
+ <span class="text-xl font-mono font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">LOKI.AI</span>
503
+ <span class="ml-2 text-sm bg-light-input dark:bg-dark-input px-2 py-0.5 rounded-full text-gray-600 dark:text-gray-300">Playground</span>
504
+ </div>
505
+ <div class="flex flex-wrap items-center justify-between gap-2">
506
+ <div class="relative" id="modelSelector">
507
+ <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-md text-sm flex items-center space-x-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm min-w-0" id="modelSelectButton" aria-label="Select AI model">
508
+ <span id="modelSelectDisplay">Select Model</span>
509
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
510
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
511
+ </svg>
512
+ </button>
513
+ <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-light-card dark:bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20 dropdown-transition" id="modelOptions">
514
+ <div class="py-2 px-3 text-sm text-gray-600 dark:text-gray-400" id="modelLoader">Loading models...</div>
515
+ </div>
516
+ </div>
 
 
 
517
 
518
+ <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Clear chat history">
519
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
520
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
521
+ </svg>
522
+ </button>
 
523
 
524
+ <button id="exportChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Export conversation">
525
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
526
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
527
+ </svg>
528
+ </button>
 
529
 
530
+ <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group min-w-0" aria-label="Toggle theme">
531
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
532
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
533
+ </svg>
534
+ </button>
535
+ </div>
536
+ </div>
537
 
538
+ <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
539
+ <h2 class="text-2xl font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">Welcome to LOKI.AI</h2>
540
+ <div class="w-full max-w-2xl relative">
541
+ <input type="text" id="initialChatInput" class="w-full p-4 pr-12 rounded-xl border-2 border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-lighter focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white text-gray-800 shadow-lg transition-all"
542
+ placeholder="What can I help you with today?">
543
+ <button id="initialSendIcon" class="absolute right-4 top-4 text-gray-400 hover:text-primary transition-colors" aria-label="Send message">
544
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
545
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
546
+ </svg>
547
+ </button>
548
+ </div>
549
+ <div class="flex flex-wrap justify-center gap-2 max-w-2xl">
550
+ <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Explain quantum computing</button>
551
+ <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Write a poem about AI</button>
552
+ <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Help debug my code</button>
553
+ <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Recommend a book</button>
554
+ </div>
555
+ </div>
556
 
557
+ <div class="hidden flex-col h-[70vh] bg-light-card dark:bg-dark-lighter rounded-xl shadow-lg overflow-hidden border border-light-darker dark:border-dark-input" id="chatContainer">
558
+ <button id="fullscreenButton" class="absolute right-4 top-4 z-10 text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors" aria-label="Fullscreen">
559
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
560
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
561
+ d="M4 4h6M4 4v6M4 4l6 6M20 20h-6M20 20v-6M20 20l-6-6" />
562
+ </svg>
563
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
564
 
565
+ <div class="flex-1 overflow-y-auto p-4 space-y-5" id="chatMessages"></div>
 
 
 
 
 
 
 
 
566
 
567
+ <div class="border-t border-light-darker dark:border-dark-input p-4 bg-light-card dark:bg-dark-lighter">
568
+ <div class="relative">
569
+ <textarea id="chatInput" class="w-full p-3 pr-12 rounded-xl border border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-light text-gray-800 dark:text-white transition-all shadow-inner resize-none min-h-[50px] max-h-[150px]" placeholder="Type your message..." rows="1"></textarea>
570
+ <button id="sendButton" class="absolute right-3 bottom-3 text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors" aria-label="Send message">
571
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" id="sendIcon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
572
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
573
+ </svg>
574
+ <div id="sendLoader" class="hidden">
575
+ <div class="w-5 h-5 border-2 border-primary-light border-t-transparent rounded-full animate-spin"></div>
576
+ </div>
577
+ </button>
578
+ </div>
579
+ <div class="flex justify-between items-center mt-2">
580
+ <p class="text-gray-500 text-xs">Ctrl+Enter to send</p>
581
+ <p class="text-gray-500 text-xs">Models may make mistakes. Check important information.</p>
582
+ </div>
583
  </div>
 
 
 
 
 
584
  </div>
585
+ <div id="resizeHandle"></div>
586
  </div>
 
 
 
587
  <script>
588
  const chatContainer = document.getElementById('chatContainer');
589
  const fullscreenButton = document.getElementById('fullscreenButton');