Spaces:
Sleeping
Sleeping
| <!--<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Excel Visualizer</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } | |
| .upload-area { border: 2px dashed #ccc; padding: 30px; text-align: center; cursor: pointer; margin-bottom: 20px; } | |
| #preview { margin-top: 10px; font-weight: bold; } | |
| #result-container { margin-top: 30px; display: none; } | |
| #result-image { max-width: 100%; margin-bottom: 20px; } | |
| .code-block { background: #f5f5f5; padding: 15px; overflow-x: auto; } | |
| #error-message { color: red; margin-top: 20px; display: none; } | |
| button { padding: 10px 15px; background: #4CAF50; color: white; border: none; cursor: pointer; } | |
| button:disabled { background: #cccccc; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Excel Data Visualizer</h1> | |
| <div class="upload-area" id="drop-area"> | |
| <p>Drag & drop Excel file here or click to select</p> | |
| <input type="file" id="file-input" accept=".xlsx,.xls" style="display: none;"> | |
| <div id="preview"></div> | |
| </div> | |
| <div> | |
| <label for="prompt">Visualization Prompt:</label> | |
| <textarea id="prompt" rows="3" style="width: 100%" placeholder="e.g. Show sales by region"></textarea> | |
| </div> | |
| <div> | |
| <label for="style">Chart Style:</label> | |
| <select id="style" style="width: 100%"> | |
| <option value="seaborn-v0_8">Seaborn</option> | |
| <option value="ggplot">ggplot</option> | |
| <option value="dark_background">Dark</option> | |
| </select> | |
| </div> | |
| <button id="visualize-btn">Generate Visualization</button> | |
| <div id="error-message"></div> | |
| <div id="result-container"> | |
| <h2>Your Visualization</h2> | |
| <img id="result-image"> | |
| <div> | |
| <label for="chart-title">Chart Title:</label> | |
| <input type="text" id="chart-title" style="width: 100%"> | |
| </div> | |
| <button id="update-btn">Update Visualization</button> | |
| <h3>Generated Python Code</h3> | |
| <pre class="code-block" id="generated-code"></pre> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const dropArea = document.getElementById('drop-area'); | |
| const fileInput = document.getElementById('file-input'); | |
| const preview = document.getElementById('preview'); | |
| const visualizeBtn = document.getElementById('visualize-btn'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const resultImage = document.getElementById('result-image'); | |
| const generatedCode = document.getElementById('generated-code'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const updateBtn = document.getElementById('update-btn'); | |
| // Drag and drop functionality | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropArea.style.borderColor = '#4CAF50'; | |
| dropArea.style.backgroundColor = 'rgba(76, 175, 80, 0.1)'; | |
| } | |
| function unhighlight() { | |
| dropArea.style.borderColor = '#ccc'; | |
| dropArea.style.backgroundColor = ''; | |
| } | |
| dropArea.addEventListener('drop', handleDrop, false); | |
| dropArea.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFileSelect); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| } | |
| function handleFileSelect(e) { | |
| const files = e.target.files; | |
| if (files.length) { | |
| handleFiles(files); | |
| } | |
| } | |
| function handleFiles(files) { | |
| const file = files[0]; | |
| preview.innerHTML = `Selected: <strong>${file.name}</strong> (${(file.size/1024/1024).toFixed(2)} MB)`; | |
| fileInput.files = files; | |
| } | |
| // Visualization functionality | |
| visualizeBtn.addEventListener('click', async () => { | |
| const file = fileInput.files[0]; | |
| const prompt = document.getElementById('prompt').value; | |
| const style = document.getElementById('style').value; | |
| if (!file) { | |
| showError("Please select an Excel file first"); | |
| return; | |
| } | |
| try { | |
| visualizeBtn.disabled = true; | |
| visualizeBtn.textContent = "Processing..."; | |
| hideError(); | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| formData.append('prompt', prompt); | |
| formData.append('style', style); | |
| const response = await fetch('/visualize/natural', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| const error = await response.json(); | |
| throw new Error(error.detail || "Failed to generate visualization"); | |
| } | |
| const result = await response.json(); | |
| if (result.status === "success") { | |
| resultImage.src = `data:image/png;base64,${result.image}`; | |
| generatedCode.textContent = result.code; | |
| document.getElementById('chart-title').value = result.title || "My Chart"; | |
| resultContainer.style.display = 'block'; | |
| } else { | |
| throw new Error(result.message || "Visualization failed"); | |
| } | |
| } catch (error) { | |
| showError(error.message); | |
| } finally { | |
| visualizeBtn.disabled = false; | |
| visualizeBtn.textContent = "Generate Visualization"; | |
| } | |
| }); | |
| // Update functionality | |
| updateBtn.addEventListener('click', async () => { | |
| const title = document.getElementById('chart-title').value; | |
| if (!title) { | |
| showError("Please enter a chart title"); | |
| return; | |
| } | |
| // Here you would typically send the update request to your backend | |
| // For now we'll just update the title in the image (mock implementation) | |
| const canvas = document.createElement('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const img = new Image(); | |
| img.onload = function() { | |
| canvas.width = img.width; | |
| canvas.height = img.height + 40; | |
| ctx.fillStyle = 'white'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.drawImage(img, 0, 40); | |
| ctx.fillStyle = 'black'; | |
| ctx.font = '20px Arial'; | |
| ctx.textAlign = 'center'; | |
| ctx.fillText(title, canvas.width/2, 30); | |
| resultImage.src = canvas.toDataURL(); | |
| }; | |
| img.src = resultImage.src; | |
| }); | |
| function showError(message) { | |
| errorMessage.textContent = message; | |
| errorMessage.style.display = 'block'; | |
| } | |
| function hideError() { | |
| errorMessage.style.display = 'none'; | |
| } | |
| </script> | |
| </body> | |
| </html>!--> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>ALGenius</title> | |
| <link rel="stylesheet" href="static/test.css" /> | |
| <script defer src="static/test.js"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>ALGenius</h1> | |
| <p>Explore powerful AI tools below</p> | |
| </header> | |
| <main> | |
| <section class="cards"> | |
| <div class="card" onclick="showSection('document-image-analysis')"> | |
| <div class="icon">📝</div> | |
| <h2>Document & Image Analysis</h2> | |
| <p>Summarize documents and generate captions for images.</p> | |
| </div> | |
| <div class="card" onclick="showSection('question-answering')"> | |
| <div class="icon">💬</div> | |
| <h2>Intelligent Question Answering</h2> | |
| <p>Ask questions based on documents or images.</p> | |
| </div> | |
| <div class="card" onclick="showSection('data-visualization')"> | |
| <div class="icon">📊</div> | |
| <h2>Data Visualization Code Generation</h2> | |
| <p>Generate Python code for visualizing data from Excel.</p> | |
| </div> | |
| </section> | |
| <section id="document-image-analysis" class="tool-section"> | |
| <h3>Document & Image Analysis</h3> | |
| <!-- Text Input Area --> | |
| <div class="input-group"> | |
| <label for="text-input">Or paste text directly:</label> | |
| <textarea id="text-input" placeholder="Paste your document text here..."></textarea> | |
| </div> | |
| <!-- File Upload Area --> | |
| <div class="upload-area" id="upload-area"> | |
| <p>📁 Drag & drop file here or click to upload</p> | |
| <input type="file" id="file-input" accept=".pdf,.docx,.txt,.jpg,.jpeg,.png" /> | |
| <div id="file-preview"></div> | |
| </div> | |
| <!-- Language Selection --> | |
| <div class="form-group"> | |
| <label for="language-select">Summary Language:</label> | |
| <select id="language-select"> | |
| <option value="en">English</option> | |
| <option value="fr">French</option> | |
| <option value="es">Spanish</option> | |
| </select> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="button-group"> | |
| <button id="summarize-btn" class="primary-btn"> | |
| <span id="btn-text">Summarize Document</span> | |
| <span id="btn-spinner" class="spinner hidden"></span> | |
| </button> | |
| <button id="caption-btn" class="secondary-btn" disabled> | |
| <span>Generate Image Caption</span> | |
| </button> | |
| </div> | |
| <!-- Results Display --> | |
| <div id="result-container" class="hidden"> | |
| <h4>Analysis Results:</h4> | |
| <div id="result-content"></div> | |
| </div> | |
| <!-- Error Display --> | |
| <div id="error-message" class="error hidden"></div> | |
| </section> | |
| ' | |
| ' | |
| <section id="question-answering" class="tool-section"> | |
| <h3>Intelligent Question Answering</h3> | |
| <!-- File Upload Area --> | |
| <div class="upload-area" id="qa-upload-area"> | |
| <p>📁 Drag & drop file here or click to upload</p> | |
| <input type="file" id="qa-file-input" accept=".pdf,.docx,.txt,.jpg,.jpeg,.png" /> | |
| <div id="qa-file-preview"></div> | |
| </div> | |
| <!-- Question Input --> | |
| <div class="input-group"> | |
| <label for="qa-question">Your Question:</label> | |
| <textarea id="qa-question" placeholder="Ask your question about the document..."></textarea> | |
| </div> | |
| <!-- Language Selection --> | |
| <div class="form-group"> | |
| <label for="qa-language">Answer Language:</label> | |
| <select id="qa-language"> | |
| <option value="fr">French</option> | |
| <option value="en">English</option> | |
| <option value="es">Spanish</option> | |
| </select> | |
| </div> | |
| <!-- Submit Button --> | |
| <button id="qa-submit-btn" class="primary-btn"> | |
| <span id="qa-btn-text">Get Answer</span> | |
| <span id="qa-btn-spinner" class="spinner hidden"></span> | |
| </button> | |
| <!-- Results Display --> | |
| <div id="qa-result-container" class="result-container hidden"> | |
| <h4>Answer:</h4> | |
| <div id="qa-answer"></div> | |
| <div class="confidence-meter"> | |
| <span>Confidence:</span> | |
| <div class="meter-bar"> | |
| <div id="qa-confidence-bar" class="meter-fill" style="width: 0%"></div> | |
| </div> | |
| <span id="qa-confidence-value">0%</span> | |
| </div> | |
| </div> | |
| <!-- Error Display --> | |
| <div id="qa-error-message" class="error-message hidden"></div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>© 2025 ALGenius. All rights reserved.</p> | |
| </footer> | |
| </body> | |
| </html> | |