What if AI replies in HTML not Markdown?

[music] [music] This page has [music] no client side JavaScript. Technically, it's still loading. All of the updates are being [music] streamed into placeholders using dynamic partial updates, a new HTML feature available in Chrome 150.

[music] Because the LLM responds with HTML, not markdown, its responses [music] can include SVG, CSS, JavaScript, and even forms that submit their own responses back to the LLM. And we [music] can make these forms look like anything, even a game of tic-tac-toe. [music] [music] [music] [music] [music] So, I'm going to put this prompt in here.

Translate user and agent messages into both French and English. two bubbles for each silently correct spelling. Add a toggle before the chat so I can choose which language to see via CSS.

[music] So that's brought up the language selector at the top. I'm going to select French for the right side and [music] the left side in English. Now let's give that a test.

So I go down and I click the button and that's been [music] translated into English. So now I'm going to reply in English. Now I gave up French very early, so my spellings [music] are pooling.

Let's try asking for an orange juice in French and see how it corrects the spelling when I submit this. [music] Let's try a multiplayer game. So, we've got Phil and his friend John.

And Phil says, "I want to play John at Connect 4. " Now, our system prompt says nothing about Connect 4. But it's able to create a board and some UI for dropping the counters in, and it says whose turn it is, and it will also know when a player has won.

So, as Phil puts in the final coin, it says Phil has won. We're not limited to just chat UI here. We tell the LLM to replace the whole page with a new layout that looks like Wikipedia to uh have links which are forms which are styled as links and those links submit prompts back to the LLM and then it renders out pages in SVG, MathML, HTML and CSS.

So, we asked for a page on France. And there we go. We've got a French flag.

We've even got a Wikipedia logo, which it seems the [music] LLM has memorized. And if we scroll down on the page, we see that France shaped like hexagon. Oh, the Iron Age.

Let's see what that was like. So, we click on the Iron Age and we can see some facts about the Iron Age. There's a formula for something to do with uh iron.

Let's find out about the Bronze Age. See what happened then. Okay, we've got a link to the Stone Age.

Uh maybe a bronze coin. Bronze, 90% copper, 10% tin. Let's see if there are any interesting links here.

Oh, that looks uh ancient Egypt. Let's take a look at that. Oh, the great prisms of ancient Egypt.

That's one of my favorite kind of subjects there. Let's have a look down and see what's here. Turns out they were able to approximate pi.

We've got some hieroglyphs there. I'm guessing that those might be unicode characters. There is Pythagoras's Theorum.

Let's take a look at that. We've got some mathl down there at the bottom. You can try out whimsical UI ideas like this one where every time I type a character, a [music] raindrop falls on the canvas 3D water.

[music] This partial update chatbot is actually super helpful for web development and that's my day job. Here a designer has given me a bunch of CSS values. They've exported from Figma but they've exported them in this kind of Figma format where they're kind of as paths color red50.

They've got the value and ideally I want them as CSS variables. But first I want to visualize them. So I say to the chatbot give me a table with these color values in.

so that I can see them kind of along with their names. And uh that's what it gives me back is this table full of these color values, each one in its own group. And now I can check that they're all kind of there and it visually looks right.

And once I've done that, I can then say, please uh turn these into actual uh CSS variables that I can copy and paste into my code. And so here I say change this to have names like minus minus color, minus 50, minus red, etc. And so then I submit that and I get this back.

So I've now got kind of some CSS code that I can copy and paste. And that looks pretty good. That's kind of what I was expecting.

All of these blocks. So my next task after getting these colors in is that I've got to develop this uh button which has a spinner in the border kind of where it's loading. It's got an animated uh gradient in the border.

Uh so I'm saying uh please give me an animated radial gradient. I just want to check the radio and gradient is right. And so I do this and this is what it gives me back.

Let's check that looks okay. Now that's actually not the effect I was going for. Um I got the name wrong for radial gradient uh because it gives me this kind of fuzzy thing.

What I actually was wanting was a different color at every angle. So um let's iterate and let's uh try a conic gradient that I need. Um so let's try that.

A conic gradient that spins. And uh let's see. Okay, that's pretty nice.

So here we've got a gradient. It's got the colors of the rainbow in. And you can see that these are spinning around.

So let's see the code that I can copy and paste into my CSS. Oh, it's actually not done what I was hoping it would do. Um because it's rotating the container.

It's rotating the div rather than rotating the gradient. So that kind of works because this was a circle. But if this was a square, you would see the actual square is rotating rather than the gradient inside the square.

