Doubao Seed API for Reasoning and Coding

Costruisci una pagina HTML completa in un singolo file: un unico documento .html con tutto il CSS e il JavaScript inline, zero dipendenze esterne, nessun link CDN, nessun web font, nessun file immagine o data URI. Ogni elemento visivo deve essere disegnato proceduralmente a runtime con la Canvas 2D API o inline SVG; non devono esserci bitmap, fotografie o emoji da nessuna parte. La pagina è una tela generativa in tempo reale intitolata qualcosa come "Harvest Field — Aerial Geometry Studio", e l'intero concetto è una vista dall'alto, a volo d'uccello, di un terreno agricolo coltivato che l'utente modella con slider mentre una singola mietitrebbia pixelata lo attraversa lentamente, cancellando strisce ordinate dal raccolto grezzo: il momento quieto e appagante in cui l'ordine viene ritagliato dal caos. Composizione e rendering: riempi l'intero viewport con una griglia rettangolare regolare di appezzamenti simili a campi di segale, realizzati con forme flat-vector e un sottile rilievo isometrico / finto 2.5D, così che ogni appezzamento appaia come un blocco basso, non come un rettangolo piatto. Illumina la scena con un unico sole direzionale al crepuscolo che radente arriva da un angolo (caldo, a basso angolo); ogni appezzamento e la mietitrebbia devono proiettare una lunga ombra morbida nella direzione opposta per rafforzare la solidità geometrica e squadrata del campo. La palette deve essere una famiglia sobria e raffinata di toni terrosi: giallo senape, ocra, verde oliva e un solo accento di terra bruciata lavorata, color burnt-umber, per il suolo appena rivoltato: niente neon, niente primari puri, mantieni un risultato elegante e smorzato. Lo stile complessivo è flat vector che incontra un micro-rilievo isometrico, preciso e architettonico. Comportamento vivo: all'interno di ogni appezzamento, renderizza sottili file di semina a righe (linee parallele sottili) con densità regolabile. Una sola mietitrebbia pixelata, un piccolo sprite a blocchi disegnato con pochi rettangoli, è l'UNICO elemento in movimento e l'unica cosa che spezza la simmetria della griglia. Avanza lentamente lungo un percorso a spirale verso l'interno oppure a serpentina boustrophedon (回字 / avanti e indietro) attraverso gli appezzamenti. Mentre si muove deve "cancellare" il raccolto in piedi direttamente nella sua fascia di taglio e lasciare dietro di sé strisce di raccolta in tempo reale: bande tagliate alternate chiare e scure, come un prato falciato o la scia reale della barra di taglio di una mietitrebbia, dipinte in modo permanente sul campo fino al reset. La raccolta è un'animazione continua e autonoma tramite requestAnimationFrame; osservarla riempire il campo deve risultare calmo e ipnotico. Interattività: tutti i controlli sono slider (più un paio di piccoli toggle/pulsanti) in un pannello laterale o inferiore pulito e minimale, e ciascuno deve rispondere live senza ricaricare la pagina: uno slider per il numero di appezzamenti (risoluzione della griglia, ad es. da 3×3 a 12×12), uno slider per la densità delle file di semina, uno slider per la tonalità del raccolto (spostando il raccolto in piedi nell'intervallo senape-ocra-oliva), uno slider per l'avanzamento della raccolta o la velocità della mietitrebbia, e un toggle per cambiare il percorso della mietitrebbia tra spirale e boustrophedon. Fornisci un pulsante Reset/Replant discreto che rigenera il campo e riavvia il passaggio. Cambiare il numero di appezzamenti o la densità deve rigenerare il layout in modo fluido; trascinare la tonalità deve ricolorare tutto in tempo reale. Rendilo completamente responsive, così che griglia e ombre vengano ricalcolate al ridimensionamento della finestra, mantieni fluido il frame rate e assicurati che il codice sia pulito e autosufficiente, così da aprirsi correttamente con un doppio clic sul file. Non è né un gioco né una dashboard: è uno strumento di arte generativa. Spingi il più possibile la geometria procedurale, l'animazione del percorso e il collegamento tra parametri; la qualità dell'ombreggiatura isometrica, le lunghe ombre crepuscolari e la nitidezza delle strisce di raccolta sono ciò che deve far risaltare questo render.

