Googleが開発したPythonのUIフレームワーク「Mesop」の特徴を開発チームが解説

Googleのチームが開発したPython用のUIフレームワーク「Mesop」の特徴や使い方について、開発チームがブログに投稿しています。

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

多くのPython用UIフレームワークは簡単に使い始められるものの、標準的な使用方法を超えてカスタマイズを行おうとするとJavaScriptやCSS、HTMLの詳しい知識が必要です。MesopはPython内で動作を完結させることでよりPython開発者にとって扱いやすいUIフレームワークになっています。

MesopはコンポーネントベースのUIフレームワークで、UI全体がコンポーネントと呼ばれるブロックを積み重ねて作成されています。Pythonの関数を呼び出すのと同じ要領でMesopのコンポーネントを呼び出すことが可能であり、既存のPythonの知識を活用してUIを迅速かつ直感的に構築できるとのこと。また、コンポーネントは自己完結型であり、プロジェクト内や異なるプロジェクトにて再利用できます。

ボタンを作成するButtonコンポーネントや入力欄を作成するInputコンポーネントのように単純なコンポーネントを組み合わせて柔軟にUIを自分で組み立てられるほか、チャットAIと対話するなど一般的なユースケース用の高レベルコンポーネントが用意されているため、一定の用途向けのUIをあっという間に作成できます。

実際のUIとコードがどのようになるのかを一発で確認できるデモが用意されています。ページにアクセスし、まず「Quick start」欄にある「Chat」をクリックしてみます。

中央にUIのデモが表示され、右側にそのUIを作成するためのコードが表示されています。Mesopにはチャット用の高レベルコンポーネントが用意されており、一画面内におさまる短いコードで下図のようなUIを作成できるとのこと。

プロンプト欄に入力して送信ボタンを押すと定型文が出力され、チャット欄の表示を確認できます。

続いて「Use cases」欄の「playground」をクリック。大規模言語モデル(LLM)を使用する際の設定をカスタマイズできるUIが表示されました。Use cases欄のデモは自分で多数のコンポーネントを使用してUIを組み上げる例となっており、コード量も長くなっています。

「Components」欄のデモはMesopに用意されているそれぞれのコンポーネントの記述例で、細かいコンポーネントについてどのように作成・カスタマイズすれば良いのかを確認可能です。

実際に自分で使う時のインストール方法はライブラリ管理ツールのpipを使用して「pip install mesop」とコマンドを入力するだけとのこと。

ブラウザ上でPythonを動作させられるGoogle Colaboratory用のノートブックが用意されており、簡単にMesopの動作を確認可能。ノートブックを開き、最初に「Getting Started」の2つの再生ボタンを順番にクリックします。

ノートブックを下にスクロールするとさまざまな例が用意されており、実行することでUIの見た目を確かめられます。コードを変更して実行することでカスタマイズのやり方も確認できるようになっていました。