Doubao Seed API for Reasoning and Coding

Bygg en komplett HTML-sida i en enda fil — ett .html-dokument med all CSS och JavaScript inbäddad, noll externa beroenden, inga CDN-länkar, inga webbtypsnitt, inga bildfiler eller data-URI:er. All grafik måste ritas proceduriellt vid körning med Canvas 2D API eller inline SVG; det får inte finnas några bitmappar, fotografier eller emoji någonstans. Sidan är en generativ canvas i realtid med en titel i stil med ”Harvest Field — Aerial Geometry Studio”, och hela konceptet är en fågelperspektivvy rakt ovanifrån av odlad jordbruksmark som användaren formar med sliders, medan en enda pixlad skördetröska kryper över den och raderar ordnade ränder ur rå gröda — det stilla, tillfredsställande ögonblicket när ordning skärs fram ur kaos. Komposition och rendering: fyll hela viewporten med ett regelbundet rektangulärt rutnät av rågliknande fältparceller, uppbyggda som platta vektorformer med en subtil isometrisk / falsk 2.5D-lyftning så att varje ruta uppfattas som ett lågt block, inte som en platt rektangel. Ljussätt scenen med en enda riktad skymningssol som stryker in från ett hörn (varm, låg vinkel); varje fältparcell och skördetröskan måste kasta en lång, mjuk skugga i motsatt riktning för att förstärka fältets geometriska, blockiga soliditet. Paletten ska vara en återhållen, smakfull jordtonsfamilj: senapsgult, ockra, olivgrönt och en enda accent av svedd, bearbetad bränd umbra för nyvänd jord — inget neon, inga rena primärfärger, håll det exklusivt och dämpat. Den övergripande stilen är platt vektor möter isometrisk mikrorelief, precis och arkitektonisk. Det levande beteendet: inom varje fältparcell, rendera fina sådrader (tunna parallella linjer) vars täthet är justerbar. En pixlad skördetröska — en liten blockig sprite ritad av några rektanglar — är det ENDA rörliga elementet och det enda som bryter rutnätets symmetri. Den rör sig långsamt längs antingen en inåtriktad spiralbana eller en serpentinformad boustrophedon-rutt (回字 / fram och tillbaka) över fältparcellerna. När den rör sig måste den ”radera” den stående grödan direkt i sin slåtterbredd och lämna efter sig skörderänder i realtid — alternerande ljusa och mörka klippta band, som en klippt gräsmatta eller spåret efter en riktig skördetröskas skärbord — permanent målade på fältet tills återställning. Skörden är en kontinuerlig, självgående animation via requestAnimationFrame; att se den fylla fältet ska kännas lugnt och hypnotiskt. Interaktivitet — alla reglage är sliders (plus ett par små växlar/knappar) i en ren, minimal sidopanel eller bottenpanel, och varenda ett måste reagera live utan att sidan laddas om: en slider för antal fältparceller (rutnätsupplösning, t.ex. 3×3 upp till 12×12), en slider för täthet på sådrader, en slider för grödans nyans (som förskjuter den stående grödan över skalan senap–ockra–oliv), en slider för skördeprogress eller skördetröskans hastighet, och en toggle för att växla skördetröskans bana mellan spiral och boustrophedon. Lägg till en diskret Återställ/Plantera om-knapp som regenererar fältet och startar om körningen. Ändring av antal rutor eller täthet ska regenerera layouten mjukt; att dra i nyansen ska tona om i realtid. Gör den helt responsiv så att rutnät och skuggor beräknas om vid fönsterstorleksändring, håll bildfrekvensen jämn och se till att koden är ren och fristående så att den öppnas korrekt genom att dubbelklicka på filen. Detta är varken ett spel eller en dashboard — det är ett generativt konstinstrument. Driv den proceduriella geometrin, bananimationen och parameterkopplingen så långt det går; kvaliteten på den isometriska skuggningen, de långa skymningsskuggorna och skörderändernas skärpa är det som ska få denna rendering att sticka ut.

