| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Plotting Chatbot</title> |
| <link href="/static/tailwind.css" rel="stylesheet"> |
| <style> |
| |
| html, body { height: 100%; margin: 0; padding: 0; } |
| body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } |
| #chatContainer { max-width: 600px; width: 100%; flex: 1; display: flex; flex-direction: column; overflow-y: auto; margin-bottom: 1rem; } |
| .message { padding: 0.5rem 1rem; border-radius: 12px; margin-bottom: 0.5rem; max-width: 80%; } |
| .userMsg { background-color: #3b82f6; color: white; align-self: flex-end; } |
| .botMsg { background-color: #f3f4f6; color: #111827; align-self: flex-start; } |
| </style> |
| </head> |
| <body class="bg-gray-100 p-4"> |
|
|
| <h1 class="text-2xl font-bold mb-4 text-center">AI Plotting Chatbot</h1> |
|
|
| <div class="w-full max-w-lg flex flex-col items-center mb-4"> |
| <input id="excelFile" type="file" accept=".xlsx" class="w-full mb-2 p-2 border rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400" /> |
| <div class="flex w-full"> |
| <input id="userQuery" type="text" placeholder="Enter plot request..." class="flex-1 p-2 border rounded-l-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400" /> |
| <button onclick="sendMessage()" class="bg-blue-600 text-white px-4 rounded-r-xl">➡</button> |
| </div> |
| </div> |
|
|
| <div id="chatContainer" class="w-full max-w-lg bg-white p-4 rounded-xl shadow flex flex-col"> |
| |
| </div> |
|
|
| <div class="w-full max-w-lg bg-white p-4 rounded-xl shadow mt-4"> |
| <h2 class="font-bold mb-2">Plot Output</h2> |
| <img id="plotImg" class="w-full rounded-xl shadow" /> |
| </div> |
|
|
| <div class="w-full max-w-lg bg-white p-4 rounded-xl shadow mt-4 mb-8"> |
| <h2 class="font-bold mb-2">Generated Code & Console</h2> |
| <pre id="consoleOutput" class="overflow-x-auto text-sm"></pre> |
| </div> |
|
|
| <script> |
| const chatContainer = document.getElementById("chatContainer"); |
| |
| function addMessage(content, type="botMsg") { |
| const msg = document.createElement("div"); |
| msg.className = `message ${type}`; |
| msg.textContent = content; |
| chatContainer.appendChild(msg); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| async function sendMessage() { |
| const fileInput = document.getElementById("excelFile"); |
| const queryInput = document.getElementById("userQuery"); |
| |
| if (!fileInput.files.length) { alert("Please upload a file."); return; } |
| if (!queryInput.value.trim()) { return; } |
| |
| |
| addMessage(queryInput.value.trim(), "userMsg"); |
| |
| const formData = new FormData(); |
| formData.append("file", fileInput.files[0]); |
| formData.append("query", queryInput.value.trim()); |
| |
| |
| queryInput.value = ""; |
| |
| |
| const loadingMsg = document.createElement("div"); |
| loadingMsg.className = "message botMsg"; |
| loadingMsg.textContent = "Processing..."; |
| chatContainer.appendChild(loadingMsg); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| |
| try { |
| const response = await fetch("/generate_plot_file", { |
| method: "POST", |
| body: formData |
| }); |
| const data = await response.json(); |
| |
| |
| chatContainer.removeChild(loadingMsg); |
| |
| |
| addMessage("Plot generated.", "botMsg"); |
| |
| |
| if(data.success){ |
| document.getElementById("plotImg").src = "data:image/png;base64," + data.plot; |
| } |
| |
| |
| document.getElementById("consoleOutput").textContent = data.code; |
| |
| } catch (err) { |
| chatContainer.removeChild(loadingMsg); |
| addMessage("Error generating plot: " + err.message, "botMsg"); |
| } |
| } |
| |
| |
| window.addEventListener('resize', () => { |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| }); |
| |
| |
| document.getElementById("userQuery").addEventListener("keypress", function(e) { |
| if (e.key === "Enter") sendMessage(); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
|
|
