开发 on 酒中仙

Windows 11 双 GitHub 账号使用指南

Sun, 25 Jan 2026 20:34:25 -0800

Windows 11 双GitHub账号使用指南

前言

你是否和我一样，有两个 GitHub 账号？一个用于协作团队项目，另一个用于个人创作。想让它们在本地和远端完全隔离，互不干扰？

问题是，Git 默认用全局 user.name 和 user.email，这会让提交记录看起来混淆身份。更复杂的是，SSH 密钥是权限的关键，每个密钥只能归属于一个账号。电脑默认使用一个 SSH key 连接 github.com，也导致只能无密码访问其中一个账号。

双账号配置

分别下载一个 GitHub Desktop 和 UGit，然后登录相应的账号，再通过 batch 脚本切换账号。

通过.bat文件实现手动切换全局配置

下面这个简单的批处理脚本可以让用户输入账户名，然后根据不同的账户名设置对应的全局配置。例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


@echo off
setlocal

:: 提示输入账户名称
set /p account=请输入账户名（比如：Account1 或 Account2）:

:: 先清除已有的 user.name 和 user.email
git config --global --unset user.name
git config --global --unset user.email

:: 根据不同账户设置
if /i "%account%"=="Account1" (
 git config --global user.name "你的账户1名字"
 git config --global user.email "youraccount1@example.com"
) else if /i "%account%"=="Account2" (
 git config --global user.name "你的账户2名字"
 git config --global user.email "youraccount2@example.com"
) else (
 echo 未识别的账户名，请确保输入正确。
)

pause
endlocal

这样运行脚本后，你会看到提示输入账户名，然后它会根据你的输入设置对应的全局git配置。你可以根据需要调整账户名和邮箱。

使用批处理文件自动提交git代码

我需要一个Windows 11下的批处理（batch）脚本，实现清空并重新设置Git提交身份（用户名/邮箱）、切换到指定目录、自动以时间戳为提交信息完成Git代码提交，同时补充完善的异常处理和操作反馈。

实现思路

先清空Git全局用户名/邮箱配置
设置新的Git提交身份信息
切换到指定工作目录并做合法性检查
执行Git拉取（避免冲突）、添加、提交、推送操作
用系统时间生成时间戳作为提交信息
增加完善的错误处理和操作反馈
脚本执行完成后暂停，方便查看执行结果

完整Batch脚本

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145


@echo off
chcp 65001 >nul 2>&1 :: 设置编码为UTF-8，避免中文乱码
setlocal enabledelayedexpansion

:: ===================== 配置区域（请根据实际需求修改）=====================
:: 新的Git用户名
set "GIT_USER_NAME=your_username"
:: 新的Git邮箱
set "GIT_USER_EMAIL=your_email@example.com"
:: 目标Git仓库目录（请替换为你的实际目录）
set "GIT_WORK_DIR=D:\your_project_directory"
:: 可选：Git远程仓库名称（默认origin）
set "GIT_REMOTE=origin"
:: 可选：Git分支名称（默认main，也可改为master）
set "GIT_BRANCH=main"
:: =========================================================================

echo ===================== Git自动提交脚本 =====================
echo 运行环境：Windows 11
echo 执行时间：%date% %time%
echo ==========================================================
echo.

:: 1. 清空Git全局用户名和邮箱配置
echo [1/6] 清空Git全局身份配置...
git config --global --unset user.name
git config --global --unset user.email
if !errorlevel! equ 0 (
 echo ✅ 已清空Git全局用户名和邮箱配置
) else (
 echo ⚠️ 清空配置时出现警告（可能无原有配置），继续执行...
)
echo.

:: 2. 设置新的Git用户名和邮箱
echo [2/6] 设置新的Git身份信息...
git config --global user.name "%GIT_USER_NAME%"
if !errorlevel! equ 0 (
 echo ✅ 已设置Git用户名：%GIT_USER_NAME%
) else (
 echo ❌ 设置用户名失败，脚本终止！
 pause
 exit /b 1
)

git config --global user.email "%GIT_USER_EMAIL%"
if !errorlevel! equ 0 (
 echo ✅ 已设置Git邮箱：%GIT_USER_EMAIL%
) else (
 echo ❌ 设置邮箱失败，脚本终止！
 pause
 exit /b 1
)
echo.

:: 3. 切换到目标Git仓库目录并检查合法性
echo [3/6] 切换到Git仓库目录...
if not exist "%GIT_WORK_DIR%" (
 echo ❌ 目标目录不存在：%GIT_WORK_DIR%
 pause
 exit /b 1
)

cd /d "%GIT_WORK_DIR%"
if !errorlevel! neq 0 (
 echo ❌ 切换到目录失败：%GIT_WORK_DIR%
 pause
 exit /b 1
)
echo ✅ 已切换到目录：%GIT_WORK_DIR%
echo.

:: 4. 检查是否为Git仓库
echo [4/6] 检查Git仓库合法性...
git rev-parse --is-inside-work-tree >nul 2>&1
if !errorlevel! neq 0 (
 echo ❌ 当前目录不是Git仓库，请检查路径！
 pause
 exit /b 1
)
echo ✅ 确认是合法的Git仓库
echo.

:: 5. 拉取远程最新代码（避免冲突）
echo [5/6] 拉取远程[%GIT_BRANCH%]分支最新代码...
git pull %GIT_REMOTE% %GIT_BRANCH%
if !errorlevel! equ 0 (
 echo ✅ 拉取远程代码成功
) else (
 echo ⚠️ 拉取代码出现警告（可能无远程分支或已最新），继续执行...
)
echo.

:: 6. 提交代码（生成时间戳作为提交信息）
echo [6/6] 执行Git提交和推送...
:: 生成格式化时间戳（格式：YYYY-MM-DD_HH-MM-SS）
for /f "tokens=1-2 delims=/ " %%a in ("%date%") do (
 set "month=%%a"
 set "day=%%b"
)
for /f "tokens=3 delims=/ " %%c in ("%date%") do set "year=%%c"
for /f "tokens=1-2 delims=:. " %%d in ("%time%") do (
 set "hour=%%d"
 set "minute=%%e"
)
for /f "tokens=3 delims=:. " %%f in ("%time%") do set "second=%%f"
:: 补零处理（确保单数字时间为两位）
if !hour! lss 10 set "hour=0!hour!"
if !month! lss 10 set "month=0!month!"
if !day! lss 10 set "day=0!day!"
set "COMMIT_MSG=Auto commit at !year!-!month!-!day!_!hour!-!minute!-!second!"

