Spaces:

Hadiil
/

google-fastapi

Runtime error

App Files Files Community

Hadiil commited on Mar 23, 2025

Commit

ee44384

verified ·

1 Parent(s): f992b06

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +272 -266

static/index.html CHANGED Viewed

@@ -7,317 +7,323 @@
     <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;
-            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; }
         }
-        .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;
-            margin-bottom: 1rem;
-            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;
-            max-width: 600px;
-            margin: 0 auto;
-            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');
-        const fileInput = document.getElementById('fileInput');
-        promptForm.addEventListener('submit', async (e) => {
             e.preventDefault();
-            const prompt = promptInput.value.trim();
-            const file = fileInput.files[0];
-            if (!prompt && !file) {
-                alert("Please enter a prompt or upload a file.");
                 return;
             }
             try {
-                const formData = new FormData();
-                if (file) formData.append('file', file);
-                if (prompt) formData.append('text', prompt);
-                console.log("Sending request with:", { prompt, file });  // Debugging
-                const response = await fetch('/summarize', {
                     method: 'POST',
                     body: formData
                 });
-                if (!response.ok) {
-                    console.error("Response error:", response.status, response.statusText);  // Debugging
-                    throw new Error('Failed to fetch response');
-                }
                 const data = await response.json();
-                console.log("Response data:", data);  // Debugging
-                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'));
-        }
     </script>
 </body>
 </html>

     <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>