ML-For-Beginners/translations/th/3-Web-App/1-Web-App/README.md

สร้างเว็บแอปเพื่อใช้งานโมเดล ML

ในบทเรียนนี้ คุณจะฝึกโมเดล ML บนชุดข้อมูลที่น่าสนใจมาก: การพบเห็น UFO ในช่วงศตวรรษที่ผ่านมา ซึ่งมาจากฐานข้อมูลของ NUFORC

คุณจะได้เรียนรู้:

• วิธี 'pickle' โมเดลที่ฝึกแล้ว
• วิธีใช้โมเดลนั้นในแอป Flask

เราจะใช้โน้ตบุ๊กเพื่อทำความสะอาดข้อมูลและฝึกโมเดลของเรา แต่คุณสามารถนำกระบวนการนี้ไปอีกขั้นโดยการสำรวจการใช้งานโมเดลในโลกจริง เช่น ในเว็บแอป

เพื่อทำสิ่งนี้ คุณจำเป็นต้องสร้างเว็บแอปโดยใช้ Flask

แบบทดสอบก่อนเรียน

การสร้างแอป

มีหลายวิธีในการสร้างเว็บแอปเพื่อใช้งานโมเดล Machine Learning สถาปัตยกรรมเว็บของคุณอาจมีผลต่อวิธีการฝึกโมเดล ลองจินตนาการว่าคุณกำลังทำงานในองค์กรที่กลุ่ม Data Science ได้ฝึกโมเดลที่พวกเขาต้องการให้คุณใช้งานในแอป

สิ่งที่ต้องพิจารณา

มีคำถามหลายข้อที่คุณต้องถาม:

• เป็นเว็บแอปหรือแอปมือถือ? หากคุณกำลังสร้างแอปมือถือหรือจำเป็นต้องใช้โมเดลในบริบท IoT คุณสามารถใช้ TensorFlow Lite และใช้โมเดลในแอป Android หรือ iOS
• โมเดลจะอยู่ที่ไหน? บนคลาวด์หรือในเครื่อง?
• การรองรับแบบออฟไลน์ แอปจำเป็นต้องทำงานแบบออฟไลน์หรือไม่?
• เทคโนโลยีที่ใช้ฝึกโมเดลคืออะไร? เทคโนโลยีที่เลือกอาจมีผลต่อเครื่องมือที่คุณต้องใช้
  • การใช้ TensorFlow หากคุณฝึกโมเดลโดยใช้ TensorFlow ตัวระบบนี้มีความสามารถในการแปลงโมเดล TensorFlow เพื่อใช้งานในเว็บแอปโดยใช้ TensorFlow.js
  • การใช้ PyTorch หากคุณสร้างโมเดลโดยใช้ไลบรารี เช่น PyTorch คุณมีตัวเลือกในการส่งออกโมเดลในรูปแบบ ONNX (Open Neural Network Exchange) เพื่อใช้งานในเว็บแอป JavaScript ที่สามารถใช้ Onnx Runtime ตัวเลือกนี้จะถูกสำรวจในบทเรียนอนาคตสำหรับโมเดลที่ฝึกด้วย Scikit-learn
  • การใช้ Lobe.ai หรือ Azure Custom Vision หากคุณใช้ระบบ ML SaaS (Software as a Service) เช่น Lobe.ai หรือ Azure Custom Vision เพื่อฝึกโมเดล ซอฟต์แวร์ประเภทนี้มีวิธีการส่งออกโมเดลสำหรับหลายแพลตฟอร์ม รวมถึงการสร้าง API เฉพาะเพื่อเรียกใช้งานในคลาวด์โดยแอปออนไลน์ของคุณ

คุณยังมีโอกาสสร้างเว็บแอป Flask ทั้งหมดที่สามารถฝึกโมเดลได้เองในเว็บเบราว์เซอร์ สิ่งนี้สามารถทำได้โดยใช้ TensorFlow.js ในบริบทของ JavaScript

