# 后端框架與網(wǎng)絡(luò)請求
pip install fastapi uvicorn
# PyTorch核心（含CPU版本，GPU版本需替換命令）
pip install torch torchvision
# 圖像處理與數(shù)據(jù)處理
pip install pillow numpy
# 前端請求庫（Vue側(cè)后續(xù)安裝）

D:\Python\Scripts\pip3.12.exe install [安裝包]

# 初始化Vue項(xiàng)目（若未創(chuàng)建）
npm create vue@latest mnist-frontend
# 進(jìn)入目錄并安裝axios（請求后端）
cd mnist-frontend
npm install axios

DNN_CNN/                # 項(xiàng)目根目錄
├─ mnist-frontend/      # 前端Vue項(xiàng)目
│  ├─ src/
│  │  ├─ App.vue        # 前端核心文件（模板+邏輯+樣式）
│  │  ├─ main.js        # Vue入口文件
│  │  └─ style.css      # 全局樣式（本項(xiàng)目用組件內(nèi)聯(lián)樣式）
│  └─ package.json      # Vue依賴配置
├─ CNN_Proj.py          # 模型訓(xùn)練腳本（生成權(quán)重文件）
├─ main.py              # 后端FastAPI服務(wù)腳本
├─ LeNet5_mnist.pth     # 預(yù)訓(xùn)練模型權(quán)重（訓(xùn)練后生成）
└─ dataset/             # MNIST數(shù)據(jù)集（訓(xùn)練腳本自動(dòng)下載）

<template>
  <div class="container">
    <h1>手寫數(shù)字識別</h1>
    <!-- 1. 主畫布（用戶繪制數(shù)字） -->
    <canvas 
      ref="canvas" 
      width="280" 
      height="280" 
      @mousedown="startDrawing" 
      @mousemove="draw" 
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
    <!-- 2. 調(diào)試畫布（預(yù)覽28×28預(yù)處理圖像，便于排查問題） -->
    <div class="debug-section" v-show="showDebug">
      <h3>預(yù)處理后圖像（28x28 放大）</h3>
      <canvas ref="debugCanvas" width="280" height="280"></canvas>
      <p class="debug-info">實(shí)際尺寸 28x28 | 放大 10 倍</p>
    </div>
    <!-- 3. 控制按鈕（功能操作） -->
    <div class="buttons">
      <button @click="clearCanvas" :disabled="isLoading">清除畫布</button>
      <button @click="predictDigit" :disabled="isLoading">
        {{ isLoading ? '識別中...' : '識別' }}
      </button>
      <button @click="toggleDebug">顯示/隱藏調(diào)試</button>
    </div>
    <!-- 4. 結(jié)果與錯(cuò)誤反饋 -->
    <div class="result" v-if="recognitionResult">識別結(jié)果：{{ recognitionResult }}</div>
    <div class="error" v-if="errorMessage">錯(cuò)誤：{{ errorMessage }}</div>
  </div>
</template>

import { ref, onMounted, nextTick, watch } from 'vue';
import axios from 'axios';

// 畫布DOM引用
const canvas = ref(null);
const debugCanvas = ref(null);
// 控制狀態(tài)
const showDebug = ref(false); // 調(diào)試視圖開關(guān)
const isDrawing = ref(false); // 繪制狀態(tài)
const isLoading = ref(false); // 識別加載狀態(tài)
// 結(jié)果反饋
const recognitionResult = ref(''); // 識別結(jié)果
const errorMessage = ref('');     // 錯(cuò)誤信息
// 繪制輔助變量
let ctx = null;         // 主畫布上下文
let debugCtx = null;    // 調(diào)試畫布上下文
let lastX = 0;          // 上一次繪制X坐標(biāo)
let lastY = 0;          // 上一次繪制Y坐標(biāo)

onMounted(async () => {
  await nextTick(); // 等待DOM完全渲染
  
  // 主畫布初始化（280×280，后續(xù)縮放為28×28，避免繪制精度不足）
  if (canvas.value) {
    ctx = canvas.value.getContext('2d', { willReadFrequently: true });
    if (ctx) {
      ctx.fillStyle = '#ffffff'; // 純白背景（匹配MNIST數(shù)據(jù)集背景）
      ctx.fillRect(0, 0, 280, 280);
      ctx.lineWidth = 12; // 畫筆寬度（過細(xì)會(huì)導(dǎo)致預(yù)處理后線條消失）
      ctx.strokeStyle = 'black'; // 黑色畫筆（與MNIST數(shù)字顏色一致）
      ctx.lineCap = 'round'; // 畫筆端點(diǎn)圓潤（避免鋸齒）
      ctx.lineJoin = 'round'; // 畫筆拐角圓潤（提升繪制體驗(yàn)）
    } else {
      errorMessage.value = '主畫布初始化失敗，請刷新';
    }
  }
  
  // 調(diào)試畫布初始化（與主畫布邏輯一致，用于預(yù)覽預(yù)處理結(jié)果）
  if (debugCanvas.value) {
    debugCtx = debugCanvas.value.getContext('2d', { willReadFrequently: true });
    if (debugCtx) {
      debugCtx.fillStyle = '#ffffff';
      debugCtx.fillRect(0, 0, 280, 280);
    } else {
      console.warn('調(diào)試畫布初始化失敗（不影響主功能）');
    }
  }
});

