wehub-resource-sync
105 lines
3.2 KiB
HTML
105 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Gemini Live API Test</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Gemini Live API Test</h1>
|
|
<div
|
|
id="messages"
|
|
style="height: 300px; overflow-y: auto; border: 1px solid black"></div>
|
|
<br />
|
|
|
|
<form id="messageForm">
|
|
<label for="message">Message:</label>
|
|
<input type="text" id="message" name="message" />
|
|
<button type="submit" id="sendButton" disabled>Send</button>
|
|
</form>
|
|
</body>
|
|
|
|
<script>
|
|
// Connect the server with a WebSocket connection
|
|
const ws_url = "wss://" + window.location.host + "/live";
|
|
let ws = new WebSocket(ws_url);
|
|
|
|
// Get DOM elements
|
|
const messageForm = document.getElementById("messageForm");
|
|
const messageInput = document.getElementById("message");
|
|
const messagesDiv = document.getElementById("messages");
|
|
let currentMessageId = null;
|
|
|
|
// WebSocket handlers
|
|
function addWebSocketHandlers(ws) {
|
|
ws.onopen = function () {
|
|
console.log("WebSocket connection opened.");
|
|
document.getElementById("sendButton").disabled = false;
|
|
document.getElementById("messages").textContent = "Connection opened";
|
|
addSubmitHandler(this);
|
|
};
|
|
|
|
ws.onmessage = function (event) {
|
|
// Parse the incoming message
|
|
const packet = JSON.parse(event.data);
|
|
console.log(packet);
|
|
|
|
// Check if the turn is complete
|
|
// if turn complete, add new message
|
|
if (packet.turn_complete && packet.turn_complete == true) {
|
|
currentMessageId = null;
|
|
return;
|
|
}
|
|
|
|
// add a new message for a new turn
|
|
if (currentMessageId == null) {
|
|
currentMessageId = Math.random().toString(36).substring(7);
|
|
const message = document.createElement("p");
|
|
message.id = currentMessageId;
|
|
// Append the message element to the messagesDiv
|
|
messagesDiv.appendChild(message);
|
|
}
|
|
|
|
// Add message text to the existing message element
|
|
const message = document.getElementById(currentMessageId);
|
|
message.textContent += packet.text;
|
|
|
|
// Scroll down to the bottom of the messagesDiv
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
};
|
|
|
|
// When the connection is closed, try reconnecting
|
|
ws.onclose = function () {
|
|
console.log("WebSocket connection closed.");
|
|
document.getElementById("sendButton").disabled = true;
|
|
document.getElementById("messages").textContent = "Connection closed";
|
|
setTimeout(function () {
|
|
console.log("Reconnecting...");
|
|
ws = new WebSocket(ws_url);
|
|
addWebSocketHandlers(ws);
|
|
}, 5000);
|
|
};
|
|
|
|
ws.onerror = function (e) {
|
|
console.log("WebSocket error: ", e);
|
|
};
|
|
}
|
|
addWebSocketHandlers(ws);
|
|
|
|
// Add submit handler to the form
|
|
function addSubmitHandler(ws) {
|
|
messageForm.onsubmit = function (e) {
|
|
e.preventDefault();
|
|
const message = messageInput.value;
|
|
if (message) {
|
|
const p = document.createElement("p");
|
|
p.textContent = "> " + message;
|
|
messagesDiv.appendChild(p);
|
|
ws.send(message);
|
|
messageInput.value = "";
|
|
}
|
|
return false;
|
|
};
|
|
}
|
|
</script>
|
|
</html>
|