【学習】MarkdownAIでWebサイトを制作してみる

はじめに

下記アドベンドカレンダーに参加したのでMarkdown AIというものを利用してWebサイトを制作してみたいと思います！！

ログインしたのち「+」ボタンを押して新たなページを作成。
次に「ロボット」のボタンを押してAIモデルを選択していきます。

プロンプトや知識に関する部分は上記記事を参考に設定していきます。

制作物

今食べたいアイスメーカー

コード詳細

AI部分のコードは下記になります

<div style="display: inline-block;">
  <div id="conversation-log" style="max-width: 400px; height: 400px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"></div>
  <input type="text" id="text-input" style="width: 100%; padding: 10px;" placeholder="Enter your response" />
  <button type="button" id="run-ai-button" style="width: 100%; padding: 10px;">Send</button>
</div>

<script>
(() => {
  const conversationState = {
    step: 0, // 現在のステップを管理
    userInputs: {}, // ユーザーの入力内容を保持
  };

  const conversationLog = document.getElementById('conversation-log');
  const inputField = document.getElementById('text-input');
  const button = document.getElementById('run-ai-button');

  // ユーザーに表示するメッセージを追加
  const appendMessage = (text, sender = 'AI') => {
    const messageElement = document.createElement("p");
    messageElement.textContent = `${sender}: ${text}`;
    conversationLog.appendChild(messageElement);
    conversationLog.scrollTop = conversationLog.scrollHeight; // 自動スクロール
  };

  // ユーザーの入力を処理し、次の質問を出す
  const runAI = async (message) => {
    let response = '';
    if (conversationState.step === 0) {
      conversationState.userInputs.type = message;
      conversationState.step = 1;
      response = "What flavor would you like? Please choose one: \n1. Fruit系\n2. Choco系\n3. Nut系\n4. Spice系";
    } else if (conversationState.step === 1) {
      conversationState.userInputs.flavor = message;
      conversationState.step = 2;
      response = "What mood are you in? Please choose one: \n1. Bright\n2. Relaxed\n3. Adventurous";
    } else if (conversationState.step === 2) {
      conversationState.userInputs.mood = message;
      conversationState.step = 3;
      response = "What is the weather like today? Please choose one: \n1. Hot\n2. Cool\n3. Rainy\n4. Cold";
    } else if (conversationState.step === 3) {
      conversationState.userInputs.weather = message;
      conversationState.step = 4;
      response = "Based on your choices, I recommend a refreshing fruit sorbet for a bright and hot day!";
    }
    return response;
  };

  // 入力された内容を処理し、次のメッセージを出す
  const processInput = async () => {
    const message = inputField.value.trim();
    if (!message) return;
    inputField.value = "";
    button.disabled = true;

    // ユーザーの入力を表示
    appendMessage(`User: ${message}`, 'User');

    // AIからの返答
    const answer = await runAI(message);
    appendMessage(answer);

    button.disabled = false;
  };

  // 初期メッセージと選択肢を表示
  const startConversation = () => {
    appendMessage("AI: Welcome! What kind of ice cream would you like today?");
    appendMessage("Please choose one: \n1. アイスクリーム\n2. ジェラート\n3. シャーベット\n4. ソルベ");
  };

  button.addEventListener('click', processInput);

  // 初期会話開始
  startConversation();
})();
</script>

1. ステップ管理 (conversationState)
   conversationState オブジェクトを使って、現在どの質問ステップにいるのかを管理しています。最初は step: 0 からスタートし、ユーザーが選択肢に答えることで step が1つずつ進みます。userInputs にはユーザーが選んだ内容を保存していきます。

2. 質問の表示と進行 (runAI 関数)
   runAI 関数は、現在のステップに応じた質問を返します。例えば、最初に「どんなアイスが食べたいか？」を質問し、その後「味は？」「気分は？」「天気は？」と順番に質問をします。ユーザーの答えに基づき、次の質問が出てきます。

3. メッセージの追加 (appendMessage 関数)
   appendMessage 関数は、ユーザーとAIの会話をチャット欄に追加します。AIのメッセージとユーザーの入力をそれぞれ表示します。

4. ユーザーの入力の処理と次の質問の表示 (processInput 関数)
   ユーザーが入力したメッセージ（アイスの種類、味、気分、天気）を受け取った後、runAI 関数を呼び出して、次の質問を表示します。

5. 初期会話 (startConversation 関数)
   最初に表示するメッセージで、「どんな種類のアイスが食べたいか？」という質問を出し、その選択肢（アイスクリーム、ジェラート、シャーベット、ソルベ）を提示します。このステップを進めるごとに、選択肢が次々と変わります。

さいごに、MarkdownAIを使用してみて感想

私の使い方が合っているかは謎です。
英語でプロンプトや知識に関する部分を書かなくてはいけないようで（多分）。日本語ではダメなのか？（日本語だとうまくいかなかった）と感じました。
そもそも初期状態では「マークダウンAIとは」を訪ねるスクリプトとなっていてわかりづらかったです。

もっと、プロンプト部分の例や知識部分の例や、コメントにはどんなことを入力するのかなど、実際のコード例を複数個挙げていただけるとすごく助かるな。と感じました。

他の方の記事も参考にもう少しMarkdownAIについてどんなことができるのか理解を深めていきたいとおもいます。