feat: add ai generate img

.env.example

@@ -0,0 +1 @@
+SD_API_BASE_URL=

components/ai/AiChooseFood.vue

@@ -34,11 +34,14 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
 }
 
 // cook recipe
+const cooking = ref(false)
 const recipeImg = ref('')
 async function cook() {
+  cooking.value = true
   const foods = rStore.selectedStuff
   const img = await getRecipeImage(foods)
   recipeImg.value = img
+  cooking.value = false
 }
 </script>
 
@@ -121,10 +124,13 @@ async function cook() {
     </Transition>
 
     <button
+      m-auto
+      flex items-center justify-center
       class="rounded bg-yellow px-4 py-2 text-orange-900 font-black shadow hover:shadow-md active:shadow-inset"
       @click="cook()"
     >
-      做美食 🥘
+      <div v-if="cooking" class="mr-2 inline-flex" i-svg-spinners:clock />
+      <span>做美食 🥘</span>
     </button>
 
     <div
@@ -137,7 +143,11 @@ async function cook() {
       </div>
 
       <div class="cook-recipes text-center" p="2">
-        <img class="m-auto w-25 rounded shadow transition hover:shadow-md" src="https://yunyoujun.cn/images/avatar.jpg" alt="recipes">
+        <img
+          class="m-auto w-25 rounded shadow transition hover:shadow-md"
+          :src="recipeImg"
+          alt="recipes"
+        >
       </div>
     </div>
   </div>

package.json

@@ -36,6 +36,7 @@
     "@iconify-json/ic": "^1.1.17",
     "@iconify-json/mdi": "^1.1.64",
     "@iconify-json/ri": "^1.1.19",
+    "@iconify-json/svg-spinners": "^1.1.2",
     "@iconify-json/twemoji": "^1.1.15",
     "@nuxt/devtools": "^1.0.8",
     "@nuxt/test-utils": "^3.10.0",

pnpm-lock.yaml

@@ -37,6 +37,9 @@ devDependencies:
   '@iconify-json/ri':
     specifier: ^1.1.19
     version: 1.1.19
+  '@iconify-json/svg-spinners':
+    specifier: ^1.1.2
+    version: 1.1.2
   '@iconify-json/twemoji':
     specifier: ^1.1.15
     version: 1.1.15
@@ -1791,9 +1794,6 @@ packages:
     resolution: {integrity: sha512-7nhBTRkTG0mD+7r7JvNalJz++YwszZk0oP1HIY6fCgz6wNKxT6LuiXCqdPrZmNPe/WbPIKuqxGZN5s+i6NZqow==}
     peerDependencies:
       vue: '>= 3.2.0 < 4.0.0'
-    peerDependenciesMeta:
-      vue-router:
-        optional: true
     dependencies:
       '@gtm-support/core': 2.2.0
       vue: 3.4.15(typescript@5.3.3)
@@ -1867,6 +1867,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/svg-spinners@1.1.2:
+    resolution: {integrity: sha512-Aab6SqkORaTJ1W+ooufn6C8BsBitrn3uk8iRQLPA6pjhyvQAhkKCGMctyXIL5ZjrycnoFVsZ4mx7KnwEMra8qg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/twemoji@1.1.15:
     resolution: {integrity: sha512-ze2CAOwIWBKIP6ih6qMDItasVjRicktl2Qr3/ohZSMToAHm9z3Q6HCwE48eT0+D+uFpGBlNRQ22HHyE5izyhDg==}
     dependencies:
@@ -11456,6 +11462,7 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0

server/api/recipes/image/generate.ts

@@ -1,9 +1,11 @@
 // http://localhost:3001/api/recipes/image/generate
 
+import process from 'node:process'
 import { meat, staple, vegetable } from '~/data/food'
 
+// internal temp
 // const sdBaseUrl = 'http://30.30.168.63:7860/'
-const sdBaseUrl = 'https://85db1802ae46e57aab.gradio.live/'
+const sdBaseUrl = process.env.SD_API_BASE_URL
 
 const payload = {
   // denoising_strength: 0,
@@ -57,14 +59,16 @@ export default defineEventHandler(async (e) => {
   })
 
   // TODO: 过滤 prompt 只能是食材
-  payload.prompt = `<lora:TODO:1>,food focus,transparent background,${enFoods.join(',')}`
+  // <lora:TODO:1>,
+  payload.prompt = `food focus,transparent background,${enFoods.join(',')}`
 
-  // console.log(payload.prompt)
+  console.log(payload.prompt)
 
   const data = await $fetch<Txt2ImgResponse>('/sdapi/v1/txt2img', {
     baseURL: sdBaseUrl,
     body: payload,
     method: 'POST',
   })
+  console.log(data)
   return data
 })