File size: 14,676 Bytes
1fcd59f 6710280 1fcd59f a88b36b 4568663 21b66b5 1fcd59f 4568663 21b66b5 4568663 21b66b5 4568663 a88b36b 21b66b5 4568663 7cde54c 4568663 7cde54c 4568663 7cde54c 4568663 7cde54c 4568663 21b66b5 4568663 7cde54c 21b66b5 4568663 21b66b5 4568663 a88b36b 4568663 a88b36b 4568663 21b66b5 4568663 21b66b5 4568663 21b66b5 4568663 a88b36b 4568663 a88b36b 4568663 21b66b5 4568663 21b66b5 4568663 a88b36b 4568663 21b66b5 4568663 21b66b5 4568663 a88b36b 4568663 21b66b5 4568663 21b66b5 4568663 a88b36b 4568663 21b66b5 4568663 21b66b5 4568663 a88b36b 4568663 21b66b5 4568663 a88b36b 4568663 21b66b5 4568663 a88b36b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmic AI Assistant</title>
<link rel="stylesheet" href="/static/styles.css">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-black text-white font-sans">
<!-- Starry Background -->
<div class="stars"></div>
<!-- Chatbot Icon -->
<div class="chatbot-icon" title="Chat with Gemini">
<img src="/images/gemini-icon.png" alt="Gemini Chatbot" class="w-12 h-12">
</div>
<!-- Main Container -->
<div class="container mx-auto p-6">
<h1 class="text-4xl font-bold text-center mb-8 cosmic-gradient">Cosmic AI Assistant</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Summarize Box -->
<div class="function-box card" data-modal="summarize-modal">
<img src="/images/summarize.png" alt="Summarize Icon" class="w-20 h-20 mx-auto mb-4">
<h2 class="text-2xl font-semibold text-center">Summarize Text</h2>
<p class="text-base text-center text-gray-300">Shorten long text or files into concise summaries.</p>
</div>
<!-- Translate Box -->
<div class="function-box card" data-modal="translate-modal">
<img src="/images/translate.png" alt="Translate Icon" class="w-20 h-20 mx-auto mb-4">
<h2 class="text-2xl font-semibold text-center">Translate</h2>
<p class="text-base text-center text-gray-300">Convert text or files to another language.</p>
</div>
<!-- File QA Box -->
<div class="function-box card" data-modal="file-qa-modal">
<img src="/images/file-qa.png" alt="File QA Icon" class="w-20 h-20 mx-auto mb-4">
<h2 class="text-2xl font-semibold text-center">Ask About File</h2>
<p class="text-base text-center text-gray-300">Ask questions about uploaded documents.</p>
</div>
<!-- Image Captioning Box -->
<div class="function-box card" data-modal="image-caption-modal">
<img src="/images/image-caption.png" alt="Image Caption Icon" class="w-20 h-20 mx-auto mb-4">
<h2 class="text-2xl font-semibold text-center">Image Caption</h2>
<p class="text-base text-center text-gray-300">Get descriptions for your images.</p>
</div>
<!-- Visual QA Box -->
<div class="function-box card" data-modal="visual-qa-modal">
<img src="/images/visual-qa.png" alt="Visual QA Icon" class="w-20 h-20 mx-auto mb-4">
<h2 class="text-2xl font-semibold text-center">Image Questions</h2>
<p class="text-base text-center text-gray-300">Ask questions about images.</p>
</div>
<!-- Data Visualization Box -->
<div class="function-box card" data-modal="visualize-modal">
<img src="/images/visualize.png" alt="Visualize Icon" class="w-20 h-20 mx-auto mb-4">
<h2 class="text-2xl font-semibold text-center">Visualize Data</h2>
<p class="text-base text-center text-gray-300">Create charts from Excel or CSV files.</p>
</div>
</div>
</div>
<!-- Modals -->
<!-- Summarize Modal -->
<div id="summarize-modal" class="modal hidden">
<div class="modal-content">
<span class="close-modal">×</span>
<h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Summarize Text</h2>
<div class="flex mb-4">
<button class="tab-btn active" data-tab="summarize-text">Text</button>
<button class="tab-btn" data-tab="summarize-file">File</button>
</div>
<form id="summarize-form" class="tab-content" data-tab="summarize-text">
<div class="input-bar">
<input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to summarize..." required>
<button type="submit" class="cosmic-btn ml-2">Send</button>
</div>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<form id="summarize-file-form" class="tab-content hidden" data-tab="summarize-file">
<div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
<p>Drop File Here or Click to Choose</p>
<input type="file" accept=".pdf,.docx,.txt,.rtf" class="hidden">
</div>
<button type="submit" class="cosmic-btn mt-4">Send</button>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<div id="summarize-response" class="response-card hidden"></div>
</div>
</div>
<!-- Translate Modal -->
<div id="translate-modal" class="modal hidden">
<div class="modal-content">
<span class="close-modal">×</span>
<h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Translate</h2>
<div class="flex mb-4">
<button class="tab-btn active" data-tab="translate-text">Text</button>
<button class="tab-btn" data-tab="translate-file">File</button>
</div>
<form id="translate-text-form" class="tab-content" data-tab="translate-text">
<div class="input-bar">
<input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to translate..." required>
<button type="submit" class="cosmic-btn ml-2">Send</button>
</div>
<select class="w-full p-3 mt-3 bg-gray-800 bg-opacity-50 rounded" name="language">
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
<option value="german">German</option>
<option value="italian">Italian</option>
<option value="russian">Russian</option>
<option value="chinese">Chinese</option>
<option value="japanese">Japanese</option>
<option value="arabic">Arabic</option>
<option value="hindi">Hindi</option>
<option value="portuguese">Portuguese</option>
<option value="korean">Korean</option>
</select>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<form id="translate-file-form" class="tab-content hidden" data-tab="translate-file">
<div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
<p>Drop File Here or Click to Choose</p>
<input type="file" accept=".pdf,.docx,.txt,.rtf" class="hidden">
</div>
<select class="w-full p-3 mt-3 bg-gray-800 bg-opacity-50 rounded" name="language">
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
<option value="german">German</option>
<option value="italian">Italian</option>
<option value="russian">Russian</option>
<option value="chinese">Chinese</option>
<option value="japanese">Japanese</option>
<option value="arabic">Arabic</option>
<option value="hindi">Hindi</option>
<option value="portuguese">Portuguese</option>
<option value="korean">Korean</option>
</select>
<button type="submit" class="cosmic-btn mt-4">Send</button>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<div id="translate-response" class="response-card hidden"></div>
</div>
</div>
<!-- File QA Modal -->
<div id="file-qa-modal" class="modal hidden">
<div class="modal-content">
<span class="close-modal">×</span>
<h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Ask About File</h2>
<form id="file-qa-form">
<div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
<p>Drop File Here or Click to Choose</p>
<input type="file" accept=".pdf,.docx,.txt,.rtf" class="hidden">
</div>
<div class="input-bar mt-3">
<input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Ask a question about the file..." required>
<button type="submit" class="cosmic-btn ml-2">Send</button>
</div>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<div id="file-qa-response" class="response-card hidden"></div>
</div>
</div>
<!-- Image Caption Modal -->
<div id="image-caption-modal" class="modal hidden">
<div class="modal-content">
<span class="close-modal">×</span>
<h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Image Caption</h2>
<form id="image-caption-form">
<div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
<p>Drop Image Here or Click to Choose</p>
<input type="file" accept="image/*" class="hidden">
</div>
<button type="submit" class="cosmic-btn mt-4">Send</button>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<div id="image-caption-response" class="response-card hidden"></div>
</div>
</div>
<!-- Visual QA Modal -->
<div id="visual-qa-modal" class="modal hidden">
<div class="modal-content">
<span class="close-modal">×</span>
<h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Image Questions</h2>
<form id="visual-qa-form">
<div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
<p>Drop Image Here or Click to Choose</p>
<input type="file" accept="image/*" class="hidden">
</div>
<div class="input-bar mt-3">
<input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Ask a question about the image..." required>
<button type="submit" class="cosmic-btn ml-2">Send</button>
</div>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<div id="visual-qa-response" class="response-card hidden"></div>
</div>
</div>
<!-- Visualize Modal -->
<div id="visualize-modal" class="modal hidden">
<div class="modal-content">
<span class="close-modal">×</span>
<h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Visualize Data</h2>
<form id="visualize-form">
<div class="drop-area" ondragover="event.preventDefault();" ondrop="handleDrop(event, this)" onclick="this.querySelector('input').click();">
<p>Drop File Here or Click to Choose</p>
<input type="file" accept=".csv,.xlsx,.xls" class="hidden">
</div>
<select class="w-full p-3 mt-3 bg-gray-800 bg-opacity-50 rounded" name="visualization-type">
<option value="scatter">Scatter Plot</option>
<option value="bar">Bar Chart</option>
<option value="histogram">Histogram</option>
<option value="dashboard">Dashboard</option>
</select>
<button type="submit" class="cosmic-btn mt-4">Send</button>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
<div id="visualize-response" class="response-card hidden"></div>
</div>
</div>
<!-- Chatbot Modal -->
<div id="chatbot-modal" class="modal hidden">
<div class="modal-content chatbot-modal">
<span class="close-modal">×</span>
<h2 class="text-2xl font-semibold mb-4 cosmic-gradient">Gemini Chatbot</h2>
<div id="chatbot-conversation" class="chatbot-conversation"></div>
<form id="chatbot-form">
<div class="input-bar">
<input type="text" class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Type your message..." required>
<button type="submit" class="cosmic-btn ml-2">Send</button>
</div>
<div class="loading-spinner hidden">Processing your request...</div>
</form>
</div>
</div>
<script src="/static/scripts.js"></script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9385acb2c804e0a9',t:'MTc0NjAwMTgwMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html> |