Costruisci un singolo file HTML autosufficiente (solo CSS e JavaScript inline: assolutamente nessuna libreria esterna, CDN, framework, font o URL di immagini) che renderizzi un banco interattivo di smontaggio di un movimento meccanico da orologio da tasca, fisicamente plausibile, disegnato interamente con SVG e/o Canvas. La pagina deve aprirsi e funzionare correttamente con un doppio clic in qualsiasi browser moderno, con tutto calcolato e animato in tempo reale. LA SCENA. Una vista dall'alto di un movimento in ottone esploso, disposto su un banco da laboratorio. Renderizza, come arte vettoriale viva, un bariletto della molla motrice, un treno di ingranaggi sovrapposti (ruota del bariletto → ruota centrale → terza ruota → quarta ruota → ruota di scappamento), un'ancora che oscilla avanti e indietro, un bilanciere con una spirale del capello, e lancette di ore/minuti/secondi che scorrono sopra un sottile anello delle ore. Disegna veri denti degli ingranaggi (fianchi in stile evolvente, non semplici cerchi), ingranamento corretto sui cerchi primitivi e assi, rubini, ponti e viti visibili. L'intero insieme è composto concentricamente attorno al nucleo del movimento; il pannello di controllo è nascosto in un angolo scuro. LA MECCANICA (questo è il punto: deve simulare davvero, non fingere). Modella il treno di ingranaggi con rapporti reali: la velocità angolare di ogni ruota è uguale a quella della ruota vicina moltiplicata per il rapporto negativo dei rispettivi numeri di denti, così le ruote in presa contro-ruotano visibilmente a velocità proporzionali e i denti si incastrano senza sovrapporsi o slittare. Lo scappamento deve realmente ticchettare: la ruota di scappamento avanza di un dente alla volta in passi discreti, bloccata e rilasciata dall'ancora oscillante, azionata dal bilanciere che oscilla a un battito fisso. Ogni rilascio ("tick") produce un passo netto nella ruota di scappamento e un tick udibile usando la Web Audio API (sintetizzato, nessun file audio). La lancetta dei secondi avanza al ritmo dello scappamento; le lancette dei minuti e delle ore derivano da essa tramite i rapporti degli ingranaggi. Pilota l'animazione con requestAnimationFrame e tempo trascorso reale, così la temporizzazione resta accurata. LE INTERAZIONI (tutte devono rispondere live). - Una corona/manopola di carica trascinabile: trascinala (mouse o touch) per caricare la molla motrice: un indicatore di carica si riempie e la spirale della molla si stringe visibilmente. Rilasciala per lasciare che l'energia accumulata si scarichi alimentando il treno; il movimento funziona finché la molla si scarica, poi procede per inerzia fino a fermarsi. - Uno slider "rate" che scala il battito/la velocità di funzionamento, così puoi osservarlo ticchettare lentamente o correre. - Uno slider "explode" che separa continuamente i componenti sovrapposti lungo i loro assi, da completamente assemblati a diagramma esploso a ventaglio, con interpolazione fluida, linee guida di collegamento tra le parti separate, e tutto che continua a ruotare correttamente a qualsiasi livello di esplosione. - Passa il mouse (o tocca) qualsiasi componente per farlo funzionare come una lente da orologiaio: evidenzia quella parte, attenua il resto e mostra un callout flottante con il nome del pezzo e una descrizione in una riga della sua funzione. - Pulsanti: Wind, Release, Reset. L'ASPETTO. Estetica industriale realistica da laboratorio di orologeria: ottone caldo invecchiato, grigio acciaio vissuto, sfondo nero inchiostro profondo, riflessi metallici netti, denti degli ingranaggi finemente incisi e ponti bisellati. Simula un singolo fascio di luce da finestra che arriva radente dall'alto a sinistra attraversando il banco, così i pezzi proiettano ombre morbide e allungate, e lascia che i riflessi speculari scorrano lungo le facce degli ingranaggi mentre girano. Usa gradienti, filtri e una grana sottile per dare profondità. Controlli e label in stile HUD, puliti e leggibili, nell'angolo scuro. REQUISITI. Tutto in un unico file .html; layout responsive che si adatta al viewport; animazione fluida a 60fps; niente grafiche segnaposto: il movimento deve essere disegnato proceduralmente e accoppiato meccanicamente in modo autentico, così che un modello capace produca un orologio che si carica, ingrana e ticchetta davvero, mentre uno debole collassi in cerchi statici che girano. Aggiungi brevi commenti inline che nominino i rapporti degli ingranaggi e la logica dello scappamento.