Spaces:

Hadiil
/

google-fastapi

Runtime error

App Files Files Community

Hadiil commited on Mar 25, 2025

Commit

c66450a

verified ·

1 Parent(s): 78cf9bd

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +107 -301

static/index.html CHANGED Viewed

@@ -3,335 +3,141 @@
 <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;
-            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');
-        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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Web Application</title>
     <style>
         body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            padding: 0;
+            background-color: #f4f4f9;
+            color: #333;
         }
+        h1 {
             text-align: center;
+            color: #444;
         }
+        h2 {
+            color: #555;
+            border-bottom: 2px solid #ddd;
+            padding-bottom: 5px;
         }
+        form {
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
         }
+        input[type="file"], textarea, input[type="text"] {
             width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 16px;
+        }
+        button {
+            background-color: #007bff;
+            color: white;
             border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
             cursor: pointer;
+            font-size: 16px;
         }
+        button:hover {
+            background-color: #0056b3;
         }
+        .result {
+            background: #e9ecef;
+            padding: 15px;
+            border-radius: 4px;
+            margin-top: 10px;
+            font-family: monospace;
         }
     </style>
 </head>
 <body>
+    <h1>AI Web Application</h1>
+    <!-- Summarization -->
+    <h2>Summarization</h2>
+    <form id="summarizeForm">
+        <input type="file" name="file" accept=".pdf,.docx">
+        <textarea name="text" placeholder="Or enter text manually"></textarea>
+        <button type="button" onclick="submitForm('/summarize', 'summarizeForm', 'summarizeResult')">Summarize</button>
+    </form>
+    <div id="summarizeResult" class="result"></div>
+    <!-- Image Captioning -->
+    <h2>Image Captioning</h2>
+    <form id="captionForm">
+        <input type="file" name="file" accept="image/*">
+        <button type="button" onclick="submitForm('/caption', 'captionForm', 'captionResult')">Generate Caption</button>
+    </form>
+    <div id="captionResult" class="result"></div>
+    <!-- Question Answering -->
+    <h2>Question Answering</h2>
+    <form id="answerForm">
+        <input type="file" name="file" accept=".pdf,.docx">
+        <textarea name="text" placeholder="Or enter text manually"></textarea>
+        <input type="text" name="question" placeholder="Enter your question">
+        <button type="button" onclick="submitForm('/answer', 'answerForm', 'answerResult')">Answer</button>
+    </form>
+    <div id="answerResult" class="result"></div>
+    <!-- Visual Question Answering -->
+    <h2>Visual Question Answering</h2>
+    <form id="vqaForm">
+        <input type="file" name="file" accept="image/*">
+        <input type="text" name="question" placeholder="Enter your question">
+        <button type="button" onclick="submitForm('/vqa', 'vqaForm', 'vqaResult')">Answer</button>
+    </form>
+    <div id="vqaResult" class="result"></div>
+    <!-- Data Visualization -->
+    <h2>Data Visualization</h2>
+    <form id="visualizeForm">
+        <input type="file" name="file" accept=".xlsx,.xls">
+        <input type="text" name="request" placeholder="Enter visualization request (e.g., bar, line)">
+        <button type="button" onclick="submitForm('/visualize', 'visualizeForm', 'visualizeResult')">Generate Code</button>
+    </form>
+    <div id="visualizeResult" class="result"></div>
+    <!-- Document Translation -->
+    <h2>Document Translation</h2>
+    <form id="translateForm">
+        <input type="file" name="file" accept=".pdf,.docx">
+        <input type="text" name="target_language" placeholder="Enter target language (e.g., fr, es)">
+        <button type="button" onclick="submitForm('/translate', 'translateForm', 'translateResult')">Translate</button>
+    </form>
+    <div id="translateResult" class="result"></div>
     <script>
+        async function submitForm(endpoint, formId, resultId) {
+            const form = document.getElementById(formId);
+            const formData = new FormData(form);
+            const resultDiv = document.getElementById(resultId);
+            resultDiv.innerHTML = "Processing...";
             try {
+                const response = await fetch(endpoint, {
                     method: 'POST',
                     body: formData
                 });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
                 const data = await response.json();
+                resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
             } catch (error) {
+                resultDiv.innerHTML = `Error: ${error.message}`;
             }
+        }
     </script>
 </body>
 </html>