:: 添加所有修改的文件
git add .
if !errorlevel! equ 0 (
 echo ✅ 已添加所有修改的文件到暂存区
) else (
 echo ⚠️ 添加文件时出现警告（可能无修改），继续执行...
)

:: 提交代码
git commit -m "!COMMIT_MSG!"
if !errorlevel! equ 0 (
 echo ✅ 提交成功，提交信息：!COMMIT_MSG!
 :: 推送代码到远程
 git push %GIT_REMOTE% %GIT_BRANCH%
 if !errorlevel! equ 0 (
 echo ✅ 推送代码到远程[%GIT_REMOTE%/%GIT_BRANCH%]成功
 ) else (
 echo ❌ 推送代码失败，请检查网络或分支权限！
 pause
 exit /b 1
 )
) else (
 echo ⚠️ 无代码修改，无需提交
)
echo.

echo ==========================================================
echo 🎉 脚本执行完成！
echo 执行时间：%date% %time%
echo ==========================================================

pause
endlocal

脚本关键部分解释

配置区域
- 你需要修改GIT_USER_NAME、GIT_USER_EMAIL、GIT_WORK_DIR这三个核心配置，其他配置可根据仓库实际情况调整（如分支名）。
- chcp 65001：设置UTF-8编码，避免中文提交信息或目录名乱码。
Git身份配置
- 先执行--unset清空原有配置，再用--global设置新的全局用户名/邮箱，确保提交身份准确。
- 增加errorlevel检查，失败时终止脚本并提示。
目录与仓库检查
- 先验证目标目录是否存在，再切换目录，最后检查是否为Git仓库（通过git rev-parse --is-inside-work-tree），避免操作非Git目录。
时间戳生成
- 解析系统%date%和%time%变量，格式化为YYYY-MM-DD_HH-MM-SS格式，确保提交信息唯一且易识别。
- 对单数字的时间（如9点→09点）做补零处理，保证格式统一。
Git操作流程
- git pull：先拉取远程最新代码，避免本地与远程冲突。
- git add .：添加所有修改/新增的文件到暂存区。
- git commit：用时间戳作为提交信息。
- git push：推送到远程仓库。
错误处理与反馈
- 每个步骤都有明确的成功/失败提示（✅/❌/⚠️），便于排查问题。
- 非致命错误（如无原有配置、无代码修改）给出警告并继续执行，致命错误（如目录不存在）终止脚本。

使用说明

修改配置：打开脚本，找到「配置区域」，替换为你的实际信息：
- GIT_USER_NAME：你的Git用户名（如github用户名）。
- GIT_USER_EMAIL：你的Git绑定邮箱。
- GIT_WORK_DIR：Git仓库的本地目录（如D:\projects\my_poem_project）。
运行脚本：
- 将脚本保存为git_auto_commit.bat。
- 双击运行，或在CMD/PowerShell中执行：git_auto_commit.bat。
注意事项：
- 确保Windows 11已安装Git并配置到系统环境变量（可在CMD中执行git --version验证）。
- 首次推送可能需要手动输入Git账号密码，或配置SSH密钥免密登录。
- 脚本执行后会暂停，可查看所有操作日志，按任意键退出。

总结

脚本实现了「清空Git身份→设置新身份→切换目录→检查仓库→拉取代码→提交推送」的完整流程，适配Windows 11。
提交信息采用格式化时间戳，确保唯一性和可读性。
包含完善的错误处理和可视化反馈，新手也能轻松排查问题。
配置区域与执行逻辑分离，只需修改少量参数即可适配不同项目。

参考资料和链接

Web3D库Threejs入门教程

Tue, 06 Jan 2026 22:34:25 -0800

Web3D库Threejs入门教程

前言

Three.js 是一个功能强大的 JavaScript 图形库，用于在浏览器中创建三维图形和交互式可视化效果。它由 Ethan Demello 和 Mike Bosted 于 2010 年开发，并迅速成为前端开发者必备的工具之一。

官网

GitHub-Repo-JavaScript 3D Library.

不同3D库对比

The `<model-viewer>` project

Easily display interactive 3D models on the web and in AR!

官网——Easily display interactive 3D models on the web & in AR

This is the main GitHub repository for the <model-viewer> web component and all of its related projects.

Getting started? Check out the <model-viewer> project!

The repository is organized into sub-directories containing the various projects. Check out the README.md files for specific projects to get more details:

👩‍🚀 <model-viewer> • The <model-viewer> web component (probably what you are looking for)

✨ <model-viewer-effects> • The PostProcessing plugin for <model-viewer>

🌐 modelviewer.dev • The source for the <model-viewer> documentation website

🖼 render-fidelity-tools • Tools for testing how well <model-viewer> renders models

🎨 shared-assets • 3D models, environment maps and other assets shared across many sub-projects

🚀 space-opera • The source of the <model-viewer> editor

BabylonJS

官网

Three.js 安装与配置

安装Three.js 库

Three.js 提供了两种安装方式：通过 CDN 或者自定义路径。

使用 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

自定义路径

如果您的项目需要特定的版本或修改，可以选择下载并安装three.js 库。

npm install three@latest

配置项目

在项目中导入以下文件：

index.html：用于创建 HTML 页面。
style.css：设置页面样式和布局。
src/your_project.js：主要脚本文件，用于初始化Three.js 环境并运行代码。

完成这些步骤后，你应该能够看到浏览器中的默认场景设置。如果出现错误，请检查网络连接或查看浏览器的开发者工具（Ctrl+Shift+I）。

实践——ThreeJS结合Vue3展示glTF模型

gltf-viewer-basic在线展示

启用Vue

逐步执行如下命令：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


pnpm create vite@latest . --template vue-ts

pnpm install

pnpm add three@latest

pnpm add dat.gui

pnpm add @types/dat.gui

pnpm run dev

App.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


<!--
使用 GLTFLoader 加载远程 glTF 模型，对模型进行居中与缩放后配合轨道控制器查看。
-->

