AI (ChatGPT) を用いたグラフ作成はなぜ難しいか

※この記事は考察系の記事です。ChatGPTがどのような思考プロセスでuserの要求に答えているか, 不得意な作業 (グラフ作成) をどのようにしたら作成できるか本人 (GPT) と対話して作成法を聞き出したというものです。
そういう訳であまり実用的な記事ではないのでご了承下さい。  

0. はじめに

※ 2023/7のバージョンアップで劇的にグラフが作りやすくなりました。

Google Chart でグラフ作成する場合のサンプルコード集はこちらです

1. スライド

100枚あります　興味があればどうぞ

2. AI (ChatGPT) でグラフ作成が難しい理由

2.1 テキストベースのモデルのため

ChatGPTは自然言語処理タスクに特化して開発されたAIであり, 元々はテキストデータの処理に適したモデルとして設計されました。そのため, 数値計算や視覚データの処理に関するトレーニングを受けておらず, そのようなタスクに対する性能は低い可能性があります。基本的にはテキストベースでしかやりとりできなということです。

2.2　ビジュアル表現の欠如

GPTはテキストを解釈し, テキストとして回答を生成しますが, ビジュアル表現（グラフや画像など）を直接生成する能力はありません。これは, モデルのアーキテクチャと訓練データの制約に起因します。ChatGPTは外部API, Google chart, python+matplotlibなどによる画像の可視化を推奨しています。

2.3　直感的なフィードバックの欠如

GPTはユーザーが提示する情報に基づいて回答を生成しますが, 実際にグラフを見ることができないため, グラフの品質や適切さについて直感的なフィードバックを提供することができません。ユーザー (こちら) 側が生成されたグラフの問題点を抽出し改善案を考える必要がある

2.4　デザイン性

AIは人間の美的センスを持ち合わせていません。人間の視覚的な感覚や好みをAIが理解することは難しいため、こちらで色をはじめデザインを設定する必要があります。

それでも無理を承知にAIにグラフ作成を依頼します。将来的にはテキストファイルから, 全自動化ができるはずなので?! そこでGPTにどうすればうまく作成できるか聞いてみました。

3. グラフ作成のこつ4点

3.1 グラフ作成ツールの利用

Google Charts, Chart.js, D3.jsなどの専門的なグラフ作成ツールをお勧めします。これらのツールは, データの視覚化に特化しており, 多様なグラフタイプやカスタマイズオプションを提供しています。

3.2 コードサンプルの利用

GPTに具体的なコードサンプルを提示し, それに基づいて新しいグラフを生成するように指示します。サンプルは, データ構造, グラフの種類, スタイル, 設定などを含むものであるべきです.　後述しますがこの手法は非常に強力で将来大化けする可能性があります。

3.3 クリアで明確な指示 (プロンプト)

グラフの目的, データセット, グラフタイプ, スタイルなど, 必要な情報を明確かつ具体的に伝えることで, より正確な結果を得ることができます。プロンプトを明確, 詳細に伝えることは重要です。しかし, これも後述しますが, 初回作成のみに重要になってきます。

3.4 モデルとの継続的な対話

GPTとの対話を通じて, 調整や改善を逐次行い, 最終的に求めるグラフに近づけていくことができます。一度で完璧なグラフを返すことは稀なので何度も作り直しすることが必要です。

良いプロンプトとはどんなものかChat GPTに聞いてみました. 

4. グラフ作成のよいプロンプトとは (主に初回作成時)

プロンプトには以下の4点が詳細, 明確, 具体的に含まれていることが重要です。

4.1 グラフの目的

何を示すためにグラフを作成するのか明確な目的.　
例) 入院してからの検査項目の推移を日毎に示す, 入院後経過を作成したい

4.2 データセット

使用するデータセットの構造や, どの列がどの軸に対応するかなど, データに関する情報を提供する.

例)
x軸　day
y軸 CRP [mg/dL]
day CRP
1 10.2
2 8.0
3
4 2.3

4.3 グラフタイプ

折れ線グラフ, 棒グラフ, 円グラフなど, どのタイプのグラフを作成したいのか明示する. 

4.4 スタイルやカスタマイズ

グラフの色, 線の太さ, 軸のラベルなど, カスタマイズに関する詳細情報

5. 問題点, 課題と対策

・テキストベースであり, こちらのプロンプトに対して確率的, 統計的手法で返答する.

・視覚情報を扱うことができないため適切なフィードバックができない.

通常　( グラフではない) のテキストを使ったやり取りではこちらの質問があいまいであれば確率的手法でそれなりの答えを出してくれます。AIの返答が望んだ答えではない場合, 再度, 聞き直し訂正することができます。しかし, グラフ作成の場合, 直接画像でやりとりすることができないので的確なフィードバックが返ってきません。

そのため1度で理解できる位（=フィードバックが不要）で, AI側が解釈の余地のないような非常に詳細なプロンプトを提示する必要があります。

6. 実際のグラフ作成

Google Chartsを用いてグラフ作成をします。

6.1 作図 (初回)

1軸の入院後経過のグラフ　横軸は入院病日 (day), 縦軸はCRP [mg/dL]
以上の理由から初回は非常に詳細なプロンプトが必要です。

