Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="VION IA Assistant: AI-powered summarization, translation, file Q&A, image captioning, and data visualization."> | |
| <title>VION IA 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"> | |
| <link rel="icon" href="/images/favicon.ico" type="image/x-icon"> | |
| </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">VION IA 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"> | |
| <textarea class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to summarize..." rows="5" required></textarea> | |
| <button type="submit" class="cosmic-btn ml-2">Send</button> | |
| </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> | |
| </form> | |
| <div id="summarize-response" class="response-card hidden"></div> | |
| <div class="loading-spinner 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"> | |
| <textarea class="w-full p-3 bg-gray-800 bg-opacity-50 rounded" placeholder="Enter text to translate..." rows="5" required></textarea> | |
| <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 |