Doubao Seed API for Reasoning and Coding

Zbuduj kompletną, jednoplikową stronę HTML — jeden dokument .html z całym CSS i JavaScript osadzonym inline, bez żadnych zależności zewnętrznych, bez linków CDN, bez fontów webowych, bez plików graficznych ani data URI. Każdy element wizualny musi być rysowany proceduralnie w czasie działania za pomocą Canvas 2D API albo inline SVG; nigdzie nie może być bitmap, fotografii ani emoji. Strona ma być generatywnym canvasem czasu rzeczywistego zatytułowanym mniej więcej „Pole żniw — Studio geometrii z lotu ptaka”, a cała koncepcja to boski, top-down widok uprawianego pola, które użytkownik kształtuje suwakami, podczas gdy pojedynczy pikselowy kombajn zbożowy pełznie po nim, wymazując uporządkowane pasy z surowego zboża — cichy, satysfakcjonujący moment wycinania porządku z chaosu. Kompozycja i renderowanie: wypełnij cały viewport regularną prostokątną siatką poletek przypominających żyto, ułożonych jako płaskie kształty wektorowe z subtelnym izometrycznym / udawanym 2.5D uniesieniem, tak aby każde poletko było czytelne jako niski blok, a nie płaski prostokąt. Oświetl scenę pojedynczym kierunkowym, ciepłym światłem zachodzącego słońca wpadającym z jednego narożnika pod małym kątem; każde poletko i kombajn muszą rzucać długi, miękki cień w przeciwną stronę, aby podkreślić geometryczną, blokową bryłowość pola. Paleta ma być powściągliwa, gustowna i ziemista: musztardowa żółć, ochra, oliwkowa zieleń oraz jeden akcent przypalonej, uprawionej ziemi w kolorze burnt umber dla świeżo odwróconej gleby — bez neonów, bez czystych kolorów podstawowych, elegancko i stonowanie. Ogólny styl: płaski wektor spotyka izometryczną mikrorzeźbę, precyzyjnie i architektonicznie. Zachowanie sceny: w obrębie każdego poletka renderuj drobne rzędy siewu rzędowego (cienkie linie równoległe), których gęstość można regulować. Jeden pikselowy kombajn zbożowy — mały, klockowaty sprite narysowany z kilku prostokątów — jest JEDYNYM poruszającym się elementem i jedyną rzeczą, która przełamuje symetrię siatki. Porusza się powoli po ścieżce spiralnej do środka albo po serpentynowej trasie boustrophedon (回字 / tam i z powrotem) przez poletka. W trakcie ruchu musi „wymazywać” stojące zboże bezpośrednio w swoim pasie roboczym i zostawiać za sobą pasy żniw w czasie rzeczywistym — naprzemienne jasne i ciemne skoszone pasma, jak skoszony trawnik albo ślad hedera prawdziwego kombajnu — trwale malowane na polu aż do resetu. Żniwa to ciągła, samodzielnie działająca animacja oparta na requestAnimationFrame; obserwowanie, jak wypełnia pole, powinno być spokojne i hipnotyczne. Interaktywność — wszystkie kontrolki to suwaki (plus kilka małych przełączników/przycisków) w czystym, minimalistycznym panelu bocznym albo dolnym, a każda z nich musi reagować na żywo bez przeładowania strony: suwak liczby poletek (rozdzielczość siatki, np. od 3×3 do 12×12), suwak gęstości rzędów siewu, suwak odcienia uprawy (przesuwający kolor stojącego zboża w zakresie musztarda–ochra–oliwka), suwak postępu żniw albo prędkości kombajnu oraz przełącznik ścieżki kombajnu między spiralą a boustrophedon. Dodaj subtelny przycisk Reset/Obsiej ponownie, który regeneruje pole i uruchamia przejazd od początku. Zmiana liczby poletek albo gęstości powinna płynnie regenerować układ; przeciąganie odcienia powinno barwić scenę w czasie rzeczywistym. Zadbaj o pełną responsywność, tak aby siatka i cienie przeliczały się przy zmianie rozmiaru okna, utrzymaj płynną liczbę klatek i dopilnuj, by kod był czysty oraz samowystarczalny, dzięki czemu poprawnie otworzy się po dwukrotnym kliknięciu pliku. To nie jest ani gra, ani dashboard — to instrument sztuki generatywnej. Doprowadź geometrię proceduralną, animację ścieżki i powiązanie parametrów tak daleko, jak się da; jakość izometrycznego cieniowania, długich cieni zachodu słońca i ostrość pasów żniw mają sprawić, że ten render będzie się wyróżniał.

