| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Walking AI Web App</title> |
| <style> |
| #environment { |
| width: 200px; |
| height: 200px; |
| border: 1px solid black; |
| margin-bottom: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Walking AI Web App</h1> |
| <div id="environment"></div> |
| <button id="startButton">Start</button> |
| <button id="stopButton">Stop</button> |
| <script> |
| |
| let environmentInterval; |
| let outputInterval; |
| |
| |
| function updateEnvironmentDisplay() { |
| const environmentDiv = document.getElementById("environment"); |
| environmentDiv.innerText = "Environment Display"; |
| } |
| |
| |
| function updateOutputDisplay() { |
| const outputDiv = document.getElementById("output"); |
| outputDiv.innerText = "AI Output Display"; |
| } |
| |
| |
| document.getElementById("startButton").addEventListener("click", startAI); |
| document.getElementById("stopButton").addEventListener("click", stopAI); |
| |
| |
| function startAI() { |
| console.log("AI started"); |
| environmentInterval = setInterval(updateEnvironmentDisplay, 1000); |
| outputInterval = setInterval(updateOutputDisplay, 500); |
| } |
| |
| |
| function stopAI() { |
| console.log("AI stopped"); |
| clearInterval(environmentInterval); |
| clearInterval(outputInterval); |
| } |
| </script> |
| </body> |
| </html> |
|
|
