Deploy โมเดลเป็น Web App ง่ายแบบปลอกกล้วย ด้วย Streamlit  

  RSS
The Neural Engineer
(@neural-engineer)
EfficientNet
Deploy โมเดลเป็น Web App ง่ายแบบปลอกกล้วย ด้วย Streamlit
ThaiKeras and Kaggle - 21 เมษายน 2021
 
สวัสดีคร้าบ วันนี้จะแชร์หนึ่งในวิธี Deploy โมเดลของเราบน web app ที่ง่ายและเร็วที่สุดในจักรวาลด้วย Python library ที่ชื่อว่า streamlit ครับ (รูปที่ 1)
 
ถ้าจะสรุปการ Deployment โมเดลด้วย streamlit ใน 1 วรรค ก็คือ เราเขียน Python ปกติคล้ายเขียนบน Jupyter เลย เพียงแต่การเขียน output แทนที่เราจะใช้ print() เราใช้ streamlit.write() แทน และรับ input ด้วย streamlit.text_input() และเซพไว้ในไฟล์สมมติชื่อ app.py
 
จากนั้นบน server ของเรา เราเพียงสั่ง
streamlit run app.py
 
แค่นี้จบเลยครับ เราจะได้ web app มาใช้งานทันที ง่ายไหมครับ 😀
Streamlit สามารถ deploy Machine learning โมเดลได้หลากหลาย โดยดู show cases มากมายได้ที่ streamlit.io (รูปที่ 2)
 
 
ถ้าสนใจลองมาดูรายละเอียดเพิ่มเติมกันในบทความนี้กันครับ
 
.
 
3 หัวใจสำคัญของ Streamlit
--------------------------
 
Streamlit ถูกออกแบบมาโดย 3 หลักการนี้ครับ
 
1. Simple API
การใช้ library streamlit นั้นเข้าใจง่ายมากๆ เช่น streamlit.text_input() ก็จะสร้าง text input widget ขึ้นมาให้ user กรอกข้อมูล
 
หรือ streamlit.sidebar.text_input() ก็จะสร้าง input widget แบบเดียวกัน แต่ไปอยู่บน sidebar แทน
 
streamlit.checkbox('Check this') ก็จะสร้าง checkbox ทันที โดย return ค่าเป็น True/False
เป็นต้น โดยดู API ทั้งหมดง่ายๆ ได้ที่ Cheat sheet https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py
 
โดย streamlit จะจัดเรียง layout ให้สวยงามตามขนาดหน้าจอของผู้ใช้อย่างอัตโนมัติ
 
2. Widget is variable
ทุกๆ widget ไม่ว่าจะเป็น input, checkbox, slide, หรือ file_upload widgets จะ return ค่าเป็นตัวแปร Python ซึ่งค่าของตัวแปรก็คือค่าที่ user ใส่ค่าเข้ามา เช่น
 
txt = streamlit.input_text('Input here:')
 
เมื่อ user กรอกข้อความใน text เข้ามา ตัวแปร txt ก็จะอัพเดตเป็น string variable ที่ user กรอกมาโดยอัตโนมัติครับ เราไม่ต้องยุ่งกับ html, css, java script, backend, frontend ใดๆ เลยครับ
 
3. Deploy Instantly with Auto update
เราสามารถ deploy ได้บน server เพียงสั่งคำสั่งเดียว streamlit run app.py
นอกจากนี้ ทุกครั้งที่เราแก้ source file ที่เกี่ยวข้อง, streamlit จะ detect เองอัตโนมัติและอัพเดต application ของเราทันที โดยที่เราไม่ต้องทำอะไรเลย!!
 
ที่เจ๋งมากๆ ก็คือจริงๆ แล้วเราไม่ต้องเช่าและจัดการ server เองด้วยซ้ำเนื่องจาก Streamlit มีบริการจัดการ server ให้ github users ทุกคน "ฟรีๆ" คนละ 3 apps เพียงแค่ยื่นเจตจำนงที่ https://streamlit.io/sharing-sign-up ซึ่งโดยปกติใช้เวลาไม่ถึงหนึ่งสัปดาห์ก็จะได้รับการอนุมัติครับ
 
ถ้าได้สิทธิแล้วเรา deploy ผ่าน github และ streamlit.io ได้เลย โดยไม่ต้องยุ่งกับฝั่ง server ใดๆ
รายละเอียดเพิ่มเติมของ free streamlit server ดูหัวข้อข้างล่างครับ
 
.
 
Control flow และการจัด layout ของ streamlit
---------------------------
 
ไอเดีย control flow ของ streamlit นั้นง่ายมากครับ นั่นคือ "ทุกครั้งที่มีการอัพเดตข้อมูลใดๆ" (อาทิกรอกข้อความ เลื่อนสไลด์ อัพโหลดไฟล์ หรือติ้ก checkbox) เจ้า streamlit web app จะรันโปรแกรมใหม่หมดตั้งแต่บรรทัดแรกจนถึงบรรทัดสุดท้าย ด้วยข้อมูลล่าสุดที่มีการอัพเดต
 
ส่วนเรื่องการจัดเรียง layout, Streamlit จะสามารถทำ layout โดยแบ่งเป็นหลาย columns และทำ sidebar ได้อย่างง่ายดายตามตัวอย่างนี้
 
 
การทำ sidebar เรียกว่าง่ายอย่างไม่น่าเชื่อ เราสามารถทำ widget ทุกอย่างบน sidebar ได้เหมือน widget บนหน้าหลักเพียงแค่เติมคำว่า sidebar ลงไปในฟังก์ชันก่อนเรียกใช้งาน เช่น
 
