|
<!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"> |
|
|
|
<div class="stars"></div> |
|
|
|
|
|
<div class="chatbot-icon" title="Chat with Gemini"> |
|
<img src="/images/gemini-icon.png" alt="Gemini Chatbot" class="w-12 h-12"> |
|
</div> |
|
|
|
|
|
<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"> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
