Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Excel Analyzer</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100 flex items-center justify-center min-h-screen"> | |
| <div class="bg-white/20 backdrop-blur-md rounded-2xl p-8 shadow-lg w-full max-w-4xl"> | |
| <h1 class="text-3xl font-bold text-center text-white mb-6">AI Excel Analyzer</h1> | |
| <form id="uploadForm" class="mb-6"> | |
| <input type="file" name="file" id="fileInput" class="mb-4 p-2 rounded border"> | |
| <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Upload & Analyze</button> | |
| </form> | |
| <div id="metadataSection" class="text-white mb-4"></div> | |
| <div id="suggestionsSection" class="text-white mb-4"></div> | |
| <div class="bg-white/10 p-4 rounded-lg"> | |
| <canvas id="chartCanvas" class="w-full h-96"></canvas> | |
| </div> | |
| </div> | |
| <script> | |
| const uploadForm = document.getElementById("uploadForm"); | |
| const metadataSection = document.getElementById("metadataSection"); | |
| const suggestionsSection = document.getElementById("suggestionsSection"); | |
| let uploadedFilePath = ""; | |
| uploadForm.addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const fileInput = document.getElementById("fileInput"); | |
| const formData = new FormData(); | |
| formData.append("file", fileInput.files[0]); | |
| const response = await fetch("/upload", { method: "POST", body: formData }); | |
| const data = await response.json(); | |
| uploadedFilePath = data.file_path; | |
| metadataSection.innerHTML = `<pre>${JSON.stringify(data.metadata, null, 2)}</pre>`; | |
| suggestionsSection.innerHTML = "<h3>Select a suggestion:</h3>"; | |
| data.analysis.Suggestion.forEach((s, i) => { | |
| const btn = document.createElement("button"); | |
| btn.textContent = `Suggestion ${i+1}`; | |
| btn.className = "bg-green-500 text-white px-3 py-1 m-1 rounded hover:bg-green-600"; | |
| btn.addEventListener("click", () => generatePlot(s)); | |
| suggestionsSection.appendChild(btn); | |
| }); | |
| }); | |
| async function generatePlot(command) { | |
| const formData = new FormData(); | |
| formData.append("command", command); | |
| formData.append("file_path", uploadedFilePath); | |
| const response = await fetch("/generate_plot", { method: "POST", body: formData }); | |
| const vizData = await response.json(); | |
| const ctx = document.getElementById("chartCanvas").getContext("2d"); | |
| if(window.myChart) window.myChart.destroy(); | |
| const data = JSON.parse(vizData.code); // Assuming Gemini outputs JSON data | |
| window.myChart = new Chart(ctx, { | |
| type: vizData.type, | |
| data: { | |
| labels: data.labels, | |
| datasets: [{ label: vizData.explanation, data: data.values, backgroundColor: "rgba(255,255,255,0.6)" }] | |
| }, | |
| options: { responsive: true, plugins: { legend: { labels: { color: "white" }}}} | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |