Kako pokrenuti HTML kod iz ChatGPT-a ili Geminija i uživo pogledati stranicu

Najbrži način da pokreneš HTML kod iz ChatGPT-a ili Geminija je pritisnuti Prikaži u besplatnoj ekstenziji AI Code Harvester: stranica se otvori uživo u novom tabu, s gumbima za veličinu računala, tableta i mobitela, i nikad ne moraš spremati datoteku. Bez ekstenzije kod kopiraš u datoteku index.html i na nju dvaput klikneš, što je objašnjeno niže.

Zašto kod u razgovoru još nije web stranica

Kad ChatGPT ili Gemini „naprave web stranicu“, zapravo ti daju tekst: blok HTML-a (kostur stranice), često blok CSS-a (boje i raspored) i blok JavaScripta (gumbi i radnje). Zamisli recept. Sve su riječi tu, ali netko još nije skuhao jelo. Web preglednik je pećnica koja recept pretvara u nešto što možeš pogledati.

Neki chatovi prikažu vlastiti mali pregled, ali ne uvijek, ne za svaku vrstu koda, a nestane kad napustiš razgovor. Ako želiš stranicu pogledati kako treba, u raznim veličinama ekrana, i vratiti joj se poslije, moraš je pokrenuti ti.

Lagani način: pritisni Prikaži

AI Code Harvester je besplatna Chrome ekstenzija (mali dodatak koji pregledniku daje jednu novu mogućnost). Sjedi na stranicama ChatGPT-a i Geminija, pronađe blokove koda u odgovoru i, kad je jedan od njih web stranica, pokaže ti je. Evo kratkog videa, pa koraci.

1. Instaliraj ekstenziju. Dodaj je iz Chrome Web Storea. Besplatna je i bez prijave.
2. Zatraži od AI-ja stranicu. Na primjer: „Napravi jednostranični web za malu pekarnicu s gumbom za narudžbu. Daj mi index.html, style.css i app.js.“ Pomaže ako imenuješ datoteke.
3. Pričekaj da odgovor završi. Mali panel Code Harvester na stranici navodi datoteke koje je pronašao.
4. Pritisni Prikaži. Stranica se otvori u novom tabu. Ako je panel parkiran uz rub ekrana kao uska ladica, gumb Prikaži je na ladici.
5. Isprobaj tri gumba za veličinu: Računalo, Tablet i Mobitel. Pokazuju kako stranica staje na ekran računala, tableta i mobitela.
6. Ne sviđa ti se rezultat? Zatraži izmjenu od AI-ja. Kad odgovori, pregled se osvježi sam, pa možeš dalje tražiti i dalje gledati.
7. Trebaš više mjesta? Pritisni Otvori ⤢ u panelu. Workspace se otvori s karticom Pregled, gumbom Osvježi i popisom za odabir datoteke koju gledaš.

Kako sklopi dijelove? Web stranica obično traži svoje ostale datoteke po imenu, na primjer style.css i app.js. Ekstenzija ih pronađe u istom odgovoru i ugura u stranicu, pa izgleda i radi kao da su spremljene jedna uz drugu. Ako odgovor ima više od jedne HTML stranice, padajući popis ti dopušta da odabereš koju gledaš.

Je li sigurno pokretati kod koji je napisao AI?

Pregled radi u zaključanoj sobi, što programeri zovu „sandbox“. Stranica se može iscrtati i pokretati vlastite gumbe, ali nema pristup ekstenziji, tvom pregledniku ni tvojim podacima. Ako stranica učitava biblioteku s interneta, i to se događa samo unutar te zaključane sobe. Ipak, kod je kod, pa stranicu čiji kod ne poznaješ tretiraj kao svaku datoteku od stranca. Pregled se pravi na tvom računalu i ništa se ne šalje nama.

Bez ekstenzije? Ručni način

Radi i bez ikakvog alata. Samo ima nekoliko koraka više, a ponavljaš ih nakon svake izmjene.

1. Kopiraj HTML blok iz razgovora.
2. Zalijepi ga u Notepad (ili bilo koji uređivač običnog teksta) i spremi kao index.html. U prozoru za spremanje odaberi „Sve datoteke“ da ne završi kao index.html.txt.
3. Isto napravi za CSS i JavaScript blokove, s imenima koja HTML traži (na primjer style.css i app.js), u istoj mapi.
4. Dvaput klikni index.html. Otvori se u pregledniku kao prava stranica.
5. Mijenjaš nešto? Spremi novi kod preko stare datoteke i pritisni osvježi u pregledniku.

Uobičajena prepreka je stranica koja izgleda gola ili ima gumbe koji ne rade ništa. Najčešće se ime datoteke ne poklapa s onim što HTML traži. U pregledu ekstenzije, ako se imena razlikuju, uzima sljedeću neiskorištenu datoteku prave vrste, pa to prašta. Ručno ime moraš popraviti ti.

Kad pregled izgleda krivo

• Izgleda prazno ili nedovršeno. Zadnji odgovor možda sadrži samo dio koda, na primjer jednu izmijenjenu datoteku. Zatraži od AI-ja da „opet da kompletne datoteke“.
• Nedostaju slike. Chat ne može poslati datoteke slika. Koristi slike s web adresa ili svoje dodaj poslije.
• Gumbi ne rade ništa. Potraži JavaScript datoteku na popisu u panelu. Ako ju je AI stavio u drugi odgovor, zatraži sve datoteke u jednom odgovoru.
• Na računalu je dobro, na mobitelu pokvareno. Pritisni Mobitel, pogledaj što ne valja i zatraži od AI-ja da „prilagodi za male ekrane“.
• Stranice kojima treba prijava ili baza podataka. Ovdje vidiš samo kako izgledaju, a ne kako se ponašaju. Trebaju pravi poslužitelj.

Traži od AI-ja stranice koje se dobro pregledavaju

• Traži sve datoteke u jednom odgovoru, s imenom datoteke napisanim iznad svakog bloka.
• Za jednostavnu stranicu traži jednu datoteku: „stavi CSS i JavaScript unutar HTML-a“.
• Reci za koga je: „mora dobro izgledati na mobitelu“.
• Mijenjaj jednu stvar po jednu. Lakše je vidjeti što je pošlo po zlu.

Kad stranica izgleda kako treba, sljedeće pitanje je kako je staviti online da je vide drugi. Naš vodič Gdje objaviti web stranicu koju je napravio AI jednostavnim riječima prolazi kroz besplatne i plaćene opcije. AI Code Harvester radi više od pregleda: može sve skinuti kao ZIP (s tvojim mapama ako želiš), izvesti jednu stranicu ili prenijeti razgovor u drugi AI. Čita ChatGPT i Gemini razgovore i radi na tvom računalu. Dodaj ga iz Chrome Web Storea.

Dobro je znati prije nego počneš

FAQ