Setting Up a Basic Chat Interface with FastAPI and HTML

Setting Up the Basic Chat Interface

Welcome to the first lesson of our course on developing a chatbot web application. In this lesson, we will focus on setting up a basic chat interface using FastAPI and HTML . This is an essential step in creating a user-friendly web application that enhances the user experience. A well-designed interface is crucial for engaging users and ensuring they can interact with the chatbot seamlessly.

HTML Rendering with FastAPI and Jinja2

FastAPI is primarily designed as an API framework, but it also provides excellent support for serving HTML content through template engines. Unlike traditional web frameworks that focus heavily on server-side rendering, FastAPI gives you the flexibility to choose how to handle HTML content. Jinja2 is a modern and designer-friendly templating language for Python, inspired by Django's template system. It's fast, widely used, and features a sandboxed execution environment, making it secure for rendering user-provided templates. Jinja2 allows you to: Insert dynamic Python variables into HTML Use control structures like loops and conditionals Extend and include templates for reusable components Apply filters to modify variables during rendering By combining FastAPI with Jinja2, we get the best of both worlds: FastAPI's performance and modern API capabilities alongside Jinja2's powerful templating system for HTML generation.

Creating the Templates Directory

To serve HTML templates with FastAPI, we first need to create a dedicated templates directory in our project. This directory will store all our HTML template files that will be rendered by the application. app/ │ ├── main.py ├── templates/ │ └── chat.html └── ... app/ │ ├── main.py ├── templates/ │ └── chat.html └── ... The templates directory is placed at the root level of our project, making it easily accessible from our main application file. This organization follows the conventional structure for web applications and keeps our template files separate from the application logic.

Setting Up Jinja2 Templates in FastAPI

Once we have our directory structure in place, we need to configure FastAPI to use Jinja2 for template rendering. This is done by importing and initializing the Jinja2Templates class in our main application file. Python from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.templating import Jinja2Templates from starlette.middleware.sessions import SessionMiddleware from controllers.chat_controller import ChatController # Initialize FastAPI app app = FastAPI() # Add session middleware app.add_middleware(SessionMiddleware, secret_key="your_secret_key_here") # Setup templates - points to the "templates" directory in our project templates = Jinja2Templates(directory="templates") # Create controller instance chat_controller = ChatController() from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.templating import Jinja2Templates from starlette.middleware.sessions import SessionMiddleware from controllers.chat_controller import ChatController # Initialize FastAPI app app = FastAPI() # Add session middleware app.add_middleware(SessionMiddleware, secret_key="your_secret_key_here") # Setup templates - points to the "templates" directory in our project templates = Jinja2Templates(directory="templates") # Create controller instance chat_controller = ChatController() The Jinja2Templates class is initialized with the path to our templates directory. This creates a template engine that FastAPI will use to render HTML files. The directory="templates" parameter tells the engine where to look for template files.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

app/
│
├── main.py
├── templates/
│   └── chat.html
└── ...

Python

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from starlette.middleware.sessions import SessionMiddleware
from controllers.chat_controller import ChatController

# Initialize FastAPI app
app = FastAPI()

# Add session middleware
app.add_middleware(
    SessionMiddleware,
    secret_key="your_secret_key_here"
)

# Setup templates - points to the "templates" directory in our project
templates = Jinja2Templates(directory="templates")

# Create controller instance
chat_controller = ChatController()

Python

@app.get("/", response_class=HTMLResponse)
async def index(request: Request):
    chat_controller.ensure_user_session(request.session)
    # Render the "chat.html" template and pass the request object to it
    return templates.TemplateResponse("chat.html", {"request": request})

@app.get("/", response_class=HTMLResponse)
async def index(request: Request):
    chat_controller.ensure_user_session(request.session)
    # Render the "chat.html" template and pass the request object to it
    return templates.TemplateResponse("chat.html", {"request": request})

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your message...">
            </div>
            <button onclick="sendMessage()">Send</button>
            <button id="new-chat-btn" onclick="startNewChat()">New Chat</button>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your message...">
            </div>
            <button onclick="sendMessage()">Send</button>
            <button id="new-chat-btn" onclick="startNewChat()">New Chat</button>
        </div>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Chat container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Chat container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

HTML

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

HTML

<script>
    function startNewChat() {
        // Clear the chat history
        messagesContainer.innerHTML = '';
    }

    // Start a chat automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewChat);
</script>

<script>
    function startNewChat() {
        // Clear the chat history
        messagesContainer.innerHTML = '';
    }

    // Start a chat automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewChat);
