Doubao Seed API for Reasoning and Coding

완전한 단일 파일 HTML 페이지를 만드세요. 모든 CSS와 JavaScript가 인라인으로 포함된 하나의 .html 문서여야 하며, 외부 의존성은 전혀 없어야 합니다. CDN 링크, 웹 폰트, 이미지 파일, data URI도 사용하지 마세요. 모든 시각 요소는 런타임에 Canvas 2D API 또는 인라인 SVG로 절차적으로 그려야 하며, 비트맵, 사진, emoji는 어디에도 없어야 합니다. 이 페이지는 "Harvest Field — Aerial Geometry Studio" 같은 제목의 실시간 생성형 캔버스입니다. 전체 콘셉트는 사용자가 슬라이더로 형태를 조정하는 경작지의 신의 시점, 탑다운 뷰이며, 픽셀화된 콤바인 수확기 한 대가 그 위를 천천히 기어가면서 날것의 작물에서 질서정연한 줄무늬를 지워내는 장면입니다. 혼돈에서 질서가 조용하고 만족스럽게 베어져 나오는 순간을 표현하세요. 구성과 렌더링: 전체 viewport를 호밀밭 같은 직사각형 밭 구획의 규칙적인 그리드로 채우세요. 각 구획은 평면 벡터 형태로 배치하되, 은은한 isometric / faux-2.5D 높이감을 주어 납작한 직사각형이 아니라 낮은 블록처럼 읽히게 해야 합니다. 한쪽 모서리에서 비스듬히 들어오는 따뜻한 저녁의 단일 방향성 햇빛으로 장면을 비추세요. 모든 밭 구획과 수확기는 반대 방향으로 길고 부드러운 그림자를 드리워, 들판의 기하학적이고 블록 같은 견고함을 강화해야 합니다. 팔레트는 절제되고 세련된 흙빛 계열이어야 합니다. 머스터드 옐로, 황토색, 올리브 그린, 그리고 갓 갈아엎은 흙을 위한 그을린 burnt-umber 액센트 하나를 사용하세요. 네온, 순수 원색은 피하고, 고급스럽고 차분하게 유지하세요. 전체 스타일은 flat vector와 isometric micro-relief가 만난 듯 정밀하고 건축적이어야 합니다. 살아 있는 동작: 각 구획 안에는 조밀도를 조절할 수 있는 미세한 파종 줄(가는 평행선)을 렌더링하세요. 픽셀화된 콤바인 수확기 한 대, 즉 몇 개의 직사각형으로 그린 작은 블록형 sprite가 유일한 움직이는 요소이며, 그리드의 대칭을 깨는 유일한 대상이어야 합니다. 수확기는 구획을 가로질러 나선형으로 안쪽으로 들어가는 경로 또는 serpentine boustrophedon(回字 / back-and-forth) 경로 중 하나를 따라 천천히 이동합니다. 이동하면서 자신의 작업 폭 바로 아래의 서 있는 작물을 "지우고", 잔디를 깎은 자국이나 실제 콤바인의 header trail처럼 밝고 어두운 절단 띠가 번갈아 나타나는 실시간 수확 줄무늬를 남겨야 합니다. 이 흔적은 reset 전까지 밭에 영구적으로 칠해져 있어야 합니다. 수확은 requestAnimationFrame을 통한 연속적인 자체 실행 애니메이션이어야 하며, 들판이 채워지는 모습을 보는 경험은 차분하고 최면적이어야 합니다. 상호작용 — 모든 컨트롤은 슬라이더여야 하며, 깔끔하고 미니멀한 측면 또는 하단 패널에 작은 toggle/button 몇 개를 더할 수 있습니다. 모든 컨트롤은 페이지 reload 없이 실시간으로 반응해야 합니다. 밭 구획 수를 조절하는 슬라이더(grid resolution, 예: 3×3부터 12×12까지), 파종 줄 밀도 슬라이더, 작물 hue 슬라이더(서 있는 작물을 mustard-ochre-olive 범위에서 이동), 수확 진행도 또는 수확기 속도 슬라이더, 그리고 수확기 경로를 spiral과 boustrophedon 사이에서 전환하는 toggle을 제공하세요. 밭을 다시 생성하고 수확 과정을 재시작하는 은은한 Reset/Replant 버튼도 넣으세요. 구획 수나 밀도를 바꾸면 레이아웃이 부드럽게 재생성되어야 하며, hue를 드래그하면 실시간으로 색조가 바뀌어야 합니다. 완전히 responsive하게 만들어 window resize 시 그리드와 그림자가 다시 계산되도록 하고, frame rate를 부드럽게 유지하며, 파일을 더블클릭했을 때 올바르게 열릴 수 있도록 코드를 깔끔하고 self-contained하게 작성하세요. 이것은 게임도 dashboard도 아닙니다. 생성형 예술 도구입니다. 절차적 geometry, 경로 animation, parameter linkage를 가능한 한 끝까지 밀어붙이세요. isometric shading의 품질, 긴 저녁 그림자, 수확 줄무늬의 선명함이 이 렌더를 돋보이게 해야 합니다.

