index.html•3.09 kB
<!doctype html>
<html>
<head>
<title>Computer Use Demo</title>
<meta name="permissions-policy" content="fullscreen=*"/>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
display: flex;
height: 100vh;
width: 100vw;
}
.left {
flex: 1;
border: none;
height: 100vh;
}
.right {
flex: 2;
border: none;
height: 100vh;
}
</style>
<script>
function hideLoadingMessage() {
document.getElementById('loading-message').style.display = 'none';
const iframe = document.getElementById('my-iframe');
const loadingMessage = document.getElementById('loading-message');
loadingMessage.style.display = 'none';
iframe.style.display = 'block';
}
function showErrorMessage() {
document.getElementById('loading-message').textContent = 'Error: URL not accessible.';
}
// Optional: Timeout for handling cases where iframe hangs
setTimeout(() => {
const iframe = document.getElementById('my-iframe');
if (!iframe.contentDocument || iframe.contentDocument.readyState !== 'complete') {
showErrorMessage();
}
}, 5000); // 5-second timeout
</script>
</head>
<body>
<div class="container">
<p id="loading-message">Loading... Please wait.</p>
<iframe
id="my-iframe"
src="http://localhost:7860"
class="left"
allow="fullscreen"
onload="hideLoadingMessage()"
onerror="showErrorMessage()"
></iframe>
<iframe
id="vnc"
src="http://127.0.0.1:6080/vnc.html?&resize=scale&autoconnect=1&view_only=1&reconnect=1&reconnect_delay=2000"
class="right"
allow="fullscreen"
></iframe>
<button
id="toggleViewOnly"
style="position: absolute; top: 10px; right: 10px; z-index: 1000"
>
Toggle Screen Control (Off)
</button>
<script>
document
.getElementById("toggleViewOnly")
.addEventListener("click", function () {
var vncIframe = document.getElementById("vnc");
var button = document.getElementById("toggleViewOnly");
var currentSrc = vncIframe.src;
if (currentSrc.includes("view_only=1")) {
vncIframe.src = currentSrc.replace(
"view_only=1",
"view_only=0",
);
button.innerText = "Toggle Screen Control (On)";
} else {
vncIframe.src = currentSrc.replace(
"view_only=0",
"view_only=1",
);
button.innerText = "Toggle Screen Control (Off)";
}
});
</script>
</div>
</body>
</html>