| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>GeoGebra AI Research Interface</title> |
| <script src="https://www.geogebra.org/apps/deployggb.js"></script> |
| <style> |
| body { font-family: 'Inter', sans-serif; background: #f0f2f5; display: flex; height: 100vh; margin: 0; } |
| #sidebar { width: 400px; background: white; border-right: 1px solid #ddd; padding: 20px; display: flex; flex-direction: column; box-shadow: 2px 0 5px rgba(0,0,0,0.05); } |
| #main { flex-grow: 1; position: relative; } |
| textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; resize: none; margin-bottom: 10px; box-sizing: border-box; } |
| button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-bottom: 10px; } |
| button:disabled { background: #ccc; } |
| #output { flex-grow: 1; overflow-y: auto; font-size: 14px; color: #444; border-top: 1px solid #eee; pt: 15px; } |
| .label { font-weight: bold; color: #111; margin-top: 15px; display: block; } |
| .code-block { font-family: monospace; background: #f8f9fa; padding: 8px; border-radius: 4px; border: 1px solid #e9ecef; margin-top: 5px; } |
| </style> |
| </head> |
| <body> |
|
|
| <div id="sidebar"> |
| <h2>3D AI Assistant</h2> |
| <textarea id="userInput" placeholder="e.g., Create a sphere with radius 3. Cut it with a plane at z=1."></textarea> |
| <button id="sendBtn" onclick="runAI()">Run on RTX 4060 Ti</button> |
| <button style="background: #6c757d;" onclick="clearCanvas()">Clear Canvas</button> |
|
|
| <div id="output"> |
| <span class="label">Model Reasoning:</span> |
| <div id="thoughtDisplay">Waiting for input...</div> |
| |
| <span class="label">Generated Commands:</span> |
| <div id="commandDisplay" class="code-block">None</div> |
| </div> |
| </div> |
|
|
| <div id="main"> |
| <div id="ggb-element" style="width: 100%; height: 100%;"></div> |
| </div> |
|
|
| <script> |
| const params = { |
| "appName": "classic", |
| "width": window.innerWidth - 400, |
| "height": window.innerHeight, |
| "showAlgebraInput": true, |
| "perspective": "5" |
| }; |
| const applet = new GGBApplet(params, true); |
| window.onload = function() { applet.inject('ggb-element'); }; |
| |
| function clearCanvas() { |
| ggbApplet.newConstruction(); |
| ggbApplet.setPerspective("5"); |
| document.getElementById('commandDisplay').innerText = "None"; |
| document.getElementById('thoughtDisplay').innerText = "Canvas cleared."; |
| } |
| |
| async function runAI() { |
| const query = document.getElementById('userInput').value; |
| const btn = document.getElementById('sendBtn'); |
| if (!query) return; |
| |
| btn.disabled = true; |
| btn.innerText = "Processing..."; |
| |
| try { |
| const response = await fetch('http://127.0.0.1:8000/ask', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ prompt: query }) |
| }); |
| |
| const data = await response.json(); |
| |
| document.getElementById('thoughtDisplay').innerText = data.thought; |
| document.getElementById('commandDisplay').innerText = data.commands || "No commands detected."; |
| |
| if (data.commands) { |
| const cmdArray = data.commands.split(';'); |
| cmdArray.forEach(cmd => { |
| if (cmd.trim()) ggbApplet.evalCommand(cmd.trim()); |
| }); |
| } |
| } catch (error) { |
| console.error(error); |
| alert("Backend error. Check server.py logs."); |
| } finally { |
| btn.disabled = false; |
| btn.innerText = "Run on RTX 4060 Ti"; |
| } |
| } |
| </script> |
| </body> |
| </html> |