<script setup>
import { onMounted } from "vue";
import Application from "./Application";

onMounted(() => {
 const application = new Application("webgl");
});
</script>

<template>
 <canvas id="webgl"></canvas>
 <div id="gui"></div>
</template>

<style>
html {
 overflow: hidden;
}
html,
body,
#webgl {
 margin: 0px;
 padding: 0px;
}

#gui {
 position: absolute;
 top: 0;
 right: 0;
}
</style>

Application.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103


import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import World from "./World";

const cameraOptions = {
 position: {
 x: 6,
 y: 3,
 z: 8,
 },
 target: {
 x: 0,
 y: 0,
 z: 0,
 },
};

export default class Application {
 canvas?: HTMLElement;
 camera!: THREE.PerspectiveCamera;
 renderer!: THREE.WebGLRenderer;
 controls!: OrbitControls;
 scene = new THREE.Scene();
 world!: World;

 constructor(id: string) {
 const el = document.getElementById(id);
 if (!el) return;
 this.canvas = el;
 this.initCamera();
 this.initRenderer();
 this.initControls();
 this.addListener();
 this.animate();
 this.initWorld();
 }

 // 初始化相机
 initCamera() {
 const aspect = window.innerWidth / window.innerHeight;
 this.camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000);
 this.camera.position.set(
 cameraOptions.position.x,
 cameraOptions.position.y,
 cameraOptions.position.z
 );
 this.camera.lookAt(
 cameraOptions.target.x,
 cameraOptions.target.y,
 cameraOptions.target.z
 );
 }

 // 初始化渲染器
 initRenderer() {
 this.renderer = new THREE.WebGLRenderer({
 antialias: true,
 canvas: this.canvas,
 alpha: true, // 让场景背景透明
 });
 this.renderer.setPixelRatio(window.devicePixelRatio);
 this.renderer.setSize(window.innerWidth, window.innerHeight);
 this.renderer.outputColorSpace = THREE.SRGBColorSpace;
 this.renderer.shadowMap.enabled = true;
 }

 // 初始化 OrbitControls（鼠标控制）
 initControls() {
 this.controls = new OrbitControls(this.camera, this.renderer.domElement);
 this.controls.enableDamping = true;
 this.controls.dampingFactor = 0.05;
 this.controls.target.set(
 cameraOptions.target.x,
 cameraOptions.target.y,
 cameraOptions.target.z
 );
 this.controls.update();
 }

 // 初始化世界
 initWorld() {
 this.world = new World(this);
 this.scene.add(this.world);
 }

 addListener() {
 window.addEventListener("resize", () => {
 this.camera.aspect = window.innerWidth / window.innerHeight;
 this.camera.updateProjectionMatrix();
 this.renderer.setSize(window.innerWidth, window.innerHeight);
 });
 }

 animate() {
 const renderLoop = () => {
 this.controls.update();
 this.world?.update();
 requestAnimationFrame(renderLoop);
 this.renderer.render(this.scene, this.camera);
 };
 renderLoop();
 }
}

World.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135


import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { GUI } from "dat.gui";
import Application from "./Application";

export default class World extends THREE.Object3D {
 app: Application;
 model?: THREE.Object3D;
 ambient!: THREE.AmbientLight;
 dirLight!: THREE.DirectionalLight;
 gui!: GUI;

 constructor(app: Application) {
 super();
 this.app = app;
 this.initScene();
 this.initGUI();
 this.loadModel();
 }

 initScene() {
 const ambient = new THREE.AmbientLight(0xffffff, 0.6);
 const dir = new THREE.DirectionalLight(0xffffff, 1);
 dir.position.set(5, 8, 6);
 dir.castShadow = true;
 dir.shadow.mapSize.width = 2048;
 dir.shadow.mapSize.height = 2048;
 this.add(ambient, dir);
 this.ambient = ambient;
 this.dirLight = dir;

 const planeGeo = new THREE.PlaneGeometry(10, 10);
 const planeMat = new THREE.ShadowMaterial({ opacity: 0.25 });
 const plane = new THREE.Mesh(planeGeo, planeMat);
 plane.rotation.x = -Math.PI / 2;
 plane.position.y = -1.5;
 plane.receiveShadow = true;
 this.add(plane);
 }

 initGUI() {
 const container = document.getElementById("gui");
 const gui = new GUI();
 if (container) {
 container.appendChild(gui.domElement);
 }
 this.gui = gui;

 const params = {
 ambientIntensity: this.ambient.intensity,
 dirIntensity: this.dirLight.intensity,
 dirX: this.dirLight.position.x,
 dirY: this.dirLight.position.y,
 dirZ: this.dirLight.position.z,
 };

 gui
 .add(params, "ambientIntensity", 0, 2, 0.01)
 .name("环境光强度")
 .onChange((value: number) => {
 this.ambient.intensity = value;
 });

 gui
 .add(params, "dirIntensity", 0, 3, 0.01)
 .name("平行光强度")
 .onChange((value: number) => {
 this.dirLight.intensity = value;
 });

 const dirFolder = gui.addFolder("平行光位置");
 dirFolder
 .add(params, "dirX", -10, 10, 0.1)
 .name("X")
 .onChange((value: number) => {
 this.dirLight.position.x = value;
 });
 dirFolder
 .add(params, "dirY", 0, 20, 0.1)
 .name("Y")
 .onChange((value: number) => {
 this.dirLight.position.y = value;
 });
 dirFolder
 .add(params, "dirZ", -10, 10, 0.1)
 .name("Z")
 .onChange((value: number) => {
 this.dirLight.position.z = value;
 });
 }

 loadModel() {
 const loader = new GLTFLoader();
 const url =
 "https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf";

 loader.load(
 url,
 (gltf) => {
 const scene = gltf.scene;
 scene.traverse((obj) => {
 if ((obj as THREE.Mesh).isMesh) {
 const mesh = obj as THREE.Mesh;
 mesh.castShadow = true;
 mesh.receiveShadow = true;
 }
 });

 const box = new THREE.Box3().setFromObject(scene);
 const size = new THREE.Vector3();
 const center = new THREE.Vector3();
 box.getSize(size);
 box.getCenter(center);

 const maxDim = Math.max(size.x, size.y, size.z);
 const scale = 3 / maxDim;
 scene.scale.setScalar(scale);
 scene.position.sub(center.multiplyScalar(scale));

 this.model = scene;
 this.add(scene);
 },
 undefined,
 (error) => {
 console.error("加载 glTF 模型失败", error);
 }
 );
 }

