はじめに
生成系AIを使ったチャットアプリケーションを開発するにあたって、ユーザーに対してどのようなUIを提供するのが適切か検討することが多いと思います。
検討材料として本家となるOpenAIのChatGPTのUIをもとに実装することが多いので、ChatGPTのUIについて整理しました。
外観
ChatGPTのアプリの外観は以下の通り。

出力はストリーミングで応答されます。

サポート対象ファイル
原則全ファイルのアップロードが可能
UI上はアップロードファイルに制限はなく、どのファイルでもアップロード可能です。

ただし、下表の通り、ファイルの種類によってはLLMから正しい回答が得られないようになっています。
| ドキュメント | ◯ | |
|---|---|---|
| Html | ◯ | |
| Word | ◯ | |
| PowerPoint | ◯ | |
| Excel | ◯ | |
| 画像 | PNG | ◯ |
| JPEG | ◯ | |
| WEBP | ◯ | |
| GIF | ◯ | |
| SVG | ✕ | |
| アーカイブファイル | ZIP | ◯ |
| 実行ファイル | EXE | ✕ |
ドキュメントファイル
各種ドキュメントファイルのアップロードが可能です。
- PDF (.pdf)
- Html (.html)
- Word (.docx)
- PowerPoint (.pptx)
- Excel (.xlsx)

画像ファイル
サポートされているファイルは本件には明記なし。
Azure OpenAIの場合は画像ファイルに関しては、以下のファイルがサッカーされているとの記載あり。
- PNG (.png)
- JPEG (.jpeg and .jpg)
- WEBP (.webp)
- GIF (.gif).
SVGなどの上記以外のファイルはアップロードはできるが、LLMがファイル名をもとに推測した内容を回答するため、ファイルの中身と異なる内容を説明するというハルシネーションが発生してしまいます。

ZIPファイル
ZIPファイルをアップロードすると、ZIPファイルを展開して中身について回答してくれます。


Exeファイル
アップロードするとファイル名は認識していますが、中身を閲覧できないとう回答が返ってきます。

アイコンセット
OpenAIで使われている各種アイコンは以下の通りです。
![]()
おわりに
この記事では、ChatGPTのUIについてまとめました。
この記事が、生成系AIを開発されている方の参考になれば幸いです。