ui.py里面是python QT的界面，我不会JS。

gradio_ui.py

@@ -0,0 +1,71 @@
+import gradio as gr
+import numpy as np
+from PIL import Image
+import torch
+import test  # 假设 test 模块包含预测逻辑
+
+# 加载模型 (与 Qt 版本保持一致)
+model = test.load_trained_model()
+
+
+def predict_interface(sketch_image):
+    """处理绘制图像的预测逻辑"""
+    if sketch_image is None:
+        return "请先绘制数字", {}
+
+    # 将 sketchpad 的 numpy 数组转换为模型需要的格式
+    img = Image.fromarray(sketch_image).convert('L')  # 转换为灰度图
+
+    # 可能需要添加预处理步骤（根据 test.predict_user_image 的接口调整）
+    # 如果用原始 Qt 的预处理逻辑，这里可以复用 test 模块的函数
+    pred_class, probabilities = test.predict_user_image(img, model)
+
+    # 转换概率为字典供 Label 组件显示
+    prob_dict = {str(i): float(prob) for i, prob in enumerate(probabilities)}
+    return f"识别结果: {pred_class}", prob_dict
+
+
+def clear_canvas():
+    """清空画布的函数"""
+    return None, "识别结果: ", {}
+
+
+# 构建 Gradio 界面
+with gr.Blocks(title="手写数字识别") as demo:
+    gr.Markdown("# 手写数字识别系统")
+
+    with gr.Row():
+        # 手写板组件 (调整尺寸匹配原 Qt 设计)
+        sketch = gr.Sketchpad(
+            label="绘制区域",
+            shape=(750, 750),
+            brush_radius=15,  # 根据原 Qt 的笔刷大小调整
+            image_mode="L",  # 灰度模式
+            invert_colors=True  # 反转颜色（白底黑字）
+        )
+
+        # 结果显示区域
+        with gr.Column():
+            result_label = gr.Label(label="概率分布", num_top_classes=5)
+            output_text = gr.Markdown("识别结果: ")
+
+    # 按钮行
+    with gr.Row():
+        clear_btn = gr.Button("清除", variant="secondary")
+        submit_btn = gr.Button("识别", variant="primary")
+
+    # 绑定交互事件
+    submit_btn.click(
+        fn=predict_interface,
+        inputs=sketch,
+        outputs=[output_text, result_label]
+    )
+
+    clear_btn.click(
+        fn=lambda: [None, "识别结果: ", None],  # 清空所有输出
+        outputs=[sketch, output_text, result_label]
+    )
+
+# 启动应用
+if __name__ == "__main__":
+    demo.launch()

mnist_cnn.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8ffbe9357dc0bd7ccdc850bea88c2dd393ab02e691093550b8db97968417e13c
+size 33056

test.py

