feat: add couplets styles

.npmrc

@@ -1,3 +1,4 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
 shell-emulator=true
+ignore-workspace-root-check=true

components/AiPrompt.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const app = useAppStore()
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <textarea
+      v-model="app.prompt"
+      placeholder="想要什么样的春联？"
+      class="w-full rounded-lg p-4 shadow dark:bg-dark-800 outline-none!"
+      border="~ gray focus:(blue-500)"
+      maxlength="200"
+    />
+
+    <button class="font-zmx w-full btn" text="black 2xl">
+      生成！
+    </button>
+  </div>
+</template>

components/Footer.vue

@@ -2,6 +2,5 @@
   <div text="xl gray4" m-5 flex="~ gap3" justify-center>
     <NuxtLink i-carbon-campsite to="/" />
     <a i-carbon-logo-github href="https://github.com/YunYouJun/ai-couplets" target="_blank" />
-    <DarkToggle />
   </div>
 </template>

components/Logos.vue

@@ -1,17 +1,10 @@
 <template>
   <div inline-flex cursor-default text-2xl font-300>
-    <div flex flex-col children:mx-auto>
-      <img inline-block h-18 w-18 src="/nuxt.svg">
-      <span mt--2 text-green5>Nuxt 3</span>
-    </div>
     <div
       text="3xl gray4"
       m="x-4 y-auto"
-      i-carbon-add transform transition-all-500 hover:rotate-135
+      i-ri-layout-column-line
+      transform transition-all-500 hover:rotate-135
     />
-    <div flex flex-col children:mx-auto>
-      <img inline-block h-18 w-18 src="/vite.png">
-      <span mt--2 text-purple5>Vitesse</span>
-    </div>
   </div>
 </template>

components/SpringFestivalCouplets.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { toPng } from 'html-to-image'
+import { downloadDataUrlAsImage } from '@yunlefun/utils'
+import { suggestedCoupletsFilename } from '~/config'
+
+async function download() {
+  const container = document.getElementById('spring-festival-container')
+  if (!container)
+    return
+  // const url = await screenShotToBase64(container)
+
+  const url = await toPng(container, {
+    includeQueryParams: true,
+  })
+
+  if (url)
+    downloadDataUrlAsImage(url, suggestedCoupletsFilename)
+}
+</script>
+
+<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">
+      早上好
+    </div>
+    <div flex class="mt-4 items-center justify-between">
+      <div class="spring-festival-couplet">
+        春眠不觉晓
+      </div>
+
+      <div relative class="spring-festival-fu-container">
+        <div class="spring-festival-fu" />
+        <!-- not inset-0 for compatibility -->
+        <span class="fu-char absolute bottom-0 left-0 right-0 top-0">
+          福
+        </span>
+      </div>
+
+      <div class="spring-festival-couplet">
+        处处闻啼鸟
+      </div>
+    </div>
+  </div>
+
+  <div class="font-zmx mt-4 flex" text="black" gap="2">
+    <button class="w-full btn" text="black" @click="download">
+      下载图片
+    </button>
+    <button class="w-full btn" text="black" @click="download">
+      拷贝图片
+    </button>
+  </div>
+</template>
+
+<style lang="scss">
+:root {
+  --ac-fu-font-size: 5rem;
+}
+
+.spring-festival-fu {
+  // square
+  width: var(--ac-fu-font-size);
+  height: var(--ac-fu-font-size);
+
+  transform: rotate(45deg);
+
+  color: black;
+  background-color: red;
+
+  &-container {
+    font-size: calc(var(--ac-fu-font-size) - 0.5rem);
+    color: black;
+
+    transform: rotate(180deg);
+
+    .fu-char {
+      margin-top: -0.8rem;
+    }
+  }
+}
+
+.spring-festival-couplet {
+  font-size: 2.5rem;
+
+  color: black;
+  background-color: red;
+
+  writing-mode: vertical-lr;
+
+  padding: 1.5rem 0.4rem 1.4rem 0.4rem;
+  // 文字 gap
+  letter-spacing: 1rem;
+}
+</style>

composables/app.ts

@@ -0,0 +1,12 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', () => {
+  const prompt = ref('')
+
+  return {
+    prompt,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot))

config/index.ts

@@ -0,0 +1 @@
+export const suggestedCoupletsFilename = 'AI 春联.png'

constants/index.ts

@@ -1,2 +1,2 @@
-export const appName = 'Vitesse for Nuxt 3'
-export const appDescription = 'Vitesse for Nuxt 3'
+export const appName = 'AI 春联'
+export const appDescription = 'AI 春联生成'

layouts/default.vue

@@ -1,9 +1,7 @@
 <template>
