Creating an AI Story Writer Using Flask and OpenAI

Introduction

Welcome to this tutorial where we will walk through the steps of building an AI-powered story writer using Flask and OpenAI's GPT model. The app generates poetic stories based on user input in real-time, providing a seamless and interactive experience.

Before we dive in, make sure to watch the detailed tutorial on my YouTube channel to understand the flow better.

After watching the video, follow the steps below to clone the GitHub repo, set up the project, and understand the code.

Step 1: Clone the GitHub Repository

The first step is to clone the GitHub repository of the AI Story Writer:

git clone <https://github.com/sairam-penjarla/ai_story_writer.git>

Once cloned, navigate into the project directory:

cd ai_story_writer

Step 2: Create a .env File

Before running the application, you need to create a .env file to store your OpenAI API key and the model you want to use.

1. Inside the project directory, create a file called .env.

2. Add the following content to the file:

TOKEN = your_openai_api_key
MODEL_NAME = gpt-3.5-turbo

Replace your_openai_api_key with your actual OpenAI API key. Now you're all set to run the application.

Step 3: Running the Flask Application

You can run the application using:

python run.py

Or without creating .pyc files:

python -B run.py

The application will start running at http://localhost:8000.

Now, let’s break down the code block by block.

Code Breakdown

1. Imports and Environment Setup

import asyncio
import os
from dotenv import load_dotenv
from flask import Flask, Response, render_template, request
from instructions import INSTRUCTIONS
from openai import OpenAI
from langchain_community.chat_models import ChatOpenAI

Explanation:

• This section imports the necessary modules. dotenv is used to load environment variables, and flask handles web requests.

• openai provides the client to communicate with OpenAI’s API, while ChatOpenAI offers a specific implementation to interact with OpenAI’s language models.

• INSTRUCTIONS are custom instructions given to the GPT model to generate stories poetically.

2. Loading Environment Variables

load_dotenv()

Explanation:

This function loads environment variables from the .env file. The TOKEN (OpenAI API key) and MODEL_NAME (GPT model name) are stored in the .env file. Flask uses these variables throughout the app.

3. Creating the Flask Application

app = Flask(__name__)
TOKEN = os.getenv('TOKEN')
MODEL_NAME = os.getenv('MODEL_NAME')

client = OpenAI(
    api_key=TOKEN,
)

Explanation:

• The app = Flask(__name__) creates the Flask app.

• os.getenv() retrieves the API key (TOKEN) and the model name (MODEL_NAME) from the environment variables.

• The OpenAI client is initialized using the provided TOKEN, enabling the app to interact with OpenAI’s API.

4. Landing Page Route

@app.route("/")
def landing_page():
    return render_template("index.html")

Explanation:

This route defines the landing page. When users visit the root URL (/), the index.html file is rendered. This page contains the user interface where they can interact with the chatbot.

5. Writer Route

@app.route('/writer', methods=['POST'])
def writer():
    data = request.get_json()
    user_input = data.get('user_input')

    messages  = [
        {"role": "system", "content": INSTRUCTIONS},
        {"role": "user", "content": user_input},
    ]

    def generate_response():
        chat_completion = client.chat.completions.create(
            messages=messages,
            model=MODEL_NAME,
            stream=True
        )

        for chunk in chat_completion:
            content = chunk.choices[0].delta.content
            if content:
                yield f"data: {content}\\\\n\\\\n"

        yield "data: [DONE]\\\\n\\\\n"

    return Response(generate_response(), content_type='text/event-stream')

Explanation:

• The /writer route listens for a POST request containing the user’s input.

• data = request.get_json() extracts the user's input from the request.

• The messages list is created, with one message from the system providing the model with instructions, and one from the user, which contains the input to generate a response.

Streamed Responses:

The generate_response() function streams the response back to the client in real time. The OpenAI model returns a response in chunks, ensuring that the user sees the story being generated live. Each chunk is sent as part of a server-sent event (Response(generate_response(), content_type='text/event-stream')).

6. Running the Application

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000)

Explanation:

This block checks if the script is being executed directly and starts the Flask app. The app is hosted on 0.0.0.0 (accessible by any IP address) and runs on port 8000.

Conclusion

By now, you should have a solid understanding of how the AI Story Writer app works. The combination of Flask and OpenAI makes it easy to build interactive applications that can handle real-time responses and deliver dynamic content.

Make sure to try out the app yourself by cloning the GitHub repo, setting up your environment, and running it locally. For a step-by-step guide, don’t forget to check out the YouTube video linked at the top!