はじめに
この記事の内容は、「動的に生成されたグラフ画像を、Web版の ChatGPT上で表示させる」というもので、具体的には以下の画像のとおりです。
（思いついたからやってみた！、という内容のものです）
該当部分のみピックアップすると、こんな感じです。
まず、ツイートした画像の内容について、軽く補足します。
ツイート内の画像の補足
上記のツイートの画像は、Web版の ChatGPT（GPT-4版、GPT-3.5版のそれぞれを利用）で、「Image Charts」というサービスを用いて動的に生成した、折れ線画像のグラフをページ上で表示させています。
その際、折れ線グラフで表示させるグラフの元の数値は、ChatGPT に適当な値を 12個用意してもらっています。そして、その 12個の数値を使って動的に生成されたグラフ画像が、Web版の ChatGPT の画面上で Markdown によって表示されています（※詳細は後述）。
今回のお試し前についての補足
今回の内容の詳細を書いていく前に、このお試しを行うに到った経緯を、軽く書いておこうと思います。
もし、今回用いているプロンプトだけ見たい等という方は、補足はとばして「本編」の部分からご覧ください。
Markdown記法を使った画像表示に関する情報
Web版の ChatGPT では、Markdown記法を使うことで画像を表示させることができます。その話を、自分は以下の記事を見て知りました。
●chatGPTからイメージを送らせる方法
https://zenn.dev/the_exile/articles/fec77cdbfc5fc4
自前で用意した画像群の呼び出しに関する情報
その後、以下の記事を見かけました。
ざっと内容を見てみると、Web版の ChatGPT の画面上で、ノベルゲームとして進行する内容にある程度合わせた、キャラクター＋背景の画像表示を行っているようでした。
●画像付きのノベルゲームを遊べるプロンプトを作ったら臨場感が溢れすぎた話｜ちゅーりん｜note
https://note.com/churin_1116/n/n1e3697c9db7f
そして、上記の記事で使われているプロンプトなどを見てみると、「特定の名称にしたフォルダ・ファイルの画像群を自前のサーバーに置いて」、それを選択的に呼び出している仕組みのようでした（サーバーに置いた画像は、画像生成AI を活用して、事前に準備されているようでした）。
選択的に呼び出しているという部分は、Web版の ChatGPT で用いられているプロンプトの以下の部分（※以下に抜粋したもの）が該当しているようです。
※ 以下で「。。。【省略】」と書いた部分は、元の内容を一部省略しています
## 画像の生成制約
expressions: normal, 。。。【省略】
backgrounds: ancient-temple1, 。。。【省略】
のうち、expressionsの中からその時の少女の感情に最も近い単語を１つ、backgroundの中から少女がいそうな場所に最も近い単語を１つ取り出して、
に入れて
といったような文字列を作ってください。ただし、コードではなくマークダウン形式で出力し、画像として表示して下さい。
これを見ていて、ふと「URL からパラメータを指定して、動的にグラフなどの画像生成ができるサービスを使えば、自前で生成した画像を事前に用意しなくても、動的に生成された画像を表示させることができそうかな」と思い、今回の内容を試してみました。
本編
今回、上に書いた流れがあって、それで冒頭の「Web版 ChatGPT の画面内で、動的に生成されたグラフ画像を表示する」ということを軽く試してみました。その内容の詳細について、書いていきます。
ツイートで用いていたプロンプト
冒頭に掲載していたツイートのプロンプトは以下のとおりです。
適当に作成した1月から12月までの、毎月の平均気温を想定した数値12個を使って、以下を出力してください。
## 出力に使うURLの形式
以下のt:以降の3つの数字は、数値12個に置きかえる
https://image-charts.com/chart?cht=ls&chs=400x400&chd=t:60,30,10
## 出力の指定
 という形式で、コードではなくマークダウン形式で出力し、画像として表示