สำหรับวัตถุประสงค์ของเรา เนื่องจากเราได้ทำงานกับโน้ตบุ๊กที่ใช้ Python ลองสำรวจขั้นตอนที่คุณต้องทำเพื่อส่งออกโมเดลที่ฝึกแล้วจากโน้ตบุ๊กไปยังรูปแบบที่เว็บแอปที่สร้างด้วย Python สามารถอ่านได้

เครื่องมือ

สำหรับงานนี้ คุณต้องใช้เครื่องมือสองอย่าง: Flask และ Pickle ซึ่งทั้งสองทำงานบน Python

✅ Flask คืออะไร? Flask ถูกนิยามว่าเป็น 'micro-framework' โดยผู้สร้างของมัน Flask ให้ฟีเจอร์พื้นฐานของเว็บเฟรมเวิร์กโดยใช้ Python และเครื่องมือสร้างเทมเพลตเพื่อสร้างหน้าเว็บ ลองดู โมดูลการเรียนรู้นี้ เพื่อฝึกสร้างด้วย Flask

✅ Pickle คืออะไร? Pickle 🥒 เป็นโมดูล Python ที่ใช้ในการ serialize และ de-serialize โครงสร้างวัตถุ Python เมื่อคุณ 'pickle' โมเดล คุณจะ serialize หรือ flatten โครงสร้างของมันเพื่อใช้งานบนเว็บ ระวัง: pickle ไม่ปลอดภัยโดยธรรมชาติ ดังนั้นควรระวังหากถูกขอให้ 'un-pickle' ไฟล์ ไฟล์ที่ถูก pickle จะมีนามสกุล .pkl

แบบฝึกหัด - ทำความสะอาดข้อมูลของคุณ

ในบทเรียนนี้ คุณจะใช้ข้อมูลจากการพบเห็น UFO จำนวน 80,000 ครั้ง ซึ่งรวบรวมโดย NUFORC (ศูนย์รายงาน UFO แห่งชาติ) ข้อมูลนี้มีคำอธิบายที่น่าสนใจเกี่ยวกับการพบเห็น UFO เช่น:

• คำอธิบายตัวอย่างแบบยาว "ชายคนหนึ่งปรากฏตัวจากลำแสงที่ส่องลงบนทุ่งหญ้าในเวลากลางคืน และเขาวิ่งไปยังลานจอดรถของ Texas Instruments"
• คำอธิบายตัวอย่างแบบสั้น "แสงไล่ตามเรา"

สเปรดชีต ufos.csv มีคอลัมน์เกี่ยวกับ city, state และ country ที่การพบเห็นเกิดขึ้น รูปร่างของวัตถุ (shape) และ latitude และ longitude

ใน notebook ที่ว่างเปล่าที่รวมอยู่ในบทเรียนนี้:

1. import pandas, matplotlib, และ numpy เหมือนที่คุณทำในบทเรียนก่อนหน้า และ import สเปรดชีต ufos คุณสามารถดูตัวอย่างชุดข้อมูล:

   import pandas as pd
   import numpy as np
   
   ufos = pd.read_csv('./data/ufos.csv')
   ufos.head()
   

2. แปลงข้อมูล ufos เป็น dataframe ขนาดเล็กพร้อมชื่อใหม่ ตรวจสอบค่าที่ไม่ซ้ำกันในฟิลด์ Country

   ufos = pd.DataFrame({'Seconds': ufos['duration (seconds)'], 'Country': ufos['country'],'Latitude': ufos['latitude'],'Longitude': ufos['longitude']})
   
   ufos.Country.unique()
   

3. ตอนนี้ คุณสามารถลดปริมาณข้อมูลที่เราต้องจัดการโดยการลบค่าที่เป็น null และนำเข้าการพบเห็นที่มีระยะเวลา 1-60 วินาทีเท่านั้น:

   ufos.dropna(inplace=True)
   
   ufos = ufos[(ufos['Seconds'] >= 1) & (ufos['Seconds'] <= 60)]
   
   ufos.info()
   

4. Import ไลบรารี LabelEncoder ของ Scikit-learn เพื่อแปลงค่าข้อความสำหรับประเทศให้เป็นตัวเลข:

   ✅ LabelEncoder เข้ารหัสข้อมูลตามลำดับตัวอักษร

   from sklearn.preprocessing import LabelEncoder
   
   ufos['Country'] = LabelEncoder().fit_transform(ufos['Country'])
   
   ufos.head()
   

   ข้อมูลของคุณควรมีลักษณะดังนี้:

   	Seconds	Country	Latitude	Longitude
   2	20.0	3		53.200000	-2.916667
   3	20.0	4		28.978333	-96.645833
   14	30.0	4		35.823889	-80.253611
   23	60.0	4		45.582778	-122.352222
   24	3.0		3		51.783333	-0.783333
   

แบบฝึกหัด - สร้างโมเดลของคุณ

ตอนนี้คุณสามารถเตรียมพร้อมที่จะฝึกโมเดลโดยแบ่งข้อมูลออกเป็นกลุ่มการฝึกและการทดสอบ

1. เลือกสามฟีเจอร์ที่คุณต้องการฝึกเป็นเวกเตอร์ X ของคุณ และเวกเตอร์ y จะเป็น Country คุณต้องการสามารถป้อน Seconds, Latitude และ Longitude และรับรหัสประเทศกลับมา

   from sklearn.model_selection import train_test_split
   
   Selected_features = ['Seconds','Latitude','Longitude']
   
   X = ufos[Selected_features]
   y = ufos['Country']
   
   X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=0)
   

2. ฝึกโมเดลของคุณโดยใช้ logistic regression:

   from sklearn.metrics import accuracy_score, classification_report
   from sklearn.linear_model import LogisticRegression
   model = LogisticRegression()
   model.fit(X_train, y_train)
   predictions = model.predict(X_test)
   
   print(classification_report(y_test, predictions))
   print('Predicted labels: ', predictions)
   print('Accuracy: ', accuracy_score(y_test, predictions))
   

ความแม่นยำไม่เลวเลย (ประมาณ 95%) ซึ่งไม่น่าแปลกใจ เนื่องจาก Country และ Latitude/Longitude มีความสัมพันธ์กัน

โมเดลที่คุณสร้างไม่ได้ปฏิวัติอะไรมากนัก เนื่องจากคุณควรสามารถอนุมาน Country จาก Latitude และ Longitude ได้ แต่เป็นการฝึกที่ดีในการลองฝึกจากข้อมูลดิบที่คุณทำความสะอาด ส่งออก และใช้โมเดลนี้ในเว็บแอป

แบบฝึกหัด - 'pickle' โมเดลของคุณ

ตอนนี้ถึงเวลาที่จะ pickle โมเดลของคุณ! คุณสามารถทำได้ในไม่กี่บรรทัดโค้ด เมื่อมันถูก pickled แล้ว ให้โหลดโมเดลที่ถูก pickle และทดสอบกับตัวอย่างข้อมูลอาร์เรย์ที่มีค่าของ seconds, latitude และ longitude

import pickle
model_filename = 'ufo-model.pkl'
pickle.dump(model, open(model_filename,'wb'))

model = pickle.load(open('ufo-model.pkl','rb'))
print(model.predict([[50,44,-12]]))

โมเดลคืนค่า '3' ซึ่งเป็นรหัสประเทศสำหรับ UK น่าทึ่งมาก! 👽

แบบฝึกหัด - สร้างแอป Flask

ตอนนี้คุณสามารถสร้างแอป Flask เพื่อเรียกโมเดลของคุณและคืนผลลัพธ์ที่คล้ายกัน แต่ในรูปแบบที่ดูดีขึ้น

1. เริ่มต้นด้วยการสร้างโฟลเดอร์ชื่อ web-app ข้างไฟล์ notebook.ipynb ที่ไฟล์ ufo-model.pkl ของคุณอยู่

