【小ネタ】動的に生成されたグラフ画像を Web版の ChatGPT上で表示させるお試し

## はじめに
この記事の内容は、「動的に生成されたグラフ画像を、Web版の ChatGPT上で表示させる」というもので、具体的には以下の画像のとおりです。
（思いついたからやってみた！、という内容のものです）

https://twitter.com/youtoy/status/1642510286560313344

該当部分のみピックアップすると、こんな感じです。
![グラフの画像1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/64421ff6-2c6f-85d7-a263-fd328185f512.jpeg)

![グラフの画像2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/12744473-f17b-1e72-9593-78f91a5480dd.jpeg)

まず、ツイートした画像の内容について、軽く補足します。

### ツイート内の画像の補足
上記のツイートの画像は、Web版の ChatGPT（GPT-4版、GPT-3.5版のそれぞれを利用）で、「[Image Charts](https://www.image-charts.com/)」というサービスを用いて動的に生成した、折れ線画像のグラフをページ上で表示させています。

その際、折れ線グラフで表示させるグラフの元の数値は、ChatGPT に適当な値を 12個用意してもらっています。そして、その 12個の数値を使って動的に生成されたグラフ画像が、Web版の ChatGPT の画面上で Markdown によって表示されています（※詳細は後述）。

### 今回のお試し前についての補足
今回の内容の詳細を書いていく前に、このお試しを行うに到った経緯を、軽く書いておこうと思います。

:::note info
もし、今回用いているプロンプトだけ見たい等という方は、補足はとばして[「本編」の部分](https://qiita.com/youtoy/items/f319ebe33583077d022d#%E6%9C%AC%E7%B7%A8)からご覧ください。
:::

#### Markdown記法を使った画像表示に関する情報
Web版の ChatGPT では、Markdown記法を使うことで画像を表示させることができます。その話を、自分は以下の記事を見て知りました。

●chatGPTからイメージを送らせる方法
　https://zenn.dev/the_exile/articles/fec77cdbfc5fc4
![ChatGPT上で画像表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c2886c9a-288b-271d-266f-6b60e3dc1166.png)

#### 自前で用意した画像群の呼び出しに関する情報
その後、以下の記事を見かけました。
ざっと内容を見てみると、Web版の ChatGPT の画面上で、ノベルゲームとして進行する内容にある程度合わせた、キャラクター＋背景の画像表示を行っているようでした。

●画像付きのノベルゲームを遊べるプロンプトを作ったら臨場感が溢れすぎた話｜ちゅーりん｜note
　https://note.com/churin_1116/n/n1e3697c9db7f

そして、上記の記事で使われているプロンプトなどを見てみると、「特定の名称にしたフォルダ・ファイルの画像群を自前のサーバーに置いて」、それを選択的に呼び出している仕組みのようでした（サーバーに置いた画像は、画像生成AI を活用して、事前に準備されているようでした）。

選択的に呼び出しているという部分は、Web版の ChatGPT で用いられているプロンプトの以下の部分（※以下に抜粋したもの）が該当しているようです。
※ 以下で「。。。【省略】」と書いた部分は、元の内容を一部省略しています

> \## 画像の生成制約
> expressions: normal, 。。。【省略】
> backgrounds: ancient-temple1, 。。。【省略】
> のうち、expressionsの中からその時の少女の感情に最も近い単語を１つ、backgroundの中から少女がいそうな場所に最も近い単語を１つ取り出して、
> \!\[image](https://churin-stock.com/media/setting1/{backgrounds}/{expressions}.png)
> に入れて
> \!\[image](https://churin-stock.com/media/setting1/forest1/smile.png)
> といったような文字列を作ってください。ただし、コードではなくマークダウン形式で出力し、画像として表示して下さい。

これを見ていて、ふと「URL からパラメータを指定して、動的にグラフなどの画像生成ができるサービスを使えば、自前で生成した画像を事前に用意しなくても、動的に生成された画像を表示させることができそうかな」と思い、今回の内容を試してみました。

## 本編
今回、上に書いた流れがあって、それで冒頭の「Web版 ChatGPT の画面内で、動的に生成されたグラフ画像を表示する」ということを軽く試してみました。その内容の詳細について、書いていきます。

### ツイートで用いていたプロンプト
冒頭に掲載していたツイートのプロンプトは以下のとおりです。

```text:用いたプロンプト
適当に作成した1月から12月までの、毎月の平均気温を想定した数値12個を使って、以下を出力してください。

## 出力に使うURLの形式
以下のt:以降の3つの数字は、数値12個に置きかえる
https://image-charts.com/chart?cht=ls&chs=400x400&chd=t:60,30,10

## 出力の指定
![image](【上記をベースにしたURL】) という形式で、コードではなくマークダウン形式で出力し、画像として表示
```

このプロンプトは、「いろいろ試した中で、GPT-4版・GPT-3.5版の両方でグラフ画像までの表示が行われたもの」です（この前には、例えば GPT-4版のほうではグラフ画像を出してくれないもの等もありました）。

:::note info
試行回数が少ないので、いつもうまくいくかどうかまでは、完全に検証はしきれてないです...
:::

#### 出力指定に関する補足
上記のプロンプトの「出力の指定」の部分は、過去に別の方も記事に書いていたりする「Markdown を用いた画像表示」に該当します。

その前段の部分が、今回のお試しのメインにあたる「動的な画像生成」の部分です。

#### グラフ画像生成
グラフ画像の生成には、「[Image Charts](https://www.image-charts.com/)」というサービスを用いていて、そのサービスは以下の記事で知りました。

●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` を入力してアクセスすると、以下のような折れ線グラフが確認できると思います。
![折れ線グラフ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e7b23916-69a9-bae1-a683-db017ca2eea0.png)

このベースとなる URL を指定しつつ、それと合わせて「3つの値でなく 12個の値を使うようにする」という指定をプロンプトに含めました。

あとは、グラフに用いる数値を適当に生成するような指示も含めたりして、冒頭のツイートにあるような結果を得ることができました。

:::note info
ちなみに、Googleさんが提供していた URLからグラフ画像を生成できるものも試したりはしたのですが、動作はしたものの、[ずいぶん前から非推奨・停止とかになってるっぽい？](https://developers.google.com/chart/image?hl=ja)
![Googleさんが提供しているもの](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d6a5e16d-e97c-18f6-d3c6-6ebba26d92c5.png)
:::

## 余談
以下、今回のお試しに関する余談をいくつか書いてみます。

### 過去の東京都の毎月の平均気温を使おうとした話
上記を試す中で、当初は「東京都の2020年の1月から12月までの、毎月の平均気温」という内容を指定してみたりもしました。

その中で、こんな出力が得られていたという話を掲載してみます。

#### データがない？
GPT-3.5版で、「まずは数値データを羅列してもらう ⇒ その後、グラフ化の指示」という流れを試そうとして、 `東京都の2020年の1月から12月までの、毎月の平均気温は？` という内容を入力してみた時に、なぜか以下のような返答が返ってきました。
![データがない？](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0eb89ac1-6932-ad6c-dfe6-11fcc3562bc5.png)
「申し訳ありませんが、私は2021年9月までの知識しか持っていません。」という文章で始まっていますが、「それなら、データはあるのでは？」と思う流れのものでした。

#### 数値はどこから出てきたもの？
上記は、単に確率論的にこの文章が作られて出力された感じだろう、と思って、続きで再度同じ入力を試してみたところ、以下のような返答が返ってきました。

「気象庁のデータに基づいた数値です」と出てきましたが...
![気象庁のデータに基づく？](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5a688c1b-a832-3729-27d2-bf7bf2c740c0.png)

本当に、「学習データ中の気象庁のデータから出されたものなのか？」という疑問があったので、[気象庁のページ](https://www.data.jma.go.jp/obd/stats/etrn/view/monthly_s1.php?prec_no=44&block_no=47662&year=2020&month=&day=&view=a2)を確認してみました。どうも、気象庁のデータの数値から出された値ではなさそうな感じでした。
![気象庁のデータ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3742e628-7a48-2947-514f-528d8bf664e4.png)

上記 2つは、想定される動作ではあったのですが、こんなことがあったというメモの意味で、余談として記載してみました。

#### GPT-4版で試した時の途中経過
上記の「東京都の2020年の1月から12月までの、毎月の平均気温」という指定を、GPT-4版でも何度も試してみてました。

GPT-4版のほうは、自分が試したプロンプトでは、「気象庁のデータは、そちらで取得してあてはめてください」＋「もし仮の数値があったとしたら...」というような内容になりました。
![GPT-4版での返答の冒頭](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/074d1288-6a3d-d580-1aba-8dab73755b32.png)

それだけならまだ良かったのですが、その後の画像出力の部分で、なぜか本文に直接画像が出る形では出力をしてくれませんでした（GPT-3.5版のほうだと、この後に続けて、画像が表示されるやり方での出力が出てきてたのですが...）。
![GPT-4版の画像表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c4d80972-7325-30ee-4d8d-85423db477f7.png)

以下は、再度「New chat」から新たに試して、やはり「数値は仮のものが出されて、画像表示は行われない」という挙動になったものです（※その中の 2つ）。
![GPT-4版での再度のお試し](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/810ee16b-32af-fa03-7956-6f347690c4ad.png)

![GPT-4版での再度のお試し2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ea374126-4de2-5c34-e5ba-2abccc52f435.png)

プロンプトの指定を工夫すれば良い話なのかなど、自分ではそのあたりは判断ができず、プロンプトを変えて試して、冒頭の掲載していたツイートの内容を最終的に掲載用に用いることにしました。

## その他
今回の内容は小ネタですが、Qiita の[「ChatGPTなどの活用方法を発信しよう！」のキャンペーン](https://qiita.com/official-events/b80ebe828fa453edf260)向けのタグ[「記事投稿キャンペーン_ChatGPT」](https://qiita.com/tags/%e8%a8%98%e4%ba%8b%e6%8a%95%e7%a8%bf%e3%82%ad%e3%83%a3%e3%83%b3%e3%83%9a%e3%83%bc%e3%83%b3_chatgpt)をつけてみました。