はじめに

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

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

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

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

作成した Web サイト

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

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

作成手順

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」をクリック

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

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

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

作成したコード

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

<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 を組み合わせるのが難しそう…というイメージでしたが、いざ作成してみると詰まることなく、スムーズに実現することができました！