> Source URL: /unit-3/project-paths/duward-a/duward-a-2026-04-21.guide # Duward's Project Guide **Project:** GPT Workout Planner **Category:** AI / Mobile Web App (Flask + Tailwind) **Last updated:** April 21 --- > Note: This guide reflects the latest state of your project repo. It may not match the most up-to-date version if you've worked since. ## Where You Are A couple things to address before working on the web app: 1. **Your OpenAI key is hardcoded in `main.py` line 50.** That file is in a public-ish class repo. We'll move this key to `.env` in Phase 1 so that we can make this repository public safely later. 2. **Your `planner.py` from the last guide never happened.** Everything still lives in `main.py`. That's okay, but we'll need to extract it into its own file so `app.py` can call it properly. --- ## Project Structure Your project splits into two kinds of code: - **Business logic (your code)** Everything in `planner.py` (NEW): loading workouts, picking a focus group that avoids repeats, building the prompt, validating the goal. - **Library / view code (glue code agent can help with)** Flask routes in `app.py`, the OpenAI API call, the HTML templates, Tailwind classes. This plumbing is the same for any Flask app. Example target layout: ``` final-project-angldu6/ ├── app.py ← Flask routes + OpenAI call ├── planner.py ← business logic ├── pyproject.toml ├── templates/ │ ├── base.html ← Tailwind mobile layout — agent OK │ ├── home.html ← goal + location form — agent OK │ └── result.html ← show the plan — agent OK ├── workouts/ │ ├── options.json (already done) │ └── previous_workouts.json (already done) ├── .env ← OPENAI_API_KEY (NOT committed) └── .gitignore ← must include .env ``` --- ## Phase 1: Move your key, then extract `planner.py` > **Handwrite `planner.py` yourself.** The `.env` step is standard library setup. ### Objective Let's move the `OPENAI_API_KEY` into its own `.env` file to make sure it doesn't leak when we make your project public. ### Instructions - [ ] `uv add python-dotenv` - [ ] Create `.env` at the project root with a single line: `OPENAI_API_KEY=sk-...class-api-key-here...` - [ ] Make sure `.gitignore` has `.env` in it (add it if missing) - [ ] Create `planner.py` at the project root - [ ] Move these functions from `main.py` into `planner.py`: `load_options`, `load_previous_groups`, `save_previous_groups`, `build_prompt` - [ ] Add three new functions to `planner.py`: `is_valid_goal(goal)`, `pick_focus_group(recent_groups)`, `workouts_for_group(options, location_key, group_name)` - [ ] Move the `FOCUS_GROUPS` dict from inside `main()` to the top of `planner.py` - [ ] **Delete** the hardcoded `api_key` line from `main.py` entirely ### Hints **Top of `planner.py`:** ```python import json import random OPTIONS_PATH = "workouts/options.json" PREVIOUS_WORKOUTS_PATH = "workouts/previous_workouts.json" FOCUS_GROUPS = { "chest_tricep_shoulders": ["chest", "tricep", "shoulders"], "back_bicep": ["back", "bicep"], "legs_core": ["legs", "core"], "cardio": ["cardio"], } ``` **`is_valid_goal`:** ```python def is_valid_goal(goal): goal = goal.strip() if not goal: return False if len(goal) < 3: return False if goal.isdigit(): return False return True ``` **`pick_focus_group`:** ```python def pick_focus_group(recent_groups): # Prefer groups that aren't in the last 2 available = [g for g in FOCUS_GROUPS if g not in recent_groups] # If every group was recent, reset and pick from all of them if not available: available = list(FOCUS_GROUPS.keys()) return random.choice(available) ``` **`workouts_for_group`:** **`workouts_for_group` skeleton (fill in the loop):** ```python def workouts_for_group(options, location_key, group_name): focus_area_map = options["workout_categories"][location_key]["focus_areas"] workouts = [] # Loop through FOCUS_GROUPS[group_name] and extend workouts from focus_area_map # ... your code here ... return workouts ``` **`build_prompt` stays the same** — just move it over from `main.py` unchanged. > **Optional — get help from your agent:** > > ```text > Here is my workouts_for_group function in planner.py. Walk me through > what it returns when I pass location_key="workouts_in_the_gym" and > group_name="legs_core". Don't change my code — I want to verify my > mental model before I hook it into Flask. > ``` --- ## Phase 2: `uv add flask` and stand up `app.py` > **Agent-assisted is fine here** since this is library/glue code. ### Objective Replace `main.py` (the CLI) with `app.py` (the Flask web app). Two routes: one to show the form, one to generate the plan. ### Instructions - [ ] `uv add flask` - [ ] Create `app.py` at the project root - [ ] Add `GET /` → renders `home.html` with the form - [ ] Add `POST /generate` → reads the form, calls `planner.is_valid_goal`, picks a focus group, builds the prompt, calls OpenAI, saves memory, renders `result.html` - [ ] Delete `main.py` (or leave it only as a comment saying "moved to app.py") - [ ] Run `uv run flask --app app run --debug` and confirm it starts on `http://127.0.0.1:5000` ### Hints **Full `app.py`:** ```python from flask import Flask, render_template, request from dotenv import load_dotenv from openai import OpenAI from planner import ( load_options, load_previous_groups, save_previous_groups, pick_focus_group, workouts_for_group, build_prompt, is_valid_goal, ) load_dotenv() # reads OPENAI_API_KEY from .env into the environment app = Flask(__name__) LOCATION_LABELS = { "workouts_in_the_gym": "Gym", "workouts_outside_of_the_gym": "Outside Gym", } @app.route("/") def home(): return render_template("home.html") @app.route("/generate", methods=["POST"]) def generate(): goal = request.form.get("goal", "") location_key = request.form.get("location", "workouts_in_the_gym") if not is_valid_goal(goal): return render_template( "home.html", error="Please enter a real goal (example: build muscle, lose weight).", goal=goal, ) options = load_options() recent = load_previous_groups() group = pick_focus_group(recent) workouts = workouts_for_group(options, location_key, group) location_name = LOCATION_LABELS.get(location_key, "Gym") prompt = build_prompt(goal, location_name, group, workouts) client = OpenAI() # picks up OPENAI_API_KEY from env response = client.responses.create(model="gpt-4.1-mini", input=prompt) plan = response.output_text.strip() # Update memory: keep only the last 2 groups recent.append(group) save_previous_groups(recent[-2:]) return render_template( "result.html", goal=goal, location_name=location_name, group=group.replace("_", " "), plan=plan, ) ``` > **Optional — get help from your agent:** > > ```text > Read my app.py and planner.py. Explain in plain English what happens > step-by-step when a user submits the form on /generate. Start from > "Flask receives the POST request" and end with "the browser renders > result.html". Don't change my code. > ``` --- ## Phase 3: Mobile-first UI with Tailwind > **Agent-assisted is fine here.** ### Objective Three templates that look good on a phone: `base.html` for the shared shell, `home.html` for the form, `result.html` for the plan. ### Instructions - [ ] Create `templates/` folder at the project root - [ ] Create `templates/base.html` with the Tailwind CDN and a mobile viewport meta tag - [ ] Create `templates/home.html` that extends `base.html` and has the form - [ ] Create `templates/result.html` that extends `base.html` and shows the plan - [ ] Open the app in your phone's browser (or Chrome DevTools mobile preview) and confirm it looks good at phone widths ### Hints **`templates/base.html`:** ```html {% block title %}GPT Workout Planner{% endblock %}

GPT Workout Planner

{% block content %}{% endblock %}
``` The `max-w-md mx-auto` pattern keeps the content narrow and centered — that's what makes it feel like a mobile app even on a desktop browser. **`templates/home.html`:** ```html {% extends "base.html" %} {% block content %} {% if error %}
{{ error }}
{% endif %}

Where are you working out?

{% endblock %} ``` The trick here is `has-[:checked]:` — Tailwind styles the `