グーグルチャートで折れ線(curve type :none)グラフに描画するためのhtmlコードを作成してください。
欠損値は補間してください(interpolateNulls: true。)
CRPは円 (pointshape:circle, size7)のマーカー。
グラフエリア内のグリッドは縦横(hAxis, vAxis)とも非表示。 ただしy=0(baseline color)は透明ではなく黒。
横軸の目盛りは1区切り(ticksオプション[1, 2, 3]などで設定)。

色の設定：
グラフ, グラフマーカー, 軸label, 軸タイトル全て 鮮やかなマゼンタピンク(#FF0064)

幅900px 　高さ500px
title: Clinical Course
横軸label：day
Y軸label: CRP [mg/dL]　

day CRP 
1	10.2 
2	8.0   
3
4	2.3  
5
6	1.2 
7
8	0.2 

できあがったコード↓です

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">
		google.charts.load('current', {'packages':['corechart']});
		google.charts.setOnLoadCallback(drawChart);

		function drawChart() {
			var data = google.visualization.arrayToDataTable([
				['day', 'CRP'],
				[1, 10.2],
				[2, 8.0],
				[3, null],
				[4, 2.3],
				[5, null],
				[6, 1.2],
				[7, null],
				[8, 0.2]
			]);

			var options = {
				curveType: 'none',
				interpolateNulls: true,
				pointShape: 'circle',
				pointSize: 7,
				backgroundColor: 'transparent',
				hAxis: {
					title: 'day',
					textStyle: {color: '#FF0064'},
					gridlines: {color: 'transparent'},
					ticks: [1, 2, 3, 4, 5, 6, 7, 8],
					textStyle: {color: '#000'}
				},
				vAxis: {
					title: 'CRP [mg/dL]',
					textStyle: {color: '#FF0064'},
					baselineColor: '#000',
					gridlines: {color: 'transparent'}
				},
				colors: ['#FF0064'],
				legend: 'none',
				width: 900,
				height: 500
			};

			var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
			chart.draw(data, options);
		}
	</script>
</head>
<body>
	<div id="chart_div"></div>
</body>
</html>

メモ帳で開き　拡張子を〇〇.html  ファイルの種類を「すべてのファイル」で保存します。

色を付け忘れたり　人間みたいな マイナーミス が必発するので一度で完成することは稀です。
1-2回のやり取りで上のグラフが完成します。

次に2軸です

横軸にday 縦軸にCRP, WBCで同じようなグラフを作成してもらいます。プロンプトが結構多いです。

グーグルチャートで2軸の折れ線(curve type :none)グラフに描画するためのhtmlコードを作成してください。
欠損値は補間してください(interpolateNulls: true。)
軸1左がCRPと軸2右がWBC(vAxesオプションで左側と右側の軸を定義。seriesオプションでデータ系列にどちらの軸を使用するかを定義。
データ系列が 0 の場合は左側の軸を、データ系列が 1 の場合は右側の軸を使用)
vaxesオプションを用いてそれぞれ軸のタイトル, 色, マーカーを設定。
CRPは円 (pointshape:circle, size7)、WBCは四角(pointshape:square, size7)のマーカー。
グラフエリア内のグリッドは縦横(hAxis, vAxis)とも非表示(Y1軸, Y2軸それぞれのgridlinesプロパティにcolor: 'transparentを設定)。 ただしy=0(baseline color)は透明ではなく黒。
横軸の目盛りは1区切り(ticksオプション[1, 2, 3]などで設定)。

色の設定：
軸1 CRP:グラフ, グラフマーカー, 軸label, 軸タイトル全て 鮮やかなマゼンタピンク(#FF0064)
軸2 WBC:グラフ, グラフマーカー, 軸label, 軸タイトル全て青(#0000FF)

幅900px 　高さ500px
title: Clinical Course
横軸label：day
Y軸1 label左: CRP [mg/dL]　
Y軸2 label右:WBC [/uL]

day CRP WBC
1	10.2 10200
2	8.0   8900
3
4	2.3  7700
5
6	1.2 5500
7
8	0.2 4230
9
10	0.0 5000

1-2回やり直してもらったら下の図ができます

6.2　作図 (2回目以降)

一度templateを作ってもらえば AIの本領発揮です。次回からは雑なプロンプトで正確かつ迅速に作成してもらえます。
例えば, 同じchat欄なら「さっきのsampleで肝機能, 入院日数8日に変えて」で通じます。

google chartで横軸day, 縦軸 TBil, ASTの2軸折れ線グラフを以前のサンプルコードを参考にして作成してください。
色はT Bil フォレストグリーン(#339966), AST コーラルレッド(#FF3C3C)に変更して下さい。

day T-Bil [mg/dL] AST [IU/L]
1 12.0 350 
2
3 10.5 234
4
5 4.3 120
6
7
8 1.3 55

肝機能の推移に変更されました。
他にも「3変数CRP, AST, ALTに変更して下さい。データセットは以下の通り…」でほぼ通じます

7 モデルについて

詳細なプロンプトでないとこのようなグラフ作成はできません。裏を返せば, GPTに解釈をしてもらう必要がなく, そういう意味ではGPT4である必要はありません。スピードの速いGPT 3.5に軍配が上がります。

8 実用性

初回の作図はプロンプトを作成し, try and errorを試す作業時間を考えるとおすすめしません　が　すでにある程度の精度のsample codeがある場合はそれを利用することで 短時間で作図可能です。
特に医療業界, 特に医師の使うグラフはある程度の型が決まっているため
Google charts, Python のsample codeが開発され, 共有されると効率が上がると思われます。