From 48b080d15b3014f4d52cb6b83581847b48b6da40 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 4 Feb 2024 22:29:55 +0800
Subject: [PATCH] feat: add get data from server api

---
 .env.example                          |  1 +
 README.md                             |  4 +++
 components/AiPrompt.vue               | 26 ++++++++++++--
 components/SpringFestivalCouplets.vue | 42 +++++++++++++++++-----
 composables/app.ts                    | 27 +++++++++++++-
 nuxt.config.ts                        |  2 ++
 package.json                          |  2 ++
 packages/ai/src/api.ts                | 23 +++++++-----
 packages/ai/src/index.ts              |  1 +
 pages/index.vue                       |  5 +--
 pnpm-lock.yaml                        | 51 +++++++++++++++++++++++++++
 server/api/generate.ts                | 13 +++++++
 uno.config.ts                         |  2 +-
 13 files changed, 175 insertions(+), 24 deletions(-)
 create mode 100644 .env.example
 create mode 100644 server/api/generate.ts

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..e570b8b
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+OPENAI_API_KEY=
diff --git a/README.md b/README.md
index f22158e..a0bcc55 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
 # AI Couplets - AI 对联/春联
 
+## Todo
+
+- [ ] 分享春联
+
 ## Dev
 
 ```bash
diff --git a/components/AiPrompt.vue b/components/AiPrompt.vue
index a1da9b0..66625f2 100644
--- a/components/AiPrompt.vue
+++ b/components/AiPrompt.vue
@@ -1,5 +1,19 @@
 <script lang="ts" setup>
+import consola from 'consola'
+
 const app = useAppStore()
+
+async function generate() {
+  app.loading = true
+  const data = await $fetch('/api/generate', {
+    query: {
+      prompt: app.prompt,
+    },
+  })
+  consola.info(data)
+  app.setCoupletsData(data)
+  app.loading = false
+}
 </script>
 
 <template>
@@ -8,12 +22,18 @@ const app = useAppStore()
       v-model="app.prompt"
       placeholder="想要什么样的春联？"
       class="w-full rounded-lg p-4 shadow dark:bg-dark-800 outline-none!"
-      border="~ gray focus:(blue-500)"
+      border="~ gray focus:(yellow-500)"
       maxlength="200"
     />
 
-    <button class="font-zmx w-full btn" text="black 2xl">
-      生成！
+    <button
+      class="font-zmx w-full btn" text="black 2xl"
+      :class="{ 'btn-disabled': app.loading }"
+      flex items-center justify-center
+      @click="generate"
+    >
+      {{ app.loading ? '生成中...' : '生成春联' }}
+      <div v-if="app.loading" class="i-svg-spinners:pulse ml-2" />
     </button>
   </div>
 </template>
diff --git a/components/SpringFestivalCouplets.vue b/components/SpringFestivalCouplets.vue
index 450408a..0853852 100644
--- a/components/SpringFestivalCouplets.vue
+++ b/components/SpringFestivalCouplets.vue
@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import { toPng } from 'html-to-image'
 import { downloadDataUrlAsImage } from '@yunlefun/utils'
+import { SwitchRoot, SwitchThumb } from 'radix-vue'
 import { suggestedCoupletsFilename } from '~/config'
+import type { SprintFestivalCouplets } from '~/packages/ai/src'
+
+defineProps<{
+  coupletsData: SprintFestivalCouplets
+}>()
+
+const app = useAppStore()
 
 async function download() {
   const container = document.getElementById('spring-festival-container')
@@ -21,27 +29,47 @@ async function download() {
 <template>
   <div id="spring-festival-container" flex="col" class="font-zmx spring-festival-container">
     <div class="font-zmx m-auto bg-#ff0000 p-2" w="50" text="4xl black">
-      早上好
+      {{ coupletsData['横批'] }}
     </div>
     <div flex class="mt-4 items-center justify-between">
       <div class="spring-festival-couplet">
-        春眠不觉晓
+        {{ coupletsData['上联'] }}
       </div>
 
-      <div relative class="spring-festival-fu-container">
+      <div
+        relative class="spring-festival-fu-container transition duration-400"
+        :class="{
+          'rotate-180': app.inverseFu,
+        }"
+      >
         <div class="spring-festival-fu" />
         <!-- not inset-0 for compatibility -->
         <span class="fu-char absolute bottom-0 left-0 right-0 top-0">
-          福
+          {{ coupletsData['总结'].slice(0, 1) }}
         </span>
       </div>
 
       <div class="spring-festival-couplet">
-        处处闻啼鸟
+        {{ coupletsData['下联'] }}
       </div>
     </div>
   </div>
 
+  <div class="font-zmx flex items-center justify-center gap-2" text="2xl" m="4">
+    <label class="select-none pr-[15px] leading-none" for="airplane-mode">
+      倒转福字
+    </label>
+    <SwitchRoot
+      id="airplane-mode"
+      v-model:checked="app.inverseFu"
+      class="relative h-[25px] w-[42px] flex cursor-default rounded-full bg-red-500 shadow-sm data-[state=checked]:bg-yellow-500 focus-within:outline-yellow focus-within:outline"
+    >
+      <SwitchThumb
+        class="my-auto block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-sm transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]"
+      />
+    </SwitchRoot>
+  </div>
+
   <div class="font-zmx mt-4 flex" text="black" gap="2">
     <button class="w-full btn" text="black" @click="download">
       下载图片
@@ -71,10 +99,8 @@ async function download() {
     font-size: calc(var(--ac-fu-font-size) - 0.5rem);
     color: black;
 
-    transform: rotate(180deg);
-
     .fu-char {
-      margin-top: -0.8rem;
+      margin-top: -1rem;
     }
   }
 }
diff --git a/composables/app.ts b/composables/app.ts
index 169970b..8ef38fe 100644
--- a/composables/app.ts
+++ b/composables/app.ts
@@ -1,10 +1,35 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
+import { useStorage } from '@vueuse/core'
+import type { SprintFestivalCouplets } from '~/packages/ai/src'
+
+const ns = 'ai-sfc'
 
 export const useAppStore = defineStore('app', () => {
-  const prompt = ref('')
+  const loading = ref(false)
+  const prompt = useStorage(`${ns}:prompt`, '')
+
+  const coupletsData = useStorage<SprintFestivalCouplets>(`${ns}:couplets-data`, {
+    上联: '这里是上联',
+    下联: '这里是下联',
+    横批: '这里是横批',
+    总结: '福',
+  })
+
+  /**
+   * 是否反转福字
+   */
+  const inverseFu = useStorage(`${ns}:inverse-fu`, true)
 
   return {
+    loading,
     prompt,
+    inverseFu,
+
+    coupletsData,
+
+    setCoupletsData(data: SprintFestivalCouplets) {
+      coupletsData.value = data
+    },
   }
 })
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7fa77e4..55efcc8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,6 +2,8 @@ import { pwa } from './config/pwa'
 import { appDescription } from './constants/index'
 
 export default defineNuxtConfig({
+  ssr: false,
+
   modules: [
     '@vueuse/nuxt',
     '@unocss/nuxt',
diff --git a/package.json b/package.json
index f8428e7..c9a2b9a 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@antfu/eslint-config": "^2.6.3",
     "@iconify-json/carbon": "^1.1.27",
     "@iconify-json/ri": "^1.1.19",
+    "@iconify-json/svg-spinners": "^1.1.2",
     "@iconify-json/twemoji": "^1.1.15",
     "@nuxtjs/color-mode": "^3.3.2",
     "@pinia/nuxt": "^0.5.1",
@@ -34,6 +35,7 @@
     "nuxt": "^3.9.3",
     "nuxt-module-eslint-config": "^0.0.2",
     "pinia": "^2.1.7",
+    "radix-vue": "^1.4.0",
     "sass": "^1.70.0",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
diff --git a/packages/ai/src/api.ts b/packages/ai/src/api.ts
index cb5378c..81c3a0d 100644
--- a/packages/ai/src/api.ts
+++ b/packages/ai/src/api.ts
@@ -1,4 +1,5 @@
 import consola from 'consola'
+import type OpenAI from 'openai'
 import { baseChatCompletionCreateParams, baseModel, openai } from './config'
 
 export async function getCompletion(msg: string) {
@@ -20,9 +21,9 @@ export interface SprintFestivalCouplets {
 
 export async function getCouplets(couplet: string) {
   const tooltip = [
-    '请为我生成一组春联，包含上联、下联各一句，每句字数在五到十三字之间，并附上一个恰当的横批。',
+    '请根据我的提示生成一组春联，包含上联、下联各一句，每句字数在五到十三字之间，并附上一个恰当的横批。',
     '并给出一个字总结。',
-    '尽量不要使用生僻字。',
+    '不需要标点符号，尽量不要使用生僻字。',
     '以下述 JSON 给出：',
     `export interface SprintFestivalCouplets {
   上联: string
@@ -32,14 +33,18 @@ export async function getCouplets(couplet: string) {
 }`,
   ]
 
+  const messages: OpenAI.ChatCompletionMessageParam[] = [
+    {
+      role: 'system',
+      content: tooltip.join('\n'),
+    },
+  ]
+
+  if (couplet)
+    messages.push({ role: 'user', content: `我的提示是：${couplet}` })
+
   const chatCompletion = await openai.chat.completions.create({
-    messages: [
-      {
-        role: 'system',
-        content: tooltip.join('\n'),
-      },
-      // { role: 'user', content: couplet },
-    ],
+    messages,
     model: 'deepseek-chat',
     max_tokens: 300,
     // stream: true
diff --git a/packages/ai/src/index.ts b/packages/ai/src/index.ts
index 8a3f31e..0465e63 100644
--- a/packages/ai/src/index.ts
+++ b/packages/ai/src/index.ts
@@ -1 +1,2 @@
+export * from './api'
 export * from './cli'
diff --git a/pages/index.vue b/pages/index.vue
index 53eb8d8..ee722dc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 // const online = useOnline()
+const app = useAppStore()
 </script>
 
 <template>
   <div>
     <!-- <Logos mb-6 /> -->
 
-    <h2 class="font-zmx my-4" text="4xl">
+    <h2 class="font-zmx my-4" text="dark:yellow 4xl">
       AI 春联
     </h2>
 
@@ -14,7 +15,7 @@
 
     <Suspense>
       <ClientOnly>
-        <SpringFestivalCouplets />
+        <SpringFestivalCouplets :couplets-data="app.coupletsData" />
         <!-- <PageView v-if="online" /> -->
         <!-- <div v-else text-gray:80>
           You're offline
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e2d344..c9ac11c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@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
@@ -68,6 +71,9 @@ importers:
       pinia:
         specifier: ^2.1.7
         version: 2.1.7(typescript@5.3.3)(vue@3.4.15)
+      radix-vue:
+        specifier: ^1.4.0
+        version: 1.4.0(vue@3.4.15)
       sass:
         specifier: ^1.70.0
         version: 1.70.0
@@ -1767,6 +1773,34 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /@floating-ui/core@1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+    dependencies:
+      '@floating-ui/utils': 0.2.1
+    dev: true
+
+  /@floating-ui/dom@1.6.1:
+    resolution: {integrity: sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==}
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
+    dev: true
+
+  /@floating-ui/utils@0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: true
+
+  /@floating-ui/vue@1.0.6(vue@3.4.15):
+    resolution: {integrity: sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==}
+    dependencies:
+      '@floating-ui/dom': 1.6.1
+      '@floating-ui/utils': 0.2.1
+      vue-demi: 0.14.6(vue@3.4.15)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -1799,6 +1833,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:
@@ -8612,6 +8652,17 @@ packages:
     resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
     dev: true
 
+  /radix-vue@1.4.0(vue@3.4.15):
+    resolution: {integrity: sha512-KqG1Ed7/LL+9yh+VBPLZgWCkblBjGEo/AueMLD/g6Sx0Wb7ZAvfXPUSVTriVRj3IczMZecgleiLnVOEfwM2AXg==}
+    dependencies:
+      '@floating-ui/dom': 1.6.1
+      '@floating-ui/vue': 1.0.6(vue@3.4.15)
+      fast-deep-equal: 3.1.3
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /radix3@1.1.0:
     resolution: {integrity: sha512-pNsHDxbGORSvuSScqNJ+3Km6QAVqk8CfsCBIEoDgpqLrkD2f3QM4I7d1ozJJ172OmIcoUcerZaNWqtLkRXTV3A==}
     dev: true
diff --git a/server/api/generate.ts b/server/api/generate.ts
new file mode 100644
index 0000000..7fd64f5
--- /dev/null
+++ b/server/api/generate.ts
@@ -0,0 +1,13 @@
+import type { SprintFestivalCouplets } from '~/packages/ai/src'
+import { getCouplets } from '~/packages/ai/src'
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+  const data = await getCouplets(query.prompt as string)
+  const { content } = data
+
+  const unwrapperContent = (content || '{}')?.replace('```json\n', '').replace('```', '')
+  const coupletData = JSON.parse(unwrapperContent) as SprintFestivalCouplets
+
+  return coupletData
+})
diff --git a/uno.config.ts b/uno.config.ts
index 8aa686d..67e7b6c 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -11,7 +11,7 @@ import {
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'text-xl px-4 py-2 rounded inline-block bg-yellow-500 text-white cursor-pointer hover:bg-yellow-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'text-xl px-4 py-2 rounded inline-block bg-yellow-500 text-white cursor-pointer focus:bg-yellow-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-red-600'],
   ],
   presets: [