💬

LangUserInterface~LLMのUIへの応用~

2024/05/04に公開

言語ですべてを操作するUI、LangUserInterfaceを考えました。

対話するUI

GUIは機能を視覚的に表現するUserInterfaceです。このGUIでは、ソフトウェアが持つ機能を人間が直感的に理解できることが何より重要で、それが良いUIの定義となります。エンジニアとデザイナーはこの良いUIを実現するために日夜、大変な工夫と努力を行なっています。有限な面積の画面で、いかに効率的に、かつ美しく機能を表現できるか考えているのです。しかし、仕様書とは残酷で、狭い画面に、あれこれ、あまりにも多くの機能を表現するように命令するのです。レスポンシブデザインなど考えたくもありません

このように、機能が多すぎて、画面内でわかりやすく表現することが難しい時、LLMを使用したUIは良い解決策になるのです。

人間以上の精度で文脈を理解できるLLMが、関数を覚えて適切に呼び出してくれる時代に、初めて可能になったこの新しいUIは、視覚的な表現に頼ることなく、すべてを言語で操作できるようにします。

user:"画面が明るすぎて見づらいです。"
# 🤖<そういえばいいん感じの関数があったぞ?
tool_call: changeUIMode(True)#uiのモード変更する機能を呼び出す

技術的に言えば、FunctionCallを使用します。事前に、LLMに実行可能な関数をtoolとして提供することで、LLMは応答に必要と思われる関数と、それに必要な引数を選んでくれます。UIはfunctionCallを感知すると、LLMが選んだ関数を実行すればいいだけです。

LUIの開発

LUIでは開発者は、機能を実行するために必要な関数をLLMに教えます。それだけでいいので簡単です。
例えば以下のような感じです。
例では、langchainのFunctionCallを使用して、[UIのダークモード/ライトモードの切り替えを行う]と[画面をリロードする]の2つの機能を定義しています。

class changeMode(BaseModel):
    """UIのダークモード/ライトモードの切り替えを行う。"""
    is_dark_mode: bool = Field(..., description="UIをダークモードにする場合、True, ライトモードにする場合False")

class reload(BaseModel):
    """画面をリロードする"""

tools = [changeMode, reload];
llm_with_tools = ChatOpenAI(model_name="gpt-4-turbo" ,temperature=0).bind_tools(tools)
function_call_chain = llm_with_tools

function_call_chainの実行結果をいい感じに捌いて、フロントエンド側で呼び出せばLUI完成です。
promptにfew-shotの考え方を適応することで、命令に対する関数の実行の精度は飛躍的に上昇します。

実例

「画面をリロードする」「画面のモードを変更する」という2つの機能を呼び出せるUIを僕のホームページAIに追加してみました。「画面をリロードして」とか「エラーが出て動かないよ」とか言えば、画面をリロードしてくれますし、「画面が明るすぎる」とか言えばダークモードに変更してくれるようになりました

https://homepage-xi-three.vercel.app/

Discussion