feat: completion & json

industry-monitor-web/src/lib/README-json.md

@@ -0,0 +1,110 @@
+
+# completionJSON 函数使用
+
+# C2M羽绒服颜色定制案例
+
+> 请您给以具体的案例，用上面的函数实现。案例场景是，一个C2M加工制造羽绒服的企业，将羽绒服，每个部位做成了可以改颜色的效果，他想实现，根据用户的描述的IP形象、画面、衣服风格等等，为其生成各个衣服部位的颜色色号。请您完成期中最关键的用户描述 => json 表示色号的使用案例
+# 使用示例
+下面是一个使用`completionJSON`函数实现用户描述转换为羽绒服各部位颜色配置的案例：
+
+```typescript
+ // 定义羽绒服部位颜色配置的JSON结构
+    const colorConfigSchema = `
+    {
+      "description": "用户原始描述的简要总结",
+      "colorScheme": {
+        "collar": "衣领颜色(HEX色号)",
+        "body": "衣身主色(HEX色号)",
+        "sleevesLeft": "左袖子颜色(HEX色号)",
+        "sleevesRight": "右袖子颜色(HEX色号)",
+        "hood": "帽子颜色(HEX色号)",
+        "pockets": "口袋颜色(HEX色号)",
+        "zipper": "拉链颜色(HEX色号)",
+        "trim": "装饰边颜色(HEX色号)"
+      },
+      "styleDescription": "生成的颜色方案风格描述",
+      "recommendedAccessories": ["建议搭配的配饰或颜色"]
+    }`;
+
+    // 示例数据
+    const exampleConfig = {
+      "description": "用户想要一件冬日森林精灵风格的羽绒服",
+      "colorScheme": {
+        "collar": "#3A5F0B",
+        "body": "#1E3F20",
+        "sleevesLeft": "#2C5234",
+        "sleevesRight": "#2C5234",
+        "hood": "#3A5F0B",
+        "pockets": "#4A7C3A",
+        "zipper": "#D4AF37",
+        "trim": "#5D8A4F"
+      },
+      "styleDescription": "深绿色系搭配金色拉链，营造森林精灵的神秘与高贵感",
+      "recommendedAccessories": ["棕色皮革手套", "木质纽扣装饰"]
+    };
+
+    // 用户描述转换函数
+    async function generateCoatColorConfig(userDescription: string) {
+      const prompt = `你是一位专业的羽绒服设计师，需要根据用户的描述为其定制羽绒服各部位的颜色。
+    用户描述: ${userDescription}
+
+    请根据描述分析用户想要的风格和色彩感觉，为羽绒服的各个部位生成协调的颜色方案。`;
+
+      try {
+        const colorConfig = await completionJSON(
+          prompt,
+          colorConfigSchema,
+          exampleConfig,
+          // (content) => console.log("生成中...", content)
+        );
+        
+        return colorConfig;
+      } catch (error) {
+        console.error("生成颜色配置失败:", error);
+        return null;
+      }
+    }
+
+    // 使用示例
+    (async () => {
+      // const userInput1 = "我想要一件像北极光一样梦幻的羽绒服，带有神秘感";
+      // const result1 = await generateCoatColorConfig(userInput1);
+      // console.log("北极光风格结果:", JSON.stringify(result1, null, 2));
+      
+      const userInput2 = "设计一件哪吒的羽绒服，要个性张扬我命由我不由天";
+      const result2 = await generateCoatColorConfig(userInput2);
+      console.log("哪吒IP风格结果:", JSON.stringify(result2, null, 2));
+      
+      // const userInput3 = "为春节设计一件喜庆但不俗气的羽绒服";
+      // const result3 = await generateCoatColorConfig(userInput3);
+      // console.log("春节风格结果:", JSON.stringify(result3, null, 2));
+    })();
+```
+
+## 示例输出结果
+
+对于"设计一件哪吒的羽绒服，要个性张扬我命由我不由天"描述，可能生成的JSON结果：
+
+```json
+{
+  "description": "用户希望设计一件个性张扬、体现哪吒精神的羽绒服",
+  "colorScheme": {
+    "collar": "#FF4500",
+    "body": "#FFD700",
+    "svesLeft": "#FF6347",
+    "sleevesRight": "#FF6347",
+    "hood": "#8B0000",
+    "pockets": "#FFD700",
+    "zipper": "#C0C0C0",
+    "trim": "#FFC00"
+  },
+  "styleDescription": "整体颜色方案以鲜艳的红色和金色为主，展现出哪吒的个性与张扬，搭配银色拉链和橙色装饰边，形成强烈的视觉冲。",
+  "recommendedAccessories": [
+    "黑色手套",
+    "红色围巾",
+    "金色耳环"
+  ]
+}
+```
+
+这个实现可以帮助C2M企业将用户的语言描述快速转换为可生产的颜色配置方案，每个部位都有具体的色号，便于生产系统直接使用。

