Welcome to the first lesson of our course on building an image generation web application with Flask! In this course, you'll learn how to create a user-friendly web interface for an AI-powered image generation service. By the end of this course, you'll have built a complete web application that allows users to generate images based on text prompts and view their generation history.
In this first lesson, we'll focus on creating the HTML structure for our application. This structure will serve as the foundation for our user interface, providing the elements that users will interact with to generate images and view their history.
Our application will have two main sections:
- A "Generate Image" tab where users can enter prompts and customize their image generation.
- A "View History" tab where users can see their previously generated images.
Before we dive into the code, let's understand how Flask handles HTML templates. In a Flask application, HTML files are typically stored in a folder called templates. Flask uses a templating engine called Jinja2 that allows us to include dynamic content in our HTML files. We'll see this in action when we link our CSS and JavaScript files.
Now, let's start building our HTML interface!
Before we start building the HTML for our image generation interface, let's take a moment to understand how our Flask application is organized. A clear file structure helps us stay organized as our project grows in complexity.
Here's the structure we'll be working with:
Bash1image-generator-app/ 2│ 3├── main.py # Entry point for running the Flask app 4├── requirements.txt # Python dependencies 5│ 6├── controllers/ # Flask route logic 7│ └── image_generator_controller.py 8│ 9├── services/ # Core logic for image generation 10│ └── image_generator_service.py 11│ 12├── models/ # Manages data and helper logic 13│ ├── image_manager.py 14│ └── prompt_manager.py 15│ 16├── data/ # Data template for image prompt 17│ └── image_prompt_template.txt 18│ 19├── static/ # Frontend static files (CSS, JS, etc.) 20│ ├── css/ 21│ │ └── style.css 22│ └── script.js 23│ 24├── templates/ # HTML templates rendered by Flask 25│ └── index.html 26│ 27└── generated_images/ # Directory to store generated images
- controllers/: Defines Flask routes and handles incoming requests.
- services/: Contains the logic for formatting prompts and generating images using AI.
- models/: Deals with image storage and loading of prompt templates.
- templates/ and static/: Support the front-end UI with HTML, CSS, and JavaScript.
- data/: Holds reusable text templates to guide consistent image generation prompts.
- generated_images/: Where all generated images are saved for viewing in the history tab.
With this structure in mind, you'll find it easier to understand where each part of the code lives as we build out the HTML and connect it to our Flask backend.
Every HTML document starts with a basic structure that includes the document type declaration, the HTML root element, and the head and body sections. Let's create this structure for our image generator application.
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>AI Event Banner Generator</title> 7 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> 8</head> 9<body> 10 <!-- Our content will go here --> 11</body> 12</html>
Let's break down what each part of this code does:
<!DOCTYPE html>tells the browser that this is an HTML5 document.<html lang="en">is the root element of the HTML document, with "en" specifying English as the language.- The
<head>section contains metadata about the document:<meta charset="UTF-8">specifies the character encoding for the document.<meta name="viewport" content="width=device-width, initial-scale=1.0">ensures proper scaling on mobile devices.<title>AI Image Generator</title>sets the title that appears in the browser tab.<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">links to our CSS file.
Notice the {{ url_for('static', filename='style.css') }} syntax. This is a Jinja2 template expression that Flask uses to generate the correct URL for our CSS file. In Flask, static files like CSS, JavaScript, and images are typically stored in a folder called static. The url_for function helps Flask generate the correct path to these files.
Now that we have our basic structure, let's add the content to our body section.
Our application will have two main tabs: one for generating images and another for viewing the history of generated images. Let's create the tab navigation system that will allow users to switch between these views.
HTML, XML1<body> 2 <div class="tabs"> 3 <button class="tab-button" onclick="openTab('generate')">Generate Image</button> 4 <button class="tab-button" onclick="openTab('history')">View History</button> 5 </div> 6 7 <div id="generate" class="tab-content"> 8 <!-- Generate Image content will go here --> 9 </div> 10 11 <div id="history" class="tab-content" style="display:none;"> 12 <!-- View History content will go here --> 13 </div> 14</body>
In this code, we've added:
- A
<div>with the classtabsthat contains two buttons, one for each tab. - Each button has an
onclickattribute that calls a JavaScript function namedopenTabwith the ID of the tab to open. - Two
<div>elements with the classtab-contentand IDsgenerateandhistory. These will contain the content for each tab. - The "history" tab content has
style="display:none;"to hide it initially, showing only the "generate" tab when the page loads.
The openTab function will be defined in our JavaScript file, which we'll link at the end of our HTML document. This function will handle showing and hiding the appropriate tab content when a user clicks on a tab button.
Now, let's fill in the content for each tab.
The "Generate Image" tab will contain a form where users can enter a prompt for the image they want to generate, select an aspect ratio. Let's create this form:
HTML, XML1<div id="generate" class="tab-content"> 2 <div class="container"> 3 <h1>Event Banner Generator</h1> 4 <input type="text" id="prompt" placeholder="Describe your event (e.g., Luxury Tech Conference 2025)"> 5 <label for="aspect-ratio">Aspect Ratio:</label> 6 <select id="aspect-ratio"> 7 <option value="1:1">Square (1:1)</option> 8 <option value="16:9">Widescreen (16:9)</option> 9 <option value="4:3">Classic (4:3)</option> 10 <option value="3:4">Portrait (3:4)</option> 11 </select> 12 <button id="generate-button" onclick="generateImage()">Generate Image</button> 13 <p id="loading-message" style="display: none;">Generating image... Please wait.</p> 14 <div id="image-container"></div> 15 </div> 16</div>
Let's examine the elements in our form:
- A container
<div>to hold all the form elements. - An
<h1>heading that displays the title of our application. - An
<input>field where users can enter their image description (prompt). - A dropdown
<select>menu for choosing the aspect ratio of the generated image, with options for square, widescreen, classic, and portrait formats. - A button that, when clicked, will call a JavaScript function named
generateImage()to process the form and generate the image. - A loading message that will be displayed while the image is being generated. It's initially hidden with
style="display: none;". - An empty
<div>with the IDimage-containerwhere the generated image will be displayed.
The generateImage() function will be defined in our JavaScript file. It will collect the values from the form, send them to our backend API, and display the resulting image in the image-container div.
The "View History" tab will allow users to see their previously generated images. Let's create the content for this tab:
HTML, XML1<div id="history" class="tab-content" style="display:none;"> 2 <div class="container"> 3 <h1>Image History</h1> 4 <button onclick="fetchHistory()">Load Previous Images</button> 5 <div id="history-container"></div> 6 </div> 7</div>
The history view is simpler than the generation form:
- A container
<div>to hold all the elements. - An
<h1>heading that displays "Image History". - A button that, when clicked, will call a JavaScript function named
fetchHistory()to load the user's previously generated images. - An empty
<div>with the IDhistory-containerwhere the images will be displayed.
The fetchHistory() function will be defined in our JavaScript file. It will fetch the user's image history from our backend API and display the images in the history-container div.
Now that we have created all the necessary HTML elements, let's connect everything together by adding the script tag at the end of our body section:
HTML, XML1<script src="{{ url_for('static', filename='script.js') }}"></script>
Just like with our CSS file, we use the url_for function to generate the correct path to our JavaScript file.
Here's the complete HTML code for our image generator application:
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>AI Event Banner Generator</title> 7 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> 8</head> 9<body> 10 <div class="tabs"> 11 <button class="tab-button" onclick="openTab('generate')">Generate Image</button> 12 <button class="tab-button" onclick="openTab('history')">View History</button> 13 </div> 14 15 <div id="generate" class="tab-content"> 16 <div class="container"> 17 <h1>Event Banner Generator</h1> 18 <input type="text" id="prompt" placeholder="Describe your event (e.g., Luxury Tech Conference 2025)"> 19 <label for="aspect-ratio">Aspect Ratio:</label> 20 <select id="aspect-ratio"> 21 <option value="1:1">Square (1:1)</option> 22 <option value="16:9">Widescreen (16:9)</option> 23 <option value="4:3">Classic (4:3)</option> 24 <option value="3:4">Portrait (3:4)</option> 25 </select> 26 <button id="generate-button" onclick="generateImage()">Generate Image</button> 27 <p id="loading-message" style="display: none;">Generating image... Please wait.</p> 28 <div id="image-container"></div> 29 </div> 30 </div> 31 32 <div id="history" class="tab-content" style="display:none;"> 33 <div class="container"> 34 <h1>Image History</h1> 35 <button onclick="fetchHistory()">Load Previous Images</button> 36 <div id="history-container"></div> 37 </div> 38 </div> 39 40 <script src="{{ url_for('static', filename='script.js') }}"></script> 41</body> 42</html>
In this lesson, we've created the HTML structure for our image generator application. We've set up a tab navigation system, designed a form for generating images, and created a view for displaying the image history. We've also linked our CSS and JavaScript files using Flask's url_for function.
Right now, our application doesn't look very appealing because we haven't added any styling yet. Additionally, the buttons don't do anything because we haven't implemented the JavaScript functions. In the next lesson, we'll add CSS to style our application and make it visually appealing. After that, we'll implement the JavaScript functions to handle user interactions and communicate with our backend API.
The HTML structure we've created serves as the foundation for our application. It defines the elements that users will interact with and provides the structure that our CSS and JavaScript will build upon. By understanding this structure, you'll be better prepared to implement the styling and functionality in the upcoming lessons.
In the practice exercises that follow, you'll have the opportunity to modify this HTML structure and experiment with different elements to better understand how they work together. You'll also get to see how the HTML structure interacts with CSS and JavaScript to create a complete web application.
