(null);
const handleVideoProcessed = (
originalUrl: string,
segmentedUrl: string
) => {
setOriginalVideoUrl(originalUrl);
setSegmentedVideoUrl(segmentedUrl);
};
return (
{segmentedVideoUrl && (
)}
);
}
const styles: Record = {
app: {
minHeight: '100vh',
backgroundColor: '#0a0a0a',
color: '#ffffff',
},
header: {
padding: '30px 20px',
textAlign: 'center',
backgroundColor: '#141414',
borderBottom: '2px solid #333333',
},
appTitle: {
fontSize: '48px',
fontWeight: 'bold',
margin: 0,
background: 'linear-gradient(135deg, #00ff88 0%, #0088ff 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text',
},
main: {
maxWidth: '1400px',
margin: '0 auto',
padding: '20px',
},
section: {
marginBottom: '30px',
},
};
export default App;
```
### app/zoom/page.tsx
```typescript
"use client";
import { useState, useCallback, useRef, useEffect } from "react";
import CameraPanel from "../shared/CameraPanel";
import ComparisonPanel from "../shared/ComparisonPanel";
import ScreenCapturePanel from "../shared/ScreenCapturePanel";
import { comparePosesDetailed } from "../lib/poseComparison";
import { computeScore, buildPoseSummary } from "../shared/scoring";
import { getCoachMessage } from "../shared/coach";
import { speak } from "../shared/speech";
import type { NormalizedLandmark } from "../shared/pose";
import type { ComparisonResult } from "../shared/compare";
type Mode = "choose" | "zoom-sdk" | "screen-capture";
type ZoomState = "idle" | "ready" | "joining" | "joined" | "error";
// Scoring constants (same as YouTube page)
const SCORE_EMA_ALPHA = 0.15;
const SCORE_DEAD_ZONE = 2;
const LIMB_LABELS: Record = {
rightArm: "Right arm",
leftArm: "Left arm",
rightLeg: "Right leg",
leftLeg: "Left leg",
torso: "Torso",
};
export default function ZoomApp() {
const [mode, setMode] = useState("choose");
const [comparison, setComparison] = useState(null);
const [coachMsg, setCoachMsg] = useState("");
const [score, setScore] = useState(0);
// Zoom SDK state
const [meetingNumber, setMeetingNumber] = useState("");
const [passcode, setPasscode] = useState("");
const [userName, setUserName] = useState("JiggleWiggle");
const [zoomState, setZoomState] = useState("idle");
const [zoomError, setZoomError] = useState("");
const iframeRef = useRef(null);
// Track both poses and their source video aspect ratios
const remotePoseRef = useRef(null);
const selfPoseRef = useRef(null);
const remoteAspectRef = useRef(16 / 9); // Zoom is typically 16:9
const selfAspectRef = useRef(4 / 3); // Webcam is typically 4:3
const smoothedScoreRef = useRef(0);
// Core comparison logic — runs on every frame from either source
const runComparison = useCallback(() => {
const remoteLm = remotePoseRef.current;
const selfLm = selfPoseRef.current;
// Need both poses with enough landmarks
if (!remoteLm || !selfLm || remoteLm.length < 33 || selfLm.length < 33) {
// If we have self pose only, show basic heuristic score
if (selfLm && selfLm.length >= 33) {
const frame = computeScore(selfLm);
setScore(frame.score);
}
setComparison({
similarity: 0,
parts: { arms: 0, legs: 0, torso: 0 },
feedback: remoteLm ? ["Step into frame!"] : ["Waiting for Zoom feed…"],
});
return;
}
// 1. Detailed geometric comparison (per-limb, normalized with aspect ratio correction)
const detailed = comparePosesDetailed(
remoteLm,
selfLm,
remoteAspectRef.current,
selfAspectRef.current
);
if (!detailed) {
setComparison({
similarity: 0,
parts: { arms: 0, legs: 0, torso: 0 },
feedback: ["Can't compare poses clearly"],
});
return;
}
// 2. Heuristic score from self pose (for body metrics)
const frame = computeScore(selfLm);
// 3. Blend: mostly geometric match, with some heuristic
const geoScore = detailed.matchScore;
const blended = Math.round(0.8 * geoScore + 0.2 * frame.score);
const finalScore = Math.max(0, Math.min(100, blended));
// 4. EMA smoothing
const smoothed =
smoothedScoreRef.current * (1 - SCORE_EMA_ALPHA) +
finalScore * SCORE_EMA_ALPHA;
smoothedScoreRef.current = smoothed;
const rounded = Math.round(smoothed);
if (Math.abs(rounded - score) >= SCORE_DEAD_ZONE) {
setScore(rounded);
}
// 5. Build per-part breakdown for ComparisonPanel
const arms = Math.round(
((detailed.limbScores.leftArm ?? 50) + (detailed.limbScores.rightArm ?? 50)) / 2
);
const legs = Math.round(
((detailed.limbScores.leftLeg ?? 50) + (detailed.limbScores.rightLeg ?? 50)) / 2
);
const torso = detailed.limbScores.torso ?? 50;
// 6. Generate feedback
const feedback: string[] = [];
const worstLabel = LIMB_LABELS[detailed.worstLimb] ?? detailed.worstLimb;
if (detailed.limbScores[detailed.worstLimb] < 60) {
feedback.push(`Fix your ${worstLabel.toLowerCase()}!`);
}
if (rounded >= 80) {
feedback.push("Great match — keep it locked in!");
} else if (rounded >= 60) {
feedback.push("Getting close — tighten it up!");
} else if (rounded >= 40) {
feedback.push("Mirror their moves!");
}
if (detailed.refPoseLabel && detailed.refPoseLabel !== "Neutral") {
feedback.push(`They're doing: ${detailed.refPoseLabel}`);
}
if (feedback.length === 0) feedback.push("Try to match the dancer!");
setComparison({
similarity: rounded,
parts: { arms, legs, torso },
feedback,
});
// 7. Feed into LLM coach with full context
const issues = [...frame.issues];
if (detailed.limbScores[detailed.worstLimb] < 60) {
issues.unshift(`${worstLabel} off from reference`);
}
const summary = buildPoseSummary(selfLm, {
...frame,
score: rounded,
issues,
});
// Attach reference comparison data for richer LLM coaching
(summary as Record).reference = detailed;
getCoachMessage(summary).then((result) => {
if (result) {
setCoachMsg(result.message);
if (result.audio) speak(result.audio);
}
});
}, [score]);
// Remote pose handler (dancer in Zoom)
const handleRemotePose = useCallback(
(landmarks: NormalizedLandmark[] | null) => {
remotePoseRef.current = landmarks;
runComparison();
},
[runComparison]
);
// Self pose handler (your webcam)
const handleSelfPose = useCallback(
(landmarks: NormalizedLandmark[] | null) => {
selfPoseRef.current = landmarks;
runComparison();
},
[runComparison
[truncated — 10193 more characters]
```
[91 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]