Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Visualization - SmartDoc AI</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link rel="stylesheet" href="static/styles/notification.css"> | |
| <link rel="stylesheet" href="static/styles/functions.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <nav class="container"> | |
| <div class="logo"> | |
| <a href="/">SmartDoc AI</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>Turn Data into | |
| <br> | |
| Stunning Visuals | |
| </h1> | |
| <p>Transform your raw data into compelling visual stories with our AI-powered data visualization tool. Upload | |
| your spreadsheets and let our system generate beautiful, insightful charts and graphs.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="reasons"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Why Choose Our Data Visualization AI</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="reasons-grid"> | |
| <div class="reason-card"> | |
| <div class="reason-icon">📊</div> | |
| <h3>Instant Insights</h3> | |
| <p>Transform complex datasets into clear, actionable visualizations in seconds. Our AI identifies patterns and | |
| relationships that might otherwise remain hidden.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">🎨</div> | |
| <h3>Beautiful Design</h3> | |
| <p>Generate professional-quality charts and graphs with optimal color schemes, typography, and layouts that | |
| follow data visualization best practices.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">💡</div> | |
| <h3>Smart Recommendations</h3> | |
| <p>Our AI suggests the most effective visualization types based on your data structure, ensuring you | |
| communicate your insights in the most impactful way.</p> | |
| </div> | |
| <div class="reason-card"> | |
| <div class="reason-icon">🔄</div> | |
| <h3>Code Generation</h3> | |
| <p>Get ready-to-use code for your visualizations that you can integrate into your projects, presentations, or | |
| dashboards with minimal effort.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="steps"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>How It Works</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="steps-container"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>Upload Your Data</h3> | |
| <p>Select and upload your Excel spreadsheet containing the data you want to visualize. Our system supports | |
| various data formats and structures.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>Describe Your Needs</h3> | |
| <p>Tell us what kind of visualization you're looking for or what insights you want to highlight. Our AI will | |
| use this to guide the visualization process.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-line"></div> | |
| <div class="step-content"> | |
| <h3>AI Processing</h3> | |
| <p>Our advanced algorithms analyze your data, identify patterns and relationships, and generate the most | |
| appropriate visualization based on your requirements.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>Download and Use</h3> | |
| <p>Get your visualization as an image file, along with the code used to create it. You can download, share, | |
| or integrate it directly into your projects.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="upload"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Upload Your Data</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="upload-container"> | |
| <div class="upload-box"> | |
| <div class="upload-icon">📈</div> | |
| <div class="upload-text"> | |
| <h3>Select a Spreadsheet to Visualize</h3> | |
| <p>Upload an Excel file (.xlsx) containing your data (max 1MB)</p> | |
| </div> | |
| <div class="file-input-container"> | |
| <label for="data-upload" class="file-input-label">Choose File</label> | |
| <input type="file" id="data-upload" class="file-input" accept=".xlsx,.xls"> | |
| <div class="file-name" id="file-name">No file chosen</div> | |
| </div> | |
| <div class="prompt-container"> | |
| <label for="visualization-prompt" class="prompt-label">Describe the visualization you want:</label> | |
| <textarea id="visualization-prompt" class="prompt-input" | |
| placeholder="Example: Create a bar chart showing monthly sales by product category, highlighting the top-performing category" | |
| rows="4"></textarea> | |
| </div> | |
| <button class="btn-primary" id="visualize-btn">Generate Visualization</button> | |
| <div class="loading-container" id="loading-container"> | |
| <div class="loading-spinner"></div> | |
| <div class="loading-text">Analyzing data and generating visualization...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="results" id="results-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Your Visualization</h2> | |
| <div class="underline"></div> | |
| </div> | |
| <div class="results-container"> | |
| <div class="results-box"> | |
| <div class="results-header"> | |
| <div class="results-title"> | |
| <h3>Generated Chart</h3> | |
| </div> | |
| </div> | |
| <div class="results-chart-container"> | |
| <img src="" alt="Generated Chart" class="results-chart" id="results-chart"> | |
| </div> | |
| <div class="results-code-container"> | |
| <div class="results-code-header"> | |
| <div class="results-code-title">Generated Code</div> | |
| </div> | |
| <div class="results-code"> | |
| <pre id="code-content"> | |
| </pre> | |
| </div> | |
| </div> | |
| <div class="results-actions"> | |
| <button class="btn-secondary" id="new-visualization-btn">New Visualization</button> | |
| <button class="btn-primary" id="download-chart-btn">Download Chart</button> | |
| <button class="btn-primary" id="download-code-btn">Download Code</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo"> | |
| <a href="/">SmartDoc AI</a> | |
| <p>Intelligent Document Processing</p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2025 SmartDoc AI.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <div class="notification-container"></div> | |
| <script src="static/scripts/notifcation.js"></script> | |
| <script src="static/scripts/data-visualisation.js"></script> | |
| </body> | |
| </html> |