Kimi API for Vision-to-Code Generation

สร้างหน้า HTML แบบไฟล์เดียวที่สมบูรณ์สำหรับเกมอาร์เคด Snake ที่เล่นได้ โดยรวม CSS และ JavaScript ไว้ในไฟล์เดียวทั้งหมด และไม่มี dependency ภายนอก, CDNs, รูปภาพ หรือฟอนต์ใด ๆ เรนเดอร์กระดานบน canvas ด้วยโทนสีสมัยใหม่แบบนีออนบนพื้นมืด มีการเคลื่อนไหวที่ลื่นไหล และมีเส้นแสงเรืองนุ่ม ๆ ตามหลังงู รองรับการควบคุมด้วยปุ่มลูกศรและ WASD รวมถึงท่าทางปัดบนอุปกรณ์สัมผัส แสดงคะแนนแบบเรียลไทม์และคะแนนสูงสุดแบบคงอยู่ และเพิ่มความเร็วของเกมทีละน้อยเมื่อคะแนนสูงขึ้น ให้เกิด particle burst เล็ก ๆ ทุกครั้งที่กินอาหาร แสดง overlay เกมจบแบบเคลื่อนไหวพร้อมปุ่มเริ่มใหม่ และทำให้เลย์เอาต์ responsive เพื่อให้กระดานอยู่กึ่งกลางและอ่านได้ชัดเจนทั้งบนเดสก์ท็อปและมือถือ

