Doubao Seed API for Reasoning and Coding

Hãy xây dựng một trang HTML single-file hoàn chỉnh — một tài liệu .html duy nhất với toàn bộ CSS và JavaScript được inline, không có bất kỳ dependency bên ngoài nào, không dùng CDN link, không dùng web font, không dùng file ảnh hay data URI. Mọi yếu tố thị giác phải được vẽ theo thủ tục khi chạy bằng Canvas 2D API hoặc inline SVG; tuyệt đối không có bitmap, ảnh chụp hay emoji ở bất cứ đâu. Trang là một generative canvas thời gian thực, có tiêu đề kiểu như "Harvest Field — Aerial Geometry Studio", và toàn bộ ý tưởng là góc nhìn từ trên cao như mắt thần xuống một vùng đất canh tác, nơi người dùng định hình bằng các slider trong khi một chiếc máy gặt đập liên hợp pixelated duy nhất bò ngang qua, xóa dần những dải có trật tự khỏi lớp cây trồng thô — khoảnh khắc yên tĩnh, thỏa mãn khi trật tự được cắt ra từ hỗn độn. Bố cục và render: phủ kín toàn bộ viewport bằng một lưới chữ nhật đều gồm các thửa ruộng giống lúa mạch đen, được bố trí bằng các hình flat-vector với một chút nhấc khối isometric / giả 2.5D tinh tế, để mỗi thửa trông như một khối thấp chứ không phải hình chữ nhật phẳng. Chiếu sáng cảnh bằng một mặt trời hoàng hôn định hướng duy nhất rọi xiên từ một góc (ấm, góc thấp); mọi thửa ruộng và máy gặt đều phải đổ bóng dài, mềm theo hướng ngược lại để nhấn mạnh độ chắc khối, hình học của cánh đồng. Bảng màu là một họ tông đất tiết chế, tinh tế: vàng mù tạt, ochre, xanh olive, và một điểm nhấn duy nhất là burnt-umber cháy sẫm của đất vừa cày xới — không neon, không màu cơ bản thuần, giữ cảm giác cao cấp và trầm. Phong cách tổng thể là flat vector gặp vi địa hình isometric, chính xác và giàu tính kiến trúc. Hành vi sống động: bên trong mỗi thửa, render các hàng gieo hạt mảnh (những đường song song mỏng) với mật độ có thể điều chỉnh. Một chiếc máy gặt đập liên hợp pixelated — một sprite nhỏ dạng khối được vẽ từ vài hình chữ nhật — là phần tử chuyển động DUY NHẤT và là thứ duy nhất phá vỡ tính đối xứng của lưới. Nó tiến chậm theo một đường xoắn ốc vào trong hoặc một tuyến boustrophedon ngoằn ngoèo (回字 / qua-lại) trên các thửa ruộng. Khi di chuyển, nó phải "xóa" cây trồng đang đứng ngay trong vệt cắt và để lại các sọc thu hoạch thời gian thực — các dải cắt sáng tối xen kẽ, như bãi cỏ vừa được cắt hoặc vệt đầu cắt của máy gặt thật — được vẽ vĩnh viễn lên cánh đồng cho đến khi reset. Thu hoạch là một animation liên tục, tự chạy bằng requestAnimationFrame; nhìn nó lấp đầy cánh đồng phải tạo cảm giác êm dịu và thôi miên. Tương tác — tất cả điều khiển là slider (cộng thêm vài toggle/button nhỏ) trong một panel bên cạnh hoặc phía dưới, sạch và tối giản, và mọi điều khiển phải phản hồi trực tiếp mà không reload trang: một slider cho số thửa ruộng (độ phân giải lưới, ví dụ 3×3 đến 12×12), một slider cho mật độ hàng gieo hạt, một slider cho sắc độ cây trồng (dịch chuyển cây đang đứng trong dải vàng mù tạt-ochre-olive), một slider cho tiến độ thu hoạch hoặc tốc độ máy gặt, và một toggle để chuyển đường đi của máy gặt giữa xoắn ốc và boustrophedon. Cung cấp một nút Reset/Replant tinh tế để tạo lại cánh đồng và khởi động lại lượt chạy. Thay đổi số thửa hoặc mật độ nên tái tạo layout mượt mà; kéo hue nên đổi màu theo thời gian thực. Hãy làm trang hoàn toàn responsive để lưới và bóng đổ được tính lại khi thay đổi kích thước cửa sổ, giữ frame rate mượt, và bảo đảm code sạch, tự chứa để mở đúng chỉ bằng double-click file. Đây không phải game cũng không phải dashboard — đây là một nhạc cụ nghệ thuật tạo sinh. Hãy đẩy hình học thủ tục, animation đường đi và liên kết tham số xa nhất có thể; chất lượng của shading isometric, bóng hoàng hôn dài và độ sắc nét của các sọc thu hoạch là những thứ phải khiến bản render này nổi bật.

