デザイナーの妻がパーソナルカラー診断を得意としている。 パーソナルカラーに関するWEBサイトを運用していて、自動でパーソナルカラー診断が できるアプリを作成することとなった。 問診アプリは作成していたが、ユーザーは写真を写すだけで自動で診断できるレベルを目指すこととなった。 精度が十分でなくプロトタイプの状態でペンディング中だがポートフォリオ目的に公開することにした。
※ 直感的に操作できるのでまずは上記リンク先から触ってみてください。
また、下記の設計情報ではAIを活用した設計書生成を実験している。
パーソナルカラー診断士に診断依頼するにはコストを伴う。また、診断士によってブレも生じる。 本アプリは写真から自動でパーソナルカラーを診断することでこれらの問題を解消する。
下記リンク先を参照
使用言語はJavascript。
- 機械学習モデルを活用して、写真のランドマークを摘出する。
- それぞれのマークについてRGBを解析する。
- 解析したRGBの結果と判別テーブルを照合し、パーソナルカラーを判別する。
機械学習モデルは公開されているものを活用させていただいている。
活用させていただいた機械学習モデル
本アプリは数年前に作成したが、全くドキュメントを残していなかった。 マニュアルで一から作成する気にはなれなかったので、AI活用に慣れることをモチベーションにChatGPT3.5を使って作成した。
やってみた感想としては、後から人が修正する前提で初期バージョン生成には良いと感じた。 もし、本物のプロジェクトで活用するとしたら、事前に十分に検証してどう活用するか、ドキュメントの品質レベルはどの 程度にするかよく検討するフェーズが必須だと思う。
まだ、もう少し時間がかかりそうだが、設計書よりもコードから作成した方が早い人が多い プロジェクトではAIが設計書を作るようになると感じた。
他のポートフォリオでも、 GoogleのVertex AIを使って同様の検証を試みた。
ChatGPT3.5でも概ね同じような結果であったが、ChatGPT3.5は継承のクラス図が出せなかった。 ※ 私の指示が良くなかった可能性もあります。
上記リンク先のクラス図はChatGPT3.5を活用し下記の手順で作成した。
- 下記"JSDOC形式のドキュメンテーション"をブラウザで開く。
- ブラウザで開いたクラス情報をコピー＆ペーストでChatGPT3.5のプロンプトに貼り付け。
- Mermaid形式で出力するようにAIに依頼。
- 生成されたMermaid形式のテキストを拡張子mdのファイルに保存+GithubにPush。
このクラス図はクラスの継承関係をマニュアルで修正したがほぼAIが出力した状態そのままである。
上記リンク先のJSDOCのドキュメントもChatGPT3.5を活用して作成した。 JavascriptのコードにJSDOCコメント付与をChatGPT3.5に指示してJSDOCコメント付きJavascriptコードを作成。 その後、jsdocコマンドでHTML形式のドキュメントを生成している。 完全にChatGPT3.5が生成した状態そのままである。