パーマ型からファッション提案！『Fashion Advisor for Men's perm』 #TeachableMachine #ChatGPT #JavaScript

【当記事で得られる知識】
・Teachable Machineで作ったモデルを使用したml5.jsでの推定方法
・JavaScriptでChatGPTとのAPI連携方法
（おまけ：CSSでの装飾）

Fashion Advisor for Men's perm

何パーマ？

筆者は30歳半ば手前にしてパーマをかけ始めました。
元々は興味で始めたことでしたが、湿気や寝癖を以前より気にならなくなり、楽だなぁーといった感想です。
しかし問題は別にあり、パーマのスタイルは美容師さんに任せてしまうので、何パーマをしてもらったのか分からないのです。なんちゃらパーマというものが多数あり、私には理解しきれず・・・

似合うファッションは？

ファッション雑誌を手に取るのはご無沙汰になっているものの、髪型にあったファッションを知りたいという漠然とした興味は持っていて、誰かに教えて欲しいと思っていました。

⇒　この両方を一気に解決してくれるWebアプリを作成しました！
パーマを自動判定し、その髪型に似合うファッション提案までをワンストップに、ボタンクリックのみで結果を提供します。

Demo動画

Fashion Advisor for Men’s perm
DEMO動画
|#Qiita #JavaScript #TeachableMachine #ml5js #chatGPT pic.twitter.com/oMLrTCRFGn

— 焼鳥 (@Ichiros_malt) June 5, 2023

機能

パーマ判定

各種メンズパーマをTeachable Machineに学習させてモデルを作成します。
そのモデルをml5.jsで作成した学習モデルを読み込み、カメラ画像から推論された結果（パーマのスタイル）を返値として受け取ります。
（↓先人の知恵↓）　※参考部分：Teachable Machineでの学習方法、ml5.jsで作成した学習モデルを読込部分

ファッション提案

パーマ判定で得た結果（パーマのスタイル）をChatGPTに渡すセンテンスに組み込みます。
JavaScriptからaxios.jsを利用してChatGPTとAPI連携します。
ChatGPTから得られた結果（ファッション提案）をブラウザ上に反映します。
（↓先人の知恵↓）　※参考部分：ChatGPTとのAPI連携部分

CodePen（ソース）

JS補足
・start()
カメラからの映像ストリームの取得、学習モデルの読込、パーマの推論（0.5秒おきに再分析）のロジックを実装
・getResponse()
ChatGPTとのAPI連携、結果（提案内容）をブラウザ表示のロジックを実装
API_KEYは発行のうえ、設定してください。

See the Pen PermanentAnalyse by Ichiros_malt (@Ichiros_malt) on CodePen.

使用した感想

提案されたファッションの一例を以下に載せます。
これが正しいファッションなのかは私には判断できず・・・。
課題として見えてきたものは、季節や天気をパラメタに入れないと季節感が伴わない提案になり、身長やスタイルのパラメタを追加しないと自身に似合った提案にならないと感じました。
また、パーマ判定では、髪型は一定でも向きやしぐさで判定が目まぐるしく変わってしまうため、学習モデルの精度向上も課題と認識しました。

スパイラルパーマ

スパイラルパーマのヘアスタイルは、個性的で派手な印象を与えることがあるため、服装はバランスを考える必要があります。以下は、スパイラルパーマの男性におすすめの服装アイテムです。
1. シンプルなTシャツやシャツに、デニムパンツやチノパンツを合わせる。
2. カジュアルなスポーツウェアを取り入れる。スウェットパンツやスニーカーがおすすめです。
3. ジャケットやコートを羽織ることで、スパイラルパーマのヘアスタイルの個性を引き立てつつ、大人っぽい印象を与えます。
4. アクセサリーを取り入れることで、スパイラルパーマのヘアスタイルにマッチしたスタイリングに仕上がります。例えば、大きめのネックレスやブレスレットを身に着けると良いでしょう。
以上のアイテムを組み合わせることで、スパイラルパーマの男性に似合うファッションスタイルを提案できます。ただし、個人の好みや体型、場所によってスタイリングは異なるため、お客様に合ったスタイルを提案することが大切です。

ツイストパーマ

ツイストパーマのヘアスタイルをしている男性の場合、カジュアルでスポーティーな服装が似合います。 以下は、ツイストパーマのヘアスタイルに合う服装の提案です。
1.デニムジャケットとTシャツ
デニムジャケットとTシャツの組み合わせは、カジュアルでスタイリッシュな印象を与えます。ツイストパーマのヘアスタイルに合わせて、カラフルなTシャツを選んでみるのも良いでしょう。
2. スウェットパンツとスニーカー
スウェットパンツとスニーカーの組み合わせは、スポーティーな印象を与えます。ツイストパーマのヘアスタイルに合わせて、カラフルなスニーカーを選んでみるのも良いでしょう。
3. ボンバージャケットとチノパンツ
ボンバージャケットとチノパンツの組み合わせは、カジュアルでスタイリッシュな印象を与えます。ツイストパーマのヘアスタイルに合わせて、ボンバージャケットをカラフルなものにすると、よりオシャレな印象を与えます。
以上のように、ツイストパーマのヘアスタイルに合わせて、カジュアルでスポーティーな服装を選ぶと、よりオシャレな印象を与えることができます。

カルマパーマ

カルマパーマのヘアスタイルをしている男性には、モダンでエッジの効いたスタイルが似合います。以下は、提案する服装の例です。
1. スリムフィットのジーンズとタートルネックセーター：カジュアルでありながら、モダンな雰囲気を演出できます。
2. ブルーのスーツと白いシャツ：クラシックなスタイルですが、カルマパーマのヘアスタイルとの相性がよく、>エレガントな印象を与えます。
3. レザージャケットとボタンダウンシャツ：カジュアルでありながら、スタイリッシュな印象を与えます。
4. チェック柄のシャツとチノパンツ：カジュアルな中にも、洗練された印象を与えます。
5. ハイカットスニーカーとスキニージーンズ：カジュアルでありながら、モダンな印象を与えます。
以上のように、カルマパーマのヘアスタイルをしている男性には、モダンかつエッジの効いたスタイルが似合います。

プードルパーマ

プードルパーマのヘアスタイルは、レトロでクラシックな雰囲気があります。その雰囲気に合わせたファッションを提案します。
1. テーラードジャケット
プードルパーマの男性には、テーラードジャケットが似合います。クラシックな雰囲気があり、シャープな印象を与えます。ネイビーやグレーのテーラードジャケットを選ぶと良いでしょう。
2. スリムフィットパンツ
テーラードジャケットには、スリムフィットのパンツが合います。黒やグレー、ネイビーなど、シンプルな色味を選ぶと、クラシックな雰囲気が強調されます。
3. オックスフォードシューズ
テーラードジャケットには、オックスフォードシューズが似合います。ブラックやブラウンの革靴を選ぶと、クラシックな雰囲気が出ます。
4. タートルネックセーター
プードルパーマの男性には、タートルネックセーターが似合います。クラシックな印象を与える上に、保温性も高く、冬場のコーディネートにぴったりです。
5. ウールコート
最後に、ウールコートを羽織ると、クラシックな雰囲気が強調されます。ネイビーやチャコールグレーなど、シンプルな色味を選ぶと、よりクラシックな印象になります。
以上が、プードルパーマの男性に似合うファッションの提案です。

その他参考URL

装飾部分（CSS）
原色大辞典
[CSS] button要素のスタイルシート、最新テクニックを徹底解説