// 開始繪制（記錄初始坐標(biāo)）
function startDrawing(e) {
  if (!ctx) return;
  isDrawing.value = true;
  const rect = canvas.value.getBoundingClientRect(); // 獲取畫布在頁面中的位置
  // 計(jì)算畫布內(nèi)真實(shí)坐標(biāo)（解決瀏覽器縮放導(dǎo)致的坐標(biāo)偏差）
  lastX = (e.clientX - rect.left) * (canvas.value.width / rect.width);
  lastY = (e.clientY - rect.top) * (canvas.value.height / rect.height);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(lastX + 0.1, lastY + 0.1); // 繪制初始點(diǎn)（避免點(diǎn)擊不拖動(dòng)無痕跡）
  ctx.stroke();
}

// 實(shí)時(shí)繪制
function draw(e) {
  if (!ctx || !isDrawing.value) return;
  const rect = canvas.value.getBoundingClientRect();
  const x = (e.clientX - rect.left) * (canvas.value.width / rect.width);
  const y = (e.clientY - rect.top) * (canvas.value.height / rect.height);
  ctx.lineTo(x, y); // 連接上一坐標(biāo)與當(dāng)前坐標(biāo)
  ctx.stroke();
  lastX = x; // 更新上一坐標(biāo)
  lastY = y;
}

// 結(jié)束繪制
function stopDrawing() {
  isDrawing.value = false;
}

async function checkCanvasEmpty() {
  return new Promise((resolve) => {
    if (!ctx) { resolve(true); return; }
    const imageData = ctx.getImageData(0, 0, 280, 280);
    const data = imageData.data; // 像素?cái)?shù)據(jù)（RGBA，每4個(gè)值對應(yīng)一個(gè)像素）
    const threshold = 250; // 亮度閾值（純白亮度255，低于250視為有繪制）
    for (let i = 0; i < data.length; i += 4) {
      const brightness = (data[i] + data[i+1] + data[i+2]) / 3; // 計(jì)算亮度（灰度值）
      if (brightness < threshold) {
        resolve(false); // 有繪制內(nèi)容
        return;
      }
    }
    resolve(true); // 無繪制內(nèi)容
  });
}

function canvasTo28x28Gray(canvasEl) {
  return new Promise((resolve) => {
    // 1. 創(chuàng)建臨時(shí)畫布（28×28，模型輸入尺寸）
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = 28;
    tempCanvas.height = 28;
    const tempCtx = tempCanvas.getContext('2d');
    if (!tempCtx) { resolve({ imgBlob: null, tempCanvas: null }); return; }
    
    // 2. 縮放繪制（保持比例居中，避免拉伸）
    tempCtx.fillStyle = '#ffffff';
    tempCtx.fillRect(0, 0, 28, 28); // 填充純白背景
    const scale = Math.min(28 / canvasEl.width, 28 / canvasEl.height); // 等比例縮放
    const xOffset = (28 - canvasEl.width * scale) / 2; // X軸居中偏移
    const yOffset = (28 - canvasEl.height * scale) / 2; // Y軸居中偏移
    tempCtx.drawImage(
      canvasEl,
      0, 0, canvasEl.width, canvasEl.height, // 源圖像區(qū)域
      xOffset, yOffset, canvasEl.width * scale, canvasEl.height * scale // 目標(biāo)繪制區(qū)域
    );
    
    // 3. 灰度轉(zhuǎn)換與顏色反轉(zhuǎn)（匹配MNIST數(shù)據(jù)分布）
    const imageData = tempCtx.getImageData(0, 0, 28, 28);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      const brightness = (data[i] + data[i+1] + data[i+2]) / 3; // 灰度值
      const inverted = 255 - brightness; // 反轉(zhuǎn)：白底黑字→黑底白字
      data[i] = data[i+1] = data[i+2] = inverted; // RGB通道統(tǒng)一為反轉(zhuǎn)后值
      data[i+3] = 255; // 透明度保持100%
    }
    tempCtx.putImageData(imageData, 0, 0);
    
    // 4. 生成Blob（用于FormData傳輸）
    tempCanvas.toBlob((blob) => {
      resolve({ imgBlob: blob, tempCanvas: tempCanvas });
    }, 'image/png', 1.0); // 無損壓縮，避免圖像細(xì)節(jié)丟失
  });
}