streamlit.checkbox() สร้าง widget บนหน้าหลัก
streamlit.sidebar.checkbox() สร้าง widget บนหน้า sidebar
 
ง่ายจนเหลือเชื่อ
 
นอกจากนี้ web app ของ streamlit จะเป็น Auto-reponsive (ปรับตามขนาดจอ PC, tablet, mobile อัตโนมัติ) โดยที่เราไม่ต้องทำอะไรเลย!!
 
 
 
.
 
มาดูตัวอย่างการใช้งาน streamlit ผ่าน Colab Playground
-----------------------------------------------
 
เพื่อให้เพื่อนๆ ได้เห็นภาพความเจ๋งของ streamlit โดยที่ไม่ต้องรอ streamlit free server ซึ่งใช้เวลาอนุมัติ 2-3 วัน
ผมเลยใช้ Colab มาสร้างเป็น streamlit playground ให้เพื่อนๆ ได้ลองใช้กันครับ ที่นี่ http://bit.ly/colab-streamlit-playground
 
ในการเล่น playground ก่อนอื่นทำความรู้จักฟังก์ชันทั้งหมดของ streamlit คร่าวๆ ผ่านทาง cheatsheet นี้ครับ
 
ใน api cheat sheet จะแสดงวิธีการสร้าง text, charts, audio, video, dataframe, interactive widgets
หรือจะใช้ Streamlit.write() ซึ่งเป็น magic function ที่จะแสดงผลแทบจะทุก object ได้ในคำสั่งเดียวก็ได้ครับ
 
ใน Colab เราเรียกใช้ ngrok ซึ่งทำหน้าที่สร้าง external URL ให้ Colab server ซึ่งเราจะกดเข้าไปดู streamlit โปรแกรมของเราได้ที่ xxxxx.ngrok.io ครับ
 
ถ้าเราจะลองแก้ไขโค้ด steramlit ให้ stop cell streamlit แล้วรัน ngrok ใหม่โดยชื่อ URL ตัวหน้าสุดจะเปลี่ยนทุกครั้งที่มีการ stop streamlit/restart ngrok ครับ
 
(รูปที่ 4)
 
 
.
 
 
 
Free streamlit server
----------------------
 
การ deploy ที่สะดวกที่สุดสำหรับคนที่ไม่ต้องการ resource เยอะมากๆ ก็คือขอรับบริการฟรีจาก streamlit ผ่านทาง https://streamlit.io/sharing-sign-up โดยเราต้องใส่ Github URL ของเราให้ streamlit ทราบ เพราะ streamlit จะ deploy ผ่าน Github ของเราโดยตรงครับ!
 
Streamlit free server มี spec ดังนี้ครับ
1 CPU, 800 MB of RAM, and 800 MB Disk
 
โดยไม่มี GPU แต่ถ้าเรามี app ที่เป็นสาธารณะประโยชน์สามารถคุยกับทาง streamlit ได้เป็นกรณีพิเศษ
ถ้าเราใช้บริการ Cloud API เจ้าอื่นๆ เช่น Google Cloud API, Huggingface API, หรือ GPT-3 API เราก็ไม่จำเป็นต้องใช้ GPU ครับ
 
การ deploy ผ่าน streamlit เราเพียงเตรียมไฟล์หลักๆ 2 files คือ app.py ที่มีโค้ด streamlit app (เหมือนใน colab ข้างบน หรือจะเขียนเป็น modules แยกไฟล์สวยๆ ก็ย่อมได้) และ requirements.txt ที่ระบุ library packages ต่างๆ ที่ app.py เรียกใช้ (อาทิเช่น Tensorflow, Transformers, etc.)
 
โดยเมื่อเราได้รับ free server quota แล้วเราก็เพียงไประบุ Github project / branch ของเราที่
เท่านี้ app ของเราก็จะถูก deploy ง่ายๆ แบบมหัศจรรย์ครับ
 
(รูปที่ 5)
 
ดู simple demo ที่ deploy บน streamlit ได้ที่นี่ครับ (อันนี้เป็นตัวอย่าง image classification)
 
โดยไฟล์ requirements.txt จะอยู่ที่นี่ครับ
 
สำหรับ documents ฉบับเต็มเกี่ยวกับการ deployment บน streamlit free server ดูได้ที่
This topic was modified 8 months ago by The Neural Engineer
อ้างอิง
Posted : 21/04/2021 10:14 am
The Neural Engineer
(@neural-engineer)
EfficientNet

Update ล่าสุดจาก Streamlit เพิ่ม session state ได้

https://blog.streamlit.io/session-state-for-streamlit/

ตอบกลับอ้างอิง
Posted : 21/07/2021 12:20 am
The Neural Engineer
(@neural-engineer)
EfficientNet

Streamlit สามารถใช้งาน Firestore ซึ่งเป็นระบบ Database แบบ NoSQL ของ Google ผ่าน Google Cloud ได้อย่างง่ายดาย 

ดูรายละเอียดได้ที่นี่ 2 blogs นี้ครับ

https://blog.streamlit.io/streamlit-firestore/

https://blog.streamlit.io/streamlit-firestore-continued/

ตอบกลับอ้างอิง
Posted : 03/09/2021 9:12 am
Share:

Please Login or Register