Spaces:

Hadiil
/

google-fastapi

Runtime error

App Files Files Community

Hadiil commited on Mar 25, 2025

Commit

78cf9bd

verified ·

1 Parent(s): 0af552a

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +166 -136

static/index.html CHANGED Viewed

@@ -1,14 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
-    <title>Vion AI Chatbot</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
         * {
             margin: 0;
@@ -79,22 +78,23 @@
             to { background-position: 10000px 10000px; }
         }
-        .chat-container {
             flex: 1;
             display: flex;
             flex-direction: column;
-            justify-content: space-between;
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 2rem;
         }
-        .chat-header {
             text-align: center;
-            margin-bottom: 2rem;
         }
-        .chat-header h1 {
             color: var(--text-color);
             font-size: 3.5rem;
             font-weight: 800;
@@ -102,7 +102,7 @@
             text-shadow: 0 0 10px rgba(0, 163, 255, 0.5);
         }
-        .chat-header h2 {
             color: var(--text-secondary-color);
             font-size: 1.5rem;
             font-weight: 400;
@@ -111,197 +111,227 @@
             text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
         }
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            margin-bottom: 1rem;
         }
-        .message {
-            display: flex;
-            margin-bottom: 1rem;
         }
-        .message.user {
-            justify-content: flex-end;
         }
-        .message.bot {
-            justify-content: flex-start;
         }
-        .message-content {
-            max-width: 70%;
-            padding: 0.75rem 1rem;
-            border-radius: 1rem;
-            background: var(--secondary-color);
-            color: var(--text-color);
         }
-        .message.user .message-content {
-            background: var(--accent-color);
-            color: var(--text-color);
         }
-        .chat-input {
             display: flex;
             align-items: center;
             background: var(--secondary-color);
             border: 1px solid var(--focus-color);
             border-radius: 0.5rem;
             padding: 0.2rem;
         }
-        .chat-input input {
             flex-grow: 1;
             border: none;
-            background: transparent;
             color: var(--text-color);
-            padding: 0.5rem;
             outline: none;
         }
-        .chat-input input::placeholder {
             color: var(--placeholder-color);
         }
-        .chat-input button {
-            background: none;
-            border: none;
-            color: var(--text-secondary-color);
-            font-size: 1.1rem;
-            cursor: pointer;
-            padding: 0.5rem;
-            transition: color 0.3s ease;
-        }
-        .chat-input button:hover {
-            color: var(--accent-color);
-        }
-        .file-upload {
             display: flex;
             align-items: center;
-            gap: 0.5rem;
         }
-        .file-upload label {
-            cursor: pointer;
             color: var(--text-secondary-color);
             transition: color 0.3s ease;
         }
-        .file-upload label:hover {
             color: var(--accent-color);
         }
-        .file-upload input[type="file"] {
-            display: none;
         }
     </style>
 </head>
 <body>
     <div class="stars"></div>
-    <div class="chat-container">
-        <div class="chat-header">
-            <h1>Vion AI</h1>
-            <h2>Ask me anything and I'll provide helpful and truthful answers from an outside perspective on humanity.</h2>
-        </div>
-        <div class="chat-messages" id="chatMessages">
-            <!-- Chat messages will appear here -->
-        </div>
-        <div class="chat-input">
-            <div class="file-upload">
-                <label for="fileInput" title="Upload File"><i class='bx bx-upload'></i></label>
-                <input type="file" id="fileInput" accept=".pdf,.docx,.txt,image/*,.xlsx,.xls">
             </div>
-            <input type="text" id="chatInput" placeholder="Ask me anything...">
-            <button type="button" id="sendButton"><i class='bx bx-send'></i></button>
         </div>
     </div>
     <script>