async function predictDigit() {
  if (!ctx) { errorMessage.value = '畫布未初始化，請刷新'; return; }
  isLoading.value = true;
  errorMessage.value = '';
  
  try {
    // 步驟1：檢查畫布是否有內(nèi)容
    const isEmpty = await checkCanvasEmpty();
    if (isEmpty) {
      errorMessage.value = '請先繪制數(shù)字';
      isLoading.value = false;
      return;
    }
    
    // 步驟2：預(yù)處理圖像（轉(zhuǎn)為28×28灰度Blob）
    const { imgBlob, tempCanvas } = await canvasTo28x28Gray(canvas.value);
    if (!imgBlob) { throw new Error('圖像轉(zhuǎn)換失敗，無法生成有效數(shù)據(jù)'); }
    
    // 步驟3：預(yù)覽調(diào)試圖像（若開啟調(diào)試）
    if (showDebug.value && debugCtx && tempCanvas) {
      debugCtx.drawImage(tempCanvas, 0, 0, 280, 280); // 放大10倍顯示
    }
    
    // 步驟4：構(gòu)建FormData（后端接收文件格式）
    const formData = new FormData();
    formData.append('file', imgBlob, 'digit.png'); // 參數(shù)名'file'需與后端一致
    
    // 步驟5：發(fā)送請求（不手動(dòng)設(shè)置Content-Type，axios自動(dòng)處理邊界符）
    const response = await axios.post(
      'http://localhost:8000/predict', // 后端接口地址
      formData
    );
    
    // 步驟6：處理響應(yīng)（驗(yàn)證數(shù)據(jù)格式）
    if (response.data && 'predicted_digit' in response.data) {
      recognitionResult.value = response.data.predicted_digit;
    } else {
      throw new Error('后端返回?cái)?shù)據(jù)格式異常');
    }
  } catch (error) {
    // 精細(xì)化錯(cuò)誤提示（便于排查問題）
    if (error.response) {
      // 后端返回錯(cuò)誤（如422參數(shù)錯(cuò)誤、500服務(wù)器錯(cuò)誤）
      errorMessage.value = `識別失敗：${error.response.status} - ${
        error.response.data?.error || error.response.data?.detail || '未知錯(cuò)誤'
      }`;
    } else if (error.request) {
      // 無響應(yīng)（后端未啟動(dòng)、跨域問題）
      errorMessage.value = '識別失?。簾o法連接后端服務(wù)，請檢查后端是否運(yùn)行';
    } else {
      // 前端本地錯(cuò)誤（如圖像轉(zhuǎn)換失?。?
      errorMessage.value = `識別失?。?{error.message}`;
    }
    console.error('預(yù)測錯(cuò)誤詳情：', error);
  } finally {
    isLoading.value = false; // 無論成功失敗，結(jié)束加載狀態(tài)
  }
}

<style scoped>
.container {
  text-align: center;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto; /* 容器居中 */
}
canvas {
  border: 2px solid #ccc;
  margin: 10px auto;
  display: block;
  background-color: #ffffff; /* 匹配畫布初始化背景 */
  touch-action: none; /* 禁止瀏覽器默認(rèn)觸摸行為（適配移動(dòng)端） */
}
.debug-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px; /* 圓角提升美觀度 */
}
.debug-info {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}
.buttons {
  margin: 20px 0;
}
button {
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
  background-color: #42b983; /* Vue默認(rèn)主題色，辨識度高 */
  color: white;
  border: none;
  border-radius: 4px;
  transition: opacity 0.3s; /*  hover過渡效果 */
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed; /* 禁用狀態(tài)光標(biāo)提示 */
  opacity: 0.7;
}
button:hover:not(:disabled) {
  opacity: 0.8; /* hover時(shí)降低透明度，反饋交互 */
}
.result {
  font-size: 20px;
  margin-top: 20px;
  color: #42b983; /* 成功顏色 */
}
.error {
  font-size: 16px;
  color: #e53e3e; /* 錯(cuò)誤顏色 */
  margin-top: 10px;
}
</style>

from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import torch
import torch.nn as nn
from PIL import Image
import numpy as np

# 初始化FastAPI應(yīng)用
app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 開發(fā)環(huán)境允許所有源（生產(chǎn)環(huán)境需指定具體域名）
    allow_credentials=True,  # 允許攜帶Cookie（本項(xiàng)目暫用不到，保留擴(kuò)展性）
    allow_methods=["*"],  # 允許所有HTTP方法（GET/POST等）
    allow_headers=["*"],  # 允許所有請求頭
)

class LeNet5(nn.Module):
    def __init__(self):
        super(LeNet5, self).__init__()
        # 網(wǎng)絡(luò)層序列（卷積→激活→池化→卷積→激活→池化→卷積→激活→展平→全連接→激活→全連接）
        self.net = nn.Sequential(
            # C1層：1→6通道，5×5卷積核，padding=2（保持28×28輸出）
            nn.Conv2d(in_channels=1, out_channels=6, kernel_size=5, padding=2),
            nn.Tanh(),  # 激活函數(shù)（LeNet5原設(shè)計(jì)，引入非線性）
            nn.AvgPool2d(kernel_size=2, stride=2),  # S2層：2×2平均池化，輸出14×14
            
            # C3層：6→16通道，5×5卷積核（無padding，輸出10×10）
            nn.Conv2d(in_channels=6, out_channels=16, kernel_size=5),
            nn.Tanh(),
            nn.AvgPool2d(kernel_size=2, stride=2),  # S4層：輸出5×5
            
            # C5層：16→120通道，5×5卷積核（輸出1×1，等效全連接）
            nn.Conv2d(in_channels=16, out_channels=120, kernel_size=5),
            nn.Tanh(),
            nn.Flatten(),  # 展平：120×1×1→120維向量
            
            # F6層：全連接，120→84
            nn.Linear(in_features=120, out_features=84),
            nn.Tanh(),
            # 輸出層：全連接，84→10（對應(yīng)0-9數(shù)字）
            nn.Linear(in_features=84, out_features=10)
        )
    
    # 前向傳播（定義數(shù)據(jù)流動(dòng)路徑）
    def forward(self, x):
        return self.net(x)

