今回はイベントに便乗した記事を書きたくて、MarkdownAIを使ってみました。
特にこれといってアイデアもなかったので、なんとなく思いついたスライドを自動生成するページを作成してみました。
完成形
完成形といいつつ、スライドでの表示ができていないのでまだ未完成です。
ただ、同じようにコードを入れていただくと画像のような画面になります。
modelの用意
それでは早速AIのセットアップをしていきます。
画面左側のロボットのアイコンをクリックします。
AIの選択
次のようなAIが用意されているので好きなものを選びます。
- gpt-4o-mini
- gpt-3.5-turbo
- gpt-4
- claude
- gemini
- perplexity
今回はgpt-4o-miniを選んでみました。
modelの命名
model listに表示される名前なので今回は用途がわかりやすいように スライド作成 と命名してみました。
promptの入力
プロンプトにはAIへの指示を記入します。
今回、私は以下のように入力しました。
内容と使う色を元にmarp形式でシンプルでわかりやすいスライドを作成してほしい。
以上の内容を入力したら、画面一番下のcreateボタンを押すと回答生成用のmodelが作成されます。
表示用画面の用意
作成したmodelの挿入
画面のInsertボタンをクリックします。
次のようなモーダルが表示されるのでscriptを選択しましょう。
先ほど準備したmodelの名前が表示されると思うので、選択し、Insertボタンをクリックします。
基本的なボタンと出力表示用のコードが自動的に追加されます。
入力部分の作成
今回はAIを使えるのが楽しくてマークダウンの良さなど忘れ、普通にHTMLのタグ等を使ってコーディングしてしまいました。
私が作成したコードは以下です。
## スライド生成
###### スライドの内容
<input type="textarea" id="input1" class="content" placeholder="見やすいスライドについてのスライドを作成したい。" />
###### メインカラー
<input type="text" id="input2" placeholder="#ffffff" />
<div id="main-color-preview" class="color-preview"></div>
###### アクセントカラー
<input type="text" id="input3" placeholder="#ffffff" />
<div id="accent-color-preview" class="color-preview"></div>
###### 文字色
<input type="text" id="input4" placeholder="#ffffff" />
<div id="text-color-preview" class="color-preview"></div>
<button type="button" id="button-1729645337">スライド生成</button>
<div id="answer-1729645337"></div>
<style>
.content {
width: 50%;
height: 60px;
}
.color-preview {
width: 50px;
height: 50px;
margin-top: 10px;
border: 1px solid #000;
}
</style>
<script>
(() => {
const button = document.getElementById('button-1729645337');
// 色プレビューの要素を取得
const mainColorPreview = document.getElementById('main-color-preview');
const accentColorPreview = document.getElementById('accent-color-preview');
const textColorPreview = document.getElementById('text-color-preview');
// 各色の入力欄に対してリアルタイムで色見本を更新するイベントを追加
document.getElementById('input2').addEventListener('input', event => {
const color = event.target.value;
mainColorPreview.style.backgroundColor = color;
});
document.getElementById('input3').addEventListener('input', event => {
const color = event.target.value;
accentColorPreview.style.backgroundColor = color;
});
document.getElementById('input4').addEventListener('input', event => {
const color = event.target.value;
textColorPreview.style.backgroundColor = color;
});
button.addEventListener('click', async event => {
button.disabled = true;
// 入力内容を変数に代入
const input1 = document.getElementById('input1').value;
const input2 = document.getElementById('input2').value;
const input3 = document.getElementById('input3').value;
const input4 = document.getElementById('input4').value;
// プロンプト生成
const prompt = `メインカラーは"${input2}" アクセントカラーは "${input3}" 文字色は"${input4}"にしてほしい。スライドの内容は "${input1}"。`;
// AIサーバーへリクエストを送信
const serverAi = new ServerAI();
const answer = await serverAi.getAnswerText('ciBSYovEUKZGg5ijz2yyJW', '', prompt);
document.getElementById('answer-1729645337').innerText = answer;
button.disabled = false;
});
})();
</script>
入力された内容を変数に代入しAIに適切なプロンプトが送信できるようにしています。
また、色番号が入力されたタイミングですぐに色見本が表示できるようにしています。
最後に
AIの回答部分の表示が見にくいので、プロンプト部分にHTML形式で返すような指示などの追加についても検討してみようと思いました。
本来スライドで返してほしいと考えていたのですが、うまくできていないのでそこも改善の余地がありそうです。
MarkdownAIを使ってみてお金をかける事なく色々なAIが試せるのは素晴らしいと感じました。
ここまで読んでいただきありがとうございます。