0:00
hey guys Marcus here I'm going to show you something really cool today so what we're going to do is inside the CKEditor we're going to create our own custombuilt
0:09
assistance for our specific business case that can have really complex workflows behind them and this might sound super complex right but no we're going to build them
0:22
in less than 10 minutes per assistant and we're not going to write a single line of code so uh for the made up business case I'm going to show case what I have set up first here uh so
0:37
I am now a a travel blogger but I don't remember much of the places I go to but I take a lot of photos right uh and something I'm really bad at is that oh I forgot to click the
0:52
alt text there so and I might not even remember what this is so I could describe it myself but instead I just click on the image take the AI assistant and CKEditor alt text from
1:04
image uh and this is automatically added as a context in this assistant I just click generate this will regenerate the same image uh but then with an actual alt text so if we click Source now you
1:20
can see it has an actual alt text here the second problem I have now is that I don't really remember what this place was uh so um it is like I I think the real place
1:39
is called p p sh so I don't pronounce that correctly sorry for the French people uh but I might not know this so what I have added then is another assistant that just gets the actual address from
1:55
the image and how this works is that because AI can hallucinate so you should never really trust anything AI uh uh gives you as an answer you should either give it a lot of context
2:10
before uh because it's very good at handling truth within the context but you can also do uh post checking and that's what happening in this case so what we're doing here asking the AI look
2:24
at this image uh and figure out what this is but then we're using Google Places to actually verify this is a real place that ex does exist and we get the real address from this so uh if we
2:38
scroll down here all of a sudden we have the real address so this is the actual address of this place uh but now stupid as I am I don't really know anything about this place and I want to know more
2:52
I want to write a little summary so I have created another assistant for this so this is get summary from address so this specific Ty L takes HTML of a address what this does once again you
3:04
should not trust OpenAI or Anthropic or someone's uh uh content about this this actually goes and Googles this and asking for like where can I find information about that goes into the uh
3:20
those web pages scrapes that content and summarizes this so this becomes something trustworthy and if we save then you can see yeah we have a a a summary of it last thing is we thought about
3:37
accessibility for uh uh you know for uh uh people that needs alt text same thing they might actually need a audio version of this text so we just mark this click
3:51
audio accessibility click generate and this will now generate an actual uh uh uh actual audio file of this talking and saying this but since it's a CKEditor it's going to generate this as an audio
4:08
player that we can use right away to listen to this uh and there we go so we just save this and then now since we know what this is I can save this uh I just save this and
4:27
you can see we have it all uh I hope this will be heard the Palais de Chaillot located on Chaillot Hill in Paris was designed in the modern style by Architects Lou Hipp so that's it now I'm
4:41
going to Showcase how to set this up this video is sponsored by FreelyGive FreelyGive are experts at the AI and Drupal and while I might showcase a lot of information on how to set up AI
4:58
we have a lot more knowledge than what we show here so if you need help with anything please get in contact with us so a second plug as well workflows of ai.com is where I publish all these
5:11
videos where you can actually filter depending on which module and so on uh so if you haven't been there um please visit you can always subscribe in YouTube as well of course if you
5:23
want so I will just preface this video with the article here from The DropTimes so yesterday I was actually impressed visiting the European commission uh and they had a awesome
5:34
hackathon that was actually uh centered partly around the Drupal AI module and specifically the CKEditor plugins so there were uh I think at least five or six teams working on creating uh plugins
5:51
for the CKEditor so it was really interesting to see uh the energy and actual awesome results that came out of this uh and that there was an interest in developing these plugins and there there
6:04
are use cases for developing these plugins for sure uh what I will showcase today that I couldn't showcase before that because it would just be too simple to do this hackathon is how you're going
6:17
to now be able to take automators and put those into CKEditor so that's where we start so uh in this videos I'm not going to to Showcase how to set up everything
6:33
so because I have showcased uh the old interpolator that now is the automator at multiple locations I have also showcased if you go back and look in videos how you can set ups editor in
6:46
general what I will showcase now is how you can combine the two um so something new since alpha 8 is that we have something called uh disposable automators so if you go under AI there is
7:05
a new a new bundle type called automator chain types if you enable the automator module and under the automator chain type you can create any type of workflow that you want to
7:19
run uh that starts when we're talking about CKEditor starts with one or multiple inputs and generates one HTML output so when it comes to the CKEditor it's important that it generates one
7:34
output so what's cool with uh these disposable uh entities and why we call them disposable is that they just becomes a way around a function that you can call Via service where you give the
7:49
inputs this runs in the background and G gives you back the selected outputs so it is a way in the GUI to set up a function really so our function that becomes a workflow uh
8:05
so if we start with the first example here CKEditor alt text from image these are just a lot of fields basically in this case not that many it's just three Fields so it starts with a input image
8:21
uh which is just a image field and what's important for it to show up I'm going to show you later how you uh integrate this with c is that the inputs always has to be
8:32
required Fields so you set this as a required field and that's the only thing I've done I added an image and set that the required uh the next step is that we want to generate the alt text right so
8:43
this is just a text plane and this is now then using a automator uh uh type and in this case it's the LLM text so you just enable the AI automator choose LLM text uh we're using advanced mode in
8:57
this case and we have a pretty long long prompt uh that we have been working on a lot uh to basically figure out the best alt text um and this can use tokens as
9:10
you can see it gets the language for instance which is important because if it's an entity that's in Dutch it should be a Dutch uh alt text right and under advanced settings what's important here
9:23
is when you're working with a CKEditor always set direct working uh direct worker or if you have any logic where you want to use the ECA you can install the AI ECA module and have a ECA mod uh
9:37
logic where you can have you know depending on the value of a field should it run or not so then what's important in this uh case is that you have to use a image field as
9:49
well because that is the context in this case uh and if you use a image field you can also use a image style because you don't really need uh super quality to be
10:00
able to create a good alt text uh and it costs money per pixels that you send into Vision mod model so it might make sense to use a image style that actually makes it small first and when this is
10:12
done the magic trick is then you have to have at least one text formatted long uh and that's where you generate the actual output so in this case again enable a automator again LLM text uh and
10:29
in this case I basically tell it this is how we want it to output and the important thing is here then that it adds the alt text but otherwise it just copies from the same image like it was
10:42
before we make sure that the weight is higher because this has to happen after uh the other rule that we had or the other automated type we had and when we have set this up you can just go back to
10:58
cont authoring where you set up your uh uh normal rules and um there's going to be another rule here called the AI automator CKEditor so you open that you can see all the different
11:16
automator types you have and for each of them uh you can open so in this case we open the CKEditor alt text from image settings and what's important here is that you have to enable it first of all
11:28
otherwise it doesn't show up so you have to enable it here you also have to enable the global AI automator into CK editors uh you have to choose at well no you don't have to choose a
11:41
input you I mean you could have something that just generates from a prompt every time it doesn't take context that is possible of course uh because you could do something like you
11:51
want to search the daily news on a specific topic so it goes out and Googles this scrapes those websites and write the summary for you every day and then you don't really need to have a
12:02
input in this case because it's unnown uh it's unnown context and the only context that matters there is type so you're doing it every day uh anyway so but usually you have a input uh you
12:16
can also have a text selection input and what that means is that when you going into CKEditor and Mark something like this this is going to follow into that field and this also works with image and
12:28
field uh file Fields then where it actually fills up uh image and file uh image and file form element you can require that you have to select so if you haven't selected
12:42
anything it's just going to say you have to select something uh and then you can say the right mode so you can replace the thing that got selected you can prepend or
12:52
upend so add it after or before and then you just choose the output which is one of the HTML fields and that is basically it then it shows up I can show you the chains I have for
13:06
the other since it might be interesting to see so the first thing we did was the alt text right uh the second thing we do is find image address so if we go in there uh
13:20
this uh starts with a image with building right so that is our required field uh then it's gonna go into possible places oh by the way if you want to see the order you can always
13:36
click on automator chain and then you see which order they come uh possible places and you will see here look at the images and look for famous landmarks and give them back with their name and their
13:48
cities comma separated so this is just going to give the uh uh name of the landmark and the city and then using the address field so this is a typical place where the automator is so much greater
14:05
than a lot of other solutions for chaining stuff like that because the address mod module has a very specific uh um set of rules and a very specific way that it saves the addresses
14:18
so we always know how an address field looks uh and the address field then has a automator uh uh rule called the Google Places LLM text address finder that can take a text basically and start
14:34
searching for each of these uh which means that we can search now then for this place at Trocadéro and actually get the whole address fi filled out and then as before you have to have a formatted
14:48
field where you in this case take the address and format it it in a specific way and that's it uh next thing we have had was get somewh from address I'm just going to do this very
15:04
high level we can take automator chain instead so first it uh um searches Google uh all right in this case I actually total it search for the Wikipedia page of this place so it takes
15:18
the address field uh and searches for the um uh like Wikipedia plus this uh uh this place then it scrapes this uh so oh no this is what it does first take this address and make it to
15:38
something that's searchable in Google so this creates a search word for Google that's how it is Wikipedia uh truck or whatever it is then in the Link Field we're using SerpApi to fill out the
15:53
links that it finds and with those links we use Simple crawler rule to r with HTML and that HTML we then use llm again to summarize uh and this is the output field and uh the last one then is audio
16:15
accessibility where uh we start with a Text to speech field I think it should be let's see here yeah so this is using text to speech with LLM text to get a cleaned output
16:33
and what that means is that text to speech might have a lot of HTML in it uh and of course we don't want it to you know say uh just because something is bolded it should not say strongly
16:45
because that is the tag around it in HTML right so it's going to clean it up uh and then it takes this output and creates audio and then in the end it's using uh
16:59
uh this audio file and just generating I can show you here actually generating a audio player so it's basically telling it create this audio player uh with a HR in the
17:13
end uh and yeah that is it basically it is uh I think for people that wants to work with content in Drupal it's it's immensely powerful actually even if it's kind of it was kind kind of easy to to
17:30
just combine everything uh and this is on the bleeding edge I'm just going to push this now so by the time you see this video it is pushed uh so use the dev version of the
17:44
AI module if you want to uh start playing around with this uh yeah thank you for watching
