🔖

Wix ChatからDALL·E を呼び出し画像を作ってもらう

2023/07/14に公開

OpenAPI

はじめに

OpenAIのドキュメントを読んでいたら、DALL·E のAPIのサンプルコードが目に入り、先日作ったチャットbotに画像作成させたくなったので作ってみました。

一見便利そうなものができたように見えますが、DALL·E はOpenAIのアカウントがあれば、一定の枚数無料で画像が生成できます。（APIのモデルと同等かはわかりませんが）
そのためわざわざWix Chat を作って画像を作成する意味はありません。
クオリティも少し微妙です。

実用性がない点はあらかじめご了承ください。

前提

OpenAI APIで遊ぶのにWix Chatと Velo by Wix が意外に便利(本編)
の内容がベースとなっています。
Wix Chatからメッセージを送るとOpenAI APIが返事をしてくれるチャットボットをVeloを利用して作っています。

開発言語も、前回と同じ Node.jsになります。

DALL·Eとは

本題に入る前に DALL·E について
OpenAIのドキュメントから紹介しておきます。

DALL·E

DALL·E is a AI system that can create realistic images and art from a description in natural language. We currently support the ability, given a prompt, to create a new image with a certain size, edit an existing image, or create variations of a user provided image.

The current DALL·E model available through our API is the 2nd iteration of DALL·E with more realistic, accurate, and 4x greater resolution images than the original model. You can try it through the our Labs interface or via the API.

翻訳

DALL·Eは、自然言語の説明から現実的な画像やアートを作成するAIシステムです。私たちは現在、プロンプト（指示）を与えることで、特定のサイズの新しい画像を作成したり、既存の画像を編集したり、ユーザーが提供した画像のバリエーションを作成したりする能力をサポートしています。

私たちのAPIを通じて利用可能な現在のDALL·Eモデルは、初代モデルよりもより現実的で正確で、解像度も4倍高い2番目のバージョンです。私たちのラボインターフェースまたはAPIを通じてお試しいただけます。

今回作るもの概要

OpenAI APIで遊ぶのにWix Chatと Velo by Wix が意外に便利(本編)

上記で作ったチャットbotに、メッセージの内容から判断し、画像生成が必要と判断した場合は、英文でプロンプトを作成、DALL·Eを呼び出します。
そして、結果を取得後、メッセージと共に画像URLをユーザーに返信します。

プロンプトの変更

前回のプロンプト(system)は以下になります。
後半は、意味不明な文言が来たらFunction callingでスパム報告（ログを取るだけですが）させるために付与していました。

あなたはWixで運営されているサイトの管理人です。
利用者からのメッセージに答えてあげてください。意味不明　なメッセージはスパム報告してください。

これを

あなたはWixで運営されているサイトの管理人です。
利用者からのメッセージに親切に答えてあげてください。
意味不明　なメッセージはスパム報告してください。
画像が必要な場合は英文で詳細なプロンプトを作成してください。
ユーザーへの返信は必ず日本語で行ってください。

に変更しました。

Function callingに画像生成ツールを追加

次にダイレクトに画像作成を依頼された場合や、画像を使って回答した方が良いと判断した場合に、LLMが呼び出す関数を作ります。

ユーザーへの返信には、DALL·Eで生成した画像だけでなく、メッセージも必要です。
また、DALL·Eは英語のプロンプトのみ受けつけている点も考慮します。

そこで引数は

画像生成プロンプト（英語）
ユーザーのメッセージ（日本語）
の２つで作成しました。

関数の定義は以下になります。

{
    name: "createImage",
    description: "画像を作成し、ユーザーに送信する",
    parameters: {
        type: "object",
        properties: {
            prompt: {
                type: "string",
                description: "DALL·Eに送信するpromp(英文限定)",
            },
            mesg: {
                type: "string",
                description: "画像と一緒にユーザーに返信するメッセージ（日本語限定）",
            }
        },
        required: ["mesg", "prompt"],
    }

DALL·Eを繋ぎ込まず、ログだけで Function callingの挙動を確認します。

チャット入力： "可愛い妖精の画像を描いて。"
プロンプト： "Create an image of a cute fairy."
返信メッセージ: "こちらが可愛い妖精の画像です。"

上記のような結果が取得できるようになりました。

上記に辿り着くまで結構試行錯誤したのですが、ユーザーへの返信メッセージが英語になってしまう点が一番時間を使いました。
最初は関数のdescriptionでのみ言語指定をしていたのですが、それでも英語で返信文を作ってしまうため、プロンプトの方でも日本語での返信文作成を指示しています。

DALL·Eの組み込み

では、上記で作成した関数の結果を使って、DALL·Eで画像を作成します。

まず、関数の結果は以下のように受け取ります。
return で返した値が返信メッセージになります。

const completion = await openai.createChatCompletion({
 // 略
})
// LLMによってFunction callingが利用されたかの判定
const funcResponse = completion.data.choices[0].message.function_call
if (funcResponse) {
    if (funcResponse && funcResponse.name == 'createImage') {
	const { prompt, mesg } = JSON.parse(funcResponse.arguments || "{}");
	// TODO ここにDALL·Eを呼び出す関数を書く
	// URLを取得したmesgと結合する。
	return mesg
    }
    return 'スパムメッセージとして報告させていただきました。'
}
// Function callingを使わない場合、直接返信する
return completion.data.choices[0].message.content

DALL·Eを呼び出す関数

async function createImage(prompt) {
    const configuration = new Configuration({
        apiKey: await getSecret('OPENAI_API_KEY'),
    });
    const openai = new OpenAIApi(configuration);
    const response = await openai.createImage({
        prompt,
        n: 1, //作成する画像の枚数
        // 256x256, 512x512, 1024x1024から選ぶ（料金にあまり差はない)
        size: "1024x1024",
    });
    return response.data.data[0].url
}

思ったより実装はシンプルです。画像は複数枚作れますが今回は１枚だけにしておきます。

チャット返信処理

ここで少し問題が発生しました。

最後にAPI仕様書
wix-chat-backend
を開いて、さて、添付ファイルはどうやって指定すれば良いのかな？
と調べていたら、そんなものはありませんでした。
私の思い込みです。

一応画面上からは画像添付ができるみたいですが、上記APIでは未実装のようです。

一応さっと代替手段を探してみたのですが
"Developer Preview"ながら
wix-inbox.v2
があったり、メールで送っても良いし、メディアファイルとして一旦保存しても良いし、色々方法はありそうですが、今回はこの段階でだいぶ時間を使ってしまったので、ここまでにしたいと思います。

完成

早速、何か画像を作ってみましょう。
（誤字があるので恥ずかしいですが）

・・・。
しかも謎に3体。（Velo君と、by君と、Wix君ということ？）

また機会があったら、機能を追加してみたいと思います。