MESOP, a New UI framework

A new kid on the block from Google

Robot Mascot (source)

Why Another UI Framework?

In the world of UI frameworks, tools like Streamlit and Gradio have already made significant impacts. They have streamlined the process of building and deploying web applications, especially for machine learning and data science projects. However, Mesop, developed by Google engineers, brings unique features and advantages to the table. Let’s explore why Mesop is a valuable addition to the existing UI frameworks and what differentiates it from Streamlit and Gradio.

Building applications that use large language models (LLMs) presents unique challenges. Testing these applications and getting user feedback quickly is crucial. One solution to these challenges is Mesop, a new framework from Google designed to simplify the process of creating web UIs with Python. In this blog, we’ll explore what Mesop is, how it compares to other tools, and how you can use it to build and test your applications swiftly.

Introduction to Mesop

Mesop is a framework developed by Google engineers during their 20% project time. It aims to make it easy for engineers, especially those with limited front-end skills, to create web UIs quickly. Mesop offers a variety of components and demos to help you get started:

1. High-Level Components: Pre-built elements like chat interfaces, text-to-text, and text-to-image examples.
2. Low-Level Components: Elements like text boxes, markdown support, buttons, and more, allowing for custom designs.
3. Demos: Example projects such as LLM playgrounds, showcasing how to use Mesop to create various tools.

Key Features

1. Rapid UI Building: Mesop allows you to create UIs swiftly, helping you test your ideas and get feedback faster.
2. Python-Based: Built with Python, it integrates seamlessly into the workflow of many developers.
3. Open Source: Mesop is open-sourced, making it accessible to everyone and encouraging community contributions.
4. High-Level Components: It comes with pre-built components like chat interfaces, text inputs, and buttons.
5. Flask Integration: Mesop uses Flask to handle the backend, simplifying server-side operations.

Comparison with Other Tools

1. Streamlit: Previously popular within Google, Streamlit has been acquired by Snowflake and is possibly less favored internally now. Mesop could be seen as Google’s in-house alternative.
2. Gradio: Acquired by Hugging Face, Gradio is another popular tool for building UIs quickly. However, Mesop offers more control and customization options for Google engineers.

Building a Simple Chat Bot

Let’s walk through building a simple chat bot using Mesop, LangChain, and Groq.

1. Set Up Mesop: Start by importing the necessary packages.

import Mesop as me
import Mesop.labs as mel

2. Define the Chat Function: Create a function to handle chat interactions.

def transform(user_input, chat_history):
    # Combine history into a single string
    history_string = "\n".join([f"{msg['role']}: {msg['content']}" for msg in chat_history])
    response = run_conversation_chain(user_input, history_string)
    return response

3. Initialize the Chat Interface: Use Mesop’s components to create the chat interface.

me.app.chat(transform)

Running the Application

You can run your Mesop application locally or in a cloud environment like Google Colab. Mesop provides a streamlined process for deploying your apps, making it easy to share and test with others.

Example: Chat Bot with Memory

Here’s a more detailed example of setting up a chat bot with memory using Mesop and LangChain.

1. Initialize Packages:

import Mesop as me
import Mesop.labs as mel
from langchain import ConversationChain
from groq import Groq

2. Set Up the API and Prompts:

Here we are using Large Language Model using groq

groq_api_key = "your_api_key"
groq_model = Groq(api_key=groq_api_key, model="Llama 3 70B")
 
def transform(user_input, chat_history):
   history_string = "\n".join([f"{msg['role']}: {msg['content']}" for msg in chat_history])
   response = groq_model.generate(user_input, history_string)
   return response

But we can also try models from Hugging Face

from langchain_huggingface import HuggingFaceEndpoint

# Replace "your_access_token" with your Hugging Face access token
HUGGINGFACEHUB_API_TOKEN = "your_access_token"

# Define the Hugging Face model ID (e.g., meta-llama/Meta-Llama-3-70B-Instruct)
model_id = "meta-llama/Meta-Llama-3-70B-Instruct"

def transform(user_input, chat_history):
  history_string = "\n".join([f"{msg['role']}: {msg['content']}" for msg in chat_history])

  # Instantiate Hugging Face Endpoint
  llm = HuggingFaceEndpoint(
      repo_id=model_id,
      task="text-generation",
      max_new_tokens=512  # Maximum number of new tokens to generate
  )

  # Generate response using user input and chat history
  response = llm.generate(history_string + "\n" + user_input)
  return response

Exercise: Can you modify the code above to use Google’s gemma in place of Meta’s Llama?

3. Create and Run the Chat Interface:

me.app.chat(transform)

Future Applications

Mesop is versatile and can be used for various applications beyond chat bots:

1. Text-to-Image Tools: Build tools for image manipulation.
2. Interactive Demos: Create interactive demos for your LLM models.
3. Testing Platforms: Develop quick prototypes to gather user feedback.

Conclusion

Mesop is a powerful tool for developers looking to build and test applications quickly. Its Python-based approach, high-level components, and open-source nature make it a valuable addition to your toolkit. Whether you’re building a chat bot or a complex UI, Mesop simplifies the process, allowing you to focus on your application’s functionality.

Explore Mesop today and see how it can enhance your development workflow. More info below:

GitHub - google/mesop: Build delightful web apps quickly in Python

Click pic below or visit LinkedIn to know more about the author