TinyMCE – integrácia umelej inteligencie pre generovanie obrázkov

Tento článok priamo nadväzuje na pridaný blog o integrácii umelej inteligencie do textového editora TinyMCE - https://www.dkubinsky.sk/clanok/tinymce-integracia-umelej-inteligencie

V spomenutom článku je popísané, akým spôsobom je možné do tohto obľúbeného editora integrovať umelú inteligenciu pre generovanie textov a následne s týmto textom pracovať. Každý, kto vytvára obsah na internete však vie, že k nemu sú potrebné aj obrázky a obrazové výstupy, prípadne grafiky. Napríklad pri tvorbe blogov a informačných stránok je to obzvlášť potrebné. Získať zaujímavý, pekný a použiteľný obrázok môže byť niekedy celkom náročné, predovšetkým s ohľadom na licenciu a práva pre jeho používanie. V súčasnej dobe existujú viaceré nástroje umelej inteligencie na generovanie obrázkov na základe zadania textového opisu. Viac o týchto nástrojoch som popísal v článku o využití umelej inteligencie v počítačovej grafike - https://www.dkubinsky.sk/clanok/vyuzitie-umelej-inteligencie-v-pocitacovej-grafike

Ak by som týmto spôsobom využil nejakú podobnú službu stane sa to, že síce získam obrázok, ktorý je však potrebné stiahnuť do zariadenia a následne nahrať na vlastný server a vložiť ho do obsahovej časti na požadované miesto. To je séria krokov, ktoré sa dajú eliminovať práve integráciou pluginu pre generovania obrázkov prostredníctvom AI priamo v textovom editore. Ide o vlastné riešenie, ktoré tvorí externý plugin s názvom AI Image Generator pre obľúbený textový editor TinyMCE - https://www.tiny.cloud a modul DALL·E 3 - https://openai.com/dall-e-3 pre generovanie obrázkov. Integrovať ho do tohto editora je pomerne jednoduché:

toolbar: 'undo redo | bold italic underline strikethrough | image | ai_image_generator',
external_plugins: {
    ai_image_generator:"/artificial-intelligence/ai_image_generator/ai_image_generator.js",
},

ai_image_generator: {
    apiKey: "<API KEY>",
},

Ukažka integrácie do TinyMCE

Ako vidíme integrácia je nenáročná a stačí zadefinovať len OpenAI API kľúč. Ten získame na https://openai.com/blog/openai-api

Následné používanie je taktiež pomerne jednoduché. Obsahuje len 2 vstupné položky. Jednou z nich je textový formulár pre zadania prompt-u, teda textového príkazu pre tvorbu obrázka. Prompt môžem zadať v anglickom jazyku, ale tiež v slovenskom, či inom jazyku. Existujú rôzne pravidlá, ako zadať prompt, ale všeobecne sa odporúča krátky popis formou kľúčových slov.

Druhá vstupná položka je výber rozmerov generovaného obrázka. V súčasnej dobe je na výber z troch rozmerov a to: 1024x1024 px (štvorcový formát), 1024x1792 px (format na výšku) a 1792x1024 px (formát na šírku). Rozmery sú dané modelom, ktoré nateraz podporuje DALL·E 3. Predpokladám, že v blízkej budúcnosti sa tieto parametre rozšíria aj na ďalšie rozmery, resp. bude možné užívateľsky zadefinovať vlastné rozmery.

Po zadaní parametrov prompt a rozmerov obrázka a stlačení tlačidla Generate dôjde ku komunikácii s AI, pričom odpoveďou bude vygenerovaný obrázok. Nakoľko URL tohto obrázku na strane AI exspiruje za jednu hodinu, obrázok je potrebné ešte pred vložením do textového editora stiahnuť na server a takto s ním ďalej pracovať, ako keby bol manuálne pridaný do knižnice obrázkov. Naviac pri uložení na náš server už súbor obrázku máme plne pod kontrolou a nemôže sa stať, že nám ho tretia strana zmení, alebo vymaže. Postupne si môžeme vybudovať vlastnú knižnicu súborov vytvorených umelou inteligenciou.

S takto vloženým obrázkom ďalej štandardne pracujeme, ako s akýmkoľvek iným súborom pomocou nástrojov, ktoré ma TinyMCE. Môžeme mu meniť veľkosť, zarovnávať a posúvať, pridať orámovanie. Dokážeme mu taktiež pridať funkciu odkazu s otvorením vlastnej URL atď...

TinyMCE – AI Image Generator plugin

TinyMCE – AI Image Generator plugin

TinyMCE – AI Image Generator plugin

Ukažka TinyMCE pluginu

Výhody AI Image Generator v TinyMCE

Rýchle získanie obrázkov pre svoj obsah na webe na základe textového popisu
Žiadne otázky k autorským právam a licenciám pre použitie
Obrázky z fotobanky sú takmer vždy drahšie
Zrýchlenie práce. Nie je potrebné obrázky vyhľadať, sťahovať, nahrávať a formátovať na presné miesto v obsahovej časti
Automatické budovanie vlastnej knižnice obrázkov z umelej inteligencie
Podpora marketingu a efektivity práce
Ušetrený čas a zvýšenie kreativity pri tvorbe obsahu

V podstate toto riešenie má len výhody, nakoľko editor TinyMCE má stále k dispozícii možnosť nahrávania obrázkov do textu z vlastného zariadenia, alebo vložením URL. Teda ak si chcem od AI pomôcť mám túto možnosť. Ak nie, stále mám dostatok nástrojov pre vkladanie vlastných obrázkov do obsahu. Momentálne za menšie nevýhody považujem v niektorých prípadoch dĺžku generovania súboru (10 – 15 sekúnd), podporu len 3 rozmerov obrázkov a niekedy aj po zadaní celkom detailného prompt-u nám príde nie celkom želaný výsledok a proces musíme opakovať až pokým AI nevygeneruje obrázok, ktorý sa nám do projektu hodí. Na záver treba skonštatovať, že generovanie obrázkov umelou inteligenciou prostredníctvom API nie je bezplatné. Aktuálny cenník nájdete na https://openai.com/pricing. Ako vidíme, jedná sa o centové záležitosti, čo určite stojí za to množstvo ušetreného času. Platíte len za to, čo skutočne využijete.

Ukážka pluginu AI Image Generator pre TinyMCE

Lepšie raz vidieť, ako 100x čítať/počuť. Pozrite si preto dve ukážky, akým spôsobom plugin pracuje a aké možnosti poskytuje. Vo videu je aj ukážka práce s pluginom pre generovanie a editáciu textu s podporou ChatGPT.

Ukažka č. 1

Ukažka č. 2

Pokiaľ by vás tento plugin zaujal a mali by ste o neho záujem, prípadne chcete nejaké ďalšie informácie, kontaktujte ma.

Pridať komentár k článku