[機器學習]CNN學習MNIST 手寫英文字母資料，用網頁展現成果_Streamlit Web應用程式篇
前言
上一篇討論到如何訓練出模型，此篇將說明Streamlit建立的簡單Web應用程式的解說
程式碼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)
- 安裝相依套件：
pythonCopy code# pip install streamlit
這裡使用Streamlit及其相應的繪圖庫。
# pip install streamlit-drawable-canvas - 導入相關套件：
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 - 載入預先訓練的模型：
pythonCopy codemodel = tf.keras.models.load_model('model.h5')
載入已經訓練好的模型。 - 設置Streamlit應用程式的標題：
pythonCopy codest.title('Crab_A~Z辨識')
設定應用程式的標題。 - 創建兩個欄位（Columns）：
pythonCopy codecol1, col2 = st.columns(2)
在應用程式中創建兩個欄位，用於顯示手繪畫布和辨識結果。 - 在第一個欄位創建可繪畫的畫布：
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",
) - 在第二個欄位檢查是否點擊了辨識按鈕：
pythonCopy codeif st.button('辨識'):
當使用者點擊了辨識按鈕時執行以下操作： - 將手繪畫布的圖像轉換為灰度並調整大小：
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)：
- 這行程式碼顯示原始手繪圖像，讓使用者能夠看到他們繪製的字母。
若有問題歡迎提問，喜歡的話按下愛心 追蹤 給我點鼓勵 謝謝
