Closed MarcRychen closed 9 months ago
@joshlevent can you have a look please?
Not sure exactly what could be causing this, the only issue I see is with the line break at the end. Not sure whether that will be consistently interpreted as desired. Try replacing it with an html line break tag instead: <br>
Like this:
const chatInput = document.getElementById('chat_input');
const chatOutput = document.getElementById('chat_output');
const chatSubmit = document.getElementById('chat_submit');
chatSubmit.addEventListener('click', async () => {
const userMessage = chatInput.value;
chatInput.value = '';
appendMessage("User: " + userMessage);
const data = {
inputs: {
past_user_inputs: [""],
generated_responses: [""],
text: userMessage
}
};
try {
const response = await fetch('https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill', {
method: 'POST',
headers: {
'Authorization': 'Bearer _MYTOKEN_',
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (response.ok) {
const responseData = await response.json();
const botResponse = responseData['generated_text'];
appendMessage("Bot: " + botResponse);
} else {
chatOutput.innerHTML = 'Error: Unable to get a response from the API';
}
} catch (error) {
chatOutput.innerHTML = 'An error occurred while sending the request';
console.error(error);
}
});
function appendMessage(message) {
chatOutput.innerHTML += message + '<br>';
}
I deleted the first two variables since you were not using them.
Here is my code for comparison:
document.getElementById('chat_submit').addEventListener('click', async function () {
const token = _MYTOKEN_;
const endpoint = 'https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill';
const chatInput = document.getElementById('chat_input').value;
const chatOutputElement = document.getElementById('chat_output');
// Display user message immediately
chatOutputElement.innerHTML += '<p>User: ' + chatInput + '</p>';
document.getElementById('chat_input').value = ''; // Clear input
const data = {
inputs: {
past_user_inputs: [""],
generated_responses: [""],
text: chatInput
}
};
try {
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(`API request failed with status ${response.status}`);
}
const responseData = await response.json();
const chatBotResponse = responseData.generated_text;
// Display bot response with "Bot:" prefix
chatOutputElement.innerHTML += '<p>Bot: ' + chatBotResponse + '</p>';
} catch (error) {
console.error('Error:', error);
}
});
These two lines would still need to be changed to have a proper back and forth with the AI (otherwise it will not remember your, or it’s own previous messages).
past_user_inputs: [""],
generated_responses: ["”],
Hi Sid,
I designed and set up the AI chat accoding to joshes vids. For the HTML code to connect with huggingface I inserted the code below generated from ChatGPT3.5.
Issue 1: When testing the chat via bubble prototype, it immediately sends the message or a blank message directly to the chat, it does not wait until i hit the send button. It reacts when clicking anywhere onto the page and because the submited field is empty a error message appears (image 1) Issue 2: I managed to send a message with text and I got a regular reply from Chat (image 2), when i then want to continue and send another text message, it deletes the history (image 3).
Simulator imaging
![Simulator Screenshot - iPhone 14 Plus - 2023-10-16 at 09 42 15](https://github.com/sid027/dt1-23/assets/144588609/07f32129-664e-4af4-824e-7a203e648588)
HTML CODE