2. ในโฟลเดอร์นั้น สร้างอีกสามโฟลเดอร์: static โดยมีโฟลเดอร์ css อยู่ข้างใน และ templates คุณควรมีไฟล์และไดเรกทอรีดังนี้:

   web-app/
     static/
       css/
     templates/
   notebook.ipynb
   ufo-model.pkl
   

   ✅ ดูโฟลเดอร์ solution เพื่อดูแอปที่เสร็จสมบูรณ์

3. ไฟล์แรกที่สร้างในโฟลเดอร์ web-app คือไฟล์ requirements.txt เหมือน package.json ในแอป JavaScript ไฟล์นี้แสดงรายการ dependencies ที่แอปต้องการ ใน requirements.txt เพิ่มบรรทัด:

   scikit-learn
   pandas
   numpy
   flask
   

4. ตอนนี้ รันไฟล์นี้โดยไปที่ web-app:

   cd web-app
   

5. ใน terminal ของคุณ พิมพ์ pip install เพื่อ install ไลบรารีที่ระบุใน requirements.txt:

   pip install -r requirements.txt
   

6. ตอนนี้ คุณพร้อมที่จะสร้างไฟล์อีกสามไฟล์เพื่อจบแอป:

   1. สร้าง app.py ใน root
   2. สร้าง index.html ในไดเรกทอรี templates
   3. สร้าง styles.css ในไดเรกทอรี static/css

7. สร้างไฟล์ styles.css ด้วยสไตล์เล็กน้อย:

   body {
   	width: 100%;
   	height: 100%;
   	font-family: 'Helvetica';
   	background: black;
   	color: #fff;
   	text-align: center;
   	letter-spacing: 1.4px;
   	font-size: 30px;
   }
   
   input {
   	min-width: 150px;
   }
   
   .grid {
   	width: 300px;
   	border: 1px solid #2d2d2d;
   	display: grid;
   	justify-content: center;
   	margin: 20px auto;
   }
   
   .box {
   	color: #fff;
   	background: #2d2d2d;
   	padding: 12px;
   	display: inline-block;
   }
   

8. ต่อไป สร้างไฟล์ index.html:

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="UTF-8">
       <title>🛸 UFO Appearance Prediction! 👽</title>
       <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
     </head>
   
     <body>
       <div class="grid">
   
         <div class="box">
   
           <p>According to the number of seconds, latitude and longitude, which country is likely to have reported seeing a UFO?</p>
   
           <form action="{{ url_for('predict')}}" method="post">
             <input type="number" name="seconds" placeholder="Seconds" required="required" min="0" max="60" />
             <input type="text" name="latitude" placeholder="Latitude" required="required" />
             <input type="text" name="longitude" placeholder="Longitude" required="required" />
             <button type="submit" class="btn">Predict country where the UFO is seen</button>
           </form>
   
           <p>{{ prediction_text }}</p>
   
         </div>
   
       </div>
   
     </body>
   </html>
   

   ลองดูการสร้างเทมเพลตในไฟล์นี้ สังเกตไวยากรณ์ 'mustache' รอบตัวแปรที่จะถูกส่งโดยแอป เช่น ข้อความการทำนาย: {{}} นอกจากนี้ยังมีฟอร์มที่โพสต์การทำนายไปยัง route /predict

   สุดท้าย คุณพร้อมที่จะสร้างไฟล์ python ที่ขับเคลื่อนการใช้งานโมเดลและการแสดงผลการทำนาย:

9. ใน app.py เพิ่ม:

   import numpy as np
   from flask import Flask, request, render_template
   import pickle
   
   app = Flask(__name__)
   
   model = pickle.load(open("./ufo-model.pkl", "rb"))
   
   
   @app.route("/")
   def home():
       return render_template("index.html")
   
   
   @app.route("/predict", methods=["POST"])
   def predict():
   
       int_features = [int(x) for x in request.form.values()]
       final_features = [np.array(int_features)]
       prediction = model.predict(final_features)
   
       output = prediction[0]
   
       countries = ["Australia", "Canada", "Germany", "UK", "US"]
   
       return render_template(
           "index.html", prediction_text="Likely country: {}".format(countries[output])
       )
   
   
   if __name__ == "__main__":
       app.run(debug=True)
   

   💡 เคล็ดลับ: เมื่อคุณเพิ่ม debug=True ขณะรันเว็บแอปโดยใช้ Flask การเปลี่ยนแปลงใดๆ ที่คุณทำกับแอปพลิเคชันของคุณจะสะท้อนทันทีโดยไม่ต้องรีสตาร์ทเซิร์ฟเวอร์ ระวัง! อย่าเปิดใช้งานโหมดนี้ในแอปที่ใช้งานจริง

