feat: generate research report

components/DeepResearch.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-  import { deepResearch, type PartialSearchResult, type ResearchStep } from '~/lib/deep-research'
+  import { deepResearch, type PartialSearchResult, type ResearchResult, type ResearchStep } from '~/lib/deep-research'
   import type { TreeNode } from './Tree.vue'
 
+  const emit = defineEmits<{
+    (e: 'complete', results: ResearchResult): void
+  }>()
+
   const tree = ref<TreeNode>({
     id: '0',
     label: 'Start',
     children: [],
   })
-  const selectedNode = ref<TreeNode | null>(null)
+  const selectedNode = ref<TreeNode>()
   const searchResults = ref<Record<string, PartialSearchResult>>({})
 
-  const modelValue = computed(() => Object.values(searchResults.value))
-
   function handleResearchProgress(step: ResearchStep) {
     let node: TreeNode | null = null
     let nodeId = ''
@@ -23,14 +25,10 @@
         node.status = step.type
       }
     }
-    console.log('step', step)
 
     switch (step.type) {
       case 'generating_query': {
         if (!node) {
-          console.error('Creating new node', {
-            nodeId,
-          })
           // 创建新节点
           node = {
             id: nodeId,
@@ -60,22 +58,16 @@
       }
 
       case 'generated_query': {
-        if (node) {
-        }
         break
       }
 
       case 'searching': {
-        if (node) {
-          // node.label = `Searching: ${node.query}`
-        }
         break
       }
 
       case 'search_complete': {
         if (node) {
           node.visitedUrls = step.urls
-          // node.label = `Found ${step.urls.length} results for: ${node.query}`
         }
         break
       }
@@ -101,7 +93,7 @@
         break
 
       case 'complete':
-        console.log('Research complete')
+        emit('complete', step)
         break
     }
   }
@@ -121,6 +113,14 @@
     return null
   }
 
+  function selectNode(node: TreeNode) {
+    if (selectedNode.value?.id === node.id) {
+      selectedNode.value = undefined
+    } else {
+      selectedNode.value = node
+    }
+  }
+
   // 辅助函数：获取节点的父节点 ID
   function getParentNodeId(nodeId: string): string {
     const parts = nodeId.split('-')
@@ -128,24 +128,13 @@
     return parts.join('-')
   }
 
