Get API Results Not Working

Code Help HTML/CSS/JS
1

Question:
I am trying to get a result like a ChatGPT/Ghostwriter but it isn’t working.
Repl link:
https://replit.com/@python660/SalladShooterGPT#chatbot.html

<!DOCTYPE html>
<html>
<head>
  <title>SalladShooterGPT</title>
  <style>
    html {
      font-family: Arial;
      background-color: #26283b;
    }

    .input {
      margin-bottom: 2em;
    }
    
    #chatbox {
      background-color: white;
      height: 300px;
      width: 400px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 10px;
    }

    h1,h2,h3 {
      color: white;
      text-align: center;
    }

    h1 {
      font-size: 4em;
      margin-bottom: 0;
      border: 2px solid white;
      text-align: center;
      padding: 0.25em;
      border-radius: 10px;
    }

    h2 {
      font-size: 3em;
      margin-bottom: 0;
    }

    h3 {
      font-size: 2em;
      margin-bottom: 1em;
    }

    .submit {
      font-weight: bold;
      color: white;
      border-radius: 0.5em;
      background-color: green;
      padding: 0.5em;
      border-color: transparent;
      box-shadow: 0px 2px 2px 0px #26283b;
    }

    .container {
      margin: auto;
      width: 50%;
    }

    p {
      border: 1px solid #26283b;
      border-radius: 10px;
      padding: 0.5em;
      box-shadow: 0px 2px 2px 0px #26283b;
    }

    .sender {
      background-color: #26283b;
      border-right: 1px solid #26283b;
      display: inline-block;
      color: white;
      padding: 0.5em ;
      margin-left: -0.5em;
      border-bottom-left-radius: 9px;
      border-top-left-radius: 9px;
      margin-top: -0.65em;
      margin-bottom: -0.65em;
      margin-right: 0.55em;
    }

    .bot {
      background-color: green;
      border-right: 1px solid #26283b;
      display: inline-block;
      color: white;
      padding: 0.5em ;
      margin-left: -0.5em;
      border-bottom-left-radius: 9px;
      border-top-left-radius: 9px;
      margin-top: -0.65em;
      margin-bottom: -0.65em;
      margin-right: 0.55em;
    }
  </style>
</head>
<body onload="onLoad()">
  <link rel="stylesheet" href="https://badge.coolcodersj.repl.co/style.css">
<a class="badge" href="https://repl.it/@SalladShooter" target="_blank">
<img src="/DONT-DELETE/Logo.png" alt="SalladShooter" />SalladShooter</a>
  <h1>SalladShooterGPT</h2>
  <h2 id="hello">Hello, </h2>
  <h3>Welcome Back!</h3>
  <div class="container">
  <div id="chatbox"></div>
  <input class="input" type="text" id="userInput">
  <button class="submit" onclick="handleUserInput(event)">➤ Send</button>
  </div>
  <script>
    const apiUrl = 'https://ml610-replit-v2-codeinstruct-3b-ggml.hf.space/';

    const username = localStorage.getItem("chatbotUsername");

    function onLoad() {
      const username = localStorage.getItem("chatbotUsername");
    document.getElementById("hello").innerHTML = "Hello, " + username + "!";
    }

    async function handleUserInput(event) {
        const userInput = document.getElementById("userInput");
        const userMessage = userInput.value;
        userInput.value = "";
        appendMessage(userMessage, username);
        await generateResponse(userMessage);
    }

    async function generateResponse(userMessage) {
      try {
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            message: result
          })
        });

        if (!response.ok) {
          throw new Error('Failed to fetch response from the API');
        }

        const data = await response.json();
        const chatbotResponse = data.message;

        appendMessage(chatbotResponse, "SalladShooterGPT");
      } catch (error) {
        console.error(error);
        appendMessage("Sorry, an error occurred.", "SalladShooterGPT");
      }
    }

    function appendMessage(message, sender) {
      const chatbox = document.getElementById("chatbox");
      const messageElement = document.createElement("p");
      if (sender == "SalladShooterGPT") {
      messageElement.innerHTML = `<div class="bot"><strong>${sender}:</strong></div>${message}`;
      } else {
        messageElement.innerHTML = `<div class="sender"><strong>${sender}:</strong></div>${message}`;
      }
      chatbox.appendChild(messageElement);
      chatbox.scrollTop = chatbox.scrollHeight;
    }
  </script>
</body>
</html>
2

Try to change “result” to “userMessage” in your generateResponse(userMessage) function.

async function generateResponse(userMessage) {
  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        message: userMessage  // change "result" to "userMessage"
      })
    });

    if (!response.ok) {
      throw new Error('Failed to fetch response from the API');
    }

    const data = await response.json();
    const chatbotResponse = data.message;

    appendMessage(chatbotResponse, "SalladShooterGPT");
  } catch (error) {
    console.error(error);
    appendMessage("Sorry, an error occurred.", "SalladShooterGPT");
  }
}
1 Like
3

@WindLother it still throws this error, SalladShooterGPT: Sorry, an error occurred.

4

Well now you just need to find more about the error.

Change the line console.error(error); to console.error("Error:", error); to see the actual error message in the browser’s console log. This can give you more information about what went wrong.

5

@WindLother it gives this error,

Error: Error: Error {}https://salladshootergpt--python660.repl.co/__replco/static/devtools/devtools.js:74
6

That still don’t give us much…

Change this:

catch (error) {
        console.error(error);
        appendMessage("Sorry, an error occurred.", "SalladShooterGPT");
      }

To this instead:

catch (error) {
    console.error('Error details:', error.message);
    appendMessage("Sorry, an error occurred.", "SalladShooterGPT");
}
7

@WindLother I then get this,

ReferenceError: Can't find variable: handleUserInputhttps://salladshootergpt--python660.repl.co/chatbot.html:1
8

I tried fixing the errors but I can’t. Is there a problem with this AI? https://ml610-replit-v2-codeinstruct-3b-ggml.hf.space/
python660 asked to use this AI.

9

Why are you using that one? Why not use OpenAI’s GPT or even Cohere.ai?

10

@boston2029 it was requested by the client, so I did what they asked to do.

1 Like