단일 self-contained HTML 파일을 만드세요. CSS와 JavaScript는 인라인으로만 작성하고, 외부 라이브러리, CDN, framework, font, image URL은 절대 사용하지 마세요. 이 파일은 SVG 및/또는 Canvas만으로 그린, 상호작용 가능한 물리적으로 그럴듯한 기계식 pocket-watch movement 분해 작업대를 렌더링해야 합니다. 페이지는 최신 브라우저에서 더블클릭만으로 올바르게 열리고 실행되어야 하며, 모든 것은 실시간으로 계산되고 애니메이션되어야 합니다. 장면. 작업대 위에 펼쳐진 분해도 형태의 brass watch movement를 탑다운 뷰로 보여주세요. 살아 있는 vector art로 mainspring barrel, stacked gear train(barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), 앞뒤로 흔들리는 pallet fork, 나선형 hairspring이 있는 balance wheel, 그리고 은은한 chapter ring 위를 움직이는 hour/minute/second hands를 렌더링하세요. 실제 gear teeth를 그리세요. 단순한 원이 아니라 involute-style flank가 있어야 하며, pitch circle에서 정확히 맞물리고, arbor, jewel, bridge, screw가 눈에 보여야 합니다. 전체 assembly는 movement core를 중심으로 동심원적으로 구성하고, control panel은 어두운 한쪽 모서리에 배치하세요. 기계 동작(이것이 핵심입니다. 흉내가 아니라 실제로 simulate해야 합니다). 실제 gear ratio로 gear train을 모델링하세요. 각 wheel의 angular velocity는 이웃 wheel의 angular velocity에 tooth count의 negative ratio를 곱한 값과 같아야 하므로, 맞물린 wheel들이 비례 속도로 반대 방향 회전하고 gear teeth가 겹치거나 미끄러지지 않고 맞물리는 모습이 보여야 합니다. escapement는 실제로 tick해야 합니다. escape wheel은 oscillating pallet fork에 의해 잠기고 풀리면서 한 번에 한 tooth씩 discrete step으로 전진해야 하며, pallet fork는 고정 beat로 흔들리는 balance wheel에 의해 구동되어야 합니다. 각 release("tick")는 escape wheel에 또렷한 step을 만들고, Web Audio API로 합성한 audible tick을 발생시켜야 합니다(audio file 사용 금지). seconds hand는 escapement와 같은 beat로 전진하고, minute 및 hour hands는 gear ratio를 통해 파생되어야 합니다. requestAnimationFrame과 실제 elapsed time으로 animation을 구동해 timing이 정확하게 유지되도록 하세요. 상호작용(모두 실시간으로 반응해야 합니다). - 드래그 가능한 winding crown/knob: 마우스 또는 터치로 드래그해 mainspring을 감으세요. wind-up gauge가 차오르고 spring coil이 눈에 띄게 조여져야 합니다. 손을 놓으면 저장된 energy가 방출되어 train을 구동하고, movement는 spring이 풀릴 때까지 작동한 뒤 관성으로 서서히 멈춥니다. - beat/running speed를 scale하는 "rate" slider를 제공해 천천히 tick하는 모습이나 빠르게 달리는 모습을 볼 수 있게 하세요. - stacked components를 완전히 조립된 상태에서 부채꼴로 펼쳐진 exploded diagram까지 축을 따라 연속적으로 분리하는 "explode" slider를 제공하세요. smooth interpolation, 분리된 part 사이의 connector guide-line, 그리고 어떤 explosion level에서도 모든 것이 정확히 회전하는 동작이 필요합니다. - 어떤 component든 hover 또는 tap하면 보석상 loupe처럼 동작해야 합니다. 해당 part를 highlight하고 나머지는 dim 처리하며, part name과 한 줄 function description이 담긴 labeled callout을 띄우세요. - 버튼: Wind, Release, Reset. 외관. 현실적인 watchmaking-workshop industrial aesthetic를 구현하세요. 따뜻하게 aged brass, 낡은 steel-grey, 깊은 ink-black background, 선명한 metallic highlight, 정교하게 etched된 gear teeth와 bevel 처리된 bridge를 사용하세요. upper-left에서 작업대 위로 비스듬히 들어오는 단일 window light beam을 simulate해 부품들이 부드럽고 길게 늘어진 shadow를 cast하게 하고, gear face가 회전할 때 specular highlight가 표면을 따라 이동하게 하세요. gradient, filter, subtle grain으로 depth를 더하세요. 어두운 모서리에는 깔끔하고 읽기 쉬운 HUD-style control과 label을 배치하세요. 요구사항. 모든 것을 하나의 .html 파일에 담으세요. viewport에 맞춰 scale되는 responsive layout, 부드러운 60fps animation, placeholder graphics 금지. movement는 절차적으로 그려지고 실제로 기계적으로 coupling되어야 합니다. 유능한 모델이라면 실제로 wind, mesh, tick하는 watch를 만들 수 있어야 하며, 약한 모델이라면 static spinning circles로 무너질 것입니다. gear ratios와 escapement logic을 설명하는 짧은 inline comment를 추가하세요.