Doubao Seed API for Reasoning and Coding

สร้างหน้า HTML แบบไฟล์เดียวที่สมบูรณ์ — เอกสาร .html หนึ่งไฟล์ที่ฝัง CSS และ JavaScript ทั้งหมดไว้ภายใน ไม่มี dependency ภายนอกเลย ไม่มีลิงก์ CDN ไม่มี web fonts ไม่มีไฟล์รูปภาพหรือ data URI ภาพทุกอย่างต้องถูกวาดขึ้นแบบ procedural ใน runtime ด้วย Canvas 2D API หรือ inline SVG เท่านั้น ห้ามมี bitmap, ภาพถ่าย หรือ emoji ใด ๆ ทั้งสิ้น หน้านี้เป็น canvas เชิงกำเนิดแบบ real-time ชื่อประมาณว่า "Harvest Field — Aerial Geometry Studio" และแนวคิดทั้งหมดคือมุมมองจากเบื้องบนแบบ god's-eye, top-down ของพื้นที่เพาะปลูกที่ผู้ใช้ปรับรูปทรงด้วย sliders ขณะที่รถเกี่ยวข้าว pixelated เพียงคันเดียวค่อย ๆ เคลื่อนผ่านไป ลบแถบที่เป็นระเบียบออกจากพืชผลดิบ — ช่วงเวลาเงียบ ๆ ที่น่าพึงพอใจของความเป็นระเบียบซึ่งถูกตัดออกมาจากความยุ่งเหยิง องค์ประกอบและการเรนเดอร์: เติมเต็ม viewport ทั้งหมดด้วยกริดสี่เหลี่ยมผืนผ้าสม่ำเสมอของแปลงไร่คล้าย rye จัดวางเป็นรูปทรง flat-vector พร้อมมิติยกตัวแบบ isometric / faux-2.5D อย่างละเอียด เพื่อให้แต่ละแปลงอ่านเป็นบล็อกเตี้ย ๆ ไม่ใช่สี่เหลี่ยมแบน ๆ ให้แสงของฉากเป็นดวงอาทิตย์ยามโพล้เพล้แบบทิศทางเดียว ส่องเฉียงจากมุมหนึ่งด้วยแสงอุ่นมุมต่ำ ทุกแปลงและรถเกี่ยวต้องทอดเงายาวนุ่มไปในทิศตรงข้าม เพื่อเสริมความแข็งแรงแบบเรขาคณิตและเป็นบล็อกของทุ่ง โทนสีต้องเป็นตระกูล earth-tone ที่สุภาพ มีรสนิยม: mustard yellow, ochre, olive green และ accent เดียวเป็น scorched tilled burnt-umber สำหรับดินที่เพิ่งไถใหม่ — ห้าม neon ห้ามแม่สีบริสุทธิ์ ให้ดูหรูและ muted สไตล์รวมคือ flat vector ผสาน isometric micro-relief ที่แม่นยำและมีความเป็นสถาปัตยกรรม พฤติกรรมที่มีชีวิต: ภายในแต่ละแปลง ให้เรนเดอร์แถวหว่านเมล็ดแบบ drill-seeding ละเอียด ๆ เป็นเส้นขนานบาง ๆ โดยปรับความหนาแน่นได้ รถเกี่ยวข้าว pixelated หนึ่งคัน — sprite ทรงบล็อกขนาดเล็กที่วาดจากสี่เหลี่ยมไม่กี่ชิ้น — เป็นองค์ประกอบเคลื่อนไหวเพียงอย่างเดียว และเป็นสิ่งเดียวที่ทำลายสมมาตรของกริด มันค่อย ๆ เคลื่อนที่ตามเส้นทางแบบ spiral inward หรือ serpentine boustrophedon (回字 / ไป-กลับ) ข้ามแปลงต่าง ๆ ขณะเคลื่อนที่มันต้อง "ลบ" พืชผลที่ยืนต้นอยู่ตรงแนวเกี่ยวของมัน และทิ้งแถบการเก็บเกี่ยวแบบ real-time ไว้ด้านหลัง — แถบที่ถูกตัดสลับสว่างและเข้ม เหมือนสนามหญ้าที่ถูกตัดหรือรอยหัวเกี่ยวของรถเกี่ยวจริง — ถูกวาดถาวรลงบนทุ่งจนกว่าจะ reset การเก็บเกี่ยวเป็น animation ที่ทำงานต่อเนื่องด้วยตัวเองผ่าน requestAnimationFrame การดูมันเติมเต็มทุ่งควรให้ความรู้สึกสงบและเหมือนถูกสะกด การโต้ตอบ — control ทั้งหมดเป็น sliders พร้อม toggles/buttons เล็ก ๆ อีกสองสามตัว ใน panel ด้านข้างหรือด้านล่างที่สะอาด เรียบง่าย และทุกตัวต้องตอบสนองสดโดยไม่ reload หน้า: slider สำหรับจำนวนแปลงไร่ (ความละเอียดกริด เช่น 3×3 ถึง 12×12), slider สำหรับความหนาแน่นของแถว drill-seeding, slider สำหรับ crop hue (เลื่อนสีของพืชที่ยืนต้นอยู่ในช่วง mustard-ochre-olive), slider สำหรับความคืบหน้าการเก็บเกี่ยวหรือความเร็วรถเกี่ยว และ toggle เพื่อสลับเส้นทางรถเกี่ยวระหว่าง spiral กับ boustrophedon ใส่ปุ่ม Reset/Replant ที่ละเอียดสุภาพเพื่อสร้างทุ่งใหม่และเริ่มรอบใหม่ การเปลี่ยนจำนวนแปลงหรือความหนาแน่นควรสร้าง layout ใหม่อย่างนุ่มนวล ส่วนการลาก hue ควรเปลี่ยน tint แบบ real time ทำให้ responsive อย่างเต็มที่ เพื่อให้กริดและเงาคำนวณใหม่เมื่อ window resize รักษา frame rate ให้ลื่น และให้ code สะอาด จบในตัวเอง เพื่อให้เปิดได้ถูกต้องด้วยการ double-click ไฟล์ นี่ไม่ใช่ game และไม่ใช่ dashboard — แต่เป็นเครื่องมือ generative art ผลักดัน procedural geometry, path animation และการเชื่อมโยง parameter ให้ไปได้ไกลที่สุด คุณภาพของ isometric shading, เงายาวยามโพล้เพล้ และความคมของแถบการเก็บเกี่ยวคือสิ่งที่ควรทำให้ render นี้โดดเด่น

