Jak uruchomić kod HTML z ChatGPT lub Gemini i zobaczyć stronę na żywo

Najszybszy sposób na uruchomienie kodu HTML z ChatGPT lub Gemini to naciśnięcie Pokaż w darmowym rozszerzeniu AI Code Harvester: twoja strona otwiera się na żywo w nowej karcie, z przyciskami do oglądania jej w rozmiarze komputera, tabletu i telefonu, i nigdy nie musisz zapisywać pliku. Bez rozszerzenia kopiujesz kod do pliku o nazwie index.html i klikasz go dwukrotnie, jak opisano niżej.

Dlaczego kod w czacie to jeszcze nie strona internetowa

Gdy ChatGPT albo Gemini „robią stronę“, tak naprawdę dają ci tekst: blok HTML (szkielet strony), często blok CSS (kolory i układ) i blok JavaScriptu (przyciski i działania). Pomyśl o przepisie. Wszystkie słowa są, ale nikt jeszcze nie ugotował dania. Przeglądarka to piekarnik, który zamienia przepis w coś, co można obejrzeć.

Niektóre czaty pokazują własny mały podgląd, ale nie zawsze, nie dla każdego rodzaju kodu, a znika, gdy opuścisz czat. Jeśli chcesz zobaczyć stronę porządnie, na różnych rozmiarach ekranu, i móc do niej wrócić, musisz uruchomić ją samodzielnie.

Łatwy sposób: naciśnij Pokaż

AI Code Harvester to darmowe rozszerzenie Chrome (mały dodatek, który daje przeglądarce jedną nową funkcję). Siedzi na stronach ChatGPT i Gemini, znajduje bloki kodu w odpowiedzi i, gdy któryś z nich jest stroną internetową, pokazuje ci ją. Oto krótki film, a potem kroki.

1. Zainstaluj rozszerzenie. Dodaj je ze sklepu Chrome Web Store. Jest darmowe i bez rejestracji.
2. Poproś AI o stronę. Na przykład: „Zrób jednostronicową stronę dla małej piekarni z przyciskiem zamówienia. Daj mi index.html, style.css i app.js.“ Pomaga nazwanie plików.
3. Poczekaj, aż odpowiedź się skończy. Mały panel Code Harvester na stronie wypisuje znalezione pliki.
4. Naciśnij Pokaż. Twoja strona otworzy się w nowej karcie. Jeśli panel stoi na krawędzi ekranu jako wąska szuflada, przycisk Pokaż jest na szufladzie.
5. Wypróbuj trzy przyciski rozmiaru: Komputer, Tablet i Telefon. Pokazują, jak strona mieści się na ekranie komputera, tabletu i telefonu.
6. Nie podoba ci się wynik? Poproś AI o zmianę. Gdy odpowie, podgląd odświeży się sam, więc możesz dalej prosić i dalej patrzeć.
7. Potrzebujesz więcej miejsca? Naciśnij Otwórz ⤢ w panelu. Workspace otworzy się z kartą Podgląd, przyciskiem Odśwież i listą do wyboru pliku, który oglądasz.

Jak składa te elementy? Strona internetowa zwykle prosi o swoje pozostałe pliki po nazwie, na przykład style.css i app.js. Rozszerzenie znajduje je w tej samej odpowiedzi i wsuwa do strony, więc wygląda i działa tak, jakby leżały zapisane obok siebie. Jeśli odpowiedź ma więcej niż jedną stronę HTML, lista rozwijana pozwala wybrać, którą oglądasz.

Czy bezpiecznie jest uruchamiać kod napisany przez AI?

Podgląd działa w zamkniętym pokoju, który programiści nazywają piaskownicą (sandbox). Strona może się narysować i uruchamiać własne przyciski, ale nie ma dostępu do rozszerzenia, twojej przeglądarki ani twoich danych. Jeśli strona ładuje bibliotekę z internetu, to też dzieje się tylko w tym zamkniętym pokoju. Mimo to kod to kod, więc stronę, której kodu nie znasz, traktuj jak każdy plik od nieznajomego. Podgląd powstaje na twoim komputerze i nic nie jest wysyłane do nas.

Bez rozszerzenia? Sposób ręczny

Działa bez żadnego narzędzia. Ma tylko kilka kroków więcej, które powtarzasz po każdej zmianie.

1. Skopiuj blok HTML z czatu.
2. Wklej go do Notatnika (albo dowolnego edytora zwykłego tekstu) i zapisz jako index.html. W oknie zapisu wybierz „Wszystkie pliki“, żeby nie skończył jako index.html.txt.
3. Zrób to samo z blokami CSS i JavaScript, z nazwami, o które prosi HTML (na przykład style.css i app.js), w tym samym folderze.
4. Kliknij dwukrotnie index.html. Otworzy się w przeglądarce jako prawdziwa strona.
5. Zmieniasz coś? Zapisz nowy kod na starym pliku i naciśnij odśwież w przeglądarce.

Typowa przeszkoda to strona, która wygląda gołą albo ma przyciski, które nic nie robią. Najczęściej nazwa pliku nie zgadza się z tym, o co prosi HTML. W podglądzie rozszerzenia, jeśli nazwy się różnią, bierze następny niewykorzystany plik właściwego typu, więc to wybacza. Ręcznie musisz poprawić nazwę samodzielnie.

Gdy podgląd wygląda źle

• Wygląda na pustą albo niedokończoną. Ostatnia odpowiedź może zawierać tylko część kodu, na przykład jeden zmieniony plik. Poproś AI, żeby „dała ci jeszcze raz pełne pliki“.
• Brakuje obrazów. Czat nie wyśle plików obrazów. Użyj obrazów z adresów internetowych albo dodaj własne później.
• Przyciski nic nie robią. Poszukaj pliku JavaScript na liście w panelu. Jeśli AI dała go w innej odpowiedzi, poproś o wszystkie pliki w jednej odpowiedzi.
• Dobrze na komputerze, źle na telefonie. Naciśnij Telefon, zobacz, co jest nie tak, i poproś AI, żeby „dostosowała to do małych ekranów“.
• Strony, które potrzebują logowania lub bazy danych. Tu zobaczysz tylko, jak wyglądają, a nie jak się zachowują. Potrzebują prawdziwego serwera.

Proś AI o strony, które dobrze się podglądają

• Proś o wszystkie pliki w jednej odpowiedzi, z nazwą pliku napisaną nad każdym blokiem.
• Przy prostej stronie proś o jeden plik: „wstaw CSS i JavaScript do HTML-a“.
• Powiedz, dla kogo jest: „ma dobrze wyglądać na telefonie“.
• Zmieniaj jedną rzecz naraz. Łatwiej zobaczyć, co poszło nie tak.

Gdy strona wygląda jak trzeba, kolejne pytanie brzmi, jak wrzucić ją do sieci, żeby zobaczyli ją inni. Nasz poradnik Gdzie opublikować stronę stworzoną przez AI prostymi słowami omawia darmowe i płatne opcje. AI Code Harvester robi więcej niż podgląd: może pobrać wszystko jako ZIP (w razie potrzeby z twoimi folderami), wyeksportować jedną stronę albo zabrać czat do innej AI. Czyta czaty z ChatGPT i Gemini i działa na twoim komputerze. Dodaj je ze sklepu Chrome Web Store.

Warto wiedzieć, zanim zaczniesz

FAQ