If you get an API error then please read this. If you’re getting the source code from the description link, you can skip this, as the file is already updated. This chatbot project initially uses the OpenAI API to generate responses. However, OpenAI no longer offers free API keys; the minimum cost to get started is $5. If you're willing to pay for the OpenAI API, follow the video steps as they are and ensure you purchase the API key during setup. Your chatbot should work without any issues. For those who prefer not to pay, you can use Google's free Gemini API. Follow these steps to update your script.js file: 1. 22:48 In line 6, paste your API key, which you can get for free from aistudio.google.com/app/apikey 2. 21:24 In line 18, update the API URL to: const API_URL = `generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${API_KEY}` 3. 21:46 In line 20, update the requestOptions object to: const requestOptions = { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contents: [{ role: "user", parts: [{ text: userMessage }] }] }), }; 4. 25:24 In line 36, update: messageElement.textContent = data.candidates[0].content.parts[0].text; // Update message text with API response This will allow your chatbot to function without API errors using the free Google Gemini API.
Create AI Image Generator Website in HTML CSS and JavaScript: czcams.com/video/fA_tWwPMapM/video.html Create your own ChatGPT in HTML CSS and JavaScript: czcams.com/video/atKtG29iroY/video.html
Awesome, I can't believe it, never though I would do something like this even though I'm just calling an API, it's still very cool. Great work bro, the amount of projects in this channel is just insane! this cannel is really underrated, nice video.
THIS IS THE MOSSTTT UNDERRATEDDD CZcamsE VIDEOO I HAVE EVERRR SEEEEEEEN IN MY ENTIRE LIFFEEEEE!!!!!!!!!!!!!!! THANKK YOUUUUUUU!!!!!!!!!! SOOOOOOOOO MUCHCHHHHHHCHCHCHCHC!H!!! Incrediblyyy Helpful!!!
Sir, I have gone through your source code. But the chatbot was only replying with one message "oops ! something went wrong". I have placed my own API key in it..even then it is showing only the same thing. What to do to make the chatbot work.
Okay so I found out something apparently we need to add out payment details for it to work I abandoned this method and instead created the chatbot with rule based chatbot
Bro, when I made this Chatbot, I coded it perfectly with no errors, but after using my API Key , I m getting the error 'Too many requests , you have completed your current quota', Please tell what should I do
it was brilliant but GPT doesn't be supported in my country so if you can recommend something else or do another video with another technique I will appreciate it
Great tutorial 👍. Because I am new to this topic two questions: 1) How can I embed the bot in my Wordpress site? 2) I am using most of the time a local LLM (LM Studio) for testing. I changed the api-url, the api-key and the model name, but it didn't work (error messages field is required). Any hints for me?
Watch this video: czcams.com/video/atKtG29iroY/video.html Here I've shown how to save chat history to the browser's local storage and retrieve it from there.
@@CodingNepal hi legend, you know the openai assistants where you create threads and runs and it will connect to a vector database. but its all good, i used your code and converted it into an assistant. if you want the code then let me know. thanks
It's bad practices to include API key in Javascript. Anyone who views the bot could view your secret key, & run your API account thru the roof astronomically.
I've completed this project now anyone tell me how to solve API issue cuz I cant find it on stack-overflow if there is error 429 (too many requests ) and it is expired how will I solve this
@@ANUJAGUPTA-jx5ri the only solution was to make a new id and generate API key, we can't use free API if we are already using openapi for a long time.... They offer free APIs to new users only (for some time )you should make new id and then generate your API key that will work .... May be there's another solution but I haven't found any yet
sir make a tutorial about " About us page generator, contact us page generator, terms and conditions page generator, disclaimer page generator and also privacy policy page generator. please please please please.
i tried doing it but when i used a new OpenAI API Key, it always says "Oops! We are having trouble generating the response at this time". i've tried everything but it still doesn't work. what do i do?
it's great and thanks but I have followed all your steps in the video and whenever I try to chat there is an error and the console says "You didn't provide an API key. You need to provide your API key in an Authorization header" Although I have put the API as you did in the video
4th comment pin pls and can you make a sidebar that can randomize any photo and set it and is fixed on top and also save in localstorage. And also shows his name and age. For example:
Save Edit // Get elements const nameInput = document.getElementById('name'); const roleInput = document.getElementById('role'); const imageInput = document.getElementById('image'); const saveButton = document.getElementById('save-button'); const editButton = document.getElementById('edit-button'); // Check if data exists in local storage if (localStorage.getItem('userData')) { // Retrieve and populate data from local storage const userData = JSON.parse(localStorage.getItem('userData')); nameInput.value = userData.name; roleInput.value = userData.role; imageInput.disabled = true; saveButton.disabled = true; } else { editButton.disabled = true; } // Save data to local storage saveButton.addEventListener('click', function() { const userData = { name: nameInput.value, role: roleInput.value }; localStorage.setItem('userData', JSON.stringify(userData)); nameInput.disabled = true; roleInput.disabled = true; imageInput.disabled = true; saveButton.disabled = true; editButton.disabled = false; }); // Enable editing editButton.addEventListener('click', function() { nameInput.disabled = false; roleInput.disabled = false; imageInput.disabled = false; saveButton.disabled = false; editButton.disabled = true; }); In sidebar. The photo is fixed at top and in the place of role there are radi🥺 os.tje 🥺 format 🥺 can 🥺 look 🥺 like 🥺 this 🙏: (Image 🙏) (Name 🙏) (Image 🙏) (age 🙏)•(role 🙏) Please 🥺 it's 🥺 my 🙏 request 🥺🥺🥺🥺🥺🥺🙏🙏🙏🙏🙏🙏🥺🥺🙏🥺🥺
@@KaptanSingh-oy1bp As far as I know, putting the API key into the evn variable (.evn), then putting the .evn file into the .gitignore file solves the API leak problem. But I get an error when I import the .evn variable into the .js file
Bro one small doubt.you implement the package how to modify example "hi to reply message how can i help you"... Please tell me bro... Waiting for you bro....
Brother, may you please make a video on how to continue from here to hide our API key? Because, we cannot host this chatbot as the API key is hardcoded into our key, so may you please make a video on how do we evade this problem?
It seems OpenAI no longer provides free credits for API usage. The minimum cost to get started is now $5. Once the payment is made, the chatbot should work as expected.
If you get an API error then please read this. If you’re getting the source code from the description link, you can skip this, as the file is already updated.
This chatbot project initially uses the OpenAI API to generate responses. However, OpenAI no longer offers free API keys; the minimum cost to get started is $5.
If you're willing to pay for the OpenAI API, follow the video steps as they are and ensure you purchase the API key during setup. Your chatbot should work without any issues.
For those who prefer not to pay, you can use Google's free Gemini API. Follow these steps to update your script.js file:
1. 22:48 In line 6, paste your API key, which you can get for free from aistudio.google.com/app/apikey
2. 21:24 In line 18, update the API URL to:
const API_URL = `generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${API_KEY}`
3. 21:46 In line 20, update the requestOptions object to:
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
contents: [{
role: "user",
parts: [{ text: userMessage }]
}]
}),
};
4. 25:24 In line 36, update:
messageElement.textContent = data.candidates[0].content.parts[0].text; // Update message text with API response
This will allow your chatbot to function without API errors using the free Google Gemini API.
Create AI Image Generator Website in HTML CSS and JavaScript: czcams.com/video/fA_tWwPMapM/video.html
Create your own ChatGPT in HTML CSS and JavaScript: czcams.com/video/atKtG29iroY/video.html
Can you share source code
an error occurred even though I entered the API_keys correctly
is there any solution for that?
how would you modify this to work as a livechat instead of a chat bot
@@longathelstan source code.
class Assistant {
constructor(apiKey, assistantId) {
this.apiKey = apiKey;
this.assistantId = assistantId;
this.init();
}
async init() {
this.chatbotToggler = document.querySelector(".chatbot-toggler");
this.closeBtn = document.querySelector(".close-btn");
this.chatbox = document.querySelector(".chatbox");
this.chatInput = document.querySelector(".chat-input textarea");
this.sendChatBtn = document.querySelector(".chat-input span");
this.inputInitHeight = this.chatInput.scrollHeight;
this.bindEvents();
}
bindEvents() {
this.chatInput.addEventListener("input", this.adjustInputHeight.bind(this));
this.chatInput.addEventListener("keydown", this.handleEnterKey.bind(this));
this.sendChatBtn.addEventListener("click", this.handleChat.bind(this));
this.closeBtn.addEventListener("click", this.closeChatbot.bind(this));
this.chatbotToggler.addEventListener("click", this.toggleChatbot.bind(this));
}
adjustInputHeight() {
this.chatInput.style.height = `${this.inputInitHeight}px`;
this.chatInput.style.height = `${this.chatInput.scrollHeight}px`;
}
handleEnterKey(e) {
if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
e.preventDefault();
this.handleChat();
}
}
closeChatbot() {
document.body.classList.remove("show-chatbot");
}
toggleChatbot() {
document.body.classList.toggle("show-chatbot");
}
createChatLi(message, className, id) {
const chatLi = document.createElement("li");
chatLi.classList.add("chat", `${className}`);
if (id) {
chatLi.id = id;
}
chatLi.innerHTML = `${message}`;
return chatLi;
}
async createThread() {
try {
const response = await fetch("api.openai.com/v1/threads", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
});
if (!response.ok) {
const errorData = await response.json();
console.error("Error creating thread:", errorData);
throw new Error(`Failed to create thread: ${JSON.stringify(errorData)}`);
}
this.thread = await response.json();
console.log("Thread Created:", this.thread);
} catch (error) {
console.error("Error in createThread method:", error);
throw error;
}
}
async generateResponse(chatElement, messageId) {
const messageElement = chatElement.querySelector("p");
try {
await this.createThread();
const messageResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/messages`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
body: JSON.stringify({
role: "user",
content: this.userMessage,
}),
});
if (!messageResponse.ok) {
const errorData = await messageResponse.json();
console.error("Error creating message:", errorData);
throw new Error(`Failed to create message: ${JSON.stringify(errorData)}`);
}
const runResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/runs`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
body: JSON.stringify({
assistant_id: this.assistantId,
model: "gpt-4-turbo"
}),
});
if (!runResponse.ok) {
const errorData = await runResponse.json();
console.error("Error creating run:", errorData);
throw new Error(`Failed to create run: ${JSON.stringify(errorData)}`);
}
const run = await runResponse.json();
console.log("Run Created:", run);
await this.checkStatusAndPrintMessages(this.thread.id, run.id, messageElement, messageId);
} catch (error) {
console.error("Error fetching response:", error);
messageElement.classList.add("error");
messageElement.textContent = "Oops! Something went wrong. Please try again.";
} finally {
this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
this.userMessage = null; // Reset the user message
}
}
async checkStatusAndPrintMessages(threadId, runId, messageElement, messageId) {
const delay = ms => new Promise(res => setTimeout(res, ms));
while (true) {
const runStatusResponse = await fetch(`api.openai.com/v1/threads/${threadId}/runs/${runId}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
});
if (!runStatusResponse.ok) {
const errorData = await runStatusResponse.json();
console.error("Error retrieving run status:", errorData);
throw new Error(`Failed to retrieve run status: ${JSON.stringify(errorData)}`);
}
const runStatus = await runStatusResponse.json();
console.log("Run Status:", runStatus);
if (runStatus.status === "completed") {
const messagesResponse = await fetch(`api.openai.com/v1/threads/${threadId}/messages`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
});
if (!messagesResponse.ok) {
const errorData = await messagesResponse.json();
console.error("Error retrieving messages:", errorData);
throw new Error(`Failed to retrieve messages: ${JSON.stringify(errorData)}`);
}
const messages = await messagesResponse.json();
console.log("Messages Retrieved:", messages);
const assistantMessages = messages.data.filter(msg => msg.role === "assistant");
if (assistantMessages.length > 0) {
const lastMessage = assistantMessages[assistantMessages.length - 1];
const content = lastMessage.content[0].text.value;
messageElement.textContent = content; // Update the "Checking..." message
}
break;
} else {
console.log("Run is not completed yet, retrying...");
await delay(3000); // Wait for 3 seconds before checking again
}
}
}
async handleChat() {
this.userMessage = this.chatInput.value.trim();
if (!this.userMessage) return;
this.chatInput.value = "";
this.chatInput.style.height = `${this.inputInitHeight}px`;
const messageId = `msg-${Date.now()}`;
this.chatbox.appendChild(this.createChatLi(this.userMessage, "outgoing", messageId));
this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
setTimeout(() => {
const incomingChatLi = this.createChatLi("", "incoming", messageId);
this.chatbox.appendChild(incomingChatLi);
this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
this.generateResponse(incomingChatLi, messageId);
}, 600);
}
}
// Initialize the assistant
const assistant = new Assistant(
"YOUR API-KEY HERE",
"YOUR ASSISTANT-ID HERE"
);
@@muhammadvitoni1802 Check your restrictions.
Awesome, I can't believe it, never though I would do something like this even though I'm just calling an API, it's still very cool. Great work bro, the amount of projects in this channel is just insane! this cannel is really underrated, nice video.
is the API is free ? and if it is free then for how long ?
THIS IS THE MOSSTTT UNDERRATEDDD CZcamsE VIDEOO I HAVE EVERRR SEEEEEEEN IN MY ENTIRE LIFFEEEEE!!!!!!!!!!!!!!!
THANKK YOUUUUUUU!!!!!!!!!! SOOOOOOOOO MUCHCHHHHHHCHCHCHCHC!H!!!
Incrediblyyy Helpful!!!
why is this channel so underrated 😭😭
Bcz he don't make it with voice
Communities*
Spanish (from spain) devs communities.
They choose whose to 'grow'
200k subscribers is not underrated bro
oyda azerbaycanli gormek sevindirdi 😄
@@MujHaci :D
I have been looking for this dude, Thank you so much!!
why mine didnt answer correctly and always got error message, but in console after I inspect, everything is fine..????
You are the best, I send you a hug from Colombia. 🙌
Thank You So Much 🤗
Amazing Project For Me...
i learnt so many things from it.
MashAllah !
what a great video !
I can't wait to subscribe
thanks sir your this video was really helpful to me
Thank you for this video.
You are my savior.
Most awesome tutorial ever!
Can you make it using Nodejs , ExpressJs and React for realtime updates?
Sir, I have gone through your source code. But the chatbot was only replying with one message "oops ! something went wrong". I have placed my own API key in it..even then it is showing only the same thing. What to do to make the chatbot work.
same here I also added the api and it says script line 39
so fir hua ki nai
mera bhi same aa raha haii
Okay so I found out something apparently we need to add out payment details for it to work I abandoned this method and instead created the chatbot with rule based chatbot
@@XylomICP okay
Bro, when I made this Chatbot, I coded it perfectly with no errors, but after using my API Key , I m getting the error 'Too many requests , you have completed your current quota', Please tell what should I do
same, Have you got any solution?
maybe try generating API key with a new account which is not logged in to GPT
Awesome Tutorial 👍
it was brilliant but GPT doesn't be supported in my country so if you can recommend something else or do another video with another technique I will appreciate it
Whats is Your Country?
Bard in an option
@@realdrumfan Egypt
@@realdrumfan South Africa
Thank you very much. A wonderful explanation that helped me a lot.
is the API is free ? and if it is free then for how long ?
awesome video brother'❤❤, pls explain how to create an account and API key.
Thanks bro 😊😊😉, can you make a valid evaluation form that validates both login and registration?
Yes, sure
@@CodingNepal Thanks bro💙😊✋
Love from US
if you will explain with your voice, then it will give you more views and people will like your content
Great tutorial 👍. Because I am new to this topic two questions: 1) How can I embed the bot in my Wordpress site? 2) I am using most of the time a local LLM (LM Studio) for testing. I changed the api-url, the api-key and the model name, but it didn't work (error messages field is required). Any hints for me?
really good job
🎉 super awesome ❤️😎
thank you very much
Amazing i like this video
Thank you very much!
Bro listen, How to pass the API in deployment it is getting revoked, I'm not able to set up environment variables please help
Nice bro but how would you implement exporting and importing chat history?
Watch this video: czcams.com/video/atKtG29iroY/video.html Here I've shown how to save chat history to the browser's local storage and retrieve it from there.
@@CodingNepal as ur from nepal so pls speak if u speak ur viewership will increase
the best thank you
It's working
I get error in the Line starting with "fetch" in js, help
metoo
Did you solve it?
can we use Bard API_KEYS instead? open ai available in only 45 countries. pls make a video. and let me know if you see this comment.
great video worked for me thank you. and another thing can we use any free API if yes please suggest the name
Thank you
source code please
awesome.....
🔥🔥🔥
It will be beneficiary if you just include the font details on the description
Hi, love your coding. you are a legend. Can you perhaps create a chatbot with openai assistant ? Thanks
Glad to hear that! What do you mean by OpenAI assistant? OpenAI API or something else?
@@CodingNepal hi legend, you know the openai assistants where you create threads and runs and it will connect to a vector database. but its all good, i used your code and converted it into an assistant. if you want the code then let me know. thanks
@@zainslamdien8138 can you show ur project?
@@husnainshahid1932 Here is the code bro,
class Assistant {
constructor(apiKey, assistantId) {
this.apiKey = apiKey;
this.assistantId = assistantId;
this.init();
}
async init() {
this.chatbotToggler = document.querySelector(".chatbot-toggler");
this.closeBtn = document.querySelector(".close-btn");
this.chatbox = document.querySelector(".chatbox");
this.chatInput = document.querySelector(".chat-input textarea");
this.sendChatBtn = document.querySelector(".chat-input span");
this.inputInitHeight = this.chatInput.scrollHeight;
this.bindEvents();
}
bindEvents() {
this.chatInput.addEventListener("input", this.adjustInputHeight.bind(this));
this.chatInput.addEventListener("keydown", this.handleEnterKey.bind(this));
this.sendChatBtn.addEventListener("click", this.handleChat.bind(this));
this.closeBtn.addEventListener("click", this.closeChatbot.bind(this));
this.chatbotToggler.addEventListener("click", this.toggleChatbot.bind(this));
}
adjustInputHeight() {
this.chatInput.style.height = `${this.inputInitHeight}px`;
this.chatInput.style.height = `${this.chatInput.scrollHeight}px`;
}
handleEnterKey(e) {
if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
e.preventDefault();
this.handleChat();
}
}
closeChatbot() {
document.body.classList.remove("show-chatbot");
}
toggleChatbot() {
document.body.classList.toggle("show-chatbot");
}
createChatLi(message, className, id) {
const chatLi = document.createElement("li");
chatLi.classList.add("chat", `${className}`);
if (id) {
chatLi.id = id;
}
chatLi.innerHTML = `${message}`;
return chatLi;
}
async createThread() {
try {
const response = await fetch("api.openai.com/v1/threads", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
});
if (!response.ok) {
const errorData = await response.json();
console.error("Error creating thread:", errorData);
throw new Error(`Failed to create thread: ${JSON.stringify(errorData)}`);
}
this.thread = await response.json();
console.log("Thread Created:", this.thread);
} catch (error) {
console.error("Error in createThread method:", error);
throw error;
}
}
async generateResponse(chatElement, messageId) {
const messageElement = chatElement.querySelector("p");
try {
await this.createThread();
const messageResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/messages`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
body: JSON.stringify({
role: "user",
content: this.userMessage,
}),
});
if (!messageResponse.ok) {
const errorData = await messageResponse.json();
console.error("Error creating message:", errorData);
throw new Error(`Failed to create message: ${JSON.stringify(errorData)}`);
}
const runResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/runs`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
body: JSON.stringify({
assistant_id: this.assistantId,
model: "gpt-4-turbo"
}),
});
if (!runResponse.ok) {
const errorData = await runResponse.json();
console.error("Error creating run:", errorData);
throw new Error(`Failed to create run: ${JSON.stringify(errorData)}`);
}
const run = await runResponse.json();
console.log("Run Created:", run);
await this.checkStatusAndPrintMessages(this.thread.id, run.id, messageElement, messageId);
} catch (error) {
console.error("Error fetching response:", error);
messageElement.classList.add("error");
messageElement.textContent = "Oops! Something went wrong. Please try again.";
} finally {
this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
this.userMessage = null; // Reset the user message
}
}
async checkStatusAndPrintMessages(threadId, runId, messageElement, messageId) {
const delay = ms => new Promise(res => setTimeout(res, ms));
while (true) {
const runStatusResponse = await fetch(`api.openai.com/v1/threads/${threadId}/runs/${runId}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
});
if (!runStatusResponse.ok) {
const errorData = await runStatusResponse.json();
console.error("Error retrieving run status:", errorData);
throw new Error(`Failed to retrieve run status: ${JSON.stringify(errorData)}`);
}
const runStatus = await runStatusResponse.json();
console.log("Run Status:", runStatus);
if (runStatus.status === "completed") {
const messagesResponse = await fetch(`api.openai.com/v1/threads/${threadId}/messages`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${this.apiKey}`,
"OpenAI-Beta": "assistants=v2",
},
});
if (!messagesResponse.ok) {
const errorData = await messagesResponse.json();
console.error("Error retrieving messages:", errorData);
throw new Error(`Failed to retrieve messages: ${JSON.stringify(errorData)}`);
}
const messages = await messagesResponse.json();
console.log("Messages Retrieved:", messages);
const assistantMessages = messages.data.filter(msg => msg.role === "assistant");
if (assistantMessages.length > 0) {
const lastMessage = assistantMessages[assistantMessages.length - 1];
const content = lastMessage.content[0].text.value;
messageElement.textContent = content; // Update the "Checking..." message
}
break;
} else {
console.log("Run is not completed yet, retrying...");
await delay(3000); // Wait for 3 seconds before checking again
}
}
}
async handleChat() {
this.userMessage = this.chatInput.value.trim();
if (!this.userMessage) return;
this.chatInput.value = "";
this.chatInput.style.height = `${this.inputInitHeight}px`;
const messageId = `msg-${Date.now()}`;
this.chatbox.appendChild(this.createChatLi(this.userMessage, "outgoing", messageId));
this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
setTimeout(() => {
const incomingChatLi = this.createChatLi("", "incoming", messageId);
this.chatbox.appendChild(incomingChatLi);
this.chatbox.scrollTo(0, this.chatbox.scrollHeight);
this.generateResponse(incomingChatLi, messageId);
}, 600);
}
}
// Initialize the assistant
const assistant = new Assistant(
"YOUR API-KEY HERE",
"YOUR ASSISTANT-ID HERE"
);
It's bad practices to include API key in Javascript. Anyone who views the bot could view your secret key, & run your API account thru the roof astronomically.
i implement this, but cant run show me error...
@@mrravipandee+1
so what do we do instead?
I've completed this project now anyone tell me how to solve API issue cuz I cant find it on stack-overflow if there is error 429 (too many requests ) and it is expired how will I solve this
same , im getting that error, what did you do to resolve it?
@@ANUJAGUPTA-jx5ri the only solution was to make a new id and generate API key, we can't use free API if we are already using openapi for a long time.... They offer free APIs to new users only (for some time )you should make new id and then generate your API key that will work .... May be there's another solution but I haven't found any yet
Same error is coming to me also!
Did you get the solution of it ?
Same, anyone have a solution?
I believe u have to spend 5 dollars for the API to work
Nice🙂
Your content is awesome but can you please start explaining the code instead of using music 🎵 🎶 . It's a request ☺️
I'm able to get it worked in my asp support chat project. i'm just gonna figure out how to save to the convo in the DB.
sir make a tutorial about " About us page generator, contact us page generator, terms and conditions page generator, disclaimer page generator and also privacy policy page generator. please please please please.
Is this chatbot can be integrated to database for fetching data like customer orders
nice
guys im getting authorization error code 401 errors, i put in the api key in the authorization bearer im also signed in open ai how do i fix this
awesome project
Glad you like it!
What is the content of material-symbols-outlined?
Hi Great Please Show me How to Add Custom Data i mean Custom Response and Custom Answers PLZ PLZ
i tried doing it but when i used a new OpenAI API Key, it always says "Oops! We are having trouble generating the response at this time". i've tried everything but it still doesn't work. what do i do?
Please read the pinned comment for this.
it's great and thanks but I have followed all your steps in the video and whenever I try to chat there is an error and the console says "You didn't provide an API key. You need to provide your API key in an Authorization header" Although I have put the API as you did in the video
Same here bro. Pls reply if your issue is solved now.
4th comment pin pls and can you make a sidebar that can randomize any photo and set it and is fixed on top and also save in localstorage. And also shows his name and age.
For example:
Save
Edit
// Get elements
const nameInput = document.getElementById('name');
const roleInput = document.getElementById('role');
const imageInput = document.getElementById('image');
const saveButton = document.getElementById('save-button');
const editButton = document.getElementById('edit-button');
// Check if data exists in local storage
if (localStorage.getItem('userData')) {
// Retrieve and populate data from local storage
const userData = JSON.parse(localStorage.getItem('userData'));
nameInput.value = userData.name;
roleInput.value = userData.role;
imageInput.disabled = true;
saveButton.disabled = true;
} else {
editButton.disabled = true;
}
// Save data to local storage
saveButton.addEventListener('click', function() {
const userData = {
name: nameInput.value,
role: roleInput.value
};
localStorage.setItem('userData', JSON.stringify(userData));
nameInput.disabled = true;
roleInput.disabled = true;
imageInput.disabled = true;
saveButton.disabled = true;
editButton.disabled = false;
});
// Enable editing
editButton.addEventListener('click', function() {
nameInput.disabled = false;
roleInput.disabled = false;
imageInput.disabled = false;
saveButton.disabled = false;
editButton.disabled = true;
});
In sidebar. The photo is fixed at top and in the place of role there are radi🥺 os.tje 🥺 format 🥺 can 🥺 look 🥺 like 🥺 this 🙏:
(Image 🙏) (Name 🙏)
(Image 🙏) (age 🙏)•(role 🙏)
Please 🥺 it's 🥺 my 🙏 request 🥺🥺🥺🥺🥺🥺🙏🙏🙏🙏🙏🙏🥺🥺🙏🥺🥺
Nice bro but please in The future video please explain in detail so we will understand the code better instead of using background music
uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Bro do we need to work on back-end for this ?
Yes, for sure. To hide the API key.
dear bro.
I want to push the file to github, to deploy for friends to use,
but the file contains the api key.
so is there any way to deploy?
Bro, Are you solved this problem? Because i am facing same problem.
@@KaptanSingh-oy1bp
As far as I know, putting the API key into the evn variable (.evn), then putting the .evn file into the .gitignore file solves the API leak problem. But I get an error when I import the .evn variable into the .js file
Omg that’s what I’m finding on CZcams since last two months 😭
Please make youtube video downloader in php. i've done subscribed you with 3 account😉
How to make government rule Regulations chatbot
Can be created by. Website api key like government api key
can i copy and paste on editor pls
Bro one small doubt.you implement the package how to modify example "hi to reply message how can i help you"... Please tell me bro... Waiting for you bro....
hey mate!
is this chatbot free to use? even for commercial projects?
best regards,
mike :)
Hey Mike, this chatbot is free for any use.
Thanks!
Scientific calculator for engineering study make it bro
Brother, may you please make a video on how to continue from here to hide our API key?
Because, we cannot host this chatbot as the API key is hardcoded into our key, so may you please make a video on how do we evade this problem?
Do you use websocket?
can i use custom info for this chatbot?
api key is free or paid
Yeah Is it using Internet to answer questions
what is the import url in the css code can u send this ????
Launch json configuration error what to do
una pregunta, si quisiera usar este chatbot enlazado con una base de datos? si se podria? en vez de usar OpenAI?
Yes! You can configure the chatbot to request responses from your own database instead of OpenAI. You have the flexibility to customize it as needed.
@@CodingNepal y si quiero poner una imagen en el boton, y otra imagen en el icono en vez del robot se puede?
For the API usage, do you have to pay for it after using it once?
yes, you need to add some credits to your openai account
Can you guide me to use other free APIs
Please Resume Generator HTML CSS JavaScript & Create ReactJS Project.
Api key paste karne ke baad bhi error aa raha hai defeat wala, api key pasted correctly, plz help me what I do
its showing something went wrong please help
I want integrative with java servlet , bro can u help me ? 😢
Please Create like and comment functionality using ajax and php.
Hi sir Im used your chatbot my isnot workihng
Y I'm getting the something went wrong error.. I did checked tha code it's same and I created my own api key also .. can u please help ?
same message as me
bro how you add that hi image in html code i con t understand
That's a hello emoji 👋
Bhaiya ji from your description the source code is never downloaded🙁
Source code link: www.codingnepalweb.com/create-chatbot-html-css-javascript/
i need source code its not available in website bro?
Source code has bee uploaded. Link is in the video description.
how to embed on website
I make video from this channel with explanation in hindi
Send link
How Solve the problem Too Many Request
Nowadays Nepal is getting smarter and challenging other developer...
make it on using socket
Sir how you learnt Javascript plz telll me !!!!!!
anything will help !!!!
javascript part was literally hard for me..
I got the 429 to many request error while trying to get response from server.. How to resolve it.. Pls tell me as soon as possible
It seems OpenAI no longer provides free credits for API usage. The minimum cost to get started is now $5. Once the payment is made, the chatbot should work as expected.
i love you tank yoiu
is anyone successfully run the provided code? i'm getting the same error after creating the new account for api!! what can i do please suggest me..
Please read the pinned comment for the solution.
"If I may ask, what algorithm does this chatbot use?"
Wow❤
can it give any answers like chatgpt or other AI's???
Yes, it uses OpenAI API to generate response so it give answer like ChatGPT.
🙂🙂👏