5 UI with Streamlit NoLogo ReEdit

[0:00]Everyone, welcome to our Madison framework UI tutorial series. I'm Kiti and today we are learning how to create a simple user interface for your Madison agent using Streamlit. Here you will transform your technical nit workflow into something nontechnical users can interact with. And before we dive in, let's talk about why we are using Streamlit. With Streamlit, you can create user interface with just Python. No prior knowledge of JavaScript or HTML CSS required. So this is perfect for data focused applications like your Madison agent. Streamlit is also free free to host with Streamlit Cloud. All these points make Streamlit perfect for your Madison agent. The goal here is to make

[0:45]Your Madison tool accessible to non-technical users like marketeteers or brand managers. And Streamlit lets you do this quickly without getting bogged down in web development. Let's get Streamlit installed and set up. Open your terminal and type this command pip install streamlit. And let me also give a demonstration on how to do it. So I have my terminal open and pip install streamllet. Yes. So you can see all the dependencies are installed and the streamllet is now installed. Next, I'm opening my Visual Studio and creating a Python file called Madison app. Here I'm using the same repository that I used in my previous video. This is the

[1:24]Continuation of it as I'm creating a user interface to my project and in my Python file I'm adding a basic starter code. This is my code and let me run it. Now I'm going to run this Python file with this command streamlick run and my file name Madison app and run. So now my application is running locally and yeah I can see a basic web application in my browser. Now let's connect this simple UI to your Madison agents functionality and these are the steps that you need to do or keep in mind. So first for your project identify your core input and output and for input UI you can use

[2:08]Either a text input or drop downs and for output you can actually be creative. You can be innovative and use a chart or tables to visualize your data. You have your complete creative freedom here. And let me just implement a simple brand analysis and give a demo. So my project that I was I'm continuing from the previous video is a brand analysis for OpenAI using Reddit data. So this is my NA10. So it is very similar from my previous video but I had a manual trigger. I have replaced that with web hook this web hook node. It's a post HTTP method request and this is my URL.

[2:45]And I'm using this web hook or this web hook URL in my Python file. So I just updated this Madison app python file and this is my URL which I have pasted here. So in this code I'm using this request library to create a bridge between my UI and NAN and when a user enters a brand name which is open AI in my case. So Python sends that data to um our local NAN server using this web hook URL. Okay. And once NAN finds the all the edit data the response from that HTTP node in NAN this code further unpacks that result into a structured format.

[3:22]And for that we are using pandas pandas library to instantly transform all that raw data into interactive table and metrics metric cards that you can see in the UI. Let me just run run this. And I'm running it with the same command streamllet run. Let's go to my NA10 and execute this workflow. Now going to my UI here. I'm just going to click on this run analysis and yes this is my output. I have a table format all my response which is that I'm collecting some of the Reddit uh posts. So I have the structure has my post title, the number of uploads posted by which user and there's also a deep

[4:09]Dive section that I've added. You can be creative with your UI. You can, you know, arrange it. You can have a chart or you can use the visualizations however you want. Next, you need to deploy your UI so others can access it. For that, let's use Streamlit Cloud. These are the steps to achieve it and let's do it one by one. Create a GitHub repository with your app code. And if you already have a repository, update your repo with your updated Python code or the all the back end or the Streamlit code. And if you have any dependencies, don't forget to add a requirements.txt file where you are

[4:51]Listing all your dependencies. Next step is let's go to uh this URL share.stream.io io and create your free account. You can loging in. You can sign up. Create your free account. [clears throat] You can sign up for a free account. And this is how it's going to look once you're logged in. And to host or deploy your Madison project, click on the create app button on the top right corner. Yes. Click on this deploy a public app from GitHub. I'm going to be choosing a paste GitHub URL. Go to your updated GitHub. Click on this Python file Madison Python file and copy the URL. Come back to this Streamlit UI

[5:35]And paste the same Python file link. And yes, this is the important part. You need to choose a domain for your project. Mine is going to be um my project name, the brand analysis that I'm doing for OpenAI. So the URL is going to be this domain name.stream.app. Yes, this will be my project's public URL. And this domain is available. And yes, click on deploy. Yes, my UI is ready. It barely took few seconds. And now I have a public URL anybody on the internet can use. That's it. This is how you deploy your app. You have now created a simple user interface for your Madison agent using Streamlit.

[6:19]This transforms your technical and workflow into a tool that nontechnical users can actually use. Remember the 80/20 rule. Focus on making your interface functional and clear rather than beautiful. What matters most is that brand managers and marketeers can understand and use your tool without technical knowledge. In our next video, we will explore an alternative approach using radio. That's it for this video. Thank you so much for watching. I hope this was helpful.