A Tour of the Solveit Platform
00:00:00.320 | Hi Jono, are you ready to show everybody what on earth the Solveit platform is?
00:00:05.200 | Yeah, let's do it. Okay, how hard can it be?
00:00:08.480 | All right, I'll drive and just jump in any time you've... many times I'm sure I will fail to say
00:00:21.600 | something important or you have any thoughts about it, but this is what happens once you log in to
00:00:26.720 | Solveit and go to the dashboard and the key thing here is my instances. Maybe Jono,
00:00:34.880 | do you want to summarize what on earth is an instance? Sure, so for some of you who did the
00:00:41.840 | course before, we have the Solveit platform as a way to write code and learn things and as you'll
00:00:46.960 | see many more options as well. So an instance is like your personal machine on which that program,
00:00:53.840 | that application runs. But you can see we can now create multiple of those. So each one is its own
00:00:59.520 | separate, almost like a separate virtual private server, a separate machine with software that's
00:01:04.160 | installed, with a file system where you can upload and store files, ways for you to store secrets and
00:01:08.960 | host applications and all these other features that we'll show you. And so you can create multiple if
00:01:15.200 | you want to keep different environments isolated or you can just use one. Most of us will have one main
00:01:20.080 | personal instance. We're basically we're creating whole virtual but the whole computers for people that
00:01:25.760 | you can host applications in Trolley, you can treat as a complete Unix box and you can make multiple of
00:01:37.200 | them. That's that's yeah pretty big deal. And each one has a URL that you can go to which if I click on it
00:01:57.280 | it actually opens up a unique URL with Solveit in and just we'll come back to it later but we will show
00:02:08.480 | you this other link, the public one. But most of the time you'll be going to this and this this the this UI
00:02:14.320 | will probably change soon but either way you'll see some kind of linked and start to get to your instance.
00:02:21.920 | The reason there's a lock by it and the reason we call it the private link is that this is also
00:02:25.200 | something that you can share if you want to give somebody else access to this computer that you
00:02:28.960 | have. But that's not something that you'd want to make public if for example you've got like secrets
00:02:33.680 | and files and all these other pieces that you've uploaded. So this is the one you keep special and
00:02:37.280 | secret. This is your computer. If you ever share it we do have a way to refresh it and get a new one so
00:02:43.440 | that you're not permanently opening up your computer to strangers on the internet. Okay cool. So here's my
00:02:55.760 | list of dialogues and folders and in fact there's a lot more in here than that if I click show all files.
00:03:05.120 | So this is basically showing my the directory on my little computer my instance. But by default we just
00:03:12.480 | show dialogues. So here's my daughter's dialogue for example where she was trying to do
00:03:21.440 | a puzzle from something called advent of code and you can go back to the list of dialogues.
00:03:34.000 | So a dialogue as you'll see is basically a saved place where you have made some notes, talked to
00:03:46.400 | the computer by writing code and maybe talked to the AI by writing prompts. And so those are always saved
00:03:55.040 | until you click the delete button and you can organize them. So I've started a new folder here into folders. So I've
00:04:02.400 | started a new folder called teach where I'm going to put all the stuff we're teaching. And so today I've
00:04:07.600 | created a dialogue here
00:04:09.600 | with a list of things that Jono and I thought we should mention. Anything else to say about dialogues, Jono?
00:04:19.200 | We'll see what's packed in. But yeah, the way of thinking of it as a conversation between you and
00:04:24.800 | yourself, like the notes to yourself for later, you and the computer and then you and the AI,
00:04:28.480 | that's a kind of a helpful framing of like, okay, this is a file or a piece. Yeah, yeah, exactly.
00:04:34.320 | Okay. Well, maybe to start with, I'm going to try to clean up these notes a bit. So to edit,
00:04:44.480 | everything in a dialogue is called a message. There's three main kinds, code, note and prompt,
00:04:50.480 | and a slightly obscure one called raw. And you can always edit an existing one just by clicking on its header.
00:04:57.520 | Or you can just hit enter on your keyboard when it's got the blue around it. And when you do that,
00:05:04.720 | it'll pop open this editor. And if you want a bit more room, you can maximize the editor.
00:05:11.520 | Everything you see on the screen has keyboard shortcuts. And if you click on list of keyboard
00:05:16.880 | shortcuts, you can learn them. And I've learned pretty much all of them and found basically all of them
00:05:22.880 | really useful. So for example, command up will take me to the top. Anybody who's used VS Code before,
00:05:32.480 | this is actually VS Code's editor that we're using. So it's a really powerful editor.
00:05:40.800 | And what I'm going to do first is, I think, split these into separate messages. And so the split
00:05:49.760 | into message keyboard shortcut is control shift hyphen. So if I do that, you can see it's now
00:05:55.920 | splitting it into separate messages. So let's go ahead and do that. While I do that, Jono, anything to add?
00:06:03.520 | Yes. Well, one possibility is Jeremy could also share this URL with me. And then if he was making edits,
00:06:12.240 | I would see those changes to the messages appearing on my screen and vice versa. So this is collaborative
00:06:17.360 | by default. Cool. Okay. So maybe in this case, I can start splitting them and you can talk briefly.
00:06:24.080 | I'm going to stop sharing so that I can pop it in the chat for you. And then I'll start sharing again.
00:06:28.400 | And hopefully we'll see things pop into my screen. So. Okay. So I just shared with Jono
00:06:36.080 | the URL of my dialogue, which I would only do with somebody I trusted or with an instance
00:06:42.160 | that didn't have anything sensitive in it. Cool. So if you go to the top, I'm going to hit
00:06:46.960 | A to add a message above the current one. Okay. I'm going to run some code. Great.
00:06:51.040 | Jono, can you finish my work for me then? Why don't you click on
00:06:55.520 | the bottom note and maybe hit a control shift hyphen? Yeah, I'll carry on splitting that. Thank you.
00:07:05.040 | And one more. There we go.
00:07:10.640 | Slightly more organized little notebook. Okay, great. And then, oh, and I see you deleted the top
00:07:17.040 | one for me. Thank you very much. And so now I'm going to
00:07:24.560 | make this a bit easier for me to organize by turning the top of each of these into a heading.
00:07:29.920 | So I can hit any number one through six to turn it into a heading one through heading six. So I'll just hit two.
00:07:35.680 | Okay. And so this is just a markdown behind the scenes. And then I'm going to go back up to the top
00:07:45.680 | to do that. I press the home key on my keyboard. I'm actually using a laptop here. And on most laptops,
00:07:51.040 | you press function left is the same as the home key. And this little button over here, which has the
00:07:58.960 | shortcut control shift V, pops open my little list. Jono, do you want to add
00:08:11.440 | X equals one somewhere? Sure.
00:08:15.360 | So I actually just hit the slash key to put a message at the end and define a variable.
00:08:23.440 | Okay. See here, it's got a list, the list X equals one. And so it's quite nice. If I click on that,
00:08:27.840 | it'll take me to where Jono defined it. Great. I can click back up here. I can close it.
00:08:39.520 | Okay. So I added this little one here. Why does it look weird? It doesn't quite look like chat GPT.
00:08:48.640 | It doesn't quite look like a Jupyter notebook. It doesn't quite look like a bash shell. It's
00:08:52.720 | like a bit of a weird combination of everything. Yeah, I think, I don't know, Jono, I feel like you
00:08:58.400 | explained this better than me. So do you want to talk a bit about what we're trying to push people towards?
00:09:04.000 | Okay. So maybe a good way to do that is to talk about those different analogies you used, right?
00:09:09.680 | So for example, in chat GPT, you might want to ask a question or, you know, okay, how might I plot a sine wave
00:09:16.880 | in matplotlib? And usually the interaction with the AI would be in one window.
00:09:23.920 | You might be using cursor or something like that, but often it'll be,
00:09:28.400 | you're in one environment for chatting to the AI and it's only for that. And so you can imagine like
00:09:32.720 | we could create a dialogue that was just prompt messages. It's only this exchange between me and
00:09:36.720 | the AI. But here, because we're in this live environment, you can also say, okay, cool. It's
00:09:42.560 | given me some code. Well, I can also execute that code. It's not separate places to do your exploratory
00:09:49.040 | programming and to do your prompting and to do your notes. It's all just mixed together in that same
00:09:53.680 | place. So I think what were the three you listed? You said it's not quite a code editor, but we have
00:09:58.480 | like this ability to write some code and edit it. It's not quite ChatGPT, but we have an AI that you can
00:10:03.920 | discuss with. It's in the second message of the dialogue, if we're. Yeah. Yeah. There we go.
00:10:09.600 | Yeah. So these different types of message are just different ways of interacting. And because they're
00:10:16.640 | all mixed and mashed together, it makes it quite a fun playground because maybe the other like piece of
00:10:23.600 | this is that the AI is not just in isolation. When I said, how might I plot a sine wave and not plot lib,
00:10:28.400 | it's not like only answering that question. It can see that we were in a dialogue. It can see that we
00:10:33.040 | have this other content here. And so, yeah, you're kind of sharing this context with, in this case,
00:10:40.080 | Jeremy and I are sharing it. And then also the AI can see what we can see and riffle for that as well.
00:10:45.200 | Also, we're trying to support the solver method, which is one of small short iterations with quick feedback.
00:10:53.520 | So we're trying to encourage people not to, or the AI, not to create huge blocks of text. So,
00:11:00.320 | you know, the thing at the bottom is just one line long. I can certainly add more lines.
00:11:06.880 | And, you know, we can even maximize it. Command shift X.
00:11:14.480 | To toggle that. But it's very unusual to write, say, more than 10 lines of code at a time here.
00:11:22.640 | Whereas if you're, you know, familiar with something like code code or codex, you might be saying, oh,
00:11:26.800 | the unit of operation is 10,000 lines of code, get in a half an hour execution loop. This is very much
00:11:32.320 | about like one or two lines at a time, immediately visualizing the output, moving in a very small step
00:11:38.160 | at a time. Yeah. Human in the loop. And everything about Solveit is designed to nudge in that direction.
00:11:42.640 | And it's also hopefully encouraging your brain to think about more of a chat bot where you write small,
00:11:51.040 | you know, prompts rather than giant files most of the time. And that's why it's at the bottom of the screen.
00:11:59.120 | So yeah, there's just things, there's things we've done that's different. And that there is,
00:12:05.280 | there's reasoning behind it. And we've actually found it works pretty well. So in fact, to give a sense of that,
00:12:12.880 | I've got a little list of some examples of how I've used Solveit over the time. Basically, most of us at AnswerAid AI do
00:12:26.400 | most of our work in Solveit now. So for example, in this case, I wanted to create a
00:12:31.360 | a message telling people about how Solveit improved over a period of time. So I
00:12:40.080 | grabbed the release notes, the short release notes from our GitHub repo, pasted them in
00:12:50.640 | and asked Solveit to help me turn this into a more readable format. And I wanted it to go and
00:12:58.080 | actually extract the PR and get all the information about each PR. And so it showed me how to do that
00:13:03.120 | and pulled together the information about the diff of each PR. And so I was basically using it to
00:13:11.360 | interactively create information from our community about the latest updates to Solveit.
00:13:17.840 | Something I think everybody hates doing, if you've ever had to, was setting up
00:13:22.240 | an email server. I ran an email company for 10 years and I still hated it. So I really liked that
00:13:29.840 | that when we set up AnswerAI, I just asked Solveit, okay, how do I set this up?
00:13:40.800 | Make sure it's deliverable everywhere. And I just, it said, okay, here's all the steps.
00:13:49.440 | And so I actually, you can see you can kind of collapse things when you're done. So I just went
00:13:55.440 | through and got the CSV from Cloudflow like it told me to and asked, and it took me through all the steps
00:14:03.520 | of doing everything, which is a lot easier than all the clicking. And it also left me with something now,
00:14:11.200 | when I need to do this again in the future, I just go back and repeat the process.
00:14:18.240 | Another example was I wanted to share with my team how we were going to go about horizontally scaling
00:14:25.760 | our infrastructure, for example, and I recorded a chat with some of the team about it. And then I
00:14:32.000 | basically just grabbed that transcript and pasted it into a Python variable. And then I grabbed our style
00:14:40.640 | guide and pasted that into another variable and told Solveit, okay, I want you to help me write up a description of
00:14:47.440 | this project. Do you have all the information you need? And then we started going back and forth iterating on
00:14:55.840 | this information for the team. And it goes all the way back and talks about Plash and Solveit and how it all works,
00:15:04.240 | which is very nice. Another example was I grabbed
00:15:11.840 | from Archive, the HTML version of a paper that I was interested in. And just pasted it into a note, which is...
00:15:22.400 | not all of it came out beautifully in the note, but interestingly it was totally good enough for...
00:15:33.920 | to solve it to understand it. So I actually read it, you know, normal PDF reader, but then I asked like,
00:15:44.800 | "Can you help me understand this paper?" And it can understand the paper because it doesn't care about
00:15:50.320 | minor formatting issues. And it worked really well because I was able to go back and look at it
00:15:56.240 | section by section. And, you know, it's like I was quite interested in some of the key citations in the
00:16:02.320 | background section. And so it's gone through and told me about what each of those citations were with
00:16:08.640 | links to them. And then I was like, "Oh, do I really need to know this?" And again, it's kind of looking
00:16:17.040 | it up and giving me citations. And so I found for reading, it's nice. And it's also nice to implement
00:16:24.240 | bits of code as you go as well. Or in this particular case, I didn't.
00:16:32.560 | Yeah, Jono, I know you do some implementation as you go paper reading too, right?
00:16:36.480 | Yeah, yeah. But the takeaway here is that it's not like it's just designed for reading a paper and
00:16:42.000 | implementing. It's the scope from, "Oh, I just want to casually ask questions about a PDF." Like I might
00:16:49.120 | normally go to claw.ai for, or, "Oh, we'd like to deploy a code change to our backends." Like I'd normally
00:16:54.960 | go to like some sort of system administration tool or use SSH. Or like, "Oh, I want to explore some code and
00:17:00.320 | some ideas." Or I want to teach something. All these pieces kind of end up being different types
00:17:06.320 | of dialogue, right? They look different. Some are mostly prompts. Some are mostly code. A lot of them,
00:17:10.320 | I don't use the AI at all. But it's all in the same basic canvas. So I think that's, yeah, a good way to
00:17:16.720 | start thinking about what this tool is as we start speaking about the particular features. Like, why
00:17:20.480 | might you want this? It's not at all a feature that's relevant for reading a paper, but it might be
00:17:25.280 | hugely useful for like Eric who's fact-checking his book and vice versa, right? There's some features
00:17:30.080 | here that are only for coding. And if you're interested in solving it for writing, it's like,
00:17:33.520 | I don't care about Python tools as functions. But you can see that we're kind of designing a very
00:17:39.280 | general purpose thing. It's just why there's so much packed in all the nooks and crannies.
00:17:42.720 | Yeah. If you mouse over or use your keyboard to select a message, you'll see it's got a little
00:17:48.960 | message toolbar. I basically never use this anymore because everything has keyboard shortcuts. So I'll mainly
00:17:54.560 | be doing that today. So for anybody who's used Jupyter before, we've tried to align
00:18:00.080 | keyboard shortcuts to be identical. We've got quite a few more than Jupyter, but as a subset. So for
00:18:07.200 | example, to create a cell above, it's A or below, it's B. And there's no control or command or they're
00:18:13.680 | called chords. They're not chords, you just hit B. So I'm just going to hit B. And so I'm going to show you how to use
00:18:18.960 | solve it to be just like ChatGPT. And so to do that, you have to be in prompt mode. And these are command
00:18:29.200 | or control, shift J, K, L, semi-colon, or just click them. Again, I always use my keyboard. So I hit
00:18:37.200 | command shift L to go into a prompt. And I can ask anything I want to. So
00:18:53.040 | can you tell me concisely how I can use ChatGPT? Whatever. And say submit. And it'll tell me what to
00:19:06.000 | do. And you'll see that us using it is going to look a lot like it, right? So it's saying like,
00:19:13.840 | what do you want to use it for? Now one thing you'll notice here is it hasn't immediately let me ask a
00:19:18.400 | follow-up question. And that's because I just hit the submit button or hit command enter. But actually,
00:19:24.480 | if I hit B to go underneath. If you hit Alt Enter or Option Enter, that's more like ChatGPT. And that's
00:19:34.000 | going to immediately let me ask another question. So if I say like, what kinds of facts? So if I now hit
00:19:45.600 | Alt Enter, you can see it's immediately got me back, ready to ask the next one, right?
00:19:51.760 | So it's slightly ironic to be asking about ChatGPT, given that we actually use
00:19:56.560 | anthropic models behind the scenes at this point in time.
00:19:59.040 | Is it like, Lord?
00:20:01.920 | There we go. It'll be so happy.
00:20:04.560 | If I wanted to think more about it, you sometimes get better answers. I mean, this stuff's simple. You
00:20:08.720 | don't need to. But if you want to have it think a bit more, it takes a bit longer to get the answer.
00:20:13.280 | You can hit the use thinking button. I don't tend to use it until I get answers that aren't
00:20:19.760 | as good as I wanted. And like, oh, okay, I guess I've hit something difficult.
00:20:23.600 | Command shift D is a shortcut. So you can just see I can toggle it on and off.
00:20:28.000 | Whoopsie-daisy. Now this what happened here is I accidentally left it in code mode rather than prompt mode.
00:20:37.520 | And the reason for that is actually because I
00:20:40.320 | have default code on, and that's actually default code is on by default. We're trying to encourage
00:20:48.720 | people actually generally, if you're doing coding, just to write your own code rather than have the
00:20:54.000 | AI do it for you.
00:20:56.000 | So we always switch it back to code mode unless you turn that off, in which case you stay in the same
00:21:01.440 | mode you're in. So if I go back and re-ask this question and hit Alt+Enter without default code,
00:21:06.880 | you'll see it's now left me in prompt mode. And so now, and I tend to use voice most of the time
00:21:13.360 | for this kind of stuff. So I can say like, oh, that's interesting. How does this compare to
00:21:18.480 | Claude? Is that similar? And I'll turn use thinking on, and
00:21:25.040 | you can see a little brain pops up. That means it's thinking.
00:21:31.280 | There you go. So it knows. And it looks pretty happy to me, Jono. I think you're right.
00:21:41.840 | Yeah. So that's like, like ChatGPT, right? But here's something interesting. You know,
00:21:50.560 | if I create a note here, now, this is, I find this really helpful.
00:21:53.840 | And add a Markdown heading. So our basics with Markdown 2, this is 3, right? I can keep things
00:22:05.040 | organized, right? So I can collapse that left and right, or click the little arrow.
00:22:09.840 | And you can see here, this little number appears. It says this, this note contains six tokens,
00:22:17.120 | but inside it, there are also another 723 tokens. You can kind of see how much you've collapsed away.
00:22:23.040 | But that's great. You know, I've kind of, and also you can move around. So hit left, it goes to the,
00:22:29.360 | to the start of the section, go right to go to the end of the section. So here I could say like,
00:22:37.920 | like jupyter/reple. Whoops, I made that a prompt. So that's fine.
00:22:47.840 | That's great. It's, it's telling me stuff. So I can just hit command shift K or click that. And so I'll
00:22:58.240 | collapse this section. All right, Jono, since we're, since you've got my URL, do you want to do some
00:23:06.160 | like jupyter examples? Sure. Before I do though, just on the, this is like chat GPT, I guess you've
00:23:13.760 | already seen it, but one way this is quite different is the, the non-linearity of it. You know, a lot of
00:23:20.080 | these chat products are still very much this, like it's an, it's an exchange of messages. And once it's
00:23:24.320 | done, it's done. But these are all editable. Like, so I'll go to the first prompt message you showed
00:23:32.320 | and I'll change it. Right. I'll, I'll edit the AI's response. And now any further interactions
00:23:42.240 | with the AI sees that as part of the history. Or if I didn't like the, the next one, like this no
00:23:48.000 | longer makes sense. What kind of facts I can delete that. Right. So it's a very freeing chat canvas,
00:23:53.920 | because if I want to go down a rabbit hole, I can, and I can always come back, uh, collapse away.
00:23:59.360 | We also have ways of hiding certain interactions, right? So if I don't want these to color the way the
00:24:04.320 | AI interacts in the future, there's a little, um, eye icon, which is probably showing as toggled now on
00:24:08.800 | Jeremy's screen. Yeah. Um, so you can manage your chat history a lot more usefully. Um, okay. But anyway,
00:24:15.360 | we should, uh, we should talk about the Jupyter REPL part of it, um, excuse me. So, um, I want to go below.
00:24:23.840 | Um, yeah. So like we showed earlier, I think we had a variable X defined, um, as in Jupyter,
00:24:32.720 | if you execute a cell that has an output, um, it's going to show, I guess this is from our plotting,
00:24:41.280 | uh, the map, the demo, um, but this is a live variable, right? So for example, things like
00:24:46.480 | autocomplete, um, I have, uh, I think arrays normally have a shape. Yeah. There we go. I've got this little,
00:24:53.680 | ah, you can't see my, my dynamic. Why don't you show your screen so we can see all that.
00:25:00.160 | Sure. All right. Just a sec. Um, yeah, I guess the, uh, the,
00:25:08.880 | just seeing the magical edits was, uh, that's useful for the, the dynamic nature. Um, yeah. So showing
00:25:15.840 | here, we've got this X variable. So if I start typing. Could you make this less wide, maybe,
00:25:19.040 | and increase the font size of it? Great. Thank you. Sure. Let's go. What if I do something like that?
00:25:25.120 | How's that? Nice. Um, yeah. So if I write a variable name,
00:25:29.520 | I'm going to see it printed out as the output. I don't have to use print in this. I want it.
00:25:32.720 | Um, if I start typing, I've got this dynamic autocomplete for some of the attributes of the,
00:25:38.000 | the, um, variable. Uh, I could modify this in place, right. Um,
00:25:44.080 | and then print, print some part of it. So, um, it's a very live and dynamic environment. Um, and it's
00:25:55.120 | got this persistent state between running. If you're ever like, you've managed to make something
00:25:59.520 | up or you'd actually like to redefine X, we always have the same primitives as something like Jupyter
00:26:03.440 | notebook. You could restart the environment, right. So this is going to clear. If I show the variables now,
00:26:07.440 | um, you'll see there's no values defined because we now haven't run anything that shows what X is.
00:26:13.920 | I've got a little what's appearing on my screen. Yeah. I clicked it, uh, very fast. Um, let's just do
00:26:21.600 | that again. Okay. Um, uh, fair enough. It's no longer an empire array. Um, but, uh, yeah.
00:26:34.240 | Okay. So you can see, we've got a variable X defined. If I restart the notebook, it's going to go away.
00:26:37.920 | Okay. I know when it's ready because you'll see the, um, times disappear on the code. Yeah. Um, and so
00:26:45.520 | we're able to like reset the slate if we want, but for the most part, things are live and existing
00:26:51.440 | until you want to get rid of them or until you close down the notebook. Um, so this is very useful
00:26:55.440 | for later on, we'll show like running a web application or defining a bunch of functions. I don't
00:27:00.480 | think there's much to add now for the, um, the like Jupyter piece, other than if you've ever used any
00:27:05.760 | kind of notebook environment, you'll be very familiar in this, in a spot. Um, yeah. I don't
00:27:13.840 | know if you've got more to add on that, Jeremy, or you want to go through things. Okay. Cool.
00:27:18.800 | Okay. And Jono's changes have all appeared at my end as well.
00:27:32.240 | So, yeah. Um, every, uh, note prompt import and prompt output is formatted markdown. Um, even,
00:27:50.000 | for example, if I create a note here and, um, let's find a cute puppy.
00:28:00.240 | Some of those are a bit, this is a proper cute puppy. It's like, yep, it's a cute puppy.
00:28:08.320 | So I can now copy that, jump over here and say, either in a note or in a prompt, oh wow, this sure is cute.
00:28:28.640 | Paste. And now we've got a puppy. And the key thing behind, um, Solvert is that the AI sees everything
00:28:43.440 | you do and vice versa. So we can ask it. I want a puppy just like this one. What type do you think it
00:28:53.680 | is and how old do you think it is? Do you think it would make a nice pet for our family?
00:29:06.480 | Okay. Golden retriever. Good choice.
00:29:13.200 | Um, so I think now might be a good time to talk about modes. Um, so I might just clean this up a little bit.
00:29:24.720 | So I just, um, pressed X to cut and I had already collapsed that section, so it cut the whole section.
00:29:32.960 | Um, uh, I could paste it somewhere else. So if I hit V, you can see I've now moved my section.
00:29:47.520 | Um, so we've got this interesting thing called
00:29:51.120 | modes. Um, standard, learning, and concise. So maybe the best way to explain that is by
00:30:00.000 | showing you. Um, what do I do?
00:30:06.240 | Okay, right up to the top. I'll just say like, um, in learning mode. How do I plot a sine wave?
00:30:14.800 | This is a good answer, right? Because
00:30:25.760 | like, you can't really answer a question until you know what somebody knows. Um, because you really need
00:30:34.400 | very different kinds of answers. Um, and so I can say like, um, to be honest, I don't even know what
00:30:42.720 | one is. But, um, I was told for homework where we're meant to create them and learn about them and stuff.
00:31:00.880 | So I was like, yeah, let's not plot right yet. Okay, that's good. Uh, on the other hand, uh,
00:31:06.480 | yes, I'm an expert in matplotlib and in numpy and do a lot of trigonometry in my work. I just want a
00:31:16.000 | reminder. So please jump to showing me the code. Be concise.
00:31:24.720 | Now one thing that's interesting here is I've, I've added this, um, question above this question.
00:31:30.400 | And that didn't confuse it because of the golden rule, which is that, um,
00:31:36.080 | the AI sees what you do. And so the idea is if you're, if you're here in the dialogue, it only sees
00:31:44.480 | what's before it. It doesn't read ahead, you know. Um, so it didn't see this question when it answered
00:31:53.120 | this question. Um, so that's learning mode and it really does encourage you to make sure that you're
00:32:03.600 | learning as you go. Um, on the other hand, if I copy and I'm just going to paste this twice
00:32:09.440 | and then I'll go to the top. So it won't see the previous ones. And if I go to concise mode,
00:32:14.960 | this just gets the job done and it keeps everything compact, um, which is quite often what I want.
00:32:24.640 | And then standard is basically the kind of default flawed behavior, which I very rarely like. It tends
00:32:34.080 | to produce overly verbose code, um, doesn't try to understand your needs very well, but it's there.
00:32:43.440 | Sometimes you just want the full example, right? Like it's, you know, I just want the, the, the default
00:32:49.920 | tutorial on that, on that plotlib that I might find on the internet. So I can copy and paste
00:32:53.680 | the one line I actually care about. And, um, you know, once you get code like this naturally,
00:33:01.760 | you'll very often want to run it. Um, but rather than just run it flawed code style in the background,
00:33:06.720 | we kind of bring it front and center. So if you hit W, um, or, um, or hit the add messages,
00:33:13.600 | fence block messages, it just turns those into a code message for you, which I can then run. Okay. And, um,
00:33:23.280 | um, the AI sees the same output that you do as well. Um, so I agree, like...
00:33:33.360 | ...ask it anything you like, and it'll be able to see all the outputs and everything.
00:33:51.440 | All the outputs and everything. There you go. Um...
00:33:59.520 | So it's interesting. Um, I guess I use learning mode more than I used to. Um, I kind of went into
00:34:17.840 | using concise mode a lot for a while, still sometimes use it, but I'm definitely realizing the more I use
00:34:22.320 | AI,
00:34:24.320 | the more I realize actually I need
00:34:28.320 | to be pushed to not use AI too much and to take my time to explain what I actually want and to
00:34:34.960 | actually learn as I go. Um, I think we've seen this in quite a few of our staff and students,
00:34:42.160 | more and more people who are quite experienced being like, yeah, I still got to use
00:34:45.840 | learning mode. Um, do you use all of them a little bit, Jono? Do you have one?
00:34:51.200 | Yeah. I, I, I default to learning mode for some things, but occasionally, especially if I'm feeling
00:34:56.400 | like a little lazier and wanting to get something done that I've done before, right? That's something
00:35:00.800 | that's almost rote. I just want to quickly bang out some plots of the same data that I plotted a
00:35:05.280 | previous time. I'll switch over to usually concise mode just to...
00:35:09.040 | Matt Plotlib is great for concise mode because like, who's got time to learn from that?
00:35:14.320 | Would you like to learn about importing Matt Plotlib? Okay, let me just toggle it into standard or
00:35:19.200 | concise for a little bit. But, um, if I'm actually engaged and working, um, I'm usually coding first and
00:35:25.200 | then if I want, I'm asking learning mode. And it's very steerable, right? Claude Sonnet is very steerable to say
00:35:29.920 | I'm, I'm actually trying to get this done. I, I don't want you to like baby me, but, um, I do want to work
00:35:36.480 | in small pieces a few lines at a time. You can give it some directions like that at the start, and it's going
00:35:41.040 | to very much like adhere to that, um, and follow along. So, um, you can always stop it, um, at any time. So,
00:35:51.680 | tell me a detailed and adorable story about the adoption of this puppy. Make it a real hero's journey.
00:36:05.840 | He's thinking. And so, I probably won't want to stop this because it's going to be super cute.
00:36:18.560 | There we go. So, as we start learning about the puppy, I can just hit stop.
00:36:22.720 | Okay, I don't want to read that now. Um, and you can also do that with, um, code.
00:36:32.320 | And, uh, the shortcut key is shift, uh, shift s for stop. So, shift s. Oh, okay.
00:36:44.720 | Nice. Um, okay. I'm looking at the list of AI stuff. I guess the only one we haven't covered
00:36:53.520 | is tools. Do you want to talk about tools briefly and then speed through some UI bets?
00:36:58.160 | I love tools. Um, so you might have heard about, um, MCP, um, and, uh, all this kind of, uh, fancy
00:37:07.520 | agent stuff. Um, we have a very different approach to all that, uh, in solve it, which we think is
00:37:14.800 | more powerful, um, but, uh, also a lot easier to do. Um, to create a tool, you just create a function.
00:37:32.640 | Get the current user's name.
00:37:41.680 | So I've got a function and, um, I can now use it in an agentic loop. Um,
00:37:57.360 | So let's just show you that as well.
00:38:07.680 | You might need a type name.
00:38:08.800 | Yeah. Everything needs a type. So it knows what to pass in. Thank you.
00:38:12.240 | Uh, Jeremy, I noticed the user ID for this user's name.
00:38:17.680 | I noticed some, uh, ghost text appearing there and it wasn't doing that before.
00:38:22.720 | Yes. Talk about that.
00:38:25.440 | Um, okay. So that's, that's the great feature in most IDEs. Yeah.
00:38:28.960 | This great right arrow complete or right arrow to accept it. Um, obviously this is often useful
00:38:36.000 | if you're writing fairly boilerplate code, um, but it can also be distracting if you're learning.
00:38:40.560 | So you'll notice we're now in standard mode, which is why this is suddenly showing up.
00:38:43.920 | Um, if you're in learning mode, you don't get the ghost text. Although if you want to, like,
00:38:49.440 | if it's something obvious, like this, um, doc string is arguably quite easy to predict.
00:38:54.800 | there are keyboard shortcuts to trigger it. Um, oh, it won't actually change until I
00:38:59.280 | send it off. So yeah, if I
00:39:03.040 | do that now doesn't happen. So if you hit option or alt full stop,
00:39:13.360 | then it forces it even in learning mode, which is a pretty good idea. It's not just distracting. It's
00:39:21.200 | encouraging you to turn your brain off, which is not always healthy.
00:39:24.240 | And this is going to be extremely incendiary. And when we were developing Solveit, like I, I felt it
00:39:30.480 | almost unusable until we had the ghost text. Like there was a while where I was so used to tab complete
00:39:36.400 | that it, it felt like wrong to be typing in a code box and not have it. And now I don't think I've had
00:39:41.120 | it on by default for the majority of my work for the last few weeks. Yeah. I mean, I, I like it on
00:39:47.040 | occasion. It's a bit like, again, when it's back to something more boilerplate. Interesting. Um,
00:39:51.120 | but having the like, oh, I can just hit a keyboard shortcut to get the completion if I want it.
00:39:56.080 | And I know it's a function that like my brain would normally be waiting for that text to appear and hit
00:40:00.160 | tab. Um, it's still there. Um, but when you actually just want to like wrestle with some code yourself,
00:40:05.520 | it's not there. So, uh, so yeah, I can say, um, can you please get the ID for the current user?
00:40:15.120 | Now, obviously if every function was available as a tool, that would be bad news if you had like,
00:40:22.400 | you know, delete directory functions in the symbol table and so forth. Um, so that's, you just have
00:40:28.960 | to tell it at least once in your dialogue that something is allowed to be used as a tool.
00:40:32.800 | And to do that, you write ampersand and then you put the tool name in backticks.
00:40:40.240 | Or if you want to be fancy, um, you can put multiple tool names in an array in backticks.
00:40:56.800 | And so you can see, it's actually looking up these functions. Um, and as I mentioned, you can,
00:41:06.480 | you can have it anywhere, the, the list of tools. Um, so I could make this a note and say
00:41:19.120 | some note tools available colon. Um, and then get rid of it from the prompt and it'll still work.
00:41:30.240 | It's hard to overestimate how powerful this is. Um,
00:41:44.640 | you basically have an instant cloud code, you know, in fact, we've provided all the tools you needed
00:41:51.440 | for that. There is something called Dialog Helper.
00:41:54.400 | And Dialog Helper can tell you about its own tools. So you just hit, um,
00:42:09.040 | it's not an all, I think you have to import it if you want FC tool info, but if you just do tool info,
00:42:13.760 | it's there. So we've got tool info. Um,
00:42:18.240 | and so that's just brings all the tools in and you can edit that if you want to. Um, actually,
00:42:26.720 | I'm just going to call out what happened there. He called a function and it added a message to the
00:42:30.160 | dialogue. Oh yeah. So this is one of the pieces that we haven't spoken about yet, but there's this
00:42:34.000 | idea of like, uh, we call it meta programming. You can see one of the tools is add message. Um,
00:42:39.440 | and so this is a tool that you can hand to Claude. In fact, it'll have it now because that note exists.
00:42:43.760 | Um, so you could ask it to add titles to tidy up your dialogue, right? Or, um, add a code cell that
00:42:51.360 | does some specific thing, um, or find all messages that do something and then edit all of them to do
00:42:57.120 | something else. There's some very powerful pieces that fall into place. And then for files, like you're
00:43:00.960 | talking about Claude code style, um, HNT, you know, file editing. Yeah. We've got, um,
00:43:05.680 | ability to grip and said and view files and insert or replace or edit. Um, so, so we use this, um,
00:43:14.400 | I think most recently to like do some code archeology. Quoing a GitHub repository, let, uh,
00:43:20.480 | solve it loose to say, Hey, use these tools, figure out where like these arguments eventually go.
00:43:25.680 | Right. And so it finds a function that uses them and then it finds what function that calls and it finds
00:43:29.520 | what function that calls and it reads another file to figure out. Oh, okay. Down at the bottom of the
00:43:33.120 | stack, they're passed over the message queue in this format. Um, it was very useful to be able to send
00:43:39.520 | it off on a little bit more of a, a deeper task once in a while. Yeah. In fact, the, this is basically
00:43:45.280 | the same sort of tools that Claude code has by default. These actually come from Claude's text edit API
00:43:51.120 | and we've, um, improved some of them and we've also added some others like the ability to search.
00:43:56.240 | Um, so yeah, it can go away, search the code base and make edits to your files. And so you can use it
00:44:04.480 | fully agentically, but we encourage people to be a bit cautious about how you do that. Um, I do it
00:44:13.200 | in a way that really menial stuff. Sure, get it, go and do it for you. So we, this, this code archaeology,
00:44:22.320 | it was easier than us digging through the code to see what calls what, um, but we're not going to get
00:44:27.920 | it to go off and write all our software for us because we end up with something we don't understand.
00:44:32.720 | Yeah. I think the most common pattern by far across Answer.ai is like, go and find some information.
00:44:37.520 | And in fact, there's actually a couple of tools built in as well. So you don't have to create
00:44:40.800 | functions for them for specifically searching and reading URLs. Um, because that's often what you want,
00:44:46.720 | right? Like go read the docs of the Gemini API and tell me how to embed a document.
00:44:50.960 | And let's do that right now. So for example, fast.html. Um, so there's a couple of ways you could,
00:45:01.440 | you could do this. I could say like, um, um,
00:45:14.800 | um, please have a look at. And any links that would be helpful and tell me how to create
00:45:28.880 | database applications and fast.html. Um, yeah, so that's going to go and look at that, um, link. As you
00:45:41.600 | can see little things popping up to tell you, it's reading the URL and it's reading more URLs.
00:45:46.400 | And, uh, the thing it's done is it's gone through this thing that's designed specifically for language
00:45:53.680 | models to look at, just telling it all the things, places it could look for information. And, um,
00:45:59.120 | there it is. Um, or, um,
00:46:08.240 | you could say, please create a note containing the contents of.
00:46:22.160 | And it can do that too.
00:46:30.880 | Hey, um, is it because the tool definitions are further down in the dialogue?
00:46:36.800 | Um, this one I was expecting to already be there. Um, I actually deleted all the tool definitions,
00:46:43.840 | but, um, it's meant to already know that particular one. Um, oh, okay.
00:46:49.680 | Um, well, we could always, uh, show the keyboard shortcut to copy the output and, um,
00:46:56.880 | absolutely dump it in a note if we need, but it might just need a reminder about what it has access
00:47:03.040 | to. So dialogue helper has some, you know, brief instructions, uh, documentation. Um,
00:47:08.720 | so one of them is called URL to note, which is the one I was thinking it would use for me. Uh, you can,
00:47:17.600 | oh, you know what? I didn't use thinking mode. I'm kind of curious now. Let's try turning on thinking mode.
00:47:24.560 | What if I also use your tools?
00:47:26.240 | Hmm. Interesting.
00:47:39.520 | I didn't know we made URL to note available. Maybe we haven't updated.
00:47:53.120 | No, it's right there. Well, there you go. That's interesting. I think, um, that's a new,
00:47:58.640 | so we're using Sonnet 4.5 and it's interesting. Every language model is different. Um,
00:48:05.200 | so we're still learning, uh, about what each language model can do. And it seems for some reason,
00:48:13.600 | this one might need more encouragement to use specific tools.
00:48:18.720 | I think the rest of this is going to be mostly, oh, I guess we should talk about like, uh, sharing
00:48:36.160 | dialogues and what's going on there. That's going to be relevant to new users and old users alike.
00:48:41.360 | I was just going to also mention, um, undo is important. So one thing I quite like is if I
00:48:50.560 | create a couple of notes here. So I hit Alt Enter there. Um, and if I delete D from there,
00:48:58.560 | and I delete S from there, and I can go back here and press Command Z, it's undone that one. Go back here,
00:49:07.840 | undo that, it's undone that one. So it's even quite smart if you edit a prompt output,
00:49:13.600 | rerun the prompt. You can go back into the prompt output, hit undo to undo the AI's changes as well,
00:49:20.640 | which is quite nice.
00:49:22.320 | Um, all right. I think there's lots of useful things here.
00:49:34.080 | Should we go through this? Yeah. Okay. Um, so this, um, this thing that's running here
00:49:46.240 | that has, um, you know, variables that have values. We call it a kernel. That's not just we call it a
00:50:00.800 | kernel. It is called a kernel. Um, it's a, it's a running Python interpreter, basically, that has this
00:50:08.320 | state. And when you hit restart, it restarts that Python interpreter and clears out its state.
00:50:14.800 | Um, so it's a full running copy of Python running on this machine that we've deployed for you called an
00:50:21.280 | instance. Um, if you go back to the dialogue list, that stops your kernel. So if I go back into it again,
00:50:37.680 | and ask what a is, it's not there anymore. Um, however, if you don't click that top left thing,
00:50:50.480 | but just like go back into here, for example, you could go to the dashboard and click the button there.
00:50:56.880 | Again, there's multiple ways to get back to it. That doesn't stop the kernel. And so you can see down at the
00:51:02.720 | bottom here, there's a list of running kernels, right? So there is that kernel. So I could then
00:51:09.120 | open up "open up Claire's lesson". And in that, um, click that code. A doesn't exist because this is a
00:51:23.920 | different running copy of Python. Or else back over here in the original one. That's still right there. Um, and you'll see our, um,
00:51:35.600 | what a refresh list of running kernels now shows me I've got two running kernels.
00:51:42.480 | Do you think that's clear as to what a kernel is, Jono?
00:51:45.920 | Yeah. Um, and so each dialogue has its own kernel, I guess, just like a dialogue is the collection of
00:51:52.400 | the notes and discussion and so on. The kernel is like the thing that's run any code that you've run
00:51:56.960 | in that session. And if you restart it, you're clearing the slate. Um, yeah.
00:52:01.920 | Um, so, uh, I find it really helpful that we have a, um, duplicate button, which has the shortcut D.
00:52:11.440 | Um, and I find that helpful because often if I'm working through trying to solve a problem and
00:52:18.960 | I kind of, not quite sure what direction to go. And I want to do a little experiment, or I want to create
00:52:23.120 | multiple versions with different tweaks or different parameters to a model. Um, I can hit D and it opens up
00:52:30.960 | a second copy of this kernel. They're now both running, you know. Um, and then I could change its name to
00:52:40.240 | other updates or whatever, and these are now two separate ones I can play with and go back and
00:52:47.440 | forth between the two, which I find quite handy. And everything you do, you know, ends up, um,
00:53:02.640 | you know, saved in your dialogue list. This is really nice for like templates as well. So often I
00:53:12.320 | have my, my starter template that loads my, uh, latest chapter of the book and populates some data into a
00:53:19.280 | list and all those other things. And then I could duplicate that a bunch of times. And in one of them,
00:53:23.600 | I'm exploring the user feedback and in another, I'm editing and in another, I'm changing which
00:53:27.680 | chapter we're doing. And then you've still got all of your prompts and your tools and your bits and pieces.
00:53:31.760 | And in that case, you, you might want to actually click the, this does exactly the same thing,
00:53:35.760 | click the jute button on the dialogue list. Um, so you can also go into a terminal at any time,
00:53:44.800 | which is shift T, uh, or you can, um, do it here as well. Um, and that'll go into a terminal in the,
00:53:51.760 | the current directory that you're in. So I'm currently in the teach directory. You can go back to earlier
00:53:56.320 | directories using the breadcrumbs that appear here. Um, so if I press shift T,
00:54:01.040 | you'll see, um, you'll see I've got a terminal and you'll see here, all of the dialogues are actually
00:54:06.880 | stored as Jupyter compatible notebook files. Um, obviously in Jupyter notebooks, you won't have
00:54:13.600 | all the functionality, um, um, but they, they do go in both directions. And so I could even like
00:54:22.080 | open up in Vim and see that it's actually a JSON file behind the scenes, um, and I can CD around and
00:54:33.920 | do all that kind of stuff. Um, that's also another way you can create folders, move things between
00:54:41.760 | folders, so forth. Um, often you'll have stuff that you just want to upload from your local computer. So
00:54:49.200 | you can always hit the upload button to do that. Um, or of course you can upload or create a SSH key
00:54:57.600 | and get clone repos. And so I tend to do a lot of my work now in cloned repos. One nice thing about
00:55:05.360 | cloning a repo or, or initializing a new repo is you can always revert back to checkpoints if anything
00:55:12.480 | doesn't quite go the way you want it to. All right. Public URLs. This is a big one. Um,
00:55:21.920 | so maybe even with creating a new dialogue. Um, so you can run, um, basically any server you like,
00:55:38.640 | and if you have it running on, um, port 8000, um, then everybody that you give that public URL to can
00:55:48.800 | also use it. Um, so let's see what would be a good way to do that. Um, I mean one simple way, for instance,
00:56:02.560 | this is kind of cheating a bit, but I could say, um, python minus m http dot server
00:56:12.160 | right in the background.
00:56:16.480 | Okay, we're now serving. So that uses port 8000 by default. So if I now head over to this public URL.
00:56:29.440 | There you go. There's my python server. Um, so you could run quarto, run a blog, do whatever you like.
00:56:38.320 | Um, although, you know, most of the time the way we tend to use that is to create, um,
00:56:45.520 | little web applications and test them out, um, which it looks like Jono's doing. So shall we just watch Jono?
00:56:54.720 | Sorry Jono, I was running my python server. So it's now free for you, hopefully.
00:56:58.400 | All right. So I'll stop this and restart and try that again. Okay. So this is just creating a little,
00:57:04.560 | um, fast HTML server. Um, but maybe I ran that twice. One more time. Um, and then creating a couple of
00:57:17.440 | different routes. Are you sure you stopped? I am not at all sure. No. Um,
00:57:22.880 | yeah, I think I did. Oh, no, I didn't. There it is. Python minus m http server.
00:57:36.800 | Kill 301. Oh, that's right. So it's running in the background.
00:57:43.680 | No worries. I don't know why it says defunct, but, uh, that might mean it doesn't give you back the port.
00:57:50.080 | It says me right for, I've never quite done it this way before. Do you have the port available?
00:57:54.400 | Yep, I do. All right. Good.
00:57:56.640 | All right. Um, and so it's a very small app. I just have two routes and have some interactivity. So when I
00:58:06.000 | click on one, it uses htmx behind the scenes to toggle the, the word in this case. Um, but importantly,
00:58:13.920 | this is an app running on port 8000. So if you went to the public URL, pull on foo. I don't know if you
00:58:20.400 | want to do that, Jeremy. Absolutely. I want to do that. Yeah. Um,
00:58:24.960 | That should be our running application. Simple as that. It's going to be huge. Everybody's going to
00:58:33.520 | want to use your app. And the cool thing is it's, um, it's live, right? Like if I go and edit this code
00:58:39.520 | here to say hi instead of hello and submit that, um, Jeremy should be able to refresh that page and see
00:58:45.840 | the new app. So you're, you're there, um, editing, editing the code of the running application. It
00:58:54.240 | doesn't have to restart, right? I can just add a new route. Um, and it does. Let's do that again.
00:59:00.640 | Okay. We've got the high world thing. So change it again. I don't know. I'm not even going to refresh.
00:59:05.040 | Just tell me when you're ready. All right. I've changed it. So, okay. So there's no redeploy.
00:59:10.960 | Hey, Jeremy. Thank you. Um, yeah. So we have applications running like, uh, the discord buddy
00:59:17.280 | solve it, buddy chat bot in our discord. That is just a solve it dialogue. And on the public URL is
00:59:23.120 | where the app runs. Um, but anyone on the solve it team has that private URL. They can edit the dialogue.
00:59:29.360 | They can give it new functionality or tweak what data is available to it. Um, make updates and the app is
00:59:35.280 | still there running as a live artifact in its own instance. Um, so it's all nice and separate and
00:59:40.640 | container. There's no like, um, special frameworky stuff. Like this is a plain
00:59:47.600 | Python, ASGI web application. You could run fast API. You could run Django, whatever.
00:59:56.800 | You could run quarto preview, right? And serve up your blog from this if you so desire. Um, yeah. Yeah.
01:00:03.040 | Um, awesome. Cool. Um, so
01:00:10.320 | Okay. What if I want to share the actual code other than just like sharing the app.
01:00:14.160 | So we're talking about, uh, sharing. Uh, yeah, great. Yeah. So actually it's interesting at answer AI.
01:00:30.320 | We very often want to share with each other
01:00:36.000 | that an artifact we've created where actually the dialogue ends up being the artifact itself.
01:00:42.960 | You know, just like sometimes you kind of end up sharing like chat GPT, deep research summaries or
01:00:48.080 | whatever. It tends to happen a lot more in Solvert because you've actually built a complete
01:00:54.880 | analysis package or you've done a complete transcription and history and whatever.
01:01:01.760 | So there's a few ways you can share your work.
01:01:06.800 | One way is just to go to settings and click export dialogue to export it to a gist
01:01:15.680 | and that will render it kind of okay. Gists have some benefits to them which make them useful in some
01:01:25.440 | situations or if you want to make it, um, you know, really work with Solvert though. Let me give you an example here.
01:01:42.560 | Um, actually I'll just show you as well. Like sometimes if you want to make sure it's getting
01:01:47.520 | the latest information, it helps to ask it to search. Search the web to make sure you've got the latest information.
01:01:57.120 | Because it takes a bit of time for it to search so it doesn't always take that time unless it's
01:02:01.760 | knows that you want it to. Just the way I prefer, you know.
01:02:07.200 | And so when you do that you get these little asterisks which you can click on
01:02:17.840 | to get more information. So now if I publish this then that's like a gist but it's just going to be more
01:02:27.440 | um, Solvert native as you see. So that way you can kind of share something that's
01:02:34.560 | the same as you see. And we're going to be improving this in the next couple of days so maybe by the time
01:02:41.440 | you see it there'll also be options to get it in a more pure blog post style output.
01:02:55.440 | Okay.
01:02:57.760 | Oops. Needed to refresh.
01:03:05.680 | All right. There's some nice extra things in with AI.
01:03:20.880 | Sometimes again a lot of modern coding tools really lean into this. It's like get the AI to write your code
01:03:34.960 | for you. You can have that mode too. We call them super completions. They use a more powerful language model to do a
01:03:41.200 | bigger completion than ghost text. Don't overdo it.
01:03:46.960 | But you know if you want to
01:03:53.680 | You know it goes complete to write that for me and then it's like okay this is all pretty standard so
01:04:16.640 | rather than hitting right arrow right arrow right arrow. I can just hit command shift full stop.
01:04:23.280 | And it'll just take a little bit longer to try and write the whole thing for me.
01:04:26.960 | There we go.
01:04:31.760 | You can also select a section.
01:04:36.880 | And then once you've selected if you press the same thing command shift full stop
01:04:41.280 | you can ask it to do something more specific.
01:04:52.720 | Maybe a recursive one, Lina.
01:05:04.000 | There we go.
01:05:04.560 | There we go.
01:05:04.560 | Yeah okay. So I guess those are those.
01:05:14.560 | Then I'll show you an interesting one if I see.
01:05:23.280 | Let's see from first html.com and import
01:05:28.560 | So I could say like.
01:05:50.960 | Can you show me a basic example of a fast html table containing a header row and then a couple of
01:06:05.600 | Contact rows with say a name and a phone number just use two or three rows of example data.
01:06:13.120 | Use thinking.
01:06:17.920 | It's quite good I find using AI in this way to generate tests data or examples or stuff like that.
01:06:24.640 | So I can go ahead and hit w now.
01:06:29.120 | And maybe because I kind of want to be more in like.
01:06:32.320 | Hey you do it for me mode I'll switch to concise mode here.
01:06:34.880 | And then I'll.
01:06:38.000 | I want to make this look nicer.
01:06:41.760 | So I say like.
01:06:43.120 | What are some best practices for laying out tables?
01:06:50.000 | Have a look at the way this is rendered currently and.
01:06:52.560 | Tell me if we can improve it using Tailwind somehow.
01:06:59.040 | Now again key idea that.
01:07:01.760 | That Solvert should be able to see the same thing that you see.
01:07:08.000 | Now it's a bit tricky because.
01:07:11.280 | What a table looks like depends on your screen.
01:07:15.120 | Right so you actually have to tell.
01:07:16.560 | Solvert you're allowed to look at my screen.
01:07:19.040 | So to do that you can hit command shift comma.
01:07:21.840 | And it brings up a little thing saying can I please look at your screen.
01:07:24.400 | And I say yes.
01:07:26.800 | And what actually happens behind the scenes.
01:07:29.120 | It just pops this little output included to let it know you did this.
01:07:32.320 | It's taken a screenshot.
01:07:34.080 | Of this exactly as it appears in your screen.
01:07:36.160 | And so before it could still see that output.
01:07:41.840 | But it saw it as HTML right.
01:07:43.840 | It just sees the raw HTML table.
01:07:45.280 | And that's probably okay at guessing what that looks like.
01:07:48.080 | Yeah it might be.
01:07:48.880 | The raw pixels as well.
01:07:50.080 | The issue is.
01:07:52.160 | Particularly though if there's like a rendering problem with complex CSS.
01:07:55.440 | Often it doesn't.
01:07:56.640 | You know.
01:07:57.840 | Let's see if this one works.
01:07:59.360 | I'm going to hit W.
01:08:00.080 | And I'll rerun it.
01:08:02.400 | Okay that's not bad.
01:08:06.320 | So one thing I tend to find with like.
01:08:09.760 | Tailwind is.
01:08:13.200 | People often get too lazy.
01:08:14.640 | And they just copy it all over the place.
01:08:17.440 | So you know.
01:08:17.920 | This is where I would then kind of say like.
01:08:19.840 | Oh yes this is much better.
01:08:25.040 | Please put all those key.
01:08:26.960 | Sets of Tailwind classes into variables.
01:08:32.800 | And refactor this to use them.
01:08:34.320 | This is kind of how I often find.
01:08:40.480 | It's nice to.
01:08:41.200 | Quickly build up.
01:08:45.280 | Sets of.
01:08:45.840 | Reusable.
01:08:48.480 | Oh I accidentally rerun it.
01:08:49.680 | Of reusable.
01:08:51.200 | Kind of.
01:08:54.960 | Class strings or something.
01:08:57.040 | All right.
01:08:59.840 | Done that.
01:09:04.240 | Oh yeah.
01:09:07.840 | About export and mbdev and so on.
01:09:10.400 | Yeah I just.
01:09:12.160 | That's a good point.
01:09:12.800 | I want to show these popouts though.
01:09:14.240 | If they're quite neat.
01:09:16.240 | If you.
01:09:21.120 | Hit this button here.
01:09:23.120 | Then it pops open the output into a separate tab.
01:09:28.720 | And.
01:09:31.440 | The reason this is cool.
01:09:34.320 | Or like it's cool for lots of things.
01:09:36.640 | But like one thing I find really helpful is.
01:09:38.800 | That.
01:09:40.160 | You can have.
01:09:41.360 | Kind of a conversation with.
01:09:44.320 | An AI where it's editing.
01:09:45.840 | The previous cell.
01:09:47.360 | And stuff like that.
01:09:48.240 | That could.
01:09:49.360 | Can you know.
01:09:49.840 | And you want to see.
01:09:51.040 | In a separate window.
01:09:53.360 | It being updated in real time.
01:09:55.440 | So any changes.
01:09:56.560 | That we make over here.
01:09:58.160 | Are.
01:10:04.560 | Reflected here.
01:10:06.080 | In real time.
01:10:07.600 | And you can also do that for the.
01:10:09.200 | The full thing.
01:10:12.160 | Instead.
01:10:13.440 | So.
01:10:15.840 | Yes.
01:10:16.200 | Sorry.
01:10:16.720 | Jono.
01:10:17.160 | NB dev and stuff.
01:10:18.480 | Oh.
01:10:27.760 | It might actually be nice to keep a few of the.
01:10:29.360 | Yeah.
01:10:29.680 | Code examples around.
01:10:30.720 | Yeah.
01:10:30.960 | Yeah.
01:10:31.200 | Okay.
01:10:31.520 | So.
01:10:31.920 | You've.
01:10:32.320 | Worked hard on this table.
01:10:33.440 | I've worked hard on this table.
01:10:34.720 | Does it only ever live in this.
01:10:36.560 | Updates.
01:10:37.120 | Dialogue.
01:10:37.920 | Yeah.
01:10:38.240 | Exactly.
01:10:39.360 | So.
01:10:39.600 | If we.
01:10:40.640 | Yeah.
01:10:44.720 | So probably.
01:10:45.200 | What I'd do there.
01:10:45.920 | Is it'd be like.
01:10:46.560 | Yeah.
01:10:50.160 | That looks perfect.
01:10:51.040 | Please refactor.
01:10:52.560 | This table creation thing.
01:10:54.080 | Into a function.
01:10:54.960 | Now.
01:10:55.200 | That I could pass.
01:10:56.320 | A list of dictionaries too.
01:11:00.560 | And then show me.
01:11:01.440 | An example of using it.
01:11:02.560 | All right.
01:11:11.040 | All right.
01:11:15.440 | So now if I hit W.
01:11:16.320 | There's multiple fenced blocks.
01:11:17.760 | So it's going to create multiple outputs.
01:11:20.400 | Which again.
01:11:20.960 | Is really nice.
01:11:21.840 | Yeah.
01:11:24.080 | It looks good.
01:11:24.800 | So now if I hit E.
01:11:25.760 | Or press export.
01:11:27.760 | Goes red.
01:11:32.080 | And that creates a module.
01:11:33.840 | With the same name.
01:11:35.280 | As the.
01:11:36.240 | Dialogue.
01:11:37.600 | So.
01:11:39.040 | If we create.
01:11:41.760 | A new.
01:11:42.240 | Dialogue.
01:11:42.960 | Might need to export the.
01:11:47.680 | The classes and stuff as well.
01:11:49.440 | But I can do that while you.
01:11:50.560 | While you.
01:11:53.120 | That's a really good point.
01:11:55.680 | Actually.
01:11:56.080 | And while you're doing that.
01:11:57.440 | I'll show people what you're talking about.
01:12:00.720 | Yes.
01:12:02.800 | This function.
01:12:03.520 | Is actually.
01:12:06.400 | Not standalone.
01:12:08.080 | Because it's referring.
01:12:11.600 | To these classes.
01:12:12.880 | That were created earlier.
01:12:13.920 | So.
01:12:15.840 | What Jono's done.
01:12:16.640 | Is he's gone back and.
01:12:17.600 | Exported that.
01:12:19.280 | Although.
01:12:19.600 | You know.
01:12:20.240 | I guess we don't want.
01:12:21.440 | Doesn't really matter.
01:12:22.160 | But we don't particularly want.
01:12:23.120 | The table.
01:12:23.600 | That's cool.
01:12:24.400 | So I can do a.
01:12:24.400 | Split there.
01:12:25.200 | So.
01:12:27.680 | That's good.
01:12:29.760 | Oh.
01:12:32.320 | I see.
01:12:32.640 | So you've.
01:12:32.880 | Exported all of these things.
01:12:33.840 | That's a great idea.
01:12:34.640 | So.
01:12:34.960 | Jono's also.
01:12:35.600 | Exported all the.
01:12:36.320 | Exports and everything.
01:12:39.280 | So.
01:12:39.520 | I can now say.
01:12:44.000 | From.
01:12:44.480 | And it'll be.
01:12:45.360 | Named exactly.
01:12:46.000 | The same thing.
01:12:46.560 | As the dialogue.
01:12:47.280 | Import star.
01:12:49.360 | That's not.
01:13:00.800 | It took a while.
01:13:01.760 | Sometimes that happens.
01:13:03.120 | There we go.
01:13:03.920 | And so we've got.
01:13:04.880 | The reusable.
01:13:05.600 | Module.
01:13:06.320 | That you can.
01:13:07.360 | Turn into a pipe.
01:13:09.840 | I module.
01:13:10.400 | Particularly if you use.
01:13:11.200 | NB dev.
01:13:11.760 | It can make it much easier.
01:13:12.880 | In fact.
01:13:13.200 | If you're in an NB dev project.
01:13:14.640 | The export button.
01:13:15.680 | Actually creates.
01:13:16.480 | NB dev compatible.
01:13:18.160 | Exports.
01:13:19.920 | So you can.
01:13:21.040 | It's really good.
01:13:21.760 | To use.
01:13:23.040 | Solve it.
01:13:23.520 | I find.
01:13:24.000 | For working on NB dev projects.
01:13:25.520 | And there's no.
01:13:27.760 | Mystery here.
01:13:28.320 | Right?
01:13:28.560 | Like if you click.
01:13:29.120 | Show all files.
01:13:29.760 | You'll see.
01:13:30.160 | This is just creating.
01:13:31.280 | In this case.
01:13:31.760 | An updates.py.
01:13:32.720 | File on the disk.
01:13:34.400 | You can read that.
01:13:35.040 | And edit it.
01:13:35.760 | And mess with it.
01:13:36.560 | And also.
01:13:37.680 | If you're exporting.
01:13:38.480 | You can just choose to export.
01:13:39.760 | Just that.
01:13:40.400 | Python file.
01:13:41.360 | There it is.
01:13:41.680 | But it's really nice.
01:13:43.520 | To be able to build up.
01:13:44.240 | Some functionality.
01:13:45.040 | In one dialogue.
01:13:45.760 | And then I can share that.
01:13:46.480 | With the team.
01:13:47.120 | Say hey.
01:13:47.440 | Just.
01:13:48.080 | Pull this.
01:13:48.880 | You know.
01:13:49.280 | Pull this.
01:13:49.680 | IPynd file.
01:13:50.720 | From GitHub.
01:13:51.840 | Or run it.
01:13:52.880 | Or whatever.
01:13:53.360 | As soon as you interact with it.
01:13:55.440 | It'll be exported.
01:13:56.160 | To this module as well.
01:13:57.600 | And then you can import that.
01:13:58.640 | In your other dialogues.
01:13:59.520 | And use.
01:14:00.320 | Whatever pieces.
01:14:01.040 | We built up there.
01:14:02.000 | You know.
01:14:02.320 | Often like custom tools.
01:14:03.760 | Or cool pieces.
01:14:05.040 | Of like functionality.
01:14:06.160 | That you can.
01:14:08.400 | Move that around.
01:14:09.200 | And develop it.
01:14:09.840 | Across multiple dialogues.
01:14:11.120 | One that's focused.
01:14:11.840 | Maybe on.
01:14:12.560 | The UI components.
01:14:13.520 | And another one.
01:14:14.080 | That's on the back end.
01:14:14.880 | Or something like that.
01:14:18.160 | I want to demonstrate our usage of LaTeX compatible math.
01:14:22.320 | In Solvert.
01:14:23.520 | So could you create a few.
01:14:24.800 | Interesting and.
01:14:27.040 | A variety of.
01:14:29.600 | Math type outputs.
01:14:31.280 | For demonstration.
01:14:32.160 | So yeah.
01:14:35.760 | For people who need to do math.
01:14:37.120 | For.
01:14:37.280 | For either they're learning.
01:14:39.520 | Or they're doing research.
01:14:40.560 | Or they're reading papers.
01:14:41.760 | Oh.
01:14:43.360 | That's interesting.
01:14:44.400 | So it's got.
01:14:46.800 | Confused there.
01:14:49.600 | By the.
01:14:50.000 | Well not confused.
01:14:50.880 | It's trying to be helpful.
01:14:51.600 | It's all we've imported.
01:14:52.640 | Fast HTML.
01:14:54.000 | So it's like.
01:14:54.800 | Oh obviously.
01:14:55.760 | You're doing stuff in fast HTML.
01:14:57.760 | So we could delete those.
01:14:59.120 | Or we could just take them off the prompt.
01:15:00.720 | And then.
01:15:02.320 | We run it.
01:15:04.160 | So by hiding it.
01:15:09.760 | It can't see them anymore.
01:15:11.440 | And so now it knows.
01:15:12.320 | What we mean.
01:15:14.160 | There we go.
01:15:15.600 | That's the integrals.
01:15:16.480 | And that's interesting.
01:15:17.760 | So I think we might need to change the system.
01:15:19.760 | Prompt to remind it.
01:15:21.040 | How to do this.
01:15:23.440 | But from now we say.
01:15:24.720 | We do not support.
01:15:28.960 | So one problem with LaTeX.
01:15:43.600 | If anybody who uses it much.
01:15:44.640 | We'll know.
01:15:45.040 | Just often.
01:15:46.800 | Using dollar signs.
01:15:48.160 | On their own is annoying.
01:15:49.120 | Because you can't write dollar signs.
01:15:50.960 | So.
01:15:52.960 | You can see.
01:15:53.520 | If I hit.
01:15:54.240 | Right square bracket.
01:15:55.120 | I can edit the output.
01:15:56.240 | And that way.
01:15:56.640 | You can see exactly.
01:15:58.000 | What it all looks like.
01:15:59.120 | And so here are examples of.
01:16:02.000 | Inline.
01:16:03.120 | And there it is.
01:16:05.440 | Inline.
01:16:06.240 | So.
01:16:06.480 | Yeah.
01:16:09.760 | And then.
01:16:13.280 | We do have these.
01:16:14.640 | Kind of.
01:16:15.280 | Let's call them.
01:16:16.000 | Feature flags.
01:16:17.840 | So basically settings you add here.
01:16:20.080 | Get added as environment variables.
01:16:21.680 | But.
01:16:23.440 | There are also some special ones.
01:16:25.120 | So use catech.
01:16:26.560 | If you set it to anything other than zero.
01:16:28.720 | Turns on LaTeX mode.
01:16:30.400 | Otherwise.
01:16:30.880 | Avoid it.
01:16:31.920 | Just in case it messes up.
01:16:32.960 | Any rendering for you.
01:16:35.440 | So you can also add.
01:16:36.720 | Use vim.
01:16:38.160 | And what that's going to do.
01:16:40.400 | I won't show it to you now.
01:16:41.520 | But it's just going to.
01:16:42.400 | Change your editor.
01:16:43.360 | To.
01:16:45.120 | Basically be vim compatible.
01:16:47.600 | As a vim enthusiast.
01:16:48.880 | I normally don't like.
01:16:49.840 | Non-vim editors.
01:16:53.040 | That try to be vim compatible.
01:16:54.320 | Because I normally find.
01:16:55.040 | They're not good enough.
01:16:56.000 | But actually.
01:16:58.240 | This monaco vim mode.
01:17:00.400 | It's.
01:17:00.640 | Has not messed me up yet.
01:17:03.680 | It's really compatible.
01:17:05.360 | And works very nicely.
01:17:06.480 | So.
01:17:08.000 | Anybody who's a vim user like me.
01:17:10.560 | Will probably.
01:17:11.120 | Appreciate that.
01:17:12.800 | Fantastic.
01:17:15.840 | All right.
01:17:16.320 | Well.
01:17:16.640 | That's quite a.
01:17:17.200 | Good long video.
01:17:18.560 | I don't think we covered everything.
01:17:19.760 | I'm sure there's some surface area.
01:17:21.040 | There that you will uncover.
01:17:21.920 | Especially because.
01:17:22.720 | The apps also always changing.
01:17:24.000 | Right.
01:17:24.160 | I think we.
01:17:24.640 | Up.
01:17:24.960 | Added the.
01:17:25.520 | The preview.
01:17:26.160 | Just yesterday.
01:17:27.200 | Or today.
01:17:27.680 | So poke around.
01:17:29.440 | Hover over buttons.
01:17:30.320 | If you're not sure what they do.
01:17:31.200 | We try to add tooltips.
01:17:32.320 | And keyboard shortcuts.
01:17:33.200 | If you're in the Solveit course.
01:17:35.520 | I assume that's why you're watching.
01:17:36.880 | This long video.
01:17:37.680 | Feel free to ask questions.
01:17:39.440 | And say hey.
01:17:40.080 | You know.
01:17:40.640 | Where did that export button go?
01:17:41.920 | If stuff's moved around.
01:17:42.720 | We'll be sure to tell you.
01:17:43.840 | But hopefully.
01:17:44.960 | This serves as a snapshot.
01:17:46.160 | In time at least.
01:17:46.720 | Of what the app looks like.
01:17:47.600 | At present.
01:17:48.080 | And if you're curious.
01:17:48.960 | Of like.
01:17:49.280 | What is this for?
01:17:50.800 | You know.
01:17:51.040 | What is Solveit?
01:17:53.040 | The app.
01:17:53.440 | Hopefully this answers.
01:17:54.320 | Some of those questions.
01:17:55.040 | A bit better than just us.
01:17:56.560 | Hand waving about.
01:17:57.840 | A canvas for creativity.
01:17:59.440 | And code execution.
01:18:00.240 | And so on.
01:18:01.120 | Give it a bit more.
01:18:01.760 | Of a concrete feel.
01:18:02.720 | For what the application.
01:18:03.760 | Itself looks like.
01:18:04.560 | Thank you Jono.
01:18:06.480 | I think this is going to be really fun.
01:18:07.840 | I hope people.
01:18:08.640 | Anyone who's watched to hear.
01:18:10.800 | Is obviously interested enough.
01:18:12.080 | so thanks very much for watching bye gang there's everybody