文字（GPT-4o mini）×画像（Dall-E 3）でレシピ提案してくれるサイトを作成してみた

# はじめに

きっかけは、Markdown AI というサービスを用いれば、以下のようなサイトを簡単に作成できると知ったことです。

https://mdown.com/ja/cooked/

こちらのサイトのように、Markdown AI では独自の AI モデルを作成して Web サイトに組み込むことができます。

また、これまでは質問に対する回答を文字でサイト内に挿入する「テキストスクリプト」機能だけでしたが、**2024年12月より質問に対する回答を画像でサイト内に挿入する「画像スクリプト」機能が実装されました！**

そこで、「テキストスクリプト」と「画像スクリプト」を組み合わせたら面白そう！と思い、上記のサイトを参考にして、入力した材料を用いたレシピを画像付きで提案してくれるWebサイトを作成してみました。

# 作成した Web サイト

ぜひ試してみてください！

https://mdown.ai/content/e13d60f8-e229-44f1-88f0-b68a6bc0c3f4

例として、材料に「小松菜」を指定した場合はこのようになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339770/ca2c484e-65da-902b-aa93-1fe5b3c6974b.png" width="700" />

# 作成手順

AI モデルを使用するために必要となるスクリプトは Markdown AI が出力してくれるため、手順は非常に簡単です。

## 1. レシピの文字データを取得する AI モデルを作成

材料から提案するレシピを取得する際に使用する、ベースとなる AI は「GPT-4o mini」を選択しました。

プロンプトには以下の内容を指定しました。

```
入力された材料を用いた料理のレシピを1つ出力してください。
```

## 2. レシピの完成イメージの画像を取得する AI モデルを作成

レシピから完成イメージの画像を取得する際に使用する、ベースとなる AI は「Dall-E 3」を選択しました。

プロンプトには以下の内容を指定しました。

```
入力されたレシピで作成した完成品の画像を生成してください。
画像には完成品のみ出力してください。
```

## 3. 生成した AI モデルを Web サイトに挿入

「Insert」ボタンをクリックして表示されるメニューからそれぞれの AI モデルを追加しました。

* レシピの文字データを取得する AI モデル
Insert a sample script that uses Server AI. の 「Script」をクリック

* レシピの完成画像を取得する AI モデル
Insert a script that calls the image created by the AI の 「Image Script」をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339770/1d53c4c3-6a10-06c7-b2ba-2c2450c6aa0a.png" width="400" />

## 4. スクリプトを修正して AI モデルを連携

単純に追加しただけではそれぞれの AI モデルごとに入力を受け付ける、以下のような Webサイトになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339770/a4e2dfd1-af42-b60c-1552-01d4ca2d6473.png" width="400" />

"レシピの文字データを取得する AI モデル" の出力を、"レシピの完成画像を取得する AI モデル" の入力として与えるようにコードを変更しました。

# 作成したコード

```html
入力された材料を用いたレシピを提案します！

<div style="margin-bottom:10px">
  <input class="input" type="text" id="text-1736604828" style="width: 300px" />
  <button class="button is-info" type="button" id="button-1736604828">
    レシピを検索する
  </button>
</div>
<div id="answer-1736604828" style="height:400px;overflow:scroll;border:1px solid;margin-bottom:10px"></div>
<div id="image-1736604835"></div>

<script>
  (() => {
    const button = document.getElementById('button-1736604828');
    const answerContainer = document.getElementById('answer-1736604828');
    const imageContainer = document.getElementById("image-1736604835");
    button.addEventListener("click", async (event) => {
      button.classList.add("is-loading");
      button.disabled = true;
      answerContainer.innerText = '';
      imageContainer.innerText = '';

      const serverAi = new ServerAI();
      const message = document.getElementById('text-1736604828').value;
      answerContainer.innerText = 'レシピを検索しています…';
      const answer = await serverAi.getAnswerText('qRQqgY1jkkGvChAMkV1h4T', '', message);
      answerContainer.innerText = answer;

      imageContainer.innerText = 'レシピの完成イメージを作成しています…';
      const image = await serverAi.getAnswer('86ynum49qxonKQauqSeDKb', {
        prompt: answer,
        size: '1024x1024',
        n: 1,
        type: 'image'
      });
      imageContainer.innerHTML = `<img src="${image.imageUrl}" alt="${prompt}" style="height:400px">`;

      button.classList.remove("is-loading");
      button.disabled = false;
    });
  })();
</script>
```

# おわりに

Markdown AI を用いて、生成 AI を組み合わせた Web サイトを作成してみました。
発案した段階では生成 AI を組み合わせるのが難しそう…というイメージでしたが、いざ作成してみると詰まることなく、スムーズに実現することができました！