</script>

HTML

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');
        
        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;
        
        // Set the text content of the message
        messageDiv.textContent = content;
        
        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);
        
        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');
        
        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;
        
        // Set the text content of the message
        messageDiv.textContent = content;
        
        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);
        
        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

HTML

<script>
    function sendMessage() {
        // Retrieve and trim the input value
        const message = messageInput.value.trim();
        
        // If the message is empty, do not proceed
        if (!message) return;

        // Add user message to display
        appendMessage('user', message);

        // Clear the input field after sending the message
        messageInput.value = '';

        // For now, just echo the message back
        setTimeout(() => {
            appendMessage('assistant', `You said: ${message}`);
        }, 500);
    }
</script>

<script>
    function sendMessage() {
        // Retrieve and trim the input value
        const message = messageInput.value.trim();
        
        // If the message is empty, do not proceed
        if (!message) return;

        // Add user message to display
        appendMessage('user', message);

        // Clear the input field after sending the message
        messageInput.value = '';

        // For now, just echo the message back
        setTimeout(() => {
            appendMessage('assistant', `You said: ${message}`);
        }, 500);
    }
</script>

HTML

<script>
    // Handle Enter key
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the message when Enter key is pressed
            sendMessage();
        }
    });
</script>

<script>
    // Handle Enter key
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the message when Enter key is pressed
            sendMessage();
        }
    });
</script>

Python

@app.get("/", response_class=HTMLResponse)
async def index(request: Request):
    chat_controller.ensure_user_session(request.session)
    # Render the "chat.html" template and pass the request object to it
    return templates.TemplateResponse("chat.html", {"request": request})

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Customer Service Chat</title>
</head>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <div class="header">
        <h1>Welcome to Our Customer Service</h1>
        <p>How can we help you today?</p>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <div id="chat-container">
        <div id="messages"></div>
        <div class="input-container">
            <div class="input-wrapper">
                <input type="text" id="message-input" placeholder="Type your message...">
            </div>
            <button onclick="sendMessage()">Send</button>
            <button id="new-chat-btn" onclick="startNewChat()">New Chat</button>
        </div>
    </div>
</body>
</html>

HTML

<!DOCTYPE html>
<html>
<!-- Head section... -->
<body>
    <!-- Header section... -->
    <!-- Chat container and input elements... -->
    <script>
        // JavaScript functions will be defined here
    </script>
</body>
</html>

HTML

<script>
    // Get references to the messages container and message input field
    const messagesContainer = document.getElementById('messages');
    const messageInput = document.getElementById('message-input');
</script>

HTML

<script>
    function startNewChat() {
        // Clear the chat history
        messagesContainer.innerHTML = '';
    }

    // Start a chat automatically when the page loads
    document.addEventListener('DOMContentLoaded', startNewChat);
</script>

HTML

<script>
    function appendMessage(role, content) {
        // Create a new div element for the message
        const messageDiv = document.createElement('div');
        
        // Assign a class to the message based on its role (user or assistant)
        messageDiv.className = `message ${role}`;
        
        // Set the text content of the message
        messageDiv.textContent = content;
        
        // Append the message to the messages container
        messagesContainer.appendChild(messageDiv);
        
        // Scroll the messages container to the bottom to show the latest message
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
</script>

HTML

<script>
    function sendMessage() {
        // Retrieve and trim the input value
        const message = messageInput.value.trim();
        
        // If the message is empty, do not proceed
        if (!message) return;

        // Add user message to display
        appendMessage('user', message);

        // Clear the input field after sending the message
        messageInput.value = '';

        // For now, just echo the message back
        setTimeout(() => {
            appendMessage('assistant', `You said: ${message}`);
        }, 500);
    }
</script>

HTML

<script>
    // Handle Enter key
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            // Prevent the default form submission behavior
            e.preventDefault();
            // Send the message when Enter key is pressed
            sendMessage();
        }
    });
</script>

Setting Up the Basic Chat Interface

HTML Rendering with FastAPI and Jinja2

Creating the Templates Directory

Setting Up Jinja2 Templates in FastAPI

Join the 1M+ learners on CodeSignal

Rendering Templates with TemplateResponse

HTML Structure and Header

Body and Header Section

Chat Container and Input Elements

JavaScript for Interactivity

Initializing DOM Elements

StartNewChat Function

AppendMessage Function

SendMessage Function

Handling the Enter Key

Summary and Preparation for Practice