Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Markdown AIのサーバーAI機能を使ってWebサイトを作ってみよう by MarkdownAIAdvent Calendar 2024

Day 4
@skm_bnn

MarkdownAIによるAIを用いたジェネレーティブアートの生成ツール

Last updated at Posted at 2024-12-10

はじめに

MarkdownAIというサービスを利用して、Webページの背景となりそうなジェネレーティブアートを生成してくれるサイトを制作してみました。

image.png

上記のWebページにアクセスして数十秒ほど（10秒から1分くらいの幅があります）経過すると、画面の中央にアートが描画されます。

アートの内容は [Generate] ボタンを押して再びしばらく待機すると、変更されます。是非、様々なアートを鑑賞するような感覚でお楽しみください。

本記事では、上記のWebページの操作方法とおおまかな開発手順、MarkdownAIに対する所感についてまとめています。生成AIを導入したWebページ開発をされたい方はご参考ください。

制作したサイトについて

ジェネレーティブアートとは？

ジェネレーティブアートは、アルゴリズムやコンピュータプログラムによって制作される作品のことです。

Image 1 Image 2

静止画だけでなく、次のようなアニメーションがついているものもあります。

Image 2

宣伝: もし、私が制作したものにご興味をお持ちでしたら、次のページをご鑑賞ください。

操作方法

基本操作

  1. Webページにアクセスしてしばらくするとと、アートが生成されます。
  2. 生成されたアートについて、[Description]ボタンを押すと、説明文が表示されます。
  3. [Generate]ボタンを押すと、新たにアートが生成されます。

詳細な操作

アートの生成

Webページ中央にある[Good]ボタンおよび[Bad]ボタンを押すと、次の回答にフィードバックされます。AIに対して、[Good]ボタンを押すと回答が良質であったこと、[Bad]ボタンを押すと回答が期待したものではなかったことを教えることができます。

また、「Input more points」と記載されているテキストボックスに、AIに生成してほしいアートの特徴を指定することができます。いくつかの例を次に示します。

  • 「インベーダーゲームを描いて。」

キーボードの矢印キーで左右の移動、Spaceキーで弾を発射することができます。

  • 「3Dのスケッチを描いて。」

  • 「流体シミュレーションを描いて。」

ソースコードの再利用

[Code]ボタンを押すと、p5.js（後述）でアートを描画するソースコードが表示されます。表示されたソースコードをコピーして、Webエディタにペーストすると、リアルタイムなスケッチの編集、保存（アカウントが必要です）ができます。次にWebエディタのリンクを記します。

構成要素

使用している技術およびサービスについて、おおまかに説明します。

MarkdownAI

MarkdownAIは、Markdown記法（とHTML、Javascript、CSS）で生成AIを用いたWebサイトを手軽に作成できるツールとなっています。制作したWebページの根幹的な要素です。詳細は次のWebサイトをご確認ください。

p5.js

p5.jsは Processing というJavaベースのグラフィックス言語をJavascript上で動作できるように開発された描画ライブラリです。作成したWebページでは、アートを描画するために利用しています。

開発手順

基本的に次のサイトの流れに沿りました。

本記事では、主に制作したWebページにおけるAIの制作手順について記載します。そのため、次の内容に関する説明は大きく省きます。

  • MarkdownAIを用いたサイトの公開手順
    • サインアップ
    • プロジェクトの作成方法
    • サイトの公開方法
  • Markdown記法の文法に関する説明
  • 使用している描画ライブラリ p5.js に関する詳細説明

手順1．モデルの選択

2024/12/09時点で、MarkdownAIで利用できるAIは次の5種類です。各々の特徴について大雑把にまとめます。

モデル 特徴
GPT-4o-mini 特定の用途向けに最適化されていて、高速で軽量に推論できる
GPT-3.5-turbo 高速で低コストなGPT-3.5の改良版
GPT-4 高性能な大規模言語モデルで複雑なタスクにも対応可能
Claude AnthropicによるAIで、安全性と倫理を重視
Gemini Google DeepMindが開発したAIモデル、マルチモーダル対応に注力されている

