[Fundamental Data Analytics & Data Scientist EP.05] หมดปัญหาการ Deploy Data Science Project ด้วย Streamlit Part 2

Pasith Thanapatpisarn
3 min readFeb 21, 2021

--

จากตอนที่แล้ว…เราได้ทดลองการใช้ Streamlit สำหรับงาน Data Analytics ไปแล้ว ในตอนนี้มาถึงการใช้ Streamlit สำหรับงาน Data Science กันบ้าง

ตอนที่แล้ว — หมดปัญหาการ Deploy Data Science Project ด้วย Streamlit Part 1

อย่างที่บอกไปในตอนที่แล้วว่า Data Scientist จะใช้ Streamlit ในการทำ Data Science Web Application (ต่อไปนี้จะเรียกว่า Web App นะครับ) ซึ่งเป็นการนำผลที่ได้จากโมเดลไปใช้

ข้อมูลที่ใช้

เป็น Dataset ที่หลายคนน่าจะรู้จักกันดี เพราะมันคือ Hello world สำหรับ Machine Learning นั้นก็คือ“ IRIS flower dataset” ซึ่งใช้ข้อมูลต่างๆที่เกี่ยวกับดอก iris ในรูปแบบตาราง (Structured Data) เพื่อทำนายพันธุ์ของดอก iris (setosa, versicolour, virginica) …แต่มันค่อนข้างจะธรรมดาเกินไป🤔 เพราะงั้น “เรามาทำนายดอก iris ด้วยรูปภาพกัน📸” ดังนั้น Dataset ที่ใช้จะเป็นในลักษณะของรูปภาพ (Unstructured Data) ซึ่งข้อมูลที่ใช้ก็คือ Iris Computer Vision จาก Kaggle (เรียกได้ว่ามีทุกอย่างจริงๆสำหรับ Kaggle 😆)

Iris Computer Vision — Kaggle

แต่ก่อนที่จะทำ Data Science Product ก็จะต้องมีการสร้างโมเดลกันก่อนนั้นเอง ซึ่งในส่วนของการสร้างโมเดลนั้นจะไม่อธิบายอย่างละเอียดนะครับ เพราะเราจะFocusไปที่การสร้าง Web App กันครับ แต่ถ้าหากสนใจเรื่องการCodeเพื่อสร้างโมเดล ก็สามารถเข้าไปดูได้ที่ GitHub ไฟล์ iris-cv-model.ipynb ครับ

iris-cv-model.ipynb

คร่าวๆเลยก็คือนำรูปภาพไป Resize (50x50 px), Normalize และทำ Data Augmentation เพื่อให้โมเดลมีความยืดหยุ่นในการทำนาย และใช้ 2-Convolutional Neural Network Model ในการทำนายโดยให้ผลลัพธ์เป็นโอกาสที่รูปภาพนั้นจะเป็นพันธุ์ของดอก iris ที่มีทั้งหมด 3 พันธุ์ โดยใช้ Adam Optimizer และ categorical_crossentropyLoss และโปรแกรมให้เก็บโมเดลที่มี Validation Loss ต่ำที่สุดจากการรันโมเดล 50 ครั้ง (epochs = 50)

ตัวอย่างการใช้งาน Streamlit สำหรับงาน Data Science

หน้าตา Web App

เมื่อได้โมเดลแล้ว ขั้นตอนต่อไปก็คือการนำโมเดลไปใช้ใน Web App ของเราด้วย Streamlit นั้นเอง ถ้าใครที่พึ่งเข้ามาดูในตอนนี้แล้วยังไม่มี Streamlit ก็ทำการติดตั้งใน cmd ด้วยคำสั่ง

pip install streamlit

และนำ Streamlit library ไปใช้ใน python

import streamlit as st

เช่นเคยนะครับ ผมจะอธิบายโค้ดโดยแบ่งออกเป็นทั้งหมด 2 ส่วน ดังนี้เลย

  1. การทำ Header
  2. เนื้อหา (Content)

Header

Header of the Web App

ใน Streamlit มีคำสั่งง่ายๆสำหรับการสร้างข้อความที่เป็น Header นั้นคือ st.title

Content

Content of the Web App

การทำส่วนของเนื้อหาจะมีขั้นตอนดังนี้

กำหนดค่าคงที่/library/ไฟล์ที่จะใช้ การทำ File Uploaderการแสดงภาพการแสดงผลลัพธ์ที่ได้จากโมเดล

การกำหนดค่าคงที่และดึงไฟล์: เป็นการดึงข้อมูลที่จะเข้ามาใน python เพื่อใช้ในการเตรียมการที่จะสร้าง Content ซึ่งสิ่งที่สำคัญที่สุดที่จะต้องนำเข้ามาใน Web App ก็คือ MODEL ที่เราพูดถึงไปตั้งแต่แรกนั้นเอง

File Uploader: ส่วนถัดไปก็คือส่วนของการอัพโหลดรูปภาพเพื่อนำรูปภาพดังกล่าวไปเข้าโมเดลนั้นเอง ซึ่งใน streamlit จะมีคำสั่งสำหรับการทำ File Uploader นั้นก็คือ st.file_uploader นั้นเอง