このプロンプトは、「いろいろ試した中で、GPT-4版・GPT-3.5版の両方でグラフ画像までの表示が行われたもの」です（この前には、例えば GPT-4版のほうではグラフ画像を出してくれないもの等もありました）。
試行回数が少ないので、いつもうまくいくかどうかまでは、完全に検証はしきれてないです...
出力指定に関する補足
上記のプロンプトの「出力の指定」の部分は、過去に別の方も記事に書いていたりする「Markdown を用いた画像表示」に該当します。
その前段の部分が、今回のお試しのメインにあたる「動的な画像生成」の部分です。
グラフ画像生成
グラフ画像の生成には、「Image Charts」というサービスを用いていて、そのサービスは以下の記事で知りました。
●URL1つであらゆるチャート・グラフを生成＆カスタマイズ可能な「Image-Charts」を使ってみた！ - paiza開発日誌
https://paiza.hatenablog.com/entry/2021/02/24/150000
プロンプトの中段で、 https://image-charts.com/chart?cht=ls&chs=400x400&chd=t:60,30,10 という内容を書いていますが、これは Image Charts を使って折れ線グラフを生成するための URL です。URL で「?」以降がグラフの仕様を決めている部分で、具体的には、以下のような意味になります。
- cht： グラフの種類の指定（折れ線グラフは「ls」）
- chs： 画像のサイズの指定
- chd： グラフに描画するデータ（指定した URL では、「60」・「30」・「10」の 3つの値）
実際に、ブラウザの URL欄に https://image-charts.com/chart?cht=ls&chs=400x400&chd=t:60,30,10 を入力してアクセスすると、以下のような折れ線グラフが確認できると思います。
このベースとなる URL を指定しつつ、それと合わせて「3つの値でなく 12個の値を使うようにする」という指定をプロンプトに含めました。
あとは、グラフに用いる数値を適当に生成するような指示も含めたりして、冒頭のツイートにあるような結果を得ることができました。
ちなみに、Googleさんが提供していた URLからグラフ画像を生成できるものも試したりはしたのですが、動作はしたものの、ずいぶん前から非推奨・停止とかになってるっぽい？
余談
以下、今回のお試しに関する余談をいくつか書いてみます。
過去の東京都の毎月の平均気温を使おうとした話
上記を試す中で、当初は「東京都の2020年の1月から12月までの、毎月の平均気温」という内容を指定してみたりもしました。
その中で、こんな出力が得られていたという話を掲載してみます。
データがない？
GPT-3.5版で、「まずは数値データを羅列してもらう ⇒ その後、グラフ化の指示」という流れを試そうとして、 東京都の2020年の1月から12月までの、毎月の平均気温は？ という内容を入力してみた時に、なぜか以下のような返答が返ってきました。
「申し訳ありませんが、私は2021年9月までの知識しか持っていません。」という文章で始まっていますが、「それなら、データはあるのでは？」と思う流れのものでした。
数値はどこから出てきたもの？
上記は、単に確率論的にこの文章が作られて出力された感じだろう、と思って、続きで再度同じ入力を試してみたところ、以下のような返答が返ってきました。
「気象庁のデータに基づいた数値です」と出てきましたが...
本当に、「学習データ中の気象庁のデータから出されたものなのか？」という疑問があったので、気象庁のページを確認してみました。どうも、気象庁のデータの数値から出された値ではなさそうな感じでした。
上記 2つは、想定される動作ではあったのですが、こんなことがあったというメモの意味で、余談として記載してみました。
GPT-4版で試した時の途中経過
上記の「東京都の2020年の1月から12月までの、毎月の平均気温」という指定を、GPT-4版でも何度も試してみてました。
GPT-4版のほうは、自分が試したプロンプトでは、「気象庁のデータは、そちらで取得してあてはめてください」＋「もし仮の数値があったとしたら...」というような内容になりました。
それだけならまだ良かったのですが、その後の画像出力の部分で、なぜか本文に直接画像が出る形では出力をしてくれませんでした（GPT-3.5版のほうだと、この後に続けて、画像が表示されるやり方での出力が出てきてたのですが...）。
以下は、再度「New chat」から新たに試して、やはり「数値は仮のものが出されて、画像表示は行われない」という挙動になったものです（※その中の 2つ）。
プロンプトの指定を工夫すれば良い話なのかなど、自分ではそのあたりは判断ができず、プロンプトを変えて試して、冒頭の掲載していたツイートの内容を最終的に掲載用に用いることにしました。
その他
今回の内容は小ネタですが、Qiita の「ChatGPTなどの活用方法を発信しよう！」のキャンペーン向けのタグ「記事投稿キャンペーン_ChatGPT」をつけてみました。