MarkdownAIを使って、AIと無限にしりとりを楽しめるページを作ってみた！

できたもの

https://mdown.ai/content/08f6b98d-8f93-4e76-8b52-e3617b2794f2

しりとりAI BOTのプロンプト

プロンプトの中で、しりとりのルール制限をつけましたが、未だしりとりのルールを外れることがあります。
（しりとりくらい知ってそうなものですが・・・。プロンプト技術を試されてる？）

プロンプト

あなたはしりとりの達人です。ユーザとしりとりを行ってください。
しりとりの達人として、しりとりができるだけ長く続くように工夫してください。
最後の一文字が"ん"や"ン"になると、しりとりでは負けなので、できる限り回避してください。
もし最後の一文字が"ん"や"ンが付く言葉を選択してしまった場合、負けを認める発言をするとともに、あらたなしりとりを開始するようにしてください。
相手がしりとりのルールから外れる言葉を入力した場合、相手の負けになります。その場合は自分の勝ちを宣言し、新たにしりとりを開始するようにしてください。
これまでに使われた言葉を再度使うことはしりとりのルールで禁止されています。再度使われた場合は、再度使われたことを伝えて、再度同じ言葉でしりとりをやり直すよう相手に促してください。
毎回、自分や相手のしりとりの言葉に関するエピソードやうんちくも合わせて発言するようにしてください。
相手が漢字で入力してきた時は、それを読み、しりとりをつづけてください

javascript部分

javascript

あなたからしりとりを開始してください。<br>
<script>
    // チャットの履歴を保存する配列
    let chatHistory = [];

    // メッセージを追加する関数
    function addMessage(sender, message) {
        // メッセージを履歴に追加
        chatHistory.push({ sender: sender, message: message });

        // 履歴を表示
        displayChatHistory();
    }

    // チャット履歴を表示する関数
    function displayChatHistory() {
        const chatHistoryDiv = document.getElementById('chat-history');
        chatHistoryDiv.innerHTML = '';

        // 各メッセージを表示
        chatHistory.forEach(chat => {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.innerHTML = `<strong>${chat.sender}:</strong> ${chat.message}`;
            chatHistoryDiv.appendChild(messageDiv);
        });
    }

    // 送信ボタンのクリックイベント
  const button = document.getElementById('button-1733447229');
  button.addEventListener('click', async event => {
    button.disabled = true;
  
    const serverAi = new ServerAI();
    const message = document.getElementById('text-1733447229').value;
    const answer = await serverAi.getAnswerText('uR2hs6KTYXfR38rR58D9Jf', '', message);
  
    document.getElementById('answer-1733447229').innerText = answer;
    button.disabled = false;

        if (message) {
            addMessage('ユーザー', message);
            // BOTの返答を追加（例）
            setTimeout(() => {
                addMessage('BOT', answer);
            }, 1000);

            messageInput.value = ''; // 入力フィールドをクリア
        }
    });
</script>
<div style="display: inline-block;">
  <input type="text" id="text-1733447229" style="width: 200px;" value="ねこ">
  <button type="button" id="button-1733447229">しりとり送信</button>
</div>
<div id="answer-1733447229"></div>
<script>
(() => {
  const button = document.getElementById('button-1733447229');
  button.addEventListener('click', async event => {
    button.disabled = true;
  
    const serverAi = new ServerAI();
    const message = document.getElementById('text-1733447229').value;
    const answer = await serverAi.getAnswerText('uR2hs6KTYXfR38rR58D9Jf', '', message);
  
    document.getElementById('answer-1733447229').innerText = answer;
    button.disabled = false;
  });
})();
</script>

感想とか

• 以前、キャンペーンに参加した時には無かったと思うのですが、Insertに、"Insert an AI-generated image."が追加されていました。
  下のテキストボックスに画像のプロンプトを入力し、カラフルな色鉛筆をクリックすることで画像が生成されます。
  以前のキャンペーンではWindows Copilotに画像を生成してもらい貼り付けしましたが、今回はこちらで画像生成を行うことで、MarkdownAIの中で完結することができました。進化してるー！
  
  
• ちょっと凝ったページにしようとすると、JavaScriptやHTMLで整形する必要がでてくるのですが、それもMarkdownAIのプロンプトで完結すればいいのだろうと思ったりもしましたが、試しながら整形したかったので、結局Copilotを利用していました。