Doubao Seed API for Reasoning and Coding

Erstelle eine vollständige Single-File-HTML-Seite — ein einziges .html-Dokument mit sämtlichem CSS und JavaScript inline, ohne externe Abhängigkeiten, ohne CDN-Links, ohne Webfonts, ohne Bilddateien oder Data URIs. Jede visuelle Darstellung muss zur Laufzeit prozedural mit der Canvas 2D API oder inline SVG gezeichnet werden; es darf nirgends Bitmaps, Fotografien oder Emoji geben. Die Seite ist ein Echtzeit-generativer Canvas mit einem Titel wie etwa "Harvest Field — Aerial Geometry Studio". Das gesamte Konzept ist eine Draufsicht aus der Vogelperspektive auf kultiviertes Ackerland, das der Nutzer mit Slidern formt, während ein einzelner pixeliger Mähdrescher darüberkriecht und geordnete Streifen aus roher Ernte herausschneidet — dieser stille, befriedigende Moment, in dem Ordnung aus Chaos geschnitten wird. Komposition und Rendering: Fülle den gesamten Viewport mit einem regelmäßigen rechteckigen Raster aus roggenähnlichen Feldparzellen, angelegt als flache Vektorformen mit subtiler isometrischer / Faux-2.5D-Anhebung, sodass jede Parzelle wie ein niedriger Block wirkt und nicht wie ein flaches Rechteck. Beleuchte die Szene mit einer einzelnen gerichteten Abendsonne, die flach und warm aus einer Ecke einfällt; jede Parzelle und der Mähdrescher müssen einen langen, weichen Schatten in die entgegengesetzte Richtung werfen, um die geometrische, blockhafte Solidität des Feldes zu verstärken. Die Palette ist eine zurückhaltende, geschmackvolle Erdtöne-Familie: Senfgelb, Ocker, Olivgrün und ein einzelner Akzent aus verbranntem Umbra für frisch umgebrochenen Boden — kein Neon, keine reinen Primärfarben, hochwertig und gedämpft. Der Gesamtstil ist eine Mischung aus Flat Vector und isometrischem Mikrorelief, präzise und architektonisch. Das lebendige Verhalten: Rendere innerhalb jeder Parzelle feine Drillreihen (dünne parallele Linien), deren Dichte einstellbar ist. Ein pixeliger Mähdrescher — ein kleines blockiges Sprite, aus wenigen Rechtecken gezeichnet — ist das EINZIGE bewegte Element und das Einzige, was die Symmetrie des Rasters bricht. Er bewegt sich langsam entweder entlang einer nach innen führenden Spiralbahn oder einer serpentinischen Boustrophedon-Route (回字 / hin und her) über die Parzellen. Während er fährt, muss er die stehende Ernte direkt in seiner Schneise "löschen" und in Echtzeit Ernterstreifen hinterlassen — abwechselnd helle und dunkle geschnittene Bänder, wie bei einem gemähten Rasen oder der Spur eines echten Mähdrescher-Schneidwerks — dauerhaft auf das Feld gemalt, bis zurückgesetzt wird. Die Ernte ist eine kontinuierliche, selbstlaufende Animation via requestAnimationFrame; zuzusehen, wie sie das Feld füllt, soll ruhig und hypnotisch wirken. Interaktivität — alle Steuerelemente sind Slider (plus ein paar kleine Toggles/Buttons) in einem sauberen, minimalen Seiten- oder unteren Panel, und jedes muss live ohne Neuladen der Seite reagieren: ein Slider für die Anzahl der Feldparzellen (Rasterauflösung, z. B. 3×3 bis 12×12), ein Slider für die Dichte der Drillreihen, ein Slider für den Erntefarbton (verschiebt die stehende Ernte im Bereich Senf-Ocker-Oliv), ein Slider für Erntefortschritt oder Mähdreschergeschwindigkeit und ein Toggle, um den Pfad des Mähdreschers zwischen Spirale und Boustrophedon umzuschalten. Stelle einen dezenten Reset/Replant-Button bereit, der das Feld neu generiert und die Überfahrt neu startet. Das Ändern von Parzellenanzahl oder Dichte soll das Layout weich neu generieren; das Ziehen am Farbton soll in Echtzeit umfärben. Mache es vollständig responsiv, sodass Raster und Schatten bei Größenänderung des Fensters neu berechnet werden, halte die Framerate flüssig und sorge dafür, dass der Code sauber und eigenständig ist, damit die Datei per Doppelklick korrekt geöffnet wird. Dies ist weder ein Spiel noch ein Dashboard — es ist ein generatives Kunstinstrument. Treibe die prozedurale Geometrie, die Pfadanimation und die Parameterverknüpfung so weit wie möglich; die Qualität der isometrischen Schattierung, der langen Abend-Schatten und die Schärfe der Ernterstreifen sollen dieses Rendering herausstechen lassen.

