Welcome to the first lesson of our course on building a Short Story Generation Web Application with FastAPI. In this lesson, we will focus on setting up the basic HTML structure for our application. This foundational step is crucial, as it lays the groundwork for the entire web application. By the end of this lesson, you will have a well-structured HTML document that serves as the backbone for our AI Short Story Generator. Let's dive in and start building!
Before we start building the HTML for our story generation interface, let's take a moment to understand how our FastAPI 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:
- Templates:
FastAPIuses theJinja2Templatesclass to renderHTMLtemplates. Templates are stored in thetemplates/directory. - Static Files: Static files such as
CSSandJavaScriptare served usingFastAPI'sStaticFilesclass. These files are placed in thestatic/directory and mounted in theFastAPIapp.
In your FastAPI app, you might mount the static directory like this:
And in your HTML template, you can link to your stylesheet as follows:
This tells FastAPI to serve the style.css file from the static folder.
Let's start by setting up the basic HTML structure in the "app/templates/index.html" file. This will serve as the foundation for our web application.
-
DOCTYPE Declaration and HTML Tag: Begin by declaring the document type and opening the
HTMLtag with the language attribute set to English.The
<!DOCTYPE html>declaration defines the document type and version ofHTML. The<html lang="en">tag specifies the language of the document, which is important for accessibility and SEO. -
Head Element: Next, add the
headelement, which contains metadata about the document.- The
<meta charset="UTF-8">tag sets the character encoding for the document, ensuring it can display all characters correctly. - The
<meta name="viewport" content="width=device-width, initial-scale=1.0">tag ensures the page is responsive and displays correctly on all devices. - The
<title>tag sets the title of the page, which appears in the browser tab.
- The
Now, let's create a tab navigation system within the body element. This will allow users to switch between different sections of the application.
Tabs Container: Start by creating a div with the class "tabs" to hold the navigation buttons.
- The
<div class="tabs">element acts as a container for the tab buttons. - Each
<button>element represents a tab. Theonclickattribute calls theopenTabfunction with the respective tab ID, allowing users to switch between tabs.
Next, we'll update the "generate" div with form elements and layout to allow users to input story prompts and generate stories.
Generate Tab Content: Create a div with the ID "generate" to hold the content for the "Generate Story" tab.
Finally, let's add the script tag at the end of the body to include the JavaScript file and ensure everything is well organized.
-
Script Tag: Add the
scripttag to include theJavaScriptfile.This
scripttag links theJavaScriptfile usingFastAPI's Jinja2url_forfunction, ensuring the scripts are correctly loaded. -
Verify Structure: Ensure all elements are correctly nested and organized within the
HTMLstructure. This is crucial for the application to function properly.
In summary, we've set up the basic HTML structure for our AI Short Story Generator application. This includes creating a tab navigation system, developing content for the "Generate Story" and "View History" tabs, and linking the necessary CSS and JavaScript files. In the upcoming practice exercises, you'll have the opportunity to reinforce these concepts and ensure your HTML structure is ready for further development.
