Update static/index.html

static/index.html

@@ -3,141 +3,335 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Web </title>
+    <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;
+        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
+        * {
+            margin: 0;
             padding: 0;
-            background-color: #f4f4f9;
-            color: #333;
+            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;
         }
-        h1 {
+
+        .header {
+            max-width: 900px;
             text-align: center;
-            color: #444;
+            padding: 0 2rem;
+            margin: 0 auto;
         }
-        h2 {
-            color: #555;
-            border-bottom: 2px solid #ddd;
-            padding-bottom: 5px;
+
+        .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);
         }
-        form {
-            background: #fff;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
+
+        .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;
         }
-        input[type="file"], textarea, input[type="text"] {
+
+        .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%;
-            padding: 10px;
-            margin: 10px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 16px;
-        }
-        button {
-            background-color: #007bff;
-            color: white;
+            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;
-            padding: 10px 20px;
-            border-radius: 4px;
+            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;
-            font-size: 16px;
+            padding: 0.2rem;
+            transition: color 0.3s ease;
         }
-        button:hover {
-            background-color: #0056b3;
+
+        .prompt__form-button:hover {
+            color: var(--accent-color);
         }
-        .result {
-            background: #e9ecef;
-            padding: 15px;
-            border-radius: 4px;
-            margin-top: 10px;
-            font-family: monospace;
+
+        .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>
-    <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>
+    <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>
-        async function submitForm(endpoint, formId, resultId) {
-            const form = document.getElementById(formId);
-            const formData = new FormData(form);
-            const resultDiv = document.getElementById(resultId);
+        // 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');
 
-            resultDiv.innerHTML = "Processing...";
+        promptForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const prompt = promptInput.value.trim();
+            if (!prompt) return;
 
             try {
-                const response = await fetch(endpoint, {
+                const response = await fetch('/summarize', {
                     method: 'POST',
-                    body: formData
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ text: prompt })
                 });
 
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-
+                if (!response.ok) throw new Error('Failed to fetch response');
                 const data = await response.json();
-                resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+                alert(`Response: ${data.summary}`);
             } catch (error) {
-                resultDiv.innerHTML = `Error: ${error.message}`;
+                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>