Spaces:

Hadiil
/

google-fastapi

Runtime error

App Files Files Community

Hadiil commited on Mar 22, 2025

Commit

55adf2c

verified ·

1 Parent(s): aeba6c0

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +107 -80

static/index.html CHANGED Viewed

@@ -3,114 +3,141 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI-Powered Web Application</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             margin: 20px;
-        }
-        .container {
-            max-width: 600px;
-            margin: 0 auto;
         }
         h1 {
             text-align: center;
         }
         form {
             margin-bottom: 20px;
         }
-        input[type="file"], input[type="text"], textarea, button {
-            display: block;
-            margin: 10px 0;
-            padding: 10px;
             width: 100%;
-        }
-        .result {
-            margin-top: 20px;
             padding: 10px;
-            background-color: #f4f4f4;
             border: 1px solid #ddd;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>AI-Powered Web Application</h1>
-        <!-- Document Summarization -->
-        <h2>Document Summarization</h2>
-        <form id="summarizeForm">
-            <input type="file" id="document" name="document" accept=".pdf,.docx">
-            <p>Or</p>
-            <textarea id="manualText" name="text" placeholder="Enter text manually"></textarea>
-            <button type="submit">Summarize</button>
-        </form>
-        <div class="result" id="summaryResult"></div>
-        <!-- Text-Based Question Answering -->
-        <h2>Text-Based Question Answering</h2>
-        <form id="qaForm">
-            <input type="file" id="qaDocument" name="document" accept=".pdf,.docx">
-            <p>Or</p>
-            <textarea id="qaText" name="text" placeholder="Enter text manually"></textarea>
-            <input type="text" id="question" name="question" placeholder="Enter your question">
-            <button type="submit">Ask</button>
-        </form>
-        <div class="result" id="qaResult"></div>
-        <!-- Image Captioning -->
-        <h2>Image Captioning</h2>
-        <form id="captionForm">
-            <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png">
-            <button type="submit">Generate Caption</button>
-        </form>
-        <div class="result" id="captionResult"></div>
-        <!-- Visual Question Answering -->
-        <h2>Visual Question Answering</h2>
-        <form id="vqaForm">
-            <input type="file" id="vqaImage" name="image" accept=".jpg,.jpeg,.png">
-            <input type="text" id="vqaQuestion" name="question" placeholder="Enter your question">
-            <button type="submit">Ask</button>
-        </form>
-        <div class="result" id="vqaResult"></div>
-    </div>
     <script>
-        // Function to handle form submissions
-        async function handleFormSubmit(event, endpoint, resultId) {
-            event.preventDefault();
-            const formData = new FormData();
-            const fileInput = event.target.querySelector('input[type="file"]');
-            const textInput = event.target.querySelector('textarea');
-            const questionInput = event.target.querySelector('input[type="text"]');
-            if (fileInput.files[0]) {
-                formData.append("file", fileInput.files[0]);
-            } else if (textInput && textInput.value) {
-                formData.append("text", textInput.value);
-            } else {
-                alert("Please upload a file or enter text manually.");
-                return;
-            }
-            if (questionInput) {
-                formData.append("question", questionInput.value);
-            }
-            const response = await fetch(endpoint, {
-                method: "POST",
-                body: formData
-            });
-            const result = await response.json();
-            document.getElementById(resultId).innerText = JSON.stringify(result, null, 2);
-        }
-        // Attach event listeners to forms
-        document.getElementById("summarizeForm").onsubmit = (e) => handleFormSubmit(e, "/summarize", "summaryResult");
-        document.getElementById("qaForm").onsubmit = (e) => handleFormSubmit(e, "/answer", "qaResult");
-        document.getElementById("captionForm").onsubmit = (e) => handleFormSubmit(e, "/caption", "captionResult");
-        document.getElementById("vqaForm").onsubmit = (e) => handleFormSubmit(e, "/vqa", "vqaResult");
     </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>