Hãy xây dựng một file HTML tự chứa duy nhất (chỉ dùng inline CSS và JavaScript — tuyệt đối không có thư viện ngoài, CDN, framework, font hay URL ảnh) render một bàn tháo rời bộ máy đồng hồ bỏ túi cơ khí tương tác, có tính hợp lý vật lý, được vẽ hoàn toàn bằng SVG và/hoặc Canvas. Trang phải mở và chạy đúng bằng cách double-click trong mọi trình duyệt hiện đại, với mọi thứ được tính toán và animate theo thời gian thực. CẢNH. Góc nhìn từ trên xuống của một bộ máy đồng hồ bằng đồng thau được bung tách trên bàn thợ. Render dưới dạng vector art sống động một hộp dây cót, một bộ truyền bánh răng xếp tầng (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), một pallet fork lắc qua lại, một balance wheel với hairspring xoắn ốc, và kim giờ/phút/giây quét trên một chapter ring tinh tế. Vẽ răng bánh răng thật (sườn răng kiểu involute, không phải các vòng tròn đơn giản), ăn khớp đúng tại các vòng chia, cùng các trục, chân kính, cầu máy và vít nhìn thấy được. Toàn bộ cụm được bố trí đồng tâm quanh lõi bộ máy; panel điều khiển được giấu gọn vào một góc tối. CƠ HỌC (đây là điểm mấu chốt — hãy mô phỏng thật, không giả lập hời hợt). Mô hình hóa bộ truyền bánh răng bằng tỷ số truyền thật: vận tốc góc của mỗi bánh bằng vận tốc của bánh lân cận nhân với tỷ số âm theo số răng của chúng, để các bánh ăn khớp nhìn thấy được quay ngược chiều với tốc độ tỷ lệ, và răng khóa vào nhau mà không chồng lấn hay trượt. Escapement phải thực sự tick: escape wheel tiến từng răng theo các bước rời rạc, được khóa và nhả bởi pallet fork dao động, pallet fork được dẫn động bởi balance wheel lắc ở nhịp cố định. Mỗi lần nhả ("tick") tạo ra một bước dứt khoát ở escape wheel và một tiếng tick nghe được bằng Web Audio API (tổng hợp, không dùng file âm thanh). Kim giây tiến theo nhịp với escapement; kim phút và kim giờ suy ra từ nó thông qua tỷ số truyền. Dẫn animation bằng requestAnimationFrame và thời gian trôi thực để timing luôn chính xác. TƯƠNG TÁC (tất cả phải phản hồi trực tiếp). - Một núm/crown lên dây có thể kéo: kéo nó (chuột hoặc cảm ứng) để lên dây cót — một gauge lên dây đầy dần và cuộn dây cót siết lại rõ ràng. Thả ra để năng lượng tích trữ xả ra, cấp lực cho bộ truyền; bộ máy chạy cho đến khi dây cót nhả hết, rồi trôi chậm và dừng. - Một slider "rate" để scale nhịp/tốc độ chạy, giúp bạn quan sát nó tick chậm rãi hoặc chạy rất nhanh. - Một slider "explode" liên tục tách các component xếp tầng dọc theo trục của chúng, từ lắp ráp hoàn chỉnh đến sơ đồ bung tỏa, với nội suy mượt, các đường dẫn nối giữa những phần tách rời, và mọi thứ vẫn quay đúng ở mọi mức explode. - Hover (hoặc tap) bất kỳ component nào để hoạt động như kính lúp của thợ kim hoàn: highlight phần đó, làm mờ phần còn lại, và nổi một callout có nhãn với tên bộ phận cùng mô tả chức năng một dòng. - Các nút: Wind, Release, Reset. DIỆN MẠO. Thẩm mỹ công nghiệp của xưởng chế tác đồng hồ chân thực: đồng thau cũ ấm, xám thép phong hóa, nền đen mực sâu, highlight kim loại sắc nét, răng bánh răng được khắc tinh xảo và cầu máy vát cạnh. Mô phỏng một luồng sáng cửa sổ duy nhất quét xiên từ phía trên-trái qua bàn, để các bộ phận đổ bóng mềm kéo dài, và để highlight phản chiếu chạy dọc trên mặt bánh răng khi chúng quay. Dùng gradient, filter và hạt nhiễu tinh tế để tạo chiều sâu. Điều khiển và nhãn phong cách HUD sạch, dễ đọc trong góc tối. YÊU CẦU. Mọi thứ nằm trong một file .html; layout responsive scale theo viewport; animation mượt 60fps; không có đồ họa placeholder — bộ máy phải được vẽ theo thủ tục và thực sự ghép nối cơ học, để một model đủ năng lực tạo ra chiếc đồng hồ thật sự lên dây, ăn khớp và tick, còn model yếu sẽ sụp thành các vòng tròn quay tĩnh. Thêm comment inline ngắn gọi tên các tỷ số truyền và logic escapement.