Setting Up a Basic Tutor Interface with Flask and HTML

Setting Up the Basic Tutor Interface

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

Basic Tutor Interface Mockup

To help you better visualize the interface we're building, here's a simple mockup of how the tutor web page will look after following the steps in this lesson: text +------------------------------------------------------+ | Welcome to Your Personal Tutor | | What would you like to learn today? | +------------------------------------------------------+ | | | [Conversation appears here as messages] | | | | [User] Hello, can you help me with math? | | [Assistant] Sure thing! Let's get started with ... | | | +------------------------------------------------------+ | [ Type your question... ] | | [Send] [New Session] | +------------------------------------------------------+ The header is at the top, welcoming the user. The messages area is in the center, where the conversation between the student and tutor appears. At the bottom, there is an input field for typing questions, a Send button, and a New Session button.

HTML Rendering with Flask and Jinja2

Flask is a lightweight web framework that makes it easy to build web applications in Python. One of its strengths is its built-in support for rendering HTML templates using Jinja2 . Jinja2 is a modern and designer-friendly templating language that allows you to: Insert dynamic variables into HTML Use control structures like loops and conditionals Extend and include templates for reusable components Apply filters to modify variables during rendering With Flask, you can easily serve HTML pages that include dynamic content, making it a great choice for building interactive web applications like a personal tutor.

Join the 1M+ learners on CodeSignal

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

Setting Up and Running a Flask Application

Flask automatically looks for HTML templates in the templates directory. To render a template, you use the render_template function provided by Flask. This function takes the name of the template file and, optionally, any variables you want to pass to the template as keyword arguments.

Flask uses Jinja2 as its templating engine behind the scenes. When you call render_template, Flask processes the template using Jinja2, which allows for dynamic content insertion and template logic. Later, we’ll pass dynamic values like the student’s name or previous messages into the template. For example, you could pass a username like this: return render_template("tutor.html", user_name="Student"). Inside tutor.html, you could then display this value using Jinja2 syntax like {{ user_name }}.

Here is the complete code for a minimal Flask application that serves the tutor interface:

Python

from flask import Flask, render_template, session
from controllers.tutor_controller import TutorController

# Initialize Flask app
app = Flask(__name__)
app.secret_key = "your_secret_key_here"

# Create controller instance
tutor_controller = TutorController()

@app.route("/", methods=["GET"])
def index():
    tutor_controller.ensure_user_session(session)
    # Currently, we are not passing any dynamic data to the template
    return render_template("tutor.html")

# Run the server
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=3000, debug=True)

from flask import Flask, render_template, session
from controllers.tutor_controller import TutorController

# Initialize Flask app
app = Flask(__name__)
app.secret_key = "your_secret_key_here"

# Create controller instance
tutor_controller = TutorController()

@app.route("/", methods=["GET"])
def index():
    tutor_controller.ensure_user_session(session)
    # Currently, we are not passing any dynamic data to the template
    return render_template("tutor.html")

# Run the server
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=3000, debug=True)

In this code:

We import Flask, render_template, and session from Flask.
We create a Flask application instance and set a secret key for session management.
We initialize a TutorController instance to handle tutor-related logic.
We define a route for the root URL (/) using the @app.route("/") decorator, specifying it accepts GET requests.
The index function ensures a user session exists and renders the tutor.html template using render_template. For now, we don't pass any variables, but we will later.
The if __name__ == "__main__": block runs the application in debug mode for development.
We specify the host as "0.0.0.0" to make the server publicly available and set the port to 3000.
Setting debug=True enables automatic reloading when code changes and provides helpful error messages.

This approach allows us to serve dynamic content while maintaining a clean separation between our application logic and presentation layer.

AppendMessage Function

To effectively display the conversation in our tutor interface, we use the appendMessage function. This function creates a new message element, assigns it a CSS class based on the message's origin (user or assistant), appends it to the conversation container, and ensures the view scrolls to the latest message.

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>

The appendMessage function is crucial for dynamically adding messages to the tutor interface. It creates a new <div> element for each message, assigns a class to differentiate between student and tutor messages, and appends it to the messagesContainer. This function also ensures that the conversation view automatically scrolls to the bottom, keeping the latest messages in view.

Setting Up the Basic Tutor Interface

Basic Tutor Interface Mockup

HTML Rendering with Flask and Jinja2

Join the 1M+ learners on CodeSignal

Creating the Templates Directory

Setting Up and Running a Flask Application

HTML Structure and Header

Body and Header Section

Tutor Container and Input Elements

JavaScript for Interactivity

Initializing DOM Elements

StartNewSession Function

AppendMessage Function

SendQuery Function

Handling the Enter Key

Summary and Preparation for Practice