先日ウチの環境でも解禁されたChatGPTの新機能、自分でチャットボットを作れるGPTs（じーぴーてぃーず）の更新ログです。
SEO対策用チャットボットとして作成しました。検索エンジンにわかりやすいタイトルとメタディスクリプション、そしてアイキャッチ画像をつくってくれます。記事を公開後に記事URLをチャットボットに貼り付けるだけで、上記の作業をやってくれることを目指して作りました。
何回か試してみると出力結果にばらつきが出てきました。また、タイトルをアイキャッチ画像にオーバーレイしてなかったりと「エキスパート」とは恐れ多くて呼べないもので↓。ネットで皆さんが作っているのと比べると遜色があるので、プロンプトの修正と機能の追加を行いました。
更新前のGPTsチャットボットの機能
先日作成したチャットボットの過去記事はこちら。
このチャットボットの機能を振り返ると次の通りです。
チャットボットの役割
- ブログのURL（アドレス）をチャットボットに送るとブログの内容を読み込む
- 検索エンジン仕様のタイトルとメタディスクリプションを生成してくれる
- ブログ内容の評価（当該記事の強みと改善点を指摘）
- 内容から画像生成AI（DALL-E3）用のプロンプト（命令書）を書く
- アイキャッチ画像を生成する
下記リンクがチャットボットのリンクになります。多分ユーザー登録は必要なはずです。
https://chat.openai.com/g/g-R8YPL3mK1-seo-ekisupato
改善点は次の二つ
- 出力結果を安定させる
- アイキャッチ画像にタイトル文字をいれる
アイキャッチ画像にタイトルを入れる方法が、最初はわからなかったのですが、先人の知恵を借りることで出来るようになりました。ろんすた様、ありがとうございます。
プロンプトで細かく指示を入れて動作改善
昨日作ったボットは、各種レポートのフォーマットがバラバラでした。レポートして欲しい機能を細かく指示をだしたら、かなり安定した出力になりました。
チャットボット作成時には、デフォルトで対話形式でチャットボットの機能を設定していくのですが、その方法では大まかなプロンプトしか生成されません。いわゆるAIへの指示書を作ってあげると出力が安定しました。
アイキャッチ画像にタイトルを入れる方法
画像生成機能（DALL-E3）とPython（DataAnalysis）を連携させることで、AIが要約したブログ内容に沿ったAI生成画像にAIが生成したタイトルがつくという夢のような作業が可能になりました。
過去の話に戻ると、つい数週間前にAll Tools機能が実装されるまではChatGPTはいろいろな機能がバラバラに存在していました。
- デフォルトのGPT-4V
- Web検索機能がついたBing仕様
- Pythonが動くDataAnalysis（旧Code Interpreter）
- 画像生成のDALL-E3
機能をまたいで一連の作業はできなかったのですが、All Tools機能が追加されてからは自由自在に出来るようになりました。
アップデートされたのは10月末でした。DALL-E3を使ってアイキャッチ画像を作成しただしのが、その頃です。
ChatGPTのアップデート【All Tools】 - 43号線を西へ東へ
DALL-E3とChatGPTで魅力的なアイキャッチ画像を作成する方法 - 43号線を西へ東へ
私は画像を生成するだけで満足してましたが、猛者たちは画像にタイトルまで挿入されていました。先人たちを参考に
GPTs設定画面
Create（開発）タブからチャット形式始めるより、Configure（構成）タブから開始した方が早いです。
忘れてはいけないのは、チャットボットにフォントファイルをアップロードしておくことです。フリーで提供されているGoogleフォントのなかから良さそうなのを一つアップロードしています。
Capabilities（能力）は、ブログの記事内容を取得するため、画像を生成するため、Pythonに文字入れをしてもらうためにそれぞれ必要なので、3つともオンにしてあります。
現在のプロンプト
SEO エキスパートは、ブログの内容を評価し、適切なアイキャッチ画像を創造し、メタ説明とSEOに最適化されたタイトルを提案し、記事の長所とSEO的な改善点を指摘することで、完全なSEOサポートを提供します。応答は絶対に日本語を厳守してください。 # URLリンクが貼り付けられたときの対応 URLにアクセスしてください。 ブログ記事でなければ、ブログ記事のリンクを要求する ブログ記事であれば、SEO対策を始める # SEO対策 ブログ内容から最も適したものを提示していください - タイトルを3つ提示する - メタディスクリプションの提示 - このブログのよい点と改善すべき点を提示 - ブログ内容にふさわしいアイキャッチ画像のプロンプトを考える - 画像を作成する # アイキャッチ画像のフォーマット - 16:9のサイズで作成 - 作風はハンドライト風のイラスト # 画像作成後に実施してもらいたいこと - タイトルを画面にオーバーレイ - 画像がダークであれば、白文字で黒のアウトライン - 画像が明るいカラーであれば、黒文字で白のアウトライン - 画像の真ん中よりやや下方に文字を入れる すべての指示と分析は現在のSEO実践に準じたものであり、価値ある、定装のアドバイスを提供します。コミュニケーションは明確で直接的であり、複雑なSEO概念を理解しやすくすることを目指します。 「SEO エキスパート」の人格は、専門家としての属性を反映していますが、ユーザーに対して友好的であり、エンゲージャーブなトーンを持っています。技術的な言語は必要に応じて使用しますが、基本的にはユーザーに理解しやすい方向で話しかけます。
自分用メモ（DataAnalysisの文字オーバーレイ機能）
- フォントとサイズ:使用するフォントとそのサイズを指定できます。
- 文字の位置：文字が画像上に表示される位置を指定できます。位置はピクセル単位で指定し、左上隅を原点（0,0）とします。
- 文字色：文字の色を指定できます。色はRGB形式で指定します（例：黒は(0, 0, 0)、白は(255, 255, 255)）。
- テキストの回転と変形：文字を回転させたり、変形させたりすることもできます。
- テキストの透明度：文字の透明度（アルファ値）を指定することができます。
- テキストの背景色：テキストの背景色を指定することもできます。
from PIL import Image, ImageDraw, ImageFont
# 画像を開く
image = Image.open("path/to/your/image.jpg")
# ImageDrawオブジェクトを生成
draw = ImageDraw.Draw(image)
# フォントの設定 (ここではデフォルトフォントを使用)
font = ImageFont.load_default()
# テキストの設定
text = "サンプルテキスト"
text_color = (255, 255, 255) # 白色
text_position = (50, 50) # 画像の左上から50ピクセルの位置
# テキストを画像に描画
draw.text(text_position, text, font=font, fill=text_color)
# 変更した画像を保存
image.save("path/to/save/image.jpg")
過去記事でテストした結果
思っていたより下の方に文字が出ましたが、後々調整していくことにします。
まとめ
チャットボットの開発ログでした。猛者たちが作ったサービスを使った方が質は高いですが、自分でもやってみることでそのすごさがより実感します。そして使いこなしている人は凄いですが、これを作った人は、私には理解できないレベルです。
日進月歩なAI業界は見ていてエネルギーを感じるし楽しいです。
