|
|
<!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> |
|
|
|
