[機器學習]CNN學習MNIST 手寫英文字母資料，用網頁展現成果_Streamlit Web應用程式篇

前言

上一篇討論到如何訓練出模型，此篇將說明Streamlit建立的簡單Web應用程式的解說

Streamlit網頁App_貓狗辨識 連結

程式碼Github連結

簡單WEB APP呈現

[機器學習]CNN學習MNIST 手寫英文字母資料，用網頁展現成果_模型訓練篇

如何連動github與stramlit可以參考一下這個文章解釋的蠻清楚的，我就不要班門弄斧了

Github上檔案說明

Github上檔案說明

程式碼說明

# pip install streamlit
# pip install streamlit-drawable-canvas
import streamlit as st 
from streamlit_drawable_canvas import st_canvas
from skimage import data, color, io
from skimage.transform import rescale, resize, downscale_local_mean
from skimage.color import rgb2gray, rgba2rgb

import numpy as np  
import tensorflow as tf
from tensorflow.keras.models import Sequential
from tensorflow.keras.models import model_from_json

# 模型載入
model = tf.keras.models.load_model('model.h5')
st.title('Crab_A~Z辨識')
col1, col2 = st.columns(2)

with col1:
    # Create a canvas component
    canvas_result = st_canvas(
        fill_color="rgba(0, 0, 0, 1)",
        stroke_width=10,
        stroke_color="rgba(0, 0, 0, 1)",
        update_streamlit=True,
        width=280,
        height=280,
        drawing_mode="freedraw",
        key="canvas1",
    )

with col2:
    if st.button('辨識'):
        # print(canvas_result.image_data.shape)
        image1 = rgb2gray(rgba2rgb(canvas_result.image_data))
        image_resized = resize(image1, (28, 28), anti_aliasing=True)  
        # print(image_resized)
        X1 = image_resized.reshape(1,28,28) # / 255
        X1 = np.abs(1-X1)
        
        st.write("predict...")
        predictions = np.argmax(model.predict(X1), axis=-1)
        st.write('# ' + chr(ord('A')+predictions[0]))
        st.image(image_resized)

1. 安裝相依套件：

   pythonCopy code# pip install streamlit
   # pip install streamlit-drawable-canvas

   這裡使用Streamlit及其相應的繪圖庫。
2. 導入相關套件：

   pythonCopy codeimport streamlit as st 
   from streamlit_drawable_canvas import st_canvas
   from skimage import data, color, io
   from skimage.transform import rescale, resize, downscale_local_mean
   from skimage.color import rgb2gray, rgba2rgb
   import numpy as np  
   import tensorflow as tf
   from tensorflow.keras.models import Sequential
   from tensorflow.keras.models import model_from_json

3. 載入預先訓練的模型：

   pythonCopy codemodel = tf.keras.models.load_model('model.h5')

   載入已經訓練好的模型。
4. 設置Streamlit應用程式的標題：

   pythonCopy codest.title('Crab_A~Z辨識')

   設定應用程式的標題。
5. 創建兩個欄位（Columns）：

   pythonCopy codecol1, col2 = st.columns(2)

   在應用程式中創建兩個欄位，用於顯示手繪畫布和辨識結果。
6. 在第一個欄位創建可繪畫的畫布：

   pythonCopy codecanvas_result = st_canvas(
       fill_color="rgba(0, 0, 0, 1)",
       stroke_width=10,
       stroke_color="rgba(0, 0, 0, 1)",
       update_streamlit=True,
       width=280,
       height=280,
       drawing_mode="freedraw",
       key="canvas1",
   )

   這個畫布可以讓使用者自由繪製。
7. 在第二個欄位檢查是否點擊了辨識按鈕：

   pythonCopy codeif st.button('辨識'):

   當使用者點擊了辨識按鈕時執行以下操作：
8. 將手繪畫布的圖像轉換為灰度並調整大小：

   pythonCopy codeimage1 = rgb2gray(rgba2rgb(canvas_result.image_data))
   image_resized = resize(image1, (28, 28), anti_aliasing=True)
   

rgba2rgb(canvas_result.image_data)：

canvas_result.image_data包含手繪畫布上的像素資料。

rgba2rgb將RGBA格式（包含紅、綠、藍和透明度通道）的畫布轉換為RGB格式。

rgb2gray(...)：

rgb2gray將RGB格式的圖像轉換為灰度圖像。

為了簡化模型的輸入，我們將手繪畫布上的彩色圖像轉換為灰度圖像，這樣每個像素只有一個灰度值。

resize(image1, (28, 28), anti_aliasing=True)：

resize函數將灰度圖像調整大小為模型所期望的大小（28x28像素）。

anti_aliasing=True表示在調整大小過程中使用反鋸齒濾波，以平滑像素值，有助於提高預測的準確性。

9.預處理圖像資料，使其適應模型輸入要求：

pythonCopy codeX1 = image_resized.reshape(1, 28, 28)
X1 = np.abs(1 - X1)

reshape(1, 28, 28) : 重新形狀為一個包含單一樣本的三維數組

深度學習模型通常期望輸入是一批樣本的集合，即 (樣本數, 高度, 寬度, 通道數)。在這裡，我們的樣本數為1，因為我們只有一張手繪的圖像。

X1 = np.abs(1 - X1)：將像素值正規化為範圍在0到1之間，以符合深度學習模型對輸入數據的期望。

• 這裡使用了 np.abs(1 - X1)，將像素值反轉，使原本的黑色背景變為白色，有助於與模型的訓練數據一致。

10.進行預測並顯示結果：

pythonCopy codepredictions = np.argmax(model.predict(X1), axis=-1)
st.write('# ' + chr(ord('A')+predictions[0]))
st.image(image_resized)

predictions = np.argmax(model.predict(X1), axis=-1)：

• model.predict(X1) 使用深度學習模型對處理後的手繪圖像進行預測。
• np.argmax(..., axis=-1) 得到預測結果中概率最高的類別索引。會得到是一個字母的索引。

st.write('# ' + chr(ord('A')+predictions[0]))：

• 這行程式碼使用預測的類別索引來顯示預測的字母。索引值被轉換為字母（A-Z）並與#組合，形成最終的預測結果。
• 因為我們預測到的結果是相對應Train標記檔的索引(例如索引0代表A)但在Unicode 編碼65才代表表A，所以要轉換一下才能變成我們要顯示的英文字母
• chr(ord('A')+predictions[0]) 將索引轉換為字母。

ord('A')+predictions[0]：

ord('A') 返回大寫字母 'A' 的 Unicode 編碼，也就是65。

predictions[0] 是模型預測的字母的索引。

將這兩者相加，就會得到預測字母的 Unicode 編碼。

chr(...)：

chr 函數將 Unicode 編碼轉換為對應的字符(A~Z)。

在這裡，chr(ord('A')+predictions[0]) 將預測的字母索引轉換為對應的字母字符。

st.image(image_resized)：

• 這行程式碼顯示原始手繪圖像，讓使用者能夠看到他們繪製的字母。

若有問題歡迎提問，喜歡的話按下愛心 追蹤 給我點鼓勵 謝謝