进度条“整容” + 聊天框亮相：DeepSeek‑R1 WebGPU 交互打磨实录

前言

嘿，各位一路跟到这里的“端侧AI探险家”们！

系列第一篇我们搭好了静态骨架让 React 组件像川剧变脸一样随状态切换界面；第二篇我们装上了“发动机”，用合成事件激活按钮抽离进度条组件理解了组件树思想。但当时的进度条实在太过简陋——几个 标签堆叠文字。就像素颜出镜，完全撑不起“浏览器跑大模型”的科技感。

今天我们要对项目进行一次“精装修”：让进度条真正可视化，像下载软件一样直观填充；编写优雅的 formatBytes 工具函数，把冷冰冰的字节数变成“ MB”这样的友好格式；新增聊天输入框，为后续模型推理铺好路；深入辨析 React 中 State 与 Props 这对主要概念，让你的组件设计功底再上一层楼。

准备好迎接这个越来越完整的 AI 前端项目了吗？说起来，系好安全带，发车！

说到使用者痛点，为什么原来的实现让人抓狂？

• 视觉反馈缺失：仅靠文字堆叠无法让使用者感知模型加载进度，容易产生 “卡死” 的错觉。
• 字节信息不友好：直接展示原始字节数（如 1048576)，普通使用者难以快速判断大小。怎么说呢，
• 交互入口不完整：没有聊天输入框。使用者只能通过控制台硬编码请求，体验极差。
• Status 管理混乱：State 与 Props 混用导致组件频繁不必要的渲染，性能受损。
• 代码可维护性低：`

  ` 堆砌式实现缺少抽象，一旦需求变化几乎要重写。

进度条“整容”实现细节

1️⃣ 抽离为独立组件

import React from 'react';import './ProgressBar.css';export default function ProgressBar {
const percent = total?Math.min * 100) : 0;return (




{formatBytes} / {formatBytes} }%)


);}

2️⃣ CSS 建立丝滑动画

.progress-container {
position: relative;height: 24px;background: #e0e0e0;border-radius: 12px;overflow: hidden;}
.progress-bar {
height的观点是，100%;background: linear-gradient;transition: width .4s ease-out;按理说，}
.progress-label {
position: absolute;top:0，left:50%;怎么说呢，transform: translateX;话说回来，font-size:12px;line-height:24px;color:#fff，}

3️⃣ 格式化字节工具函数

function formatBytes {
if return '0 B';const k = 1024,sizes =。i = Math.floor / Math.log);return `${parseFloat).toFixed)} ${sizes}`;怎么说呢，}
export { formatBytes };

聊天框亮相的观点是，从无到有的步骤拆解

1️⃣ UI 布局与受控组件设计

function ChatInput {
const = React.useState;const handleSubmit = e => {
e.preventDefault;if ) return，onSend);setMsg，};return (

 setMsg}
/>
发送

);}
export default ChatInput;按理说，

2️⃣ CSS 美化交互感受

.chat-input {
display:flex;
按理说，gap:8px，margin-top:16px;说起来，}
.chat-input input{
从flex来看，1;按理说，padding:8px;border-radius:4px;border:1px solid #ccc;}
.chat-input button{
padding:8px12px;background:#4facfe;color:#fff，border:none;老实说，border-radius:4px;cursor:pointer;}
.chat-input button:hover{background:#00f2fe;}

3️⃣ 将聊天框挂载到主页面并连接模型推理入口

import ProgressBar from './ProgressBar';import ChatInput from './ChatInput';import { formatBytes } from './utils';按理说，export default function App {
const = React.useState;const = React.useState;const = React.useState;const handleSend = async => {
// 显示使用者提问
setMessages;说起来，// 调用 DeepSeek‑R1 推理
const responseStream = await startInference;let received = '';for await {
received += chunk.text;// 假设每个 chunk 都带有已下载字节数
setLoaded;setTotal，}
setMessages;}，return (

{messages.map=>(

{m.content}
)
)}
{/* 可视化进度条 */}
{total>0 && }
{/* 输入框 */}


);}

：State vs Props，你到底该怎么选？

State⚙️：

• 谁拥有就应该由谁管理。
• 仅在当前组件内部变化时使用。
• Avoid “lifting state up” unless multiple siblings truly需要共享同一份数据。
• Synchronous updates → UI立即响应。
• If you find yourself passing same state through many layers → 考虑 Context 或全局状态库。

Props📦：

• A read‑only view of parent’s state.
• If a child only needs展示数据而不修改，则使用 props。
• Avoid mutating props directly – it会导致不可预期的渲染错误。
• The “data‑down。actions‑up”原则帮助保持单向数据流，使调试更简单。
• If child needs to触发行为。请把回调函数作为 prop 向下传递，而不是把父组件的 state 方法直接暴露给子组件。不过，

在本项目中的实践：

• : {loaded}/{total} 用 props `loaded`、`total` 从父组件 App 拉下来只负责渲染。不参与业务逻辑，
• : 输入内容本地化为 state `msg`。提交后通过回调 `onSend` 把数据抛给父层处理模型调用，这正是 “data‑down actions‑up”。
• The app’s全局业务状态均保存在 App 的 state 。并分别以 props 的形式下发给子组件，实现职责分离。

完整代码清单📂

其余文件保持不变，仅关注 UI 层改动即可。

文件方法/名称	说明
/src/components/ProgressBar.jsx	可视化加载进度 + 字节格式化展示
/src/components/ChatInput.jsx	SRC 控制的输入框。实现受控表单和提交回调
/src/utils/formatBytes.js	B→KB→MB 等友好单位转换函数，可多处复用
/src/App.jsx	Main 页面：管理全局 state、渲染聊天记录、挂载 ProgressBar 与 ChatInput

小结 🚀

• #️⃣ 本次迭代把原先“一堆文字”的占位进度条升级为具备真实百分比、友好单位显示且拥有平滑动画的专业级 UI；引入聊天输入框，为后续 Prompt‑to‑Model 流程奠定交互基础。

#️⃣ 深入阐释了 State 与 Props 的边界，让你在实际项目中能快速判断何时抽象为独立组件、何时使用回调提高可维护性。

#️⃣ 接下来可以继续 ：

1. Add a streaming message bubble that逐行展示模型返回内容，提高沉浸感；
\
2. Persist chat history to IndexedDB，让使用者刷新后还能看到上次对话；
\
3. Tune WebGPU 参数，实现更细粒度的资源加载监控；
\

每一步都将进一步提高端侧大模型产品体验，让它从“技术玩具”迈向「生产力工具」。

---