![]() Human: Who was the first person to walk on the moon? This can lead to disjointed and confusing conversations like this: In fact, they have no memory of their past conversations with you at all. One major challenge when working with OpenAI models is that they don't retain the queries or replies from previous interactions. But before you continue writing more code, let's take a moment to envision how this chatbot will work. Now that you have finished setting up the OpenAI API dependency, you can proceed to its usage. Remember you can click the gear icon (⚙️) to download all of the code in one zipped folder. (Please note, the API key in the code below is not real!) export const process = This will store your API key in a key/value pair, where the key is OPENAI_API_KEY and the value is the API key itself. Inside env.js set up a const process which will hold an object with a single property env. In your project folder, create a new file called env.js to hold your API key. Ok, with that warning out of the way, let’s move forward. If you’d like to deploy this project so you can share it and include it in your portfolio, in the third section of the full YouTube/ Scrimba course I show how you can use Netlify Serverless Functions to keep the API key safely hidden when deploying. That means you should only run this project locally. When you run this app in a browser, your API key will be visible in dev tools, under the network tab. ⚠️ Remember – your API key is vulnerable in this front-end only project. How to Store the API KeyĪs the OpenAI API is central to this project, you need to store the OpenAI API key in the app. But do take a moment to either go through it or watch the walkthrough before moving on. I want to draw your attention to lines 22-24 of index.html which contain a hard-coded speech bubble from the chatbot to get the conversation started: Īs you can see from the screenshot near the top of this article, each conversation starts with the chatbot asking How can I help you? Note the two CSS classes speech and speech-ai, which style the speech bubble.Īpart from that, there’s nothing particularly unusual going on with this HTML and CSS and we won’t be referring to it much in this tutorial. ![]() You can unzip that folder and open it in VS Code or whichever dev environment you favour.Ĭlick here for a full-screen version of this scrim. You will get a zipped folder with all of the HTML, CSS and the image assets. Watch a walkthrough explanation of the HTML and CSS and pause anytime to play with the code.Īnd if you want to run this code locally, you can click the gear icon (⚙️) bottom right and select Download as zip.Click on PREVIEW to see the project in a mini browser.Browse the HTML and CSS used in this project.Below, I’ve embedded a Scrim, which is an interactive code editor/screencast. OK, let’s get down to some code! The HTML and CSS for the Appīefore we dive into the JavaScript and AI components, we need to establish the HTML and CSS foundations of this app. But don’t worry if you haven’t got access to it yet, the GPT-3.5-turbo model is fully compatible with everything we do in this tutorial, and it is available to all now.Īnd if you don’t know what an OpenAI model is, don’t worry, we will be talking more about them in just a moment. At time of writing, there is a waiting list for GPT-4 (you can join it here). As you go through the sign-up process, be sure to copy and paste your API key somewhere safe, as you will need it soon. The complimentary credits you get on signing up should be more than enough to complete this tutorial. You’ll also need a free OpenAI account, which you can get here. ![]() A basic understanding of JavaScript is enough – you don’t need to be super advanced. In this tutorial you will be using HTML, CSS and vanilla JavaScript. You can ask it questions, have it create content, correct language, suggest edits, or translate. Meet KnowItAll, a ChatBot with extraordinary conversational powers. ![]() The App We’re Building Screenshot of the app you'll build In this tutorial, I will teach you everything you need to know to build your own chatbot using the GPT-4 API.įor a deeper dive into the OpenAI API, I have created a 4.5 hour course, "Build AI Apps with ChatGPT, DALL-E, and GPT-4", which you can find on FreeCodeCamp’s YouTube Channel and Scrimba. Thanks to the OpenAI API, crafting intelligent, context-aware chatbots is now well within the reach of any budding web developer. Chatbots are transforming the way we interact online.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |