Deploy ML Model ผ่าน Web Application ด้วย Git + Heroku

Git and Heroku are the best friends of ML Developer.

5 min readMar 3, 2021

deploy ml model flask git heroku web application — Photo by Sigmund on Unsplash

ครั้งก่อนได้ฝึกทดสอบการ Deploy ML Model บน Local host ยังไม่ได้ Pubilc ML Model อย่างเป็นทางการ ตอนนี้ลองมาคิดถึงการใช้งานจริง ๆ ว่าถ้าเข้าถึง Model ได้จากผ่าน Internet ด้วย Browser คงสะดวกกว่าไม่น้อย

ทดสอบ Local host deploy ML Model ด้วย Flask + Postman

ใช้ Flask และ Python ในการ Deploy machine learning model แบบง่าย

lengyi.medium.com

Recap สั้น ๆ จากตอนก่อนหน้านี้ ได้มีการส่ง POST Request ด้วยข้อมูลที่เป็น JSON Format ผ่านทาง Python requests และ Postman แต่เพื่อให้การใช้งานจริงมีประสิทธิภาพมากขึ้น ควรมีทำหน้า Website เพื่อเป็นรับ Input ข้อมูล เพื่อส่งให้ ML Model ข้างหลังทำการคำนวณ และ Return ผลลัพธ์กลับมา ดังนั้นโจทย์ที่ต้องทำทั้งหมดในตอนนี้คือ

หน้า Web Application
Public ML Model deployment

ก่อนที่จะเริ่มทำทั้ง 2 ข้อที่กล่าว แนะนำให้ติดตั้งโปรแกรมที่จำเป็นในการ Deploy ML Model ในตอนนี้ก่อน ซึ่งมีด้วยกัน 2 โปรแกรม คือ Git และ Heroku ซึ่งสามารถ Download และติดตั้งได้จาก Link ด้านล่าง

Downloads

Git comes with built-in GUI tools ( git-gui, gitk), but there are several third-party tools for users looking for a…

git-scm.com

The Heroku CLI

The Heroku Command Line Interface (CLI) makes it easy to create and manage your Heroku apps directly from the terminal…

devcenter.heroku.com

เมื่อติดตั้งทั้ง 2 โปรแกรมเรียบร้อยแล้ว สามารถตรวจสอบได้ว่าติดตั้งได้สำเร็จหรือไม่ด้วยคำสั่งด้านล่าง ใน Command line ที่ใช้อยู่

git --version
heroku --version

ถ้า Command line สามารถ Return ค่าออกมาเป็นเลข Version ได้ แสดงว่าติดตั้งได้สำเร็จ

Web Application

สิ่งที่ขอเริ่มทำเป็นอย่างแรกคือ การสร้างหน้ากากให้กับ Web Application ก่อน ออกตัวก่อนว่าไม่ได้เชียวชาญการเขียน HTML หรือ CSS แต่ยังได้ความสวยงาม หรือ User friendly อยู่ ดังนั้นจึงเลือกออกแบบหน้าเว็บให้เป็น Text-box รอรับข้อมูล Input เพื่อส่งผ่านให้ Model คำนวณต่อไป

ดังนั้นจึงขออธิบาย Code HTML เฉพาะส่วนที่ต้องทำงานกับ Flask app เพียงเท่านั้น เท่ากับว่าพูดกันเฉพาะในส่วนที่เป็น <body>...</body>

สร้าง HTML File ขึ้นมา ตั้งชื่อว่า index.html ต้องเก็บไว้ใน Folder ชื่อว่า templates เพราะค่า Default ของ Flask ต้องการ HTML จาก Folder นี้เท่านั้น

เขียนรูปแบบของ Form โดยที่ action="{{url_for(‘getPredict’)}}” เป็นการบอกให้หน้าเพจนี้ ทำ Action กับฟังก์ชั่นไหนจากหน้า Python script ซึ่งเขียนแบบนี้หมายความว่าให้เรียกใช้ฟังก์ชั่นชื่อว่า getPredict ด้วย method="POST"

ส่วนที่เหลือเป็นออกแบบ HTML ให้มี Box ว่าง ๆ ทั้งหมด 3 อัน เพื่อรอรับค่าใส่เข้าไปเป็น Input ใน ML Model และตั้งชื่อเป็น x1, x2, x3 ตามลำดับ โดย name ต้องตรงกับชื่อตัวแปรที่ตั้งเอาไว้ใน Python script เช่นกัน

สุดท้ายสร้างปุ่มขึ้นมาเพื่อ Trigger ที่บอกให้ ML Model เริ่มทำงาน หรือคือการ Prediction นั่นเอง โดยให้แสดงผลลัพธ์ออกมาที่บริเวณด้านล่างของหน้าเพจเดียวกัน สามารถเขียนให้แสดงผลออกมาได้ด้วย {{prediction_text}} ซึ่งเป็นค่าที่ Return ออกมาจาก Python script ที่เขียนด้วย Flask

Flask

เมื่อได้ HTML สำหรับเป็น Interface แล้ว ต่อมาเป็นการเขียน Python script ด้วย Flask ตั้งชื่อว่า app.py โดยส่วนมากแล้วโครงสร้างเหมือนกัน Function ที่เขียนไว้ที่ตอนก่อนหน้านี้ มีสิ่งที่ต้องอธิบายเพิ่มเติมคือ การทำงานร่วมกับ HTML เท่านั้น

ที่เพิ่มเติมมาคือ render_template ซึ่งเอาไว้จัดการกับหน้า HTML การทำงานจึงถูกแบ่งออกเป็น 2 Functions คือ

การ Render หน้า HTML: กำหนด Route ไปที่หน้าแรก (‘/’) จากนั้นเขียน main() เพื่อให้ Return HTML ด้วย render_template(‘index.html’)
การแสดงผลลัพธ์จากการ Model getPredict ที่มีชื่อเหมือน Action ใน HTML: กำหนด Route ไปที่หน้า (‘/predict’, method = [‘POST’]) ใช้ request.form[] เพื่อเรียกค่าจากหน้า HTML มาเก็บไว้ในตัวแปร เมื่อครบทุก Input ที่ต้องการแล้ว นำทำเป็น Numpy array และใช้ Model predict ค่าออกมา สุดท้ายให้ Return ค่าไปที่หน้า index.html เหมือนเดิม เพราะมีการสร้างตัวแปร {{prediction_text}} รอรับค่าไว้แล้ว ดังนั้นใน render_template จึงใส่ค่า prediction_text ให้รับค่า predicted

เมื่อลองรัน Script ด้านบนจะได้ Process เหมือนเดิมคือให้เข้าไปที่ Local host ตาม URL ที่โปรแกรมให้มา จะได้หน้า Web Application เหมือนด้านล่าง แสดงว่าพร้อมใช้งานแล้ว

Procfile

ขั้นตอนต่อไปทั้งหมดเป็นการเตรียมการ Deployment เริ่มจากให้สร้างไฟล์ Procfile ไม่ต้องมีนามสกุลใด ๆ โดยไฟลนี้เป็นตัวกำหนด Command ต่าง ๆ เพื่อให้ Web Application รันได้ โดยให้ใส่รายละเอียดในไฟล์ตามด้านล่าง

web: gunicorn app: app

web หมายถึง Web server ที่ใช้ในการรัน Web Application บน Heroku ซึ่งใช้งาน gunicorn กันเป็นส่วนมาก
app หมายถึง Script ที่ต้องการให้ทำงาน ในที่นี้คือ app.py ตามชื่อไฟล์ที่ได้ตั้งไว้จาก Script ด้านบน

Requirements

ต่อมาเป็นการสร้างไฟล์ requirements.txt เพื่อเป็นตัวบอก Requirement libraries ทั้งหมดเพื่อให้ Model สามารถทำงานได้

pip freeze > requirements.txt

ซึ่งถ้าไม่ได้จัดการ Environment ให้ดี อาจทำให้ Libraries ปะปนกัน ดังนั้นขอแนะนำให้สร้าง Environment สำหรับการ Deploy แยกต่างหาก ซึ่ง Libraries ทั้งหมดที่เพื่อให้โมเดลทำงานได้มีตาม List ด้านล่าง

Flask==1.1.2
gunicorn==20.0.4
numpy==1.19.5
scikit-learn==0.23.2

ถึงขั้นตอนนี้ Project structure ประกอบไปด้วย Folder และไฟล์ตามผังด้านล่าง

templates
---index.html
app.py
model.pk
Procfile
requirements.txt

Git

ต่อมาจัดการเกี่ยวกับ Git เพื่อเอาไว้ Push ทุกอย่างในโปรเจค ให้เข้าไปที่ www.github.com สำหรับใครที่ยังไม่ได้เป็นสมาชิก ต้องทำการสมัครสมาชิกก่อน เมื่อมี Account Git พร้อมใช้งานแล้ว ให้เข้าไปที่หน้า Git ของตัวเอง แล้วไปที่ Repository กด New เพื่อสร้าง Repository ใหม่

ตั้งชื่อ Repository ตามที่ต้องการ อาจมีการใส่ Descirption เพิ่มเติมนิดหน่อย จากนั้นกด Create repository

