20247/24無料：ChatGPTによるAIファッション提案システム(4o-mini)

AIファッション提案システムです。（中の仕組み：ChatGPT 4o-mini）

年齢・性別・季節・相手に与えたい印象を入力・送信すると、5秒ほどであなたにあったおしゃれなコーディネートが提案されます。

[fashion_coordinator]

使用する例

• 「清潔感のあるデート用のコーデ」を知りたいとき
• 「どう見ても犬が大好きだと伝わる服装」を知りたいとき
• 「どう見てもお金持ちの社長だと伝わるファッション」を知りたいとき
• 「面接に絶対に落ちるスーツスタイル」を知りたいとき

※デフォルトでは「ユーザーの希望を入れつつ、清潔感あるおしゃれな服装」が生成される。

悪い例・極端な例を知りたい際は「最大限実現」オプションを選択して生成すること。

作った理由

ChatGPTの生成練習。

作り方

以下をいい感じにChatGPTに伝えて生成し、WPに貼り付けて、適宜カスタムする。

### 仕様書: My Fashion Coordinator

#### プラグイン概要
- **名前**: My Fashion Coordinator
- **説明**: ユーザーの年齢、性別、季節、印象、希望に基づいてファッションコーディネートを提案するWordPressプラグイン。
- **バージョン**: 1.0
- **作者**: Your Name

#### 機能要件
1. **管理画面機能**:
   - OpenAIのAPIキーを設定するフィールド。
   - プロンプトテンプレートを設定するフィールド。

2. **フロントエンド機能**:
   - ユーザーが以下の情報を入力できるフォームを表示する:
     - 年齢（numberフィールド）
     - 性別（ドロップダウン）
     - 今の季節（1〜12月のnumberフィールド）
     - 相手に与えたい印象（textフィールド）
     - スタイルの希望（ラジオボタン、「希望を取り入れつつ、おしゃれにコーデ」および「希望を最大限実現」）

3. **フォームの表示方法**:
   - ショートコード `[fashion_coordinator]` を使用して任意のページに埋め込める。

4. **APIリクエスト**:
   - フォーム送信時にAJAXを使用してOpenAIのAPIにリクエストを送信。
   - ユーザーの入力情報をプロンプトに埋め込み、JSON形式で結果を返すようにする。

5. **APIレスポンスの表示方法**:
   - JSON形式で返された結果をテーブル形式で表示。

#### フォームのフィールド
- **年齢**:
  - タグ: `<input type="number" id="age" name="age" required>`
  - 説明: ユーザーの年齢を入力するフィールド。
- **性別**:
  - タグ: `<select id="gender" name="gender" required>`
  - オプション: 男性、女性
  - 説明: ユーザーの性別を選択するフィールド。
- **今の季節**:
  - タグ: `<input type="number" id="season" name="season" min="1" max="12" required>`
  - 説明: 現在の季節を1〜12月で入力するフィールド。
- **相手に与えたい印象**:
  - タグ: `<input type="text" id="impression" name="impression" required>`
  - 説明: ユーザーが相手に与えたい印象を入力するフィールド。
- **スタイルの希望**:
  - タグ: `<input type="radio" name="wish" value="希望を取り入れつつ、おしゃれにコーデ" required>`、`<input type="radio" name="wish" value="希望を最大限実現" required>`
  - 説明: ユーザーがスタイルの希望を選択するラジオボタン。

#### プロンプトテンプレート
- テンプレート例:
  ```
  依頼主の年齢: {age}, 性別: {gender}, 季節: {season}月, 印象: {impression}。依頼主・季節感にあった服を客観的に見ておしゃれにコーディネートしろ。依頼主にファッションコーディネートを日本語で提案しろ。現実に存在しそうなアイテムに限る。依頼主は相手に「{impression}」の印象を与えたいということ。依頼主の{wish}しろ。各アイテムは一つの選択肢に絞れ。不要なら"-"としろ。OKなら以下のJSONのみ返せ。
  {
      "トップス": "",
      "ボトムス": "",
      "アウター": "",
      "ベルト": "",
      "靴下": "",
      "靴": "",
      "バッグ": "",
      "アクセサリー": ""
  }
  ```

#### サーバーサイド処理
- フォームデータのサニタイズ
- OpenAI APIへのリクエスト
- JSONレスポンスの処理と表示

#### フロントエンドのAJAX処理
- フォーム送信時のAJAXリクエスト
- レスポンスの処理と表示

### 全体のファイル構成
1. `my-fashion-coordinator.php`: プラグインのメインファイル
2. `js/scripts.js`: フォーム送信時のAJAXリクエストを処理するJavaScript
3. `css/style.css`: フォームと結果表示のスタイルシート

見た目はStyle.cssで管理されている。適当に編集すればいい感じの見た目になる。

ユーザーの入力項目を増やしたい場合は、PHP上で入力項目増やす＋入力したものを受ける変数増やす＋jsで変数送れる＋プロンプトに変数を入れた文章を組み込めばok。

OpenAIのAPIキーはアカウント作って取得すればok。5$の課金で十分楽しめます。

プロンプトについて

現時点では以下のプロンプトでjsonのみ返してくれている。

うまい具合に調整しないと、jsonの前後にGPTが感想を書いてきたりして表示が崩れるので注意。

依頼主の年齢: {age}, 性別: {gender}, 季節: {season}月, 印象: {impression}。依頼主・季節感にあった服を客観的に見ておしゃれにコーディネートしろ。依頼主にファッションコーディネートを日本語で提案しろ。現実に存在しそうなアイテムに限る。依頼主は相手に「{impression}」の印象を与えたいということ。依頼主の{wish}しろ。各アイテムは一つの選択肢に絞れ。不要なら"-"としろ。OKなら以下のJSONのみ返せ。{"トップス": "","ボトムス": "","アウター": "","ベルト": "","靴下": "","靴": "","バッグ": "","アクセサリー": ""}```

終わりに

プラグイン生成は楽しいぞ・・・