Doubao Seed API for Reasoning and Coding

Crée une page HTML complète en un seul fichier — un document .html unique avec tout le CSS et le JavaScript intégrés, zéro dépendance externe, aucun lien CDN, aucune police web, aucun fichier image ni data URI. Chaque élément visuel doit être dessiné procéduralement à l’exécution avec la Canvas 2D API ou du SVG inline ; il ne doit y avoir aucun bitmap, aucune photographie ni aucun emoji. La page est un canvas génératif en temps réel intitulé quelque chose comme « Harvest Field — Aerial Geometry Studio », et tout le concept repose sur une vue zénithale, comme vue de dieu, d’une terre agricole cultivée que l’utilisateur façonne avec des sliders, pendant qu’une unique moissonneuse-batteuse pixelisée la parcourt lentement, effaçant des bandes ordonnées dans une culture brute — ce moment calme et satisfaisant où l’ordre est découpé dans le chaos. Composition et rendu : remplis tout le viewport avec une grille rectangulaire régulière de parcelles de champ évoquant le seigle, disposées en formes vectorielles plates avec un léger relief isométrique / faux 2.5D, afin que chaque parcelle se lise comme un bloc bas plutôt que comme un simple rectangle plat. Éclaire la scène avec un unique soleil directionnel de crépuscule venant en rasant depuis un coin (chaud, angle bas) ; chaque parcelle et la moissonneuse doivent projeter une longue ombre douce dans la direction opposée afin de renforcer la solidité géométrique et bloc du champ. La palette doit rester sobre, raffinée, dans une famille de tons terreux : jaune moutarde, ocre, vert olive, et un seul accent de terre labourée brûlée, brun ombre calciné, pour le sol fraîchement retourné — pas de néon, pas de couleurs primaires pures, garde un rendu haut de gamme et feutré. Le style général doit être un croisement entre vectoriel plat et micro-relief isométrique, précis et architectural. Comportement vivant : dans chaque parcelle, dessine de fines lignes de semis en rangs (lignes parallèles très fines) dont la densité est ajustable. Une seule moissonneuse-batteuse pixelisée — un petit sprite anguleux dessiné à partir de quelques rectangles — est le SEUL élément mobile et le seul qui rompt la symétrie de la grille. Elle avance lentement soit le long d’un chemin en spirale vers l’intérieur, soit selon un parcours serpentin en boustrophédon (回字 / aller-retour) à travers les parcelles. En se déplaçant, elle doit « effacer » la culture sur pied directement dans sa largeur de coupe et laisser derrière elle, en temps réel, des bandes de récolte — bandes claires et sombres alternées, comme une pelouse tondue ou la trace réelle de la barre de coupe d’une moissonneuse — peintes de façon permanente sur le champ jusqu’à la réinitialisation. La récolte est une animation continue et autonome via requestAnimationFrame ; la regarder remplir le champ doit produire une sensation calme et hypnotique. Interactivité — tous les contrôles sont des sliders (avec quelques petits toggles/boutons) dans un panneau latéral ou inférieur propre et minimal, et chacun doit réagir en direct sans rechargement de page : un slider pour le nombre de parcelles (résolution de grille, par ex. de 3×3 à 12×12), un slider pour la densité des rangs de semis, un slider pour la teinte des cultures (faisant varier la culture sur pied dans la gamme moutarde-ocre-olive), un slider pour la progression de la récolte ou la vitesse de la moissonneuse, et un toggle pour basculer le chemin de la moissonneuse entre spirale et boustrophédon. Prévois un bouton discret Reset/Replant qui régénère le champ et relance le passage. Changer le nombre de parcelles ou la densité doit régénérer la mise en page avec fluidité ; faire glisser la teinte doit recolorer en temps réel. Rends le tout entièrement responsive afin que la grille et les ombres soient recalculées au redimensionnement de la fenêtre, maintiens une fréquence d’images fluide, et veille à ce que le code soit propre et autonome pour s’ouvrir correctement par double-clic sur le fichier. Ce n’est ni un jeu ni un dashboard — c’est un instrument d’art génératif. Pousse aussi loin que possible la géométrie procédurale, l’animation du chemin et le couplage des paramètres ; la qualité de l’ombrage isométrique, les longues ombres crépusculaires et la netteté des bandes de récolte doivent être ce qui fait ressortir ce rendu.