# 初始化模型
model = LeNet5()
# 加載權(quán)重（map_location='cpu'適配無GPU環(huán)境）
state_dict = torch.load('LeNet5_mnist.pth', map_location=torch.device('cpu'))
model.load_state_dict(state_dict)  # 權(quán)重參數(shù)映射到模型
model.eval()  # 切換為評估模式（關(guān)鍵：禁用Dropout/BatchNorm等訓(xùn)練層）

def preprocess_image(image):
    # 1. 轉(zhuǎn)為灰度圖（即使前端已處理，后端二次確認(rèn)，避免格式錯(cuò)誤）
    image = image.convert('L')  # 'L'模式為單通道灰度圖
    
    # 2. 確保尺寸為28×28（前端可能因異常未縮放，后端兜底）
    image = image.resize((28, 28), Image.Resampling.LANCZOS)  # 高質(zhì)量插值縮放
    
    # 3. 轉(zhuǎn)為numpy數(shù)組并歸一化（匹配訓(xùn)練時(shí)的數(shù)據(jù)分布）
    image = np.array(image, dtype=np.float32)  # 轉(zhuǎn)為32位浮點(diǎn)數(shù)數(shù)組
    mean = 0.1307  # MNIST數(shù)據(jù)集均值（訓(xùn)練時(shí)計(jì)算，需固定）
    std = 0.3081   # MNIST數(shù)據(jù)集標(biāo)準(zhǔn)差（訓(xùn)練時(shí)計(jì)算，需固定）
    image = (image / 255.0 - mean) / std  # 步驟：0-255→0-1→標(biāo)準(zhǔn)化（均值0，標(biāo)準(zhǔn)差1）
    
    # 4. 調(diào)整維度（模型輸入：batch×通道×高×寬）
    image = np.expand_dims(image, axis=0)  # 增加通道維度：(28,28)→(1,28,28)
    image = np.expand_dims(image, axis=0)  # 增加batch維度：(1,28,28)→(1,1,28,28)
    
    # 5. 轉(zhuǎn)為PyTorch張量
    return torch.tensor(image)

@app.post("/predict")
async def predict_digit(file: UploadFile = File(...)):
    try:
        # 1. 打印調(diào)試信息（便于排查文件接收問題）
        print(f"收到文件: {file.filename}, 類型: {file.content_type}")
        
        # 2. 讀取圖像（PIL.Image打開）
        image = Image.open(file.file)
        print(f"原始圖像 - 尺寸: {image.size}, 模式: {image.mode}")
        
        # 3. 圖像預(yù)處理
        input_tensor = preprocess_image(image)
        print(f"預(yù)處理后 - 張量維度: {input_tensor.shape}, 數(shù)據(jù)類型: {input_tensor.dtype}")
        
        # 4. 模型預(yù)測（禁用梯度計(jì)算，節(jié)省資源）
        with torch.no_grad():
            output = model(input_tensor)  # 模型輸出：(1,10)（1個(gè)樣本，10個(gè)類別概率）
            predicted_digit = torch.argmax(output, dim=1).item()  # 取概率最大的類別
        
        # 5. 返回結(jié)果（JSON格式，前端可直接解析）
        return {"predicted_digit": predicted_digit}
    
    except Exception as e:
        # 異常捕獲（打印錯(cuò)誤信息，返回錯(cuò)誤提示）
        print(f"處理請求時(shí)出錯(cuò): {str(e)}")
        return {"error": str(e)}

# 啟動(dòng)服務(wù)（當(dāng)腳本直接運(yùn)行時(shí)）
if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)  # 0.0.0.0允許局域網(wǎng)訪問，端口8000

import torch
import torch.nn as nn
from torch.utils.data import DataLoader
from torchvision import transforms, datasets
import matplotlib.pyplot as plt

# 解決中文顯示問題
plt.rcParams['font.sans-serif'] = ['SimSun']
plt.rcParams['axes.unicode_minus'] = False

def prepare_data():
    # 數(shù)據(jù)轉(zhuǎn)換 pipeline（與后端預(yù)處理邏輯一致）
    transform = transforms.Compose([
        transforms.ToTensor(),  # 轉(zhuǎn)為張量：(H,W,C)→(C,H,W)，值歸一化到0-1
        transforms.Normalize(0.1307, 0.3081)  # 標(biāo)準(zhǔn)化（均值+標(biāo)準(zhǔn)差）
    ])
    
    # 加載訓(xùn)練集（train=True），自動(dòng)下載到./dataset/mnist/
    train_dataset = datasets.MNIST(
        root='./dataset/mnist/',
        train=True,
        download=True,
        transform=transform
    )
    
    # 加載測試集（train=False）
    test_dataset = datasets.MNIST(
        root='./dataset/mnist/',
        train=False,
        download=True,
        transform=transform
    )
    
    # 創(chuàng)建DataLoader（按批次加載，訓(xùn)練集打亂）
    train_loader = DataLoader(
        train_dataset,
        batch_size=256,  # 批次大?。ǜ鶕?jù)內(nèi)存調(diào)整，256兼顧速度與內(nèi)存）
        shuffle=True     # 訓(xùn)練集打亂，增強(qiáng)泛化能力
    )
    test_loader = DataLoader(
        test_dataset,
        batch_size=256,
        shuffle=False    # 測試集無需打亂
    )
    
    return train_loader, test_loader

