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">
|
2024-10-06 22:40:12 +00:00
|
|
|
<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);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2024-10-06 22:40:12 +00:00
|
|
|
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();
|
2024-10-06 22:40:12 +00:00
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error triggering click:', error);
|
2024-10-06 21:53:14 +00:00
|
|
|
});
|
2024-10-06 22:40:12 +00:00
|
|
|
}
|
|
|
|
|
|
2024-10-09 18:44:03 +00:00
|
|
|
function updateChat() {
|
|
|
|
|
fetch("/messages")
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(messages => {
|
|
|
|
|
const historyDiv = document.getElementById('chat-history');
|
|
|
|
|
historyDiv.innerHTML = "";
|
|
|
|
|
const definitionList = document.createElement('dl')
|
|
|
|
|
historyDiv.append(definitionList);
|
|
|
|
|
messages.forEach(message => {
|
|
|
|
|
const dt = document.createElement('dt');
|
|
|
|
|
dt.textContent = message.role;
|
|
|
|
|
const dd = document.createElement('dd');
|
2024-10-09 19:10:30 +00:00
|
|
|
const pre = document.createElement('pre');
|
|
|
|
|
pre.textContent = message.content[0].text || message.content[1].text;
|
2024-10-09 18:44:03 +00:00
|
|
|
definitionList.append(dt);
|
|
|
|
|
definitionList.append(dd);
|
2024-10-09 19:10:30 +00:00
|
|
|
dd.append(pre);
|
2024-10-09 18:44:03 +00:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function refresh() {
|
|
|
|
|
takeScreenshot();
|
|
|
|
|
updateChat();
|
|
|
|
|
setTimeout(refresh, 500);
|
|
|
|
|
}
|
|
|
|
|
|
2024-10-06 22:40:12 +00:00
|
|
|
function init() {
|
|
|
|
|
const clickableImage = document.getElementById('screenshot');
|
|
|
|
|
clickableImage.addEventListener('click', handleClick);
|
2024-10-09 18:44:03 +00:00
|
|
|
refresh();
|
2024-10-06 22:40:12 +00:00
|
|
|
}
|
2024-10-06 21:53:14 +00:00
|
|
|
</script>
|
2024-10-06 22:40:12 +00:00
|
|
|
</head>
|
|
|
|
|
<body onload="init()">
|
|
|
|
|
<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
|
|
|
|
2024-10-06 22:40:12 +00:00
|
|
|
<div class="message" id="click-message"></div>
|
2024-10-09 18:44:03 +00:00
|
|
|
<div id="chat-history"> </div>
|
2024-10-06 21:53:14 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