การแสดงรูปภาพ: เมื่อทำการอัปโหลดรูปภาพแล้ว จะต้องมีการแสดงภาพที่ได้จากการอัปโหลด เพื่อความสวยงามและเป็นการ Recheck ว่ารูปที่เราอัปโหลดเข้ามาสามารถใช้งานในโมเดลได้ โดยถ้าหากยังไม่มีการอัปโหลดรูปจะเป็นการโชว์รูปตั้งต้น (Default Image) เป็น Image Example และเมื่ออัปโหลดรูปจะทำให้รูปภาพเปลี่ยนไปเป็นรูปที่เราใส่เข้าไป

จะเห็นได้ว่าเมื่อ Upload รูปเข้าไปแล้วรูปจะสามารถเปิดด้วย PIL ได้ แต่เนื่องจากว่าเราจะต้องเอารูปเข้าโมเดลซึ่งก่อนหน้านั้นจะต้อง Resize รูปเสียก่อน จึงทำการแปลงจาก PIL image ให้เป็น opencv image แทน (ถ้าใครมีวิธีอื่นที่ดีกว่านี้ก็มาเล่าสู่กันฟังมั้งนะครับ 😊)

การแสดงผลลัพธ์ที่ได้จากโมเดล: ส่วนสุดท้ายซึ่งเป็นส่วนที่สำคัญสำหรับงาน Data Science นั้นก็คือส่วนของการแสดงผลลัพธ์ โดยในตัวอย่างนี้เมื่อใส่รูปเข้าไปแล้ว จะมีการแสดงขนาดของรูปภาพก่อนที่จะนำไปเข้าโมเดล (Image Size) ความน่าจะเป็นในการทำนายพันธุ์ดอกไม้แต่ละชนิด (Classification Probability) โดยเรียงจาก

setosa → versicolour → virginica

และสองบรรทัดสุดท้ายของโมเดลก็คือผลการทำนายว่าในรูปนั้นเป็นดอก iris พันธุ์อะไร พร้อมทั้งบอกความน่าเชื่อถือ (Confidence) ที่มีค่าเป็นร้อยละที่อยู่ระหว่าง 0–1 (1 คือ 100% Sure นั้นเอง)

จะเห็นว่าคำสั่งใน streamlit ก็เป็นเพียงแค่การแสดงข้อความที่ได้จากการรันโมเดลในฟังก์ชัน prediction ด้วยคำสั่ง st.write เท่านั้น

สุดท้าย…ทดสอบการใช้งาน Web App

เมื่อ Coding เสร็จแล้ว เราสามารถทดสอบการใช้งาน Web App ของ Streamlit ได้ด้วยการรันไฟล์ .py ด้วย cmd ได้เลย ด้วยคำสั่ง

streamlit run [app-name].py

และเมื่อขึ้นหน้าตาของ Web App มาแล้ว หากเรายังไม่ได้ไปปิด Web App หรือ cmd ของเรา เมื่อแก้ไขโค้ดและกด Save ตัว Web App ของเราจะสามารถ Rerun/Always Rerun Web ได้ทันที (คล้ายๆกับ Hot Reload ใน Flutter เลย แจ่มแมว😺)

กด Rerun เพื่อ Restart App ด้วยCodeใหม่

การใช้งานของเจ้าเว็บนี้ก็ง่ายมากเลย เพียงแค่ใส่รูปพันธุ์ดอกไม้ของ iris (ไฟล์รูปทั้งหมดจะอยู่ในโฟลเดอร์ Archive)ในช่อง Upload an image แล้วโปรแกรมจะแสดงรูปที่ใส่เข้าไปพร้อมกับผลการทำนายนั้นเอง

Web App Example

โดยสรุป

จากที่เห็นวิธีการใช้ Streamlit เพื่อการทำ Data Analytics/ Data Science Web Application จะเห็นได้ว่าตัวฟังก์ชันมีความสะดวกในการใช้งานและไม่ได้มีความซับซ้อนใดๆเลย แต่ด้วยความง่ายของมันนั้นทำให้ไม่สามารถปรับแต่งอะไรได้มาก เช่น การแสดงผลยังต้องแสดงตาม Template ที่ Streamlit ตั้งไว้ให้ ซึ่งทำให้มันเหมาะสำหรับการทำ Prototype มากๆ 👌🏼

ซึ่งไฟล์ที่เกี่ยวข้องทั้งหมดของการทำ Data Science Web App จะอยู่ใน GitHub ของผมนะครับ

ถ้าต้องการสอบถามหรือพูดคุยเพิ่มเติมเกี่ยวกับสายงาน Data หรือเรื่องอื่นก็ได้ (ถ้าตอบได้นะ😁) ตาม LinkedIn ข้างล่างเลยจ้า แล้วเรื่องถัดไปจะเป็นเรื่องอะไรก็ขอให้กดติดตามกันไว้ด้วยนะคร้าบ😍

--

--

Pasith Thanapatpisarn
Pasith Thanapatpisarn

Written by Pasith Thanapatpisarn

Analyst | Blogger named Data Sci Haeng

No responses yet