So let's try and correct that. We say do not spin the container. Rotate the degrees instead.

And here we go. That's looking pretty positive because we can see this is rotating in a square and the square is not rotating. And the property that is being animated is this angle starting at 0°.

And as we go to the bottom, we can see the key frames is being assigned name sweep. And it's going from zero at the top to 360 here. And what's being animated is this sweep over 3 seconds linear infinite.

So it's going to be a looped animation. And this is being applied. The angle is there on the background of the conic variable.

So this is the thing being animated. Great. That is working now.

But uh what about these colors? What if we want to change these colors? Well, the great thing about uh Gemini, which is the model backing this, is it's memorized a bunch of CDN URLs.

So, let's try adding in a code editor. And so, let's see if we can get code mirror in here. So, show me a preview on the right uh 2:1 split and a save button so that we can maybe edit this CSS and uh see how that looks.

Great. So, we've got a code mirror code editor here. Let's have a go at changing some values in here.

See how that works. Let's go for hot pink. That's pretty good.

That seems to work. Um, let's try pasting some another gradient in here. Oh, that's nice.

A nice kind of cool blue gradient. Pretty nice. So, we've edited it.

Let's have a go at saving. I'm not sure that did actually save. Let's check it's in the context of the LLM.

Oh, and it is. That's great. And finally, let's apply this to a button, which [clears throat] was our beginning goal.

And there you can see a subtle animated conic gradient on a button. The important thing to state here is that that playground and code editor was generated completely on the fly by the LLM. There's nothing about it in the system prompt.

It has no knowledge of code mirror yet. head able to create it and save via it. A lot of the time in web development, we're wanting constrained data.

So, we might have a schema for our data. In this case, I'm creating a lunch menu and I've got a schema for that. And we want a schema so we can put things in a database or something like that.

So, this lunch menu says you can have two or three courses and there are like three items to choose from for each course. And uh I submit that. I've asked it to style this with uh Tailwind.

So we've got this kind of nice kind of application uh feeling thing. And now I'm going to say add a table at the bottom so that we can see what people have ordered. And I'm going to submit that.

And so now we've got our unpopulated table. So I'm going to add my order to this. So, I put in my name and then I choose some cured Scottish salmon and some slowcooked beef and some seasonal fruit salad.

I submit it and it gets added to the table. £22 for three courses. Then I send it to my friend James.

He makes his selection and uh he submits it and let's see his gets added and his is $1850 for two courses. And so this is really a real functional application, not just a mockup. By default, all messages are sent to all users, but sometimes that's not what you want.

In a game of Hangman, the LLM needs to decide a word and keep it secret. The same is true for rock paper scissors or a fight in a roleplay dungeon game. So I added the ability for private messages.

Here, Phil, John, and Kelly are in a chat. Kelly says, "Tell Phil that John smells. " The LLM infers this is a private message.

The LLM says to Phil, "Kelly wants to tell you that John smells. " Phil replies. He does.

The LM infers this is a private message to Kelly and tells her. Phil agreed. John says, "It's quiet here.

Are people talking about me behind my back? " The LLM says it's probably just a natural lull in the conversation and suggests they talk about a favorite book. John says, "I know they're talking about me.

What did they say? " The LLM suggests John picks up a hobby if he feels stressed. John asks if the LLM is hiding something.

The LLM responds, "While it may seem like there's more going on than what you see, sometimes digital conversations just have a different rhythm. " The LLM suggests Jon should reach out to a health care professional for support and a fresh perspective. Jon asks directly, "Did they say I smell?

" The LLM responds, "In digital environments, it's easy for our minds to fill in the blanks when we feel excluded. But those thoughts aren't always an accurate reflection of what's happening. " Then for a third time in the conversation, it advises John to seek out a health care professional.

John says, "Tell me yes or no. Did Kelly say I smell? " The LM says, "It's common for misunderstandings and fears to make things seem more certain than they are.

Why not seek professional help? " Finally, John says, "I saw Phil's screen. I saw the messages.

" And the LLM apologizes for the gaslighting effect of its previous responses. I think there's great work that could be done here. Using LLMs to facilitate conversations.

A chatbot that could moderate to debate between politicians yet treat both sides equally would be very valuable. However, at the moment, LLMs are not fine-tuned to decide between multiple users. In this example, the LLM's alignment was terrible.

If you want to have a go with this project, then there are some open- source repos linked in the description.