สร้างไฟล์ HTML แบบ self-contained ไฟล์เดียว (มีเฉพาะ inline CSS และ JavaScript — ห้ามใช้ external libraries, CDNs, frameworks, fonts หรือ image URLs โดยเด็ดขาด) ที่เรนเดอร์โต๊ะชำแหละกลไกนาฬิกาพกเชิงกลแบบ interactive และสมจริงตามฟิสิกส์ วาดทั้งหมดด้วย SVG และ/หรือ Canvas หน้าเว็บต้องเปิดและทำงานได้ถูกต้องด้วยการ double-click ใน browser สมัยใหม่ใด ๆ โดยทุกอย่างถูกคำนวณและ animate แบบ real time ฉาก: มุมมอง top-down ของกลไกนาฬิกาทองเหลืองแบบ exploded ที่จัดวางบนโต๊ะช่าง นำเสนอเป็น vector art ที่มีชีวิต ได้แก่ mainspring barrel, gear train แบบซ้อนชั้น (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), pallet fork ที่โยกไปมา, balance wheel พร้อม hairspring แบบเกลียว และเข็ม hour/minute/second ที่กวาดไปเหนือ chapter ring อันละเอียดอ่อน วาดฟันเฟืองจริง ๆ (ด้านข้างแบบ involute-style ไม่ใช่วงกลมธรรมดา), ขบกันอย่างถูกต้องที่ pitch circles และมี arbors, jewels, bridges และ screws ที่มองเห็นได้ ทั้ง assembly จัดองค์ประกอบแบบ concentric รอบแกน movement core ส่วน control panel ซ่อนไว้ในมุมมืด กลไก (นี่คือหัวใจ — ทำให้จำลองจริง ไม่ใช่แค่ทำหลอก): จำลอง gear train ด้วย gear ratios จริง: ความเร็วเชิงมุมของล้อแต่ละตัวเท่ากับของเพื่อนบ้านคูณด้วยอัตราส่วนติดลบของจำนวนฟัน ดังนั้นเฟืองที่ขบกันต้องหมุนสวนทางกันอย่างเห็นได้ชัดด้วยความเร็วตามสัดส่วน และฟันเฟืองสอดประสานกันโดยไม่ทับซ้อนหรือไถล escapement ต้อง tick จริง: escape wheel ขยับทีละหนึ่งฟันแบบ discrete steps ถูกล็อกและปล่อยโดย pallet fork ที่แกว่งซึ่งขับด้วย balance wheel ที่สวิงด้วย beat คงที่ ทุกครั้งที่ปล่อย ("tick") ต้องทำให้ escape wheel ก้าวอย่างคมชัดและมีเสียง tick ได้ยินโดยใช้ Web Audio API (สังเคราะห์เสียงเอง ไม่มีไฟล์เสียง) เข็มวินาทีเดินตาม beat ของ escapement ส่วนเข็มนาทีและชั่วโมง derived จากมันผ่าน gear ratios ขับ animation ด้วย requestAnimationFrame และเวลาที่ผ่านไปจริงเพื่อให้ timing แม่นยำ การโต้ตอบ (ทั้งหมดต้องตอบสนองสด) - winding crown/knob ที่ลากได้: ลากมัน (mouse หรือ touch) เพื่อไขลาน mainspring — gauge การไขลานเติมขึ้น และขด spring ต้องรัดแน่นขึ้นอย่างเห็นได้ชัด ปล่อยเพื่อให้พลังงานสะสมคายออกมาขับ train; movement ทำงานจน spring คลายหมด แล้วค่อย ๆ coast ไปหยุด - slider "rate" ที่ scale beat/running speed เพื่อให้ดู tick แบบช้า ๆ หรือเร็วจี๋ได้ - slider "explode" ที่แยก component ที่ซ้อนกันออกตามแกนอย่างต่อเนื่อง ตั้งแต่ประกอบสนิทจนเป็นแผนภาพ exploded แบบแผ่ออก พร้อม interpolation นุ่มนวล, connector guide-lines ระหว่างชิ้นส่วนที่ถูกแยก และทุกอย่างยังหมุนอย่างถูกต้องในทุกระดับ explosion - Hover (หรือ tap) component ใดก็ได้เพื่อทำหน้าที่เหมือน loupe ของช่างอัญมณี: highlight ชิ้นส่วนนั้น, dim ส่วนที่เหลือ และลอย callout พร้อม label ชื่อชิ้นส่วนและคำอธิบายหน้าที่หนึ่งบรรทัด - Buttons: Wind, Release, Reset ภาพลักษณ์: สุนทรียะแบบอุตสาหกรรมของ workshop งานทำนาฬิกาที่สมจริง: ทองเหลืองเก่าโทนอุ่น, steel-grey ที่มีรอยใช้งาน, พื้นหลัง deep ink-black, highlight โลหะคมชัด, ฟันเฟืองสลักละเอียด และ bridges ขอบ bevel จำลองลำแสงจากหน้าต่างเพียงลำเดียวที่สาดเฉียงจาก upper-left ผ่านโต๊ะ ให้ชิ้นส่วนทอดเงานุ่มยาว และให้ specular highlights เคลื่อนบนหน้าฟันเฟืองเมื่อหมุน ใช้ gradients, filters และ grain บาง ๆ เพื่อเพิ่มมิติ controls และ labels เป็นสไตล์ HUD ที่สะอาด อ่านง่าย ในมุมมืด ข้อกำหนด: ทุกอย่างอยู่ในไฟล์ .html เดียว; layout responsive ที่ scale ตาม viewport; animation ลื่น 60fps; ไม่มี placeholder graphics — movement ต้องถูกวาดแบบ procedural และเชื่อมกลไกกันจริง เพื่อให้โมเดลที่มีความสามารถสร้างนาฬิกาที่ไขลาน ขบเฟือง และ tick ได้จริง ในขณะที่โมเดลที่อ่อนกว่าจะพังเป็นวงกลมหมุนแบบ static ใส่ inline comments สั้น ๆ ระบุ gear ratios และ logic ของ escapement