Spaces:

Hadiil
/

google-fastapi

Runtime error

App Files Files Community

Hadiil commited on Mar 23, 2025

Commit

72bab89

verified ·

1 Parent(s): ee44384

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +221 -275

static/index.html CHANGED Viewed

@@ -1,329 +1,275 @@
 <!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>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-        }
-        .section {
-            margin-bottom: 30px;
         }
-        .section h2 {
-            margin-bottom: 10px;
         }
-        .form-group {
-            margin-bottom: 15px;
         }
-        .form-group label {
-            display: block;
-            margin-bottom: 5px;
         }
-        .form-group input, .form-group textarea, .form-group select {
             width: 100%;
-            padding: 8px;
-            box-sizing: border-box;
-        }
-        .result {
-            margin-top: 10px;
-            padding: 10px;
-            background-color: #f4f4f4;
-            border-radius: 5px;
         }
-        .result pre {
-            white-space: pre-wrap;
-            word-wrap: break-word;
         }
-    </style>
-</head>
-<body>
-    <h1>Vion AI - All Functionalities</h1>
-    <!-- Summarization Section -->
-    <div class="section">
-        <h2>Summarization</h2>
-        <form id="summarizeForm">
-            <div class="form-group">
-                <label for="summarizeText">Enter Text:</label>
-                <textarea id="summarizeText" rows="5" placeholder="Paste your text here..."></textarea>
-            </div>
-            <div class="form-group">
-                <label for="summarizeFile">Or Upload a File (PDF, DOCX, TXT):</label>
-                <input type="file" id="summarizeFile" accept=".pdf,.docx,.txt">
-            </div>
-            <button type="submit">Summarize</button>
-        </form>
-        <div class="result" id="summarizeResult"></div>
-    </div>
-    <!-- Image Captioning Section -->
-    <div class="section">
-        <h2>Image Captioning</h2>
-        <form id="captionForm">
-            <div class="form-group">
-                <label for="imageInput">Upload an Image (JPEG, PNG):</label>
-                <input type="file" id="imageInput" accept="image/jpeg, image/png" required>
-            </div>
-            <button type="submit">Generate Caption</button>
-        </form>
-        <div class="result" id="captionResult"></div>
-    </div>
-    <!-- Question Answering Section -->
-    <div class="section">
-        <h2>Question Answering</h2>
-        <form id="qaForm">
-            <div class="form-group">
-                <label for="qaText">Enter Context:</label>
-                <textarea id="qaText" rows="5" placeholder="Paste your text here..."></textarea>
-            </div>
-            <div class="form-group">
-                <label for="qaFile">Or Upload a File (PDF, DOCX, TXT):</label>
-                <input type="file" id="qaFile" accept=".pdf,.docx,.txt">
-            </div>
-            <div class="form-group">
-                <label for="qaQuestion">Enter Question:</label>
-                <input type="text" id="qaQuestion" placeholder="Enter your question..." required>
-            </div>
-            <button type="submit">Get Answer</button>
-        </form>
-        <div class="result" id="qaResult"></div>
-    </div>
-    <!-- Visual Question Answering Section -->
-    <div class="section">
-        <h2>Visual Question Answering</h2>
-        <form id="vqaForm">
-            <div class="form-group">
-                <label for="vqaImage">Upload an Image (JPEG, PNG):</label>
-                <input type="file" id="vqaImage" accept="image/jpeg, image/png" required>
-            </div>
-            <div class="form-group">
-                <label for="vqaQuestion">Enter Question:</label>
-                <input type="text" id="vqaQuestion" placeholder="Enter your question..." required>
-            </div>
-            <button type="submit">Get Answer</button>
-        </form>
-        <div class="result" id="vqaResult"></div>
-    </div>
-    <!-- Data Visualization Code Generation Section -->
-    <div class="section">
-        <h2>Data Visualization Code Generation</h2>
-        <form id="visualizeForm">
-            <div class="form-group">
-                <label for="visualizeFile">Upload an Excel File:</label>
-                <input type="file" id="visualizeFile" accept=".xlsx,.xls" required>
-            </div>
-            <div class="form-group">
-                <label for="visualizeRequest">Enter Visualization Request:</label>
-                <input type="text" id="visualizeRequest" placeholder="e.g., bar chart, line chart" required>
-            </div>
-            <button type="submit">Generate Code</button>
-        </form>
-        <div class="result" id="visualizeResult"></div>
-    </div>
-    <!-- Document Translation Section -->
-    <div class="section">
-        <h2>Document Translation</h2>
-        <form id="translateForm">
-            <div class="form-group">
-                <label for="translateText">Enter Text:</label>
-                <textarea id="translateText" rows="5" placeholder="Paste your text here..."></textarea>
-            </div>
-            <div class="form-group">
-                <label for="translateFile">Or Upload a File (PDF, DOCX, TXT):</label>
-                <input type="file" id="translateFile" accept=".pdf,.docx,.txt">
-            </div>
-            <div class="form-group">
-                <label for="translateLanguage">Select Target Language:</label>
-                <select id="translateLanguage">
-                    <option value="fr">French</option>
-                    <option value="es">Spanish</option>
-                    <option value="de">German</option>
-                </select>
-            </div>
-            <button type="submit">Translate</button>
-        </form>
-        <div class="result" id="translateResult"></div>
-    </div>
-    <script>
-        // Summarization
-        document.getElementById('summarizeForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const text = document.getElementById('summarizeText').value.trim();
-            const file = document.getElementById('summarizeFile').files[0];
-            if (!text && !file) {
-                alert("Please enter text or upload a file.");
-                return;
-            }
-            const formData = new FormData();
-            if (file) formData.append('file', file);
-            if (text) formData.append('text', text);
-            try {
-                const response = await fetch('/summarize', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                document.getElementById('summarizeResult').innerText = `Summary: ${data.summary}`;
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('summarizeResult').innerText = 'Failed to summarize. Please try again.';
-            }
-        });
-        // Image Captioning
-        document.getElementById('captionForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const file = document.getElementById('imageInput').files[0];
-            if (!file) {
-                alert("Please select an image file.");
-                return;
-            }
-            const formData = new FormData();
-            formData.append('file', file);
-            try {
-                const response = await fetch('/caption', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                document.getElementById('captionResult').innerText = `Caption: ${data.caption}`;
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('captionResult').innerText = 'Failed to generate caption. Please try again.';
-            }
-        });
-        // Question Answering
-        document.getElementById('qaForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const text = document.getElementById('qaText').value.trim();
-            const file = document.getElementById('qaFile').files[0];
-            const question = document.getElementById('qaQuestion').value.trim();
-            if (!text && !file) {
-                alert("Please enter text or upload a file.");
-                return;
-            }
-            const formData = new FormData();
-            if (file) formData.append('file', file);
-            if (text) formData.append('text', text);
-            formData.append('question', question);
-            try {
-                const response = await fetch('/answer', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                document.getElementById('qaResult').innerText = `Answer: ${data.answer}`;
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('qaResult').innerText = 'Failed to get an answer. Please try again.';
-            }
-        });
-        // Visual Question Answering
-        document.getElementById('vqaForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const file = document.getElementById('vqaImage').files[0];
-            const question = document.getElementById('vqaQuestion').value.trim();
-            if (!file) {
-                alert("Please select an image file.");
-                return;
-            }
-            const formData = new FormData();
-            formData.append('file', file);
-            formData.append('question', question);
-            try {
-                const response = await fetch('/vqa', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                document.getElementById('vqaResult').innerText = `Answer: ${data.answer}`;
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('vqaResult').innerText = 'Failed to get an answer. Please try again.';
-            }
-        });
-        // Data Visualization Code Generation
-        document.getElementById('visualizeForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const file = document.getElementById('visualizeFile').files[0];
-            const request = document.getElementById('visualizeRequest').value.trim();
-            if (!file) {
-                alert("Please upload an Excel file.");
-                return;
-            }
-            const formData = new FormData();
-            formData.append('file', file);
-            formData.append('request', request);
-            try {
-                const response = await fetch('/visualize', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                document.getElementById('visualizeResult').innerHTML = `<pre>${data.code}</pre>`;
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('visualizeResult').innerText = 'Failed to generate code. Please try again.';
-            }
-        });
-        // Document Translation
-        document.getElementById('translateForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const text = document.getElementById('translateText').value.trim();
-            const file = document.getElementById('translateFile').files[0];
-            const language = document.getElementById('translateLanguage').value;
-            if (!text && !file) {
-                alert("Please enter text or upload a file.");
-                return;
             }
-            const formData = new FormData();
-            if (file) formData.append('file', file);
-            if (text) formData.append('text', text);
-            formData.append('target_language', language);
             try {
-                const response = await fetch('/translate', {
                     method: 'POST',
-                    body: formData
                 });
                 const data = await response.json();
-                document.getElementById('translateResult').innerText = `Translated Text: ${data.translated_text}`;
             } catch (error) {
                 console.error('Error:', error);
-                document.getElementById('translateResult').innerText = 'Failed to translate. Please try again.';
             }
         });
     </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 Chatbot</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            outline: none;