เมื่อได้หน้า Return ออกมาเป็นเหมือนรูปด้านบน แสดงว่า Git repository พร้อมใช้งานแล้ว กลับไปที่ Editor ที่ใช้งานอยู่ และรันคำสั่งตามด้านล่าง เพื่อเริ่ม Push files ต่าง ๆ เข้าสู่ Repository

Heroku

ต่อมาเป็นการสร้าง Application บน Heroku เพื่อให้ติดต่อเข้ากับ Git repository ให้ทำการสมัครสมาชิกก่อนเช่นกัน จากนั้นไปที่หน้า Account แล้วกด Create New App

ตั้งชื่อตามที่ต้องการ ในที่นี้ตั้งเป็น testingdeploymlmodel แล้วกด Create app

Model deployment

ตอนนี้ทุกอย่างพร้อมแล้วสำหรับการ Deployment ML Model cd ไปที่ Directoy ที่เก็บไฟล์ทั้งหมดไป เปิด Terminal ขึ้นมาแล้วพิมพ์คำสั่ง

git init

จะได้ Return ออกมาเป็น

[master (root-commit) 9274d2b] Initial commit
5 files changed, 128 insertions(+)
create mode 100644 Procfile
create mode 100644 app.py
create mode 100644 model.pk
create mode 100644 requirements.txt
create mode 100644 templates/index.html

เพื่อทำการ Initial Git จากนั้นพิมพ์ git config user.name เพื่อใส่ Username และ git config user.email เพื่อให้ Email ตามลำดับ จากทำการ Remote เข้าไปที่ Git repository ที่สร้างไว้

git remote add origin https://github.com/naenumtou/testDeployHeroku.git

ก่อนทำการ Commit code ต้องไม่ลืมคำสั่ง git add . ก่อน จากนั้นสามารถ Commit code ต่อได้ทันที

git commit -m "Initial commit"

เมื่อรันได้ Log ตามด้านล่าง แสดงว่าการ Push project เสร็จสมบูรณ์

Enumerating objects: 8, done.
Counting objects: 100% (8/8), done.
Delta compression using up to 4 threads
Compressing objects: 100% (6/6), done.
Writing objects: 100% (8/8), 2.16 KiB | 221.00 KiB/s, done.
Total 8 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/naenumtou/testDeployHeroku.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

กลับไปที่หน้า Git repository จะเจอ Project ที่โครงสร้างเหมือนกับที่สร้างไว้ที่ Local

ต่อมาเป็นการใช้งาน Heroku เริ่มจากพิมพ์ heroku login จะมีหน้าต่างขึ้นมาเพื่อให้ Sign-in เข้าไปที่เว็บ Heroku จากนั้นให้ปิดแล้วกลับมาที่ Terminal

เชื่อมต่อ Heroku เข้ากับ Git โดยใส่ชื่อ Application ตามที่ตั้งไว้ที่ Heroku ซึ่งในที่นี้คือ testingdeploymlmodel

heroku git:remote -a testingdeploymlmodel

เมื่อเชื่อมต่อเรียบร้อยจะได้ Log ตามด้านล่าง

set git remote heroku to https://git.heroku.com/testingdeploymlmodel.git

ขั้นตอนสุดท้ายคือการ Push Git ไป Build ที่ Heroku สามารถใช้คำสั่ง

git push heroku master

ระยะเวลาของขั้นตอนนี้ขึ้นอยู่กับความซับซ้อนของ Model เมื่อได้ Log ตามด้านล่าง ถือว่าการ Deploy ML Model เสร็จสมบูรณ์

Enumerating objects: 11, done.
Counting objects: 100% (11/11), done.
Delta compression using up to 4 threads
Compressing objects: 100% (9/9), done.
Writing objects: 100% (11/11), 2.42 KiB | 225.00 KiB/s, done.
Total 11 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Python app detected
remote: -----> Installing python-3.6.12
...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 101.1M
remote: -----> Launching...
remote:        Released v3
remote:        https://testingdeploymlmodel.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/testingdeploymlmodel.git
 * [new branch]      master -> master

Conclusion

จบแล้วสำหรับ Step-by-Step ในการ Deploy ML Model พร้อมสร้าง Web Application ด้วย Git และ Heroku โดยที่สามารถไปทดสอบ Model ที่ Deploy ไปได้ที่ yourdeployname.herokuapp.com ซึ่งในที่นี้ก็คือ https://testingdeploymlmodel.herokuapp.com/ เมื่อลองใส่ Input values และกด Get prediction จะได้ผลลัพธ์ออกมาตามรูปด้านล่าง

ได้เห็น Process หลังจากที่ Developed model เสร็จแล้ว นำมา Implement ใช้งานทำให้เห็นภาพรวมของทั้งหมดมากขึ้น ถือว่าได้ลองอะไรใหม่ ๆ เป็นอะไรที่สนุกดี