GPT 6 Astra for Computer Use

Utwórz kompletną, interaktywną stronę HTML w jednym pliku, zatytułowaną „Laboratorium wypadków nocnej typografii wypukłej”. Zwróć wyłącznie gotowy dokument HTML, z całym CSS i JavaScript umieszczonymi inline. Strona musi otwierać się i działać bezpośrednio w nowoczesnej przeglądarce, bez zewnętrznych zależności, CDN-ów, bibliotek, fontów, linków do obrazów, plików SVG ani innych zasobów. To responsywna strona internetowa, a nie statyczny obraz 16:9 ani kompozycja na canvasie; musi płynnie dostosowywać się do ekranów komputerów, tabletów i urządzeń mobilnych. Zbuduj dotykowy symulator eksperymentalnej typografii wypukłej, w którym użytkownik komponuje odbitkę, przeciągając pojedyncze klocki z czcionką ołowianą na centralny arkusz, obracając je i zmieniając ich położenie, a następnie regulując ilość farby, nacisk prasy i wilgotność papieru przed pociągnięciem ogromnej mechanicznej dźwigni odcisku. Wydrukowany rezultat musi reagować proceduralnie na te parametry: nadmiar farby powoduje rozlewanie i zatykanie kontr, mała ilość farby tworzy suche, poszarpane krawędzie, nacisk zmienia wgniecenia i deformacje, wilgotność zwiększa rozpływanie oraz uszkodzenia włókien papieru, niedokładne ułożenie czcionki powoduje przesunięcie pasowania, a kolejne odciski tworzą przesunięte cienie i widmowe obrazy. Zezwól na wiele przebiegów kolorystycznych, używając wyłącznie cynobrowej czerwieni, ultramaryny i kwasowej żółci, z realistycznym mieszaniem nadruków, widoczną kolejnością warstw, możliwością wyświetlania każdej warstwy, funkcjonalnym cofaniem i ponawianiem kroków oraz możliwością uniesienia rogu papieru, aby odsłonić ewoluującą odbitkę. Skup główny wizualny dramat wokół chwili, gdy wałek prasy właśnie się uniósł, a gotowy wydruk ma za moment zostać ujawniony. Centralny papier powinien przypominać teatralną scenę. Rozmieść wokół niego klocki z czcionkami, wałki z farbą, pęsety, bolce pasujące, skrawki, wskaźniki i elementy sterujące w asymetrycznym pierścieniu. Użyj podłoża w kolorze złamanej bieli papieru kostnego i ołowianej szarości, oświetlonego ciepłobiałą lampą roboczą świecącą po przekątnej z lewego górnego rogu. Renderuj wszystko za pomocą CSS, elementów HTML, Canvas i proceduralnych tekstur w stylu szorstkiego sitodruku oraz ręcznie wykonanej kolażowej ilustracji: postrzępione krawędzie, włókniste ziarno papieru, nierównomierny pigment, kropki rastra, porysowany metal, smugi farby, fragmenty taśmy, lekka perspektywa, niedoskonałe pasowanie i warstwowe cienie. Unikaj lśniących gradientów, sterylnego stylu SaaS, generycznych kart, neonowych cyberpunkowych kolorów, fotorealistycznych obrazów, emoji i ilustracji stockowych, a także idealnie czystej geometrii wektorowej. Uwzględnij obszerny zestaw czcionek ruchomych zawierający litery, znaki interpunkcyjne, cyfry i kilka bloków dekoracyjnych. Użytkownicy muszą móc przeciągać klocki z zasobnika na obszar kompozycji, zaznaczać wiele klocków, obracać je za pomocą uchwytów lub skrótów klawiaturowych, przesuwać za pomocą klawiszy strzałek, usuwać je lub duplikować oraz edytować zawartość tekstową bez utraty wyglądu fizycznego klocka. Dodaj prowadnice przyciągania, które można przełączać, ale zachowaj niewielkie ręczne nieregularności. Zapewnij wyraźne stany po najechaniu, aktywne, zaznaczone, wyłączone i fokusowane. Obsłuż interakcję za pomocą wskaźnika i dotyku, sensowne sterowanie klawiaturą, dostępne etykiety oraz widoczne wskaźniki fokusu. Utwórz trzy dotykowe elementy sterujące ilością farby, naciskiem i wilgotnością, których wartości w czasie rzeczywistym aktualizują podgląd papieru, symulację tekstury, wskaźniki, etykiety ostrzegawcze i zachowanie otoczenia maszyny. System powinien ujawniać zabawne stany wypadków przy skrajnych kombinacjach, takie jak gwałtowne rozkwity farby, podwojone litery, przesunięta czcionka, poszarpane pęknięcia włókien, drganie wałka i rozpryskane znaczniki pasowania, zachowując przy tym czytelność kompozycji. Dodaj zwięzły dziennik eksperymentu zapisujący każdy odcisk i jego parametry. Użytkownicy muszą móc wybrać kolor przebiegu, nacisnąć dźwignię, przeciągając ją po przekonującym łuku, obserwować krótki, lecz szczegółowy cykl pracy prasy, a następnie odchylić papier. Animacja powinna obejmować opór dźwigni, drgania maszyny, ruch wałka, ściskanie papieru, drobiny kurzu, lekkie migotanie lampy i pełną napięcia pauzę przed odsłonięciem. Uwzględnij prefers-reduced-motion. Spraw, aby cofanie i ponawianie naprawdę działały dla rozmieszczania, obracania, zmian parametrów, drukowania, przebiegów kolorystycznych i działań związanych z odsłanianiem. Dodaj elementy sterujące „Resetuj”, „Losowy wypadek”, „Nałóż ponownie farbę”, „Dodaj przebieg”, „Cofnij” i „Ponów”, a także zwięzłą wskazówkę wprowadzającą, która znika po rozpoczęciu interakcji. Wypełnij stronę intrygującym, częściowo skomponowanym plakatem, aby pierwszy widok był bogaty wizualnie, ale pozostaw każdy istotny element możliwy do edycji. Dodaj subtelną wizualną informację zwrotną przypominającą dźwięk, bez używania zasobów audio. W miarę możliwości zapewnij deterministyczną teksturę proceduralną, aby cofnięcie przywracało ten sam wygląd. Doświadczenie powinno być ceremonialne, ręcznie wykonane, napięte i psotnie nieprzewidywalne, a nie wyłącznie dekoracyjne. Priorytetem powinny być dopracowane szczegóły interakcji, przekonujące sprzężenie parametrów, warstwowe proceduralne artefakty druku, dopracowane tempo animacji i doskonała responsywna kompozycja. Użyj semantycznego HTML oraz czystego, dobrze uporządkowanego vanilla JavaScript. Ostateczna odpowiedź musi zawierać wyłącznie kompletny, wykonywalny dokument HTML.