Erstelle eine einzelne eigenständige HTML-Datei (nur inline CSS und JavaScript — absolut keine externen Libraries, CDNs, Frameworks, Fonts oder Bild-URLs), die eine interaktive, physikalisch plausible Zerlegebank für ein mechanisches Taschenuhrwerk rendert, vollständig mit SVG und/oder Canvas gezeichnet. Die Seite muss sich in jedem modernen Browser per Doppelklick korrekt öffnen und ausführen lassen, wobei alles in Echtzeit berechnet und animiert wird. DIE SZENE. Eine Draufsicht auf ein explodiertes Messing-Uhrwerk, ausgebreitet auf einer Werkbank. Rendere als lebendige Vektorkunst ein Federhaus, einen gestapelten Räderzug (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), eine hin und her kippende Ankerhemmung, eine Unruh mit spiralförmiger Spiralfeder sowie Stunden-, Minuten- und Sekundenzeiger, die über einen dezenten Kapitelring laufen. Zeichne echte Zahnradzähne (Flanken im Involute-Stil, keine einfachen Kreise), korrektes Eingreifen an den Teilkreisen sowie sichtbare Wellen, Lagersteine, Brücken und Schrauben. Die gesamte Baugruppe ist konzentrisch um den Kern des Uhrwerks angeordnet; das Bedienpanel ist in eine dunkle Ecke gelegt. DIE MECHANIK (darum geht es — simuliere sie wirklich, täusche sie nicht nur vor). Modelliere den Räderzug mit echten Übersetzungsverhältnissen: Die Winkelgeschwindigkeit jedes Rads entspricht der des Nachbarn multipliziert mit dem negativen Verhältnis ihrer Zahnzahlen, sodass ineinandergreifende Räder sichtbar gegenläufig und mit proportionalen Geschwindigkeiten rotieren und die Zähne ohne Überlappung oder Gleiten ineinandergreifen. Die Hemmung muss tatsächlich ticken: Das escape wheel rückt jeweils um einen Zahn in diskreten Schritten vor, gesperrt und freigegeben durch die oszillierende Ankerhemmung, die von der mit festem Takt schwingenden Unruh angetrieben wird. Jede Freigabe ("tick") erzeugt einen klaren Schritt im escape wheel und ein hörbares Ticken über die Web Audio API (synthetisiert, keine Audiodateien). Der Sekundenzeiger bewegt sich im Takt mit der Hemmung; Minuten- und Stundenzeiger werden über die Übersetzungsverhältnisse daraus abgeleitet. Treibe die Animation mit requestAnimationFrame und real verstrichener Zeit an, damit das Timing genau bleibt. DIE INTERAKTIONEN (alle müssen live reagieren). - Eine ziehbare Aufzugskrone/ein Knopf: Ziehe daran (Maus oder Touch), um die Zugfeder aufzuziehen — eine Aufzugsanzeige füllt sich und die Federwicklung zieht sich sichtbar zusammen. Beim Loslassen entlädt sich die gespeicherte Energie und treibt den Räderzug an; das Uhrwerk läuft, bis die Feder entspannt ist, und rollt dann bis zum Stillstand aus. - Ein "rate"-Slider, der den Takt/die Laufgeschwindigkeit skaliert, damit man es langsam ticken oder rasen sehen kann. - Ein "explode"-Slider, der die gestapelten Komponenten kontinuierlich entlang ihrer Achsen trennt, von vollständig montiert bis zu einem aufgefächerten Explosionsdiagramm, mit weicher Interpolation, Verbindungslinien zwischen getrennten Teilen und weiterhin korrekter Rotation auf jeder Explosionsstufe. - Beim Hover (oder Tippen) auf eine Komponente soll sie wie unter einer Juwelierlupe wirken: dieses Teil hervorheben, den Rest abdunkeln und einen beschrifteten Callout mit dem Namen des Teils und einer einzeiligen Funktionsbeschreibung einblenden. - Buttons: Wind, Release, Reset. DER LOOK. Realistische industrielle Uhrmacherwerkstatt-Ästhetik: warm gealtertes Messing, angelaufenes Stahlgrau, tief tintenschwarzer Hintergrund, klare metallische Highlights, fein geätzte Zahnradzähne und abgeschrägte Brücken. Simuliere einen einzelnen Lichtstrahl von einem Fenster, der von oben links über die Werkbank streift, sodass Teile weiche, langgezogene Schatten werfen, und lass spiegelnde Highlights über die Zahnradflächen wandern, während sie sich drehen. Nutze Gradients, Filter und subtile Körnung für Tiefe. Saubere, gut lesbare HUD-artige Controls und Labels in der dunklen Ecke. ANFORDERUNGEN. Alles in einer .html-Datei; responsives Layout, das sich an den Viewport skaliert; flüssige 60fps-Animation; keine Platzhaltergrafiken — das Uhrwerk muss prozedural gezeichnet und wirklich mechanisch gekoppelt sein, sodass ein leistungsfähiges Modell eine Uhr erzeugt, die sich tatsächlich aufziehen lässt, ineinandergreift und tickt, während ein schwaches Modell zu statischen, rotierenden Kreisen zusammenfällt. Füge kurze Inline-Kommentare hinzu, die die gear ratios und die escapement logic benennen.