Quellcode durchsuchen

feat: AI内容生成增加Prompt调试信息

- 后端在结果中返回 debug 信息(prompt、finalPrompt、model)
- 前端增加调试面板显示按钮
- 前端可查看发送给AI的完整Prompt
- 方便调试和优化Prompt模板
MyFramework User vor 5 Monaten
Ursprung
Commit
4c6573d91c

+ 83 - 0
my-uniapp-vue3/src/pages/ai-content/index.vue

@@ -84,6 +84,7 @@
           <text class="card-title">📝 生成结果</text>
           <view class="header-actions">
             <text class="header-action" @click="copyContent">📋 复制</text>
+            <text class="header-action" @click="showDebug = !showDebug">🔧 调试</text>
           </view>
         </view>
 
@@ -94,6 +95,26 @@
           </view>
         </view>
 
+        <!-- 调试信息(Prompt) -->
+        <view v-if="showDebug && generatedDebug" class="debug-section">
+          <view class="debug-header">
+            <text class="debug-title">🔍 调试信息</text>
+            <text class="debug-close" @click="showDebug = false">✕</text>
+          </view>
+          <view class="debug-item">
+            <text class="debug-label">用户输入:</text>
+            <text class="debug-text">{{ generatedDebug.prompt }}</text>
+          </view>
+          <view class="debug-item">
+            <text class="debug-label">发送给AI的Prompt:</text>
+            <text class="debug-text">{{ generatedDebug.finalPrompt }}</text>
+          </view>
+          <view class="debug-item">
+            <text class="debug-label">使用模型:</text>
+            <text class="debug-text">{{ generatedDebug.model }}</text>
+          </view>
+        </view>
+
         <!-- 生成的内容 -->
         <view v-if="generatedContent" class="result-content">
           <text class="content-text">{{ generatedContent }}</text>
@@ -145,11 +166,13 @@ const targetLength = ref(1000);
 const generating = ref(false);
 const generatingProgress = ref('');
 const generatedContent = ref('');
+const generatedDebug = ref<any>(null);  // 调试信息
 const currentTaskId = ref('');
 let pollTimer: ReturnType<typeof setInterval> | null = null;
 
 // UI状态
 const showHelp = ref(false);
+const showDebug = ref(false);  // 是否显示调试信息
 
 const quickTemplates = [
   { label: '朋友圈', text: '发一条朋友圈,分享今天的心情' },
@@ -195,6 +218,8 @@ async function pollTaskStatus(taskId: string) {
       // 任务完成
       stopPolling();
       generatedContent.value = task.result?.content || task.result?.text || '生成内容为空';
+      // 保存调试信息
+      generatedDebug.value = task.result?.debug || null;
       generatingProgress.value = '生成完成';
       generating.value = false;
       uni.hideLoading();
@@ -293,7 +318,9 @@ function reset() {
   currentTaskId.value = '';
   currentStep.value = 0;
   generatedContent.value = '';
+  generatedDebug.value = null;
   generatingProgress.value = '';
+  showDebug.value = false;
 }
 </script>
 
@@ -376,6 +403,62 @@ function reset() {
   color: #4F46E5;
 }
 
+/* 调试信息 */
+.debug-section {
+  background: #f3f4f6;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin-bottom: 24rpx;
+  max-height: 400rpx;
+  overflow-y: auto;
+}
+
+.debug-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.debug-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.debug-close {
+  font-size: 32rpx;
+  color: #9ca3af;
+}
+
+.debug-item {
+  margin-bottom: 16rpx;
+}
+
+.debug-item:last-child {
+  margin-bottom: 0;
+}
+
+.debug-label {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #6b7280;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.debug-text {
+  font-size: 22rpx;
+  color: #374151;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #fff;
+  padding: 12rpx;
+  border-radius: 8rpx;
+  display: block;
+}
+
 /* 表单 */
 .form-item {
   margin-bottom: 32rpx;

+ 14 - 1
server/src/modules/ai-content/ai-content.service.ts

@@ -16,6 +16,9 @@ export interface GenerateTask {
   result?: any;
   error?: string;
   createdAt: Date;
+  // 调试信息
+  prompt?: string;        // 用户原始输入
+  finalPrompt?: string;   // 发送给AI的完整Prompt
 }
 
 // 存储生成任务
@@ -1081,6 +1084,10 @@ ${text}
 5. 直接返回正文内容,用清晰的章节标题组织结构
 6. 目标字数:${targetLength}字左右,如果内容有价值可以超出`;
 
+      // 打印完整 Prompt,方便调试
+      console.log('🤖 [AI异步内容生成] ========== 完整Prompt ==========');
+      console.log(finalPrompt);
+      console.log('🤖 [AI异步内容生成] ========== Prompt结束 ==========');
       console.log('🤖 [AI异步内容生成] 使用模型:', this.model);
 
       // 阶段3:调用AI
@@ -1100,9 +1107,15 @@ ${text}
         type: '通用',
         industry: '通用',
         wordCount: content.length,
+        // 添加调试信息
+        debug: {
+          prompt,              // 用户原始输入
+          finalPrompt,         // 发送给AI的完整Prompt
+          model: this.model,   // 使用的模型
+        }
       };
 
-      updateTask({ result });
+      updateTask({ result, prompt, finalPrompt });
 
       return result;
     } catch (error: any) {