LLM-Json-Reader

LLM-Json-Readerは、JSONおよびJSONL形式のデータセットを閲覧用です。
大規模言語モデル（LLM）の開発に使用されるデータセット視覚化のためのアプリです。

開発にあたり、参考にさせて頂いたサイト様
Next.js 14 + TypeScript + Tailwind + ESLint + Prettier 環境構築手順

読込データセットの対応状況

• llm-jp-evalのtuningデータ
• Mt-bench

llm-jp-eval

複数のデータセットを横断して日本語の大規模言語モデルを自動評価するもの。 【チューニング共通フォーマット】を閲覧できます。
llm-jp-eval (github)
上記リンク先のダウンロード方法でダウンロードしたものを、データ読込として選択ください。
例: llm-jp-eval/dataset_dir/(version)/tuning/dev/train/chabsa.json v1.2.0にて確認済み

フォーマット例

[
    {
        "ID": "jemhopqa-0",
        "instruction": "質問を入力とし、回答を出力してください。回答の他には何も含めないことを厳守してください。",
        "input": "質問：クイーンとビートルズはどちらもイギリス出身のバンドですか？",
        "output": "YES",
        "text": "<INSTRUCTION|LLM-jp>質問を入力とし、回答を出力してください。回答の他には何も含めないことを厳守してく>ださい。\n<INPUT|LLM-jp>質問：クイーンとビートルズはどちらもイギリス出身のバンドですか？\n<OUTPUT|LLM-jp>YES"
    },
    {
        "ID": "jemhopqa-1",
        "instruction": "質問を入力とし、回答を出力してください。回答の他には何も含めないことを厳守してください。",
        "input": "質問：東京都中央区と中野区、2005年時点での昼間人口が多いのは中央区ですか？",
        "output": "YES",
        "text": "<INSTRUCTION|LLM-jp>質問を入力とし、回答を出力してください。回答の他には何も含めないことを厳守してく>ださい。\n<INPUT|LLM-jp>質問：東京都中央区と中野区、2005年時点での昼間人口が多いのは中央区ですか？\n<OUTPUT|LLM-jp>YES"
    },
    ...
]

MT-bench

対応予定

アプリ作動に必要となる事前インストール物

Node.js (version20.9.0を使用)

Node.jsは、ブラウザ外でJavaScriptを実行するためのプラットフォームです。これにより、JavaScriptを使ってサーバーサイドのアプリケーションを開発することが可能になります。
Node.jsを使用するにあたっては、nvmなどのNode.jsバージョン管理ツールを使用することを推奨します。
pythonで言うところのpyenv（複数のpythonバージョンを切り替えて使用できる技術）。

pnpm

pnpmは「performant npm」という意味で、npmやyarnと並ぶJavaScriptのパッケージマネージャーです。
yarnを使用する予定でしたが、インストールの際の高速化、容量の効率化のため採用してあります。

インストール（使用方法）

1. リポジトリをクローンします。（自分のパソコンにダウンロードするようなもの）

git clone https://github.com/yourusername/llm-json-reader.git

2. 必要な依存関係をインストールするために、フォルダ内に移動し、
   インストールのためのコマンドを入力します。

cd llm-json-reader

pnpm install

（※ フォルダに移動するまえにpnpm installを実行してしまいがち。必ず対象のフォルダに移動してください。
やってしまった場合は、削除してからやり直すのが一番簡単。
又は、出来上がったファイルをllm-json-readerフォルダ内に移動。）

3. 開発サーバーを起動します。

pnpm dev

4. ブラウザでhttp://localhost:3000を開きます。
   

5. ファイル読込ボタンから、読み込みたいJSONデータなどを選択してください。
   

6. 対応データ順次更新中。

使用技術

• Next.js (App Router：使ってみたかった)
• TypeScript（型安全：アプリのバグを防ぐための仕組み）
• Tailwind CSS（デザイン：デザイン）
• Recoil（状態管理：変数をうまく使う）
• ESLint（静的検証ツール：コードのエラー検出）
• Prettier（コードフォーマット：コード整形）
• pnpm（パッケージ管理：アプリに使うライブラリーの管理）
• gulp（タスクランナー：コンパイルや圧縮などの自動化）

後日追加予定（必要になれば

• ライトモード、ダークモードのほかにカスタムテーマ（やっぱり不必要に感じたため、一度削除）
• テキストの長さに合わせた秒数表示モード（微調整中）
• SQLite (将来的にはPostgreSQLへの移行か併用を想定)
• Storybook

Features (追加機能)

• XML形式対応
• データベースと連携し、何らかの機能
• アプリ使用者のTTSと連携した音声出力モード
• MQTT、又はgRPCを使用したスマホからの操作

AIからの機能要望リスト（検討中

1. JSONおよびJSONL形式のファイルの読み込みと表示
2. 複数のJSONファイルの統合表示
3. JSONデータのCSVおよびExcelファイルへのエクスポート
4. JSONデータのグラフィカルな可視化（棒グラフ、円グラフ、折れ線グラフなど）
5. JSONデータ内の特定のキーワード検索
6. JSONデータのソート（特定のキーを基準に昇順または降順）
7. JSONデータのフィルタリング（特定の条件を満たすデータのみ表示）
8. JSONデータの編集（値の変更、要素の追加・削除など）
9. JSONデータのバリデーション（データの整合性チェック）
10. JSONデータのバージョン管理（変更履歴の追跡、特定のバージョンへの復元など）
11. ユーザー認証とアクセス制御（ログイン、ロール別のアクセス制限など）

貢献

"プルリクエストは歓迎します。
まずIssueを開いて変更内容について議論してください。"

Githubの共同開発経験が不十分なため、どのように他人との更新をしてゆけばよいかなどの経験がありません。
要望はIssueにて頂き、暖かく見守って頂ければ幸いです。

ライセンス

MIT

閲覧用のデータセットは、データ元のライセンスに準じます。