Zbuduj pojedynczy, samowystarczalny plik HTML (wyłącznie inline CSS i JavaScript — absolutnie żadnych zewnętrznych bibliotek, CDN-ów, frameworków, fontów ani URL-i obrazów), który renderuje interaktywne, fizycznie wiarygodne stanowisko do rozłożonego mechanizmu zegarka kieszonkowego, narysowane w całości za pomocą SVG i/lub Canvas. Strona musi otwierać się i działać poprawnie po dwukrotnym kliknięciu w dowolnej nowoczesnej przeglądarce, a wszystko ma być obliczane i animowane w czasie rzeczywistym. SCENA. Widok z góry na rozłożony mosiężny mechanizm zegarka ułożony na warsztatowym blacie. Wyrenderuj jako żywą sztukę wektorową bęben sprężyny napędowej, piętrowy przekładniowy ciąg kół (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), kotwicę kołyszącą się w przód i w tył, koło balansowe ze spiralnym włosem oraz wskazówki godzinową/minutową/sekundową przesuwające się nad subtelnym pierścieniem podziałki. Narysuj prawdziwe zęby kół zębatych (boki w stylu ewolwentowym, nie zwykłe okręgi), poprawne zazębienie na okręgach podziałowych oraz widoczne osie, kamienie łożyskowe, mostki i śruby. Cały zespół jest skomponowany koncentrycznie wokół rdzenia mechanizmu; panel sterowania jest wsunięty w ciemny narożnik. MECHANIKA (to jest sedno — naprawdę ją zasymuluj, nie udawaj). Zamodeluj przekładnię z rzeczywistymi przełożeniami: prędkość kątowa każdego koła równa się prędkości sąsiedniego pomnożonej przez ujemny stosunek liczby ich zębów, tak aby zazębione koła widocznie obracały się przeciwnie z proporcjonalnymi prędkościami, a zęby zazębiały się bez nakładania ani ślizgania. Wychwyt musi faktycznie tykać: koło wychwytowe przesuwa się o jeden ząb naraz w dyskretnych krokach, blokowane i zwalniane przez oscylującą kotwicę napędzaną przez koło balansowe wahające się ze stałym taktem. Każde zwolnienie („tik”) generuje wyraźny skok koła wychwytowego oraz słyszalne tyknięcie za pomocą Web Audio API (syntetyzowane, bez plików audio). Wskazówka sekundowa postępuje zgodnie z taktem wychwytu; minutowa i godzinowa wynikają z niego przez przełożenia. Steruj animacją przez requestAnimationFrame i rzeczywisty upływ czasu, aby taktowanie pozostało dokładne. INTERAKCJE (wszystkie muszą reagować na żywo). - Przeciągana koronka/pokrętło nakręcania: przeciągnij ją (myszą lub dotykiem), aby nakręcić sprężynę napędową — wskaźnik naciągu się wypełnia, a zwój sprężyny widocznie się zaciska. Po puszczeniu zgromadzona energia rozładowuje się, napędzając przekładnię; mechanizm działa, dopóki sprężyna się nie rozwinie, a potem łagodnie zatrzymuje się z rozpędu. - Suwak „rate”, który skaluje takt/prędkość działania, aby można było oglądać powolne tykanie albo szybki bieg. - Suwak „explode”, który płynnie rozsuwa piętrowe komponenty wzdłuż ich osi od w pełni złożonego mechanizmu do wachlarzowego diagramu rozstrzelonego, z gładką interpolacją, liniami prowadzącymi między oddzielonymi częściami i poprawnymi obrotami wszystkich elementów na każdym poziomie rozstrzelenia. - Najechanie kursorem (albo stuknięcie) dowolnego komponentu ma działać jak lupa zegarmistrza: podświetl tę część, przyciemnij resztę i pokaż pływający dymek z nazwą elementu oraz jednozdaniowym opisem jego funkcji. - Przyciski: Nakręć, Zwolnij, Reset. WYGLĄD. Realistyczna, przemysłowa estetyka warsztatu zegarmistrzowskiego: ciepły postarzały mosiądz, przetarta stalowa szarość, głębokie atramentowo-czarne tło, ostre metaliczne refleksy, drobno trawione zęby kół i fazowane mostki. Zasymuluj pojedynczą smugę światła z okna padającą z lewego górnego rogu przez blat, aby części rzucały miękkie, wydłużone cienie, i spraw, by refleksy połyskowe przesuwały się po powierzchniach kół podczas obrotu. Użyj gradientów, filtrów i subtelnego ziarna dla uzyskania głębi. Czyste, czytelne kontrolki i etykiety w stylu HUD w ciemnym narożniku. WYMAGANIA. Wszystko w jednym pliku .html; responsywny układ skalujący się do viewportu; płynna animacja 60fps; żadnych grafik zastępczych — mechanizm musi być narysowany proceduralnie i naprawdę sprzężony mechanicznie, tak aby dobry model stworzył zegarek, który rzeczywiście się nakręca, zazębia i tyka, podczas gdy słaby rozpadnie się do statycznych wirujących okręgów. Dodaj krótkie komentarze inline nazywające przełożenia kół zębatych i logikę wychwytu.