 update() {
 if (this.model) {
 this.model.rotation.y += 0.005;
 }
 }
}

效果展示

模型压缩

当模型比较复杂时，模型的体积就会很大，加载会消耗较多的时间。此时可以通过压缩模型减小体积，优化加载体验。用gltf-pipeline可以实现将一个未压缩的gltf模型转换为用Draco算法压缩的模型。

Draco 是 Google 开源的一种 3D 网格压缩算法，专门用于压缩几何数据（如顶点、法线、UV 等），尤其适合 .gltf/.glb 模型中的 Mesh、Geometry、Animation 等数据。

参考资料

从零开始学习three.js（1）：一个完整项目指南

全面的 Three.js 学习平台 • 丰富的交互式示例 • 深入的着色器教程 • 系统性的 GLSL 文档 • 实战项目指导

Three.js 是一个开源 JavaScript 库，您可以使用它来创建具有 2D 和 3D 图形的动态交互式网站。

基于Python实现数字识别Web应用

Mon, 05 Jan 2026 12:34:25 -0800

手把手教你：训练 MNIST 手写数字识别模型，搭建可直接使用的 Web 识别工具

在手写数字识别的实践中，很多同学会遇到模型权重与 Web 应用不兼容的问题，最常见的就是通道数不匹配、模型结构冲突导致的运行报错。今天这篇博客，我们就来完整走一遍流程 —— 从从头训练兼容的cnn_model_basic.pth权重文件，到搭建一个无需前端经验的 Gradio Web 识别工具，全程避坑，确保最终成果可以直接落地使用。

第一部分：从头训练 MNIST 模型，生成兼容权重文件`cnn_model_basic.pth`

我们的核心目标是训练出一个与后续 Web 应用完全兼容的模型权重，彻底解决expected 1 channels, but got 3 channels这类兼容性错误，同时保证模型具备较高的识别准确率。

一、训练代码核心亮点（保障与 Web 应用无缝兼容）

模型结构完全一致，杜绝权重加载冲突

训练过程中定义的MNIST_CNN类，与后续 Gradio Web 应用中的模型结构、层名称、维度计算完全复刻，从根源上解决权重加载时的key不匹配问题。无论是卷积层的通道数、全连接层的神经元数量，还是前向传播的流程，都保持高度统一，确保权重文件可以被 Web 应用直接解析。
输入通道严格锁定单通道，解决核心报错

这是解决通道数不匹配错误的关键：
- 卷积层conv1明确设置输入通道为1，对应 MNIST 数据集的灰度图格式，与 Web 应用预处理后的图像格式完全匹配。
- 数据预处理流程中额外添加transforms.Grayscale(num_output_channels=1)，即使输入数据存在异常，也能强制转为单通道，形成双重保障，彻底解决expected 1 channels, but got 3 channels的运行时错误。
配置参数全同步，确保端到端兼容性

图像尺寸（28x28）、归一化均值 / 标准差（0.1307/0.3081）、权重输出路径等关键配置，均与后续 Web 应用保持一致。无需在两个环节之间进行参数转换，训练完成后的权重文件可以直接投入使用，降低后续操作的复杂度。
训练后直接可用，无需额外二次处理

训练完成后生成的cnn_model_basic.pth，无需修改任何参数、无需重新封装，只需将其与 Web 应用代码放在同一目录，即可正常加载运行，大大提升开发效率，适合快速落地验证。

二、完整运行步骤（零基础也能上手）

环境准备：安装必备依赖包

确保本地环境安装了所需的 Python 库，与后续 Web 应用的环境保持一致，避免出现库版本冲突问题，直接执行以下命令即可：
1

pip install torch torchvision numpy
运行训练脚本：自动完成全流程

直接执行提前编写好的训练 Python 脚本，无需手动干预，脚本会自动完成以下四个核心步骤：
- 下载 MNIST 数据集：如果本地./data目录下没有该数据集，会自动从官方源下载并保存，后续训练和评估均基于该标准数据集。
- 模型训练：默认训练 5 轮模型，训练速度较快，普通 CPU 环境约 5-10 分钟，具备 CUDA 支持的 GPU 环境仅需 1-2 分钟，满足快速验证的需求。
- 测试集评估：训练完成后，会自动在 MNIST 测试集上验证模型效果，正常情况下准确率可达 98% 以上，具备实用价值。
- 保存权重文件：最终会在当前目录生成cnn_model_basic.pth，这就是我们后续 Web 应用需要的兼容权重文件。
验证权重文件：提前规避兼容问题

将生成的cnn_model_basic.pth与后续的 Gradio Web 应用代码放在同一目录下，可提前简单验证文件有效性（无需启动 Web 应用）：检查文件是否存在、大小是否合理（通常为几十 KB），确保没有出现训练中断导致的文件损坏，为后续 Web 应用的正常运行铺路。

三、关键兼容性解析（解决原错误的核心逻辑）

很多同学在实践中会遇到这样的运行时错误：RuntimeError: Given groups=1, weight of size [16, 1, 3, 3], expected input[64, 3, 32, 32] to have 1 channels, but got 3 channels instead，其根源其实只有两个：

模型输入通道不匹配：原微调模型设计为接收 3 通道彩色图，而 Web 应用为了匹配 MNIST 数据集，会将上传图像预处理为 1 通道灰度图，两者输入格式冲突。
模型结构不一致：原微调模型的层结构、维度设计与 Web 应用中定义的MNIST_CNN类存在差异，导致权重加载时无法对应。

而我们本次训练代码的解决措施，正是针对性地解决这两个问题：

强制锁定单通道输入：卷积层conv1的in_channels=1，与 Web 应用的图像预处理输出完全匹配，从模型设计层面规避通道数冲突。
同步数据预处理流程：训练时的图像预处理与 Web 应用保持一致，均输出 1 通道 28x28 灰度图，从数据源头确保格式统一。
复刻模型结构定义：完全照搬 Web 应用中的MNIST_CNN类结构，确保权重加载时无层名称、维度的冲突，实现无缝兼容。