def train_model(model, train_loader, epochs=5, lr=0.9):
    # 1. 損失函數(shù)：交叉熵?fù)p失（分類任務(wù)專用，含Softmax激活）
    criterion = nn.CrossEntropyLoss()
    # 2. 優(yōu)化器：隨機(jī)梯度下降（SGD），lr=0.9為LeNet5經(jīng)典學(xué)習(xí)率
    optimizer = torch.optim.SGD(model.parameters(), lr=lr)
    
    # 3. 記錄損失（用于繪制曲線，觀察訓(xùn)練效果）
    train_losses = []
    
    # 4. 訓(xùn)練循環(huán)
    print("\n開始訓(xùn)練...")
    for epoch in range(epochs):
        model.train()  # 切換為訓(xùn)練模式（啟用Dropout/BatchNorm）
        total_loss = 0.0
        
        # 遍歷訓(xùn)練集批次
        for batch_idx, (images, labels) in enumerate(train_loader):
            # 前向傳播：輸入圖像，獲取模型輸出
            outputs = model(images)
            # 計(jì)算損失：輸出與真實(shí)標(biāo)簽的差異
            loss = criterion(outputs, labels)
            
            # 反向傳播與參數(shù)更新
            optimizer.zero_grad()  # 清空上一輪梯度（避免累積）
            loss.backward()        # 反向傳播計(jì)算梯度
            optimizer.step()       # 根據(jù)梯度更新模型參數(shù)
            
            # 記錄損失
            train_losses.append(loss.item())
            total_loss += loss.item()
            
            # 每100個(gè)批次打印一次中間結(jié)果
            if (batch_idx + 1) % 100 == 0:
                print(f"輪次 [{epoch+1}/{epochs}], 批次 [{batch_idx+1}/{len(train_loader)}], "
                      f"當(dāng)前批次損失: {loss.item():.4f}")
        
        # 打印本輪平均損失
        avg_loss = total_loss / len(train_loader)
        print(f"輪次 [{epoch+1}/{epochs}] 平均損失: {avg_loss:.4f}")
    
    # 5. 繪制損失曲線（直觀觀察訓(xùn)練收斂情況）
    plt.figure(figsize=(10, 4))
    plt.plot(train_losses, label='訓(xùn)練損失')
    plt.xlabel('批次')
    plt.ylabel('損失值')
    plt.title('訓(xùn)練損失變化曲線')
    plt.legend()
    plt.show()
    
    # 6. 保存模型權(quán)重（僅保存狀態(tài)字典，節(jié)省空間）
    torch.save(model.state_dict(), 'LeNet5_mnist.pth')
    print(f"模型已保存為 'LeNet5_mnist.pth'")
    
    return model, train_losses

def test_model(model, test_loader):
    model.eval()  # 切換為評估模式
    correct = 0  # 正確預(yù)測數(shù)
    total = 0    # 總樣本數(shù)
    
    # 禁用梯度計(jì)算（測試階段無需更新參數(shù)）
    with torch.no_grad():
        print("\n開始測試...")
        for images, labels in test_loader:
            outputs = model(images)
            _, predicted = torch.max(outputs.data, 1)  # 取概率最大的類別
            total += labels.size(0)
            correct += (predicted == labels).sum().item()  # 統(tǒng)計(jì)正確數(shù)
    
    # 計(jì)算并打印準(zhǔn)確率
    accuracy = 100 * correct / total
    print(f"測試集準(zhǔn)確率: {accuracy:.2f}%")
    return accuracy

def main():
    # 步驟1：準(zhǔn)備數(shù)據(jù)
    train_loader, test_loader = prepare_data()
    print("數(shù)據(jù)準(zhǔn)備完成，訓(xùn)練集樣本數(shù)：", len(train_loader.dataset), 
          "測試集樣本數(shù)：", len(test_loader.dataset))
    
    # 步驟2：初始化模型（與后端LeNet5完全一致）
    model = LeNet5()
    print("\nLeNet-5模型初始化完成")
    
    # 步驟3：訓(xùn)練模型
    trained_model, losses = train_model(model, train_loader, epochs=5)
    
    # 步驟4：測試模型
    test_model(trained_model, test_loader)

if __name__ == "__main__":
    main()

pip install fastapi uvicorn torch torchvision pillow numpy

cd D:\ProjectPython\DNN_CNN\mnist-frontend
npm create vue@latest .  # 初始化Vue項(xiàng)目，全部選“NO”（簡化配置）
npm install axios

cd D:\ProjectPython\DNN_CNN
python CNN_Proj.py

python main.py

# 后端 main.py（PyTorch 版本）
from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import torch
import torch.nn as nn
from PIL import Image
import numpy as np

app = FastAPI()

# 允許跨域
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 定義與CNN_Proj.py中一致的LeNet5模型結(jié)構(gòu)
class LeNet5(nn.Module):
    def __init__(self):
        super(LeNet5, self).__init__()
        self.net = nn.Sequential(
            nn.Conv2d(in_channels=1, out_channels=6, kernel_size=5, padding=2),
            nn.Tanh(),
            nn.AvgPool2d(kernel_size=2, stride=2),
            nn.Conv2d(in_channels=6, out_channels=16, kernel_size=5),
            nn.Tanh(),
            nn.AvgPool2d(kernel_size=2, stride=2),
            nn.Conv2d(in_channels=16, out_channels=120, kernel_size=5),
            nn.Tanh(),
            nn.Flatten(),
            nn.Linear(in_features=120, out_features=84),
            nn.Tanh(),
            nn.Linear(in_features=84, out_features=10)
        )
    
    def forward(self, x):
        return self.net(x)

