Spaces:
Running
Running
File size: 7,681 Bytes
180dc07 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
<!DOCTYPE html>
<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> |