Setting Up the Basic HTML Structure for the AI Short Story Generator

Introduction and Overview

Welcome to the first lesson of our course on building a Short Story Generation Web Application with Flask. 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!

App File Structure

Before we start building the HTML for our story 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:

app/
│
├── main.py                     # Entry point for running the Flask app
├── requirements.txt            # Python dependencies
│
├── controllers/                # Flask route logic
│   └── story_generator_controller.py
│
├── services/                   # Core logic for story generation
│   └── story_generator_service.py
│
├── models/                     # Manages data and helper logic
│   ├── story_manager.py
│   └── prompt_manager.py
│
├── data/                       # Data template for story prompt
│   └── story_prompt_template.txt
│
├── static/                     # Frontend static files (CSS, JS, etc.)
│   ├── css/
│   │   └── style.css
│   └── script.js
│
├── templates/                  # HTML templates rendered by Flask
│   └── index.html
│
└── generated_stories/           # Directory to store generated stories

Folder Responsibilities

  • controllers/: Defines Flask routes and handles incoming requests.
  • services/: Contains the logic for formatting prompts and generating stories using AI.
  • models/: Deals with story 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 story generation prompts.
  • generated_stories/: Where all generated stories 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.

Creating the Basic HTML Document Structure

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.

  1. DOCTYPE Declaration and HTML Tag: Begin by declaring the document type and opening the HTML tag with the language attribute set to English.

    <!DOCTYPE html>
<html lang="en">

    The <!DOCTYPE html> declaration defines the document type and version of HTML. The <html lang="en"> tag specifies the language of the document, which is important for accessibility and SEO.

  2. Head Element: Next, add the head element, which contains metadata about the document.

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Short Story Generator</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
    • 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 <link> tag links the CSS file using Flask's url_for function, ensuring the styles are applied to the page.

  3. Body Element: Finally, add the body element, which will contain the content of the page.

    <body>
</body>

    The <body> tag is where all the visible content of the page will go. For now, it's empty, but we'll be adding more elements soon.

Adding Tab Navigation

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.

<div class="tabs">
    <button class="tab-button" onclick="openTab('generate')">Generate Story</button>
    <button class="tab-button" onclick="openTab('history')">View History</button>
</div>
  • The <div class="tabs"> element acts as a container for the tab buttons.
  • Each <button> element represents a tab. The onclick attribute calls the openTab function 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.

<div id="generate" class="tab-content">
    <div class="container">
        <h1>AI Short Story Generator</h1>
        <input type="text" id="prompt" placeholder="Enter your story theme...">
        <label for="tone">Tone (Optional):</label>
        <select id="tone">
            <option value="">None</option>
            <option value="Mysterious">Mysterious</option>
            <option value="Adventurous">Adventurous</option>
            <option value="Humorous">Humorous</option>
            <option value="Inspirational">Inspirational</option>
        </select>
        <button id="generate-button" onclick="generateStory()">Generate Story</button>
        <p id="loading-message" style="display: none;">Generating story... Please wait.</p>
        <div id="story-container"></div>
    </div>
</div>
  • The <h1> element serves as the title for the tab.
  • The <input> element allows users to enter a story theme.
  • The <select> element provides a dropdown menu for selecting the tone of the story.
  • The <button> element triggers the generateStory function to generate a story.
  • The <p> element displays a loading message while the story is being generated.
  • The <div id="story-container"> is where the generated story will be displayed.

Now, let's modify the "history" div to include elements for viewing past stories.

History Tab Content: Create a div with the ID "history" to hold the content for the "View History" tab.

<div id="history" class="tab-content" style="display:none;">
    <div class="container">
        <h1>Story History</h1>
        <button onclick="fetchHistory()">Load Previous Stories</button>
        <div id="history-container"></div>
    </div>
</div>
  • The <h1> element serves as the title for the tab.
  • The <button> element triggers the fetchHistory function to load previous stories.
  • The <div id="history-container"> is where the history of stories will be displayed.
  • The style="display:none;" attribute ensures this tab is initially hidden.

Finalizing the HTML Structure and Summary

Finally, let's add the script tag at the end of the body to include the JavaScript file and ensure everything is well-organized.

  1. Script Tag: Add the script tag to include the JavaScript file.

    <script src="{{ url_for('static', filename='script.js') }}"></script>

    This script tag links the JavaScript file using Flask's url_for function, ensuring the scripts are correctly loaded.

  2. Verify Structure: Ensure all elements are correctly nested and organized within the HTML structure. 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.

Next Lesson: Styling the Interface of the AI Short Story Generator
Sign up

Join the 1M+ learners on CodeSignal

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