@@ -0,0 +1,147 @@
+import numpy as np
+import torch
+import torchvision
+from torchvision import datasets
+from torchvision.transforms import ToTensor
+from torch.utils.data import DataLoader
+from torch.utils.data import DataLoader, Subset
+from PIL import Image
+from PyQt5.QtGui import QImage
+from PyQt5.QtCore import QSize
+from PyQt5.Qt import Qt
+import numpy as np
+import torch
+import torchvision
+from torchvision import datasets
+from torchvision.transforms import ToTensor
+from torch.utils.data import DataLoader
+
+device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+
+np.random.seed(123456)
+torch.manual_seed(123456)
+
+
+class MyModel(torch.nn.Module):
+    def __init__(self):
+        super().__init__()
+        self.conv1 = torch.nn.Conv2d(in_channels=1, out_channels=20, kernel_size=5, stride=2)
+        self.pool1 = torch.nn.MaxPool2d(kernel_size=2)
+        self.fc1 = torch.nn.Linear(in_features=720, out_features=10)
+
+    def forward(self, x):
+        x = self.conv1(x)
+        x = torch.relu(x)
+        x = self.pool1(x)
+        x = torch.flatten(x, start_dim=1)
+        x = self.fc1(x)
+        x = torch.nn.functional.softmax(x, dim=1)
+        return x
+
+
+def train_and_save(save_path='mnist_cnn.pth'):
+    # 数据加载
+    mnist = datasets.MNIST(
+        root="data",
+        train=True,
+        download=True,
+        transform=ToTensor()
+    )
+    subset = Subset(mnist, indices=range(60000))
+    loader = DataLoader(subset, batch_size=60000, shuffle=True)
+    x, y = next(iter(loader))
+
+    nepoch = 30
+    batch_size = 200
+    lr = 0.001
+
+    np.random.seed(123)
+    torch.manual_seed(123)
+
+    model = MyModel()
+    losses = []
+    opt = torch.optim.Adam(model.parameters(), lr=lr)
+
+    n = x.shape[0]
+    obs_id = np.arange(n)  # [0, 1, ..., n-1]
+    # Run the whole data set `nepoch` times
+    for i in range(nepoch):
+        # Shuffle observation IDs
+        np.random.shuffle(obs_id)
+
+        # Update on mini-batches
+        for j in range(0, n, batch_size):
+            # Create mini-batch
+            x_mini_batch = x[obs_id[j:(j + batch_size)]]
+            y_mini_batch = y[obs_id[j:(j + batch_size)]]
+            # Compute loss
+            pred = model(x_mini_batch)
+            lossfn = torch.nn.NLLLoss()
+            loss = lossfn(torch.log(pred), y_mini_batch)
+            # Compute gradient and update parameters
+            opt.zero_grad()
+            loss.backward()
+            opt.step()
+            losses.append(loss.item())
+
+            if (j // batch_size) % 20 == 0:
+                print(f"epoch {i}, batch {j // batch_size}, loss = {loss.item()}")
+
+
+    torch.save({
+        'model_state': model.state_dict(),
+        'input_size': (1, 28, 28),
+        'output_size': 10
+    }, save_path)
+
+# 函数：加载已训练模型
+def load_trained_model(model_path='mnist_cnn.pth'):
+    model = MyModel()
+    checkpoint = torch.load(model_path, map_location=device)
+    model.load_state_dict(checkpoint['model_state'])
+    model.eval()
+    return model
+
+def predict_user_image(img_qimage,model):
+    """
+    :param img_qimage: 来自绘图板的QImage对象（需要是28x28大小）
+    :return: (预测结果, 概率分布数组)
+    """
+    # 确保图像是Grayscale8格式
+    if img_qimage.format() != QImage.Format_Grayscale8:
+        img_qimage = img_qimage.convertToFormat(QImage.Format_Grayscale8)
+
+    # 正确获取QImage二进制数据 (重要：PyQt和PySide的bits()方法差异)
+    # PyQt使用bits().tobytes()，PySide直接访问bits
+    if isinstance(img_qimage, QImage):
+        ptr = img_qimage.bits()  # 获取内存指针
+        ptr.setsize(img_qimage.byteCount())  # 设置数据大小（PyQt需要）
+        img_bytes = bytes(ptr)  # 转换为bytes
+    else:
+        raise ValueError("输入的图像必须是QImage对象")
+
+    # 转换为numpy数组 (注意dtype与数值范围)
+    img_array = np.frombuffer(img_bytes, dtype=np.uint8).reshape(28, 28).astype(np.float32)
+
+    # 转换为张量并归一化（黑底白字无需反转）
+    tensor_img = torch.tensor(img_array / 255.0).unsqueeze(0).unsqueeze(0).float()
+
+    # 预测逻辑
+    with torch.no_grad():
+        output = model(tensor_img)
+        probs = np.round(output.detach().cpu().numpy(), 3) # 修正概率计算
+        pred = torch.argmax(output).item()
+
+    return pred, probs
+
+if __name__ == '__main__':
+    # 训练并保存模型
+    train_and_save()
+
+    model = load_trained_model()
+
+
+
+
+
+

ui.py

@@ -0,0 +1,141 @@
+import sys
+from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QLabel, QPlainTextEdit, QMainWindow,QHBoxLayout
+from PyQt5.QtCore import Qt, QPoint
+from PyQt5.QtGui import QPainter, QImage, QColor,QPen
+import test
+import numpy as np
+import torch
+
+# 在主程序（UI端）
+from test import load_trained_model
+
+model = load_trained_model()
+
+
+class DrawingArea(QWidget):
+    def __init__(self):
+        super().__init__()
+        self.setFixedSize(750 + 40, 750 + 40)  # 增加边距显示网格
+        self.drawing = False
+        self.last_pos = QPoint()
+
+        # 实际绘图为28x28的画布
+        self.image = QImage(28, 28, QImage.Format_RGB888)
+        self.image.fill(Qt.black)
+
+        # 计算放缩比例
+        self.cell_size = 750 // 28
+
+    def paintEvent(self, event):
+        painter = QPainter(self)
+        painter.setRenderHint(QPainter.Antialiasing, False)
+
+        # 绘制放大后的图像
+        scaled_img = self.image.scaled(750, 750, Qt.KeepAspectRatio, Qt.FastTransformation)
+        painter.drawImage(20, 20, scaled_img)
+
+        # 绘制网格线
+        painter.setPen(QPen(Qt.gray, 1, Qt.SolidLine))
+        for i in range(29):
+            # 水平线
+            painter.drawLine(20, 20 + i * self.cell_size,
+                             20 + 750, 20 + i * self.cell_size)
+            # 垂直线
+            painter.drawLine(20 + i * self.cell_size, 20,
+                             20 + i * self.cell_size, 20 + 750)
+
+    def mousePressEvent(self, event):
+        if event.button() == Qt.LeftButton:
+            self.drawing = True
+            self.handleDrawing(event.pos())
+
+    def mouseMoveEvent(self, event):
+        if self.drawing:
+            self.handleDrawing(event.pos())
+
+    def mouseReleaseEvent(self, event):
+        if event.button() == Qt.LeftButton:
+            self.drawing = False
+
+    def handleDrawing(self, pos):
+        # 转换为画布坐标（减去边距）
+        x = pos.x() - 20
+        y = pos.y() - 20
+
+        # 当在画布范围内时进行处理
+        if 0 <= x < 750 and 0 <= y < 750:
+            # 转换到28x28坐标
+            col = x // self.cell_size
+            row = y // self.cell_size
+
+            # 防止重复绘制同一位置
+            if (col, row) != self.last_pos:
+                self.last_pos = (col, row)
+                painter = QPainter(self.image)
+                painter.setPen(Qt.white)
+                painter.drawPoint(col, row)
+                self.update()
+
+    def get_image(self):
+        return self.image.convertToFormat(QImage.Format_Grayscale8)
+
+    def clear_image(self):
+        self.image.fill(Qt.black)
+        self.update()
+
+
+class MainWindow(QMainWindow):
+    def __init__(self):
+        super().__init__()
+        self.init_ui()
+
+    def init_ui(self):
+        # 窗口
+        self.setWindowTitle("手写识别")
+        self.setFixedSize(850, 950)
+
+        # 布局
+        main_widget = QWidget()
+        self.setCentralWidget(main_widget)
+        layout = QVBoxLayout(main_widget)
+
+        # 绘图
+        self.drawing_area = DrawingArea()
+        layout.addWidget(self.drawing_area)
+
+        # 按钮
+        btn_layout = QHBoxLayout()
+        self.clear_btn = QPushButton("清除")
+        self.recognize_btn = QPushButton("识别")
+        btn_layout.addWidget(self.clear_btn)
+        btn_layout.addWidget(self.recognize_btn)
+
+        # 结果
+        self.prob_label = QLabel("概率分布:")
+        self.result_label = QLabel("识别结果:")
+
+        # 组装
+        layout.addLayout(btn_layout)
+        layout.addWidget(self.prob_label)
+        layout.addWidget(self.result_label)
+        # 信号连接
+        self.clear_btn.clicked.connect(self.drawing_area.clear_image)
+        self.recognize_btn.clicked.connect(self.recognize)
+
+
+
+    def recognize(self):
+        # 获取原始绘图区图像
+        qimg = self.drawing_area.get_image()
+        #预测
+        pred_class, probabilities = test.predict_user_image(qimg,model)
+
+        self.prob_label.setText(f"概率分布: {probabilities}")
+        self.result_label.setText(f"识别结果: {pred_class}")
+
+
+if __name__ == "__main__":
+    app = QApplication(sys.argv)
+    window = MainWindow()
+    window.show()
+    sys.exit(app.exec_())