[Claude]

The code generator was extracting tutorial_steps from video analysis but only displaying them as static text. Every video produced identical boilerplate code regardless of tutorial content.

Changes

Tutorial Step Analysis

• Added _extract_step_action() to classify tutorial steps by action type (create, state, API, event, form, list, style)
• Each action type maps to specific code patterns and implementations

React Generation

• _generate_step_components_jsx(): Generates interactive step cards with working code demos
• _generate_step_specific_code(): Creates unique JSX per step based on action type
• Added progress tracking with useState hooks and step completion handlers

Example output for "Add useState hook" step:

<div className="code-demo">
  <pre className="code-block">{`
const [step1Value, setStep1Value] = useState('');
const handleChange = (e) => {
  setStep1Value(e.target.value);
};`}</pre>
  <div className="demo-output">
    <input type="text" placeholder="Type here..." />
  </div>
</div>

Vanilla JS Generation

• _generate_vanilla_step_function(): Generates step-specific init functions with real implementations
• _generate_step_initializations(): Auto-executes tutorial functions on page load
• Event handlers, API calls, form submissions based on step content

FastAPI Generation

• Added tutorial-specific endpoints: /api/tutorial/steps, /api/tutorial/progress
• Root endpoint now reflects actual tutorial title and features from video analysis

Styling & Documentation

• 200+ lines of CSS for interactive tutorial elements (code blocks, demos, progress indicators)
• Enhanced README generation to emphasize tutorial-specific nature and list implemented steps

Verification

Test suite validates unique output across different tutorial types:

• React state management vs API integration → Different components
• Form handling vs event handling → Different vanilla JS functions
• Different FastAPI endpoint implementations based on features

Each video now generates code matching its tutorial content rather than generic templates.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>code_generator.py</issue_title>
<issue_description>fix code_generator.py so each video produces unique, tutorial-specific output instead of identical boilerplate. @claude </issue_description>

Comments on the Issue (you are @claude[agent] in this section)

• Fixes code_generator.py #77

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v0-uvai	Ready	Preview, Comment, Open in v0	Mar 20, 2026 9:32am

[vercel]

Features list is embedded directly in generated FastAPI code without proper JSON serialization, using Python list syntax instead of JSON array format

[vercel]

String escaping vulnerability in _generate_step_specific_code: Step variable embedded directly in template literals without escaping, allowing backticks or special characters to break JSX/JavaScript syntax

[vercel]

Suggested change

	component_jsx = f''' <div className="step-card" data-step="{{idx}}" key="{{idx}}">
	<div className="step-header">
	<span className="step-number">Step {{idx + 1}}</span>
	<h3>{{completedSteps.includes(idx) ? '✓ ' : ''}}{step[:60]}{{'{step[60:]}' if len(step) > 60 else ''}}</h3>
	# Pre-evaluate Python logic before using in f-string to avoid syntax errors
	step_title = step[:60]
	step_remainder = step[60:] if len(step) > 60 else ''
	component_jsx = f''' <div className="step-card" data-step="{{idx}}" key="{{idx}}">
	<div className="step-header">
	<span className="step-number">Step {{idx + 1}}</span>
	<h3>{{completedSteps.includes(idx) ? '✓ ' : ''}}{step_title}{step_remainder}</h3>

Invalid JSX generation with embedded Python conditional syntax produces malformed JavaScript when rendered

[groupthinking]

Closing: superseded by PR #113 which ported the UUID suffix fix + _build_title helper from YOUTUBE-EXTENSION PR #706. The root cause (timestamp % 10000 collision + generic fallback title) is fixed.