try fix these errors that shows in “codepen.io” console.: ““chatbot response:” // [object Object]
{
“detail”: [
{
“loc”: [
“body”,
“data”
],
“msg”: “field required”,
“type”: “value_error.missing”
}
]" “Error: Invalid message data Error: Response not OK”: function initChat() {
const chatContainer = document.createElement(“div”);
chatContainer.setAttribute(“id”, “chat”);
document.body.appendChild(chatContainer);

const messageForm = document.createElement(“form”);
messageForm.addEventListener(“submit”, handleFormSubmit);
chatContainer.appendChild(messageForm);

const messageInput = document.createElement(“input”);
messageInput.setAttribute(“type”, “text”);
messageInput.setAttribute(“id”, “message-input”);
messageInput.setAttribute(“placeholder”, “Enter your message”);
messageForm.appendChild(messageInput);

const sendMessageButton = document.createElement(“button”);
sendMessageButton.setAttribute(“type”, “submit”);
sendMessageButton.textContent = “Send”;
messageForm.appendChild(sendMessageButton);
}

async function sendChatMessage(messageText) {
const body = JSON.stringify({
prompt: messageText
});

try {
const response = await fetch(“https://yuntian-deng-chatgpt.hf.space/run/predict”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body,
});

if (!response.ok) {
throw new Error(“Response not OK”);
}

const data = await response.json();

if (!data || !data.text) {
throw new Error(“Invalid response data”);
}

return data.text ? data.text.trim() : “”;
} catch (error) {
console.error(error);
return “”;
}
}

async function joinChat() {
const socket = new WebSocket(‘wss://yuntian-deng-chatgpt.hf.space/queue/join’);

socket.addEventListener(‘open’, function(event) {
console.log(‘WebSocket is connected.’);
});

socket.addEventListener(‘error’, function(event) {
console.error(event);
});

socket.addEventListener(‘message’, async function(event) {
try {
const messageData = JSON.parse(event.data);

if (!messageData || !messageData.text) {
throw new Error(“Invalid message data”);
}

const messageText = messageData.text.trim();
await addMessage(messageText, “bot”);
} catch (error) {
console.error(error);
}
});
}

async function addMessage(messageText, sender) {
const messageContainer = document.createElement(“div”);
messageContainer.classList.add(“message”);
messageContainer.classList.add(sender);

const messageContent = document.createElement(“div”);
messageContent.classList.add(“message-content”);

const messageTextEl = document.createElement(“p”);
messageTextEl.textContent = messageText;

messageContent.appendChild(messageTextEl);
messageContainer.appendChild(messageContent);
document.querySelector(“#chat”).appendChild(messageContainer);

document.querySelector(“#chat”).scrollTop = document.querySelector(“#chat”).scrollHeight;
}

async function handleFormSubmit(event) {
event.preventDefault();
const messageInput = document.querySelector(“#message-input”);
const messageText = messageInput.value.trim();

if (messageText !== “”) {
await addMessage(messageText, “user”);

const botResponse = await sendChatMessage(messageText);

if (botResponse !== “”) {
await addMessage(botResponse, “bot”);
}

messageInput.value = “”;
}
}

initChat();
joinChat();