GitLab Source Code Group, 5 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: "Explain the code" feature MVC walkthrough. Blobs and Snippets

Description

https://gitlab.com/gitlab-org/gitlab/-/issues/403718

https://about.gitlab.com/company/team/structure/working-groups/ai-integration/

A

Hello, my name is Dennis and I'm staff front engineer on create source code team. Today, I would like to introduce you to an MVC for the explain this code feature which is powered by open AI.

A

We start with looking at a blob.

A

There is no difference in the way the blob looks like at the moment, but if you, for example, select the code, there will be an icon shown, the new icon, which has the um the label. What does the select code mean? This is the entry door to this functionality, as you can see, I had to move the bli mic and, and the link icon a bit to to have the room for this question mark. So what happens when you click this?

A

We click and the new block is shown here with the copy of the code selected and you have. You could have noticed right now why we copy the selected code here, because selection is not persistent. This block is persistent. It's located here so that when you get the explanation for some code snippet, you could scroll up or down the file in order to get more information about.

A

Probably some uh probably the explanation you've got uh is going to give you some some ideas, or some hints at where to look for for the solution of your problem, if you're uh trying to solve one so, uh but this was pretty simple example: let's try this function when we select a new block, the new snippet click, the question mark. The code gets updated right away and then we fetch the explanation of this code again. The selection is not persistent here. So if we click anywhere outside this selection, the selection is gone.

A

But this block is here, so you can navigate the page in order to get more context for for this snippet you're trying to analyze in order to get rid of this block, you just click the uh cross and that's it uh the important things to keep in mind. We show this question mark. Excuse me we'll show question mark only when the selection starts and ends within the blob, so, for example, this selection will yield the question mark.

A

However, this selection, where we finish the selection outside of the blob, won't yield any question mark the same thing. If we start outside of blob and go down there is, there is no question mark. There is nothing to explain here, so only within the blob.

A

um The solution also supports errors. So let me demonstrate you want uh error now: I'm running I'm, connecting to open AI uh through the front and front-end code, I'm, storing my key in the dot anth but and use dot end package to fetch it, but in production of course, it's not going to be the same.

A

We already have the back end experiment for connecting to to open AI properly in the back end, but so I had to in the back in the background, I had to update and technically break my key break, my API key and restart webpack.

A

So now, when we try to fetch an explanation for some code snippet, let's say for this: what we get is actually the API error saying that the key is um incorrect, which is very correct. My key is incorrect. So that's um that's it um it's the MVC. There is a lot of things we can improve, but I the current state of it requires some test coverage.

A

uh Switching to the existing back-end experiment. Experiment, uh experimental connector to the openai, API and technically just start using this. The plan is to uh to publish this behind the feature flag so that we would be able to shut it down if things go, not as expected. One thing to note, though, is that the way it is implemented at the moment is very Universal in terms of um it being a component which is shared components which can be implemented anywhere in the product um technically in the view part of the product.

A

So where else can we implement this? We can do this for Snippets, for example. So let's um reload the Snippets in the background I have updated my key for it to be uh to be valid now: I'm, restarting the webpack server, so it takes some time. But here we go here. We come yes, so the snippet simple textual snippet, with pretty much the same code as we saw in the blob, but same thing. You select the code, you click the button.

A

You get the explanation of that code. Very Universal works exactly the same way, um maybe a bit slower because there were more tokens to generate here so stays on the screen. The same way and is persistent if you remove the selection, so that's pretty much it. Thank you.