About Speak Up
What we built, and why
我們做了什麼、為什麼這樣做
Goal
目標
Show what one human and one Claude Code session can build in a few days: a production-grade web application on Azure that turns a single impromptu-speaking topic into six level-calibrated narrations — three ESL difficulties (A2 / B1 / B2) in two languages (English and Traditional Chinese). Every topic, every script, every audio voice, every line of infra, every CI/CD step was produced by Claude Code under human direction — no other developers involved.
展示「一個人 + 一個 Claude Code 對話」在幾天之內可以做到的事:一套跑在 Azure 上的正式級網頁應用,把一個即席演講題目 變成六段分程度的朗讀——三個 ESL 難度(A2/B1/B2)× 兩種語言(英文、繁體中文)。從題目、腳本、每一個語音、 每一行基礎設施、到 CI/CD,全部都是 Claude Code 在人類指揮下完成,沒有其他工程師參與。
Technology
使用的技術
Author of every topic text at three CEFR levels — 36 pieces in total. Long-context reasoning lets one prompt set the style guide, pacing, and level rules for a whole topic family.
所有 36 段腳本的作者;靠長上下文一次設定一個題目家族的風格、節奏與程度規則。
The single operator. Wrote the Bicep, the Next.js app, the Prisma schema, the TTS pipeline, and every deploy script. Drove the session from empty repo to live HTTPS URL in one day.
唯一的工程師。寫了 Bicep、Next.js App、Prisma Schema、TTS 批次、部署腳本,一天內把空 repo 做到 HTTPS 上線。
Hosts the Next.js runtime with managed TLS, system-assigned managed identity, and scale-to-zero.
Next.js 運行層;自動 TLS、系統指派 MSI、零流量時自動縮到零。
Stores topics, level-tagged speech texts, voice metadata, and blob URLs. Auto-pauses after an hour of idle.
儲存題目、分程度腳本、語音標籤、音檔連結;閒置一小時自動暫停。
Holds the 36 MP3 files. Served publicly with a cache-buster query string so regenerations don't hit stale browser caches.
存放 36 個 MP3;公開讀取,URL 帶 cache-buster 避免瀏覽器吃到舊版音檔。
Turns the texts into natural-sounding audio using six distinct voices across US / UK / AU English and Traditional Chinese, with SSML rate control per level.
把腳本轉成人聲,美/英/澳六種英語口音搭配繁中男女聲,並用 SSML 依程度調整語速。
All secrets (DB connection, Speech key, LINE tokens) live in Key Vault. The Container App reads them through its system-assigned identity — no credentials in code, no .env files in production.
所有機密(資料庫連線、Speech key、LINE token)放 Key Vault,Container App 走 MSI 取用;程式碼沒有憑證、production 也沒有 .env。
App-Router, server-rendered topic list and detail pages. Force-dynamic rendering means every page reflects the current DB state — generation progress shows live.
App Router 架構,伺服端渲染;force-dynamic 讓每次請求都讀最新資料庫,音檔生成進度即時可見。
How it was built
建置過程
- Azure Sponsorship from Toastmasters International District 67 provides the infra credits · 由國際演講協會台灣 D67 提供 Azure 贊助額度
- Infra stood up via a single validated Bicep template — 10 resources in ~5 minutes · 一份經驗證的 Bicep 模板,五分鐘內建好 10 項資源
- Content authored directly by Claude Code — 36 speech texts calibrated to CEFR A2 / B1 / B2 targets · 36 段腳本依 CEFR A2/B1/B2 標準直接由 Claude Code 寫成
- TTS batch generated all 36 MP3s via Azure Speech with per-level SSML rate control and uploaded to Blob · TTS 批次產生 36 個 MP3,分程度設語速,上傳到 Blob
- Container App rolls out new revisions via MSI-authenticated pulls from Azure Container Registry · Container App 透過 MSI 從 ACR 拉映像,自動滾動部署
Credits · 致謝
- Mark 陳炳陵 — Founder, 馬克路思科技 — product direction & human-in-the-loop
- Claude Opus 4.7 (via Claude Code) — engineering
- Toastmasters International District 67 — Azure sponsorship and content inspiration
- AIA (Taiwan AI Academy) × Anthropic — hosts of the Claude Code Showcase on 2026-05-18