File size: 4,288 Bytes
c494c7f |
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 |
<!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>
/* Ensure input fields and buttons resize nicely on mobile keyboard pop-up */
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">
<!-- Messages will appear here -->
</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; }
// Add user message
addMessage(queryInput.value.trim(), "userMsg");
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("query", queryInput.value.trim());
// Clear input
queryInput.value = "";
// Add bot loading message
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();
// Remove loading
chatContainer.removeChild(loadingMsg);
// Display bot message
addMessage("Plot generated.", "botMsg");
// Display plot
if(data.success){
document.getElementById("plotImg").src = "data:image/png;base64," + data.plot;
}
// Display code
document.getElementById("consoleOutput").textContent = data.code;
} catch (err) {
chatContainer.removeChild(loadingMsg);
addMessage("Error generating plot: " + err.message, "botMsg");
}
}
// Handle mobile keyboard resize
window.addEventListener('resize', () => {
chatContainer.scrollTop = chatContainer.scrollHeight;
});
// Enter key triggers send
document.getElementById("userQuery").addEventListener("keypress", function(e) {
if (e.key === "Enter") sendMessage();
});
</script>
</body>
</html>
|