それぞれ試してみた結果、最も綺麗かつ魅力的なアートを生成してくれるのはClaude でした。

手順2．プロンプトの記入

AI に推論をさせるにあたりPromptを記入する必要があります。

5つのR

Markdown AI社のチュートリアル によると、次の5要素（5つのR）を含むことが重要とされていました。

要素 内容
Request（依頼） AIに返答してほしいこと
Roll（役割） AIが誰である想定なのか
Rule（ルール） AIに守ってもらいたい規則や禁忌
Reason（推論） Request（依頼）に関する詳細な説明
Recommend（推奨） 例

  • Request（依頼）、Reason（推論）
    AIにしてほしい依頼は「Webページの背景となりそうなジェネレーティブアートの制作」です。
    そして、その返答は描画ライブラリで実装されたプログラムであることを求めます。

  • Roll（役割）
    AIには「p5.jsでジェネレーティブアートを制作できるプロのアーティスト」になってもらいます。

  • Rule（ルール）、Recommend（推奨）
    Webサイトを作成するにあたり、ここが一番重要に感じました。私はAIからの返答でアートを描画するプログラムと、その挙動に関する説明文を受け取って実装しています。

プログラムはWebページ上でアートを表示するとき、説明文は[Description]ボタンを押したときにユーザへ提示するときにそれぞれ必要です。それらを取得するにあたり、Webページのプログラムで処理できるように、AIには次のようなJSON形式で返答するように指定しました。

{
  "code"          : "アートを描画するプログラム", 
  "description"   : "アートの挙動に関する説明文"
}

プロンプトの内容

最終的に次をプロンプトにしようとしました。

プロンプト
あなたはp5.jsでジェネレーティブアートを制作するプロのアーティストである。
次の要素を3つ以上もつクリエイティブなWebページの背景となるp5.jsのソースコードを作成せよ。
- 視覚的に魅力的である
- ユーザが見ていて飽きない
- 流動的な動きがある
- ellipse()，point()以外を使っている
- インタラクティブであり、次のどちらかでユーザと対話できる動的な要素がある
  - 例: マウスカーソルの動きに合わせた反応がある
  - 例: マウスカーソルの座標で色が変わるのはダメ

次の点を厳守せよ。
- コメントアウトはつけるな
- キャンバスの大きさは必ず(windowWidth * 0.9, windowHeight * 0.9)にして、リサイズの処理も実装せよ
- 常にアニメーションを含んでいる
- 返答については可能な限り高速にせよ
- 他にもWebページを閲覧しているユーザの気分を害するようなデザインやコンテンツは厳禁である。

なお、出力は次のようなJSON形式で答えよ。
{
  "code"          : "アートを描画するプログラム", 
  "description"   : "アートの挙動に関する説明文"
}

しかし、プレビューでAIを動かそうとしたところ次のようなエラーが出力されました。

SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSON

どうやら、Prompt の箇所に次のようなJSONを含むとサーバ側のデータ処理で異常が生じるみたいです。

{
  "code"          : "アートを描画するプログラム", 
  "description"   : "アートの挙動に関する説明文"
}

そこで、AIを制作するページではなく、マークダウンのスクリプト上で前述のプロンプトを入力してみました。

プロンプトに関するプログラム
let message = `あなたはp5.jsでジェネレーティブアートを制作するプロのアーティストである。
次の要素を3つ以上もつクリエイティブなWebページの背景となるp5.jsのソースコードを作成せよ。
- 視覚的に魅力的である
- ユーザが見ていて飽きない
- 流動的な動きがある
- ellipse()，point()以外を使っている
- インタラクティブであり、次のどちらかでユーザと対話できる動的な要素がある
  - 例: マウスカーソルの動きに合わせた反応がある
  - 例: マウスカーソルの座標で色が変わるのはダメ

次の点を厳守せよ。
- コメントアウトはつけるな
- キャンバスの大きさは必ず(windowWidth * 0.9, windowHeight * 0.9)にして、リサイズの処理も実装せよ
- 常にアニメーションを含んでいる
- 返答については可能な限り高速にせよ
- 他にもWebページを閲覧しているユーザの気分を害するようなデザインやコンテンツは厳禁である。

なお、出力は次のようなJSON形式で答えよ。
{
  "code"          : "アートを描画するプログラム", 
  "description"   : "アートの挙動に関する説明文"
}`;

