TinyMCE – integrácia umelej inteligencie

V minulosti som pridal viacej článkov o umelej inteligencii a jej využití v oblasti programovania a počítačovej grafike:

Umelá inteligencia sa postupne dostáva do rôznych aplikácií a informačných systémov ako podporný nástroj pre správu údajov, tvorbu + úpravu textov a obsahu, obrázkov, videí... Teraz sa pozrieme na integráciu AI do obľúbeného textového editora TinyMCE, ktorý sa bežne využíva pre správu obsahu na webe a v rôznych CMS.

TinyMCE je online editor textu a jazyka HTML s licenciou MIT, teda slobodná softvérová licencia. Pracuje na báze vizuálneho editora a nie je potrebné poznať samotný HTML jazyk na to, aby ste dokázali spravovať webový obsah. Má viaceré základné pluginy ako pridanie obrázka, vytvorenie tabuľky, formátovanie textu a mnohé iné. Všetky dôležité informácie nájdeme na https://www.tiny.cloud.

V súčasnej dobe existuje platený plugin pre podporu AI v textovom editore TinyMCE s názvom AI Assistant - https://www.tiny.cloud/tinymce/features/ai-integration.

Samotný plugin vyzerá skvele, no jeho používanie a integrácia je platená a začína na úrovni 155 $ mesačne pre plán Professional, čo sa mi zdá celkom veľa najmä pre lokálne, alebo menšie projekty. Preto som sa rozhodol pre vlastné riešenie, ktoré by nebolo viazané na mesačný paušál, ale platilo by sa len za množstvo využívania na strane AI od OpenAI a služby ChatGPT.

TinyMCE a umelá inteligencia

Samotný plugin sa integruje do prostredia TinyMCE ako externý plugin. Stačí správne nastaviť API kľúč, ktorý získame na https://openai.com/blog/openai-api.

Ukážka kódu pre vloženie do TinyMCE. Predpokladám, že všetko je z neho zrejmé. Okrem možnosti zmeny modelu, nastavenia parametra temperature a maximálny počet tokenov si dokážeme nadefinovať vlastné príkazy. Využijeme to, ak niektoré z nich opakovane používame a teda urýchlime si tak prácu.

external_plugins: {
    chatgpt:"ai_assistant.js",
},
chatgpt: {
    apiKey: "API KEY",
    model: "gpt-3.5-turbo-instruct",
    temperature: 0.5,
    maxTokens: 1500,
    
    prompts: [
    { text: 'Zjednodušiť jazyk', value: 'zjednodušiť jazyk' },
    { text: 'Zlepšiť písanie', value: 'zlepšiť písanie' },
    { text: 'Vytvoriť viac textu', value: 'vytvoriť viac textu' },
    { text: 'Skrátiť text', value: 'skrátiť text' },
    { text: 'Návrh štítkov pre blog', value: 'návrh štítkov pre blog' },
    { text: 'Vylepšiť obsah aby vyzeral viac kreatívne', value: 'vylepšiť obsah aby vyzeral viac kreatívne' },    
    { text: 'Zmeniť tón', items: [
    { text: 'Profesionálny', value: 'Zmeniť tón profesionálny' },
    { text: 'Priateľský', value: 'Zmeniť tón priateľský' },
    { text: 'Obchodný', value: 'Zmeniť tón obchodný' },
    { text: 'Poetický', value: 'Zmeniť tón poetický' }
    ]},
    { text: 'Preložiť', items: [
    { text: 'Preložiť do Slovenčiny', value: 'preložiť do Slovenčiny' },
    { text: 'Preložiť do Angličtiny', value: 'preložiť do Angličtiny' }
    ]},
    
    ]
    
}

Dialógové okno modulu pre TinyMCE. 1 – ikona v paneli nástrojov. 2 – vstupný označený text. 3 – zoznam vlastných príkazov pre AI. 4 – textové pole pre zadanie vlastného príkazu.

Takto integrovaný plugin umožňuje nasledovné:

Označiť ľubovoľnú časť textu a využiť prednastavený prompt na jeho úpravu (skrátiť text, zmeniť tón, upraviť chyby, preložiť...)

Označiť ľubovoľnú časť textu a napísať vlastný prompt, čo chceme s textom urobiť

Kliknúť kdekoľvek do dokumentu a napísať vlastný prompt, aký text chceme vytvoriť.

Výhody integrácie AI do TinyMCE

Rýchla správa obsahu a textu priamo v editore

Ak neviete, čo napísať alebo nemáte správnu inšpiráciu, AI určite pomôže

Rýchle napísanie e-mailu, alebo textu k interakcii so zákazníkom napríklad pri prevádzke e-shopu

Ak potrebujete niečo rýchlo preložiť, vyhnete sa kopírovaniu textu z editora do prekladača a späť, pričom často skopírujeme aj neželané formátovanie a celý obsah graficky pokazíme

Ak potrebujeme rýchlo niečo vypočítať a nechce sa nám prepisovať z kalkulačky

Ak sa vám zdá text nemastný neslaný, nechajte ho AI prepracovať, pričom sami si zvolíte tón a štýl textu (priateľský, formálny, obchodný)

Potrebujete odstavec trochu zmenšiť, alebo práve naopak zväčšiť? Nemusíte nič vymýšľať, jednoducho ho označte a požiadajte AI o akúkoľvek zmenu.

Môžeme upravovať text na nekonečne veľa spôsobov

Jednoduchá integrácia do vášho projektu, alebo CMS

Optimalizácia pre používanie na počítači, ale aj na mobile

Cena za zmeny textu a používanie ja na strane AI ChatGTP rádovo v centoch - https://openai.com/pricing

Množstvo ušetreného času a pohodlná práca je asi najväčší benefit

Takéto riešenie sa ďalej dá rozšíriť na vytváranie vlastných dokumentov, kde v prostredí webu s textovým editorom TinyMCE a podporou umelej inteligencie vytvoríme obsahovú časť a následne z nej vytvoríme napríklad PDF, alebo WORD súbor. Samozrejmá je aj automatizácia. Pokiaľ by som na web potreboval pridávať v pravidelnej báze zvolený obsah a nemám na to čas, nie je nič jednoduchšie ako nakonfigurovať automatizované spúšťanie skriptov pomocou CRON. O zvyšok sa za má postará umelá inteligencia.

Ak by ste potrebovali pracovať s textom a s vlastnými údajmi, ktoré model ChatGPT nepozná (napríklad vaše predávané produkty, ich ceny a špecifický popis) je možné obohatenie o informácie z vlastnej databázy a pomocou word embedding ich posunúť do celkového textu s ktorým pracujeme. Niečo podobné, ako som opísal pri chatbote s vlastnými údajmi - https://www.dkubinsky.sk/clanok/umela-inteligencia-vlastny-chatbot. AI potom dokáže pracovať s údajmi z vašej databázy, ale aj z vlastnými a spájať ich do výsledných textov a výstupov. A toto všetko môže byť integrované v rámci pluginu pre TinyMCE.

Ukážka riešenie TinyMCE AI v praxi

Pozrite si krátke video, ako sa s AI v prostredí TinyMCE jednoducho pracuje. Samozrejme možností jeho využitia je oveľa viac, ako v ukážke.

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

Jan Filip: TinyMCE - AI Assistant Dobrý den, zaujal mě Váš plugin a rád bych ho využil u sebe. Lze ho ještě z Vaši strany doupravit dle mých požadavků? Případně bychom mohli dát krátky google meat kde bych vše vysvětlil a nasdílel. Předem děkuji Filip