Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Mar 9

Commit

dd97c12

verified ·

1 Parent(s): cb01ce9

Update playground.html

Browse files

Files changed (1) hide show

playground.html +259 -861

playground.html CHANGED Viewed

@@ -1,779 +1,159 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Loki.AI Playground</title>
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
-    <style>
-        :root {
-            --bg-dark: #0a0a0f;
-            --bg-darker: #040409;
-            --bg-deepest: #020205;
-            --primary-blue: #4a6cf7;
-            --secondary-blue: #6678e3;
-            --accent-color: #7e57c2;
-            --text-light: #e0e0e8;
-            --text-muted: #8a8a9b;
-            --border-color: #1a1a2e;
-            --hover-color: rgba(78, 108, 247, 0.1);
-            --delete-red: #ff4d4d;
-            --header-height: 60px;
-            --input-height: 80px;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            scrollbar-width: thin;
-            scrollbar-color: var(--primary-blue) transparent;
-        }
-        *::-webkit-scrollbar {
-            width: 8px;
-        }
-        *::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        *::-webkit-scrollbar-thumb {
-            background-color: var(--primary-blue);
-            border-radius: 20px;
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg-dark);
-            color: var(--text-light);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            overflow: hidden;
-            perspective: 2000px;
-        }
-        .chat-wrapper {
-            position: relative;
-            width: 100%;
-            max-width: 1000px;
-            height: 90vh;
-            background-color: var(--bg-darker);
-            border-radius: 24px;
-            overflow: hidden;
-            box-shadow: 0 20px 50px rgba(5, 5, 10, 0.7);
-            display: flex;
-            flex-direction: column;
-            opacity: 1;
-            transform: scale(1);
-            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
-            border: 1px solid var(--border-color);
-        }
-        .chat-header {
-            background-color: var(--bg-deepest);
-            padding: 15px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-            height: var(--header-height);
-        }
-        .chat-container {
-            display: none;
-            flex-direction: column;
-            height: calc(100% - var(--header-height));
-            position: relative;
-        }
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            background-color: var(--bg-dark);
-            font-family: 'JetBrains Mono', monospace;
-            height: calc(100% - var(--input-height));
-            margin-bottom: var(--input-height);
-        }
-        .chat-input {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: var(--bg-darker);
-            border-top: 1px solid var(--border-color);
-            padding: 16px;
-            height: var(--input-height);
-            display: flex;
-            gap: 12px;
-            z-index: 10;
-            align-items: center;
-        }
-        .chat-input-container {
-            position: relative;
-            flex: 1;
-            display: flex;
-            align-items: center;
-        }
-        .chat-input input {
-            width: 100%;
-            padding: 12px 16px;
-            padding-right: 50px;
-            background-color: rgba(30, 30, 50, 0.8);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            color: var(--text-light);
-            font-size: 14px;
-            font-family: 'JetBrains Mono', monospace;
-            outline: none;
-        }
-        .chat-input input:focus {
-            border-color: var(--primary-blue);
-            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
-        }
-        .message {
-            max-width: 80%;
-            width: fit-content;
-            padding: 12px 18px;
-            border-radius: 12px;
-            font-size: 14px;
-            line-height: 1.5;
-            position: relative;
-            animation: fadeIn 0.4s forwards;
-            margin-bottom: 8px;
-        }
-        .message.user {
-            align-self: flex-end;
-            background-color: var(--primary-blue);
-            color: white;
-        }
-        .message.bot {
-            align-self: flex-start;
-            background-color: rgba(40, 40, 70, 0.8);
-            color: var(--text-light);
-            border: 1px solid var(--border-color);
-        }
-        .message::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1));
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        .message:hover::before {
-            opacity: 1;
-        }
-        .initial-input {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 24px;
-            text-align: center;
-            background: linear-gradient(145deg, var(--bg-dark), var(--bg-darker));
-        }
-        .initial-input h2 {
-            font-size: 24px;
-            margin-bottom: 16px;
-            color: var(--text-light);
-            font-weight: 600;
-            font-family: 'JetBrains Mono', monospace;
-        }
-        .input-container {
-            width: 100%;
-            max-width: 400px;
-            position: relative;
-        }
-        .initial-input input {
-            width: 100%;
-            padding: 16px 24px;
-            background-color: rgba(30, 30, 50, 0.8);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            color: var(--text-light);
-            font-size: 16px;
-            font-family: 'JetBrains Mono', monospace;
-            outline: none;
-            transition: all 0.3s ease;
-        }
-        .send-icon {
-            position: absolute;
-            right: 12px;
-            top: 50%;
-            transform: translateY(-50%);
-            background-color: var(--primary-blue);
-            border-radius: 8px;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .send-icon:hover {
-            background-color: var(--accent-color);
-            transform: translateY(-50%) scale(1.05);
-            border-radius: 15px;
-        }
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        /* Header actions */
-        .header-actions {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            justify-content: center;
-        }
-        .model-select {
-            background-color: black;
-            color: var(--text-light);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 8px 12px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            max-width: 240px;
-            overflow-y: auto;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
-            background-repeat: no-repeat;
-            background-position: right 8px center;
-            padding-right: 28px;
-        }
-        .model-select option {
-            background-color: var(--bg-dark);
-            color: var(--text-light);
-            padding: 8px;
-        }
-        .clear-chat {
-            background-color: var(--delete-red);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            width: 36px;
-            height: 36px;
-            padding: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .clear-chat:hover {
-            background-color: #ff6666;
-        }
-        .clear-chat svg {
-            width: 18px;
-            height: 18px;
-        }
-        .watermark {
-            position: absolute;
-            bottom: 10px;
-            right: 15px;
-            color: var(--text-muted);
-            font-size: 10px;
-            opacity: 0.5;
-            transition: opacity 0.3s ease;
-            z-index: 11;
-        }
-        .watermark:hover {
-            opacity: 0.8;
-        }
-        /* Loading spinner */
-        .loader {
-            display: none;
-            width: 24px;
-            height: 24px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: var(--primary-blue);
-            animation: spin 1s ease-in-out infinite;
-        }
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-        .github-link {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 36px;
-            height: 36px;
-            z-index: 999;
-            border-radius: 8px;
-            background-color: transparent;
-            border: 1px solid var(--border-color);
-            transition: all 0.3s ease;
-            color: var(--text-light);
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            margin: 10px;
-        }
-        .github-link:hover {
-            background-color: var(--hover-color);
-            transform: translateY(-2px);
-        }
-        .github-link svg {
-            width: 22px;
-            height: 22px;
-        }
-        /* Enhanced select dropdown */
-        .custom-select-wrapper {
-            position: relative;
-            min-width: 180px;
-        }
-        .custom-select {
-            position: relative;
-            background-color: rgba(20, 20, 40, 0.9);
-            color: var(--text-light);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 8px 35px 8px 12px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            max-width: 240px;
-        }
-        .custom-select:after {
-            content: '';
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 0;
-            height: 0;
-            border-left: 5px solid transparent;
-            border-right: 5px solid transparent;
-            border-top: 5px solid var(--text-light);
-        }
-        .custom-select-options {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background-color: rgba(15, 15, 30, 0.95);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            margin-top: 4px;
-            max-height: 300px;
-            overflow-y: auto;
-            z-index: 1000;
-            display: none;
-            backdrop-filter: blur(10px);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-        }
-        .custom-option {
-            padding: 8px 12px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .custom-option:hover {
-            background-color: rgba(74, 108, 247, 0.2);
-        }
-        .model-group {
-            padding: 5px 10px;
-            font-size: 10px;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            margin-top: 5px;
-        }
-        /* Dark mode toggle */
-        .theme-toggle {
-            background-color: transparent;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            width: 36px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            color: var(--text-light);
-        }
-        .theme-toggle:hover {
-            background-color: var(--hover-color);
-        }
-        /* Mobile optimizations */
-        @media screen and (max-width: 768px) {
-            .chat-wrapper {
-                height: 100vh;
-                border-radius: 0;
-            }
-            .custom-select {
-                font-size: 12px;
-                max-width: 140px;
-            }
-            .chat-input {
-                padding: 10px;
-            }
-        }
-        /* Markdown styling */
-        .bot pre {
-            background-color: rgba(15, 15, 30, 0.6);
-            padding: 10px;
-            border-radius: 6px;
-            overflow-x: auto;
-            margin: 10px 0;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .bot code {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 12px;
-        }
-        .bot p {
-            margin-bottom: 8px;
-        }
-        .bot ul, .bot ol {
-            margin-left: 20px;
-            margin-bottom: 8px;
-        }
-        /* Typing indicator */
-        .typing-indicator {
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
-            padding: 5px 10px;
-        }
-        .typing-indicator span {
-            width: 6px;
-            height: 6px;
-            background-color: var(--text-muted);
-            border-radius: 50%;
-            display: inline-block;
-            animation: pulse 1.5s infinite ease-in-out;
-        }
-        .typing-indicator span:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-        .typing-indicator span:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-        @keyframes pulse {
-            0%, 100% {
-                transform: scale(0.8);
-                opacity: 0.5;
-            }
-            50% {
-                transform: scale(1.2);
-                opacity: 1;
             }
         }
-      /* markdown */
-/* Add this to your style section */
-.message pre {
-    background-color: rgba(15, 15, 30, 0.6);
-    padding: 10px;
-    border-radius: 6px;
-    overflow-x: auto;
-    margin: 10px 0;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.message code {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 12px;
-    background-color: rgba(30, 30, 50, 0.3);
-    padding: 2px 4px;
-    border-radius: 3px;
-}
-.message pre code {
-    background-color: transparent;
-    padding: 0;
-}
-.message blockquote {
-    border-left: 3px solid var(--primary-blue);
-    padding-left: 10px;
-    margin: 10px 0;
-    color: var(--text-muted);
-}
-.message h1, .message h2, .message h3 {
-    margin: 15px 0 5px 0;
-}
-.message ul, .message ol {
-    margin-left: 20px;
-    margin-bottom: 8px;
-}
-.message a {
-    color: var(--primary-blue);
-    text-decoration: underline;
-}
-.message p {
-    margin-bottom: 8px;
-}
-.message img {
-    max-width: 100%;
-    border-radius: 8px;
-    margin: 10px 0;
-}
-.message table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 15px 0;
-}
-.message th, .message td {
-    border: 1px solid var(--border-color);
-    padding: 8px;
-    text-align: left;
-}
-.message th {
-    background-color: rgba(15, 15, 30, 0.6);
-}
-/* Tablet adjustments */
-@media screen and (min-width: 769px) and (max-width: 1024px) {
-    .chat-wrapper {
-        max-width: 90%;
-    }
-    .chat-header {
-        padding: 12px 18px;
-        height: calc(var(--header-height) - 10px);
-    }
-    .chat-input {
-        padding: 12px;
-        height: calc(var(--input-height) - 10px);
-    }
-}
-/* Mobile adjustments */
-@media screen and (max-width: 768px) {
-    .chat-wrapper {
-        height: 100vh;
-        border-radius: 0;
-    }
-    .chat-header {
-        padding: 10px 15px;
-        height: 50px;
-    }
-    .chat-messages {
-        padding: 10px;
-        font-size: 14px;
-        margin-bottom: calc(var(--input-height) - 20px);
-    }
-    .chat-input {
-        padding: 8px;
-        height: 60px;
-    }
-    .chat-input input {
-        font-size: 14px;
-        padding: 10px;
-    }
-    .model-select {
-        font-size: 12px;
-        max-width: 140px;
-    }
-}
-/* Extra small devices */
-@media screen and (max-width: 480px) {
-    .chat-header {
-        font-size: 13px;
-        padding: 8px 10px;
-        height: 45px;
-    }
-    .chat-messages {
-        padding: 8px;
-        font-size: 12px;
-    }
-    .chat-input {
-        padding: 6px;
-        height: 50px;
-    }
-    .chat-input input {
-        font-size: 12px;
-        padding: 8px;
-    }
-}
-    </style>
 </head>
-<body>
-    <a href="https://github.com/ParthSadaria" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="Visit Parth Sadaria's GitHub profile">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <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>
         </svg>
     </a>
-    <div class="chat-wrapper">
-        <div class="chat-header">
-            <h2 style="font-family: 'JetBrains Mono', monospace;">LOKI.AI Playground</h2>
-            <div class="header-actions">
-                <div class="custom-select-wrapper">
-                    <div class="custom-select" id="modelSelectDisplay">Select Model</div>
-                    <div class="custom-select-options" id="modelOptions">
-                        <!-- Models will be loaded here -->
-                        <div class="loader" id="modelLoader" style="margin: 10px auto;"></div>
                     </div>
                 </div>
-                <button id="clearChatButton" class="clear-chat">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="3 6 5 6 21 6"></polyline>
-                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                        <line x1="10" y1="11" x2="10" y2="17"></line>
-                        <line x1="14" y1="11" x2="14" y2="17"></line>
                     </svg>
                 </button>
-                <button id="themeToggle" class="theme-toggle">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                     </svg>
                 </button>
             </div>
         </div>
-        <div class="initial-input">
-            <h2>Welcome to LOKI.AI</h2>
-            <div class="input-container">
-                <input type="text" id="initialChatInput" placeholder="What can I help you with today?">
-                <div class="send-icon" id="initialSendIcon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="22" y1="2" x2="11" y2="13"></line>
-                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                     </svg>
-                </div>
             </div>
         </div>
-        <div class="chat-container" id="chatContainer">
-            <div class="chat-messages" id="chatMessages"></div>
-            <div class="chat-input">
-                <div class="chat-input-container">
-                    <input type="text" id="chatInput" placeholder="Type your message...">
-                    <div class="send-icon" id="sendButtonIcon">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <line x1="22" y1="2" x2="11" y2="13"></line>
-                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                         </svg>
-                        <div class="loader" id="sendLoader"></div>
-                    </div>
                 </div>
             </div>
-            <p style="display: block; text-align: center; color: grey; font-size: 9px; z-index: 99; padding-bottom:5px;">
-                Models can make mistakes. Check important info.
-            </p>
         </div>
     </div>
-    <div class="watermark">
         Made with ❤️ by Parth Sadaria
     </div>
     <script>
 document.addEventListener('DOMContentLoaded', function() {
-    const chatWrapper = document.querySelector('.chat-wrapper');
-    const initialInput = document.querySelector('.initial-input');
     const chatContainer = document.getElementById('chatContainer');
     const initialChatInput = document.getElementById('initialChatInput');
     const initialSendIcon = document.getElementById('initialSendIcon');
     const chatMessages = document.getElementById('chatMessages');
     const chatInput = document.getElementById('chatInput');
-    const sendButtonIcon = document.getElementById('sendButtonIcon');
     const sendLoader = document.getElementById('sendLoader');
     const clearChatButton = document.getElementById('clearChatButton');
     const modelSelectDisplay = document.getElementById('modelSelectDisplay');
     const modelOptions = document.getElementById('modelOptions');
     const modelLoader = document.getElementById('modelLoader');
     const themeToggle = document.getElementById('themeToggle');
     let currentStreamingMessage = null;
     let isStreamingInProgress = false;
     let conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
@@ -781,9 +161,17 @@ document.addEventListener('DOMContentLoaded', function() {
     let modelsList = [];
     let isDarkMode = true;
     // Fetch models from API
     async function fetchModels() {
-        modelLoader.style.display = 'block';
         try {
             const response = await fetch('https://parthsadaria-lokiai.hf.space/models', {
                 method: 'GET',
@@ -797,8 +185,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 modelsList = data;
                 populateModels(data);
             } else {
-                console.error('Failed to fetch models:', response.status);
-                // Fallback to some default models
                 const fallbackModels = [
                     { id: "gpt-4o", object: "model" },
                     { id: "gpt-3.5-turbo", object: "model" },
@@ -810,7 +196,6 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         } catch (error) {
             console.error('Error fetching models:', error);
-            // Use the same fallback
             const fallbackModels = [
                 { id: "gpt-4o", object: "model" },
                 { id: "gpt-3.5-turbo", object: "model" },
@@ -819,8 +204,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 { id: "llama-3.1-70b", object: "model" }
             ];
             populateModels(fallbackModels);
-        } finally {
-            modelLoader.style.display = 'none';
         }
     }
@@ -847,28 +230,28 @@ document.addEventListener('DOMContentLoaded', function() {
         modelOptions.innerHTML = '';
         // Add special option for web search
-        const webSearchOption = document.createElement('div');
-        webSearchOption.className = 'custom-option';
-        webSearchOption.textContent = 'SearchGPT (Web-access)';
-        webSearchOption.dataset.value = 'searchgpt';
-        modelOptions.appendChild(webSearchOption);
         // Add a separator
         const separator = document.createElement('div');
-        separator.className = 'model-group';
         separator.textContent = 'AI Models';
         modelOptions.appendChild(separator);
         // Create and append provider groups and their models
         Object.keys(providers).sort().forEach(provider => {
             const providerGroup = document.createElement('div');
-            providerGroup.className = 'model-group';
             providerGroup.textContent = provider;
             modelOptions.appendChild(providerGroup);
             providers[provider].sort((a, b) => a.id.localeCompare(b.id)).forEach(model => {
                 const option = document.createElement('div');
-                option.className = 'custom-option';
                 option.textContent = model.id;
                 option.dataset.value = model.id;
                 modelOptions.appendChild(option);
@@ -897,12 +280,14 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         // Add event listeners to options
-        document.querySelectorAll('.custom-option').forEach(option => {
-            option.addEventListener('click', function() {
-                selectedModel = this.dataset.value;
-                modelSelectDisplay.textContent = this.textContent;
-                modelOptions.style.display = 'none';
-            });
         });
     }
@@ -910,11 +295,26 @@ document.addEventListener('DOMContentLoaded', function() {
         chatMessages.scrollTop = chatMessages.scrollHeight;
     }
     function appendMessage(content, type = 'bot', isStreaming = false) {
         if (type === 'bot' && isStreaming) {
             if (!currentStreamingMessage) {
-                currentStreamingMessage = document.createElement('div');
-                currentStreamingMessage.className = `message ${type}`;
                 chatMessages.appendChild(currentStreamingMessage);
                 // Add to conversation history only at the start of streaming
@@ -927,21 +327,13 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             }
-// Replace the existing formatting code in the appendMessage function
             const formattedContent = content
-            .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
-            .replace(/`([^`]+)`/g, '<code>$1</code>')
-            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-            .replace(/\*(.*?)\*/g, '<em>$1</em>')
-            .replace(/~~(.*?)~~/g, '<del>$1</del>')
-            .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
-            .replace(/^#{3}\s+(.*?)$/gm, '<h3>$1</h3>')
-            .replace(/^#{2}\s+(.*?)$/gm, '<h2>$1</h2>')
-            .replace(/^#{1}\s+(.*?)$/gm, '<h1>$1</h1>')
-            .replace(/^\>\s+(.*?)$/gm, '<blockquote>$1</blockquote>')
-            .replace(/^(\d+)\.\s+(.*?)$/gm, '<ol start="$1"><li>$2</li></ol>')
-            .replace(/^[-*]\s+(.*?)$/gm, '<ul><li>$1</li></ul>')
-            .replace(/\n/g, '<br>');
             currentStreamingMessage.innerHTML += formattedContent;
@@ -956,20 +348,20 @@ document.addEventListener('DOMContentLoaded', function() {
                 isStreamingInProgress = false;
                 currentStreamingMessage = null;
             } else {
-                const messageBox = document.createElement('div');
-                messageBox.className = `message ${type}`;
-                // Apply markdown-like formatting
                 const formattedContent = content
-                    .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
-                    .replace(/(\d+)\.\s*/g, '<br>$1. ')
-                    .replace(/\n/g, '<br>')
-                    .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
                 messageBox.innerHTML = formattedContent;
                 chatMessages.appendChild(messageBox);
-                // Add to conversation history only for new messages
                 if (type === 'user') {
                     conversationHistory.push({
                         role: 'user',
@@ -992,6 +384,15 @@ document.addEventListener('DOMContentLoaded', function() {
         conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
         initialInput.style.display = 'flex';
         chatContainer.style.display = 'none';
     }
     async function sendInitialMessage() {
@@ -1001,23 +402,29 @@ document.addEventListener('DOMContentLoaded', function() {
         initialInput.style.display = 'none';
         chatContainer.style.display = 'flex';
         appendMessage(userMessage, 'user');
         initialChatInput.value = '';
-        scrollToBottom();
-        // Show the loader, hide the send icon
         sendLoader.style.display = 'block';
-        sendButtonIcon.querySelector('svg').style.display = 'none';
         try {
             await callApi(userMessage, selectedModel);
         } catch (error) {
             appendMessage("Oops! Something went wrong. Please try again.", 'bot');
-            console.error("API Error:", error);
         } finally {
             // Hide loader, show send icon
             sendLoader.style.display = 'none';
-            sendButtonIcon.querySelector('svg').style.display = 'block';
         }
     }
@@ -1028,19 +435,18 @@ document.addEventListener('DOMContentLoaded', function() {
         appendMessage(userMessage, 'user');
         chatInput.value = '';
-        // Show the loader, hide the send icon
         sendLoader.style.display = 'block';
-        sendButtonIcon.querySelector('svg').style.display = 'none';
         try {
             await callApi(userMessage, selectedModel);
         } catch (error) {
             appendMessage("Oops! Something went wrong. Please try again.", 'bot');
-            console.error("API Error:", error);
         } finally {
             // Hide loader, show send icon
             sendLoader.style.display = 'none';
-            sendButtonIcon.querySelector('svg').style.display = 'block';
         }
     }
@@ -1048,10 +454,14 @@ document.addEventListener('DOMContentLoaded', function() {
         let typingIndicator = null;
         try {
-            // Add typing indicator before any API call
             typingIndicator = document.createElement('div');
-            typingIndicator.className = 'message bot typing-indicator';
-            typingIndicator.innerHTML = '<span></span><span></span><span></span>';
             chatMessages.appendChild(typingIndicator);
             scrollToBottom();
@@ -1083,7 +493,6 @@ document.addEventListener('DOMContentLoaded', function() {
                             const chunk = decoder.decode(value);
                             const cleanedChunk = chunk.trim();
-                            // Handle different API response formats
                             if (cleanedChunk.startsWith('data:')) {
                                 const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
@@ -1100,11 +509,10 @@ document.addEventListener('DOMContentLoaded', function() {
                                             appendMessage(content, 'bot', true);
                                         }
                                     } catch (err) {
-                                        console.warn("Parsing error:", err, "for chunk:", jsonString);
                                     }
                                 }
                             } else {
-                                // Handle plain text response
                                 appendMessage(cleanedChunk, 'bot', true);
                             }
                         }
@@ -1120,14 +528,12 @@ document.addEventListener('DOMContentLoaded', function() {
                     stream: true
                 };
-                const headers = {
-                    "Content-Type": "application/json",
-                    "Authorization": "playground"
-                };
                 const response = await fetch(url, {
                     method: "POST",
-                    headers: headers,
                     body: JSON.stringify(payload)
                 });
@@ -1151,9 +557,8 @@ document.addEventListener('DOMContentLoaded', function() {
                             const chunk = decoder.decode(value);
                             buffer += chunk;
-                            // Process complete data chunks
                             const lines = buffer.split('\n');
-                            buffer = lines.pop() || "";  // Keep the last incomplete line in buffer
                             for (const line of lines) {
                                 if (line.trim() === '') continue;
@@ -1169,28 +574,11 @@ document.addEventListener('DOMContentLoaded', function() {
                                         appendMessage(content, 'bot', true);
                                     }
                                 } catch (err) {
-                                    console.warn("Parsing error:", err, "for line:", cleanedLine);
                                 }
                             }
                         }
                     }
-                    // Handle any remaining data in buffer
-                    if (buffer.trim() !== '') {
-                        try {
-                            const cleanedBuffer = buffer.replace(/^data:\s*/, '').trim();
-                            if (cleanedBuffer !== '[DONE]') {
-                                const jsonData = JSON.parse(cleanedBuffer);
-                                const content = jsonData.choices?.[0]?.delta?.content || "";
-                                if (content) {
-                                    appendMessage(content, 'bot', true);
-                                }
-                            }
-                        } catch (err) {
-                            console.warn("Parsing error for remaining buffer:", err);
-                        }
-                    }
                 } else {
                     throw new Error(`API responded with status ${response.status}`);
                 }
@@ -1201,7 +589,6 @@ document.addEventListener('DOMContentLoaded', function() {
         } catch (error) {
             console.error("API call error:", error);
-            // Remove typing indicator if still present
             if (typingIndicator) {
                 typingIndicator.remove();
             }
@@ -1212,25 +599,19 @@ document.addEventListener('DOMContentLoaded', function() {
     // Toggle theme
     function toggleTheme() {
         isDarkMode = !isDarkMode;
-        document.body.classList.toggle('light-mode');
         // Update icon based on current theme
         if (isDarkMode) {
-            themeToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-            </svg>`;
         } else {
-            themeToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="5"></circle>
-                <line x1="12" y1="1" x2="12" y2="3"></line>
-                <line x1="12" y1="21" x2="12" y2="23"></line>
-                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                <line x1="1" y1="12" x2="3" y2="12"></line>
-                <line x1="21" y1="12" x2="23" y2="12"></line>
-                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-            </svg>`;
         }
     }
@@ -1240,54 +621,71 @@ document.addEventListener('DOMContentLoaded', function() {
         if (event.key === 'Enter') sendInitialMessage();
     });
-    sendButtonIcon.addEventListener('click', sendMessage);
     chatInput.addEventListener('keypress', (event) => {
         if (event.key === 'Enter') sendMessage();
     });
-    // Clear Chat Button Event Listener
     clearChatButton.addEventListener('click', clearChat);
-    // Model selector dropdown event listeners
-    modelSelectDisplay.addEventListener('click', function() {
-        if (modelOptions.style.display === 'block') {
-            modelOptions.style.display = 'none';
-        } else {
-            modelOptions.style.display = 'block';
-        }
     });
     // Close dropdown when clicking outside
-    document.addEventListener('click', function(event) {
-        if (!event.target.closest('.custom-select-wrapper') && modelOptions.style.display === 'block') {
-            modelOptions.style.display = 'none';
-        }
     });
-    // Theme toggle event listener
     themeToggle.addEventListener('click', toggleTheme);
-    // Initialize the app
     fetchModels();
-    // Add an animation to the chat wrapper
-    if (typeof anime !== 'undefined') {
-        anime({
-            targets: '.chat-wrapper',
-            translateY: [50, 0],
-            opacity: [0, 1],
-            easing: 'easeOutExpo',
-            duration: 1000
-        });
     }
-    // Detect escape key to close model selector
     document.addEventListener('keydown', function(event) {
-        if (event.key === 'Escape' && modelOptions.style.display === 'block') {
-            modelOptions.style.display = 'none';
         }
     });
 });
-</script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LOKI.AI Playground</title>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        mono: ['"JetBrains Mono"', 'monospace'],
+                    },
+                    colors: {
+                        primary: {
+                            DEFAULT: '#10B981',
+                            dark: '#059669',
+                        },
+                        dark: {
+                            DEFAULT: '#111827',
+                            lighter: '#1F2937',
+                            card: '#1E293B',
+                        },
+                    },
+                    animation: {
+                        'bounce-slow': 'bounce 1.5s infinite',
+                        'typing': 'typing 1s infinite',
+                    },
+                    keyframes: {
+                        typing: {
+                            '0%, 100%': { opacity: 0 },
+                            '50%': { opacity: 1 },
+                        }
+                    }
+                }
             }
         }
+    </script>
 </head>
+<body class="dark:bg-dark dark:text-gray-200 min-h-screen transition-colors duration-300">
+    <!-- GitHub Link -->
+    <a href="https://github.com/ParthSadaria" target="_blank" rel="noopener noreferrer"
+       class="fixed top-4 right-4 text-gray-500 hover:text-primary transition-colors duration-300 z-10"
+       aria-label="Visit Parth Sadaria's GitHub profile">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+             class="w-6 h-6" stroke-linecap="round" stroke-linejoin="round">
             <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>
         </svg>
     </a>
+    <!-- Chat Container -->
+    <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 opacity-0 transform translate-y-4" id="chatWrapper">
+        <!-- Header -->
+        <div class="flex justify-between items-center mb-6 p-4 bg-gray-100 dark:bg-dark-lighter rounded-lg shadow-md">
+            <h2 class="text-xl font-mono font-bold text-gray-800 dark:text-gray-100">LOKI.AI Playground</h2>
+            <div class="flex space-x-2">
+                <!-- Model Selector -->
+                <div class="relative" id="modelSelector">
+                    <button class="px-3 py-2 bg-gray-200 dark:bg-dark-card rounded-md text-sm flex items-center space-x-1 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" id="modelSelectButton">
+                        <span id="modelSelectDisplay">Select Model</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                        </svg>
+                    </button>
+                    <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-white dark:bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20" id="modelOptions">
+                        <div class="py-2 px-3 text-sm text-gray-400" id="modelLoader">Loading models...</div>
                     </div>
                 </div>
+                <!-- Clear Chat Button -->
+                <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <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" />
                     </svg>
                 </button>
+                <!-- Theme Toggle Button -->
+                <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <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" />
                     </svg>
                 </button>
             </div>
         </div>
+        <!-- Initial Input -->
+        <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
+            <h2 class="text-2xl font-mono font-semibold">Welcome to LOKI.AI</h2>
+            <div class="w-full max-w-2xl relative">
+                <input type="text" id="initialChatInput"
+                       class="w-full p-4 pr-12 rounded-lg border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-dark-card focus:outline-none focus:ring-2 focus:ring-primary dark:text-white shadow-md transition-all"
+                       placeholder="What can I help you with today?">
+                <button id="initialSendIcon" class="absolute right-3 top-3 text-gray-400 hover:text-primary transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                     </svg>
+                </button>
             </div>
         </div>
+        <!-- Chat Area -->
+        <div class="hidden flex-col h-[70vh] bg-white dark:bg-dark-card rounded-lg shadow-lg overflow-hidden" id="chatContainer">
+            <!-- Messages Area -->
+            <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chatMessages"></div>
+            <!-- Input Area -->
+            <div class="border-t border-gray-200 dark:border-gray-700 p-4">
+                <div class="relative">
+                    <input type="text" id="chatInput"
+                           class="w-full p-3 pr-12 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark-card focus:outline-none focus:ring-2 focus:ring-primary dark:text-white transition-all"
+                           placeholder="Type your message...">
+                    <button id="sendButton" class="absolute right-3 top-3 text-gray-400 hover:text-primary transition-colors">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" id="sendIcon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                         </svg>
+                        <div id="sendLoader" class="hidden">
+                            <div class="w-5 h-5 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
+                        </div>
+                    </button>
                 </div>
+                <p class="text-center text-gray-500 text-xs mt-2">Models can make mistakes. Check important info.</p>
             </div>
         </div>
     </div>
+    <!-- Watermark -->
+    <div class="fixed bottom-2 right-4 text-xs text-gray-500 font-mono">
         Made with ❤️ by Parth Sadaria
     </div>
     <script>
 document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const chatWrapper = document.getElementById('chatWrapper');
+    const initialInput = document.getElementById('initialInput');
     const chatContainer = document.getElementById('chatContainer');
     const initialChatInput = document.getElementById('initialChatInput');
     const initialSendIcon = document.getElementById('initialSendIcon');
     const chatMessages = document.getElementById('chatMessages');
     const chatInput = document.getElementById('chatInput');
+    const sendButton = document.getElementById('sendButton');
+    const sendIcon = document.getElementById('sendIcon');
     const sendLoader = document.getElementById('sendLoader');
     const clearChatButton = document.getElementById('clearChatButton');
+    const modelSelectButton = document.getElementById('modelSelectButton');
     const modelSelectDisplay = document.getElementById('modelSelectDisplay');
     const modelOptions = document.getElementById('modelOptions');
     const modelLoader = document.getElementById('modelLoader');
     const themeToggle = document.getElementById('themeToggle');
+    // State variables
     let currentStreamingMessage = null;
     let isStreamingInProgress = false;
     let conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
     let modelsList = [];
     let isDarkMode = true;
+    // Initialize with animation
+    anime({
+        targets: '#chatWrapper',
+        opacity: [0, 1],
+        translateY: [20, 0],
+        easing: 'easeOutExpo',
+        duration: 800
+    });
     // Fetch models from API
     async function fetchModels() {
         try {
             const response = await fetch('https://parthsadaria-lokiai.hf.space/models', {
                 method: 'GET',
                 modelsList = data;
                 populateModels(data);
             } else {
                 const fallbackModels = [
                     { id: "gpt-4o", object: "model" },
                     { id: "gpt-3.5-turbo", object: "model" },
             }
         } catch (error) {
             console.error('Error fetching models:', error);
             const fallbackModels = [
                 { id: "gpt-4o", object: "model" },
                 { id: "gpt-3.5-turbo", object: "model" },
                 { id: "llama-3.1-70b", object: "model" }
             ];
             populateModels(fallbackModels);
         }
     }
         modelOptions.innerHTML = '';
         // Add special option for web search
+        const searchOption = document.createElement('div');
+        searchOption.className = 'px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer';
+        searchOption.textContent = 'SearchGPT (Web-access)';
+        searchOption.dataset.value = 'searchgpt';
+        modelOptions.appendChild(searchOption);
         // Add a separator
         const separator = document.createElement('div');
+        separator.className = 'px-4 py-1 text-xs font-semibold text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400';
         separator.textContent = 'AI Models';
         modelOptions.appendChild(separator);
         // Create and append provider groups and their models
         Object.keys(providers).sort().forEach(provider => {
             const providerGroup = document.createElement('div');
+            providerGroup.className = 'px-4 py-1 text-xs font-semibold text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400';
             providerGroup.textContent = provider;
             modelOptions.appendChild(providerGroup);
             providers[provider].sort((a, b) => a.id.localeCompare(b.id)).forEach(model => {
                 const option = document.createElement('div');
+                option.className = 'px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer';
                 option.textContent = model.id;
                 option.dataset.value = model.id;
                 modelOptions.appendChild(option);
         }
         // Add event listeners to options
+        document.querySelectorAll('#modelOptions > div').forEach(option => {
+            if (option.dataset.value) {
+                option.addEventListener('click', function() {
+                    selectedModel = this.dataset.value;
+                    modelSelectDisplay.textContent = this.textContent;
+                    modelOptions.classList.add('hidden');
+                });
+            }
         });
     }
         chatMessages.scrollTop = chatMessages.scrollHeight;
     }
+    function createMessageElement(type) {
+        const messageBox = document.createElement('div');
+        messageBox.className = `p-3 rounded-lg ${type === 'user' ? 'bg-primary bg-opacity-10 ml-8' : 'bg-gray-100 dark:bg-gray-800 mr-8'}`;
+        // Add animation
+        anime({
+            targets: messageBox,
+            opacity: [0, 1],
+            translateY: [10, 0],
+            easing: 'easeOutExpo',
+            duration: 400
+        });
+        return messageBox;
+    }
     function appendMessage(content, type = 'bot', isStreaming = false) {
         if (type === 'bot' && isStreaming) {
             if (!currentStreamingMessage) {
+                currentStreamingMessage = createMessageElement(type);
                 chatMessages.appendChild(currentStreamingMessage);
                 // Add to conversation history only at the start of streaming
                 }
             }
+            // Format content
             const formattedContent = content
+                .replace(/```([\s\S]*?)```/g, (match, code) => `<pre class="bg-gray-900 text-gray-100 p-2 rounded my-2 overflow-x-auto">${code}</pre>`)
+                .replace(/`([^`]+)`/g, '<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded text-sm">$1</code>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                .replace(/\n/g, '<br>');
             currentStreamingMessage.innerHTML += formattedContent;
                 isStreamingInProgress = false;
                 currentStreamingMessage = null;
             } else {
+                const messageBox = createMessageElement(type);
+                // Format content
                 const formattedContent = content
+                    .replace(/```([\s\S]*?)```/g, (match, code) => `<pre class="bg-gray-900 text-gray-100 p-2 rounded my-2 overflow-x-auto">${code}</pre>`)
+                    .replace(/`([^`]+)`/g, '<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded text-sm">$1</code>')
+                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                    .replace(/\n/g, '<br>');
                 messageBox.innerHTML = formattedContent;
                 chatMessages.appendChild(messageBox);
+                // Add to conversation history
                 if (type === 'user') {
                     conversationHistory.push({
                         role: 'user',
         conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
         initialInput.style.display = 'flex';
         chatContainer.style.display = 'none';
+        // Animation for initial input
+        anime({
+            targets: '#initialInput',
+            opacity: [0, 1],
+            translateY: [20, 0],
+            easing: 'easeOutExpo',
+            duration: 500
+        });
     }
     async function sendInitialMessage() {
         initialInput.style.display = 'none';
         chatContainer.style.display = 'flex';
+        // Animation for chat container
+        anime({
+            targets: '#chatContainer',
+            opacity: [0, 1],
+            easing: 'easeOutExpo',
+            duration: 500
+        });
         appendMessage(userMessage, 'user');
         initialChatInput.value = '';
+        // Show loader, hide send icon
         sendLoader.style.display = 'block';
+        sendIcon.style.display = 'none';
         try {
             await callApi(userMessage, selectedModel);
         } catch (error) {
             appendMessage("Oops! Something went wrong. Please try again.", 'bot');
         } finally {
             // Hide loader, show send icon
             sendLoader.style.display = 'none';
+            sendIcon.style.display = 'block';
         }
     }
         appendMessage(userMessage, 'user');
         chatInput.value = '';
+        // Show loader, hide send icon
         sendLoader.style.display = 'block';
+        sendIcon.style.display = 'none';
         try {
             await callApi(userMessage, selectedModel);
         } catch (error) {
             appendMessage("Oops! Something went wrong. Please try again.", 'bot');
         } finally {
             // Hide loader, show send icon
             sendLoader.style.display = 'none';
+            sendIcon.style.display = 'block';
         }
     }
         let typingIndicator = null;
         try {
+            // Add typing indicator
             typingIndicator = document.createElement('div');
+            typingIndicator.className = 'p-3 rounded-lg bg-gray-100 dark:bg-gray-800 mr-8 flex space-x-1';
+            typingIndicator.innerHTML = `
+                <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing"></div>
+                <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing" style="animation-delay: 0.2s"></div>
+                <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing" style="animation-delay: 0.4s"></div>
+            `;
             chatMessages.appendChild(typingIndicator);
             scrollToBottom();
                             const chunk = decoder.decode(value);
                             const cleanedChunk = chunk.trim();
                             if (cleanedChunk.startsWith('data:')) {
                                 const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
                                             appendMessage(content, 'bot', true);
                                         }
                                     } catch (err) {
+                                        console.warn("Parsing error:", err);
                                     }
                                 }
                             } else {
                                 appendMessage(cleanedChunk, 'bot', true);
                             }
                         }
                     stream: true
                 };
                 const response = await fetch(url, {
                     method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "Authorization": "playground"
+                    },
                     body: JSON.stringify(payload)
                 });
                             const chunk = decoder.decode(value);
                             buffer += chunk;
                             const lines = buffer.split('\n');
+                            buffer = lines.pop() || "";
                             for (const line of lines) {
                                 if (line.trim() === '') continue;
                                         appendMessage(content, 'bot', true);
                                     }
                                 } catch (err) {
+                                    console.warn("Parsing error:", err);
                                 }
                             }
                         }
                     }
                 } else {
                     throw new Error(`API responded with status ${response.status}`);
                 }
         } catch (error) {
             console.error("API call error:", error);
             if (typingIndicator) {
                 typingIndicator.remove();
             }
     // Toggle theme
     function toggleTheme() {
         isDarkMode = !isDarkMode;
+        document.documentElement.classList.toggle('dark');
         // Update icon based on current theme
         if (isDarkMode) {
+            themeToggle.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <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" />
+                </svg>`;
         } else {
+            themeToggle.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>`;
         }
     }
         if (event.key === 'Enter') sendInitialMessage();
     });
+    sendButton.addEventListener('click', sendMessage);
     chatInput.addEventListener('keypress', (event) => {
         if (event.key === 'Enter') sendMessage();
     });
     clearChatButton.addEventListener('click', clearChat);
+    // Model selector
+    modelSelectButton.addEventListener('click', function(e) {
+        e.stopPropagation();
+        modelOptions.classList.toggle('hidden');
     });
     // Close dropdown when clicking outside
+    document.addEventListener('click', function() {
+        modelOptions.classList.add('hidden');
     });
+    // Theme toggle
     themeToggle.addEventListener('click', toggleTheme);
+    // Initialize
+  // Initialize
     fetchModels();
+    // Add event listeners to prevent propagation within model options
+    modelOptions.addEventListener('click', function(e) {
+        e.stopPropagation();
+    });
+    // Add responsive behavior
+    function resizeChat() {
+        if (window.innerWidth < 640) {
+            chatContainer.style.height = 'calc(100vh - 180px)';
+        } else {
+            chatContainer.style.height = '70vh';
+        }
     }
+    window.addEventListener('resize', resizeChat);
+    resizeChat();
+    // Check for saved theme preference
+    if (localStorage.getItem('darkMode') === 'false') {
+        toggleTheme();
+    }
+    // Save theme preference when changed
+    themeToggle.addEventListener('click', function() {
+        localStorage.setItem('darkMode', isDarkMode);
+    });
+    // Keyboard shortcuts
     document.addEventListener('keydown', function(event) {
+        // Ctrl+Enter to send in chat area
+        if (event.ctrlKey && event.key === 'Enter' && document.activeElement === chatInput) {
+            sendMessage();
+        }
+        // Escape to close model dropdown
+        if (event.key === 'Escape') {
+            modelOptions.classList.add('hidden');
         }
     });
 });
+    </script>
 </body>
 </html>