The prompt

Recreate this video as a single HTML page in three.js: the recreation on the left, the original on the right, with controls to compare them. Understand the film first and split it into shots. Build one shot at a time, play it, compare it with the video, and keep improving it until it reaches 80% accuracy. If a shot still falls short after 20 attempts, keep the best version and move on.

How the loop engine works

• Understand: the local model watches the film and reads its timeline.
• Split: four shots, a camera push into the phone's lenses, a glowing title card, and two long live-action walks toward the camera.
• Process: build one shot in three.js.
• Validate: play it, take screenshots, and measure them against the matching frames of the original.
• Decide: on target, lock the shot and start the next; below target, find the difference, fix it and run again; out of attempts, keep the best and move on, so the loop never gets stuck.

What was delivered

• A single page that plays the three.js recreation beside the original, frame-locked to the same timeline.
• Comparison views: side by side, a 50% overlay, and a difference view that turns black where the two match.
• Playback controls: play and pause, frame step, jump between cuts, speed from quarter to full, and a softness setting.
• Brightness, colour and camera motion for the live shots driven by per-frame measurements of the original film.
• The title card retitled: “The following was shot on πPIConsole”.

Why it matters

A prompt asks once and hopes. A loop engine sets a goal, measures every result against something real, and decides for itself whether to retry, lock or move on. The difference view lets anyone see the accuracy with their own eyes, and it all ran on a local model.

Stack

提示词

把这段影片做成一个纯 HTML 页面，用 three.js 重现：左边是重建画面，右边是原片，下方配上对比用的控件。先看懂影片并拆成镜头，然后一次只做一个镜头：播放、与原片对比，不符合就继续改进，直到准确度达到 80%。如果一个镜头试了 20 次仍未达标，就保留最好的版本，进入下一个镜头。

循环引擎如何运作

• 理解：本地模型观看影片，读懂时间线。
• 拆分：四个镜头——镜头推近手机镜头组、发光的标题卡，以及两段人物走向镜头的长镜头实拍。
• 处理：用 three.js 构建一个镜头。
• 验证：播放、截图，并与原片对应帧逐一比对。
• 判断：达标就锁定，进入下一个镜头；未达标就找出差异、修正、再跑一次；次数用完就保留最好的版本继续前进，循环永远不会卡住。

交付了什么

• 一个页面：three.js 重建画面与原片并排播放，锁定在同一条时间线上。
• 对比视图：并排、50% 叠加，以及“差值”视图——两边越吻合，画面越黑。
• 播放控件：播放暂停、逐帧步进、在剪辑点之间跳转、0.25 到 1 倍速，以及柔化设置。
• 实拍镜头的亮度、色彩和镜头运动，由原片的逐帧测量数据驱动。
• 标题卡改写为：“The following was shot on πPIConsole”。

为什么重要

提示词只问一次，然后祈祷。循环引擎设定目标，把每次结果和真实的东西对比，自己决定是重试、锁定还是继续前进。差值视图让任何人都能亲眼看到准确度——而且整个过程跑在本地模型上。

技术栈

提示詞

把這支影片做成一個純 HTML 頁面，用 three.js 重現：左邊是重建畫面，右邊是原片，下方配上比對用的控制項。先看懂影片並拆成鏡頭，然後一次只做一個鏡頭：播放、與原片比對，不符合就繼續改進，直到準確度達到 80%。如果一個鏡頭試了 20 次仍未達標，就保留最好的版本，進入下一個鏡頭。

循環引擎如何運作

• 理解：本地模型觀看影片，讀懂時間軸。
• 拆分：四個鏡頭——運鏡推近手機鏡頭模組、發光的標題卡，以及兩段人物走向鏡頭的長鏡頭實拍。
• 處理：用 three.js 建出一個鏡頭。
• 驗證：播放、截圖，並與原片對應的畫格逐一比對。
• 判斷：達標就鎖定，進入下一個鏡頭；未達標就找出差異、修正、再跑一次；次數用完就保留最好的版本繼續前進，循環永遠不會卡住。

交付了什麼

• 一個頁面：three.js 重建畫面與原片並排播放，鎖定在同一條時間軸上。
• 比對檢視：並排、50% 疊加，以及「差異」檢視——兩邊越吻合，畫面越黑。
• 播放控制：播放暫停、逐格前進、在剪接點之間跳轉、0.25 到 1 倍速，以及柔化設定。
• 實拍鏡頭的亮度、色彩與運鏡，由原片的逐格量測資料驅動。
• 標題卡改寫為：「The following was shot on πPIConsole」。

為什麼重要

提示詞只問一次，然後祈禱。循環引擎設定目標，把每次結果和真實的東西比對，自己決定要重試、鎖定還是繼續前進。差異檢視讓任何人都能親眼看到準確度——而且整個過程跑在本地模型上。

技術堆疊