1
0
into-the-llm/interface/index.html

71 lines
2.2 KiB
HTML
Raw Normal View History

2024-10-06 21:53:14 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Into The Breach as a Service</title>
2024-10-06 21:53:14 +00:00
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#screenshot {
margin-top: 20px;
cursor: pointer;
}
.message {
margin-top: 20px;
color: green;
}
</style>
<script>
function takeScreenshot() {
fetch('/screenshot')
.then(response => response.blob())
.then(imageBlob => {
const imageUrl = URL.createObjectURL(imageBlob);
const screenshotImage = document.getElementById('screenshot');
screenshotImage.src = imageUrl;
screenshotImage.style.display = 'block';
})
.catch(error => {
console.error('Error taking screenshot:', error);
});
}
function handleClick(event) {
2024-10-06 21:53:14 +00:00
const x = event.pageX - this.offsetLeft;
const y = event.pageY - this.offsetTop;
fetch(`/click/${x}/${y}`)
.then(response => response.text())
.then(message => {
document.getElementById('click-message').innerText = message;
})
.then(() => {
takeScreenshot();
})
.catch(error => {
console.error('Error triggering click:', error);
2024-10-06 21:53:14 +00:00
});
}
function init() {
const clickableImage = document.getElementById('screenshot');
clickableImage.addEventListener('click', handleClick);
takeScreenshot();
}
2024-10-06 21:53:14 +00:00
</script>
</head>
<body onload="init()">
<button onclick="takeScreenshot()">Refresh Screenshot</button>
<div id="screenshot-div">
<p><strong>Click on the Image to Trigger Click at X, Y:</strong></p>
<img id="screenshot" width='1280px' height='720px' style="display:none;" />
</div>
2024-10-06 21:53:14 +00:00
<div class="message" id="click-message"></div>
2024-10-06 21:53:14 +00:00
</body>
</html>