四、补充优化说明（提升模型效果与实用性）

训练效果优化：追求更高准确率

如果对模型准确率有更高要求，可将训练轮数EPOCHS调整为 10，或适当降低学习率（如从1e-3调整为5e-4），调整后模型在测试集上的准确率可接近 99%，进一步提升实际识别效果。
权重文件迁移：跨环境无缝使用

生成的cnn_model_basic.pth具备良好的可迁移性，可直接复制到任意具备对应环境的机器上使用。若修改了权重文件的保存路径，只需同步更新 Web 应用中的MODEL_PATH配置项，即可正常加载，无需其他额外修改。
无 GPU 兼容：不影响功能落地

代码内置了设备自动适配逻辑，即使没有 CUDA 支持的 GPU，也会自动切换至 CPU 运行。虽然训练速度会稍慢，但最终生成的权重文件的兼容性和功能不受任何影响，依然可以正常支撑 Web 应用的运行，满足不同环境的使用需求。

第二部分：搭建 Gradio Web 识别工具，实现可视化手写数字识别

有了兼容的cnn_model_basic.pth权重文件后，我们就可以搭建 Web 识别工具了。借助 Gradio 框架，无需具备任何前端开发经验，即可快速构建一个美观、易用的可视化工具，实现图像上传与实时识别。

一、Web 应用代码核心亮点（结构清晰、易于维护）

模块化拆分，职责单一

将整个 Web 应用的功能拆分为「模型加载」「图像预处理」「预测逻辑」「界面搭建」4 个独立模块，每个函数只负责一项核心功能。这种设计方式便于后续的修改、扩展和排错，比如后续想要优化预测逻辑，只需针对性修改对应函数，无需改动整个代码框架。
配置集中管理，降低维护成本

将设备配置、图像尺寸、归一化参数、权重文件路径等常量，集中定义在代码顶部。后续如果需要调整参数，只需在配置区域进行修改，无需深入业务逻辑代码，大大降低了后续的维护成本，也减少了因参数修改遗漏导致的错误。
与训练流程保持一致，确保识别准确率

Web 应用中的模型结构、图像预处理管道（Resize、Grayscale、Normalize），完全匹配之前的模型训练流程。这是确保识别准确率的关键，避免因预处理方式不一致导致模型无法有效提取特征，保证了从训练到部署的一致性。
完善的可视化输出，结果直观易懂

应用同时提供两种输出形式：一是文本框显示最终的预测数字与置信度，二是标签组件展示所有数字的置信度分布。这种设计不仅能给出明确的识别结果，还能直观展示模型的判断依据，便于用户了解模型的识别可靠性。

二、Web 应用关键功能说明（实用、便捷、稳定）

模型加载与完善的错误处理

模型加载环节内置了针对性的错误捕获机制，能够有效应对常见问题：
- 捕获FileNotFoundError：当权重文件缺失或路径错误时，返回清晰的提示信息，便于用户排查文件路径问题。
- 捕获RuntimeError：当模型结构与权重文件不匹配时，给出明确的错误提示，避免应用意外崩溃。
- 自动切换评估模式：加载完成后自动执行model.eval()，禁用 Dropout 和 BatchNorm 的训练行为，确保推理结果的稳定性和一致性。
标准化的图像预处理流程

针对用户上传的图像，应用会自动执行一套标准化的预处理流程，确保输入格式符合模型要求：
- 自动调整尺寸：将上传图像调整为 28x28 的标准尺寸，匹配 MNIST 数据集的图像格式。
- 自动转灰度图：将彩色图像转为单通道灰度图，适配模型的单通道输入要求。
- 自动标准化处理：消除图像亮度、对比度等因素对识别结果的影响，与训练时的图像预处理保持一致。
- 自动补充 batch 维度：通过unsqueeze(0)补充 batch 维度，适配 PyTorch 模型的输入格式要求。
便捷高效的 Gradio Web 界面特性

搭建的 Web 界面具备多种实用特性，提升用户使用体验：
- 多图像来源支持：支持本地图像上传、剪贴板粘贴图像、摄像头实时拍摄三种方式，满足不同场景的使用需求。
- 双输出展示：文本框显示最终结果，标签组件展示置信度分布，结果直观易懂。
- 响应式左右布局：界面分为输入区和输出区，美观整洁，操作便捷，在不同尺寸的设备上都能良好适配。
- 局域网访问支持：通过server_name="localhost"配置，允许同一局域网内的手机、平板等设备访问该工具，提升使用灵活性。

三、Web 应用运行步骤与注意事项（快速上手）

环境准备：安装额外依赖包

除了训练环节的依赖包，还需要安装 Gradio 相关依赖，执行以下命令即可：
1

pip install torch torchvision gradio pillow numpy
文件准备：放置兼容权重文件

将之前训练生成的cnn_model_basic.pth，放在与 Web 应用代码同一目录下；如果权重文件在其他目录，只需修改代码中的MODEL_PATH为权重文件的绝对路径即可。

运行代码：启动 Web 应用

直接执行 Web 应用 Python 脚本，终端会输出相关运行信息，同时会自动打开浏览器进入 Web 界面，典型的终端输出如下：

1
2
3


✅ 模型加载成功，已切换至评估模式，运行设备：cpu/cuda
Running on local URL: http://localhost:7860
Running on public URL: https://xxxx.gradio.live （仅share=True时显示）

使用方法：上传图像完成识别

上传一张白底黑字的手写数字图像（清晰无干扰的图像识别效果更佳），无需手动点击识别按钮，图像上传后会自动触发识别，右侧输出区会实时显示识别结果与置信度分布。

四、常见问题排查（避坑指南）

权重加载失败

核心排查点：检查MNIST_CNN类的结构是否与训练时完全一致，重点关注卷积层通道数、全连接层维度等关键参数，否则会出现key不匹配错误。
识别准确率低

核心排查点：确保上传的图像清晰无多余干扰，尽量与 MNIST 数据集格式保持一致（白底黑字、单个数字居中），避免因图像质量问题导致模型无法有效提取特征。
端口被占用

核心排查点：如果终端提示端口被占用，可将代码中的server_port修改为其他未被占用的端口（如 7861），避免与其他服务发生冲突。
GPU 无法使用

