Create Your Own ChatGPT in HTML CSS and JavaScript | ChatGPT Clone HTML CSS and JavaScript
HTML-код
- Опубликовано: 20 май 2024
- In this video tutorial, I demonstrate how to create your own ChatGPT using HTML, CSS, and JavaScript. This ChatGPT clone project allows you to ask questions and receive instant responses. Additionally, you have the option to switch between dark and light themes.
Your chat history is saved in the browser's local storage, ensuring it remains even if you refresh the page. However, you can easily delete chats by clicking on the dedicated "Delete Chat" button.
Download Images only of this ChatGPT Clone Project
codingnepalweb.com/custom-pro...
Hire me on Fiverr
www.fiverr.com/prakashahi
Follow me on Instagram
/ coding.np
Visit my website for helpful coding projects with source code
www.codingnepalweb.com
Timestamps:
0:00 Demo of ChatGPT Clone
4:00 HTML & CSS Start
4:15 Creating Static Chats
8:45 Creating Typing Dots Animation
11:18 Creating Bottom Typing Box
20:10 JavaScript Start
21:05 Working on Outgoing Chat
24:49 Working on Typing Dots Animation
26:24 Working on Generating API Response
33:58 Working on Copy Response Button
36:37 Saving Chats to Local Storage
38:46 Working on Dark/Light Theme
42:55 Working on Delete Chats Button
#javascript #html #css #javascriptprojects #js #chatgpt #chatgpt_clone
Music Credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...
Those Restless Nights - Artificial.Music
• Those Restless Nights ...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
Deep Sea by Vendredi / vendrediduo
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library : • Deep Sea - Vendredi (N...
Remember that when you sign up for OpenAI, you'll get a free $5 credit for your API usage. If your account is older than 3 months or the credit runs out, you'll need a paid account or create a new one with a new number to keep using the API. Your API usage and expiration date can be found on the account's usage page.
pls give soure code
After the update it, looks like there is no free trial ?
Pretty awesome work. thanks
great work🎉🎉
sir your videos are really great
Awesome Project 👍. Please Resume Generator HTML CSS JavaScript
Good work 👍👍
Best Ever ❤
Such an amazing project
thank you so much. it's awesome
it shows error after providing Correct api also
Amazing content, HONESTLY THIS IS THE BEST CODING CHANNEL ON RUclips!!! Keep it up. Love the stuffs you guys do.
Honestly it would be cool if there was a way to actually recommend you the next video.
Every video you make is already my favourite but still. a way to recommend would be cool
+
@@scapesteam bruh bot
avesome bro . From Sri Lanka 👍
Thanks a million
Great work
It makes better if you have streamed response
@mullycraft3Djv
its giving an error after generating an API key ... what to do?
HOW CAN NEPAL DO THIS!!!
TALENTED
you're really a creative man
Thanks a million
Awesome 👍👍 keep it up
Thanks a million
that sick 🔥
Thanks a million
Awesome Coding nepal.😀😀😘😘
Thanks a million
amazing video , cant find the link for the google fonts
That is a unsure way to put the API key no? If the application is hosted would it not be accessible through the browser?
Please make a video on, train running status website using rapid API keys..
Anybody asked chatgpt "How to create a ChatGPT clone in HTML, CSS, and JavaScript " ? 😜
I asked but it doesn't replied accuratly
Na chatbot d werey go dey give me
it seems most of us are facing the problem "Failed to load resource: the server responded with a status of 404 ()
TypeError: Cannot read properties of undefined (reading '0')" while generating API response. Will you please solve it?
From where can we download this code?
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.
API is note working??? Why??
Can you show me the new chat button configuration in javascript?
Bro, How to fix - Oops! Something went wrong while retrieving the response. Please try again.
How??????????????????
What is this error
Cannot read properties of undefined (reading '0')
Great video! Keep it up! 😉🔥
Thanks a million
Brother, I have a question that AI also created a website and clones. As I am learning Html, CSS. But I am also worried if AI creating everything just saying how my website should look like just typing the instructions without writing any code. So how i should see this. Please give me your views or make an video about this if possible. Because if everything is happening without writing a code. How we can add more value by learning HTML and CSS.
can i change the model to gpt-3.5-turbo?
hi can you share in there with your source code because i cant open with zip
Very nice❤
Thanks a million
Hey i m getting an error in retrieving response using api url
like your creativity sir...really challenging me alot..keep up another like from me
Thanks a million
How do you create copy, delete, theme
and send buttons in one line?
Damn🤯.... What a project 👏
Thanks a million
👍
Awesome!!!!!
Thanks a million
how to upload documents through the prompt
why it is generating random answers such i typed hii and as reponse i got a cpp code
Where to host it
Can you make room gpt please❤🙏
can you show how a assistant from openai is connected?
dude please give the links to your source code
35:00 new way for copy text to clipboard is work enyware ?
It's not working for me, because API key set but it's post error come from API url
Good bro, Ai video editing website creation it bro.
If we deployed this website on github or any other server API Key gets disabled due to api key exposion ..
So how to use api key without exposing it in js?
You can use Node.js to send secure API requests from the backend, as it's not possible to securely hide API keys using plain JavaScript.
make this video using next js,typescript & tailwind css usin redux.Thank you🤗🤗😐😐😵💫😵💫
Please make a video on Anime Streaming website like 9anime using HTML, CSS and Javascript
sir there is any documentaion about this project
hey bro, how to make automatic ChatGPT API keys, and no need to enter before accessing the page?
The API key requirement before access the page is only for my demo project. If you follow the video, then you don't need to do that.
@@CodingNepal ill do it
How do get this https link
LUKO KING CLONE ❤❤❤
🥲🥲can you make a poject where free api is available ?? when I created API it didnt work because it is paid not free
After making the HTML and CSS I strated the JS part. When I fetched the API it is showing- API likit reached check billing.... I think API is no more free.
create another account with different phone number and emailID
bring some react tutorials bro, single page application with redux toolkit
he doesn't know react
Help us with source code please 🙏
why model ?
Can you provide source code for clarification
Brother,
Suddenly it stopped working.
Can't understand what is happening.
I have tried changing the api key. But it isn't working.
Any suggestions?
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
the console says "POST" has too many uses
All set but api is not working 😢
I thought javascript is easy but my mind you gona see somthing big😂 😮😮can you provide a javascript full free course
I will think about it.
Good code, can we get this code ?
its not working noww
Very Nice Video
Thanks a million
Please Create JavaScript Tutorial Playlist.
It's available on my channel.
Please Create JavaScript Tutorial Playlist step by step concepts clear.
not working!!
And i learn a function is trim(l for rimove white space , right
Yes, it is true that the trim() method in JavaScript removes any extra whitespace from both ends of a string.
const email = " abc@gmail.com ";
const trimmedEmail = email.trim();
console.log(trimmedEmail); // Output: "abc@gmail.com"
@@CodingNepalcan you provide a full javascript cous in free or you knlw some on provide the course free?
IT give me an error after prompting
Help solve the error 429 please
"error":
"message": "You exceeded your current quota, please check your plan and billing details.",
"type": "insufficient_quota",
"param": null,
"code": null
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
@@CodingNepal no
I created an API key today only.
But having the same error.
I guess credit card link is mandatory
It doesn't matter; when you've created an API key, if your account is older than 3 months, the API won't work until you pay. So, create a new account and API to use it for free for limited usage.
@@CodingNepal no I created my account yesterday only
hi i have a premium chatgpt why this respond Oops! Something went wrong while retrieving the response. Please try again.
ChatGPT and OpenAI API subscriptions are different.
source coe?
I followed this and got this error:
Oops! Something went wrong while retrieving the response. Please try again.
Any ideas why I am getting this?
It appears that there is an error within the code in the try block. This error could be due to an invalid API key, a typo, or something else. To identify the error, you can use console.log(error).
try {
// Your code goes here
} catch (error) {
console.log(error);
// Additional code or error handling can be added here
}
@@CodingNepal sir i also face same problem
is your problem solved
@@CodingNepal hello sir whenever i send a prompt in these application it is showing error about too many request error 429.Please can you help me in these.I checked my code multiple times and i followed all your api key generation steps but these error is no vanishing.
Oops! Something went wrong while retrieving the response. Please try again.
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
how to get the openAI API key, is it free?
Go to this url: platform.openai.com/account/api-keys, login and create an API key. It's free.
@@CodingNepal ok thanks
We are waiting for the sorce code for the ChatGPT, Please upload it soon..
Source code will be uploaded soon on my website - www.codingnepalweb.com
gmail inbox using php
We can't download the code to follow the project.
You don't need to download the code to follow this project. Simply watch the video tutorial. Complete source code will be available soon on my website codingnepalweb.com for download.
@@CodingNepal every programmer has its own website with his features😅😅😅
Hey I saw your chatgpt clone in my browser
When I would right click it would say you cannot view or copy source code then I pressed f12 and then I downloaded all source code haahahhaa. and another thing when I messaged chat gpt would say invalid api key.
🤓🤮🤮🤮🤮🤓😎😎😎😎😎
where i can get free api_key ??
I can't run it :/
Great Project sir. But can't download source code.
Source code will be uploaded soon on my website - www.codingnepalweb.com
@@CodingNepal Failed to load resource: the server responded with a status of 429 ()
Facing this problem sir after using API_KEY from chatgpt.
@@CodingNepal Failed to load resource: the server responded with a status of 429 ()
Facing this problem sir after using API_KEY from chatgpt
please solve the problem
@@CodingNepal create short video for solve problem
iska soource code milega kya ?
Source code will be uploaded soon on my website - www.codingnepalweb.com
to load resource: the server responded with a status of 429 () . why give this error
please give source code
Source code will be uploaded soon on my website - www.codingnepalweb.com
I got an error while getting answer from it
Can you please help
Awesome Bro Can U provide the code
Get source code from here: www.codingnepalweb.com/create-chatgpt-clone-html-css-javascript/
@@CodingNepal
this is an error after entering the API_keys what should I do
Is this API paid...?
Source code CHATGPT clone plzzz
Source code will be uploaded soon on my website - www.codingnepalweb.com
How to fix - Oops! Something went wrong while retrieving the response. Please try again.
The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.
@@CodingNepal ok sir
@@CodingNepal yes sir, it's work thank you
@@CodingNepal Mine I made a few weeks ago but the source code provided still doesnt work
😱😱🤯🫵🏻👍🏻
Thanks a million
I need help how i can contact you?