Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Nov 19, 2024

Commit

12f5eb9

verified ·

1 Parent(s): 5e13b53

Update playground.html

Browse files

Files changed (1) hide show

playground.html +300 -282

playground.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -13,321 +13,339 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
     <style>
-       @import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Protest+Revolution&display=swap');
-        :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;
-        }
-        * {
-            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;
-            height: 100vh;
-            overflow: hidden;
-            perspective: 2000px;
-        }
-        .chat-wrapper {
-            position: relative;
-            width: 100%;
-            max-width: 800px;
-            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);
-        }
-        .watermark {
-            position: absolute;
-            bottom: 10px;
-            right: 15px;
-            color: var(--text-muted);
-            font-size: 10px;
-            opacity: 0.5;
-            transition: opacity 0.3s ease;
-        }
-        .watermark:hover {
-            opacity: 0.8;
-        }
-        .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);
-        }
-        .header-actions {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .model-select {
-            background-color: black;
-            color: var(--text-light);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 10px 14px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .clear-chat {
-            background-color: var(--delete-red);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            padding: 10px 14px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        .clear-chat:hover {
-            background-color: #ff6666;
-        }
-        .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));
-            transition: all 0.5s ease;
-        }
-        .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,
-        .chat-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;
-        }
-        .initial-input input:focus,
-        .chat-input input:focus {
-            border-color: var(--primary-blue);
-            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
-        }
-        .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;
-        }
-        .chat-container {
-            display: none;
-            flex-direction: column;
-            height: 100%;
-        }
-        .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;
-            overscroll-behavior: contain;
-        }
-        .message {
-            max-width: 80%;
-            width: fit-content;
-            padding: 12px 18px;
-            border-radius: 12px;
-            font-size: 14px;
-            line-height: 1.5;
-            opacity: 0;
-            transform: translateY(20px);
-            animation: fadeIn 0.4s forwards;
-            position: relative;
-            overflow: hidden;
-        }
-        .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;
-        }
-        .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);
-        }
-        .chat-input {
-            display: flex;
-            gap: 12px;
-            padding: 16px;
-            background-color: var(--bg-darker);
-            border-top: 1px solid var(--border-color);
-        }
-        .chat-input button {
-            background-color: var(--accent-color);
-            color: white;
-            border: none;
-            border-radius: 12px;
-            padding: 12px 24px;
-            cursor: pointer;
-            font-family: 'JetBrains Mono', monospace;
-            transition: all 0.3s ease;
-        }
-        .chat-input button:hover {
-            background-color: var(--primary-blue);
-            transform: scale(1.02);
-        }
-        @keyframes fadeIn {
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-            /* Dark theme customization for Select2 */
-            .select2-container--default .select2-selection--single {
-        background-color: #333; /* Dark background */
-        color: white; /* White text */
-        border: 1px solid #555; /* Dark border */
-        font-size: 14px;
-    }
-    /* Customize selected item background */
-    .select2-container--default .select2-selection--single .select2-selection__rendered {
-        background-color: #333; /* Dark background */
-        color: white; /* White text */
-    }
-    .select2-dropdown {
-        background-color: #333; /* Dark dropdown background */
-        color: white; /* White text in dropdown */
-        max-height: 300px; /* Limit dropdown height */
-        overflow-y: auto; /* Add scrollbar */
-    }
-    .select2-container--default .select2-results__option {
-        background-color: #333; /* Dark background for options */
-        color: white; /* White text for options */
-    }
-    .select2-container--default .select2-results__option--highlighted {
-        background-color: #555; /* Highlighted option color */
-        color: white; /* White text on hover */
-    }
     </style>
 </head>
@@ -381,7 +399,7 @@
             <div class="chat-messages" id="chatMessages"></div>
             <div class="chat-input">
                 <input type="text" id="chatInput" placeholder="Type your message...">
-                <button id="sendButton">Send</button>
             </div>
         </div>
     </div>

+ <!DOCTYPE html>
 <html lang="en">
 <head>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
     <style>
+@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Protest+Revolution&display=swap');
+: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;
+    height: 100vh;
+    overflow: hidden;
+    perspective: 2000px;
+}
+.chat-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    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; /* Space for send icon */
+    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;
+}
+.model-select {
+    background-color: black;
+    color: var(--text-light);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.clear-chat {
+    background-color: var(--delete-red);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.clear-chat:hover {
+    background-color: #ff6666;
+}
+.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;
+}
+/* Select2 customization */
+.select2-container--default .select2-selection--single {
+    background-color: #333;
+    color: white;
+    border: 1px solid #555;
+    font-size: 14px;
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    background-color: #333;
+    color: white;
+}
+.select2-dropdown {
+    background-color: #333;
+    color: white;
+    max-height: 300px;
+    overflow-y: auto;
+}
+.select2-container--default .select2-results__option {
+    background-color: #333;
+    color: white;
+}
+.select2-container--default .select2-results__option--highlighted {
+    background-color: #555;
+    color: white;
+}
     </style>
 </head>
             <div class="chat-messages" id="chatMessages"></div>
             <div class="chat-input">
                 <input type="text" id="chatInput" placeholder="Type your message...">
+                <button id="sendButton" style="padding: 10px 10px; background-color: black;color: #e0e0e8; font-family: 'JetBrains Mono'; border: solid #1a1a2e 2px; border-radius: 15px;">Send</button>
             </div>
         </div>
     </div>