核心排查点：确保已安装 CUDA 版本的 PyTorch，若未安装，应用会自动切换至 CPU 运行，不影响核心功能使用，仅推理速度会稍慢。

效果展示

总结

本次我们完整实现了从「MNIST 模型从头训练」到「Gradio Web 应用搭建」的全流程，核心成果有两点：

生成了cnn_model_basic.pth兼容权重文件，彻底解决了通道数不匹配、模型结构冲突等常见问题，具备良好的可迁移性和实用性。
搭建了无需前端经验的 Web 识别工具，实现了「模型加载→图像预处理→Web 界面交互→结果可视化」的完整流程，结构清晰、易于维护，满足快速落地使用的需求。

整个流程避开了常见的坑，所有环节保持高度一致性，无论是零基础的同学，还是有一定 PyTorch 实践经验的开发者，都可以快速上手并实现落地。借助这个工具，我们可以轻松完成手写数字的可视化识别，也可以在此基础上进行进一步的扩展和优化，比如支持多数字识别、优化图像预处理逻辑等。

附录

完整训练代码（生成兼容的`cnn_model_basic.pth`）

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150


# 导入所需依赖库
import torch
import torch.nn as nn
import torch.optim as optim
import torchvision
import torchvision.transforms as transforms
from torch.utils.data import DataLoader

# ====================== 1. 定义常量配置（与Web应用保持一致，确保兼容性） ======================
# 设备配置：优先GPU，无则CPU
DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
# 训练参数
BATCH_SIZE = 64
EPOCHS = 5
LEARNING_RATE = 1e-3
# 输出权重文件路径（与Web应用中MODEL_PATH一致）
OUTPUT_MODEL_PATH = "cnn_model_basic.pth"
# MNIST图像参数（与Web应用完全匹配）
MNIST_IMAGE_SIZE = (28, 28)
NORMALIZE_MEAN = (0.1307,)
NORMALIZE_STD = (0.3081,)

# ====================== 2. 定义CNN模型结构（与Web应用完全一致，核心兼容性保障） ======================
# 该模型结构与Gradio Web应用中的MNIST_CNN类完全相同，确保权重加载无冲突
class MNIST_CNN(nn.Module):
 def __init__(self):
 super(MNIST_CNN, self).__init__()
 # 卷积层：输入1通道（灰度图），输出16通道，卷积核3x3，padding=1保持尺寸
 self.conv1 = nn.Conv2d(1, 16, kernel_size=3, padding=1)
 self.relu1 = nn.ReLU()
 self.pool1 = nn.MaxPool2d(2, 2) # 池化后尺寸：14x14

 self.conv2 = nn.Conv2d(16, 32, kernel_size=3, padding=1)
 self.relu2 = nn.ReLU()
 self.pool2 = nn.MaxPool2d(2, 2) # 池化后尺寸：7x7

 # 全连接层：32*7*7=1568个特征 → 10个分类（0-9）
 self.fc1 = nn.Linear(32 * 7 * 7, 128)
 self.relu3 = nn.ReLU()
 self.fc2 = nn.Linear(128, 10)

 def forward(self, x):
 # 前向传播流程（与Web应用模型完全一致）
 x = self.pool1(self.relu1(self.conv1(x)))
 x = self.pool2(self.relu2(self.conv2(x)))
 x = x.view(-1, 32 * 7 * 7) # 展平特征图，维度匹配
 x = self.relu3(self.fc1(x))
 x = self.fc2(x)
 return x

# ====================== 3. 数据加载与预处理（与Web应用保持一致，避免输入格式不兼容） ======================
# 预处理管道与Web应用完全相同：灰度图→28x28→Tensor→标准化
transform = transforms.Compose([
 transforms.Resize(MNIST_IMAGE_SIZE),
 transforms.Grayscale(num_output_channels=1), # 强制转为1通道（MNIST原生已为1通道，双重保障）
 transforms.ToTensor(),
 transforms.Normalize(NORMALIZE_MEAN, NORMALIZE_STD)
])

# 加载MNIST训练集和测试集
train_dataset = torchvision.datasets.MNIST(
 root='./data',
 train=True,
 download=True,
 transform=transform
)

test_dataset = torchvision.datasets.MNIST(
 root='./data',
 train=False,
 download=True,
 transform=transform
)

# 构建数据加载器
train_loader = DataLoader(train_dataset, batch_size=BATCH_SIZE, shuffle=True)
test_loader = DataLoader(test_dataset, batch_size=BATCH_SIZE, shuffle=False)

# ====================== 4. 模型初始化、损失函数与优化器 ======================
# 初始化模型并移至指定设备
model = MNIST_CNN().to(DEVICE)

# 分类任务损失函数（交叉熵损失）
criterion = nn.CrossEntropyLoss()

# 优化器（Adam优化，学习率适中）
optimizer = optim.Adam(model.parameters(), lr=LEARNING_RATE)

# ====================== 5. 模型训练循环 ======================
print(f"开始训练模型，运行设备：{DEVICE}，训练轮数：{EPOCHS}，批次大小：{BATCH_SIZE}")
for epoch in range(EPOCHS):
 # 切换为训练模式（启用BatchNorm/Dropout训练行为）
 model.train()
 running_loss = 0.0

 for i, (images, labels) in enumerate(train_loader):
 # 将数据移至指定设备
 images = images.to(DEVICE)
 labels = labels.to(DEVICE)

 # 1. 清空上一轮梯度
 optimizer.zero_grad()

 # 2. 前向传播
 outputs = model(images)

 # 3. 计算损失
 loss = criterion(outputs, labels)

 # 4. 反向传播
 loss.backward()

 # 5. 更新模型参数
 optimizer.step()

 # 统计损失值
 running_loss += loss.item()

 # 每100个批次打印一次训练状态
 if (i + 1) % 100 == 0:
 avg_loss = running_loss / 100
 print(f"Epoch [{epoch+1}/{EPOCHS}], Step [{i+1}/{len(train_loader)}], Average Loss: {avg_loss:.4f}")
 running_loss = 0.0

# ====================== 6. 训练后模型评估（验证模型效果） ======================
print("\n训练完成，开始评估模型在测试集上的表现...")
model.eval() # 切换为评估模式
correct = 0
total = 0

