Explore the process of creating an interactive AI chatbot interface using HTML, CSS, and JavaScript, including practical insights into integrating Flask for asynchronous content updates. Discover how to structure your chat interface effectively for seamless user interaction without unnecessary page refreshes.
Key Insights
- Learn to structure a chatbot interface using HTML, incorporating essential elements like input fields prompting "Ask a question" and a button labeled "Send" to clearly communicate to users how to interact with the AI.
- Understand the advantage of using JavaScript instead of traditional form submissions to maintain an asynchronous experience, preventing constant page refreshes and allowing dynamic content updates through Flask server integration.
- Gain access to ready-to-use CSS code, ensuring the chatbot interface has a polished visual design with thoughtful touches, such as adjacent input and button elements styled using border radius for improved user experience.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
This is a lesson preview only. For the full lesson, purchase the course here.
Add a role for the header. We already have that. I'm not going to take that out.
We have CSS. All the CSS is done. Okay.
That's outside the scope. We'll do a little bit of the HTML, you know, just to roll up our sleeves and get our hands dirty with this a little bit, but we're not also doing the CSS from scratch and then explaining what it all does. It's a much.
It's a little bit much. Inside the chat container div, add a div of class chat input. So, under the H3, add a class, add a div of class chat input.
Inside the chat input div, add input and button elements with the input prompting the user to ask a question and the button instructing the user to send their message to the AI in a chatbot. So, we're going to come into our H3 here or our H2. Chat assistant is an H2.
Yeah. We're going to. Okay.
So, class is chat input. Let's make sure we have the CSS for that. Um, yeah.
I mean, we don't need it because there's only one input, but let's make it more explicit. Chat input. We'll just change the CSS here to chat input as opposed to input because that way we can have a class for the input.
We'll say div. Oh, it's a div. Whoa.
Sorry. Yikes. Keep the input.
Chat input, chat window, chat input. Wow. Um, chat container.
You know what? Here's what. I don't think we actually need. I mean, the div is not really doing much, but I don't even have a class for it.
So, we'll put this anyway and if we need to make the class, we will. But right now, there's no class for that. Inside the chat input div, add input and button elements with the input prompting the user to ask a question and the button instructing the user to send their message to submit, yeah, to send their message to the AI chatbot.
Input type is text. Actually, type search would be better. Nah, type text.
Search, you could just hit ENTER, but we want to hit the button. Input type. If you do type search, then you could just hit the button.
You could just hit ENTER to submit your message, but having the button's kind of nice. It's a little more. It's an extra.
It's an extra click, but it looks cool and it's clear to the user what to do. Whereas, if you just have this text box, they might not get it. Search.
They probably will, but excuse me. Search text and then placeholder. Ask a question.
Below the chat input div, add a div. Okay, and then the button. The button won't even have a class because there's only the one button.
So, we style it by the tag. Just like the input. It doesn't need a class.
We style it by the tag. Input. No, excuse me.
Button. Send. All right, so we've got a little chat input, and if you're wondering, are we going to make a form? Are we going to wrap that in a form? And we're not, because we're going to have JavaScript.
Let me think about that. A form might be a little easier. We're okay for now.
The chat. Nah, you know what? No form, because if you do a form, it refreshes the page. We want that Ajax feel of asynchronous content coming in to the chatbot.
We don't want to refresh the page every time we get a chat message, right? Blinking. So, we don't use a form. We're just going to use JavaScript to send the request.
Send the input text. You know, the user's question. To the server script, the Flask file, which is going to take that and incorporate it into that create message that is sent to the AI where you have your role and your content.
The content from the user point of view is going to be whatever the user typed here. So, we're going to be sending from this page to the server as opposed to just the server sending to here, right?
When render template happens, the server is publishing that webpage, right? The HTML page from Flask. But in this case, we have to send from the HTML page to the Flask, which will involve JavaScript because we don't want a form to refresh.
Also, a little outside the scope of the course, the JavaScript is definitely something that if you don't know JavaScript, you'll be like, what's this? But I'll explain as best I can.
And then when the Flask server page gets that input content that we send, it's going to use that to send that request we've been doing and handle the response and send the response back by rendering the page with… It's actually not going to even have to render the page, just send back the answer to the JavaScript so that we don't want to render the page either out of the Flask because we never want the page to refresh in this process, right?
You don't want to do a chat where every time you or the AI sends a message, the page is refreshing, the page is refreshing. We want it all single page SAP, single page application, right? Nothing AJAX, right? Just asynchronous.
Fresh content coming onto the page without the page refreshing, name of the game. Below the chat input diff, which closes here, add a div of class chat window. This is where the chat messages will appear.
Chat interface is taking shape. Let's see if it's taking shape. There you go.
There's our input and there's our button and our header is not quite wide enough. The width, header width 1125, right? There you go. Look at the Bonnie.
Baby Bonnie. Okay. We can make it wider, right? It's okay to have the thing above being wider than a container, like the header, kind of like a T-shape.
That is common, but that's a little much. Let's go back. Keep it about the same.
Ask a question and send and notice how the button is flush up against the input with rounding on the outside. That's a nice little move. Involves border radius.
We'll add the CSS here too, in case anyone really needs it. Doesn't have it, they could always come here and grab it. Ah, okay.
Open recent CSS. I exported it as text or to plain text. File HTML and CSS.
Give it a new name, maybe. HTML and CSS. Let's take those breaks out.
Adjust the code. Okay. Goes and goes.
That's how it goes. All right. Goes and goes and goes.
I'm going to adjust a green leaf, et cetera, et cetera. Ship, et cetera. Top selling, et cetera, et cetera.
Keep it in one page. That's the idea here. Yep.
Good enough. Whoa. A little too much.
You want it all on this page. There we go. And the CSS.
Nope. We have it here. Is it 100 lines? Yeah.
It's important to have. I mean, if you don't have this, it's going to be an issue. If you only have the PDF book and you don't have the file, you can at least copy paste that.
So that's my rationale. I'm going to make it smaller, though. You don't really want to read it.
You just want to have it there. Make this smaller, too. Make it smaller still.
These we're going to make smaller. Nine. And final CSS code for Lesson 5. Greenleaf. CSS. And I think we can go page break on that and get it to two pages.
Wrapping. There you go. Okay.
That's reasonable. Page 50. All right.
We'll leave it right there. Page works. There's no flask or anything for this.
Just the setting up of the HTML and CSS as we get into doing the chat. So in the next lesson, we're going to take that chat loop that we had running in the terminal and we're going to apply it to this index page with the chat box where the user types messages and it sends to the AI, OpenAI API, gets the response, adds it to the chat window, and keeps it going. All right.
I hope you're enjoying the course. Thank you for watching. Catch you in the next lesson.