119 lines
6.3 KiB
PHP
119 lines
6.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Data Analysis</title>
|
|
<meta name="description" content="Upload a CSV file and let AI analyze its contents, suggest charts, and provide statistical insights.">
|
|
<meta name="keywords" content="csv analysis, ai data analysis, data visualization, business intelligence, csv reader, data science, flatlogic">
|
|
<meta property="og:title" content="AI Data Analysis">
|
|
<meta property="og:description" content="Turn your CSV files into actionable insights with AI-powered analysis and chart suggestions.">
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/default-og-image.png'); ?>">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? 'assets/images/default-og-image.png'); ?>">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">
|
|
<i class="bi bi-robot"></i>
|
|
AI CSV Analyzer
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container my-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<h1 class="display-4 fw-bold">Unlock Insights from Your CSV Files</h1>
|
|
<p class="lead text-muted">
|
|
Simply upload your CSV, and our AI will instantly provide a summary, suggest relevant charts, and generate key statistics.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mt-5">
|
|
<div class="col-lg-7">
|
|
<div class="card shadow-sm border-light">
|
|
<div class="card-body p-4">
|
|
<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data">
|
|
<div class="mb-3">
|
|
<label for="csv-file" class="form-label visually-hidden">Upload CSV</label>
|
|
<div class="d-flex justify-content-center align-items-center border-2 border-dashed rounded-3 p-5" id="drop-zone">
|
|
<div class="text-center">
|
|
<i class="bi bi-cloud-arrow-up-fill text-primary" style="font-size: 3rem;"></i>
|
|
<p class="mt-3 mb-0">
|
|
<span class="fw-bold">Drag & drop your file here or click to upload</span>
|
|
</p>
|
|
<p class="text-muted small" id="file-name-display">No file selected</p>
|
|
<input type="file" name="csv_file" id="csv-file" class="d-none" accept=".csv">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
|
|
<i class="bi bi-bar-chart-line-fill me-2"></i>Analyze Now
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="results-section" class="mt-5" style="display: none;">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Analysis Results
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="analysis-output">
|
|
<!-- AI analysis will be injected here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Generation Section -->
|
|
<div id="chart-section" class="card mt-4" style="display: none;">
|
|
<div class="card-header">
|
|
Create a Chart
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Describe the chart you want to create based on the analyzed data.</p>
|
|
<div class="input-group">
|
|
<input type="text" id="chart-request-input" class="form-control" placeholder="e.g., 'Pie chart of sales by region'">
|
|
<button id="generate-chart-btn" class="btn btn-success">
|
|
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
|
|
<i class="bi bi-pie-chart-fill me-2"></i>Generate Chart
|
|
</button>
|
|
</div>
|
|
<div id="chart-output" class="mt-4 text-center">
|
|
<!-- Chart will be rendered here -->
|
|
<canvas id="chart-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="bg-light text-center py-4 mt-auto">
|
|
<div class="container">
|
|
<p class="mb-0 text-muted">© <?php echo date("Y"); ?> AI CSV Analyzer. Built with Flatlogic.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|