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