# 初始化模型
model = LeNet5()

# 加載權(quán)重（無需修改鍵名，直接匹配）
state_dict = torch.load('LeNet5_mnist.pth', map_location=torch.device('cpu'))
model.load_state_dict(state_dict)
model.eval()  # 切換為評估模式

# 圖像預(yù)處理（適配MNIST數(shù)據(jù)集的預(yù)處理方式）
def preprocess_image(image):
    # 確保圖像轉(zhuǎn)為灰度圖（即使前端已處理，后端再次確認(rèn)）
    image = image.convert('L')  # 轉(zhuǎn)為灰度圖
    
    # 確保圖像尺寸為28x28（即使前端已處理，后端再次確認(rèn)）
    image = image.resize((28, 28), Image.Resampling.LANCZOS)  # 使用高質(zhì)量插值方法
    
    # 轉(zhuǎn)換為numpy數(shù)組并歸一化
    image = np.array(image, dtype=np.float32)  # 轉(zhuǎn)為數(shù)組
    
    # 按照訓(xùn)練時(shí)的方式歸一化（MNIST的均值和標(biāo)準(zhǔn)差）
    mean = 0.1307
    std = 0.3081
    image = (image / 255.0 - mean) / std  # 先歸一化到0-1再標(biāo)準(zhǔn)化
    
    # 確保輸入維度正確
    image = np.expand_dims(image, axis=0)  # 增加通道維度 (1,28,28)
    image = np.expand_dims(image, axis=0)  # 增加batch維度 (1,1,28,28)
    
    return torch.tensor(image)

# 預(yù)測接口
@app.post("/predict")
async def predict_digit(file: UploadFile = File(...)):
    try:
        # 打印文件基本信息用于調(diào)試
        print(f"收到文件: {file.filename}, 類型: {file.content_type}")
        
        # 讀取圖像
        image = Image.open(file.file)
        print(f"原始圖像 - 尺寸: {image.size}, 模式: {image.mode}")  # 檢查圖像初始狀態(tài)
        
        # 預(yù)處理
        input_tensor = preprocess_image(image)
        print(f"預(yù)處理后 - 張量維度: {input_tensor.shape}, 數(shù)據(jù)類型: {input_tensor.dtype}")  # 檢查處理后狀態(tài)
        
        # 預(yù)測
        with torch.no_grad():
            output = model(input_tensor)
            predicted_digit = torch.argmax(output, dim=1).item()
        return {"predicted_digit": predicted_digit}
    
    except Exception as e:
        # 打印異常信息用于調(diào)試
        print(f"處理請求時(shí)出錯(cuò): {str(e)}")
        return {"error": str(e)}

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)```


接下來簡單展示一下啟動(dòng)步驟：
#### 1. 打開終端，進(jìn)入 `main.py` 所在目錄  
以我的文件結(jié)構(gòu)來舉例：  

在 **VS Code** 里：  
- 點(diǎn)擊左側(cè)“資源管理器”，找到 `DNN_CNN` 文件夾  
- 點(diǎn)擊頂部菜單 **終端 → 新建終端**（會(huì)自動(dòng)進(jìn)入當(dāng)前目錄 ）  
- 也可以直接用cd ＋ 文件路徑


#### 2. 運(yùn)行 `uvicorn` 命令  
在終端里輸入：  
```bash
uvicorn main:app --reload

INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [12345]
INFO:     Started server process [12346]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

# 1. 創(chuàng)建 Vue3 項(xiàng)目（項(xiàng)目名 mnist-frontend，模板選 vue）
npm create vite@latest mnist-frontend -- --template vue

# 2. 進(jìn)入項(xiàng)目目錄
cd mnist-frontend

# 3. 安裝依賴（等待安裝完成）
npm install

# 4. 啟動(dòng)開發(fā)環(huán)境（啟動(dòng)后，瀏覽器訪問 http://127.0.0.1:5173）
npm run dev

<template>
  <div class="container">
    <h1>手寫數(shù)字識別</h1>
    
    <!-- 主畫布 -->
    <canvas 
      ref="canvas" 
      width="280" 
      height="280" 
      @mousedown="startDrawing" 
      @mousemove="draw" 
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
    <!-- 調(diào)試畫布（v-show 保持 DOM 存在） -->
    <div class="debug-section" v-show="showDebug">
      <h3>預(yù)處理后圖像（28x28 放大）</h3>
      <canvas ref="debugCanvas" width="280" height="280"></canvas>
      <p class="debug-info">實(shí)際尺寸 28x28 | 放大 10 倍</p>
    </div>
    <!-- 控制按鈕 -->
    <div class="buttons">
      <button @click="clearCanvas" :disabled="isLoading">清除畫布</button>
      <button @click="predictDigit" :disabled="isLoading">
        {{ isLoading ? '識別中...' : '識別' }}
      </button>
      <button @click="toggleDebug">顯示/隱藏調(diào)試</button>
    </div>
    <!-- 結(jié)果與錯(cuò)誤提示 -->
    <div class="result" v-if="recognitionResult">識別結(jié)果：{{ recognitionResult }}</div>
    <div class="error" v-if="errorMessage">錯(cuò)誤：{{ errorMessage }}</div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import axios from 'axios';