# 推理时禁用梯度计算，节省内存
with torch.no_grad():
 for images, labels in test_loader:
 images = images.to(DEVICE)
 labels = labels.to(DEVICE)

 outputs = model(images)
 _, predicted = torch.max(outputs.data, 1)

 total += labels.size(0)
 correct += (predicted == labels).sum().item()

# 输出测试集准确率
test_accuracy = 100 * correct / total
print(f"测试集准确率: {test_accuracy:.2f}%")

# ====================== 7. 保存训练好的权重文件（与Web应用兼容） ======================
torch.save(model.state_dict(), OUTPUT_MODEL_PATH)
print(f"\n✅ 权重文件已成功保存至：{OUTPUT_MODEL_PATH}")
print(f"该文件可直接用于之前的Gradio Web手写数字识别应用，无兼容性冲突")

Gradio实现Web页面完整代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186


# 导入所需库
import torch
import torch.nn as nn
import torchvision.transforms as transforms
import gradio as gr
from PIL import Image
import numpy as np

# ====================== 1. 定义常量与固定配置（易于维护） ======================
# 设备配置：优先GPU，无则CPU
DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
# 模型权重文件路径
MODEL_PATH = "cnn_model_basic.pth"
# MNIST图像标准尺寸（28x28灰度图）
MNIST_IMAGE_SIZE = (28, 28)
# 图像归一化参数（与训练/微调时保持一致）
NORMALIZE_MEAN = (0.1307,)
NORMALIZE_STD = (0.3081,)


# ====================== 2. 定义与预训练模型匹配的CNN结构（必须与微调时一致） ======================
class MNIST_CNN(nn.Module):
 def __init__(self):
 super(MNIST_CNN, self).__init__()
 # 卷积层：提取图像通用特征
 self.conv1 = nn.Conv2d(1, 16, kernel_size=3, padding=1)
 self.relu1 = nn.ReLU()
 self.pool1 = nn.MaxPool2d(2, 2)

 self.conv2 = nn.Conv2d(16, 32, kernel_size=3, padding=1)
 self.relu2 = nn.ReLU()
 self.pool2 = nn.MaxPool2d(2, 2)

 # 全连接层：完成分类任务
 self.fc1 = nn.Linear(32 * 7 * 7, 128)
 self.relu3 = nn.ReLU()
 self.fc2 = nn.Linear(128, 10)

 def forward(self, x):
 # 前向传播流程（与微调时一致）
 x = self.pool1(self.relu1(self.conv1(x)))
 x = self.pool2(self.relu2(self.conv2(x)))
 x = x.view(-1, 32 * 7 * 7) # 展平特征图
 x = self.relu3(self.fc1(x))
 x = self.fc2(x)
 return x


# ====================== 3. 初始化模型并加载权重（包含错误处理） ======================
def load_mnist_model(model_path, device):
 """
 加载MNIST手写数字识别模型
 :param model_path: 权重文件路径
 :param device: 运行设备
 :return: 初始化完成的模型
 """
 try:
 # 1. 初始化模型结构
 model = MNIST_CNN().to(device)
 # 2. 加载权重文件
 model.load_state_dict(torch.load(model_path, map_location=device))
 # 3. 切换为评估模式（禁用Dropout/BatchNorm训练行为）
 model.eval()
 print(f"✅ 模型加载成功，已切换至评估模式，运行设备：{device}")
 return model
 except FileNotFoundError:
 raise Exception(f"❌ 权重文件未找到，请检查路径：{model_path}")
 except RuntimeError as e:
 raise Exception(f"❌ 模型结构与权重不匹配，加载失败：{str(e)}")
 except Exception as e:
 raise Exception(f"❌ 模型加载未知错误：{str(e)}")


# ====================== 4. 图像预处理与预测函数（核心业务逻辑） ======================
# 定义图像预处理管道（与训练/微调时保持一致，确保输入格式匹配）
image_transform = transforms.Compose([
 transforms.Resize(MNIST_IMAGE_SIZE), # 调整为28x28标准尺寸
 transforms.Grayscale(num_output_channels=1), # 转为单通道灰度图
 transforms.ToTensor(), # 转为Tensor并归一化至[0,1]
 transforms.Normalize(NORMALIZE_MEAN, NORMALIZE_STD) # 标准化（与训练一致）
])


def predict_handwritten_digit(image, model):
 """
 处理上传图像并预测手写数字
 :param image: Gradio上传的图像（PIL.Image格式）
 :param model: 加载完成的预测模型
 :return: 预测结果（字典格式，包含数字与置信度）
 """
 try:
 # 步骤1：图像预处理
 if image is None:
 raise ValueError("请上传一张手写数字图像")

 # 应用预处理管道
 processed_image = image_transform(image).unsqueeze(0) # 增加batch维度（[1,1,28,28]）
 processed_image = processed_image.to(DEVICE)

 # 步骤2：模型推理（禁用梯度计算，节省内存）
 with torch.no_grad():
 outputs = model(processed_image)
 # 计算各类别置信度（softmax转换为概率分布）
 probabilities = torch.softmax(outputs, dim=1).squeeze(0).cpu().numpy()

 # 步骤3：整理预测结果
 pred_digit = np.argmax(probabilities) # 取置信度最高的数字
 pred_confidence = round(probabilities[pred_digit] * 100, 2) # 保留2位小数

 # 构建完整结果（返回所有数字的置信度，便于可视化）
 result = {str(i): round(probabilities[i] * 100, 2) for i in range(10)}
 print(f"🔍 预测完成：数字{pred_digit}，置信度{pred_confidence}%")

 return f"预测结果：{pred_digit}（置信度：{pred_confidence}%）", result

 except ValueError as e:
 return f"⚠️ 输入错误：{str(e)}", {str(i): 0.0 for i in range(10)}
 except Exception as e:
 return f"⚠️ 预测失败：{str(e)}", {str(i): 0.0 for i in range(10)}


