Spaces:
Sleeping
Sleeping
| <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> |