物化助手的开发项目开发页面。

文件	最后提交记录	最后更新时间
.vitepress	260523a 算法更新，以双尾判断及阈值范围实现统计逻辑自洽	11 天前
.vscode	260523a 算法更新，以双尾判断及阈值范围实现统计逻辑自洽	11 天前
backup	260514a 算法更新	20 天前
components	260523a 算法更新，以双尾判断及阈值范围实现统计逻辑自洽	11 天前
index	260511a 暂存档	23 天前
public	SSL证书更新	28 天前
utils	260428a 修复苹果桌面浏览器无法实现下载文件的bug	1 个月前
.gitattributes	250806a	9 个月前
.gitignore	251111a 更新ssl	6 个月前
README.en.md	251111b 完善新主页	6 个月前
README.md	260425a 接触角业务重构解耦，为多算法降低开发心智负担	1 个月前
global.d.ts	260425a 接触角业务重构解耦，为多算法降低开发心智负担	1 个月前
jsconfig.json	260425a 接触角业务重构解耦，为多算法降低开发心智负担	1 个月前
license	251230b	5 个月前
package.json	260523a 算法更新，以双尾判断及阈值范围实现统计逻辑自洽	11 天前
pnpm-lock.yaml	260425a 接触角业务重构解耦，为多算法降低开发心智负担	1 个月前
pnpm-workspace.yaml	260425a 接触角业务重构解耦，为多算法降低开发心智负担	1 个月前
temp.js	260523a 算法更新，以双尾判断及阈值范围实现统计逻辑自洽	11 天前
vite-env.d.ts	260425a 接触角业务重构解耦，为多算法降低开发心智负担	1 个月前

物化助手 (Physical Chemistry Learning Helper)

简体中文 | English

📦 项目源码：https://gitcode.com/roxszi/phys-chem-dev

🌐 项目源码（国外访问）：https://github.com/roxszi/phys-chem-dev

📦 项目展示页面：https://www.phys-chem.top

🌐 项目展示页面（国外访问）：https://roxszi.github.io/phys-chem/en/

📖 项目简介

物化助手是一个基于 VitePress 构建的物理化学学习工具项目，旨在通过数字化技术（统计机器学习、计算机视觉、深度学习等）解决物理化学理论与实验教育教学过程中的各类需求。

✨ 主要特点

🔒 隐私安全：所有计算均在用户本地设备完成，无需上传数据至服务器
⚡ 高性能：支持 WebGPU/WebGL 硬件加速，充分利用设备算力
📱 跨平台：支持桌面浏览器和移动浏览器访问
🎨 现代化 UI：基于 TDesign 组件库
🌍 多语言：支持中英文双语界面

🎯 核心功能

功能模块	描述	状态
接触角测量	通过图像处理计算液滴接触角，支持设备校准和图片处理	✅ 已完成
化学计量学工具	Andor 拉曼光谱数据批量处理、机器学习分析	✅ 已完成
深度学习演示	神经网络模型训练和预测演示	🚧 开发中
垂直校准	设备垂直度校准工具	✅ 已完成

🛠️ 技术栈

前端框架

VitePress - VitePress是一个立足Vite、Markdown的SSG（静态站点生成）框架，并支持Vue生态。VitePress官方文档：https://vitepress.dev/zh/
Vue 3 - 渐进式 JavaScript 框架
TDesign (Vue Next) - 企业级 UI 设计体系
VueUse - Vue 组合式工具集

深度学习（TensorFlow.js）

后续面向教学/科研的产品(WebApp等服务)，本项目最初的打算就是直接让学生用手机/电脑浏览器实现模型的应用及训练(WebGPU/WebGL硬件加速)。这样设计的原因有2：

可借助学生每个人手上的算力资源，完成教学及简单的科研任务。
可突破Nvidia显卡/CUDA平台的限制，核心显卡/集成显卡甚至手机，只要支持WebGPU/WebGL即可实现硬件加速运算。

在上述考虑的基础上，为进一步降低开发和产品化间的各种额外工作量，尽可能专注于业务，本项目就毫无悬念的选用了TensorFlowJS这一技术栈，其开发及构建几乎都基于前端，少数的数据预处理、代码调试工作也可借助NodeJS在后端简单完成而不涉及跨语言的问题，这极大降低了项目开发的工作量。
TensorFlowJS纯网页开发的缺点是缺乏代码注释，而Vite则弥补了这一问题。Vite下的Node开发环境，其能直接安装调用TensorFlowJS库，以获得项目开发时的官方代码注释；也能借助dev(/serve)在浏览器端运行/渲染代码，直接调用WebGPU/WebGL实现硬件加速。这样开发效率、运行效率都得到了保障。
tfjs-vis - TensorFlow.js 可视化工具

计算机视觉（OpenCV.js）

OpenCV（Open Computer Vision，开放计算机视觉库）是工业与学术研究领域使用最广泛的开源计算机视觉库，也是计算机视觉领域最受欢迎的库之一。
OpenCV.js官网API介绍
在调用方面，OpenCV官方提供的OpenCV.js不支持模块化调用，这在应用开发及发布方面是较为低效的。因此，我们选用了NPM平台支持MJS的OpenCV.js发行版：@techstark/opencv-js。

数据处理

SheetJS - Excel 表格处理库

📁 项目结构

phys-chem/
├── components/              # Vue 组件
│   ├── chemometrics/       # 化学计量学组件
│   ├── experiment/         # 实验组件
│   └── myComponents/       # 自定义通用组件
├── utils/                  # 工具函数
│   ├── tfjs/              # TensorFlow.js 相关工具
│   ├── deeplearning-*.js  # 深度学习工具
│   └── myFunc.js          # 全局方法
├── index/                  # 主页面文档
│   ├── about/             # 关于页面
│   ├── chemometrics/      # 化学计量学页面
│   └── experiment/        # 实验页面
├── i18n/                   # 多语言文档
│   └── en/                # 英文版页面
├── public/                 # 静态资源
└── docs/                   # 项目文档
    ├── API.md             # API 文档
    ├── DEVELOPMENT.md     # 开发指南
    ├── FAQ.md             # 常见问题
    └── CHANGELOG.md       # 更新日志

命名规范

文件/文件夹：主要使用烤肉串命名法（kebab-case），特殊情况使用蛇形命名法（snake_case）
变量/函数/方法：统一使用小驼峰命名法（camelCase）
组件：使用 PascalCase 命名

🚀 快速开始

环境要求

Node.js >= 16.0.0
npm >= 8.0.0

安装步骤

克隆项目

git clone https://gitcode.com/roxszi/phys-chem-dev.git
cd phys-chem-dev

安装依赖
```
npm install
```
启动开发服务器
```
npm run dev
```
访问 http://localhost:8080 查看项目

构建生产版本

# 构建根目录版本
npm run build:root

# 构建子页面版本
npm run build:subpage

# 构建所有版本
npm run build

项目脚本

命令	描述
`npm run dev`	启动开发服务器（端口 8080）
`npm run build:root`	构建根目录版本
`npm run build:subpage`	构建子页面版本
`npm run build`	构建所有版本