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

Streamlit icon

“คุณกำลังเผชิญปัญหาการนำโมเดลไปใช้จริง (Deployment) ใช่หรือไม่?”
“มีโมเดลสุดเจ๋ง ทำMLอย่างเทพ…แต่ต้องไปฝึกเขียน Web App เพื่อนำไปใช้อีกหรอ?”
“Streamlit มีคำตอบสำหรับทุกคำถามที่กล่าวมา”

ปัญหาที่พบของ Data Scientist มือใหม่นั้นมีมากมาย😭 แต่ถ้าจะถามว่า step ไหนที่จะเป็นปัญหาสำหรับมือใหม่มากที่สุด ก็คงเป็นการนำผลที่ได้จากการรันโมเดลไปใช้ (Deployment หรือการทำ Production) เพราะ Data Scientist (โดยเฉพาะ Data Scientist ที่ไม่มี Background ทางด้าน CS มาก่อน แบบผม😛) จะโฟกัสไปที่การจัดการข้อมูล (Data Manipulation) และการสร้างโมเดล (Modeling) เพื่อตอบโจทย์ให้สอดคล้องกับสภาพแวดล้อมและข้อจำกัดต่างๆ

แต่การที่จะนำโมเดลไปใช้นั้นถือว่าเป็นขั้นตอนที่มีความซับซ้อนและใช้เวลาในการทำนานมาก (ตั้งแต่การ Design การวาง Structure การทำ UI/UXและรายละเอียดยิบย่อยอีกมากมาย) ตัวอย่างที่เห็นง่ายๆเลยก็คือ โมเดลที่ใช้ในการแนะนำหนัง (Movie Recomendation Model) ที่จะสามารถแนะนำหนังที่คาดว่าผู้ชมจะชอบหรือหนังที่มีแนวคล้ายๆกันให้กับผู้ชมได้ แต่โมเดลนี้มันจะไม่มีประโยชน์เลย(ต่อให้โมเดลนี้สามารถแนะนำหนังให้ถูกใจคนทั้งโลกได้ก็ตาม) หากไม่ได้มีการออกแบบโปรแกรมหรือแพลตฟอร์ม (Platform) เพื่อใช้โมเดลดังกล่าว เช่น Netflix หรือ iflix เป็นต้น

Netflix UI — imgur.com

ดังนั้น สำหรับ Data Scientist ที่ต้องการจะ “ปล่อยของ” และอยากให้โมเดลที่เราทำมาไปใช้ได้จริง (แต่ไม่ถึงขนาดแบบ Netflix นะ ไม่ไหว555+) เราก็ขอแนะนำ Streamlit เลย

Streamlit คืออะไร?

Streamlit คือ library สำหรับการสร้าง Data Web Application อย่างเร็วและง่าย(ง่ายจริงๆ) เพื่อใช้สำหรับการทำ Production หรือ Prototype ของเหล่า Data Expert ทั้งหลาย เป็นไง น่าสนใจมั้ย เดี๋ยวเราไปดูวิธีการติดตั้งเพื่อใช้งานเลยดีกว่า

ขั้นตอนการติดตั้ง Streamlit

ติดตั้งง๊ายง่าย แค่มี python และเอา Code นี้ไปรันใน cmd ก็ติดตั้งได้แล้ว

pip install streamlit

และนำ Streamlit library ไปใช้ใน python ก็ไม่มีปัญหาแล้ว

import streamlit as st

สุดท้าย เมื่อออกแบบ Web App ด้วย Streamlit เสร็จแล้ว เราสามารถ run test โปรแกรมของตัวเองได้ทันทีด้วยคำสั่ง

streamlit run [app-name].py

ตัวอย่างการใช้งาน Streamlit

ในส่วนนี้ผมจะอธิบายวิธีการใช้งาน Streamlit คร่าวๆ โดยอ้างอิงจากโปรเจคของผมเอง และจะแบ่งเป็นสองPartนะครับ “Part1จะเป็นตัวอย่างการใช้งาน Streamlit สำหรับ Data Analytics” และ “Part2จะเป็นตัวอย่างการใช้งาน Streamlit สำหรับ Data Scientist” ครับ ในPartนี้ข้อมูลที่ผมใช้คือ Overwatch hero statistics จาก kaggle นะครับ ผลงานของตัว Web Application(ต่อไปขอเรียกสั้นๆว่า Web App นะครับ) สามารถเข้าไปดูได้ ที่นี่ ครับ

