-
-
- Deploy Now
-
-
- Documentation
-
+
+
+
+
+
+
+
+
工业 AI 交互画布
+
+ intelligent_cabin NLU · 大流程 {flowMode} · Artifact 状态机
+
+
+
+
+
+
+
+
+
+ {flowMode === "A" ? "大流程 A · 普通对话" : "大流程 B · 调机流程中"}
+
+
+ {flowMode === "A"
+ ? "无激活调机流程：输入经过四阶段 Pipeline → intelligent_cabin NLU。"
+ : "GuidedProcedure 激活：短指令优先操作当前步骤，其他结果进入参考区。"}
+
+
+
+
+ 演示工具 · 直接触发（无需 NLU）
+
+
+
+
+
+
+
+
+ {activeArtifact ? (
+
+ ) : (
+
+ )}
+
);
}
+
+// ── 工具函数 ─────────────────────────────────────────────────────────────────
+
+function inferInputSource(text: string): ArtifactActionEvent["source"] {
+ return /^(语音|voice|asr)[:：]/i.test(text.trim()) ? "voice" : "text";
+}
+
+// ── 纯展示组件 ───────────────────────────────────────────────────────────────
+
+function MessageList({ messages }: { messages: ChatMessage[] }) {
+ return (
+
+
+ {messages.length === 0 && (
+
+ 输入任意文字，经 Pipeline → intelligent_cabin NLU 处理后显示结果。
+ 服务地址：NEXT_PUBLIC_NLU_BASE_URL（默认 localhost:8000）
+
+ )}
+ {messages.map((message) => (
+
+
+
+ {message.role === "user" ? (
+
+ ) : message.role === "error" ? (
+
+ ) : (
+
+ )}
+ {message.role === "user"
+ ? "用户"
+ : message.role === "system"
+ ? "系统"
+ : message.role === "error"
+ ? "错误"
+ : "AI"}
+
+ {message.text}
+
+
+ ))}
+
+
+ );
+}
+
+function EmptyCanvas() {
+ return (
+
+
+
+
+
+
等待 intelligent_cabin NLU 响应
+
+ 输入会经过四阶段处理链路：停止词 → UI 语音点击 → 槽位填写 → BERT NLU。
+ NLU 服务需在 NEXT_PUBLIC_NLU_BASE_URL（默认 localhost:8000）运行。
+
+
+
+ );
+}
diff --git a/src/app/practice/page.tsx b/src/app/practice/page.tsx
new file mode 100644
index 0000000..cc11a41
--- /dev/null
+++ b/src/app/practice/page.tsx
@@ -0,0 +1,209 @@
+'use client';
+import { useState, useRef, useEffect } from 'react';
+import { useChat } from 'ai/react';
+
+export default function Practice() {
+ const { messages, append } = useChat();
+ const [inputValue, setInputValue] = useState('');
+ console.log("当前的消息记录是：", messages);
+ // ==========================================
+ // 📝 进阶练习：自动滚屏与画中画 (Artifacts)
+ //
+ // 【要求】：补全任务 7 到 10。完成后你的页面将拥有“天气卡片”和自动滚屏功能！
+ // ==========================================
+
+ // 💡 任务 7：创建一个“锚点”，用来指向聊天列表的最底部
+ const messagesEndRef = useRef
(null);
+
+
+ // 💡 任务 8：写一个 useEffect 监听器，只要 messages 变化，就让页面平滑滚动到上面创建的锚点
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }, [messages]);
+
+ // 💡 任务 9：从 messages 里找出最后一次使用的工具（Tool）
+ // 提示：这行代码可以直接参考最终答案，主要是理解它在干嘛
+ const lastMessageWithTool = messages.slice().reverse().find(m => m.toolInvocations && m.toolInvocations.length > 0);
+ const activeTool = lastMessageWithTool?.toolInvocations?.[lastMessageWithTool.toolInvocations.length - 1];
+
+ const handleSend = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!inputValue.trim()) return;
+ append({ role: 'user', content: inputValue });
+ setInputValue('');
+ };
+
+ return (
+
+
+ {/* ================= 左侧：聊天区 ================= */}
+
+
💬 聊天区
+
+
+ {messages.length === 0 &&
暂无消息...
}
+
+ {messages.map(m => (
+
+
+ {m.role === 'user' ? '你：' : 'AI：'}
+
+
+ {/* 这里加了一个小判断，如果是工具调用，就在左边显示一行提示，不再显示一大坨代码 */}
+ {m.toolInvocations ? (
+ [生成了一个组件，请看右侧画布]
+ ) : (
+ {m.content}
+ )}
+
+ ))}
+
+ {/* 💡 任务 7 的搭档：在这里把那个看不见的锚点埋下 */}
+ {/*
*/}
+
+
+
+
+
+
+ {/* ================= 右侧：画布区 (Artifacts) ================= */}
+
+
+ {/* 💡 任务 10：完成条件渲染逻辑 */}
+ {/*
+ 如果 activeTool 不存在，显示一段提示文字："等待 AI 召唤画布..."
+ 如果 activeTool 存在，并且 activeTool.toolName === 'getWeather'，并且 activeTool.state === 'result'，
+ 就用一个好看的 div 把 activeTool.args.location 和 activeTool.result.temperature 显示出来！
+ */}
+ {!activeTool ? (
+
+ ) : (
+
+ {activeTool.state === 'result' && activeTool.toolName === 'getWeather' && (
+
+
{activeTool.args.location}
+
+ {activeTool.result.temperature}°C
+
+
天气状况：{activeTool.result.condition}
+
+ )}
+
+ )}
+
+
+
+
+
+ {/* 答案区域在下面 */}
+
+
+ 👉 点击查看答案
+
+{`// 答案代码：
+'use client';
+import { useState, useRef, useEffect } from 'react';
+import { useChat } from 'ai/react';
+
+export default function Practice() {
+ const { messages, append } = useChat();
+ const [inputValue, setInputValue] = useState('');
+
+ // 任务 7：创建锚点
+ const messagesEndRef = useRef(null);
+
+ // 任务 8：监听 messages 并滚动
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }, [messages]);
+
+ // 任务 9：提取最后一个工具
+ const lastMessageWithTool = messages.slice().reverse().find(m => m.toolInvocations && m.toolInvocations.length > 0);
+ const activeTool = lastMessageWithTool?.toolInvocations?.[lastMessageWithTool.toolInvocations.length - 1];
+
+ const handleSend = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!inputValue.trim()) return;
+ append({ role: 'user', content: inputValue });
+ setInputValue('');
+ };
+
+ return (
+
+
+
+
💬 聊天区
+
+
+ {messages.length === 0 &&
暂无消息...
}
+
+ {messages.map(m => (
+
+
+ {m.role === 'user' ? '你：' : 'AI：'}
+
+
+ {m.toolInvocations ? (
+ [生成了一个组件，请看右侧画布]
+ ) : (
+ {m.content}
+ )}
+
+ ))}
+
+ {/* 任务 7：埋下锚点 */}
+
+
+
+
+
+
+
+
+ {/* 任务 10：条件渲染画布 */}
+ {!activeTool ? (
+
+ ) : (
+
+ {activeTool.state === 'result' && activeTool.toolName === 'getWeather' && (
+
+
{activeTool.args.location}
+
+ {activeTool.result.temperature}°C
+
+
天气状况：{activeTool.result.condition}
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
{eyebrow}
+
{artifact.title}
+
+
+
+ {statusLabel[artifact.status]}
+
+
{children}
+
+ );
+}
+
+function ArtifactActions({
+ artifact,
+ onAction,
+}: {
+ artifact: InteractionArtifact;
+ onAction: (action: ArtifactAction, value?: unknown) => void;
+}) {
+ if (artifact.actions.length === 0) return null;
+
+ const voiceHints = artifact.actions.flatMap((action) => action.voiceAliases ?? []).slice(0, 3);
+
+ return (
+
+ {voiceHints.length > 0 && artifact.status === "waiting_confirmation" && (
+
+ 可说：{voiceHints.join(" / ")}
+
+ )}
+
+ {artifact.actions.map((action) => (
+
+ ))}
+
+
+
+
{props.deviceName}
+
{props.parameterName}
+
{props.impact}
+
{props.executionNote}
+
+
+
+
+
+
+ {artifact.status === "running" ? (
+
+ ) : artifact.status === "success" ? (
+
+ ) : artifact.status === "failed" ? (
+
+ ) : (
+
+ )}
+
+ {artifact.status === "success"
+ ? "参数已写入，画布保留本次修改快照。"
+ : artifact.status === "running"
+ ? "正在模拟写入参数..."
+ : artifact.status === "failed"
+ ? "参数写入失败，可以修改后重试。"
+ : "请确认前后值无误后再执行。"}
+
+
+
+
+
{label}
+
+ {value}
+ {unit && {unit}}
+
+
+
+
+
{props.deviceKind.toUpperCase()}
+
{props.deviceName}
+
{props.executionNote}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {props.progressLabel ?? "执行进度"}
+ {artifact.status === "success" ? "100%" : artifact.status === "running" ? "64%" : "0%"}
+
+
+
+
+
+
+
+ {isPump && (
+
+
+
+
+
+
+
+ )}
+
+ {isLight && active && (
+ <>
+
+
+
+ )}
+
+
+
+
+
+ {label}
+ {value}
+
+ );
+}
+
+function KnowledgeLessonArtifact({
+ artifact,
+ onAction,
+}: ArtifactComponentProps>) {
+ const props = artifact.props as KnowledgeLessonProps;
+
+ return (
+
+
+
+
先看结论
+
{props.conclusion}
+
+
+ {props.blocks.map((block, index) => (
+
+ ))}
+
+
{block.text}
;
+ }
+
+ if (block.type === "key_points") {
+ return (
+
+
关键点
+
+ {block.items.map((item) => (
+
+ {item}
+
+ ))}
+
+
+
处理步骤
+
+ {block.steps.map((step, index) => (
+
+
{index + 1}
+
+
{step.title}
+
{step.body}
+
+
+ ))}
+
+
+
+ {open &&
{block.markdown}
}
+
+
来源
+
+ {block.citations.map((citation) => (
+
+ {citation.title} · {citation.location}
+
+ ))}
+
+
+
+
{props.deviceName}
+
{props.procedureName}
+
+ {props.steps.map((step, index) => (
+
+
+ {index + 1}
+ {step.title}
+
+
+ ))}
+
+
+
+
+ {activeStep ? (
+ <>
+
+
+ {activeStep.type === "measurement_input" ? : }
+
+
+
第 {activeIndex + 1} 步
+
{activeStep.title}
+
+
+
{activeStep.instruction}
+ {activeStep.expectedFeedback && (
+
+
可输入反馈
+
+ {activeStep.expectedFeedback.map((feedback) => (
+
+ {feedback}
+
+ ))}
+
+
+ )}
+
+ ) : (
+
+
+ 流程已经完成。
+
+ )}
+
+
+
+ 选择材料规格后，系统将根据成型工艺数据自动计算各模具伺服位置并写入。
+
+
+
+
+
+
+
+
+
+ {/* 预览标签 */}
+
+ {material}
+ 圆管 Φ{od}
+ × 壁厚 {thickness} mm
+
+
+
+
+
+
+
+
+
正在调节模具伺服位置…
+
+ {material} · Φ{od} × {thickness}mm
+
+
+ {/* 成功提示 */}
+
+
+
+
调节完成
+
+ {material} · Φ{od} × {thickness}mm · {dies.length} 个模具
+
+
+
+
+ {/* 位置表 */}
+
+
+
+
+ | 模具 |
+ X 位置 (mm) |
+ Y 位置 (mm) |
+
+
+
+ {dies.map((die) => (
+
+ | {die.label} |
+ {die.xPos.toFixed(3)} |
+ {die.yPos.toFixed(3)} |
+
+ ))}
+
+
+
+
+
+
+
+
+
模具伺服调节
+
{artifact.title}
+
+ {step === "done" && (
+
+ 已完成
+
+ )}
+
+ {step === "form" &&
}
+ {step === "adjusting" && result === null && (
+
+ )}
+ {step === "adjusting" && (
+
+ )}
+ {step === "done" && result && (
+
+ )}
+
+
+
{die.label}
+ {stageLabel}
+
+
+ {/* 大截面图 */}
+
+
+
+
+ {/* 只显示 X / Y */}
+
+
+ X 位置
+
+ {die.xPos.toFixed(3)} mm
+
+
+
+ Y 位置
+
+ {die.yPos.toFixed(3)} mm
+
+
+
+
+
+
+
+
+
+ 模具位置总览
+
+
{artifact.title}
+
+ {props.lastScanTime && (
+
读取时间：{props.lastScanTime}
+ )}
+
+
+
+ {/* 左：模具格子 */}
+
+
+ 截面线图展示该模具出口处管材的成型状态（平板 → 圆管）· 点击查看坐标
+
+
+ {props.dies.map((die) => (
+
+ setSelectedIdx(selectedIdx === die.dieIndex ? null : die.dieIndex)
+ }
+ />
+ ))}
+
+
+
+ {/* 右：详情 */}
+ {selectedDie && (
+
+
+
+ )}
+
+
+ {block.text}
+
+ );
+ }
+
+ if (block.type === "key_points") {
+ return (
+
+
关键点
+
+ {block.items.map((item) => (
+
+
+ {item}
+
+ ))}
+
+
+
+ 处理步骤
+
+
+ {block.steps.map((step, index) => (
+
+
+ {index + 1}
+
+
+
{step.title}
+
{step.body}
+ {step.media && step.media.length > 0 && (
+
+ {step.media.map((m) => (
+
+ ))}
+
+ )}
+
+
+ ))}
+
+
+ {block.media.map((m) => (
+
+ ))}
+
+ );
+ }
+
+ if (block.type === "details") {
+ return (
+
+
+ {open && (
+
+ {block.markdown}
+
+ )}
+
+
+ 引用文档
+
+
+ {block.citations.map((c) => (
+
+ {c.title} · {c.location}
+
+ ))}
+
+
+
+
+
+
+
+ 知识检索
+
+
{artifact.title}
+
+
+ {/* Conclusion */}
+
+
先看结论
+
{props.conclusion}
+
+
+ {/* Blocks */}
+
+ {props.blocks.map((block, i) => (
+
+ ))}
+
+