165 lines
5.6 KiB
HTML
165 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="/static/css/mvp.css">
|
|
|
|
<link rel="icon"
|
|
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦴</text></svg>">
|
|
<meta charset="utf-8">
|
|
<meta name="description" content="Huesoporro Twitch bot">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Huesoporro Chat</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li>Chatbot</li>
|
|
<li><a href="/tts">TTS</a></li>
|
|
</ul>
|
|
</nav>
|
|
<h1>Huesoporro🦴🍃</h1>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
|
|
<form>
|
|
<label for="channelName">Enter channel name:</label>
|
|
<input type="text" id="channelName" placeholder="#huesoperro">
|
|
|
|
<button id="startButton" type="button">Start chatbot</button>
|
|
|
|
<button id="stopButton" type="button" disabled style="background-color: #aa0000; border-color: #aa0000">Stop
|
|
chatbot
|
|
</button>
|
|
<br/>
|
|
</form>
|
|
|
|
|
|
</section>
|
|
|
|
<details open="open">
|
|
<summary>Log</summary>
|
|
<div><samp id="log"></samp></div>
|
|
</details>
|
|
</main>
|
|
<script>
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
class ChatbotManager {
|
|
constructor() {
|
|
this.url = this.getWebsocketProtocol() + window.location.host + "/ws";
|
|
this.logElement = document.getElementById('log');
|
|
this.socket = null;
|
|
}
|
|
|
|
log(message) {
|
|
console.log(message);
|
|
this.logElement.innerHTML += message + '<br>';
|
|
}
|
|
|
|
getWebsocketProtocol() {
|
|
// return "ws://" when is localhost or "wss://"
|
|
const hostname = window.location.hostname;
|
|
if (hostname === "localhost" || hostname === "127.0.0.1") {
|
|
return "ws://";
|
|
} else {
|
|
return "wss://";
|
|
}
|
|
}
|
|
|
|
async open() {
|
|
return new Promise((resolve, reject) => {
|
|
this.socket = new WebSocket(this.url);
|
|
this.socket.withCredentials = true;
|
|
this.socket.onopen = () => {
|
|
this.log("Connected to WebSocket");
|
|
}
|
|
this.socket.onmessage = async (event) => {
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
if (message.command === "chatbot_message") {
|
|
this.log(`[${message.data.username}]: ${message.data.message}`);
|
|
} else if (message.command === "chatbot_status") {
|
|
startButton.disabled = message.data.status === "ok";
|
|
stopButton.disabled = message.data.status === "ko";
|
|
this.log("Bot status is " + message.data.status)
|
|
} else if (message.command === "chatbot_start") {
|
|
this.log(message.data.log)
|
|
}
|
|
} catch (error) {
|
|
this.log(`Error parsing message: ${error.message}`);
|
|
}
|
|
}
|
|
this.socket.onerror = (error) => {
|
|
this.log(`WebSocket Error: ${error}`);
|
|
reject(error);
|
|
}
|
|
this.socket.onclose = () => {
|
|
this.log(`WebSocket connection closed: ${event.code} ${event.reason}`);
|
|
resolve();
|
|
}
|
|
});
|
|
}
|
|
|
|
async startBot() {
|
|
const channelNameInput = document.getElementById('channelName');
|
|
const channelName = channelNameInput ? channelNameInput.value : '';
|
|
|
|
const startCommand = {
|
|
command: "chatbot_start",
|
|
data: {
|
|
channel_name: channelName
|
|
}
|
|
};
|
|
|
|
this.socket.send(JSON.stringify(startCommand));
|
|
}
|
|
|
|
async stopBot() {
|
|
const stopCommand = {
|
|
command: "chatbot_stop",
|
|
data: {}
|
|
};
|
|
|
|
this.socket.send(JSON.stringify(stopCommand));
|
|
}
|
|
}
|
|
|
|
const chatbotManager = new ChatbotManager();
|
|
chatbotManager.open()
|
|
|
|
const startButton = document.getElementById('startButton');
|
|
const stopButton = document.getElementById('stopButton');
|
|
if (startButton) {
|
|
startButton.addEventListener('click', () => {
|
|
chatbotManager.startBot()
|
|
.then(() => {
|
|
console.log('Chatbot started successfully');
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to start chatbot', error);
|
|
});
|
|
});
|
|
}
|
|
|
|
if (stopButton) {
|
|
stopButton.addEventListener('click', () => {
|
|
chatbotManager.stopBot()
|
|
.then(() => {
|
|
console.log('Chatbot stopped successfully');
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to stop chatbot', error);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|