หน้าตาของ Web App ครับ

เนื่องจากว่าผมติดเกม Overwatch มากๆๆๆๆ…(ณ ตอนที่ทำ Analysis เมื่อปี 2019 แต่นำมาเข้า Streamlit เมื่อไม่นานมานี้) ผมจึงเลือกใช้ Dataset นี้ในการวิเคราะห์ข้อมูลว่ามีฮีโร่ตัวไหนที่มีสถิติน่าสนใจบ้างหรือมีฮีโร่ตัวไหนที่คนเก่งๆเล่นกันเยอะ…

ในบทความนี้ผมจะอธิบายการใช้งาน Streamlit ในส่วนต่างๆที่เกิดขึ้นใน Web App นี้ ส่วนวิธีการหรือขั้นตอนที่ไม่เกี่ยวข้องกับ Streamlit (การดึงและจัดการข้อมูล, การสร้าง Chart) ผมจะขอไม่อธิบายแบบละเอียดนะครับ แต่ถ้าอยากดูกระบวนการตั้งแต่การจัดเตรียมข้อมูลไปจนถึงการทำ Web App ก็สามารถดูได้จาก GitHub ของผมเลย ส่วนใครที่เตรียมพร้อมแล้ว…ก็มาเริ่มกันเลย💪!!!

pasithbas159/streamlit-analytics

แต่เดี๋ยว…ก่อนที่เราจะเริ่มกัน ต้องทำความเข้าใจกับข้อมูลกันก่อน!!!

Overwatch เป็นเกม First-Person Shooting ที่มีลักษณะเฉพาะที่ตัวละครทุกตัวมีเอกลักษณ์และมีทักษะ (Skill) ที่แตกต่างกัน

Overwatch photos

เกมจะแบ่งผู้เล่นออกเป็น 6 คน สามารถแบ่งหน้าที่(Role)ได้เป็น Support, Defense, Offense และ Tank และเกมนี้ก็ยังมีระบบการแข่งขันเพื่อจัดอันดับ (Ranked Match) เพื่อประลองฝีมือกับผู้เล่นในระดับใกล้เคียงกัน โดยระดับเรียงจากน้อย-มากได้แก่ Bronze → Silver → Gold → Platinum → Diamond → Master และสุดท้าย Grandmaster คือ Rank ที่สูงที่สุดของเกมนี้ ข้อมูลที่ต้องรู้คร่าวๆมีเท่านี้ครับ แล้วเราไปเริ่ม Coding กันเลย โดยผมจะแบ่ง Code ออกเป็น 3 ส่วน ดังนี้

1. การทำ Header และการใส่ข้อความ
2. การทำ Filter และการจัดการ Sidebar
3. เนื้อหา (Content)

การทำ Header และการใส่ข้อความ

The header of the Web App

ในส่วนหัวของ Web App จะใช้ส่วนประกอบทั่วไปของการสร้าง Website เลยก็คือการสร้างข้อความและรูปภาพประกอบนั้นเอง ใน streamlit จะใช้คำสั่งพื้นฐานของ library เลยคือ

• st.header สำหรับ Header
• st.write สำหรับข้อความ
• st.image สำหรับการใส่รูปภาพ

Header Part

โดยคำสั่ง st.write นั้นสามารถใส่เป็นข้อความ กราฟ DataFrame หรืออื่นๆได้เยอะมาก ในตัวอย่างผมใส่ข้อความลงไป ซึ่งข้อความนั้นจะต้องอยู่ในรูปของ Markdown Format เพื่อใช้ในการจัดการข้อความและเพิ่ม Link ลงไปใน Web App ของเรา

การจัดการ Sidebar และการทำ Filter

Filter Part

ส่วนที่สำคัญที่ทำให้ Web App มีการเปลี่ยนแปลงไปตามที่เรากำหนดเองได้นั้นก็คือ Filter ซึ่งผมจะนำ Filter มาอยู่ที่แถบข้างของเว็บไซต์หรือ Sidebar ซึ่ง streamlit ก็มี class สำหรับจัดการ Sidebar นั้นคือ st.sidebar เช่น

• st.sidebar.header — หัวข้อของ Sidebar
• st.sidebar.selectbox — สำหรับ Filter ที่มีตัวเลือกเดียว
• st.sidebar.multiselect — สำหรับ Filter ที่มีหลายตัวเลือก
• st.sidebar.slider — สำหรับ Filter แบบเลื่อนได้