Crée un fichier HTML unique et autonome (CSS et JavaScript inline uniquement — absolument aucune bibliothèque externe, aucun CDN, aucun framework, aucune police ni URL d’image) qui affiche un établi interactif de démontage de mouvement de montre de poche mécaniquement plausible, entièrement dessiné en SVG et/ou Canvas. La page doit s’ouvrir et fonctionner correctement par simple double-clic dans n’importe quel navigateur moderne, avec tout calculé et animé en temps réel. LA SCÈNE. Une vue de dessus d’un mouvement de montre en laiton éclaté, disposé sur un établi d’atelier. Rends, sous forme d’art vectoriel vivant, un barillet de ressort moteur, un train d’engrenages empilé (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), une ancre qui oscille d’avant en arrière, un balancier avec un spiral, ainsi que des aiguilles des heures/minutes/secondes balayant un discret cercle de minuterie. Dessine de vraies dents d’engrenage (flancs de style développante, pas de simples cercles), un engrènement correct au niveau des cercles primitifs, et des axes, rubis, ponts et vis visibles. L’ensemble de l’assemblage est composé concentriquement autour du cœur du mouvement ; le panneau de contrôle est glissé dans un coin sombre. LA MÉCANIQUE (c’est le point essentiel — fais-en une vraie simulation, pas un simulacre). Modélise le train d’engrenages avec de vrais rapports : la vitesse angulaire de chaque roue est égale à celle de sa voisine multipliée par le rapport négatif de leurs nombres de dents, de sorte que les roues engrenées contre-tournent visiblement à des vitesses proportionnelles et que les dents s’emboîtent sans se chevaucher ni glisser. L’échappement doit réellement faire tic-tac : la roue d’échappement avance dent par dent, par pas discrets, verrouillée puis libérée par l’ancre oscillante, elle-même entraînée par le balancier qui bat à une fréquence fixe. Chaque libération (« tic ») produit un pas net de la roue d’échappement et un tic audible avec la Web Audio API (synthétisé, sans fichiers audio). L’aiguille des secondes avance au rythme de l’échappement ; les aiguilles des minutes et des heures en dérivent via les rapports d’engrenage. Pilote l’animation avec requestAnimationFrame et le temps réellement écoulé afin que le timing reste précis. LES INTERACTIONS (toutes doivent réagir en direct). - Une couronne / molette de remontage déplaçable : fais-la glisser (souris ou tactile) pour remonter le ressort moteur — une jauge de remontage se remplit et la spirale du ressort se resserre visiblement. Relâche pour laisser l’énergie stockée se décharger et alimenter le train ; le mouvement tourne jusqu’à ce que le ressort se détende, puis ralentit jusqu’à l’arrêt. - Un slider « rate » qui module le rythme / la vitesse de marche afin de pouvoir observer le tic-tac lentement ou le voir s’emballer. - Un slider « explode » qui sépare continûment les composants empilés le long de leurs axes, depuis l’assemblage complet jusqu’à un diagramme éclaté en éventail, avec interpolation fluide, lignes guides de connexion entre les pièces séparées, et tous les éléments qui continuent à tourner correctement à n’importe quel niveau d’éclatement. - Au survol (ou au toucher), n’importe quel composant doit agir comme une loupe de joaillier : mettre cette pièce en évidence, estomper le reste, et afficher une infobulle flottante avec le nom de la pièce et une description en une ligne de sa fonction. - Boutons : Wind, Release, Reset. LE STYLE. Esthétique industrielle réaliste d’atelier d’horlogerie : laiton chaud vieilli, gris acier patiné, fond noir encre profond, reflets métalliques nets, dents d’engrenage finement gravées et ponts biseautés. Simule un unique faisceau de lumière de fenêtre arrivant en rasant depuis le coin supérieur gauche de l’établi, afin que les pièces projettent des ombres douces et allongées, et laisse des reflets spéculaires se déplacer le long des faces des engrenages lorsqu’ils tournent. Utilise des dégradés, des filtres et un grain subtil pour donner de la profondeur. Contrôles et libellés propres, lisibles, de style HUD, dans le coin sombre. EXIGENCES. Tout dans un seul fichier .html ; mise en page responsive qui s’adapte au viewport ; animation fluide à 60fps ; aucun graphique temporaire — le mouvement doit être dessiné procéduralement et réellement couplé mécaniquement, de sorte qu’un modèle capable produise une montre qui se remonte, s’engrène et fait tic-tac pour de vrai, tandis qu’un modèle faible s’effondrerait en simples cercles statiques qui tournent. Ajoute de courts commentaires inline nommant les rapports d’engrenage et la logique de l’échappement.