Utwórz kompletną, dopracowaną, interaktywną stronę HTML w jednym pliku, zatytułowaną „Teatr dźwiękowego krajobrazu nocnego ramenu”. Zwróć wyłącznie końcowy dokument HTML, z całym CSS i JavaScript umieszczonymi inline. Strona musi działać bezpośrednio w nowoczesnej przeglądarce, bez procesu budowania i bez zewnętrznych zależności, bibliotek, fontów, obrazów, plików audio, zasobów CDN, żądań sieciowych ani podlinkowanych zasobów. Zbuduj ekspresyjną interaktywną scenę osadzoną w surrealistycznym nocnym barze ramen. Centralnym obiektem jest jedna ciągła wiązka elastycznego makaronu renderowana za pomocą Canvas, SVG lub starannie zintegrowanego połączenia obu technologii. Wiązka makaronu powinna przebiegać po przekątnej przez pierwszy plan i sprawiać wrażenie fizycznie namacalnej: użytkownicy mogą chwycić ją w dowolnym miejscu za pomocą myszy lub dotyku, przeciągać, rozciągać, trzepać, zaginać na siebie i puszczać. Zaimplementuj przekonującą fizykę sprężyny z bezwładnością, tłumieniem, grawitacją, wieloma połączonymi segmentami, reakcją na kolizje i widocznym ruchem wtórnym. Symulacja musi pozostać stabilna nawet podczas gwałtownego przeciągania, szybkich zmian kierunku, zmiany rozmiaru okna lub wielokrotnych interakcji. Rozmieść co najmniej trzy różne miski ramenu i kilka składników wzdłuż szerokiego łuku przechodzącego przez kompozycję, tworząc wyraźny rytm wizualny wokół ukośnego makaronu. Każda miska powinna mieć własny ilustrowany wzór bulionu, tożsamość kolorystyczną, etykietę i charakter dźwiękowy. Gdy makaron dotknie miski lub do niej wpadnie, uruchom zsynchronizowaną reakcję audiowizualną: unikalny perkusyjny rytm syntezowany za pomocą Web Audio API, narastający wybuch pary, rozpryski zielonych drobinek szczypiorku, zmarszczki bulionu, małe krople, drżenie pasowania sitodruku oraz animowane, odręczne japońskie onomatopeje, takie jak „ZURU!”, „PON!”, „JUU!” lub „BASHAN!”, utworzone ze stylizowanego tekstu zamiast zewnętrznych fontów. Intensywność kolizji musi wpływać na głośność, wysokość dźwięku, liczbę cząsteczek, rozmiar zmarszczek, skalę liter i siłę animacji. Dźwięk może rozpocząć się dopiero po pierwszej interakcji użytkownika i musi zawierać wyraźny przełącznik wyciszenia oraz włączenia dźwięku. Kulminacyjny stan wizualny powinien przywoływać stopklatkę, w której makaron jest dramatycznie rozciągnięty w powietrzu, a bulion zawisa tuż przed rozpryśnięciem. Wesprzyj ten efekt elementem sterującym „ZAMROŹ ROZPRYSK” oraz klawiszem Space: wejście w tryb zamrożenia powinno uruchamiać krótkie, wyraziste przejście, wstrzymywać scenę fizyczną bez utraty jej stanu, podkreślać unoszące się krople i napięcie rozciągniętego makaronu, wyświetlać odważną, plakatową typografię kinetyczną oraz zachowywać subtelne proceduralne migotanie linii, aby strona nadal sprawiała wrażenie żywej. Ponowne naciśnięcie klawisza Space lub elementu sterującego powinno płynnie wznowić działanie. Dodaj element sterujący resetowaniem, zwięzły wskaźnik stanu dźwięku oraz powściągliwy, aktualizowany na żywo odczyt „tempa/uderzenia”, zasilany ostatnimi kolizjami. Sterowanie klawiaturą musi być opisane w małym, zintegrowanym panelu pomocy: Space przełącza zamrożenie, R resetuje, M wycisza, a klawisze strzałek nadają makaronowi impulsy kierunkowe. Użyj wizualnie wyrafinowanego połączenia stylu vintage’owego plakatu sitodrukowego i proceduralnej animacji linii. Dominować powinno tło w głębokim indygo, przełamywane lokalnym ciepłem ognia kuchenki wokół misek i punktów kolizji. Użyj warstwowych kolorów dodatkowych — cynobrowej czerwieni, imbirowej żółci, zieleni szczypiorku, ciepłego kremu i niemal czerni — wraz z teksturami rastra, szorstkimi krawędziami farby, lekkim przesunięciem kolorów, mocnymi graficznymi cieniami i animowanymi liniami konturowymi. Rezultat powinien sprawiać wrażenie ręcznie wykonanego i teatralnego, a nie lśniącego ani fotorealistycznego. Dodaj subtelną atmosferyczną parę, migotanie blasku kuchenki, dryfujące ziarno i poruszające się linie, zachowując jednocześnie wysoki kontrast oraz czytelne elementy sterujące. Unikaj generycznego neonowego stylu cyberpunkowego. Spraw, aby kompozycja była responsywna na szerokich ekranach komputerów, tabletach i urządzeniach mobilnych; to strona internetowa, więc nie wymuszaj stałego formatu 16:9. Płynnie dostosuj rozmieszczenie misek, typografię, elementy sterujące, granice symulacji i obszary dotykowe bez przycinania istotnych treści. Użyj pointer events do ujednoliconej obsługi myszy, pióra i dotyku. Blokuj przewijanie strony tylko wtedy, gdy makaron jest aktywnie poruszany. Uwzględnij prefers-reduced-motion, ograniczając animację otoczenia przy zachowaniu podstawowej funkcjonalności interakcji. Zapewnij płynne działanie dzięki wydajnemu ponownemu wykorzystaniu cząsteczek lub ścisłym limitom ich liczby, requestAnimationFrame, renderowaniu uwzględniającemu device-pixel-ratio z rozsądnym limitem rozdzielczości oraz bezpiecznej obsłudze współrzędnych podczas zmiany rozmiaru. Wymagania dotyczące treści i wykończenia: uwzględnij klimatyczną oprawę tytułu, krótkie, jednowierszowe zaproszenie do interakcji, co najmniej trzy opisane miski, wiele wizualnie różnych dodatków, kontekstowe odręczne słowa dźwiękonaśladowcze, dopracowane stany elementów sterujących, wyraźne style fokusu, dostępne etykiety przycisków oraz dyskretną wskazówkę interakcji, która zanika po pierwszym użyciu. Scena otwierająca powinna już wyglądać jak gotowy, kolekcjonerski plakat przed rozpoczęciem interakcji, natomiast stan aktywny powinien przekształcać się w żywą, rytmiczną zabawkę z warstwową informacją zwrotną i zaskakującym, emergentnym ruchem. Ograniczenia negatywne: żadnych zewnętrznych zasobów ani zależności; żadnych URL-i obrazów; żadnego nagranego wcześniej dźwięku; żadnych frameworków; żadnych niedokończonych miejsc zastępczych; żadnych komentarzy TODO; żadnych niedziałających elementów sterujących; żadnego stałego canvasu 16:9; żadnego prostego domyślnego interfejsu; żadnego tła opartego wyłącznie na generycznym gradiencie; żadnych emoji używanych jako główna grafika; żadnego nadmiaru tekstu objaśniającego; żadnego automatycznego odtwarzania dźwięku; żadnego niekontrolowanego wzrostu liczby cząsteczek; żadnej kruchej fizyki powodującej eksplozje lub wartości NaN; żadnej interakcji działającej wyłącznie za pomocą myszy; oraz żadnego tekstu poza jednym kompletnym dokumentem HTML.