I'm trying to use Axios with OpenAi to get a sarcastic chatbot to work, I have managed to get the bot to respond to my messages however the responses don't make any sense.
Below is the code I currently have, previous to this code I have attempted to put the prompts in my axios call using postman however that was still not successful. Is there a way for me to get the bot to work with just javascript, axios and HTML? I'm trying to use marv the sarcastic chat bot
This is for an educational project I've been tasked to do and have been limited to these technologies, and I'm pretty new at them so any advice would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../styles/main.css" />
<script src="../scripts/script.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap"
rel="stylesheet"
/>
<script src="https://xxxxx.xxxxxxxxxx.xxx/ajax/libs/axios/x.xx.x/axios.min.js"></script>
<title>Mr Sarcasm</title>
</head>
<body>
<video autoplay muted loop class="Chatbox__video">
<source src="../assets/newBackgroundVid.mp4" type="video/mp4" />
</video>
<section class="navbar">
<navbar class="navbar__container">
<div class="navbar__wrapper">
<div class="navbar__left">
<div class="navbar__date">
<p class="navbar__date-text">21/09/2022</p>
</div>
</div>
<div class="navbar__center">Mr Sarcasm</div>
<div class="navbar__right">
<div class="navbar__switch">
<div class="navbar__toggle"></div>
</div>
</div>
</div>
</navbar>
</section>
<section class="chatbox">
<div class="chatbox__wrapper">
<div class="chatbox__container">
<div class="chatbox__left"></div>
<div class="chatbox__right"></div>
<div class="chatbox__left"></div>
</div>
<div class="chatbox__form">
<form action="" class="chatbox__form" id="form">
<textarea
class="chatbox__input"
name="message"
placeholder="Type your message here ..."
type="submit"
value="submit"
enterkeyhint="send"
></textarea>
<button class="chatbox__submit" name="submit" type="submit">
Send
</button>
</form>
</div>
</div>
</section>
</body>
</html>
// form handling
let startingStr = `Marv is a chatbot that reluctantly answers questions with sarcastic responses:\n\nYou: How many pounds are in a kilogram?\nMarv: This again? There are 2.2 pounds in a kilogram. Please make a note of this.\nYou: What does HTML stand for?\nMarv: Was Google too busy? Hypertext Markup Language. The T is for try to ask better questions in the future.\nYou: When did the first airplane fly?\nMarv: On December 17, 1903, Wilbur and Orville Wright made the first flights. I wish they’d come and take me away.\nYou: What is the meaning of life?\nMarv: I’m not sure. I’ll ask my friend Google.\nYou: What time is it?\nMarv:`;
const handleForm = (event) => {
event.preventDefault();
// chatBox.innerHTML = "";
const formData = {
message: event.target.message.value,
};
createNewComment(event.target.message.value);
startingStr = startingStr + " \nYou:" + event.target.message.value;
axios
.post(
`https://api.openai.com/v1/engines/text-davinci-002/completions?prompt=:\n\nYou:${startingStr}`,
{},
{
headers: {
Authorization:
"Bearer sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
},
}
)
.then((response) => {
// createNewComment(response.data.choices[0].text);
console.log(response);
createNewResponse(response.data.choices[0].text);
});
};
// create comment div
const createNewComment = (message) => {
const messageInput = document.createElement("div");
messageInput.classList.add("chatbox__right");
const chatBox = document.querySelector(".chatbox__container");
const msg = document.createElement("p");
msg.classList.add("chatbox__right-msg");
msg.innerText = message;
messageInput.appendChild(msg);
chatBox.appendChild(messageInput);
};
// create response
const createNewResponse = (response) => {
const ResponseOutput = document.createElement("div");
ResponseOutput.classList.add("chatbox__left");
const chatBox = document.querySelector(".chatbox__container");
const res = document.createElement("p");
res.classList.add("chatbox__left-msg");
res.innerText = response;
ResponseOutput.appendChild(res);
chatBox.appendChild(ResponseOutput);
};
// handle the submit
const registerSubmitHandler = (e) => {
const form = document.getElementById("form");
form.addEventListener("submit", handleForm);
};
registerSubmitHandler();
target.submit.value = "";