Mesop: Google's UI Framework for Building Web Application

So the text is streaming. This is pretty nice. The UI looks pretty good and it's very responsive. The best part, it took us just a few lines of code to build this. So Google just open sourced their internal package for building beautiful web uis in pure python. In functionality, this is very similar to something like Streamlit or Gradio. Both of these packages let you build beautiful and responsive web UIs in pure Python. This project from Google is called Mesop and it's used internally by a number of teams within Google to rapidly prototype different apps. So we're going to learn how to get started with Mesop and build our own UIs. Everything is written in pure Python. There are ready to use components which will help you expedite your development process. And this is supposed to be extremely flexible, so you can build custom UIs without writing JavaScript, CSS or HTML. Everything is going to be written within Python. Okay, before showing you how to get started, let's look at some very important concepts. The first one is components. So they have a number of native components that are basically UI components that you can use in your own applications. Then you can also define your own UI components. So basically you can write Python functions which will call other components and build on top of those. And it offers state management, which is I think its biggest advantage over something like Streamlit, because the state management here is much cleaner compared to what I have seen in Streamlit. You can also build multi page UI applications. So this is pretty neat and you can deploy those into production environments. Okay, so before walking you through a quick tutorial, let's look at some of the components that are available. And the great thing is these are focused on AI models or applications or UIs around AI models. So there is a component for chat, you can start using this to build your own chatbot. There are components pre built components for text to text. So for example, if I say, hi, how are you? Right, the input is going to be text and the output is going to be text as well. And then there are components specifically for text to image. So let's say if you have an image generation model, then you can use a component like this where you get input from the user and it will display output images within the ui. You can also upload files. There are different components for selecting, let's say different objects. So here is an example of Radio, I think there's a slide toggle as well. Right? So all the basic visual components that you will need to get started with a ui and the UIs are actually pretty Nice looking as well. So let's look at the basics of Mesop. So in the first section we're going to go through and this Google Colab which is provided by the Mesop team. And in the second stage I'll show you how to build a chat application using Mesop just by integrating Gemini API in there. Now to get started we will need to install the Mesop package. Again, as I said, it's an open source project from Google but not an official product. Okay, next we are going to import the Mesop package. We will also import the Mesop Lab. So this is a class within the package which has some of these built in UI components. For example chat text to chat that we saw. So here's the lab package. So there is this chat text to chat, text to image and I believe they're going to be adding more and more to this as the project progresses. Now in order to run this in Google Colab, you just need to run this Command Mesop or me.collab underscore run and then you'll need to provide the name of the project or the page that you want to run. So we're going to look at an example here. Now let's try to understand it in more details. So the basic component is a page. This is going to be where the app starts. So we're going to use a decorator me dot page. Then you need to provide the name of the page. So this is going to be basically an endpoint that you can access when you run the app. And let's say we have a simple function which is hello world, then me text and it's going to just show this text on the web page. Right? So a very simple basic app. So we can run this. Now in order to show this or run this in Google Colab, we will need to use this collab show command, then provide the path. So this is going to be basically the endpoint. You can also provide the width and height for rendering purposes. Okay, so if you run this, this is going to just create a new UI and it's going to just show us a text. Hello world. Right. So very basic component that you can start creating now. Another example is to create a simple chat app. So in this case again we have the main component that is going to create a page. And as I said you can create multi page apps as well. We have the endpoint which is chat. Then the main function is going to be the entry point. So this is chat. We are using a pre built component here. So Mel, this is the Mesop Labs component, which is basically using this file, so this Lab chat py file and we're going to call a transform function. And the way this works is you can create a function that is going to be called whenever you are interacting with the chat ui. Now here we have the prompt, which is the input from the user. Then the chat components also keeps track of chat history. So if you want to include chat history, you can do that here. But in this case it's just echoing our prompt. So whatever the prompt is, the output is going to be hello and that text that you provide. So if you run this and then we actually show it in the Google Colab, we are going to see a chat window here. So if I say how are you doing today? So it should just reproduce the same text, but the only thing is adds it. Hello. So this is a blueprint that you can use to create your own chat apps and we're going to look at an example of how to do that. Okay. Another most important I think feature is how it manages states. So there is states class within the Mesop package that you can use to manage the state of different variables that are within your code base. Right? So here we are creating a simple counter and we want to keep track of the number of clicks. If you are doing this in Streamlit, it becomes a little cumbersome if it becomes more complicated. But here the implementation is pretty nice. So we create this state class and we want to track the state of clicks here, right? Then whenever there is a call to this button click function, it will look at an event and then it will update the state class, right? So in this case, whenever there is a new click on the button, so that is a new event for us, it will update that state variable and add one to it. Right? So that will basically just keep a counter of it. Okay, Then just like before, we need to create the main page here we first look at the state class, right? And after that we will show the value of the state, the clicks within the state and there is going to be a button which shows increment. So whenever we click that button it will just call this function update the state of that variable and that is going to be updated in here, right? So very simple UI component, but it shows the functionality of how states works within the Mesop ui. So in order to run this, we're going to first run that. And then since we have endpoint as or the entry point as counter, so we need to replace that here. And if I run this, this should show me a counter, right? So if I click on it, it starts changing the state and it keeps track of the number of clicks. So again, very simple UI component, but very responsive. And you can use this in your own applications. Okay, so next I'm going to show you some of the demos that they have provided and then I'll show you how to use the chat component within your own ui. So for that we're going to go to the demo gallery here. There have a number of different applications. So for example, this is the chat one. There are some security policies that you can add if you want to your page, but essentially you use the chat component, then call the transform function and you can provide both the user role as well as the title. So you can see it here. Now, in this case, what it's doing is irrespective of whatever the input is, it will simply take this and just show it to you on the screen. So for example, if I say hi, then it will just start printing these lines one by one. And the way it does it is that it picks one of the lines and then yields it to the next line and so on and so forth. Here is another example of ML Rewriter. So basically again, it takes a prompt as an input and then it will just rewrite that prompt for you. And. Right. So they have provided some of the components or example UIs that you can get started with. And I think the one that is probably the most interesting and more complicated is this. So here you have an option of either selecting Gemini 1.5 or ChatGPT Pro and it's using that multi page feature. So basically you can switch between different options depending on which page you are on. Right. And you can use this as a starting point for your own projects. But let me show you how you would create a demo chat app and we're going to run this locally on our own local machine. So to get started, I created a virtual environment and then had to install the Mesop package. That's why it shows that the requirements are satisfied. If you're doing this for the first time, you will want to install that package on your local machine. Now, in this demo, we're going to look at a chat application based on top of the Gemini models. So I'm going to be using Gemini Flash and the way I'm doing this is I install the Google Generative AI package, then we're just reading the API key. Then we're also importing the Mesop package plus the Labs component because we want to use the chat ui then we have the basic configurations for our LLM. Right. So this is not related to mesop, but basically we're just configuring the Gemini Flash model that we want to use on our own application. But here is the main code that is actually creating the the UI for us. So we have the page, we define some security policies, but the main part is that you need to provide a path. So this is going to be the entry point. What is going to be the title then that's going to be the title of the page. Then we need to create our page or the main function within this page. So here I'm using the chat component. This is a pre built component. We're going to call a transform function on any input that is coming in. Right. The title is going to be V Gemini Chat and the bar response is mesopot. You can define it whatever you want here. And within the transform function, what I'm doing is I get the input from the user, pass that to Gemini. Gemini generates a response, the streaming is enabled, so the response is going to be streamed and then we take one chunk at a time from that streaming response and simply send it to the UI to actually show it to the user. Right. So very basic, simple setup. I'm not using the chat history in here, but you can include that if you would like to. And in order to run this we will going to be using the mesop command then the name of the file. So the file name in this case is chat Underscore UI Underscore mesopot py If I run this, this is going to show me an address that I will need to use. So this is basically running my, on my localhost. Okay. So when I go there I will need to actually define the entry point. So I'm going to just add this slash chat and here we have our chat ui. So, so if I say hi, then it's going to start communicating with the Gemini Flash model and start generating responses. For example, I can say tell me 10 different jokes and now it's streaming the responses one by one. Okay. There are a lot of other things that you can do. For example, you can create these responses within a markdown box. There are things that you can do in terms of animation. So for example, you can transform colors, fade in, fade out if you want, resize, rotate things. Right. So it's, it's a very powerful, I think, new library that you can use in your own projects. Now the learning curve probably is going to be steeper compared to something like streamlit, but it's I think always good to have options, so I'll highly recommend to check it out. I might start using this in my own projects since it's open source, so I think it will evolve over time and will get much better compared to what it is right now. Anyways, I hope you found this video useful. Thanks for watching and and as always, see you in the next one.