สร้างไฟล์ HTML ไฟล์เดียวที่ทำงานได้ครบในตัวเอง (รวม CSS และ JavaScript ไว้ในไฟล์เดียวทั้งหมด ห้ามมี dependency ภายนอก, CDNs, รูปภาพ หรือ web fonts โดยเด็ดขาด) ที่เรนเดอร์ “living digital terrarium” แบบโต้ตอบ — ขวดแก้วปิดผนึกวางอยู่กลางหน้าจอ ภายในมีป่าฝนจิ๋วที่พึ่งพาตัวเองและเติบโตแบบเรียลไทม์ เมื่อเปิดในเบราว์เซอร์สมัยใหม่ใด ๆ จะต้องรันทันทีที่ 60fps โดยไม่ต้องมีขั้นตอน build ฉากหลักและเลย์เอาต์: จัดองค์ประกอบให้อยู่กึ่งกลางแบบสมมาตร โดยให้ขวดแก้วเป็นเวทีหลักบนพื้นหลังมืดลึกแบบ vignette (radial gradient จากจุดกลางที่สว่างนุ่มด้วยสีมอส ค่อย ๆ จางไปสู่ขอบเกือบดำ) เพื่อให้ทุกสายตาโฟกัสที่ขวด เรนเดอร์ทุกอย่างบน HTML5 Canvas เต็มหน้าต่างที่วางอยู่ใต้ chrome ของ DOM/CSS แบบ glassmorphism จริง: ผนังขวดต้องแสดงคุณสมบัติของแก้วอย่างสมจริง — ไฮไลต์การหักเหแบบโค้ง, เส้นขอบแสงสะท้อนสว่างแบบ specular rim-light, ความเบลอฝ้าอ่อน ๆ และหยดน้ำเกาะกระจายพร้อมเอฟเฟกต์เลนส์จิ๋ว — ทำด้วย radial/linear gradients หลายชั้น, backdrop-filter blur, เส้นขีดสีขาวกึ่งโปร่งใส และ box-shadows นุ่ม ๆ ภายในขวดมีดินร่วนชื้นสีเข้มอยู่ด้านล่าง และมีหมอกเชิงปริมาตรจาง ๆ ที่ลอยเคลื่อนช้า ๆ เลเยอร์ทางเทคนิคสามชั้นที่ต้องซ้อนและอยู่ร่วมกันได้ (นี่คือจุดที่แยกโมเดลอ่อนกับโมเดลแข็ง — โมเดลอ่อนจะทำได้แค่ภาพนิ่ง ส่วนโมเดลแข็งจะทำให้ทั้งขวดมีชีวิต): 1. การเติบโตแบบ Recursive L-system: เถาวัลย์ ใบเฟิร์น และมอสถูกสร้างด้วย L-system / อัลกอริทึมการแตกกิ่งแบบ recursive และทำแอนิเมชันการคลี่ตัวตามเวลา — ลำต้นยืดยาว กิ่งแตกย่อย ใบเฟิร์นคลี่ออก ใบไม้ขยายด้วย easing การเติบโตต้องเป็นธรรมชาติและสุ่มเล็กน้อยต่อกิ่ง (angle jitter, thickness taper, length decay) เพื่อให้ไม่มีพืชสองต้นดูเหมือนกันเมื่อโหลดใหม่ 2. Particle system: ละอองแสงสีอำพันคล้ายหิ่งห้อย (หลายสิบดวง) ลอยและโคลงผ่านหมอก พร้อมแสงเรืองแบบ additive นุ่ม ๆ และ parallax อ่อน ๆ รวมถึงละอองไอน้ำ/เกสรที่ลอยขึ้น; อนุภาคตอบสนองต่อพืชที่เพิ่งเติบโตอย่างละเอียดอ่อน 3. วัฏจักรแสงกลางวัน–กลางคืน: ลูปแสง ambient ต่อเนื่องที่กวาดทิศทาง key light จากด้านบนลงมา ตั้งแต่รุ่งอรุณสีขาวเย็น → ยามเย็นสีทองอบอุ่น → กลางคืนสีครามเข้ม แล้ววนกลับ โดยเปลี่ยนสีของทั้งฉาก ไฮไลต์แก้ว หมอก และโทนสีพืชให้สอดคล้องกัน พืชต้องแสดง phototropism — ลำต้นโค้งและเอนปลายเข้าหาทิศทางแสงปัจจุบันขณะที่แสงเคลื่อนที่ การโต้ตอบหลัก: เมื่อคลิกที่ใดก็ได้บนผนังขวด/ภายในขวด ให้หย่อนเมล็ดหนึ่งเมล็ดลงสู่ดินร่วนที่ตำแหน่ง x ของการคลิก และเมล็ดนั้นต้องแสดงวงจรชีวิตเต็มรูปแบบตามลำดับอย่างมองเห็นได้ชัด — เมล็ดร่วงและหยุดนิ่ง งอกเป็นต้นอ่อน ต้นอ่อนแตกกิ่งแบบ recursive ผ่าน L-system จากนั้นบานเป็นดอกไม้เรืองแสงเล็ก ๆ เมื่อโตเต็มที่ — แต่ละช่วงต้องใช้ easing และอ่านสถานะได้ชัดเจน พร้อม ripple/ฝุ่นฟุ้งนุ่ม ๆ ตอนตกถึงพื้น การคลิกหลายครั้งต้องสร้างพืชหลายต้นที่อยู่ร่วมกันและเติบโตต่อไป ค่อย ๆ เติม terrarium ให้กลายเป็นพุ่มหนาทึบขึ้น ใส่คอนโทรลแบบ inline ที่ละเอียดอ่อนสองสามรายการเป็นปุ่ม pill แบบ glassmorphic (เช่น “Reset terrarium” และ toggle “Day/Night: auto ⇄ drag” ที่ผู้ใช้สามารถ scrub เวลาในวันได้ รวมถึง pause เป็นตัวเลือก) ใส่บรรทัดคำใบ้จาง ๆ (“tap the glass to plant a seed”) ที่ค่อย ๆ หายไปหลังจากมีการโต้ตอบครั้งแรก พาเลตและอารมณ์: ใบไม้โทน forest ink-green และ mossy yellow-green, แสงเรืองสีอำพัน/น้ำผึ้งสำหรับละอองแสงและดอกไม้, โทนแก้วสี teal เย็นบนขวด, แสงอาบสีทองอบอุ่นและครามเย็นที่ไล่ผ่านวัฏจักรกลางวัน–กลางคืน ความรู้สึกโดยรวมต้องเงียบ สงบ มีลมหายใจ และชวนสมาธิ — การเคลื่อนไหวช้า ๆ นุ่มนวล ไม่มีการเปลี่ยนฉากที่กระแทกตา ข้อกำหนดทางเทคนิค: ใช้ requestAnimationFrame พร้อม delta-time เพื่อให้แอนิเมชันไม่ขึ้นกับ frame-rate; ทำให้ canvas responsive ต่อการ resize หน้าต่าง พร้อมการ scale ตาม devicePixelRatio ที่ถูกต้อง และรักษาขวดให้อยู่กึ่งกลาง; จำกัดจำนวน particle/branch อย่างเหมาะสมเพื่อให้ยังลื่นไหล; ให้ randomness ทั้งหมด seeded ต่อพืชแต่ละต้นเพื่อให้การเติบโตดูเป็นธรรมชาติ ทุกอย่าง — geometry, glow, glass, mist, lighting, particles และพืช recursive — ต้องถูกวาดหรือคำนวณด้วยโค้ด โดยไม่มี assets ภายนอกเลย ส่งมอบเฉพาะเอกสาร HTML ฉบับสมบูรณ์ที่พร้อมบันทึกเป็นไฟล์ .html หนึ่งไฟล์แล้วเปิดใช้งานได้ทันที