Markdwon AIについに「ロボットAI(画像生成AI)」が追加されました。
今回は、それに合わせて画像生成AIのプロンプト生成ツール「Prompt Maker」を作ってみました！
このツールは、入力された文言に合わせて、英語で翻訳して出力してくれるのはもちろん、「女性」や「犬」などの単語でも、より詳しく環境や場面など提案をしてくれます。

Prompt Makerの使い方について

サイト中部のテキスト入力欄に生成したい画像の内容を入力して下さい。
具体的にイメージが湧いてなくても下記の画像のようにより詳しい内容を提案してくれるので、アイディアを出したい場合などでも是非使ってみて下さい！

無料で生成AI使う方法

今回作った「Prompt Maker」もChat GPTをフル活用して制作しました。
ここまで記事を読んでくれた人の中に、「作業を投げるAIを知らない」「AIの使用制限に課金してない」って人もいると思います。
そんな方々に朗報です！

普通は無課金だと使用制限がかかるChat GPTなどのAI機能も、期間限定でMarkdown AI社が使用料を負担します！なので、Markdwon AI内でAI機能が無料で使用できます。この機会に是非使ってみて下さい！

手順は簡単で、

1.Markdwon AIにログイン後、Create Modelボタンをクリック

2.Model Nameを適当に入力

3.ページ下部のUpdateボタンをクリック

4.ページ上部のPlaygroundボタンをクリック

5.Message入力欄にプロンプトを入力し、Sendボタンをクリック

上記の手順で簡単に、Chat GPTやGeminiなどのAI会話ツールを使用できます！
その他のMarkdwon AIの詳しい使い方に関しては、以下の記事参考にして下さい。

【Markdwon AI公式ツール】

【MarkdownAIの誰でもわかる使い方】

Prompt Makerの作り方

ツールの作り方に関しては、上記の通りChat GPTに「画像生成プロンプト作成サイト」をコーディングしてと丸投げしました。

HTML/CSS_JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prompt Maker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      text-align: center;
      background-color: #f4f4f9;
    }
    h1 {
      color: #333;
      font-size: 60px;
    }
    #prompt-container {
      margin: auto;
      width: 100%;
      padding: 20px;
      background: #ffffff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
    }
    textarea {
      width: 100%;
      height: 150px;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-family: Arial, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      resize: none;
    }
    textarea::placeholder {
      text-align: left; /* 左寄せ */
      vertical-align: top; /* 上寄せ */
      color: #aaa;
    }
    button {
      padding: 10px 20px;
      background-color: #000;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:disabled {
      background-color: #ddd;
      cursor: not-allowed;
    }
    #answer {
      margin-top: 20px;
      padding: 15px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 4px;
      text-align: left;
    }
  </style>
</head>
<body>
  <h1>Prompt Maker</h1>
  <div id="prompt-container">
    <textarea id="prompt-input" placeholder="生成したい画像の文言を入力して下さい"></textarea>
    <button id="run-ai-button">Run AI</button>
    <div id="answer"></div>
  </div>

  <script>
    (() => {
      const button = document.getElementById('run-ai-button');
      const input = document.getElementById('prompt-input');
      const answerDiv = document.getElementById('answer');

      button.addEventListener('click', async () => {
        const message = input.value.trim();

        if (!message) {
          answerDiv.innerText = "Please enter a prompt.";
          return;
        }

        button.disabled = true;
        answerDiv.innerText = "Loading...";

        try {
          const serverAi = new ServerAI(); // Replace with your ServerAI class.
          const answer = await serverAi.getAnswerText('bfGJYxugQgTFPdXecffnPT', '', message);

          answerDiv.innerText = answer || "No response from AI.";
        } catch (error) {
          answerDiv.innerText = "An error occurred. Please try again.";
          console.error(error);
        } finally {
          button.disabled = false;
        }
      });
    })();
  </script>
</body>
</html>

画像生成AI(ロボットAI)を使って画像を挿入

上記の生成されたHTML/CSSにMarkdwon AIの画像生成AI(ロボットAI) 機能で画像を生成/挿入したいと思います。より詳しい画像生成AIついて知りたい方は下記の記事をご覧下さい。

【Markdown AIの新機能！画像生成の使い方ガイド】

ここでは簡単に手順を説明します。

1.Insertボタンをクリック

2.AI Imageボタンをクリック

3.生成したい画像のプロンプトを入力して、横の鉛筆✏️が描かれているボタンをクリック

4.下部のInsertボタンをクリック

上記の手順で簡単に画像を生成/挿入ができます。
あとは、表示したい箇所に<img>タグを記入。
生成された画像のURLをコピーして、srcに貼り付けて完成です！
<img src="ここにURLを貼り付け">

【Prompt Makerはこちら】

最後に

Markdown AIに追加された画像生成AI(ロボットAI)を使う際は、今回作ったこの「Prompt Maker」を是非活用してみてください！

また、Markdown AIでは現在、AI機能を無料で無制限にお試しいただける期間を実施中です。このチャンスを逃さず、ぜひMarkdown AIの新機能を体験してみてください！

👉 Markdwon AIはこちら！https://mdown.ai/