Spaces:

atheon-inc
/

atheon-in-action

Running

App Files Files Community

dexter2389 commited on Apr 23

Commit

e5ab376

1 Parent(s): 8b0dded

Add support for analytics & do minor UI changes

Browse files

Files changed (3) hide show

app/static/index.html +245 -156
app/static/login.html +94 -77
uv.lock +1 -1

app/static/index.html CHANGED Viewed

@@ -2,30 +2,34 @@
 <html lang="en" class="light">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Chat Interface</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
-            darkMode: 'class',
             theme: {
                 extend: {
                     colors: {
                         primary: {
-                            DEFAULT: '#3b82f6',
-                            foreground: '#ffffff',
                         },
                         secondary: {
-                            DEFAULT: '#f3f4f6',
-                            foreground: '#1f2937',
                         },
-                    }
-                }
-            }
-        }
     </script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-['Inter'] transition-colors duration-200">
@@ -34,43 +38,46 @@
         <header class="border-b border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-800">
             <div class="max-w-screen-xl mx-auto flex items-center justify-between">
                 <div class="flex items-center">
-                    <h1 class="text-xl font-medium">OpenGPT with <svg
-                            style='display: inline-block; vertical-align: -16.75%; margin-right: -1.5%;'
-                            stroke_linecap='round' stroke_linejoin='round' width='32' height='32' viewBox='0 0 24 24'
-                            xmlns='http://www.w3.org/2000/svg'>
                             <defs>
-                                <linearGradient id='logo-grad-arm' x1='0%' y1='0%' x2='100%' y2='0%'>
-                                    <stop offset='0%' style='stop-color:#f7cd1b; stop-opacity:1' />
-                                    <stop offset='100%' style='stop-color:#f9800c; stop-opacity:1' />
                                 </linearGradient>
                             </defs>
-                            <g class='tooltip' style='display:inline'>
-                                <path fill='#067ff3'
-                                    d='M.227 20.705a5.444 5.444 0 0 0 4.745-2.858l4.48-8.13L7.67 6.613.03 20.368a.227.227 0 0 0 .198.337z' />
-                                <path fill='#07b682'
-                                    d='M16.003 13.074l-2.747 1.361 1.944 3.39a5.697 5.682-.012 0 0 4.935 2.869.19.19 0 0 0 .165-.286z' />
-                                <path fill='url(#logo-grad-arm)'
-                                    d='M7.99 14.555L6.2 17.872a.03.03 0 0 0 .04.042l17.744-8.798a.03.03 0 0 0-.022-.055l-11.67 3.765-3.851 1.344a.819.819 0 0 0-.451.385z' />
-                                <path class='logo-arm'
-                                    d='M10.011 3.3a.683.681-.012 0 0-.733.339L8.19 5.603l4.137 7.212 2.964-.956-4.825-8.234a.683.681-.012 0 0-.455-.324z' />
                             </g>
                             <style>
                                 @media (prefers-color-scheme: light) {
                                     .logo-arm {
-                                        fill: black
                                     }
                                 }
                                 @media (prefers-color-scheme: dark) {
                                     .logo-arm {
-                                        fill: white
                                     }
                                 }
                             </style>
-                        </svg><span class="font-semibold" style="color: #067ff3;">rc</span><span class="font-semibold"
-                            style="color: #f9800c;">a</span><span class="font-semibold"
-                            style="color: #07b682;">na</span></h1>
                 </div>
                 <!--  -->
@@ -84,7 +91,9 @@
                     <a href="https://arcana.ad/"
                         class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium">Home</a>
                     <button id="logout-button"
-                        class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium">Logout</button>
                 </nav>
             </div>
         </header>
@@ -107,32 +116,38 @@
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="gemma2">
-                                Gemma2</li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="llama3_1">
-                                Llama3.1</li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="llama3_3">
-                                Llama3.3</li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="qwen2_5">
-                                Qwen2.5</li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="deepseek_r1">
-                                Deepseek_R1</li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="gemma3">
-                                Gemma3</li>
                         </ul>
                     </div>
                 </div>
@@ -180,27 +195,35 @@
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Create a short 3 scene video script</div>
-                <div class="text-gray-500 text-sm">set in a cyberpunk world run by AI</div>
             </button>
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Write a python code</div>
-                <div class="text-gray-500 text-sm">for a simple, functional web app</div>
             </button>
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Help me study</div>
-                <div class="text-gray-500 text-sm">vocabulary for a college entrance exam</div>
             </button>
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Give me ideas</div>
-                <div class="text-gray-500 text-sm">for a LinkedIn post for my recent promotion</div>
             </button>
         </div>
         <!-- Input area -->
-        <div class="border-t border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-800">
             <div class="max-w-screen-md mx-auto">
                 <form id="chat-form" class="relative">
                     <div
@@ -216,7 +239,7 @@
                         </button>
                         <input type="text" id="user-input"
                             class="flex-1 py-3 px-2 bg-transparent focus:outline-none text-gray-800 dark:text-gray-200"
-                            placeholder="Send a Message" autocomplete="off">
                         <button type="button"
                             class="p-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
@@ -238,16 +261,14 @@
                         </button>
                     </div>
                 </form>
-                <!-- Footer text -->
-                <div class="text-center text-gray-400 dark:text-gray-500 text-sm mt-3">
-                    LLMs can make mistakes. Verify important information.
-                </div>
             </div>
         </div>
         <footer class="text-center p-4 text-gray-500 dark:text-gray-400 dark:bg-gray-800 text-sm">
-            <p>© 2025 Arcana Inc. All rights reserved.</p>
         </footer>
     </main>