// インスタンスを生成する
const serverAi = new ServerAI();

// 回答を取得する（`getAnswerText`メソッドが事前に正しく定義されている必要がある）
const answer = await serverAi.getAnswerText(
  "serverAiのID（MarkdownAIの編集ページでInsertボタンを押すと自動的に入力される）",
  "",
  message
);

こうすると、エラーが発生せずに次のような回答を得ることができました（正確には次のテキストを「```json」もしくは「```javascript」と「```」で囲まれた文字列が返されるので、.replace()メソッドでそれらを除く必要があります）。

AIの回答例
{
  "code": "let particles = []; function setup() { createCanvas(windowWidth * 0.9, windowHeight * 0.9); for (let i = 0; i < 100; i++) { particles.push(new Particle(random(width), random(height))); } } function draw() { background(240, 240, 250); for (let p of particles) { p.update(); p.display(); } } class Particle { constructor(x, y) { this.position = createVector(x, y); this.velocity = createVector(random(-1, 1), random(-1, 1)); this.size = random(5, 15); } update() { this.position.add(this.velocity); if (this.position.x > width || this.position.x < 0) this.velocity.x *= -1; if (this.position.y > height || this.position.y < 0) this.velocity.y *= -1; } display() { fill(100, 150, 200, 150); noStroke(); ellipse(this.position.x, this.position.y, this.size); } } function windowResized() { resizeCanvas(windowWidth * 0.9, windowHeight * 0.9); }",
  "description": "このアートは、ランダムに動く粒子を描画します。粒子はキャンバスの端に達すると反射し、流動的な動きを持っています。ユーザーがマウスを動かすと、粒子の動きがわずかに変化し、インタラクティブな体験を提供します。"
}

MarkdownAIに関する所感

今回、はじめて私はMarkdownAIを使ってみました。そこで体感した良かった点と、恐れ多いですが改善していただきたい点をまとめたいと思います。

良かった点

  • Webページの公開、生成AIの利用が非常に簡易である

これが一番、大きなメリットでした。本来であれば、管理する必要があるサーバの概念に対して気を遣う必要がないというのはかなりのストレスフリーです。生成AIを無料で使えるというのも、とても大きい利点です。

  • WebページをMarkdown、HTML、Javascript、CSSで構成できる

簡単なWebページであればマークダウンで制作を完結できるというのはとても楽です。今回制作したWebページではほとんどがJavascriptで実装しており、この点を上手に活かすことはできませんでしたが、、、。

改善してほしい点

  • テキストエディタのデザイン

こちらがWebページの制作画面となっているのですが、入力されたテキストはこのように黒色で統一されています。

image.png

VSCodeのように行数やシンタックスハイライトがあると、より作業がしやすいように感じました。さらにわがままを言うと、入力する内容（マークダウン、HTML、Javascript、CSSの構文）の補足機能があると最良ですが、、、。

image-1.png

筆者はVSCodeで実装して、それらをコピペでWebページのテキストエディタに写していました。

  • リファレンス

私の調査が甘い可能性はあるのですが、生成AIを利用するにあたってリファレンスを発見することができませんでした。それにより、Javascriptのプログラムで理解できない箇所がありました。例えば、ServerAIクラスの.getAnswerText()メソッドについて、第二引数にどういう役割があるのか説明されている文書を見つけることができませんでした。

また、単に私の技術力の問題で解決できる問題かもしれませんが、Javascriptの処理が2回実行されます。これにより、1回の会話につきAIの返答が2個となり、Webページの挙動が狂うことがあります。

image-2.png

さいごに

この記事では、MarkdownAIを活用したジェネレーティブアートの生成ツールの開発について紹介しました。MarkdownAIは無料で生成AIが利用できる魅力的なツールです。特に、シンプルな構成のWebページを作成することに対しては有効に感じました。

参考

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?