Bygg en enda fristående HTML-fil (endast inline CSS och JavaScript — absolut inga externa bibliotek, CDN:er, ramverk, typsnitt eller bild-URL:er) som renderar en interaktiv, fysikaliskt rimlig demonteringsbänk för ett mekaniskt fickursverk, helt ritad med SVG och/eller Canvas. Sidan måste öppnas och köras korrekt genom att dubbelklickas i valfri modern webbläsare, med allt beräknat och animerat i realtid. SCENEN. En vy ovanifrån av ett exploderat urverk i mässing utlagt på en verkstadsbänk. Rendera, som levande vektorkonst, ett fjäderhus, en staplad kugghjulskedja (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), en ankargaffel som vaggar fram och tillbaka, ett balanshjul med en spiralformad hårfjäder samt tim-, minut- och sekundvisare som sveper över en subtil kapitelring. Rita riktiga kuggar (flanker i evolventstil, inte enkla cirklar), korrekt ingrepp vid delningscirklarna samt synliga tappar, juveler, bryggor och skruvar. Hela sammansättningen är koncentriskt arrangerad runt verkets kärna; kontrollpanelen är instoppad i ett mörkt hörn. MEKANIKEN (detta är poängen — simulera på riktigt, fejka inte). Modellera kugghjulskedjan med verkliga utväxlingar: varje hjuls vinkelhastighet är lika med grannens multiplicerad med det negativa förhållandet mellan deras kuggantal, så att kugghjul i ingrepp tydligt motroterar i proportionella hastigheter och kuggarna griper in utan överlappning eller glidning. Gångpartiet måste faktiskt ticka: gånghjulet avancerar en kugg i taget i diskreta steg, låst och släppt av den oscillerande ankargaffeln, som drivs av balanshjulet som svänger med fast takt. Varje frigivning (”tick”) ger ett distinkt steg i gånghjulet och ett hörbart tick med Web Audio API (syntetiserat, inga ljudfiler). Sekundvisaren avancerar i takt med gångpartiet; minut- och timvisarna härleds från den via utväxlingarna. Driv animationen med requestAnimationFrame och faktisk förfluten tid så att tidhållningen förblir korrekt. INTERAKTIONERNA (alla måste reagera live). - En dragbar uppdragskrona/ratt: dra den (mus eller touch) för att dra upp huvudfjädern — en uppdragsmätare fylls och fjäderspiralen dras synligt åt. Släpp för att låta lagrad energi urladdas och driva verket; mekanismen går tills fjädern har lindats av och glider sedan till stopp. - En ”rate”-slider som skalar takten/körhastigheten så att du kan se den ticka långsamt eller rusa. - En ”explode”-slider som kontinuerligt separerar de staplade komponenterna längs deras axlar från helt monterat till ett utvikt exploderat diagram, med mjuk interpolation, ledlinjer mellan separerade delar och allting fortfarande korrekt roterande vid varje explosionsnivå. - Hovra över (eller tryck på) valfri komponent för att fungera som en urmakarlupp: markera delen, tona ned resten och visa en svävande, etiketterad callout med delens namn och en enradig funktionsbeskrivning. - Knappar: Dra upp, Släpp, Återställ. UTSEENDET. Realistisk industriell urmakarverkstadskänsla: varm åldrad mässing, slitet stålgrått, djup bläcksvart bakgrund, skarpa metalliska högdagrar, fint etsade kuggar och fasade bryggor. Simulera en enda strimma fönsterljus som stryker in från övre vänster över bänken så att delarna kastar mjuka, utdragna skuggor, och låt speglande högdagrar vandra längs kugghjulsytorna när de roterar. Använd gradienter, filter och subtil kornighet för djup. Rena, läsbara HUD-liknande reglage och etiketter i det mörka hörnet. KRAV. Allt i en .html-fil; responsiv layout som skalar till viewporten; jämn 60fps-animation; inga platshållargrafiker — urverket måste ritas proceduriellt och vara genuint mekaniskt kopplat så att en kapabel modell skapar ett ur som verkligen dras upp, griper in och tickar, medan en svag modell kollapsar till statiska snurrande cirklar. Lägg till korta inline-kommentarer som namnger utväxlingarna och gångpartiets logik.