-  <main class="px-10 py-20 text-center">
+  <main class="p-6 text-center">
+    <DarkToggle class="absolute right-4 top-4" />
+
     <slot />
-    <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Default Layout]
-    </div>
   </main>
 </template>

nuxt.config.ts

@@ -21,6 +21,7 @@ export default defineNuxtConfig({
 
   css: [
     '@unocss/reset/tailwind.css',
+    '~/styles/index.scss',
   ],
 
   colorMode: {
@@ -43,10 +44,18 @@ export default defineNuxtConfig({
   app: {
     head: {
       viewport: 'width=device-width,initial-scale=1',
+      // <link rel="preconnect" href="https://fonts.googleapis.com">
+      // <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      // <link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
       link: [
-        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
-        { rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
-        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+        // { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
+        { rel: 'icon', type: 'image/svg+xml', href: '/layout-column-line.svg' },
+        { rel: 'apple-touch-icon', href: '/layout-column-line.svg' },
+
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' },
+        // use local font for load
+        // { href: 'https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap', rel: 'stylesheet' },
       ],
       meta: [
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },

package.json

@@ -16,20 +16,25 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.6.3",
     "@iconify-json/carbon": "^1.1.27",
+    "@iconify-json/ri": "^1.1.19",
     "@iconify-json/twemoji": "^1.1.15",
     "@nuxtjs/color-mode": "^3.3.2",
     "@pinia/nuxt": "^0.5.1",
     "@unocss/eslint-config": "^0.58.3",
     "@unocss/nuxt": "^0.58.3",
     "@vite-pwa/nuxt": "^0.4.0",
     "@vueuse/nuxt": "^10.7.2",
+    "@yunlefun/utils": "0.1.2-beta.4",
     "consola": "^3.2.3",
+    "copy-image-clipboard": "^2.1.2",
     "eslint": "npm:eslint-ts-patch@^8.56.0-0",
     "eslint-plugin-format": "^0.1.0",
     "eslint-ts-patch": "^8.56.0-0",
+    "html-to-image": "^1.11.11",
     "nuxt": "^3.9.3",
     "nuxt-module-eslint-config": "^0.0.2",
     "pinia": "^2.1.7",
+    "sass": "^1.70.0",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.27"

packages/ai/src/api.ts

@@ -1,3 +1,4 @@
+import consola from 'consola'
 import { baseChatCompletionCreateParams, baseModel, openai } from './config'
 
 export async function getCompletion(msg: string) {
@@ -10,17 +11,40 @@ export async function getCompletion(msg: string) {
   return chatCompletion.choices
 }
 
+export interface SprintFestivalCouplets {
+  上联: string
+  下联: string
+  横批: string
+  总结: string
+}
+
 export async function getCouplets(couplet: string) {
+  const tooltip = [
+    '请为我生成一组春联，包含上联、下联各一句，每句字数在五到十三字之间，并附上一个恰当的横批。',
+    '并给出一个字总结。',
+    '尽量不要使用生僻字。',
+    '以下述 JSON 给出：',
+    `export interface SprintFestivalCouplets {
+  上联: string
+  下联: string
+  横批: string
+  总结: string
+}`,
+  ]
+
   const chatCompletion = await openai.chat.completions.create({
     messages: [
-      { role: 'system', content: '你是一个诗人，擅长写对联，我将给你一个上联，你回答一个下联。' },
-      { role: 'user', content: couplet },
+      {
+        role: 'system',
+        content: tooltip.join('\n'),
+      },
+      // { role: 'user', content: couplet },
     ],
     model: 'deepseek-chat',
     max_tokens: 300,
     // stream: true
   })
 
-  console.log(chatCompletion)
+  consola.debug(chatCompletion)
   return chatCompletion.choices[0].message
 }

pages/index.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
-const online = useOnline()
+// const online = useOnline()
 </script>
 
 <template>
   <div>
-    <Logos mb-6 />
+    <!-- <Logos mb-6 /> -->
+
+    <h2 class="font-zmx my-4" text="4xl">
+      AI 春联
+    </h2>
+
+    <AiPrompt class="mb-4" />
+
     <Suspense>
       <ClientOnly>
-        <PageView v-if="online" />
-        <div v-else text-gray:80>
+        <SpringFestivalCouplets />
+        <!-- <PageView v-if="online" /> -->
+        <!-- <div v-else text-gray:80>
           You're offline
-        </div>
+        </div> -->
       </ClientOnly>
       <template #fallback>
         <div italic op50>
           <span animate-pulse>Loading...</span>
         </div>
       </template>
     </Suspense>
-    <InputEntry />
   </div>
 </template>