# ====================== 5. Gradio Web界面搭建与运行 ======================
def main():
 # 步骤1：加载模型（捕获加载错误，避免程序崩溃）
 try:
 model = load_mnist_model(MODEL_PATH, DEVICE)
 except Exception as e:
 print(f"模型初始化失败：{e}")
 return

 # 步骤2：定义Gradio界面组件
 with gr.Blocks(title="MNIST手写数字识别工具") as demo:
 # 页面标题
 gr.Markdown("# 🖋️ MNIST 手写数字识别工具")
 gr.Markdown("### 上传一张包含单个手写数字（0-9）的图像，模型将自动识别并返回结果")

 # 布局：分为输入区、输出区
 with gr.Row():
 # 左侧：输入区（图像上传）
 with gr.Column(scale=1):
 image_input = gr.Image(
 type="pil", # 输出PIL.Image格式，便于预处理
 label="上传手写数字图像",
 height=300,
 sources=["upload", "clipboard", "webcam"] # 支持上传、剪贴板、摄像头
 )
 submit_btn = gr.Button("开始识别", variant="primary", size="lg")

 # 右侧：输出区（预测结果）
 with gr.Column(scale=1):
 text_output = gr.Textbox(
 label="识别结果",
 placeholder="识别结果将显示在这里...",
 lines=2,
 interactive=False
 )
 confidence_output = gr.Label(
 label="各数字置信度分布",
 num_top_classes=5 # 显示置信度前5的数字
 )

 # 步骤3：绑定事件（按钮点击/图像上传自动触发识别）
 def run_prediction(image):
 return predict_handwritten_digit(image, model)

 # 绑定触发方式
 submit_btn.click(fn=run_prediction, inputs=image_input, outputs=[text_output, confidence_output])
 image_input.change(fn=run_prediction, inputs=image_input, outputs=[text_output, confidence_output])

 # 步骤4：添加说明文字
 gr.Markdown("### 📌 注意事项")
 gr.Markdown("1. 建议上传白底黑字的手写数字图像，识别效果更佳")
 gr.Markdown("2. 图像将自动转为28x28灰度图，与MNIST数据集格式保持一致")
 gr.Markdown("3. 模型基于CNN微调训练，仅支持单个数字识别")

 # 步骤5：启动Web服务
 demo.launch(
 server_name="localhost", # 允许局域网访问（可选）
 server_port=7860, # 自定义端口（可选）
 share=False # 如需公网临时链接，设置为True（需网络通畅）
 )


# ====================== 6. 程序入口 ======================
if __name__ == "__main__":
 main()

如何从 pnpm 还原使用 npm ？

Sun, 28 Dec 2025 12:34:25 -0800

如何从 pnpm 还原使用 npm ？

理解各种包管理器及其互操作性是很重要的。从 pnpm 还原到 npm，主要步骤如下：

步骤1: 清理 `pnpm` 环境

首先，确保删除或清理由 pnpm 创建的 node_modules 文件夹和 pnpm-lock.yaml 文件。这是因为 pnpm 和 npm 在处理依赖和锁文件方面存在差异，直接使用可能会导致冲突或错误。

rm -rf node_modules rm pnpm-lock.yaml

步骤2: 初始化 `npm`

如果项目中不存在 package.json 文件（一般情况下不会发生，除非是全新项目），你需要运行 npm init 来创建一个。如果已经有 package.json，则可以直接跳至下一步。

npm init

步骤3: 安装依赖

使用 npm 安装项目所需要的依赖。如果你有 package.json 文件，npm 会根据此文件安装所有列出的依赖。

npm install

这个命令会创建一个 node_modules 文件夹和一个 package-lock.json 文件，这是 npm 用来锁定依赖版本的。

步骤4: 测试项目

在转换完成后，确保运行项目的测试，以验证所有依赖都正确安装，项目可以正常运行。

npm test

示例

假设我之前使用 pnpm 管理一个 Node.js 项目，该项目依赖于 Express 和 React。转换过程中，我会首先删除由 pnpm 创建的锁文件和 node_modules 文件夹，然后使用 npm 重新安装依赖，并确保通过所有测试。

这个过程保证了从一个包管理器到另一个包管理器的平滑过渡，同时确保项目的稳定性和一致性。

结论

虽然 pnpm 提供了优异的性能和磁盘空间优化，但在某些团队或项目中可能需要统一使用 npm。以上步骤可以帮助实现从 pnpm 到 npm 的无缝过渡。

开发 on 酒中仙

Windows 11 双 GitHub 账号使用指南

Windows 11 双GitHub账号使用指南

前言

双账号配置

通过.bat文件实现手动切换全局配置

使用批处理文件自动提交git代码

实现思路

完整Batch脚本

脚本关键部分解释

使用说明

总结

参考资料和链接

Web3D库Threejs入门教程

Web3D库Threejs入门教程

前言

不同3D库对比

The <model-viewer> project

BabylonJS

Three.js 安装与配置

安装Three.js 库

使用 CDN

自定义路径

配置项目

实践——ThreeJS结合Vue3展示glTF模型

启用Vue

App.vue

Application.ts

World.ts

效果展示

模型压缩

参考资料

基于Python实现数字识别Web应用

手把手教你：训练 MNIST 手写数字识别模型，搭建可直接使用的 Web 识别工具

第一部分：从头训练 MNIST 模型，生成兼容权重文件cnn_model_basic.pth

一、训练代码核心亮点（保障与 Web 应用无缝兼容）

二、完整运行步骤（零基础也能上手）

三、关键兼容性解析（解决原错误的核心逻辑）

四、补充优化说明（提升模型效果与实用性）

第二部分：搭建 Gradio Web 识别工具，实现可视化手写数字识别

一、Web 应用代码核心亮点（结构清晰、易于维护）

二、Web 应用关键功能说明（实用、便捷、稳定）

三、Web 应用运行步骤与注意事项（快速上手）

四、常见问题排查（避坑指南）

效果展示

总结

附录

完整训练代码（生成兼容的cnn_model_basic.pth）

Gradio实现Web页面完整代码

如何从 pnpm 还原使用 npm ？

如何从 pnpm 还原使用 npm ？

步骤1: 清理 pnpm 环境

步骤2: 初始化 npm

步骤3: 安装依赖

步骤4: 测试项目

示例

结论

The `<model-viewer>` project

第一部分：从头训练 MNIST 模型，生成兼容权重文件`cnn_model_basic.pth`

完整训练代码（生成兼容的`cnn_model_basic.pth`）

步骤1: 清理 `pnpm` 环境

步骤2: 初始化 `npm`