+            box-sizing: border-box;
+            font-family: "Open Sans", sans-serif;
         }
+        :root {
+            --primary-color: #0A0A0B;
+            --secondary-color: #1A1B1E;
+            --secondary-hover-color: #2A2B2E;
+            --focus-color: #242528;
+            --focus-hover-color: #343538;
+            --button-hover-color: #252627;
+            --text-color: #FFFFFF;
+            --text-secondary-color: #A0A1A3;
+            --heading-secondary-color: #606162;
+            --placeholder-color: #78797A;
+            --accent-color: #00A3FF;
+            --star-color: #FFFFFF;
+            --background-color: #000;
         }
+        .light_mode {
+            --primary-color: #FFFFFF;
+            --secondary-color: #F5F6F5;
+            --secondary-hover-color: #E5E6E5;
+            --focus-color: #ECEDEC;
+            --focus-hover-color: #E0E1E0;
+            --button-hover-color: #ECEDED;
+            --text-color: #0A0A0B;
+            --text-secondary-color: #4A4B4C;
+            --heading-secondary-color: #BABBBB;
+            --placeholder-color: #868788;
+            --accent-color: #007ACC;
+            --star-color: #666;
+            --background-color: #E0E7FF;
         }
+        body {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            background: var(--background-color);
+            position: relative;
+            overflow-y: auto;
         }
