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

更新於 發佈於 閱讀時間約 10 分鐘

前言

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

Streamlit網頁App_貓狗辨識 連結

程式碼Github連結

簡單WEB APP呈現

簡單WEB APP呈現


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

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

Github上檔案說明

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)

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



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

留言
avatar-img
留言分享你的想法!
avatar-img
螃蟹_crab的沙龍
150會員
297內容數
本業是影像辨識軟體開發,閒暇時間進修AI相關內容,將學習到的內容寫成文章分享。 興趣是攝影,踏青,探索未知領域。 人生就是不斷的挑戰及自我認清,希望老了躺在床上不會後悔自己什麼都沒做。
螃蟹_crab的沙龍的其他內容
2024/05/18
感知器是一種基本的神經網路模型,用於二分類問題。它模擬了人腦神經元的工作原理,通過調整權重和偏差值來達到預測和分類的目的。 感知器流程 輸入 資料的輸入: 輸入層接受資料的輸入,每個輸入對應一個特徵,還有一個固定的偏差神經元。 資料經過每個神經元時,會乘上相應的
Thumbnail
2024/05/18
感知器是一種基本的神經網路模型,用於二分類問題。它模擬了人腦神經元的工作原理,通過調整權重和偏差值來達到預測和分類的目的。 感知器流程 輸入 資料的輸入: 輸入層接受資料的輸入,每個輸入對應一個特徵,還有一個固定的偏差神經元。 資料經過每個神經元時,會乘上相應的
Thumbnail
2024/01/06
本文會利用sklearn引入breast_cancer datasets來訓練,在處理數據的部份,特徵工程用兩種方式去做處理,分別是特徵選取與特徵萃取的方式去做比較。 特徵選取的方法中,使用了KNN 分類器來選出最重要的兩個特徵 特徵萃取的方法中,使用了PCA降維
Thumbnail
2024/01/06
本文會利用sklearn引入breast_cancer datasets來訓練,在處理數據的部份,特徵工程用兩種方式去做處理,分別是特徵選取與特徵萃取的方式去做比較。 特徵選取的方法中,使用了KNN 分類器來選出最重要的兩個特徵 特徵萃取的方法中,使用了PCA降維
Thumbnail
2024/01/06
streamlit與github連動程式庫,呈現即時預測手寫英文字母 整理了一下,先前學的機器學習利用Colab來訓練出能辨識手寫A~Z英文字母的模型,使用的模型是CNN(Convolutional Neural Network,CNN)模型 訓練好的模型,當然是要拿來應用,成果呈現
Thumbnail
2024/01/06
streamlit與github連動程式庫,呈現即時預測手寫英文字母 整理了一下,先前學的機器學習利用Colab來訓練出能辨識手寫A~Z英文字母的模型,使用的模型是CNN(Convolutional Neural Network,CNN)模型 訓練好的模型,當然是要拿來應用,成果呈現
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
本文介紹了人工智慧(AI)及機器學習(ML)的基本概念和關係,探討了數據在機器學習中的重要性,以及深度學習和生成式人工智慧的應用。
Thumbnail
本文介紹了人工智慧(AI)及機器學習(ML)的基本概念和關係,探討了數據在機器學習中的重要性,以及深度學習和生成式人工智慧的應用。
Thumbnail
這是一篇介紹如何使用AI來生成貓貓圖片的文章,作者透過幾個軟體的使用經驗,分享了AI生成圖片的效果以及注意事項。文章內容豐富,並且有各種關鍵字和描述,可以吸引潛在讀者。
Thumbnail
這是一篇介紹如何使用AI來生成貓貓圖片的文章,作者透過幾個軟體的使用經驗,分享了AI生成圖片的效果以及注意事項。文章內容豐富,並且有各種關鍵字和描述,可以吸引潛在讀者。
Thumbnail
本文將延續上一篇文章,經由訓練好的GAN模型中的生成器來生成圖片 [深度學習][Python]訓練MLP的GAN模型來生成圖片_訓練篇 [深度學習][Python]訓練CNN的GAN模型來生成圖片_訓練篇 相較之下CNN的GAN生成的效果比較好,但模型也相對比較複雜,訓練時間花的也比較
Thumbnail
本文將延續上一篇文章,經由訓練好的GAN模型中的生成器來生成圖片 [深度學習][Python]訓練MLP的GAN模型來生成圖片_訓練篇 [深度學習][Python]訓練CNN的GAN模型來生成圖片_訓練篇 相較之下CNN的GAN生成的效果比較好,但模型也相對比較複雜,訓練時間花的也比較
Thumbnail
這篇文章討論了自然語言處理技術的發展歷程,從語言模型的引入到深度學習的應用。作者觀察到現今GPT在產出中文國學內容時的深度不足,並提出了自然語言處理領域的倫理使用和版權問題,以及對大眾的影響。最後,作者探討了個人在自然語言領域的發展可能性。
Thumbnail
這篇文章討論了自然語言處理技術的發展歷程,從語言模型的引入到深度學習的應用。作者觀察到現今GPT在產出中文國學內容時的深度不足,並提出了自然語言處理領域的倫理使用和版權問題,以及對大眾的影響。最後,作者探討了個人在自然語言領域的發展可能性。
Thumbnail
筆記-曲博談AI模型.群聯-24.05.05 https://www.youtube.com/watch?v=JHE88hwx4b0&t=2034s *大型語言模型 三個步驟: 1.預訓練,訓練一次要用幾萬顆處理器、訓練時間要1個月,ChatGPT訓練一次的成本為1000萬美金。 2.微調(
Thumbnail
筆記-曲博談AI模型.群聯-24.05.05 https://www.youtube.com/watch?v=JHE88hwx4b0&t=2034s *大型語言模型 三個步驟: 1.預訓練,訓練一次要用幾萬顆處理器、訓練時間要1個月,ChatGPT訓練一次的成本為1000萬美金。 2.微調(
Thumbnail
這篇文章介紹瞭如何利用生成式AI(GenAI)來提高學習效率,包括文章重點整理、完善知識體系、客製化學習回饋、提供多元觀點等方法。同時提醒使用者應注意內容的信效度,保持學術誠信,適當運用GenAI能大幅提升工作效率。
Thumbnail
這篇文章介紹瞭如何利用生成式AI(GenAI)來提高學習效率,包括文章重點整理、完善知識體系、客製化學習回饋、提供多元觀點等方法。同時提醒使用者應注意內容的信效度,保持學術誠信,適當運用GenAI能大幅提升工作效率。
Thumbnail
延續上週提到的,「有哪些不訓練模型的情況下,能夠強化語言模型的能力」,這堂課接續介紹其中第 3、4 個方法
Thumbnail
延續上週提到的,「有哪些不訓練模型的情況下,能夠強化語言模型的能力」,這堂課接續介紹其中第 3、4 個方法
Thumbnail
本文介紹了text-generation-webui的安裝方法和模型的選擇,包括模型的下載和擺放位置,並提供了相關的連結和建議。
Thumbnail
本文介紹了text-generation-webui的安裝方法和模型的選擇,包括模型的下載和擺放位置,並提供了相關的連結和建議。
Thumbnail
前言 上一篇討論到如何訓練出模型,此篇將說明Streamlit建立的簡單Web應用程式的解說 Streamlit網頁App_貓狗辨識 連結 程式碼Github連結 [機器學習]CNN學習MNIST 手寫英文字母資料,用網頁展現成果_模型訓練篇 如何連動github與stramlit可以參考
Thumbnail
前言 上一篇討論到如何訓練出模型,此篇將說明Streamlit建立的簡單Web應用程式的解說 Streamlit網頁App_貓狗辨識 連結 程式碼Github連結 [機器學習]CNN學習MNIST 手寫英文字母資料,用網頁展現成果_模型訓練篇 如何連動github與stramlit可以參考
Thumbnail
streamlit與github連動程式庫,呈現即時預測手寫英文字母 整理了一下,先前學的機器學習利用Colab來訓練出能辨識手寫A~Z英文字母的模型,使用的模型是CNN(Convolutional Neural Network,CNN)模型 訓練好的模型,當然是要拿來應用,成果呈現
Thumbnail
streamlit與github連動程式庫,呈現即時預測手寫英文字母 整理了一下,先前學的機器學習利用Colab來訓練出能辨識手寫A~Z英文字母的模型,使用的模型是CNN(Convolutional Neural Network,CNN)模型 訓練好的模型,當然是要拿來應用,成果呈現
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News