// 響應(yīng)式變量
const canvas = ref(null);
const debugCanvas = ref(null);
const showDebug = ref(false);
const isDrawing = ref(false);
const isLoading = ref(false);
const recognitionResult = ref('');
const errorMessage = ref('');
let ctx = null;
let debugCtx = null;
let lastX = 0;
let lastY = 0;
// 初始化畫布（確保 DOM 渲染完成）
onMounted(async () => {
  await nextTick(); // 等待 DOM 完全渲染
  
  // 主畫布初始化
  if (canvas.value) {
    ctx = canvas.value.getContext('2d', { willReadFrequently: true });
    if (ctx) {
      ctx.fillStyle = '#ffffff'; // 改為純白背景，與MNIST訓(xùn)練數(shù)據(jù)背景一致
      ctx.fillRect(0, 0, 280, 280);
      ctx.lineWidth = 12; // 調(diào)整畫筆寬度，避免預(yù)處理后線條過細(xì)
      ctx.strokeStyle = 'black';
      ctx.lineCap = 'round'; // 畫筆端點(diǎn)圓潤，避免鋸齒
      ctx.lineJoin = 'round'; // 畫筆拐角圓潤，提升繪制體驗(yàn)
    } else {
      errorMessage.value = '主畫布初始化失敗，請刷新';
    }
  } else {
    errorMessage.value = '未找到主畫布元素，請檢查代碼';
  }
  // 調(diào)試畫布初始化（v-show 已確保 DOM 存在）
  if (debugCanvas.value) {
    debugCtx = debugCanvas.value.getContext('2d', { willReadFrequently: true });
    if (debugCtx) {
      debugCtx.fillStyle = '#ffffff';
      debugCtx.fillRect(0, 0, 280, 280);
    } else {
      console.warn('調(diào)試畫布初始化失?。ú挥绊懼鞴δ埽?);
    }
  }
});
// 監(jiān)聽 showDebug 變化，重新初始化調(diào)試畫布
watch(showDebug, (newVal) => {
  if (newVal && debugCanvas.value && !debugCtx) {
    debugCtx = debugCanvas.value.getContext('2d', { willReadFrequently: true });
    if (debugCtx) {
      debugCtx.fillStyle = '#ffffff';
      debugCtx.fillRect(0, 0, 280, 280);
    }
  }
});
// 繪制邏輯 - 修復(fù)坐標(biāo)計(jì)算與繪制連續(xù)性問題
function startDrawing(e) {
  if (!ctx) return;
  isDrawing.value = true;
  const rect = canvas.value.getBoundingClientRect();
  // 計(jì)算畫布內(nèi)真實(shí)坐標(biāo)（處理畫布縮放場景）
  lastX = (e.clientX - rect.left) * (canvas.value.width / rect.width);
  lastY = (e.clientY - rect.top) * (canvas.value.height / rect.height);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  // 繪制初始點(diǎn)（解決點(diǎn)擊畫布不拖動(dòng)無痕跡問題）
  ctx.lineTo(lastX + 0.1, lastY + 0.1);
  ctx.stroke();
}
function draw(e) {
  if (!ctx || !isDrawing.value) return;
  const rect = canvas.value.getBoundingClientRect();
  // 計(jì)算畫布內(nèi)真實(shí)坐標(biāo)
  const x = (e.clientX - rect.left) * (canvas.value.width / rect.width);
  const y = (e.clientY - rect.top) * (canvas.value.height / rect.height);
  ctx.lineTo(x, y);
  ctx.stroke();
  lastX = x;
  lastY = y;
}
function stopDrawing() {
  isDrawing.value = false;
}
// 清除畫布
function clearCanvas() {
  if (!ctx) return;
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, 280, 280);
  
  // 清除調(diào)試畫布
  if (debugCtx) {
    debugCtx.fillStyle = '#ffffff';
    debugCtx.fillRect(0, 0, 280, 280);
  }
  
  recognitionResult.value = '';
  errorMessage.value = '';
}
// 切換調(diào)試視圖
function toggleDebug() {
  showDebug.value = !showDebug.value;
}
// 預(yù)測邏輯 - 修復(fù)FormData構(gòu)建與錯(cuò)誤處理
async function predictDigit() {
  if (!ctx) {
    errorMessage.value = '畫布未初始化，請刷新';
    return;
  }
  
  isLoading.value = true;
  errorMessage.value = '';
  
  try {
    // 檢查畫布是否有內(nèi)容（優(yōu)化閾值，適配純白背景）
    const isEmpty = await checkCanvasEmpty();
    if (isEmpty) {
      errorMessage.value = '請先繪制數(shù)字';
      isLoading.value = false;
      return;
    }
    // 轉(zhuǎn)換為 28x28 灰度圖（前端預(yù)處理）
    const { imgBlob, tempCanvas } = await canvasTo28x28Gray(canvas.value);
    if (!imgBlob) {
      throw new Error('圖像轉(zhuǎn)換失敗，無法生成有效圖像數(shù)據(jù)');
    }
    // 顯示調(diào)試圖像（放大）
    if (showDebug.value && debugCtx && tempCanvas) {
      debugCtx.drawImage(tempCanvas, 0, 0, 280, 280);
    }
    // 調(diào)用后端識別 - 修復(fù)FormData構(gòu)建，移除手動(dòng)設(shè)置Content-Type（axios自動(dòng)處理）
    const formData = new FormData();
    formData.append('file', imgBlob, 'digit.png'); // 參數(shù)名改為'file'，與后端UploadFile參數(shù)名匹配
    
    const response = await axios.post(
      'http://localhost:8000/predict', 
      formData
      // 移除手動(dòng)設(shè)置的Content-Type，避免邊界符缺失問題
    );
    
    // 驗(yàn)證響應(yīng)數(shù)據(jù)格式
    if (response.data && 'predicted_digit' in response.data) {
      recognitionResult.value = response.data.predicted_digit;
    } else {
      throw new Error('后端返回?cái)?shù)據(jù)格式異常');
    }
  } catch (error) {
    // 精細(xì)化錯(cuò)誤提示
    if (error.response) {
      // 后端返回錯(cuò)誤（如422、500）
      errorMessage.value = `識別失?。?{error.response.status} - ${
        error.response.data?.error || error.response.data?.detail || '未知錯(cuò)誤'
      }`;
    } else if (error.request) {
      // 無響應(yīng)（如后端未啟動(dòng)、跨域問題）
      errorMessage.value = '識別失?。簾o法連接后端服務(wù)，請檢查后端是否運(yùn)行';
    } else {
      // 前端本地錯(cuò)誤（如圖像轉(zhuǎn)換）
      errorMessage.value = `識別失?。?{error.message}`;
    }
    console.error('預(yù)測錯(cuò)誤詳情：', error);
  } finally {
    isLoading.value = false;
  }
}
// 輔助函數(shù)：檢查畫布是否為空（優(yōu)化閾值，適配純白背景）
async function checkCanvasEmpty() {
  return new Promise((resolve) => {
    if (!ctx) {
      resolve(true);
      return;
    }
    
    const imageData = ctx.getImageData(0, 0, 280, 280);
    const data = imageData.data;
    const threshold = 250; // 純白背景下，低于250視為有繪制內(nèi)容
    for (let i = 0; i < data.length; i += 4) {
      const brightness = (data[i] + data[i+1] + data[i+2]) / 3;
      if (brightness < threshold) {
        resolve(false);
        return;
      }
    }
    resolve(true);
  });
}
// 輔助函數(shù)：Canvas 轉(zhuǎn) 28x28 灰度圖（修復(fù)圖像反轉(zhuǎn)邏輯，匹配MNIST）
function canvasTo28x28Gray(canvasEl) {
  return new Promise((resolve) => {
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = 28;
    tempCanvas.height = 28;
    const tempCtx = tempCanvas.getContext('2d');
    if (!tempCtx) {
      resolve({ imgBlob: null, tempCanvas: null });
      return;
    }
    
    // 1. 繪制時(shí)保持圖像比例，避免拉伸（居中繪制）
    tempCtx.fillStyle = '#ffffff';
    tempCtx.fillRect(0, 0, 28, 28); // 先填充純白背景
    // 計(jì)算縮放比例（確保圖像完全放入28x28畫布，保留比例）
    const scale = Math.min(28 / canvasEl.width, 28 / canvasEl.height);
    const xOffset = (28 - canvasEl.width * scale) / 2;
    const yOffset = (28 - canvasEl.height * scale) / 2;
    tempCtx.drawImage(
      canvasEl,
      0, 0, canvasEl.width, canvasEl.height,
      xOffset, yOffset, canvasEl.width * scale, canvasEl.height * scale
    );
    
    // 2. 轉(zhuǎn)灰度并反轉(zhuǎn)（MNIST：白底黑字 → 黑底白字，增強(qiáng)特征）
    const imageData = tempCtx.getImageData(0, 0, 28, 28);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      // 計(jì)算亮度（灰度值）
      const brightness = (data[i] + data[i+1] + data[i+2]) / 3;
      // 反轉(zhuǎn)：白色（高亮度）→ 黑色（0），黑色（低亮度）→ 白色（255），匹配MNIST數(shù)據(jù)分布
      const inverted = 255 - brightness;
      data[i] = data[i+1] = data[i+2] = inverted;
      data[i+3] = 255; // 保持不透明
    }
    tempCtx.putImageData(imageData, 0, 0);
    
    // 3. 生成Blob（指定質(zhì)量，避免數(shù)據(jù)損壞）
    tempCanvas.toBlob((blob) => {
      resolve({ imgBlob: blob, tempCanvas: tempCanvas });
    }, 'image/png', 1.0); // 1.0表示無損壓縮，確保圖像細(xì)節(jié)不丟失
  });
}
</script>
<style scoped>
.container {
  text-align: center;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
canvas {
  border: 2px solid #ccc;
  margin: 10px auto;
  display: block;
  background-color: #ffffff; /* 匹配初始化的純白背景 */
  touch-action: none;
}
.debug-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.debug-info {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}
.buttons {
  margin: 20px 0;
}
button {
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  transition: opacity 0.3s;
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}
button:hover:not(:disabled) {
  opacity: 0.8;
}
.result {
  font-size: 20px;
  margin-top: 20px;
  color: #42b983;
}
.error {
  font-size: 16px;
  color: #e53e3e;
  margin-top: 10px;
}
</style>

cd D:\ProjectPython\DNN_CNN\mnist-frontend\src
npm run dev

uvicorn main:app --reload

npm run dev