+        .stars {
+            position: fixed;
             width: 100%;
+            height: 100%;
+            background: url('https://www.transparenttextures.com/patterns/stardust.png');
+            animation: starsAnim 100s linear infinite;
+            z-index: -1;
         }
+        .light_mode .stars {
+            background: url('https://www.transparenttextures.com/patterns/stardust.png') rgba(224, 231, 255, 0.8);
+            opacity: 0.3;
         }
+        @keyframes starsAnim {
+            from { background-position: 0 0; }
+            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;
+            margin-bottom: 1rem;
+            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;
+            max-width: 600px;
+            margin: 0 auto;
+            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);
+        }
+    </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">
+            <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');
+        // 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();
+            if (!userInput) return;
+            // Add user message to the chat
+            addMessage('user', userInput);
+            chatInput.value = ''; // Clear the input field
+            // Determine the functionality based on the input
+            let endpoint = '/summarize'; // Default to summarization
+            let payload = { text: userInput };
+            if (userInput.startsWith("/caption")) {
+                endpoint = '/caption';
+                payload = { file: "image.jpg" }; // Placeholder for image upload
+            } else if (userInput.startsWith("/qa")) {
+                endpoint = '/answer';
+                payload = { text: userInput.replace("/qa", "").trim(), question: "What is this about?" };
+            } else if (userInput.startsWith("/vqa")) {
+                endpoint = '/vqa';
+                payload = { file: "image.jpg", question: userInput.replace("/vqa", "").trim() };
+            } else if (userInput.startsWith("/visualize")) {
+                endpoint = '/visualize';
+                payload = { file: "data.xlsx", request: userInput.replace("/visualize", "").trim() };
+            } else if (userInput.startsWith("/translate")) {
+                endpoint = '/translate';
+                payload = { text: userInput.replace("/translate", "").trim(), target_language: "fr" };
             }
+            // Send the input to the backend
             try {
+                const response = await fetch(endpoint, {
                     method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload),
                 });
                 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>