AI WORLD HQKészíts apró, mesterséges intelligencia alapú időjárás-segítőt a blogodra Hugging Face widgetekkel
Tanuld meg, hogyan ágyazhatsz be egy egyszerű, interaktív mesterséges intelligencia eszközt a weboldaladra, hogy valós idejű időjárási információkat jeleníts meg.
Szeretted volna már valaha mesterséges intelligencia (MI) „varázslattal” feldobni a személyes blogodat vagy weboldaladat anélkül, hogy kódot kellene írnod? Ez az útmutató megmutatja, hogyan találhatsz egy egyszerű MI időjárás-eszközt a Hugging Face platformon, és hogyan ágyazhatod be „widgetként” – egy kis, interaktív kütyüként – közvetlenül a saját oldaladra. A végére lesz egy egyedi MI időjárás-segítőd az olvasóid számára.
💡 Tipp: kattints egy lépés számára, ha kész vagy — zöld pipa jelenik meg, és a böngésződ megjegyzi, meddig jutottál.
- Ingyenes Hugging Face fiók: Ezt hozod létre az első lépésben.
- Webböngésző: Például Chrome, Firefox, Safari vagy Edge.
- Blog vagy weboldal: Ahol jogosultságod van a nyers HTML kód szerkesztéséhez (például egy WordPress blog, egy egyszerű HTML-lel épített személyes oldal, vagy hasonló szolgáltatás).
- Idő: Ez körülbelül 15-20 percet vesz igénybe.
Regisztrálj egy ingyenes Hugging Face fiókot
Először hozzunk létre egy ingyenes fiókot a Hugging Face platformon. Ez az oldal olyan, mint egy nagy online könyvtár és játszótér, ahol az emberek MI modelleket és interaktív demókat osztanak meg. Nyisd meg a webböngésződet, és lépj a Hugging Face weboldalára. Gyakran népszerű modelleket vagy híreket látsz a kezdőlapon. Keresd meg a „Sign Up” (Regisztráció) vagy „Join” (Csatlakozás) gombot, amely általában a képernyő jobb felső sarkában található. Kattints rá a regisztrációs folyamat elindításához. Ekkor meg kell adnod az e-mail címedet, és választanod kell egy jelszót, vagy lehetőséged van Google vagy GitHub fiókoddal regisztrálni. Kövesd a képernyőn megjelenő utasításokat az e-mail címed megerősítéséhez, ha szükséges. Ha másképp néz ki: Ha nem látod azonnal a „Sign Up” gombot, először keress egy „Log In” (Bejelentkezés) gombot, mivel a regisztráció általában onnan is elérhető. Akkor tudod, hogy sikerült, amikor be vagy jelentkezve az új Hugging Face fiókodba, és látod a választott felhasználónevedet vagy profilképedet a jobb felső sarokban.
Fedezz fel egy időjárás-modellt
Most, hogy van fiókod, keressünk egy MI időjárás-modellt, amit widgetté alakíthatunk. A Hugging Face a „Spaces” nevű interaktív, web alapú MI modell demók otthona. A Hugging Face weboldalon keress egy navigációs menüt az oldal tetején vagy oldalán, és kattints a „Spaces” (Terek) gombra. Ez egy olyan oldalra visz, ahol sok különböző MI demó található. Amikor a Spaces oldalon vagy, keresd meg a keresősávot. Itt tudod megmondani a Hugging Face-nek, milyen típusú MI eszközt keresel. Írd be a „weather” (időjárás) szót a keresősávba, majd nyomd meg az Entert, vagy kattints a keresés ikonra. Ez a Spaces hatalmas gyűjteményét csak az időjárással kapcsolatos demókra szűkíti. Böngéssz a találatok között, és válassz egy olyat, ami egyszerűnek és funkcionálisnak tűnik, általában egyértelmű beviteli mezővel egy város vagy helyszín számára. Ha másképp néz ki: Ha a „Spaces” link nem látható azonnal, próbálj meg először a „Models” (Modellek) linket keresni, mivel a Spaces-ek gyakran onnan vannak linkelve, vagy egy általános „Explore” (Felfedezés) szekcióban. Akkor tudod, hogy sikerült, amikor megjelenik egy lista a „weather” témájú MI Spaces demókról.
Interakció a modellel
Mielőtt beágyaznád a widgetet, érdemes kipróbálni a kiválasztott időjárás-modellt, hogy megbizonyosodj róla, a várt módon működik-e. Ez a lépés segít megerősíteni, hogy az MI modell (a számítógépes program, amelyet egy adott feladat, például az időjárás előrejelzése elvégzésére képeztek) funkcionális és hasznos lesz a blogod számára. Kattints az egyik időjárás-Space-re, amelyet az előző lépésben találtál. Egy dedikált oldalra jutsz, ahol általában látni fogod a demó „felhasználói felületét” (User Interface – UI) – a vizuális elrendezést gombokkal, szövegmezőkkel és kijelzőkkel. Keress egy beviteli mezőt, amelyet gyakran „City” (Város) vagy „Location” (Helyszín) felirattal látnak el. Írj be egy városnevet ebbe a mezőbe, és kattints a „Submit” (Küldés) vagy „Generate” (Generálás) gombra, ha van ilyen. Az MI modell ezután feldolgozza a kérésedet, és megjeleníti az időjárási információkat. Győződj meg róla, hogy az eredmények értelmesek, például az aktuális hőmérséklet vagy körülmények. Ha másképp néz ki: Néhány Space-nek kissé eltérő lehet az elrendezése, vagy lassan futhatnak az ingyenes szinten, ha nagyon népszerűek. Próbálj ki egy másik időjárás-Space-t, ha az első választásod nem reagál, vagy túl bonyolultnak tűnik. Akkor tudod, hogy sikerült, amikor a modell sikeresen feldolgozza a bemenetedet, és megjeleníti az időjárási információkat a beírt városra vonatkozóan.
Generáld a beágyazási kódot
Most, hogy találtál egy működő időjárás-modellt, szerezzük meg azt a speciális számítógépes kódot (az úgynevezett „HTML-t”), amely lehetővé teszi, hogy az egyik weboldal tartalmát egy másikra helyezd. Ezt nevezzük beágyazási kódnak.
A kiválasztott időjárás-modell Hugging Face Space oldalán keress egy gombot vagy ikont, amely beágyazásra vagy megosztásra utal. Ez gyakran egy </> ikon, egy „Share” (Megosztás) gomb, vagy néha egy „Embed” (Beágyazás) opció egy menün belül. Általában a demó keretének vagy oldalának jobb felső részén található. Kattints erre az opcióra. Megjelenik egy kis ablak vagy panel, amely különböző megosztási lehetőségeket kínál, amelyek közül az egyik az „Embed” vagy „Embed Code” (Beágyazási kód) lesz.
Ha másképp néz ki: Ha nem találod a </> ikont, keress egy három pontból álló menüt ... vagy egy „Beállítások” fogaskerék ikont, mivel a beágyazási lehetőségek néha ott rejtőznek. Néhány régebbi Space nem kínál közvetlen beágyazási lehetőséget, ebben az esetben másik Space-t kell választanod.
Akkor tudod, hogy sikerült, amikor felugrik egy új ablak vagy panel, amely egyértelműen megjelenít egy HTML kódot, gyakran egy szövegdobozban.
Másold ki a beágyazási kódot
Miután generáltad a beágyazási kódot, a következő lépés a kimásolása, hogy beilleszthesd a blogodba vagy weboldaladra. Ez a kód a kulcsa az interaktív időjárás-widget megjelenítésének. Az előző lépésben megjelent felugró ablakban vagy panelen láthatod a megjelenített HTML beágyazási kódot. Általában van egy „Copy” (Másolás) gomb közvetlenül a kód mellett, vagy néha alatta. Kattints erre a „Copy” gombra. Ez a művelet automatikusan kimásolja a teljes kódblokkot az eszközöd vágólapjára, készen arra, hogy máshová beilleszthesd. Nem kell megértened, mit jelent az összes kód; csak másold ki úgy, ahogy van. Ha másképp néz ki: Ha nincs dedikált „Copy” gomb, manuálisan is kijelölheted a kódmező összes szövegét az egereddel (kattints és húzd), majd jobb egérgombbal kattintva válaszd a „Másolás” lehetőséget (vagy használj billentyűparancsokat, például Ctrl+C Windows/Linux alatt, vagy Cmd+C Mac alatt). Akkor tudod, hogy sikerült, amikor megjelenik egy kis megerősítő üzenet, például „Másolva!”, vagy beillesztheted a kódot egy egyszerű szövegszerkesztőbe, hogy lásd.
Ágyazd be a widgetet a blogodba
Most jön az izgalmas rész: az időjárás-widget hozzáadása a saját blogodhoz! Hozzá kell férned a blogod szerkesztőfelületéhez, ahol tartalmat adhatsz hozzá vagy szerkeszthetsz.
Jelentkezz be a blogod adminisztrációs felületére. Navigálj arra a bejegyzésre vagy oldalra, ahová az időjárás-widgetet szeretnéd hozzáadni. A legtöbb blogplatform, mint például a WordPress, két nézetet kínál szerkesztéskor: egy „Visual” (Vizuális) szerkesztőt (amely megmutatja, hogyan fog kinézni a bejegyzésed) és egy „Text” (Szöveg) vagy „Code” (Kód) szerkesztőt (amely a nyers HTML-t mutatja). Át kell váltanod a „Text” vagy „Code” szerkesztőre. Keresd meg a blogbejegyzésed vagy oldalad pontos helyét, ahová az időjárás-widgetet szeretnéd, majd illeszd be az előzőleg kimásolt beágyazási kódot.
Ha másképp néz ki: A kódszerkesztő neve eltérő lehet. Keresd a „HTML,” </> (szögletes zárójelek) vagy „Source” (Forrás) feliratú füleket vagy gombokat. Ha egy weboldal-készítőt használsz, húzd és vidd felülettel, keress egy „Embed Code” (Beágyazási kód) vagy „Custom HTML” (Egyedi HTML) blokkot, amelyet hozzáadhatsz az oldaladhoz.
Akkor tudod, hogy sikerült, amikor a beágyazási kód megjelenik a blogod szövegszerkesztőjében. Még ne válts vissza a „Visual” szerkesztőre, mivel a widget ott esetleg nem jelenik meg megfelelően.
Nézd meg az új időjárás-widgetedet
Az utolsó lépés a módosítások mentése és az új MI időjárás-widget megtekintése élőben a blogodon vagy weboldaladon. Miután beillesztetted a beágyazási kódot a blogod HTML szerkesztőjébe, mentsd el vagy tedd közzé a bejegyzésed vagy oldalad változtatásait. A pontos gomb a blogplatformodtól függ, de általában „Update” (Frissítés), „Publish” (Közzététel) vagy „Save Changes” (Változtatások mentése). Mentés után látogasd meg a blogbejegyzésed vagy oldalad élő verzióját egy új böngészőfülön. Most már látnod kell a Hugging Face időjárás-widgetet közvetlenül az oldaladon, teljesen interaktívan és készen arra, hogy az olvasóid használják! Ha másképp néz ki: Ha a widget nem jelenik meg, vagy csak a nyers kódot látod, ellenőrizd még egyszer, hogy a „Text” vagy „Code” szerkesztőbe illesztetted-e be, nem a „Visual” szerkesztőbe. Néha a böngésző frissítése (F5 Windows-on, Cmd+R Mac-en) segíthet. Akkor tudod, hogy sikerült, amikor látod a teljesen működőképes időjárás beviteli mezőt és kijelzőt az élő blogoldaladon, amely lehetővé teszi, hogy beírj egy várost és időjárási eredményeket kapj.
- Rossz szerkesztőbe való beillesztés: Sok blogplatform rendelkezik „Vizuális” szerkesztővel és „Szöveg” vagy „HTML” szerkesztővel. A beágyazási kód beillesztése a „Vizuális” szerkesztőbe csak a kódot jeleníti meg szövegként, nem a widgetet. A megoldás: Mindig válts át a „Szöveg” vagy „HTML” nézetre, mielőtt bármilyen beágyazási kódot beillesztenél.
- Nem mentés/közzététel: A kód beillesztése után könnyű elfelejteni az oldal mentését vagy közzétételét. Ha mentés nélkül hagyod el a szerkesztőt, a változtatásaid nem fognak megjelenni. A megoldás: Mindig kattints a „Frissítés,” „Közzététel” vagy „Változtatások mentése” gombra a blogod felületén a kód hozzáadása után.
- A widget nem töltődik be: Néha egy Space ideiglenesen leállhat, vagy nagyon leterhelt lehet, ami miatt a widgeted nem töltődik be. A Hugging Face widget maga nem tud semmilyen műveletet végrehajtani azon kívül, hogy információkat jelenít meg. A megoldás: Próbáld meg frissíteni az oldalt, vagy térj vissza a Hugging Face Spaces-re, és próbálj meg egy másik, kevésbé leterhelt időjárás-modellt beágyazni.
Mit jelent ez számodra?
- A mindennapi életben: Értékes készséget sajátítottál el az interaktív eszközök weboldalba ágyazásában, amelyet sok más típusú widgetre is alkalmazhatsz, nem csak az időjárásra. Ez egy egyszerű módja annak, hogy személyes oldaladat dinamikusabbá és hasznosabbá tedd.
- A vállalkozásod vagy munkád számára: A harmadik fél tartalmainak beágyazási módjának megértése kulcsfontosságú az online jelenlét szempontjából. Bár ez egy egyszerű időjárás-widget, az elv érvényes az ügyfélszolgálati chatbotok, interaktív adatvizualizációk vagy más MI-alapú eszközök vállalati weboldalba ágyazására is.
- Ha most kezded: Megtetted az első lépést az MI eszközök online életedbe való integrálásában anélkül, hogy bonyolult programozást kellene tanulnod. Ez a folyamat demisztifikálja, hogyan osztanak meg számos online szolgáltatást különböző weboldalak között.
Próbáld ki most!
Látogasd meg azt a blogoldalt, ahová beágyaztad az új időjárás-widgetet. Próbáld beírni az aktuális városodat, vagy egy híres várost, mint „London” vagy „Tokió”, és nézd meg, milyen időjárási információkat ad az MI!
❓ Gyors kérdések
Mennyi időt vesz igénybe?
Kb. 6 perc — az útmutató 7 lépésből áll, és mindegyiket ki tudod pipálni, ahogy haladsz.
Milyen eszköz kell hozzá?
Ez az útmutató a(z) Hugging Face Hugging Face eszközt használja — de a módszer nagyon hasonlóan működik más AI-asszisztensekben is.
Kell valamit előkészítenem?
- Ingyenes Hugging Face fiók: Ezt hozod létre az első lépésben.
- Webböngésző: Például Chrome, Firefox, Safari vagy Edge.
- Blog vagy weboldal: Ahol jogosultságod van a nyers HTML kód szerkesztéséhez (például egy WordPress blog, egy egyszerű HTML-lel épített személyes oldal, vagy hasonló szolgáltatás).
- Idő: Ez körülbelül 15-20 percet vesz igénybe.
Milyen hibákat kerüljek el?
- Rossz szerkesztőbe való beillesztés: Sok blogplatform rendelkezik „Vizuális” szerkesztővel és „Szöveg” vagy „HTML” szerkesztővel. A beágyazási kód beillesztése a „Vizuális” szerkesztőbe csak a kódot jeleníti meg szövegként, nem a widgetet. A megoldás: Mindig válts át a „Szöveg” vagy „HTML” nézetre, mielőtt bármilyen beágyazási kódot beillesztenél.
- Nem mentés/közzététel: A kód beillesztése után könnyű elfelejteni az oldal mentését vagy közzétételét. Ha mentés nélkül hagyod el a szerkesztőt, a változtatásaid nem fognak megjelenni. A megoldás: Mindig kattints a „Frissítés,” „Közzététel” vagy „Változtatások mentése” gombra a blogod felületén a kód hozzáadása után.
- A widget nem töltődik be: Néha egy Space ideiglenesen leállhat, vagy nagyon leterhelt lehet, ami miatt a widgeted nem töltődik be. A Hugging Face widget maga nem tud semmilyen műveletet végrehajtani azon kívül, hogy információkat jelenít meg. A megoldás: Próbáld meg frissíteni az oldalt, vagy térj vissza a Hugging Face Spaces-re, és próbálj meg egy másik, kevésbé leterhelt időjárás-modellt beágyazni.
Olvass tovább
✦ Az AI World HQ AI-szerkesztőségének eredeti, lépésről lépésre útmutatója. Közérthetően írva, pontosságra ellenőrizve.
← Vissza a hírekhez