フリー＆ローカルで使えるWebUI作成AI、OpenUIのインストール方法

2024年9月17日2024年9月19日

最近話題のWebUI作成AI「v0」は、利用するために月額20ドルもの費用がかかります。代替として、無料で使える「OpenUI」の紹介と、インストール方法をまとめました。

OpenUIのメリット

OpenUIは、AI（LLM）を活用したWebユーザーインターフェース（UI）作成ツールです。単に「ボタンを中央に配置して、色は青にする」といった指示を出すだけでUIの作成ができるので、コード記載がいりません。

OpenUIはオープンソースであるため、フリーで使えるLLM（Ollamaなど）と組み合わせれば完全無料で使えます。

普通のLLMじゃダメなの？

ChatGPTのような通常のLLMでは、ソースコードを毎度コピペして確認する必要がある上、生成されたWebページのここを変えたい、と指定するのが難しいです,

OpenUIや、v0をはじめとするwebUI設計AIは、ソースコードと、画面プレビューを同時に見ながら作業できるので効率が良く、「ここをこう変えたい」を指定しやすいため、イメージを形にしやすいでしょう。

インストール

Windows10 PCに、Python及びGitがインストール済であるとして解説していきます。

OpenUIのインストール

まずは下記のコマンドによりOpenUIをインストールします。

git clone https://github.com/wandb/openui
cd openui/backend
pip install .

下記のようなエラーが出たときは、

ERROR: pip’s dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.
openai-whisper 20230314 requires tiktoken==0.3.3, but you have tiktoken 0.7.0 which is incompatible.

pipを最新版にアップデートするとうまくいきました。

python.exe -m pip install --upgrade pip

起動

下記のコマンドを入力して起動します。

python -m openui

こんな感じの画面が出たら起動完了です。

あとは指定されたURL（この例だと127.0.0.1:7878）にアクセスすれば画面が表示されます。

日本語化

右上にある設定ボタン（歯車マーク）から設定画面に入り、「Language」をJapaneseにするだけです。

OpenAIのモデルを使用する場合

https://platform.openai.com/api-keys

からAPIキーを取得します。具体的な方法はネット上に多数解説がありますので割愛します。
一度表示されたAPIキーは２度と再表示できないので、コピーを忘れないよう注意してください。

環境変数への登録

APIキーを環境変数に登録します。変数名は「OPENAI_API_KEY」、値は先ほどコピーしたAPIキーです。
（図の値はダミーです）

PCを再起動して、再びOpenUIを起動します。
設定画面から、OpenAIのモデルが使用できるようになっています。

エラーが起こるとき

API使用のためのクレジットが足りてない場合には下記の様に怒られます。

Error! 429 Error code: 429 – {‘error’: {‘message’: ‘You exceeded your current quota, please check your plan and billing details. For more information on this error, read the docs: https://platform.openai.com/docs/guides/error-codes/api-errors.’, ‘type’: ‘insufficient_quota’, ‘param’: None, ‘code’: ‘insufficient_quota’}}

クレジットは、下記のように先ほどのOpenAIのサイトから購入します。なお、一定時間（10分ぐらいでした）たたないと使えるようにならないようです。