Course ES
← back to chapter

Form filler

Type an expense the way you'd scribble it on a receipt — "lunch with the

Showcase — Form filler

Type an expense the way you'd scribble it on a receipt — "lunch with the client, 38.50 eur, last tuesday" — and get back a validated record ready to insert: merchant, amount as a real number, currency, a category from your set, and a date. The schema does double duty: it shapes the request and validates the reply.

Run

bash bootstrap-secrets.sh              # reads ../../../../.env, writes secrets/
docker compose up --build              # default: PROVIDER=openai

Open http://localhost:3000.

To run against Gemini instead:

PROVIDER=gemini docker compose up --build

What's where

  • backend/ai_openai.py — the Expense schema (typed + Literal category) and the OpenAI call
  • backend/ai_gemini.py — same schema, Gemini call
  • backend/main.py — identical FastAPI loader; reads PROVIDER and dispatches
  • frontend/app/page.tsx — textarea + result (rendered as JSON)
  • docker-compose.yml — two services, secrets mounted from ./secrets/

run(input: str) -> str returns the validated record as pretty JSON, keeping the contract identical across the week's showcases.

Stop

docker compose down

Run locally

Download the project as a ZIP and run it with Docker. Brings up a FastAPI backend + Next.js frontend on localhost:3000.

Download form-filler.zip

unzip form-filler.zip
cd form-filler
bash bootstrap-secrets.sh   # one-time: pulls API keys into ./secrets
docker compose up --build   # default provider: openai
# or:  PROVIDER=gemini docker compose up --build

Type some input, pick a provider, and run the same code shown in Source against the live API. Sign-in required.


  

The same modules the Run button hits. The whole project (frontend, Dockerfile, compose) is in the ZIP under README.

backend/ai_openai.py

"""Week 4 - Showcase 3 (OpenAI): turn a messy note into a validated record.

This is the one closest to real work: a one-line expense note becomes a
structured row ready to insert. The schema does double duty — it tells the
model the shape and it validates the reply, so amount is a number and
category is one of yours, not whatever the model felt like typing.
"""
import json
from typing import Literal

from openai import OpenAI
from pydantic import BaseModel

_client = OpenAI()


class Expense(BaseModel):
    merchant: str
    amount: float
    currency: str
    category: Literal["travel", "meals", "software", "hardware", "other"]
    date: str


def run(text: str) -> str:
    response = _client.responses.parse(
        model="gpt-5.4-nano",
        input="Turn this expense note into a structured record. Infer the "
              "category. Use ISO format for the date if one is given.\n\n"
              f"{text.strip()}",
        text_format=Expense,
    )
    return json.dumps(response.output_parsed.model_dump(), indent=2)

backend/ai_gemini.py

"""Week 4 - Showcase 3 (Gemini): turn a messy note into a validated record."""
import json
import os
from typing import Literal

from google import genai
from google.genai import types
from pydantic import BaseModel

_client = genai.Client(api_key=os.environ["GEMINI_API_KEY"])


class Expense(BaseModel):
    merchant: str
    amount: float
    currency: str
    category: Literal["travel", "meals", "software", "hardware", "other"]
    date: str


def run(text: str) -> str:
    response = _client.models.generate_content(
        model="gemini-3.1-flash-lite",
        contents="Turn this expense note into a structured record. Infer the "
                 "category. Use ISO format for the date if one is given.\n\n"
                 f"{text.strip()}",
        config=types.GenerateContentConfig(
            response_mime_type="application/json",
            response_schema=Expense,
        ),
    )
    return json.dumps(response.parsed.model_dump(), indent=2)

Project files

  • .gitignore
  • README.md
  • backend/Dockerfile
  • backend/ai_gemini.py
  • backend/ai_openai.py
  • backend/main.py
  • backend/requirements.txt
  • bootstrap-secrets.sh
  • docker-compose.yml
  • frontend/Dockerfile
  • frontend/app/layout.tsx
  • frontend/app/page.tsx
  • frontend/next.config.ts
  • frontend/package.json
  • frontend/tsconfig.json