Merge pull request #5 from winc1980/develop

✨ Feat: レシピ詳細の実装完了

Author: MORIMOTO520212

README.md

@@ -4,17 +4,23 @@
     <p align="center">HPチーム春合宿2024年 グループ3 作品</p>
 </p>
 <p align="center">
-  <img src="https://img.shields.io/badge/3-Vue.js-4FC08D.svg?logo=vue.js&style=plastic">
-  <img src="https://img.shields.io/badge/20-Node.js-339933.svg?logo=node.js&style=plastic">
+  <img src="https://img.shields.io/badge/Vue.js-3-4FC08D.svg?logo=vue.js&style=plastic">
+  <img src="https://img.shields.io/badge/Node.js-20-339933.svg?logo=node.js&style=plastic">
   <img src="https://github.com/winc1980/recipe-ai/actions/workflows/deploy-gh-pages.yml/badge.svg">
 </p>
 
 ## アプリの特徴
 
-- **冷蔵庫内の写真から食材を検出する**
+- **冷蔵庫内の写真から食材を選ぶ**
+  - GPTの強力な推論能力を用いて冷蔵庫内の写真から食材を検出します。
 - **レシピの提案**
   - 最適なレシピを提案します。その他にも「料理時間」や「難易度」、「カロリー」などの情報もすぐに確認できます。
 - **レシピの詳細**
+  - レシピの作り方を確認できます。
+
+## アプリを使う
+
+- [RECIPE AI](https://github.com/winc1980/recipe-ai) ここからアクセスしてください。
 
 ## スクリーンショット
 
@@ -41,3 +47,46 @@ npm install
 ```bash
 npm run dev
 ```
+
+## ビルド
+
+```bash
+npm run build
+```
+
+## Contributors✨
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%">
+        <a href="https://github.com/MORIMOTO520212">
+          <img src="https://avatars.githubusercontent.com/u/28892090?v=4" /><br />
+          <sub><b>Yuma Morimoto</b></sub></a><br />
+            Backend
+        </a>
+      </td>
+      <td align="center" valign="top" width="14.28%">
+        <a href="https://github.com/shuma1356">
+          <img src="https://avatars.githubusercontent.com/u/118163728?v=4" /><br />
+          <sub><b>Shuma Miyazaki</b></sub></a><br />
+            Design / Frontend
+        </a>
+      </td>
+      <td align="center" valign="top" width="14.28%">
+        <a href="https://github.com/momoka39">
+          <img src="https://avatars.githubusercontent.com/u/133108363?v=4" /><br />
+          <sub><b>Momoka</b></sub></a><br />
+            Frontend
+        </a>
+      </td>
+      <td align="center" valign="top" width="14.28%">
+        <a href="">
+          <img src="https://avatars.githubusercontent.com/u/88756450?v=4" /><br />
+          <sub><b>Yuria</b></sub></a><br />
+            Prompt Engineering / Frontend
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>

src/App.vue

@@ -1,18 +1,4 @@
-<script setup>
-import { ref } from 'vue';
-import { detectFoods } from './features/detectFoods';
-import { getImage } from './features/getImage';
-
-const searchQuery = ref(''); // 検索キーワード変数
-const thumbnailUrl = ref(''); // サムネイルURL変数
-
-// サムネイルURLを取得する
-const getThumbnailUrl = async () => {
-  let url = await getImage(searchQuery.value);
-  console.log(url);
-  thumbnailUrl.value = url;
-};
-</script>
+<script setup></script>
 
 <template>
   <router-view />

src/components/HelloWorld.vue

@@ -65,7 +65,9 @@ export const detectFoods = async (b64Image) => {
         },
       },
     ],
-    function_call: 'auto',
+    function_call: {
+      name: 'foods',
+    },
     max_tokens: 1000,
   });
   return JSON.parse(chatCompletion2.choices[0].message.function_call.arguments);

src/features/detectFoods/index.js

@@ -0,0 +1,60 @@
+import { openai } from '../openaiClient';
+
+// レシピを生成する
+export const generateRecipeDetail = async (recipeName) => {
+  console.log('レシピの詳細を生成中...');
+  const chatCompletion = await openai.chat.completions.create({
+    model: 'gpt-4-0613',
+    messages: [
+      {
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `${recipeName}\nこのレシピに必要な1人前の材料を考えてください。また、ステップバイステップでこのレシピを作るための手順を考えてください。最後に、recipe関数を呼び出して終了します。`,
+          },
+        ],
+      },
+    ],
+    functions: [
+      {
+        name: 'recipe',
+        parameters: {
+          type: 'object',
+          properties: {
+            ingredients: {
+              type: 'array',
+              description:
+                'このプロパティにはレシピに必要な材料のリストを渡します。',
+              items: {
+                type: 'string',
+              },
+            },
+            amount: {
+              type: 'array',
+              description:
+                'このプロパティには材料の使用量をリストで渡します。例えば、1-2個、小さじ1/2、3本など。',
+              items: {
+                type: 'string',
+              },
+            },
+            cooking_instructions: {
+              type: 'array',
+              description:
+                'このプロパティにはレシピを作るための手順をリストで渡します。手順の順番はリストの手前から始まることに注意してください。',
+              items: {
+                type: 'string',
+              },
+            },
+          },
+          required: ['ingredients', 'amount', 'cooking_instructions'],
+        },
+      },
+    ],
+    function_call: {
+      name: 'recipe',
+    },
+    max_tokens: 1000,
+  });
+  return JSON.parse(chatCompletion.choices[0].message.function_call.arguments);
+};

src/features/generateRecipeDetail/index.js

@@ -8,7 +8,7 @@ import App from './App.vue';
 const store = createStore({
   state() {
     return {
-      // 食材リスト（JPとEN）
+      // 食材リスト
       foods: {
         // jp: ['ex_りんご', 'ex_きゅうり'],
         // en: ['apple', 'cucumber'],
@@ -18,10 +18,23 @@ const store = createStore({
         // ],
         jp: [],
         en: [],
-        thumbnail: [],
+        thumbnail: [
+          'https://www.nikon-image.com/products/mirrorless/lineup/z_50/img/sample/pic_01_l.jpg',
+        ],
       },
       // 選択した食材（食材の名前）
       selectedFoods: [],
+      // 生成したレシピ
+      // {
+      //   title_jp: [],
+      //   title_en: [],
+      //   time: [],
+      //   kcal: [],
+      //   difficulty: [],
+      //   catchcopy: [],
+      //   thumbnail: [],
+      // }
+      generatedRecipe: {},
     };
   },
   mutations: {
@@ -39,6 +52,11 @@ const store = createStore({
       console.log('unSelectFood...');
       state.selectedFoods = state.selectedFoods.filter((n) => n !== name);
     },
+    generatedRecipe(state, data) {
+      console.log('generatedRecipe...');
+      state.generatedRecipe = data;
+      console.log(state.generatedRecipe);
+    },
   },
 });