Spaces:
Sleeping
Sleeping
| <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 hidden"> | |
| <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">file Language:</label> | |
| <select id="language-select"> | |
| <option value="en">English</option> | |
| <option value="fr">French</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> | |
| </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 hidden"> | |
| <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">file Language:</label> | |
| <select id="qa-language"> | |
| <option value="fr">French</option> | |
| <option value="en">English</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> | |
| </div> | |
| <!-- Error Display --> | |
| <div id="qa-error-message" class="error-message hidden"></div> | |
| </section> | |
| <section id="data-visualization" class="tool-section"> | |
| <h3>Data Visualization Code Generation</h3> | |
| <!-- File Upload Area --> | |
| <div class="upload-area" id="data-upload-area"> | |
| <p>📊 Drag & drop Excel/CSV file here or click to upload</p> | |
| <input type="file" id="data-file-input" accept=".xlsx,.xls,.csv" /> | |
| <div id="data-file-preview"></div> | |
| </div> | |
| <!-- Visualization Prompt --> | |
| <div class="input-group"> | |
| <label for="visualization-prompt">What visualization would you like? (optional)</label> | |
| <textarea | |
| id="visualization-prompt" | |
| placeholder="Example: Show a bar chart of sales by region, or leave blank for automatic visualization"></textarea> | |
| </div> | |
| <!-- Chart Type Selection --> | |
| <div class="form-group"> | |
| <label for="chart-type-select">Preferred Chart Type:</label> | |
| <select id="chart-type-select"> | |
| <option value="auto">Auto-detect</option> | |
| <option value="bar">Bar Chart</option> | |
| <option value="line">Line Chart</option> | |
| <option value="scatter">Scatter Plot</option> | |
| <option value="pie">Pie Chart</option> | |
| <option value="histogram">Histogram</option> | |
| </select> | |
| </div> | |
| <!-- Submit Button --> | |
| <button id="visualize-btn" class="primary-btn"> | |
| <span id="visualize-btn-text">Generate Visualization</span> | |
| <span id="visualize-btn-spinner" class="spinner hidden"></span> | |
| </button> | |
| <!-- Results Display --> | |
| <div id="visualization-results" class="hidden"> | |
| <div class="results-grid"> | |
| <!-- Visualization Image --> | |
| <div class="result-card"> | |
| <h4>Generated Visualization:</h4> | |
| <div id="visualization-image-container"> | |
| <img id="generated-visualization" src="" alt="Generated data visualization" /> | |
| </div> | |
| </div> | |
| <!-- Python Code --> | |
| <div class="result-card"> | |
| <h4>Python Code:</h4> | |
| <div class="code-container"> | |
| <pre id="python-code-output"></pre> | |
| <button id="copy-code-btn" class="secondary-btn">Copy Code</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Preview --> | |
| <div class="result-card"> | |
| <h4>Data Preview:</h4> | |
| <div id="data-preview-container"></div> | |
| </div> | |
| </div> | |
| <!-- Error Display --> | |
| <div id="visualization-error" class="error hidden"></div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>© 2025 ALGenius. All rights reserved.</p> | |
| </footer> | |
| </body> | |
| </html> | |