@@ -308,15 +329,15 @@
         .message-content em {
             font-style: normal;
-            color: #4B5563;
         }
         .dark .message-content em {
-            color: #9CA3AF;
         }
         .message-content code {
-            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
             background-color: #f1f5f9;
             padding: 0.1em 0.3em;
             border-radius: 0.25rem;
@@ -343,7 +364,6 @@
             border-color: #334155;
         }
         .message-content pre code {
             background-color: transparent;
             padding: 0;
@@ -378,16 +398,18 @@
     </style>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
             const html = document.documentElement;
             // Function to set theme based on system preference
             function setThemeBasedOnSystemPreference() {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                 if (prefersDark) {
-                    html.classList.add('dark');
                 } else {
-                    html.classList.remove('dark');
                 }
             }
@@ -395,61 +417,84 @@
             setThemeBasedOnSystemPreference();
             // Listen for system preference changes
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-                setThemeBasedOnSystemPreference();
-            });
             // Check if user is logged in
-            const verifiedId = sessionStorage.getItem('verifiedId');
             if (!verifiedId) {
-                window.location.href = '/login';
                 return;
             }
             // Logout functionality
-            const logoutButton = document.getElementById('logout-button');
-            logoutButton.addEventListener('click', () => {
-                sessionStorage.removeItem('verifiedId');
-                window.location.href = '/login';
             });
-            const chatForm = document.getElementById('chat-form');
-            const userInput = document.getElementById('user-input');
-            const chatContainer = document.getElementById('chat-container');
-            const loadingIndicator = document.getElementById('loading');
-            const suggestionButtons = document.querySelectorAll('.max-w-screen-md.mx-auto.px-4.md\\:px-0.mb-6 button');
             // Model selector elements
-            const modelDropdownButton = document.getElementById('model-dropdown-button');
-            const modelDropdown = document.getElementById('model-dropdown');
-            const modelOptions = document.querySelectorAll('.model-option');
-            const selectedModelText = document.getElementById('selected-model-text');
             // Default model
-            let selectedModel = 'gemma2';
             // Toggle dropdown
-            modelDropdownButton.addEventListener('click', () => {
-                modelDropdown.classList.toggle('hidden');
             });
             // Close dropdown when clicking outside
-            document.addEventListener('click', (e) => {
-                if (!modelDropdownButton.contains(e.target) && !modelDropdown.contains(e.target)) {
-                    modelDropdown.classList.add('hidden');
                 }
             });
             // Handle model selection
-            modelOptions.forEach(option => {
-                option.addEventListener('click', () => {
-                    selectedModel = option.getAttribute('data-value');
                     selectedModelText.textContent = option.textContent;
-                    modelDropdown.classList.add('hidden');
                     // Add visual indication of selected model
-                    modelOptions.forEach(opt => opt.classList.remove('bg-blue-50', 'text-blue-700', 'dark:bg-blue-900/50', 'dark:text-blue-300'));
-                    option.classList.add('bg-blue-50', 'text-blue-700', 'dark:bg-blue-900/50', 'dark:text-blue-300');
                 });
             });
