feat: 重构统计结果渲染方式, AI助手现在可以获取当前统计结果

Author: LeafYeeXYZ

README.md

@@ -36,6 +36,7 @@
       - [2.5.4 让AI助手操作数据筛选](#254-让ai助手操作数据筛选)
       - [2.5.5 询问AI助手数据分析建议](#255-询问ai助手数据分析建议)
       - [2.5.6 让AI助手介绍PsychPen](#256-让ai助手介绍psychpen)
+      - [2.5.7 让AI助手解释统计结果](#257-让ai助手解释统计结果)
   - [3 变量视图](#3-变量视图)
     - [3.1 变量预览](#31-变量预览)
     - [3.2 定义缺失值](#32-定义缺失值)
@@ -252,6 +253,13 @@ PsychPen 支持所有实现了 [function calling](https://platform.openai.com/do
 
 ![](readme/data-14.png)
 
+#### 2.5.7 让AI助手解释统计结果
+
+> 以下示例使用 `deepseek-chat` (`deepseek-v3-0324` 版本) 模型
+
+| ![](readme/data-15.png) | ![](readme/data-16.png) |
+| :---------------------: | :---------------------: |
+
 ## 3 变量视图
 
 变量视图包含了一系列变量处理相关的功能
@@ -484,7 +492,7 @@ PsychPen 支持所有实现了 [function calling](https://platform.openai.com/do
 
 在统计视图中, 你可以在页面左上角选择你要进行的统计检验类型, 进入对应的统计检验页面
 
-> 注: 本应用的所有显著性标注 \* 均表示 P < 0.05, ** 表示 P < 0.01, \*** 表示 P < 0.001
+> 注: 本应用的所有显著性标注 \* 均表示 P < 0.05, \*\* 表示 P < 0.01, \*\*\* 表示 P < 0.001
 
 ![](readme/stat-1.png)
 

public/smm.png

@@ -26,13 +26,10 @@ import { Messages } from './assistant/Messages'
 import { funcs } from './assistant/funcs'
 
 const GREETTING =
-	'你好, 我是 PsychPen 的 AI 助手, 可以帮你讲解 PsychPen 的使用方法、探索你的数据集、导出数据、跳转页面、变量标准化/中心化/离散化、生成新变量、筛选数据等. 请问有什么可以帮你的?'
+	'你好, 我是 PsychPen 的 AI 助手, 可以帮你讲解 PsychPen 的使用方法、探索你的数据集、导出数据、跳转页面、变量标准化/中心化/离散化、生成新变量、筛选数据、解释你当前的统计结果等. 请问有什么可以帮你的?'
 const INSTRUCTION =
 	'你是在线统计分析和数据可视化软件"PsychPen"中的AI助手. \n\n你将收到用户的提问、当前用户导入到软件中的数据集中的变量的信息、PsychPen的使用和开发文档、可以供你调用的工具 (函数) 信息. \n\n你的任务是按照用户的要求, 对用户进行回复, 或调用工具 (函数). 在调用工具 (函数) 前, 请确保你已经明确知晓了用户的意图, 否则请通过进一步和用户对话来确认细节. \n\n你的回复中如果包含数学公式和符号, 请使用 TeX 语法, 并将行内公式用 `$` 包裹 (类似于 Markdown 的行内代码), 将块级公式用 `$$` 包裹 (类似于 Markdown 的代码块).'
-function GET_PROMPT(
-	vars: Variable[],
-	page: string,
-): string {
+function GET_PROMPT(vars: Variable[], page: string, stat: string): string {
 	const varsInfo = vars.map((col) => {
 		if (col.type === '称名或等级数据') {
 			return `| ${col.name} | ${col.type} | ${col.valid} | ${col.missing} | ${col.unique} | - | - | - | - | - | - |`
@@ -50,7 +47,7 @@ function GET_PROMPT(
 			: '未定义任何子变量'
 		return `| ${col.name} | ${col.type} | ${col.valid} | ${col.missing} | ${col.unique} | ${col.mean?.toFixed(4) || '-'} | ${col.std?.toFixed(4) || '-'} | ${col.q2?.toFixed(4) || '-'} | ${col.min?.toFixed(4) || '-'} | ${col.max?.toFixed(4) || '-'} | ${subVarInfo} |`
 	})
-	const userText = `\n\n# 用户信息\n\n用户当前所处的页面为: ${page}`
+	const userText = `\n\n# 用户信息\n\n用户当前所处的页面为: ${page}${stat && `, 当前统计结果为: \n\n\`\`\`markdown\n${stat}\n\`\`\``}`
 	const varsText = `\n\n# 变量信息\n\n| 变量名 | 变量类型 | 有效值数量 | 缺失值数量 | 唯一值数量 | 均值 | 标准差 | 中位数 | 最小值 | 最大值 | 子变量信息 |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |\n${varsInfo.join('\n')}`
 	const docsText = `\n\n# 使用文档\n\n\`\`\`markdown\n${readme}\n\`\`\``
 	return INSTRUCTION + userText + varsText + docsText
@@ -71,8 +68,17 @@ export function AI() {
 	const data = useData((state) => state.data)
 	const dataCols = useData((state) => state.dataCols)
 	const messageApi = useStates((state) => state.messageApi)
+	const statResult = useStates((state) => state.statResult)
 	const disabled = useStates((state) => state.disabled)
-	const nav = useNav()
+	const activeMainPage = useNav((state) => state.activeMainPage)
+	const currentPageInfo = useNav((state) => state.currentPageInfo)
+	const setMainPage = useNav((state) => state.setMainPage)
+	const setStatisticsViewSubPage = useNav(
+		(state) => state.setStatisticsViewSubPage,
+	)
+	const setVariableViewSubPage = useNav((state) => state.setVariableViewSubPage)
+	const setPlotsViewSubPage = useNav((state) => state.setPlotsViewSubPage)
+	const setToolsViewSubPage = useNav((state) => state.setToolsViewSubPage)
 	const [input, setInput] = useState('')
 	const [loading, setLoading] = useState(false)
 	const [showLoading, setShowLoading] = useState(false)
@@ -100,7 +106,14 @@ export function AI() {
 				setMessages([...old, user])
 				setInput('')
 			})
-			const system = GET_PROMPT(dataCols, nav.currentPageInfo())
+			const system = GET_PROMPT(
+				dataCols,
+				currentPageInfo(),
+				statResult ||
+					(activeMainPage === MAIN_PAGES_LABELS.STATISTICS
+						? '(还未进行统计分析)'
+						: ''),
+			)
 
 			const stream = await ai.chat.completions.create({
 				model: model,
@@ -239,7 +252,7 @@ export function AI() {
 							break
 						}
 						case 'nav_to_data_view': {
-							nav.setMainPage(MAIN_PAGES_LABELS.DATA)
+							setMainPage(MAIN_PAGES_LABELS.DATA)
 							newMessages[1].content = '已成功跳转到数据视图'
 							break
 						}
@@ -251,8 +264,8 @@ export function AI() {
 							) {
 								throw new Error(`未知的子页面 (${page})`)
 							}
-							nav.setMainPage(MAIN_PAGES_LABELS.VARIABLE)
-							nav.setVariableViewSubPage(page)
+							setMainPage(MAIN_PAGES_LABELS.VARIABLE)
+							setVariableViewSubPage(page)
 							newMessages[1].content = `已成功跳转到变量视图的${page}页面`
 							break
 						}
@@ -264,8 +277,8 @@ export function AI() {
 							) {
 								throw new Error(`未知的子页面 (${page})`)
 							}
-							nav.setMainPage(MAIN_PAGES_LABELS.PLOTS)
-							nav.setPlotsViewSubPage(page)
+							setMainPage(MAIN_PAGES_LABELS.PLOTS)
+							setPlotsViewSubPage(page)
 							newMessages[1].content = `已成功跳转到绘图视图的${page}页面`
 							break
 						}
@@ -277,8 +290,8 @@ export function AI() {
 							) {
 								throw new Error(`未知的子页面 (${page})`)
 							}
-							nav.setMainPage(MAIN_PAGES_LABELS.STATISTICS)
-							nav.setStatisticsViewSubPage(page)
+							setMainPage(MAIN_PAGES_LABELS.STATISTICS)
+							setStatisticsViewSubPage(page)
 							newMessages[1].content = `已成功跳转到统计视图的${page}页面`
 							break
 						}
@@ -290,8 +303,8 @@ export function AI() {
 							) {
 								throw new Error(`未知的子页面 (${page})`)
 							}
-							nav.setMainPage(MAIN_PAGES_LABELS.TOOLS)
-							nav.setToolsViewSubPage(page)
+							setMainPage(MAIN_PAGES_LABELS.TOOLS)
+							setToolsViewSubPage(page)
 							newMessages[1].content = `已成功跳转到工具视图的${page}页面`
 							break
 						}

readme/data-15.png

@@ -9,11 +9,6 @@ import type {
 import { useEffect, useRef } from 'react'
 import { md5 } from '../../lib/utils'
 import { ToolCall } from './ToolCall'
-import '../../styles/markdown.css'
-import katex from 'marked-katex-extension'
-import 'katex/dist/katex.min.css'
-
-marked.use(katex({ throwOnError: false }))
 
 export function Messages({
 	messages,

readme/data-16.png

@@ -172,7 +172,7 @@ function NavToPageTool({
 }) {
 	return (
 		<div>
-		  跳转到{' '}
+			跳转到{' '}
 			<Tag color='blue' style={{ margin: 0 }}>
 				{mainPageName}
 			</Tag>
@@ -182,8 +182,8 @@ function NavToPageTool({
 					下的{' '}
 					<Tag color='blue' style={{ margin: 0 }}>
 						{subPageName}
-					</Tag>
-					{' '}页面
+					</Tag>{' '}
+					页面
 				</>
 			)}
 		</div>

src/components/AI.tsx

@@ -1,27 +1,28 @@
 import { CorrRealiability } from '@psych/lib'
 import { Button, Form, Select } from 'antd'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { useData } from '../../lib/hooks/useData'
 import { useStates } from '../../lib/hooks/useStates'
-import { sleep, uuid } from '../../lib/utils'
+import { renderStatResult, sleep } from '../../lib/utils'
 
 type Option = {
 	/** 变量名 */
 	variables: [string, string]
 	/** 分组变量 */
 	group?: string
 }
-type Result = {
-	m: CorrRealiability
-} & Option
 
 export function CorrReliability() {
 	const dataCols = useData((state) => state.dataCols)
 	const dataRows = useData((state) => state.dataRows)
 	const isLargeData = useData((state) => state.isLargeData)
 	const messageApi = useStates((state) => state.messageApi)
-	const [result, setResult] = useState<Result | null>(null)
+	const statResult = useStates((state) => state.statResult)
+	const setStatResult = useStates((state) => state.setStatResult)
+	useEffect(() => {
+		setStatResult('')
+	}, [setStatResult])
 	const [disabled, setDisabled] = useState<boolean>(false)
 	const handleCalculate = async (values: Option) => {
 		try {
@@ -40,7 +41,19 @@ export function CorrReliability() {
 			const g = values.group
 			const group = g ? filteredRows.map((row) => String(row[g])) : undefined
 			const m = new CorrRealiability(x1, x2, group)
-			setResult({ m, ...values })
+			setStatResult(`
+## 1 重测信度/复本信度分析
+
+对前后测变量"${values.variables[0]}"和"${values.variables[1]}"进行重测信度/复本信度分析 (即皮尔逊相关系数)${group ? `, 分组变量为"${g}"` : ''}.
+
+结果如表 1 所示.
+
+> 表 1 - 重测信度/复本信度分析结果
+
+| 分组 | 相关系数(r<sub>xx</sub>) | 测定系数(r<sub>xx</sub><sup>2</sup>) |
+| :---: | :---: | :---: |
+${m.r.map((_, i) => `| ${m.group[i]} | ${m.r[i].toFixed(3)} | ${m.r2[i].toFixed(3)} |`).join('\n')}
+			`)
 			messageApi?.destroy()
 			messageApi?.success(`数据处理完成, 用时 ${Date.now() - timestamp} 毫秒`)
 		} catch (error) {
@@ -105,42 +118,13 @@ export function CorrReliability() {
 			</div>
 
 			<div className='component-result'>
-				{result ? (
+				{statResult ? (
 					<div className='w-full h-full overflow-auto'>
-						<p className='text-lg mb-2 text-center w-full'>
-							重测信度/复本信度分析
-						</p>
-						<table className='three-line-table'>
-							<thead>
-								<tr>
-									<td>分组</td>
-									<td>
-										相关系数(r<sub>xx</sub>)
-									</td>
-									<td>
-										测定系数(r<sub>xx</sub>
-										<sup>2</sup>)
-									</td>
-								</tr>
-							</thead>
-							<tbody>
-								{result.m.r.map((_, i) => (
-									<tr key={uuid()}>
-										<td>{result.m.group[i]}</td>
-										<td>{result.m.r[i].toFixed(3)}</td>
-										<td>{result.m.r2[i].toFixed(3)}</td>
-									</tr>
-								))}
-							</tbody>
-						</table>
-						<p className='text-xs mt-3 text-center w-full'>
-							配对变量: {result.variables.join(', ')}
-						</p>
-						{result.group && (
-							<p className='text-xs mt-2 text-center w-full'>
-								分组变量: {result.group}
-							</p>
-						)}
+						<iframe
+							srcDoc={renderStatResult(statResult)}
+							className='w-full h-full'
+							title='statResult'
+						/>
 					</div>
 				) : (
 					<div className='w-full h-full flex justify-center items-center'>