-        const chatMessages = document.getElementById('chatMessages');
-        const chatInput = document.getElementById('chatInput');
-        const sendButton = document.getElementById('sendButton');
-        const fileInput = document.getElementById('fileInput');
-        // Function to add a message to the chat
-        function addMessage(sender, text) {
-            const messageDiv = document.createElement('div');
-            messageDiv.classList.add('message', sender);
-            const messageContent = document.createElement('div');
-            messageContent.classList.add('message-content');
-            messageContent.innerText = text;
-            messageDiv.appendChild(messageContent);
-            chatMessages.appendChild(messageDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight; // Auto-scroll to the bottom
-        }
-        // Function to handle user input
-        async function handleUserInput() {
-            const userInput = chatInput.value.trim();
-            const file = fileInput.files[0];
-            if (!userInput && !file) {
-                alert("Please enter a prompt or upload a file.");
-                return;
             }
-            // Add user message to the chat
-            if (userInput) addMessage('user', userInput);
-            if (file) addMessage('user', `Uploaded file: ${file.name}`);
-            // Clear the input fields
-            chatInput.value = '';
-            fileInput.value = '';
-            // Prepare the payload
             const formData = new FormData();
-            if (file) formData.append('file', file);
-            if (userInput) formData.append('text', userInput);
-            // Determine the endpoint based on the input
-            let endpoint = '/summarize'; // Default to summarization
-            if (file && file.type.startsWith('image/')) {
-                endpoint = userInput ? '/vqa' : '/caption';
-            } else if (file && file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
-                endpoint = '/visualize';
-                formData.append('request', userInput || "Generate a bar chart");
-            } else if (userInput && userInput.startsWith("/translate")) {
-                endpoint = '/translate';
-                formData.append('target_language', 'fr'); // Default to French
-            } else if (userInput && userInput.startsWith("/qa")) {
-                endpoint = '/answer';
-                formData.append('question', userInput.replace("/qa", "").trim());
-            }
-            // Send the input to the backend
             try {
-                const response = await fetch(endpoint, {
                     method: 'POST',
-                    body: formData,
                 });
                 const data = await response.json();
-                addMessage('bot', JSON.stringify(data));
             } catch (error) {
                 console.error('Error:', error);
-                addMessage('bot', 'Failed to get a response. Please try again.');
             }
-        }
-        // Event listeners
-        sendButton.addEventListener('click', handleUserInput);
-        chatInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') handleUserInput();
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+    <title>Vion AI</title>
     <style>
+         @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
         * {
             margin: 0;
             to { background-position: 10000px 10000px; }
         }
+        .main-content {
             flex: 1;
             display: flex;
             flex-direction: column;
+            justify-content: center;
+            padding-bottom: 80px;
+            padding-top: 2rem;
         }
+        .header {
+            max-width: 900px;
             text-align: center;
+            padding: 0 2rem;
+            margin: 0 auto;
         }
+        .header__title h1 {
             color: var(--text-color);
             font-size: 3.5rem;
             font-weight: 800;
             text-shadow: 0 0 10px rgba(0, 163, 255, 0.5);
         }
+        .header__title h2 {
             color: var(--text-secondary-color);
             font-size: 1.5rem;
             font-weight: 400;
             text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
         }
+        .suggests {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            margin: 2rem auto;
+            max-width: 900px;
+            gap: 1rem;
+            padding: 0 2rem;
         }
+        .suggests__item {
+            background: rgba(26, 27, 30, 0.9);
+            color: var(--text-secondary-color);
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 1px solid var(--focus-color);
         }
+        .light_mode .suggests__item {
+            background: rgba(245, 246, 245, 0.9);
         }
+        .suggests__item:hover {
+            background: var(--secondary-hover-color);
+            border-color: var(--accent-color);
+            color: var(--text-color);
         }
+        .suggests__item-icon {
+            margin-top: 1rem;
+            color: var(--accent-color);
         }
+        .prompt {
+            position: fixed;
+            background: rgba(10, 10, 11, 0.9);
+            z-index: 1000;
+            width: 100%;
+            left: 0;
+            bottom: 0;
+            padding: 1rem;
+            border-top: 1px solid var(--secondary-color);
         }
+        .light_mode .prompt {
+            background: rgba(245, 246, 245, 0.9);
+            border-top: 1px solid var(--focus-color);
+        }
+        .prompt__input-wrapper {
+            max-width: 900px;
+            margin: 0 auto;
+            position: relative;
             display: flex;
             align-items: center;
             background: var(--secondary-color);
             border: 1px solid var(--focus-color);
             border-radius: 0.5rem;
             padding: 0.2rem;
+            transition: all 0.3s ease;
         }
+        .prompt__input-wrapper:focus-within {
+            border-color: var(--accent-color);
+            background: var(--focus-color);
+        }
+        .prompt__form-input {
             flex-grow: 1;
             border: none;
+            resize: none;
+            font-size: 1.1rem;
             color: var(--text-color);
+            padding: 0.3rem 0.5rem;
+            background: transparent;
             outline: none;
         }
+        .prompt__form-input::placeholder {
             color: var(--placeholder-color);
         }
+        .prompt__action-buttons {
             display: flex;
             align-items: center;
+            gap: 0.3rem;
+            padding-right: 0.3rem;
         }
+        .prompt__form-button {
+            background: none;
+            border: none;
             color: var(--text-secondary-color);
+            font-size: 1.1rem;
+            cursor: pointer;
+            padding: 0.2rem;
             transition: color 0.3s ease;
         }
+        .prompt__form-button:hover {
             color: var(--accent-color);
         }
+        .prompt__disclaim {
+            text-align: center;
+            color: var(--placeholder-color);
+            font-size: 0.8rem;
+            margin-top: 1rem;
+            max-width: 900px;
+            margin-left: auto;
+            margin-right: auto;
+            text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
         }
     </style>
 </head>
 <body>
     <div class="stars"></div>
+    <div class="main-content">
+        <header class="header">
+            <div class="header__title">
+                <h1>Vion AI</h1>
+                <h2>Ask me anything and I'll provide helpful and truthful answers from an outside perspective on humanity.</h2>
+            </div>
+        </header>
+        <div class="suggests">
+            <div class="suggests__item" onclick="sendPrompt('What is the meaning of life?', 'summarize')">
+                <p class="suggests__item-text">What is the meaning of life?</p>
+                <div class="suggests__item-icon"><i class='bx bx-bulb'></i></div>
+            </div>
+            <div class="suggests__item" onclick="sendPrompt('Explain quantum physics simply', 'summarize')">
+                <p class="suggests__item-text">Explain quantum physics simply</p>
+                <div class="suggests__item-icon"><i class='bx bx-atom'></i></div>
+            </div>
+            <div class="suggests__item" onclick="sendPrompt('How does the universe work?', 'summarize')">
+                <p class="suggests__item-text">How does the universe work?</p>
+                <div class="suggests__item-icon"><i class='bx bx-planet'></i></div>
             </div>
         </div>
     </div>
+    <section class="prompt">
+        <form id="promptForm" class="prompt__form" novalidate>
+            <div class="prompt__input-wrapper">
+                <input type="text" id="promptInput" placeholder="Ask me anything..." class="prompt__form-input" required>
+                <div class="prompt__action-buttons">
+                    <label for="fileInput" class="prompt__form-button"><i class='bx bx-upload'></i></label>
+                    <input type="file" id="fileInput" style="display: none;" accept=".pdf,.docx,.txt">
+                    <button type="button" class="prompt__form-button" id="deepSearchButton"><i class='bx bx-search'></i></button>
+                    <button type="button" class="prompt__form-button" id="thinkButton"><i class='bx bx-brain'></i></button>
+                    <button type="submit" class="prompt__form-button" id="sendButton"><i class='bx bx-send'></i></button>
+                    <button type="button" class="prompt__form-button" id="themeToggler"><i class='bx bx-sun'></i></button>
+                </div>
+            </div>
+        </form>
+        <p class="prompt__disclaim">Vion AI provides answers based on its training and design. Vion can make mistakes.</p>
+    </section>
     <script>
+        // Theme toggle
+        const themeToggler = document.getElementById('themeToggler');
+        themeToggler.addEventListener('click', () => {
+            document.body.classList.toggle('light_mode');
+            themeToggler.innerHTML = document.body.classList.contains('light_mode') ? "<i class='bx bx-moon'></i>" : "<i class='bx bx-sun'></i>";
+        });
+        // Send prompt to backend
+        const promptForm = document.getElementById('promptForm');
+        const promptInput = document.getElementById('promptInput');
+        promptForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const prompt = promptInput.value.trim();
+            if (!prompt) return;
+            try {
+                const response = await fetch('/summarize', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ text: prompt })
+                });
+                if (!response.ok) throw new Error('Failed to fetch response');
+                const data = await response.json();
+                alert(`Response: ${data.summary}`);
+            } catch (error) {
+                console.error('Error:', error);
+                alert('Failed to get a response. Please try again.');
             }
+        });
+        // Send predefined prompt
+        function sendPrompt(prompt, endpoint) {
+            promptInput.value = prompt;
+            promptForm.dispatchEvent(new Event('submit'));
+        }
+        // File upload
+        document.getElementById('fileInput').addEventListener('change', async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
             const formData = new FormData();
+            formData.append('file', file);
             try {
+                const response = await fetch('/summarize', {
                     method: 'POST',
+                    body: formData
                 });
+                if (!response.ok) throw new Error('Failed to upload file');
                 const data = await response.json();
+                alert(`Summary: ${data.summary}`);
             } catch (error) {
                 console.error('Error:', error);
+                alert('Failed to process file. Please try again.');
             }
         });
     </script>
 </body>
+</html>