Transcript

Hi everyone I'm I mean the creator of coded flows. It's a visual no code app that helps you create Python workflows and 1 core element in coded flows is the use of AI to generate bricks. What I mean by brick it's a visual representation of Python function. Let's say for example we need to convert URLs or text into QR codes. Right now I don't have any package that can do this. How can I proceed? One way is just to simply use AI so I will click on prompter brick. And here I can just give a general description of the brick. What I expect from it, and in our case it's straightforward, is simply to convert text into a QR code, OK? And then I have 3 optional description I need to add Y. They are optional because the AI can get set by itself, but it's much better just to specify it so AI can stick to our expectations. And the first one it asks what data does this require as inputs. Really simple textual. Input. Second thing is what data does this brick produce as outputs? We have only one output which is an image. OK, an image. Representing the. QR code as bytes. Not only I specified what is the output, but also I added the data type I'm expecting. Then. I can add dynamic configuration or settings to the brick, meaning options I can change and the output will change to. The one I'm needing here is to be able to select the color from a list. And I will add humanly readable colors. Then I can choose my models. We have many AI models here, Lola models, one from Anthropic Rock Open AI. The one I'm selecting by default is Grock Code OK? And the model displayed here depends on your coded flows AI configuration. If you add the API keys for provider you will it will be displayed right here. You can also choose the default model. So for me it was a group code and now I'm just. I just need to generate my brick. Great, perfect. As you can see the AI got the icon right. The name is simple and really represented what the brick does for the input and the output. We have the text to QR code. Perfect, let's check their types. I will double click and I get the description. Convert text into a QR code image. So the AI got this right too and the. Text input is string and the output is bytes, so it respects the constraints we gave it. And let's check the last element which is the dynamic color selection. And it's humanly readable color perfect. So let's test if it works. 1st we need textual input. I will just try to convert the coded flows COM website. OK, and have its QR code and then I need to display the image. For this two breaks there are part of the native packages of coded flows. So now let's run. The flow. Great, we got our QR code. I will zoom and you can try with your phone, mobile phone and see if you can access the website using this QR code. Now let's test if the color selection works purple. We got the purple color. Orange. We got the orange color, so everything is perfect. We were able to prompt a new brick that didn't exist. Not only that, but now this brick is reusable, which is really powerful concept. We can select this drag and drop it as many times as we want. So we can imagine creating some custom packages for imagine image processing or something similar. Well now let's get to the second way to use AI, which is by prompting a Canvas UI, Canvas Office, Streamlight app. We will try to convert this newly created brick into an internal app. Let's imagine you have a marketing department or any other department that needs to convert some URLs into QR codes. Let's imagine this and they can use this flow, but instead they can use an app with a UI Extremely app for example. And the UI flow do exactly this. We can get to the UI canvas. Can drag and drop elements to create the corresponding visual aspect. But we won't do this, we will use AI instead. OK, we will prompt and say what we expected from it so it can give us a canvas. And we will just describe that we need to convert a text input. To a QR code image or convert URL. OK better input to a QR code image. Here again we can choose. Other models. Depending on the nature of the test, we can use either weaker or stronger models. I will stick to grok code and I will Click to generate. So what we got is a title, the URL input, a button and a display of the image. So this is all the elements as you see we can. We were we are able to drag and drop all this element, but just for the demo to show you what it can do. But for more complex pages maybe a I can give you a first canvas that you can update afterwards so we can find the corresponding visual elements here in Page 1. We have the button, the image and the text. The idea is we need when we click on the button. So I will use if condition. So when the case is true. I need to get my text. And I used the newly generated brick OK. I will generate my code, my QR code and. Display the image right away. So it's a straightforward flow. Let's run it and see what it does. OK, so now I have the UI. It's a streamlet app I will write. My. Coded flows website domain. And I will click on generate QR code. I got my QR code now I can save it if I want OK. And that set now we have our app. So if I return back here. The last thing we need to do is just simply to export and save the script. And now we have the script with the requirements for this extremely app that we can dockerize or just put it right away on our internal network. I think all these elements just conclude our demo and I hope you enjoyed it and try to use coded flows and visit codeflows.com to see more information. Thank you. Have a good day. Bye bye.