Jun 11, 2024 06:00:00

The development team explains the features of Google's Python UI framework 'Mesop'

The development team has posted on their blog about the features and usage of Mesop , a UI framework for Python developed by a team at Google.

Why Mesop? - Mesop

https://google.github.io/mesop/blog/2024/05/13/why-mesop/

Many Python UI frameworks are easy to get started with, but to customize beyond standard usage requires detailed knowledge of JavaScript, CSS, and HTML. Mesop is a UI framework that is easy for Python developers to use by completing all operations within Python.

Mesop is a component-based UI framework, where the entire UI is built by stacking blocks called components. You can call Mesop components in the same way you call Python functions, so you can use your existing Python knowledge to build UIs quickly and intuitively. Components are also self-contained and can be reused within a project or across different projects.

In addition to being able to flexibly assemble your own UI by combining simple components such as the Button component, which creates buttons, and the Input component, which creates input fields, there are also higher-level components available for common use cases such as interacting with a chat AI, allowing you to quickly create a UI for a specific purpose.

There is a demo available that allows you to see what the actual UI and code will look like. Access the page and click on 'Chat' in the 'Quick start' column.

A demo of the UI is shown in the center, and the code to create that UI is shown on the right. Mesop provides high-level components for chat, and it is possible to create a UI like the one shown below with a short code that fits on one screen.

When you enter a message in the prompt field and press the send button, the message will be output and you can check how it will appear in the chat field.

Next, click 'playground' in the 'Use cases' column. A UI that allows you to customize the settings when using large-scale language models (LLMs) is displayed. The demo in the Use cases column is an example of assembling a UI using many components yourself, and the amount of code is also long.

The demos in the 'Components' column are examples of each component provided by Mesop, allowing you to see how to create and customize specific components.

To actually

install it for yourself, all you need to do is use the library management tool pip and enter the command 'pip install mesop'.

A notebook for Google Colaboratory is available that allows you to run Python on your browser, so you can easily check how Mesop works. Open the notebook and first click the two play buttons in 'Getting Started' in order.

Scrolling down the notebook, you can see various examples that you can run to see what the UI looks like, and you can also modify the code and run it to see how you can customize it.