feat: optimize ai output

Author: sunls24

app/server.ts

@@ -13,34 +13,57 @@ const MAX_SIZE = 6;
 export async function getAnswer(
   prompt: string,
   guaMark: string,
-  guaName: string,
+  guaTitle: string,
+  guaResult: string,
   guaChange: string,
 ) {
-  console.log(prompt, guaName, guaChange);
+  console.log(prompt, guaTitle, guaResult, guaChange);
   const stream = createStreamableValue();
   try {
-    // const res = await fetch(
-    //   `https://raw.githubusercontent.com/sunls2/zhouyi/main/docs/${guaMark}/index.md`,
-    // );
-    // const guaDetail = await res.text();
+    const res = await fetch(
+      `https://raw.githubusercontent.com/sunls2/zhouyi/main/docs/${guaMark}/index.md`,
+    );
+    const guaDetail = await res.text();
+    const explain = guaDetail
+      .match(/(\*\*台灣張銘仁[\s\S]*?)(?=周易第\d+卦)/)?.[1]
+      .replaceAll("\n\n", "\n");
+
+    const changeList: string[] = [];
+    if (guaChange !== "无变爻") {
+      guaChange
+        .split(":")[1]
+        .trim()
+        .split(",")
+        .forEach((change) => {
+          const detail = guaDetail
+            .match(`(\\*\\*${change}變卦[\\s\\S]*?)(?=${guaTitle}|$)`)?.[1]
+            .replaceAll("\n\n", "\n");
+          if (detail) {
+            changeList.push(detail.trim());
+          }
+        });
+    }
 
     const { fullStream } = streamText({
       temperature: 0.5,
       model: openai(model),
       messages: [
         {
           role: "system",
-          content:
-            "你是精通易经64卦, 擅长解读卦象的AI助手\n1.首先对卦象整体情况进行解读\n2.再重点结合要算的事情和变爻情况进行详细分析",
+          content: `你是一位精通《周易》的AI助手，根据用户提供的卦象和问题，提供准确的卦象解读和实用建议
+任务要求：逻辑清晰，语气得当
+1. 解读卦象：分析主卦、变爻及变卦，解读整体趋势和吉凶
+2. 关联问题：针对用户问题，结合卦象信息，提供具体分析
+3. 提供建议：根据卦象启示，给出切实可行的建议，帮助用户解决实际问题`,
         },
         {
           role: "user",
-          content: `我想要算的事情是:\`${prompt}\`\n请帮我解读此卦象:\`${guaName}\`\n${guaChange}`,
+          content: `我摇到的卦象：${guaTitle} ${guaResult} ${guaChange}
+我的问题：${prompt}
+
+${explain}
+${changeList.join("\n")}`,
         },
-        // {
-        //   role: "user",
-        //   content: `此卦象的详细解释:\n\`\`\`\n${guaDetail}\n\`\`\``,
-        // },
       ],
       maxRetries: 0,
     });

components/divination.tsx

@@ -30,6 +30,7 @@ function Divination() {
       const { data, error } = await getAnswer(
         question,
         resultObj!.guaMark,
+        resultObj!.guaTitle,
         resultObj!.guaResult,
         resultObj!.guaChange,
       );
@@ -175,12 +176,11 @@ function Divination() {
     setResultObj({
       // 例：26.山天大畜
       guaMark: `${(guaIndex + 1).toString().padStart(2, "0")}.${guaName2}`,
-      // 例：周易第26卦_大畜卦(山天大畜)_艮上乾下
-      guaResult: `周易第${
-        guaIndex + 1
-      }卦_${guaName1}卦(${guaName2}_${guaDesc})`,
+      guaTitle: `周易第${guaIndex + 1}卦`,
+      // 例：大畜卦(山天大畜)_艮上乾下
+      guaResult: `${guaName1}卦(${guaName2})_${guaDesc}`,
       guaChange:
-        changeList.length === 0 ? "无变爻" : `变爻：${changeList.toString()}`,
+        changeList.length === 0 ? "无变爻" : `变爻: ${changeList.toString()}`,
     });
   }
 

components/result.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 export interface ResultObj {
+  guaTitle: string;
   guaMark: string;
   guaResult: string;
   guaChange: string;
@@ -9,14 +10,14 @@ export interface ResultObj {
 function Result(props: ResultObj) {
   return (
     <div className="flex flex-col items-start justify-center gap-2 sm:gap-3">
-      {props.guaResult.split("_")[0]}
+      {props.guaTitle}
       <a
         className="group flex items-center gap-1 font-medium text-primary/80 underline underline-offset-4 transition-colors hover:text-primary/100"
         href={`https://zhouyi.sunls.de/${props.guaMark}/`}
         target="_blank"
       >
-        <div className="mt-1 h-[90%] w-1.5 rounded bg-blue-400/80 transition-colors group-hover:bg-blue-400/100" />
-        <span>{props.guaResult.split("_").slice(1).join("_")}</span>
+        <div className="mt-1 h-[90%] w-1.5 bg-blue-400/80 transition-colors group-hover:bg-blue-400/100" />
+        <span>{props.guaResult}</span>
       </a>
       <span className="text-sm italic text-muted-foreground">
         {props.guaChange}