industry-monitor-web/src/lib/completion.ts

@@ -66,7 +66,6 @@ export class TestCompletion{
                 for (const line of lines) {
                     if (line.startsWith('data:') && !line.includes('[DONE]')) {
                         try {
-                            console.log("line",line)
                             const jsonStr = line.substring(5).trim();
                             const data = JSON.parse(jsonStr);
                             const content = data?.choices?.[0]?.delta?.content || '';
@@ -89,4 +88,83 @@ export class TestCompletion{
 
         return accumulatedContent;
     }
-}
+}
+
+/**
+ * 使用AI生成符合指定结构的JSON数据
+ * @param prompt 任务要求的整体提示词
+ * @param jsonSchema 期望的JSON结构描述（用于提示词）
+ * @param example 可选的JSON示例（帮助AI理解格式）
+ * @param onMessage 实时生成内容回调
+ * @returns 解析后的JSON对象
+ */
+export async function completionJSON(
+    prompt:string,
+  jsonSchema: string,
+  example: object | null = null,
+  onMessage?: (content: string) => void
+): Promise<any> {
+  // 1. 构建提示词
+  const JsonResultParsePrompt = `请严格按照以下要求生成JSON数据：
+- 数据结构要求：${jsonSchema}
+- 只能返回一个完整的JSON对象 确保JSON格式正确
+- 注意返回的JSON格式每个KEY都有""包裹和Value之间都有:`;
+// ${example ? `2. 参考示例格式：\n${JSON.stringify(example, null, 2)}` : ''}
+
+  // 2. 初始化消息列表
+  const messages: TestMessage[] = [
+    {
+      role: "user",
+      content: prompt+JsonResultParsePrompt
+    }
+  ];
+
+  // 3. 创建TestCompletion实例
+  const completion = new TestCompletion(messages);
+  
+  // 4. 存储累积内容和JSON对象
+  let fullContent = "";
+  let jsonObject: any = null;
+  
+  // 5. 发送请求并处理流式响应
+  const result = await completion.sendMessage(null, (content) => {
+    fullContent = content;
+  });
+  console.log("fullContent",fullContent)
+  // 6. 最终JSON提取（确保获取完整内容）
+  try {
+    // 再次尝试从完整内容中提取JSON
+      jsonObject = extractJSON(fullContent);
+  } catch (e) {
+    console.error("JSON解析失败:", e);
+    console.log("原始内容:", fullContent);
+    throw new Error("生成的响应不符合JSON格式");
+  }
+  
+  return jsonObject;
+}
+
+function extractJSON(str:string){
+  let stack = 0;
+  let startIndex = -1;
+  let result = null;
+
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '{') {
+      if (stack === 0) startIndex = i;
+      stack++;
+    } else if (str[i] === '}') {
+      stack--;
+      if (stack === 0 && startIndex !== -1) {
+        try {
+          result = JSON.parse(str.slice(startIndex, i + 1));
+          break;
+        } catch (e) {
+          // 继续尝试下一个可能的 JSON
+          startIndex = -1;
+        }
+      }
+    }
+  }
+  return result;
+};