-  async function startResearch(
+  async function startResearch(query: string, depth: number, breadth: number) {
-    query: string,
-    depth: number,
-    breadth: number,
-    feedback: { assistantQuestion: string; userAnswer: string }[],
-  ) {
-    console.log('startResearch', query, depth, breadth, feedback)
     tree.value.children = []
-    selectedNode.value = null
+    selectedNode.value = undefined
     searchResults.value = {}
     try {
-      const combinedQuery = `
-Initial Query: ${query}
-Follow-up Questions and Answers:
-${feedback.map((qa) => `Q: ${qa.assistantQuestion}\nA: ${qa.userAnswer}`).join('\n')}
-    `
       await deepResearch({
-        query: combinedQuery,
+        query,
         maxDepth: depth,
         breadth,
         onProgress: handleResearchProgress,
@@ -163,15 +152,20 @@ ${feedback.map((qa) => `Q: ${qa.assistantQuestion}\nA: ${qa.userAnswer}`).join('
 <template>
   <UCard>
     <template #header>
-      <h2 class="font-bold">Deep Research</h2>
+      <h2 class="font-bold">3. Web Browsing</h2>
-      <p class="text-sm text-gray-500">Click a child node to view details</p>
+      <p class="text-sm text-gray-500">
+        The AI will then search the web based on our research goal, and iterate until the depth is reached.
+        <br />
+        Click a child node to view details.
+      </p>
     </template>
     <div class="flex flex-col">
       <div class="overflow-y-auto">
-        <Tree :node="tree" :selected-node="selectedNode" @select="selectedNode = $event" />
+        <Tree :node="tree" :selected-node="selectedNode" @select="selectNode" />
       </div>
       <div v-if="selectedNode" class="p-4">
-        <h2 class="text-xl font-bold">{{ selectedNode.label }}</h2>
+        <USeparator label="Node Details" />
+        <h2 class="text-xl font-bold mt-2">{{ selectedNode.label }}</h2>
 
         <!-- Root node has no additional information -->
         <p v-if="selectedNode.id === '0'"> This is the beginning of your deep research journey! </p>

components/ResearchFeedback.vue

@@ -9,12 +9,10 @@
   }
 
   defineEmits<{
-    (e: 'submit'): void
+    (e: 'submit', feedback: ResearchFeedbackResult[]): void
   }>()
 
-  const modelValue = defineModel<ResearchFeedbackResult[]>({
+  const feedback = ref<ResearchFeedbackResult[]>([])
-    default: () => [],
-  })
 
   const { messages, input, error, handleSubmit, isLoading } = useChat({
     api: '/api/generate-feedback',
@@ -22,9 +20,9 @@
 
   const isSubmitButtonDisabled = computed(
     () =>
-      !modelValue.value.length ||
+      !feedback.value.length ||
       // All questions should be answered
-      modelValue.value.some((v) => !v.assistantQuestion || !v.userAnswer) ||
+      feedback.value.some((v) => !v.assistantQuestion || !v.userAnswer) ||
       // Should not be loading
       isLoading.value,
   )
@@ -47,7 +45,7 @@
     messages.value = []
     input.value = ''
     error.value = undefined
-    modelValue.value = []
+    feedback.value = []
   }
 
   watch(messages, (m) => {
@@ -65,25 +63,25 @@
 
     if (parseResult.state === 'repaired-parse' || parseResult.state === 'successful-parse') {
       if (!isObject(parseResult.value) || Array.isArray(parseResult.value)) {
-        return (modelValue.value = [])
+        return (feedback.value = [])
       }
       const unsafeQuestions = parseResult.value.questions
-      if (!unsafeQuestions || !Array.isArray(unsafeQuestions)) return (modelValue.value = [])
+      if (!unsafeQuestions || !Array.isArray(unsafeQuestions)) return (feedback.value = [])
 
       const questions = unsafeQuestions.filter((s) => typeof s === 'string')
       // Incrementally update modelValue
       for (let i = 0; i < questions.length; i += 1) {
-        if (modelValue.value[i]) {
+        if (feedback.value[i]) {
-          modelValue.value[i].assistantQuestion = questions[i]
+          feedback.value[i].assistantQuestion = questions[i]
         } else {
-          modelValue.value.push({
+          feedback.value.push({
             assistantQuestion: questions[i],
             userAnswer: '',
           })
         }
       }
     } else {
-      modelValue.value = []
+      feedback.value = []
     }
   })
 
@@ -101,16 +99,21 @@
 
 <template>
   <UCard>
+    <template #header>
+      <h2 class="font-bold">2. Model Feedback</h2>
+      <p class="text-sm text-gray-500"> The AI will ask you some follow up questions to help you clarify the research direction. </p>
+    </template>
+
     <div class="flex flex-col gap-2">
-      <div v-if="!modelValue.length && !error">Waiting for model feedback...</div>
+      <div v-if="!feedback.length && !error">Waiting for model feedback...</div>
       <template v-else>
         <div v-if="error" class="text-red-500">{{ error }}</div>
-        <div v-for="(feedback, index) in modelValue" class="flex flex-col gap-2" :key="index">
+        <div v-for="(feedback, index) in feedback" class="flex flex-col gap-2" :key="index">
           Assistant: {{ feedback.assistantQuestion }}
           <UInput v-model="feedback.userAnswer" />
         </div>
       </template>
-      <UButton color="primary" :loading="isLoading" :disabled="isSubmitButtonDisabled" block @click="$emit('submit')">
+      <UButton color="primary" :loading="isLoading" :disabled="isSubmitButtonDisabled" block @click="$emit('submit', feedback)">
         Submit Answer
       </UButton>
     </div>

components/ResearchForm.vue

@@ -1,51 +1,4 @@
-<template>
-  <div class="max-w-4xl mx-auto">
-    <UCard>
-      <div class="flex flex-col gap-2">
-        <UFormField label="Research Topic" required>
-          <UTextarea class="w-full" v-model="input" :rows="3" placeholder="Enter the topic you want to research..." required />
-        </UFormField>
-
-        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-          <UFormField label="Breadth" help="Suggested range: 3-10">
-            <UInput v-model="breadth" class="w-full" type="number" :min="3" :max="10" :step="1" />
-          </UFormField>
-
-          <UFormField label="Depth" help="Suggested range: 1-5">
-            <UInput v-model="depth" class="w-full" type="number" :min="1" :max="5" :step="1" />
-          </UFormField>
-
-          <UFormField label="Number of Questions" help="Suggested range: 1-10">
-            <UInput v-model="numQuestions" class="w-full" type="number" :min="1" :max="5" :step="1" />
-          </UFormField>
-        </div>
-      </div>
-
-      <template #footer>
-        <UButton type="submit" color="primary" :loading="isLoading" block @click="handleSubmit">
-          {{ isLoading ? 'Researching...' : 'Start Research' }}
-        </UButton>
-      </template>
-    </UCard>
-
-    <div v-if="result" class="mt-8">
-      <UCard>
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h2 class="text-xl font-semibold">研究报告</h2>
-            <UButton color="info" variant="ghost" icon="i-heroicons-document-duplicate" @click="copyReport" />
-          </div>
-        </template>
-        <div class="prose max-w-none dark:prose-invert" v-html="renderedReport"></div>
-      </UCard>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-  import { marked } from 'marked'
-  import { UFormField } from '#components'
-
   export interface ResearchInputData {
     query: string
     breadth: number
@@ -58,17 +11,10 @@
   }>()
 
   const input = ref('天空为什么是蓝的？')
-  const breadth = ref(3)
+  const breadth = ref(2)
   const depth = ref(2)
-  const numQuestions = ref(1)
+  const numQuestions = ref(3)
   const isLoading = ref(false)
-  const result = ref<any>(null)
-  const toast = useToast()
-
-  const renderedReport = computed(() => {
-    if (!result.value?.report) return ''
-    return marked(result.value.report)
-  })
 
   function handleSubmit() {
     emit('submit', {
@@ -82,24 +28,40 @@
   onMounted(() => {
     input.value = '天空为什么是蓝的？' // default
   })
-
-  async function copyReport() {
-    if (!result.value?.report) return
-
-    try {
-      await navigator.clipboard.writeText(result.value.report)
-      toast.add({
-        title: '复制成功',
-        description: '研究报告已复制到剪贴板',
-        icon: 'i-lucide-badge-check',
-      })
-    } catch (e) {
-      toast.add({
-        title: '复制失败',
-        description: '无法复制到剪贴板',
-        icon: 'i-lucide-x',
-        color: 'error',
-      })
-    }
-  }
 </script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="font-bold">1. Research Topic</h2>
+    </template>
+    <div class="flex flex-col gap-2">
+      <UFormField label="Research Topic" required>
+        <UTextarea class="w-full" v-model="input" :rows="3" placeholder="Enter whatever you want to research..." required />
+      </UFormField>
+
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <UFormField label="Number of Questions">
+          <template #help> Number of questions for you to clarify. </template>
+          <UInput v-model="numQuestions" class="w-full" type="number" :min="1" :max="5" :step="1" />
+        </UFormField>
+
+        <UFormField label="Depth">
+          <template #help> How deep you want to dig. </template>
+          <UInput v-model="depth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+        </UFormField>
+
+        <UFormField label="Breadth">
+          <template #help> Number of searches in each depth. </template>
+          <UInput v-model="breadth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+        </UFormField>
+      </div>
+    </div>
+
+    <template #footer>
+      <UButton type="submit" color="primary" :loading="isLoading" block @click="handleSubmit">
+        {{ isLoading ? 'Researching...' : 'Start Research' }}
+      </UButton>
+    </template>
+  </UCard>
+</template>

components/ResearchReport.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+  import { marked } from 'marked'
+  import { writeFinalReport, type WriteFinalReportParams } from '~/lib/deep-research'
+
+  interface CustomReportParams extends WriteFinalReportParams {
+    visitedUrls: string[]
+  }
+
+  const error = ref('')
+  const loading = ref(false)
+  const loadingExportPdf = ref(false)
+  const reportContent = ref('')
+  const reportHtml = computed(() => marked(reportContent.value))
+  const isExportButtonDisabled = computed(() => !reportContent.value || loading.value || loadingExportPdf.value)
+
+  async function generateReport(params: CustomReportParams) {
+    loading.value = true
+    error.value = ''
+    reportContent.value = ''
+    try {
+      for await (const chunk of writeFinalReport(params).textStream) {
+        reportContent.value += chunk
+      }
+      reportContent.value += `\n\n## Sources\n\n${params.visitedUrls.map((url) => `- ${url}`).join('\n')}`
+    } catch (e: any) {
+      console.error(`Generate report failed`, e)
+      error.value = e.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function exportToPdf() {
+    loadingExportPdf.value = true
+    try {
+      // 动态导入 html2pdf，确保只在客户端执行
+      // @ts-ignore
+      const html2pdf = (await import('html2pdf.js')).default
+
+      const element = document.getElementById('report-content')
+
+      if (element) {
+        const opt = {
+          margin: [10, 10],
+          filename: 'research-report.pdf',
+          image: { type: 'jpeg', quality: 0.98 },
+          html2canvas: { scale: 2 },
+          jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
+        }
+
+        await html2pdf().set(opt).from(element).save()
+      }
+    } catch (error) {
+      console.error('Export to PDF failed:', error)
+    } finally {
+      loadingExportPdf.value = false
+    }
+  }
+
+  defineExpose({
+    generateReport,
+    exportToPdf,
+  })
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <h2 class="font-bold">4. Research Report</h2>
+        <UButton
+          color="info"
+          variant="ghost"
+          icon="i-lucide-download"
+          :disabled="isExportButtonDisabled"
+          :loading="loadingExportPdf"
+          @click="exportToPdf"
+        >
+          Export PDF
+        </UButton>
+      </div>
+    </template>
+
+    <div
+      v-if="reportContent"
+      id="report-content"
+      class="prose prose-sm max-w-none p-6 bg-gray-50 dark:bg-gray-800 dark:text-white rounded-lg shadow"
+      v-html="reportHtml"
+    />
+    <template v-else>
+      <div v-if="error" class="text-red-500">{{ error }}</div>
+      <div v-else>{{ loading ? 'Generating report...' : 'Waiting for report..' }}.</div>
+    </template>
+  </UCard>
+</template>

components/Tree.vue

@@ -17,7 +17,7 @@
 
   const props = defineProps<{
     node: TreeNode
-    selectedNode: TreeNode | null
+    selectedNode?: TreeNode
   }>()
 
   const emit = defineEmits<{

lib/deep-research.ts

@@ -9,6 +9,17 @@ import { systemPrompt } from './prompt';
 import zodToJsonSchema from 'zod-to-json-schema';
 import { tavily, type TavilySearchResponse } from '@tavily/core';
 
+export type ResearchResult = {
+  learnings: string[];
+  visitedUrls: string[];
+};
+
+
+export interface WriteFinalReportParams {
+  prompt: string;
+  learnings: string[];
+}
+
 // Used for streaming response
 export type SearchQuery = z.infer<typeof searchQueriesTypeSchema>['queries'][0];
 export type PartialSearchQuery = DeepPartial<SearchQuery>;
@@ -23,7 +34,7 @@ export type ResearchStep =
   | { type: 'processing_serach_result'; query: string; result: PartialSearchResult; nodeId: string }
   | { type: 'processed_search_result'; query: string; result: SearchResult; nodeId: string }
   | { type: 'error'; message: string; nodeId: string }
-  | { type: 'complete' };
+  | { type: 'complete'; learnings: string[], visitedUrls: string[] };
 
 // increase this if you have higher API rate limits
 const ConcurrencyLimit = 2;
@@ -138,36 +149,30 @@ function processSearchResult({
   });
 }
 
-export async function writeFinalReport({
+export function writeFinalReport({
   prompt,
   learnings,
-  visitedUrls,
+}: WriteFinalReportParams) {
-}: {
-  prompt: string;
-  learnings: string[];
-  visitedUrls: string[];
-}) {
   const learningsString = trimPrompt(
     learnings
       .map(learning => `<learning>\n${learning}\n</learning>`)
       .join('\n'),
     150_000,
   );
+  const _prompt = [
+    `Given the following prompt from the user, write a final report on the topic using the learnings from research. Make it as as detailed as possible, aim for 3 or more pages, include ALL the learnings from research:`,
+    `<prompt>${prompt}</prompt>`,
+    `Here are all the learnings from previous research:`,
+    `<learnings>\n${learningsString}\n</learnings>`,
+    `Write the report in Markdown.`,
+    `## Deep Research Report`
+  ].join('\n\n');
 
-  const res = await generateObject({
+  return streamText({
     model: o3MiniModel,
     system: systemPrompt(),
-    prompt: `Given the following prompt from the user, write a final report on the topic using the learnings from research. Make it as as detailed as possible, aim for 3 or more pages, include ALL the learnings from research:\n\n<prompt>${prompt}</prompt>\n\nHere are all the learnings from previous research:\n\n<learnings>\n${learningsString}\n</learnings>`,
+    prompt: _prompt,
-    schema: z.object({
-      reportMarkdown: z
-        .string()
-        .describe('Final report on the topic in Markdown'),
-    }),
   });
-
-  // Append the visited URLs section to the report
-  const urlsSection = `\n\n## Sources\n\n${visitedUrls.map(url => `- ${url}`).join('\n')}`;
-  return res.object.reportMarkdown + urlsSection;
 }
 
 function childNodeId(parentNodeId: string, currentIndex: number) {
@@ -192,7 +197,7 @@ export async function deepResearch({
   onProgress: (step: ResearchStep) => void;
   currentDepth?: number;
   nodeId?: string
-}): Promise<void> {
+}): Promise<ResearchResult> {
   try {
     const searchQueriesResult = generateSearchQueries({
       query,
@@ -229,10 +234,13 @@ export async function deepResearch({
       });
     }
 
-    await Promise.all(
+    const results = await Promise.all(
       searchQueries.map((searchQuery, i) =>
         limit(async () => {
-          if (!searchQuery?.query) return
+          if (!searchQuery?.query) return {
+            learnings: [],
+            visitedUrls: [],
+          }
           onProgress({
             type: 'searching',
             query: searchQuery.query,
@@ -326,6 +334,21 @@ export async function deepResearch({
         }),
       ),
     );
+    // Conclude results
+    const _learnings = [...new Set(results.flatMap(r => r.learnings))]
+    const _visitedUrls = [...new Set(results.flatMap(r => r.visitedUrls))]
+    // Complete should only be called once
+    if (nodeId === '0') {
+      onProgress({
+        type: 'complete',
+        learnings: _learnings,
+        visitedUrls: _visitedUrls,
+      });
+    }
+    return {
+      learnings: _learnings,
+      visitedUrls: _visitedUrls,
+    }
   } catch (error: any) {
     console.error(error);
     onProgress({
@@ -333,9 +356,9 @@ export async function deepResearch({
       message: error?.message ?? 'Something went wrong',
       nodeId,
     })
+    return {
+      learnings: [],
+      visitedUrls: [],
+    }
   }
-
-  onProgress({
-    type: 'complete',
-  });
 }

package.json

@@ -20,6 +20,7 @@
     "@tavily/core": "^0.0.3",
     "@types/lodash-es": "^4.17.12",
     "ai": "^4.1.28",
+    "html2pdf.js": "^0.9.3",
     "js-tiktoken": "^1.0.18",
     "lodash-es": "^4.17.21",
     "marked": "^15.0.7",

pages/index.vue

@@ -2,11 +2,14 @@
   <div>
     <UContainer>
       <div class="max-w-4xl mx-auto py-8 space-y-4">
+        <div class="flex items-center justify-between">
           <h1 class="text-3xl font-bold text-center mb-2"> Deep Research Assistant </h1>
-        <ColorModeButton></ColorModeButton>
+          <ColorModeButton />
+        </div>
         <ResearchForm @submit="generateFeedback" />
-        <ResearchFeedback v-model="result.feedback" ref="feedbackRef" @submit="startDeepSearch" />
+        <ResearchFeedback ref="feedbackRef" @submit="startDeepSearch" />
-        <DeepResearch ref="deepResearchRef" class="mb-8" />
+        <DeepResearch ref="deepResearchRef" @complete="generateReport" class="mb-8" />
+        <ResearchReport ref="reportRef" />
       </div>
     </UContainer>
   </div>
@@ -15,44 +18,48 @@
 <script setup lang="ts">
   import type ResearchFeedback from '~/components/ResearchFeedback.vue'
   import type DeepResearch from '~/components/DeepResearch.vue'
+  import type ResearchReport from '~/components/ResearchReport.vue'
   import type { ResearchInputData } from '~/components/ResearchForm.vue'
   import type { ResearchFeedbackResult } from '~/components/ResearchFeedback.vue'
-
+  import type { ResearchResult } from '~/lib/deep-research'
-  interface DeepResearchResult {
-    feedback: Array<ResearchFeedbackResult>
-  }
 
   useHead({
-    title: 'Deep Research Assistant - AI 深度研究助手',
+    title: 'Deep Research Web UI',
-    meta: [
-      {
-        name: 'description',
-        content: '基于 AI 的深度研究助手，可以对任何主题进行迭代式深入研究',
-      },
-    ],
-  })
-
-  const inputData = ref<ResearchInputData>()
-  const result = ref<DeepResearchResult>({
-    feedback: [],
-  })
-  const searchTree = ref({
-    root: null,
-    currentDepth: 0,
-    maxDepth: 0,
-    maxBreadth: 0,
   })
 
   const feedbackRef = ref<InstanceType<typeof ResearchFeedback>>()
   const deepResearchRef = ref<InstanceType<typeof DeepResearch>>()
+  const reportRef = ref<InstanceType<typeof ResearchReport>>()
+
+  const inputData = ref<ResearchInputData>()
+  const feedback = ref<ResearchFeedbackResult[]>([])
+  const researchResult = ref<ResearchResult>()
+
+  function getCombinedQuery() {
+    return `
+Initial Query: ${inputData.value?.query}
+Follow-up Questions and Answers:
+${feedback.value.map((qa) => `Q: ${qa.assistantQuestion}\nA: ${qa.userAnswer}`).join('\n')}
+    `
+  }
 
   async function generateFeedback(data: ResearchInputData) {
     inputData.value = data
     feedbackRef.value?.getFeedback(data.query, data.numQuestions)
   }
 
-  async function startDeepSearch() {
+  async function startDeepSearch(_feedback: ResearchFeedbackResult[]) {
     if (!inputData.value) return
-    deepResearchRef.value?.startResearch(inputData.value.query, inputData.value.breadth, inputData.value.depth, result.value.feedback)
+    feedback.value = _feedback
+    deepResearchRef.value?.startResearch(getCombinedQuery(), inputData.value.breadth, inputData.value.depth)
+  }
+
+  async function generateReport(_researchResult: ResearchResult) {
+    researchResult.value = _researchResult
+    reportRef.value?.generateReport({
+      prompt: getCombinedQuery(),
+      learnings: researchResult.value?.learnings ?? [],
+      visitedUrls: researchResult.value?.visitedUrls ?? [],
+    })
   }
 </script>