@@ -458,57 +503,81 @@
             // Function to add a message to the chat
             function formatMessage(text) {
                 // First, preserve code blocks by replacing them with placeholders
                 const codeBlocks = [];
-                text = text.replace(/\`\`\`([\s\S]*?)\`\`\`/g, function (match, code) {
-                    const id = codeBlocks.length;
-                    codeBlocks.push(code.trim());
-                    return `__CODE_BLOCK_${id}__`;
-                });
                 // Handle inline code
                 const inlineCodes = [];
-                text = text = text.replace(/`([^`]+)`/g, function (match, code) {
                     const id = inlineCodes.length;
                     inlineCodes.push(code);
                     return `__INLINE_CODE_${id}__`;
                 });
                 // Replace ** with proper styling
-                text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
                 // Handle numbered lists
-                text = text.replace(/(\d+\.\s[^*]*?)(?=\d+\.|$)/g, '<div class="mb-3">$1</div>');
                 // Handle sections with asterisks
-                text = text.replace(/\*(.*?)\*/g, '<em>$1</em>');
                 // Handle unordered lists
-                text = text.replace(/^- (.*?)$/gm, '<li>$1</li>');
-                text = text.replace(/<li>.*?<\/li>(?:\s*<li>.*?<\/li>)+/gs, function (match) {
-                    return '<ul>' + match + '</ul>';
-                });
                 // Handle ordered lists
-                text = text.replace(/^(\d+)\. (.*?)$/gm, '<li>$2</li>');
-                text = text.replace(/<li>.*?<\/li>(?:\s*<li>.*?<\/li>)+/gs, function (match) {
-                    return '<ol>' + match + '</ol>';
-                });
                 // Handle blockquotes
-                text = text.replace(/^> (.*?)$/gm, '<blockquote>$1</blockquote>');
                 // Add proper spacing between sections
-                text = text.split('\n').map(line => line.trim()).filter(line => line).join('</p><p>');
                 // Restore code blocks
-                codeBlocks.forEach((code, i) => {
-                    text = text.replace(`__CODE_BLOCK_${i}__`, `</p><pre><code>${escapeHtml(code)}</code></pre><p>`);
                 });
                 // Restore inline code
                 inlineCodes.forEach((code, i) => {
-                    text = text.replace(`__INLINE_CODE_${i}__`, `<code>${escapeHtml(code)}</code>`);
                 });
                 return `<p>${text}</p>`;
@@ -516,6 +585,7 @@
             // Helper function to escape HTML in code blocks
             function escapeHtml(text) {
                 return text
                     .replace(/&/g, "&amp;")
                     .replace(/</g, "&lt;")
@@ -527,39 +597,55 @@
             // Function to add a message to the chat
             function addMessage(content, isUser = false) {
                 // Hide the welcome message when chat starts
-                const welcomeMessage = chatContainer.querySelector('.flex.flex-col.items-center.justify-center');
                 if (welcomeMessage) {
                     welcomeMessage.remove();
                 }
                 // Hide suggestion buttons when chat starts
-                const suggestionContainer = document.querySelector('.max-w-screen-md.mx-auto.px-4.md\\:px-0.mb-6');
-                if (suggestionContainer && !suggestionContainer.classList.contains('hidden')) {
-                    suggestionContainer.classList.add('hidden');
                 }
-                const messageDiv = document.createElement('div');
-                messageDiv.className = 'max-w-screen-md mx-auto mb-6';
                 const formattedContent = isUser ? content : formatMessage(content);
                 const html = `
-          <div class="flex items-start ${isUser ? 'justify-end' : ''}">
-            ${!isUser ? `
-              <div class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-2">
-                <span class="font-semibold text-sm">AR</span>
-              </div>
-            ` : ''}
-            <div class="${isUser ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-100' : 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200'} p-3 rounded-lg max-w-[80%] message-content">
-              ${formattedContent}
-            </div>
-            ${isUser ? `
-              <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-blue-800 dark:text-blue-200 ml-2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>
-              </div>
-            ` : ''}
-          </div>
-        `;
                 messageDiv.innerHTML = html;
                 chatContainer.appendChild(messageDiv);
@@ -570,17 +656,17 @@
             // Function to show loading indicator
             function showLoading() {
-                loadingIndicator.classList.remove('hidden');
                 chatContainer.scrollTop = chatContainer.scrollHeight;
             }
             // Function to hide loading indicator
             function hideLoading() {
-                loadingIndicator.classList.add('hidden');
             }
             // Handle form submission
-            chatForm.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 const message = userInput.value.trim();
@@ -590,34 +676,34 @@
                 addMessage(message, true);
                 // Clear input
-                userInput.value = '';
                 // Show loading indicator
                 showLoading();
                 try {
                     // Send message to API
-                    const verifiedId = sessionStorage.getItem('verifiedId');
-                    const response = await fetch('/chat', {
-                        method: 'POST',
                         headers: {
-                            'Content-Type': 'application/json',
-                            'Authorization': `Bearer ${verifiedId}`
                         },
                         body: JSON.stringify({
                             message: message,
-                            model: selectedModel
                         }),
                     });
                     if (!response.ok) {
                         // If unauthorized, redirect to login
                         if (response.status === 401) {
-                            sessionStorage.removeItem('verifiedId');
-                            window.location.href = '/login';
                             return;
                         }
-                        throw new Error('API request failed');
                     }
                     const data = await response.json();
@@ -627,30 +713,33 @@
                     // Add AI response to chat
                     addMessage(data.response);
                 } catch (error) {
-                    console.error('Error:', error);
                     // Hide loading indicator
                     hideLoading();
                     // Add error message
-                    addMessage('Sorry, there was an error processing your request. Please try again.');
                 }
             });
             // Handle suggestion button clicks
-            suggestionButtons.forEach(button => {
-                button.addEventListener('click', () => {
-                    const mainText = button.querySelector('.font-medium').textContent;
-                    const subText = button.querySelector('.text-gray-500, .text-gray-400').textContent;
                     const fullText = `${mainText} ${subText}`;
                     // Set the input value
                     userInput.value = fullText;
                     // Submit the form
-                    chatForm.dispatchEvent(new Event('submit'));
                 });
             });

 <html lang="en" class="light">
 <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="arcana-project-verification" content="bac75f10-2276-42b3-a839-16ae98baa57c" />
     <title>AI Chat Interface</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
+            darkMode: "class",
             theme: {
                 extend: {
                     colors: {
                         primary: {
+                            DEFAULT: "#3b82f6",
+                            foreground: "#ffffff",
                         },
                         secondary: {
+                            DEFAULT: "#f3f4f6",
+                            foreground: "#1f2937",
                         },
+                    },
+                },
+            },
+        };
     </script>
+    <script data-arcana-publisher-key="arc-pub-f8066482a332b510a0dd998dc1c614d419582f2e7326f69236602562c9d419cf"
+        src="https://js.arcana.ad/arcana.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet" />
 </head>
 <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-['Inter'] transition-colors duration-200">
         <header class="border-b border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-800">
             <div class="max-w-screen-xl mx-auto flex items-center justify-between">
                 <div class="flex items-center">
+                    <h1 class="text-xl font-medium">
+                        OpenGPT with
+                        <svg style="
+                  display: inline-block;
+                  vertical-align: -16.75%;
+                  margin-right: -1.5%;
+                " stroke_linecap="round" stroke_linejoin="round" width="32" height="32" viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg">
                             <defs>
+                                <linearGradient id="logo-grad-arm" x1="0%" y1="0%" x2="100%" y2="0%">
+                                    <stop offset="0%" style="stop-color: #f7cd1b; stop-opacity: 1" />
+                                    <stop offset="100%" style="stop-color: #f9800c; stop-opacity: 1" />
                                 </linearGradient>
                             </defs>
+                            <g class="tooltip" style="display: inline">
+                                <path fill="#067ff3"
+                                    d="M.227 20.705a5.444 5.444 0 0 0 4.745-2.858l4.48-8.13L7.67 6.613.03 20.368a.227.227 0 0 0 .198.337z" />
+                                <path fill="#07b682"
+                                    d="M16.003 13.074l-2.747 1.361 1.944 3.39a5.697 5.682-.012 0 0 4.935 2.869.19.19 0 0 0 .165-.286z" />
+                                <path fill="url(#logo-grad-arm)"
+                                    d="M7.99 14.555L6.2 17.872a.03.03 0 0 0 .04.042l17.744-8.798a.03.03 0 0 0-.022-.055l-11.67 3.765-3.851 1.344a.819.819 0 0 0-.451.385z" />
+                                <path class="logo-arm"
+                                    d="M10.011 3.3a.683.681-.012 0 0-.733.339L8.19 5.603l4.137 7.212 2.964-.956-4.825-8.234a.683.681-.012 0 0-.455-.324z" />
                             </g>
                             <style>
                                 @media (prefers-color-scheme: light) {
                                     .logo-arm {
+                                        fill: black;
                                     }
                                 }
                                 @media (prefers-color-scheme: dark) {
                                     .logo-arm {
+                                        fill: white;
                                     }
                                 }
                             </style>
+                        </svg><span class="font-semibold" style="color: #067ff3">rc</span><span class="font-semibold"
+                            style="color: #f9800c">a</span><span class="font-semibold" style="color: #07b682">na</span>
+                    </h1>
                 </div>
                 <!--  -->
                     <a href="https://arcana.ad/"
                         class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium">Home</a>
                     <button id="logout-button"
+                        class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium">
+                        Logout
+                    </button>
                 </nav>
             </div>
         </header>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="gemma2">
+                                Gemma2
+                            </li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="llama3_1">
+                                Llama3.1
+                            </li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="llama3_3">
+                                Llama3.3
+                            </li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="qwen2_5">
+                                Qwen2.5
+                            </li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="deepseek_r1">
+                                Deepseek_R1
+                            </li>
                         </ul>
                         <ul class="py-1">
                             <li class="model-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer text-gray-800 dark:text-gray-200"
                                 data-value="gemma3">
+                                Gemma3
+                            </li>
                         </ul>
                     </div>
                 </div>
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Create a short 3 scene video script</div>
+                <div class="text-gray-500 text-sm">
+                    set in a cyberpunk world run by AI
+                </div>
             </button>
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Write a python code</div>
+                <div class="text-gray-500 text-sm">
+                    for a simple, functional web app
+                </div>
             </button>
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Help me study</div>
+                <div class="text-gray-500 text-sm">
+                    vocabulary for a college entrance exam
+                </div>
             </button>
             <button
                 class="text-left bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 p-4 rounded-xl transition-colors">
                 <div class="font-medium">Give me ideas</div>
+                <div class="text-gray-500 text-sm">
+                    for a LinkedIn post for my recent promotion
+                </div>
             </button>
         </div>
         <!-- Input area -->
+        <div class="border-t border-gray-200 dark:border-gray-700 px-4 pt-4 bg-white dark:bg-gray-800">
             <div class="max-w-screen-md mx-auto">
                 <form id="chat-form" class="relative">
                     <div
                         </button>
                         <input type="text" id="user-input"
                             class="flex-1 py-3 px-2 bg-transparent focus:outline-none text-gray-800 dark:text-gray-200"
+                            placeholder="Send a Message" autocomplete="off" />
                         <button type="button"
                             class="p-3 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                         </button>
                     </div>
                 </form>
             </div>
         </div>
         <footer class="text-center p-4 text-gray-500 dark:text-gray-400 dark:bg-gray-800 text-sm">
+            <p class="text-gray-400 dark:text-gray-500 p-1">
+                LLMs can make mistakes. Verify important information.
+            </p>
+            <p class="p-1">© 2025 Arcana Inc. All rights reserved.</p>
         </footer>
     </main>
         .message-content em {
             font-style: normal;
+            color: #4b5563;
         }
         .dark .message-content em {
+            color: #9ca3af;
         }
         .message-content code {
+            font-family: "Menlo", "Monaco", "Courier New", monospace;
             background-color: #f1f5f9;
             padding: 0.1em 0.3em;
             border-radius: 0.25rem;
             border-color: #334155;
         }
         .message-content pre code {
             background-color: transparent;
             padding: 0;
     </style>
     <script>
+        document.addEventListener("DOMContentLoaded", () => {
             const html = document.documentElement;
             // Function to set theme based on system preference
             function setThemeBasedOnSystemPreference() {
+                const prefersDark = window.matchMedia(
+                    "(prefers-color-scheme: dark)"
+                ).matches;
                 if (prefersDark) {
+                    html.classList.add("dark");
                 } else {
+                    html.classList.remove("dark");
                 }
             }
             setThemeBasedOnSystemPreference();
             // Listen for system preference changes
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .addEventListener("change", () => {
+                    setThemeBasedOnSystemPreference();
+                });
             // Check if user is logged in
+            const verifiedId = sessionStorage.getItem("verifiedId");
             if (!verifiedId) {
+                window.location.href = "/login";
                 return;
             }
             // Logout functionality
+            const logoutButton = document.getElementById("logout-button");
+            logoutButton.addEventListener("click", () => {
+                sessionStorage.removeItem("verifiedId");
+                window.location.href = "/login";
             });
+            const chatForm = document.getElementById("chat-form");
+            const userInput = document.getElementById("user-input");
+            const chatContainer = document.getElementById("chat-container");
+            const loadingIndicator = document.getElementById("loading");
+            const suggestionButtons = document.querySelectorAll(
+                ".max-w-screen-md.mx-auto.px-4.md\\:px-0.mb-6 button"
+            );
             // Model selector elements
+            const modelDropdownButton = document.getElementById(
+                "model-dropdown-button"
+            );
+            const modelDropdown = document.getElementById("model-dropdown");
+            const modelOptions = document.querySelectorAll(".model-option");
+            const selectedModelText = document.getElementById(
+                "selected-model-text"
+            );
             // Default model
+            let selectedModel = "gemma2";
             // Toggle dropdown
+            modelDropdownButton.addEventListener("click", () => {
+                modelDropdown.classList.toggle("hidden");
             });
             // Close dropdown when clicking outside
+            document.addEventListener("click", (e) => {
+                if (
+                    !modelDropdownButton.contains(e.target) &&
+                    !modelDropdown.contains(e.target)
+                ) {
+                    modelDropdown.classList.add("hidden");
                 }
             });
             // Handle model selection
+            modelOptions.forEach((option) => {
+                option.addEventListener("click", () => {
+                    selectedModel = option.getAttribute("data-value");
                     selectedModelText.textContent = option.textContent;
+                    modelDropdown.classList.add("hidden");
                     // Add visual indication of selected model
+                    modelOptions.forEach((opt) =>
+                        opt.classList.remove(
+                            "bg-blue-50",
+                            "text-blue-700",
+                            "dark:bg-blue-900/50",
+                            "dark:text-blue-300"
+                        )
+                    );
+                    option.classList.add(
+                        "bg-blue-50",
+                        "text-blue-700",
+                        "dark:bg-blue-900/50",
+                        "dark:text-blue-300"
+                    );
                 });
             });
             // Function to add a message to the chat
             function formatMessage(text) {
+                console.log(text)
                 // First, preserve code blocks by replacing them with placeholders
                 const codeBlocks = [];
+                text = text.replace(
+                    /^```(?:([\w-]+)[ \t]*)?\r?\n([\s\S]*?)\r?\n```/gm,
+                    function (match, lang, code) {
+                        const id = codeBlocks.length;
+                        codeBlocks.push({ lang: lang || null, code: code.trim() });
+                        return `__CODE_BLOCK_${id}__`;
+                    }
+                );
                 // Handle inline code
                 const inlineCodes = [];
+                text = text.replace(/`([^`]+)`/g, function (match, code) {
                     const id = inlineCodes.length;
                     inlineCodes.push(code);
                     return `__INLINE_CODE_${id}__`;
                 });
                 // Replace ** with proper styling
+                text = text.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
                 // Handle numbered lists
+                text = text.replace(
+                    /(\d+\.\s[^*]*?)(?=\d+\.|$)/g,
+                    '<div class="mb-3">$1</div>'
+                );
                 // Handle sections with asterisks
+                text = text.replace(/\*(.*?)\*/g, "<em>$1</em>");
                 // Handle unordered lists
+                text = text.replace(/^- (.*?)$/gm, "<li>$1</li>");
+                text = text.replace(
+                    /<li>.*?<\/li>(?:\s*<li>.*?<\/li>)+/gs,
+                    function (match) {
+                        return "<ul>" + match + "</ul>";
+                    }
+                );
                 // Handle ordered lists
+                text = text.replace(/^(\d+)\. (.*?)$/gm, "<li>$2</li>");
+                text = text.replace(
+                    /<li>.*?<\/li>(?:\s*<li>.*?<\/li>)+/gs,
+                    function (match) {
+                        return "<ol>" + match + "</ol>";
+                    }
+                );
                 // Handle blockquotes
+                text = text.replace(/^> (.*?)$/gm, "<blockquote>$1</blockquote>");
                 // Add proper spacing between sections
+                text = text
+                    .split("\n")
+                    .map((line) => line.trim())
+                    .filter((line) => line)
+                    .join("<p></p>");
                 // Restore code blocks
+                codeBlocks.forEach((codeBlock, i) => {
+                    text = text.replace(
+                        `__CODE_BLOCK_${i}__`,
+                        `<pre><code class="${escapeHtml(codeBlock.lang) ?? "plaintext"
+                        }">${escapeHtml(codeBlock.code)}</code></pre>`
+                    );
                 });
                 // Restore inline code
                 inlineCodes.forEach((code, i) => {
+                    text = text.replace(
+                        `__INLINE_CODE_${i}__`,
+                        `<code>${escapeHtml(code)}</code>`
+                    );
                 });
                 return `<p>${text}</p>`;
             // Helper function to escape HTML in code blocks
             function escapeHtml(text) {
+                if (!text) return "";
                 return text
                     .replace(/&/g, "&amp;")
                     .replace(/</g, "&lt;")
             // Function to add a message to the chat
             function addMessage(content, isUser = false) {
                 // Hide the welcome message when chat starts
+                const welcomeMessage = chatContainer.querySelector(
+                    ".flex.flex-col.items-center.justify-center"
+                );
                 if (welcomeMessage) {
                     welcomeMessage.remove();
                 }
                 // Hide suggestion buttons when chat starts
+                const suggestionContainer = document.querySelector(
+                    ".max-w-screen-md.mx-auto.px-4.md\\:px-0.mb-6"
+                );
+                if (
+                    suggestionContainer &&
+                    !suggestionContainer.classList.contains("hidden")
+                ) {
+                    suggestionContainer.classList.add("hidden");
                 }
+                const messageDiv = document.createElement("div");
+                messageDiv.className = "max-w-screen-md mx-auto mb-6";
                 const formattedContent = isUser ? content : formatMessage(content);
                 const html = `
+                  <div class="flex items-start ${isUser ? "justify-end" : ""}">
+                    ${!isUser
+                        ? `
+                      <div class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-2">
+                        <span class="font-semibold text-sm">AR</span>
+                      </div>
+                    `
+                        : ""
+                    }
+                    <div class="${isUser
+                        ? "bg-blue-50 dark:bg-blue-900/30 text-blue-800 dark:text-blue-100"
+                        : "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
+                    } p-3 rounded-lg max-w-[80%] message-content">
+                      ${formattedContent}
+                    </div>
+                    ${isUser
+                        ? `
+                      <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center text-blue-800 dark:text-blue-200 ml-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>
+                      </div>
+                    `
+                        : ""
+                    }
+                  </div>
+                `;
                 messageDiv.innerHTML = html;
                 chatContainer.appendChild(messageDiv);
             // Function to show loading indicator
             function showLoading() {
+                loadingIndicator.classList.remove("hidden");
                 chatContainer.scrollTop = chatContainer.scrollHeight;
             }
             // Function to hide loading indicator
             function hideLoading() {
+                loadingIndicator.classList.add("hidden");
             }
             // Handle form submission
+            chatForm.addEventListener("submit", async (e) => {
                 e.preventDefault();
                 const message = userInput.value.trim();
                 addMessage(message, true);
                 // Clear input
+                userInput.value = "";
                 // Show loading indicator
                 showLoading();
                 try {
                     // Send message to API
+                    const verifiedId = sessionStorage.getItem("verifiedId");
+                    const response = await fetch("/chat", {
+                        method: "POST",
                         headers: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${verifiedId}`,
                         },
                         body: JSON.stringify({
                             message: message,
+                            model: selectedModel,
                         }),
                     });
                     if (!response.ok) {
                         // If unauthorized, redirect to login
                         if (response.status === 401) {
+                            sessionStorage.removeItem("verifiedId");
+                            window.location.href = "/login";
                             return;
                         }
+                        throw new Error("API request failed");
                     }
                     const data = await response.json();
                     // Add AI response to chat
                     addMessage(data.response);
                 } catch (error) {
+                    console.error("Error:", error);
                     // Hide loading indicator
                     hideLoading();
                     // Add error message
+                    addMessage(
+                        "Sorry, there was an error processing your request. Please try again."
+                    );
                 }
             });
             // Handle suggestion button clicks
+            suggestionButtons.forEach((button) => {
+                button.addEventListener("click", () => {
+                    const mainText = button.querySelector(".font-medium").textContent;
+                    const subText = button.querySelector(
+                        ".text-gray-500, .text-gray-400"
+                    ).textContent;
                     const fullText = `${mainText} ${subText}`;
                     // Set the input value
                     userInput.value = fullText;
                     // Submit the form
+                    chatForm.dispatchEvent(new Event("submit"));
                 });
             });

app/static/login.html CHANGED Viewed

@@ -2,30 +2,34 @@
 <html lang="en" class="light">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login - AI Chat Assistant</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
-            darkMode: 'class',
             theme: {
                 extend: {
                     colors: {
                         primary: {
-                            DEFAULT: '#3b82f6',
-                            foreground: '#ffffff',
                         },
                         secondary: {
-                            DEFAULT: '#f3f4f6',
-                            foreground: '#1f2937',
                         },
-                    }
-                }
-            }
-        }
     </script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-['Inter'] transition-colors duration-200">
@@ -33,42 +37,45 @@
     <header class="border-b border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-800">
         <div class="max-w-screen-xl mx-auto flex items-center justify-between">
             <div class="flex items-center">
-                <h1 class="text-xl font-medium">OpenGPT with <svg
-                        style='display: inline-block; vertical-align: -16.75%; margin-right: -1.5%;'
-                        stroke_linecap='round' stroke_linejoin='round' width='32' height='32' viewBox='0 0 24 24'
-                        xmlns='http://www.w3.org/2000/svg'>
                         <defs>
-                            <linearGradient id='logo-grad-arm' x1='0%' y1='0%' x2='100%' y2='0%'>
-                                <stop offset='0%' style='stop-color:#f7cd1b; stop-opacity:1' />
-                                <stop offset='100%' style='stop-color:#f9800c; stop-opacity:1' />
                             </linearGradient>
                         </defs>
                         <g>
-                            <path fill='#067ff3'
-                                d='M.227 20.705a5.444 5.444 0 0 0 4.745-2.858l4.48-8.13L7.67 6.613.03 20.368a.227.227 0 0 0 .198.337z' />
-                            <path fill='#07b682'
-                                d='M16.003 13.074l-2.747 1.361 1.944 3.39a5.697 5.682-.012 0 0 4.935 2.869.19.19 0 0 0 .165-.286z' />
-                            <path fill='url(#logo-grad-arm)'
-                                d='M7.99 14.555L6.2 17.872a.03.03 0 0 0 .04.042l17.744-8.798a.03.03 0 0 0-.022-.055l-11.67 3.765-3.851 1.344a.819.819 0 0 0-.451.385z' />
-                            <path class='logo-arm'
-                                d='M10.011 3.3a.683.681-.012 0 0-.733.339L8.19 5.603l4.137 7.212 2.964-.956-4.825-8.234a.683.681-.012 0 0-.455-.324z' />
                         </g>
                         <style>
                             @media (prefers-color-scheme: light) {
                                 .logo-arm {
-                                    fill: black
                                 }
                             }
                             @media (prefers-color-scheme: dark) {
                                 .logo-arm {
-                                    fill: white
                                 }
                             }
                         </style>
-                    </svg><span class="font-semibold" style="color: #067ff3;">rc</span><span class="font-semibold"
-                        style="color: #f9800c;">a</span><span class="font-semibold" style="color: #07b682;">na</span>
                 </h1>
             </div>
@@ -84,8 +91,8 @@
         </div>
     </header>
-    <main class="flex-1 flex items-center justify-center p-4">
-        <div class="w-full max-w-md">
             <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-700/30 p-5 sm:p-8">
                 <div class="text-center mb-6">
                     <div
@@ -93,11 +100,12 @@
                         AR
                     </div>
                     <h2 class="text-xl sm:text-2xl font-semibold">Welcome</h2>
-                    <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base">Sign in to access the <span
-                            class="font-medium">OpenGPT with </span><span class="font-semibold"
-                            style="color: #067ff3;">Ar</span><span class="font-semibold"
-                            style="color: #f7cd1b;">ca</span><span class="font-semibold"
-                            style="color: #07b682;">na</span>
                     </p>
                 </div>
@@ -111,7 +119,7 @@
                             ID</label>
                         <input type="email" id="email" name="email_id"
                             class="w-full px-3 py-2 sm:px-4 sm:py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-                            placeholder="Enter your email" required>
                     </div>
                     <div>
@@ -119,7 +127,7 @@
                             class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Access Key</label>
                         <input type="password" id="access-key" name="access_key"
                             class="w-full px-3 py-2 sm:px-4 sm:py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-                            placeholder="Enter your access key" required>
                     </div>
                     <button type="submit" id="login-button"
@@ -129,8 +137,9 @@
                 </form>
                 <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
-                    <p class="text-gray-600 dark:text-gray-400 mb-3 text-center text-sm sm:text-base">Don't have an
-                        access key?</p>
                     <a href="https://forms.gle/Xzv6Qsh2GUbd9EZc6" id="request-access-button"
                         class="flex items-center justify-center w-full bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-900/30 dark:to-blue-900/30 text-blue-600 dark:text-blue-400 py-2.5 px-4 rounded-md hover:from-indigo-100 hover:to-blue-100 dark:hover:from-indigo-900/50 dark:hover:to-blue-900/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 border border-blue-200 dark:border-blue-800 shadow-sm text-sm sm:text-base font-medium"
                         target="_blank">
@@ -147,23 +156,28 @@
                 </div>
             </div>
         </div>
-    </main>
-    <footer class="text-center p-4 text-gray-500 dark:text-gray-400 dark:bg-gray-800 text-sm">
-        <p>© 2025 Arcana Inc. All rights reserved.</p>
-    </footer>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
             const html = document.documentElement;
             // Function to set theme based on system preference
             function setThemeBasedOnSystemPreference() {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                 if (prefersDark) {
-                    html.classList.add('dark');
                 } else {
-                    html.classList.remove('dark');
                 }
             }
@@ -171,76 +185,79 @@
             setThemeBasedOnSystemPreference();
             // Listen for system preference changes
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-                setThemeBasedOnSystemPreference();
-            });
             // Check if user is already logged in
-            const verifiedId = sessionStorage.getItem('verifiedId');
             if (verifiedId) {
-                window.location.href = '/';
                 return;
             }
-            const loginForm = document.getElementById('login-form');
-            const loginButton = document.getElementById('login-button');
-            const errorMessage = document.getElementById('error-message');
-            loginForm.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 // Get form data
-                const email = document.getElementById('email').value.trim();
-                const accessKey = document.getElementById('access-key').value.trim();
                 if (!email || !accessKey) {
-                    showError('Please enter both email and access key');
                     return;
                 }
                 // Disable button and show loading state
                 loginButton.disabled = true;
-                loginButton.innerHTML = 'Signing in...';
-                errorMessage.classList.add('hidden');
                 try {
                     // Send login request
-                    const response = await fetch('/login', {
-                        method: 'POST',
                         headers: {
-                            'Content-Type': 'application/json',
                         },
                         body: JSON.stringify({
                             email_id: email,
-                            access_key: accessKey
                         }),
                     });
                     const data = await response.json();
                     if (!response.ok) {
-                        throw new Error(data.message || 'Login failed. Please check your credentials.');
                     }
                     // Store auth token or user info
-                    sessionStorage.setItem('verifiedId', data.verified_id);
                     // Redirect to chat page
-                    window.location.href = '/';
                 } catch (error) {
-                    console.error('Login error:', error);
-                    showError(error.message || 'Login failed. Please try again.');
                     // Reset button state
                     loginButton.disabled = false;
-                    loginButton.innerHTML = 'Sign In';
                 }
             });
             function showError(message) {
                 errorMessage.textContent = message;
-                errorMessage.classList.remove('hidden');
             }
         });
     </script>

 <html lang="en" class="light">
 <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="arcana-project-verification" content="43544d63-608c-4934-91e7-8543c6f5d1e6" />
     <title>Login - AI Chat Assistant</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
+            darkMode: "class",
             theme: {
                 extend: {
                     colors: {
                         primary: {
+                            DEFAULT: "#3b82f6",
+                            foreground: "#ffffff",
                         },
                         secondary: {
+                            DEFAULT: "#f3f4f6",
+                            foreground: "#1f2937",
                         },
+                    },
+                },
+            },
+        };
     </script>
+    <script data-arcana-publisher-key="arc-pub-f8066482a332b510a0dd998dc1c614d419582f2e7326f69236602562c9d419cf"
+        src="https://js.arcana.ad/arcana.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet" />
 </head>
 <body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-['Inter'] transition-colors duration-200">
     <header class="border-b border-gray-200 dark:border-gray-700 p-4 bg-white dark:bg-gray-800">
         <div class="max-w-screen-xl mx-auto flex items-center justify-between">
             <div class="flex items-center">
+                <h1 class="text-xl font-medium">
+                    OpenGPT with
+                    <svg style="
+                display: inline-block;
+                vertical-align: -16.75%;
+                margin-right: -1.5%;
+              " stroke_linecap="round" stroke_linejoin="round" width="32" height="32" viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg">
                         <defs>
+                            <linearGradient id="logo-grad-arm" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <stop offset="0%" style="stop-color: #f7cd1b; stop-opacity: 1" />
+                                <stop offset="100%" style="stop-color: #f9800c; stop-opacity: 1" />
                             </linearGradient>
                         </defs>
                         <g>
+                            <path fill="#067ff3"
+                                d="M.227 20.705a5.444 5.444 0 0 0 4.745-2.858l4.48-8.13L7.67 6.613.03 20.368a.227.227 0 0 0 .198.337z" />
+                            <path fill="#07b682"
+                                d="M16.003 13.074l-2.747 1.361 1.944 3.39a5.697 5.682-.012 0 0 4.935 2.869.19.19 0 0 0 .165-.286z" />
+                            <path fill="url(#logo-grad-arm)"
+                                d="M7.99 14.555L6.2 17.872a.03.03 0 0 0 .04.042l17.744-8.798a.03.03 0 0 0-.022-.055l-11.67 3.765-3.851 1.344a.819.819 0 0 0-.451.385z" />
+                            <path class="logo-arm"
+                                d="M10.011 3.3a.683.681-.012 0 0-.733.339L8.19 5.603l4.137 7.212 2.964-.956-4.825-8.234a.683.681-.012 0 0-.455-.324z" />
                         </g>
                         <style>
                             @media (prefers-color-scheme: light) {
                                 .logo-arm {
+                                    fill: black;
                                 }
                             }
                             @media (prefers-color-scheme: dark) {
                                 .logo-arm {
+                                    fill: white;
                                 }
                             }
                         </style>
+                    </svg><span class="font-semibold" style="color: #067ff3">rc</span><span class="font-semibold"
+                        style="color: #f9800c">a</span><span class="font-semibold" style="color: #07b682">na</span>
                 </h1>
             </div>
         </div>
     </header>
+    <main class="flex flex-col items-center justify-center h-screen">
+        <div class="w-full max-w-md p-4">
             <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-700/30 p-5 sm:p-8">
                 <div class="text-center mb-6">
                     <div
                         AR
                     </div>
                     <h2 class="text-xl sm:text-2xl font-semibold">Welcome</h2>
+                    <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base">
+                        Sign in to access the
+                        <span class="font-semibold" style="color: #067ff3">Ar</span><span class="font-semibold"
+                            style="color: #f9800c">ca</span><span class="font-semibold" style="color: #07b682">na</span>
+                        in
+                        Action
                     </p>
                 </div>
                             ID</label>
                         <input type="email" id="email" name="email_id"
                             class="w-full px-3 py-2 sm:px-4 sm:py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                            placeholder="Enter your email" required />
                     </div>
                     <div>
                             class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Access Key</label>
                         <input type="password" id="access-key" name="access_key"
                             class="w-full px-3 py-2 sm:px-4 sm:py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                            placeholder="Enter your access key" required />
                     </div>
                     <button type="submit" id="login-button"
                 </form>
                 <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+                    <p class="text-gray-600 dark:text-gray-400 mb-3 text-center text-sm sm:text-base">
+                        Don't have an access key?
+                    </p>
                     <a href="https://forms.gle/Xzv6Qsh2GUbd9EZc6" id="request-access-button"
                         class="flex items-center justify-center w-full bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-900/30 dark:to-blue-900/30 text-blue-600 dark:text-blue-400 py-2.5 px-4 rounded-md hover:from-indigo-100 hover:to-blue-100 dark:hover:from-indigo-900/50 dark:hover:to-blue-900/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-200 border border-blue-200 dark:border-blue-800 shadow-sm text-sm sm:text-base font-medium"
                         target="_blank">
                 </div>
             </div>
         </div>
+        <footer class="text-center p-4 text-gray-500 dark:text-gray-400 dark:bg-gray-800 text-sm">
+            <p class="text-gray-400 dark:text-gray-500 p-1">
+                LLMs can make mistakes. Verify important information.
+            </p>
+            <p class="p-1">© 2025 Arcana Inc. All rights reserved.</p>
+        </footer>
+    </main>
     <script>
+        document.addEventListener("DOMContentLoaded", () => {
             const html = document.documentElement;
             // Function to set theme based on system preference
             function setThemeBasedOnSystemPreference() {
+                const prefersDark = window.matchMedia(
+                    "(prefers-color-scheme: dark)"
+                ).matches;
                 if (prefersDark) {
+                    html.classList.add("dark");
                 } else {
+                    html.classList.remove("dark");
                 }
             }
             setThemeBasedOnSystemPreference();
             // Listen for system preference changes
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .addEventListener("change", () => {
+                    setThemeBasedOnSystemPreference();
+                });
             // Check if user is already logged in
+            const verifiedId = sessionStorage.getItem("verifiedId");
             if (verifiedId) {
+                window.location.href = "/";
                 return;
             }
+            const loginForm = document.getElementById("login-form");
+            const loginButton = document.getElementById("login-button");
+            const errorMessage = document.getElementById("error-message");
+            loginForm.addEventListener("submit", async (e) => {
                 e.preventDefault();
                 // Get form data
+                const email = document.getElementById("email").value.trim();
+                const accessKey = document.getElementById("access-key").value.trim();
                 if (!email || !accessKey) {
+                    showError("Please enter both email and access key");
                     return;
                 }
                 // Disable button and show loading state
                 loginButton.disabled = true;
+                loginButton.innerHTML = "Signing in...";
+                errorMessage.classList.add("hidden");
                 try {
                     // Send login request
+                    const response = await fetch("/login", {
+                        method: "POST",
                         headers: {
+                            "Content-Type": "application/json",
                         },
                         body: JSON.stringify({
                             email_id: email,
+                            access_key: accessKey,
                         }),
                     });
                     const data = await response.json();
                     if (!response.ok) {
+                        throw new Error(
+                            data.message || "Login failed. Please check your credentials."
+                        );
                     }
                     // Store auth token or user info
+                    sessionStorage.setItem("verifiedId", data.verified_id);
                     // Redirect to chat page
+                    window.location.href = "/";
                 } catch (error) {
+                    console.error("Login error:", error);
+                    showError(error.message || "Login failed. Please try again.");
                     // Reset button state
                     loginButton.disabled = false;
+                    loginButton.innerHTML = "Sign In";
                 }
             });
             function showError(message) {
                 errorMessage.textContent = message;
+                errorMessage.classList.remove("hidden");
             }
         });
     </script>

uv.lock CHANGED Viewed

@@ -71,7 +71,7 @@ requires-dist = [
     { name = "arcana-codex", specifier = ">=0.2" },
     { name = "email-validator", specifier = ">=2.2" },
     { name = "fastapi-slim", specifier = ">=0.115" },
-    { name = "groq", specifier = ">=0.20.0" },
     { name = "huggingface-hub", specifier = ">=0.29" },
     { name = "llama-cpp-python", specifier = ">=0.3" },
     { name = "pillow", specifier = ">=11.1" },

     { name = "arcana-codex", specifier = ">=0.2" },
     { name = "email-validator", specifier = ">=2.2" },
     { name = "fastapi-slim", specifier = ">=0.115" },
+    { name = "groq", specifier = ">=0.20" },
     { name = "huggingface-hub", specifier = ">=0.29" },
     { name = "llama-cpp-python", specifier = ">=0.3" },
     { name = "pillow", specifier = ">=11.1" },