Build AI Advanced ChatBot Using HTML , CSS & JS ?

Introduction

In today's tutorial, we'll create an advanced AI chatbot using HTML, CSS, and JavaScript. This chatbot enhances the features seen in previous versions by adding a sleek user interface and the capability to process images as input. Let’s dive in and explore the full functionality through a demonstration before we begin coding.

Demo Overview

The chatbot starts with a default greeting: “Hello! How can I help you today?” Upon greeting, users can type their messages or upload images. The chatbot is designed to recognize mathematical equations within images and respond with their solutions. If you upload an image with a quadratic equation, for example, it will analyze the visual data and provide the correct roots.

Moreover, the chatbot can interpret various images, such as an illustration of a dragon, and will describe what it is. The enhanced scrolling capability means that conversations will flow smoothly, displaying both user and AI responses without requiring manual scrolling.

Project Setup

To create this project, follow these steps:

Create Project Folder: Start by creating a folder named 12_dat_ai_chat_bot.
Create Files: Within this folder, create three files: index.html, style.css, and script.js.

HTML Structure

In the index.html file, set up the basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat Bot</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="chat-container">
        <div id="chat-area">
            (* Chat messages will be displayed here *)
        </div>
        <div class="prompt-area">
            <input type="text" id="prompt" placeholder="Type your message here...">
            <button id="image-button">?️</button>
            <button id="submit-button">Send</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Style

In style.css, define styles for the chatbot interface, including layout properties, colors, and hover effects.

* (
    margin: 0;
    padding: 0;
    box-sizing: border-box;
)
body (
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
)
.chat-container (
    width: 400px;
    height: 600px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
)
#chat-area (
    flex: 1;
    padding: 20px;
    overflow-y: auto;
)
.prompt-area (
    display: flex;
    padding: 10px;
)
#prompt (
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
)
button (
    margin-left: 10px;
    padding: 10px;
    border-radius: 50%;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
)
button:hover (
    background-color: #0056b3;
)

JavaScript Functionality

In script.js, implement the logic that will handle user input, generate AI responses, and manage the chatbot’s interface.

document.getElementById('submit-button').addEventListener('click', function() (
    const userMessage = document.getElementById('prompt').value;
    if (userMessage) {
        addChatMessage('user', userMessage);
        generateResponse(userMessage);
        document.getElementById('prompt').value = '';
    )
});

document.getElementById('image-button').addEventListener('click', function() (
    document.getElementById('image-input').click();
));

// Function to add messages to the chat
function addChatMessage(sender, message) (
    const chatArea = document.getElementById('chat-area');
    const messageDiv = document.createElement('div');
    messageDiv.classList.add(sender === 'user' ? 'user-message' : 'ai-message');
    messageDiv.innerText = message;
    chatArea.appendChild(messageDiv);
)

// Generates a response and updates the chat
function generateResponse(message) (
    // Here you would integrate the API to get responses
    const aiResponse = "This is a simulated AI response."; // For example purposes
    setTimeout(() => {
        addChatMessage('ai', aiResponse);
        chatArea.scrollTop = chatArea.scrollHeight; // Auto scroll to bottom
    ), 600);
}

Conclusion

In this tutorial, we walked through the creation of an advanced AI chatbot, detailing the HTML layout, CSS styles for an engaging interface, and JavaScript functionalities that handle user input, integrate responses, and manage settings such as scrolling behavior and image processing.

Make sure to try out the project by forking it on your repository and running it locally! If you enjoyed this article, be sure to subscribe for more exciting tutorials!

Keyword

AI chatbot, HTML, CSS, JavaScript, image processing, user interface, input handling, web development, mini project.

FAQ

What technologies are used to build the AI chatbot?
The AI chatbot is built using HTML for structure, CSS for styling, and JavaScript for functionality.

How does the AI chatbot process images?
The chatbot recognizes images as input to calculate mathematical expressions or respond to questions about the image.

Is it possible to customize the chatbot further?
Yes, you can extend its features by integrating different APIs or designing unique UI components.

Will the chatbot work on mobile devices?
The design is responsive, making it accessible on various screen sizes, including mobile devices.

Can I add more features to this chatbot?
Absolutely! You can enhance the chatbot’s capabilities by adding more JavaScript logic or integrating advanced AI APIs.

Build AI Advanced ChatBot Using HTML , CSS & JS ? | #12 Mini Project