Sidebar Part

ในตัวอย่างนี้จะใช้ st.sidebar.multiselect สองตัว สำหรับ Filter ระดับผู้เล่น (Rank) และตำแหน่งการเล่น(Role)

อีกอย่างหนึ่งจะสังเกตได้ว่ามีอีกคำสั่งแปลกๆอีกนั่นคือ @st.cache ซึ่งเป็นคำสั่งที่เกี่ยวกับการโหลดข้อมูลเอาไว้ล่วงหน้า นั้นหมายถึงว่าหากเคยใช้ Filter ใดไปแล้ว การกลับมาใช้อีกครั้งโปรแกรมจะไม่ทำการโหลดข้อมูลภายใน Function ซ้ำ

เนื้อหา (Content)

Content Part

ในส่วนของเนื้อหาของ Web App นั้นผมได้แบ่งส่วนของ Analysis เป็น 3 ส่วน คือ

1. ตารางข้อมูลเบื้องต้น (Data Table)
2. การวิเคราะห์ตัวละคร (Hero Analysis)
3. การวิเคราะห์ระดับผู้เล่น (Rank Analysis)

ตารางข้อมูลเบื้องต้น (Data Table): Part นี้จะต้องโชว์ตารางและจำนวนข้อมูลว่ามีกี่ row และ column Partนี้ไม่มีปัญหา เพราะอย่างที่เราบอกไปแล้วว่า st.write สามารถรับค่า DataFrame ได้นั้นเอง

การวิเคราะห์ตัวละคร (Hero Analysis): ในส่วนนี้จะเป็นการอธิบายว่าตัวละครตัวไหนบ้างที่มีอัตราการเลือก (Pick Rate) เกินค่าเฉลี่ย และมีฮีโร่ตัวไหนบ้างที่มีอัตราการชนะ (Winrate) มากกว่า 50%

Hero Analysis

ฮีโร่ที่มี Pick Rate สูง: Sigma, Roadhog, McCree, Ashe, Lucio, Zarya, Ana, Mercy, Moira and Reinhardt
ฮีโร่ที่มี Win rate สูง: Orisa, Mercy, Sigma, Doomfist, Reaper, Reinhardt, Zarya, Zenyatta, Lucio, Ashe, Pharah, Junkrat, Bastion, Brigitte, Torbjorn and Symmetra

ในส่วนของคำสั่งสร้างปุ่มกดเพื่อแสดงผลลัพธ์ใน streamlit นั้นจะใช้คำสั่ง st.button และการแสดงกราฟที่สร้างจาก matplotlib ใน Web App ก็จะต้องใช้คำสั่ง st.pyplot

การวิเคราะห์ระดับผู้เล่น (Rank Analysis): อีกส่วนหนึ่งของการวิเคราะห์คือ การวิเคราะห์ระดับผู้เล่นว่าผู้เล่นระดับที่ต่างกันมีความสามารถที่แตกต่างกันหรือไม่ และผู้เล่นระดับสูงๆส่วนใหญ่จะเล่นตัวละครในตำแหน่งใดเป็นส่วนใหญ่

Rank Analysis

แน่นอนว่าเราพบว่า ผู้เล่นที่มีระดับสูงกว่าจะมีอัตราการชนะ (Win Rate) ที่มากกว่า โดยเฉพาะ Grandmaster จะมี Win Rate และ On fire ที่สูงกว่าระดับอื่นมาก และผู้เล่น Grandmaster ส่วนใหญ่จะเล่นในตำแหน่ง Offense

คำสั่งในส่วนของ Rank Analysis จะคล้ายกันกับ Hero Analysis เลย แต่ในส่วนที่สองนี้ผมลองใช้กราฟของ seaborn เพื่อทดสอบการ Plot ควบคู่ไปกับ matplotlib ปรากฏว่าสามารถ Run ได้อย่างไม่มีปัญหาครับ

ก็จบไปแล้วนะครับสำหรับตัวอย่างของการใช้งาน Streamlit ในงาน Data Analytics ในตอนต่อไปจะเป็น“การนำเสนอการใช้ Stremalit สำหรับงาน Data Scientist” บ้าง อย่างลืมมาติดตามต่อด้วยหล่ะ😁

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

Pasith Thanapatpisarn - Analyst - SIM Research | LinkedIn