หากคุณรัน python app.py หรือ python3 app.py - เซิร์ฟเวอร์เว็บของคุณจะเริ่มต้นขึ้นในเครื่อง และคุณสามารถกรอกฟอร์มสั้นๆ เพื่อรับคำตอบสำหรับคำถามที่คุณสงสัยเกี่ยวกับสถานที่ที่มีการพบเห็น UFO!

ก่อนทำสิ่งนั้น ลองดูส่วนต่างๆ ของ app.py:

1. ขั้นแรก dependencies ถูกโหลดและแอปเริ่มต้น
2. จากนั้น โมเดลถูก import
3. จากนั้น index.html ถูก render บน home route

บน route /predict มีหลายสิ่งเกิดขึ้นเมื่อฟอร์มถูกโพสต์:

1. ตัวแปรในฟอร์มถูกรวบรวมและแปลงเป็น numpy array จากนั้นส่งไปยังโมเดลและผลการทำนายจะถูกคืนค่า
2. ประเทศที่เราต้องการแสดงผลถูก render ใหม่เป็นข้อความที่อ่านได้จากรหัสประเทศที่ถูกทำนาย และค่านั้นถูกส่งกลับไปยัง index.html เพื่อ render ในเทมเพลต

การใช้โมเดลในลักษณะนี้ ด้วย Flask และโมเดลที่ถูก pickle นั้นค่อนข้างตรงไปตรงมา สิ่งที่ยากที่สุดคือการเข้าใจว่าข้อมูลที่ต้องส่งไปยังโมเดลเพื่อให้ได้ผลการทำนายมีรูปแบบอย่างไร ทั้งหมดนี้ขึ้นอยู่กับวิธีที่โมเดลถูกฝึก โมเดลนี้มีจุดข้อมูลสามจุดที่ต้องป้อนเพื่อให้ได้ผลการทำนาย

ในสภาพแวดล้อมการทำงาน คุณจะเห็นว่าการสื่อสารที่ดีมีความจำเป็นระหว่างผู้ที่ฝึกโมเดลและผู้ที่ใช้งานโมเดลในเว็บหรือแอปมือถือ ในกรณีของเรา มีเพียงคนเดียว นั่นคือคุณ!

---

🚀 ความท้าทาย

แทนที่จะทำงานในโน้ตบุ๊กและ import โมเดลไปยังแอป Flask คุณสามารถฝึกโมเดลได้ภายในแอป Flask! ลองแปลงโค้ด Python ของคุณในโน้ตบุ๊ก อาจหลังจากที่คุณทำความสะอาดข้อมูล เพื่อฝึกโมเดลจากภายในแอปบน route ที่เรียกว่า train ข้อดีและข้อเสียของการใช้วิธีนี้คืออะไร?

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

มีหลายวิธีในการสร้างเว็บแอปเพื่อใช้งานโมเดล ML ลองทำรายการวิธีที่คุณสามารถใช้ JavaScript หรือ Python เพื่อสร้างเว็บแอปที่ใช้ Machine Learning พิจารณาสถาปัตยกรรม: โมเดลควรอยู่ในแอปหรืออยู่ในคลาวด์? หากเป็นแบบหลัง คุณจะเข้าถึงมันได้อย่างไร? ลองวาดโมเดลสถาปัตยกรรมสำหรับโซลูชัน ML เว็บที่ใช้งานจริง

งานที่ได้รับมอบหมาย

ลองใช้โมเดลอื่น

---

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้บริการแปลภาษาจากผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้