THE DREAM SHOW — Sports Highlight Video Production (Demo)

A no-build static web app for a sports highlight video production service aimed at pro, amateur, and youth athletes and teams. Browse a portfolio, pick a package, get an instant quote, submit a production request, and track its progress.

한국어 문서: README.ko.md

LIVE DEMO: https://clsoftlab-lang.github.io/sports-video-editor/

What it is

THE DREAM SHOW turns raw game footage into finished stories — highlight reels, season films, and personal profile videos. This repository is a fully client-side demo of the customer-facing service app.

Features

• Portfolio gallery — 24 fictional works, filterable by sport and video style, played through an inline-SVG mock player (no real video files).
• Services & packages — Highlight Reel, Season Film, Personal Profile Video, each with price, included length, and turnaround days.
• Quote calculator — a pure module (quote.js): package base + extra length per-minute + rush surcharge + add-on extras, with estimated delivery days.
• Production request flow — enter sport, match info, source-video link placeholder, desired style, deadline → auto-calculated quote → submit → status tracking (접수 → 편집중 → 1차시안 → 완료).
• My requests — every request is stored locally and can be advanced through statuses (simulated) or removed.
• Consultation inquiries & reviews — leave inquiries (stored locally) and read example reviews.
• Responsive mobile-first layout, light + dark theme via prefers-color-scheme, Korean UI, keyboard-accessible.

How the request flow + quote work

1. The request form reads the same inputs the calculator uses and calls computeQuote(input, catalog) on every change to show a live estimate.
2. On submit, a snapshot of the quote (total, delivery days) is saved with the request via store.js into localStorage and assigned a status of 접수.
3. In 내 의뢰, the "next status" button advances a request through the four-stage flow (a demo simulation of studio progress). Everything is local; nothing is sent anywhere.

🤖 AI 기능 (API 연동)

The app ships a pluggable AI layer with three features, all working out of the box:

1. AI 영상 기획 상담 챗봇 — recommends a package and a production approach from your sport & goal.
2. 하이라이트 스토리보드/편집 구성 제안 — a scene-by-scene storyboard with timecodes and editing tips.
3. 견적 설명 — narrates the current quote breakdown line by line.

Demo = mock. With no backend configured, ai/ai.js runs a deterministic Korean MockProvider in the browser that reuses the app's packages/portfolio and the pure quote engine (quote.js). No network, no key — it just works.

Enable real Claude via the backend proxy in server/:

1. cd server && cp .env.example .env and set ANTHROPIC_API_KEY (default model: claude-haiku-4-5, raise via AI_MODEL).
2. npm install && npm start (defaults to http://localhost:8791).
3. In ai/config.js, set export const AI_ENDPOINT = "http://localhost:8791/api/ai";.

The browser then POSTs { task, payload } to the proxy, which calls Claude and streams the response back.

⚠️ Keys are server-side only. The Anthropic API key lives exclusively in server/ (process.env.ANTHROPIC_API_KEY). It is never placed in the browser or the repository. .env is git-ignored; AI_ENDPOINT is committed empty.

⚙️ 고도화 — 무인·저비용 실 AI 연동

The AI layer is tuned to run unmanned (무인) and cheaply, while staying real Claude when a key is present.

• Cost-first model — defaults to Claude Haiku 4.5 ($1 / $5 per MTok). Raise quality any time with AI_MODEL=claude-sonnet-5 or claude-opus-5.
• Prompt caching — each task's stable system prompt is sent as a cache_control:{type:'ephemeral'} block, so repeated calls read cache and cost less.
• Output caps + token budget — modest per-task max_tokens (~700), a per-IP rate limit (20/min), and a monthly token cap (AI_MONTHLY_TOKEN_CAP, default 2,000,000). Over budget → 429 {fallback:true}.
• Rough cost — at ~1.5K in / ~0.5K out tokens per request, Haiku 4.5 is ≈ $4 per 1,000 requests (~₩5,000), and prompt caching pushes it lower.
• Free one-deploy (무인) — server/worker.js + server/wrangler.toml run on Cloudflare Workers' free tier with no server to babysit: npx wrangler deploy then npx wrangler secret put ANTHROPIC_API_KEY.
• Autonomous, never-breaks — an on-load auto digest (추천 패키지 + 하이라이트 기획 아이디어) is generated via askAI from the app's own packages/portfolio + quote engine, so it works offline through the mock. If the endpoint fails / returns 429 {fallback:true} / a network error, ai/ai.js auto-falls back to the mock so the app never breaks.

⚠️ API keys are server-side only — never in the browser or repo. The key lives only in server/ (process.env.ANTHROPIC_API_KEY) or the Worker secret; .env is git-ignored.

Run locally

No build step, no dependencies. Serve the folder over HTTP (ES modules need http://, not file://):

python -m http.server 9003
# then open http://localhost:9003/

Run the self-check (JSON parse + node --check all JS + index.html containers + quote unit tests):

node check.mjs

Files

index.html          # markup + section containers
styles.css          # mobile-first, light/dark
app.js              # entry: data load, render, interactions
quote.js            # PURE quote calculator (unit-tested)
store.js            # localStorage requests/inquiries (try/catch + reset)
svg.js              # inline-SVG thumbnails + mock player
ai/config.js        # AI_ENDPOINT (empty = demo mock; no key ever here)
ai/ai.js            # askAI(task,payload,{onToken}) — mock or proxy+stream
server/index.mjs    # Claude proxy (POST /api/ai, cost-first claude-haiku-4-5, caching+caps)
server/worker.js    # Cloudflare Workers variant (free-tier, Anthropic REST)
server/wrangler.toml# Workers deploy config
server/package.json # @anthropic-ai/sdk dependency
server/.env.example # ANTHROPIC_API_KEY + AI_MODEL/caps template (copy to .env, never commit)
server/README.md    # backend setup, cost model & security notes
data/portfolio.json # 24 portfolio items
data/packages.json  # 3 packages + extras + rush tiers
data/reviews.json   # example reviews
check.mjs           # self-check + unit tests (+ AI security gate)
.github/workflows/ci.yml  # runs node check.mjs

DEMO-MODE boundaries

This is a demonstration only. In particular:

• The portfolio is fictional and the player is a mock — inline SVG, not real video.
• Quotes and requests are simulated — the calculator is real math, but no order is ever placed.
• State lives in localStorage, which is not a real database — it is per-browser, can be cleared, and is never shared or sent to a server.
• There are no accounts and no PII handling — the "source video link" and "contact" fields are stored locally as plain text and never uploaded.
• A real build would add a backend, real video upload/editing/delivery, payments, authentication, and staff workflow tooling.

Contributors

• Dr. Lee Il-guk (이일국)
• LWJ
• LMJ
• Claude (Anthropic)

License

• Code: Apache-2.0 (see LICENSE).
• Documentation: CC BY 4.0.

Not an official Anthropic product.

🎓 Idea origin

The seed idea for this project came from the entrepreneurship class taught by Dr. Lee Il-guk (이일국) at Yongin University (용인대학교). The students in that class produced startup ideas of remarkable, standout creativity — this project is one of those exceptional ideas, finally brought to life as a working service. Built with deep admiration and gratitude for those students' imagination. (No student personal information is included; only the idea itself was used, implemented clean-room.)