ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

ในการทำ API ในบทความนี้จะเป็นการใช้ FastAPI Framework เขียน API ภาษา Python (ไพธอน) เพื่อรับค่าจาก form ที่ใช้ภาษา html เขียน และการ render_template จะใช้ Flask Framework (ฟลัสค์ เฟรมเวิร์ค) ในการแสดงหน้า html ซึ่งในบทความนี้จะอธิบายโค้ด html ที่สร้าง form และ FastAPI (เพื่อรับค่าจาก form html), Flask (เพื่อแสดงหน้าเว็บ html ที่สร้างไว้) และ Uvicorn (เพื่อ run server)

 

สร้างไฟล์ html เพื่อใช้เป็น input ข้อมูลจากผู้ใช้งานและส่งค่าให้ api

ในการสร้างไฟล์ html ใช้ HTML5 ในการเขียน มี method="post" เพื่อส่งค่าแบบ post และ action="/submitform" เพื่อหลังจากกด submit ไปแล้วจะให้ไป url="/submitform" ภายใน form

  • มี select tag ให้ผู้ใช้งานเลือกรายการที่ต้องเลือก ถ้าไม่เลือกรายการใดๆ default option จะเป็น 224*224 ML model สังเกตได้จาก selected ตรง option tag ข้างหน้า
  • มี file input tag ให้ผู้ใช้เลือกไฟล์ที่ต้องการ ถ้าไม่เลือกไฟล์ใดๆ จะไม่สามารถกดปุ่ม submit ได้ สังเกตได้จาก required ใน input tag ข้างหน้า
{% extends "layout.html" %}

{% block title %}
<title>Test ML</title>
{% endblock %}

{% block content %}
<div class="parent">
    <header>
        <h1>Predict an image</h1>
    </header>
<p>
    <!-- {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
            {% for message in messages %}
                <li>{{ message }}</li>
            {% endfor %}
            </ul>
        {% endif %}
    {% endwith %} -->
</p>
<main>
    {% if filename %}
    <div>
        <!-- <img src="/{{ url_for('display_image', filename=filename) }}"> -->
    </div>
    {% endif %}
    <form action="/submitform" method="post" enctype="multipart/form-data">
        <div class="flex-container">
            <select class="form-select" name="model" aria-label="select a model">
                <option value="1" selected>1st model 224*224</option>
                <option value="2">2nd model 90*96</option>
            </select>
        </div>
        <div class="flex-container">
            <input type="file" class="form-control" id="inputGroupFile02" name="file" required>
            <button type="submit" class="btn btn-primary mb-3">Predict</button>
        </div>
    </form>
    <hr>
    <div>
        {% if gender_prediction %}
        <h3>This's a picture of a {{gender_prediction}}.</h3>
        <h4>It was processed by {{model}}</h4>
        {% else %}
        <h3>Nothing's here</h3>
        {% endif %}
    </div>
</div>
</main>
{% endblock %}

 

สร้างไฟล์ Python สำหรับใช้งาน Flask และ FastAPI

ภายในไฟล์ Python จะใช้ Flask สำหรับ render_template html และ FastAPI เพื่อรับค่าจาก Form html ต้องมีการตั้งค่าอะไรนิดหน่อยเพราะ Flask Framework เป็น WSGI Server แต่ FastAPI เป็น ASGI Server จะต้องใช้ Library WSGIMiddleware เพื่อให้ FastAPI และ Flask Framework ใช้ port เดียวกันได้

ในแต่ละ function ภายในไฟล์ Python นี้

  • function index() จะเป็นการแสดงหน้า index.html (Flask Framework)
  • function handle_form() จะเป็นการรับค่าจาก Form HTML (FastAPI Framework) และ return เป็น dict 
from fastapi import FastAPI, File, UploadFile, Form
from fastapi.middleware.wsgi import WSGIMiddleware
import uvicorn
from flask import Flask, render_template

api = FastAPI() # Init FastAPI App
flask_app = Flask(__name__) # Init Flask App
# Mount Flask on FastAPI
api.mount('/predict', WSGIMiddleware(flask_app))

# Flask section
# http://127.0.0.1:8000/predict
@flask_app.get('/')
def index():
    return render_template('index.html')

# FastAPI section
# http://127.0.0.1:8000/submitform
@api.post('/submitform')
async def handle_form(model: str = Form(...), file: UploadFile = File(...)):
    return {'model': model, 'file': file}


if __name__ == '__main__':
    uvicorn.run(api, host='127.0.0.1', port=8000, debug=True)

ผลลัพธ์ที่ได้

วิธี run server ให้พิมพ์คำสั่งใน terminal ที่ directory ที่ไฟล์ python อยู่ ดังนี้

uvicorn <file_name>:<initial_fastapi>

ในตัวอย่างชื่อไฟล์ Python จะเป็น main.py และ initial_fastapi เป็น api จะได้

uvicorn main:api

หลังจากที่ run ใน terminal ให้ใส่ url ดังรูป แล้วจะมีหน้าเว็บที่สร้างไว้ปรากฎขึ้นมา

รูปตัวอย่างหน้าเว็บหลังจาก run ที่ terminal
รูปตัวอย่างหน้าเว็บหลังจาก run ที่ terminal

จากนั้นเลือกไฟล์ เลือก model และกด submit จะได้ผลลัพธ์แบบนี้

ผลลัพธ์หลังจากที่เลือก model, file และกด submit
ผลลัพธ์หลังจากที่เลือก model, file และกด submit

 

สรุป

การทำ API เป็นจุดเริ่มต้นของ Web service ใน FastAPI Framework สะดวกต่อการทำ API อย่างมาก และมากกว่า Flask Framework (ฟลัสค์ เฟรมเวิร์ค) แต่ยังไม่ได้ชี้แจงให้ ในบทความนี้ใช้ Flask Framework ในการแสดงหน้าเว็บและ FastAPI Framework ในการรับค่าจาก Form ใน HTML และสุดท้าย FastAPI ทำงานเร็วมากๆ

 

อ้างอิง

"upload form FastAPI" .[ออนไลน์] เข้าถึงได้ที่ https://www.youtube.com/watch?v=Ofesfy686jY&t=165s

"WSGIMiddleware" .[ออนไลน์] เข้าถึงได่ที่ https://www.youtube.com/watch?v=11srfAQkaBg&t=1s

"Setup a Server" .[ออนไลน์] เข้าถึงได้ที่ https://www.youtube.com/watch?v=CVzZ-YqxdEk

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
index subttile VDO แนะนำการใช้ CI (Continuous Integration) ใน GitLab จับโค้ดจาก git ขึ้น demo & Production อัพไฟล์
โดย Nes224 พฤ 20 ม.ค. 2022 11:46 am บอร์ด M150 - ธราวุธ ชัยศรี
2
10
พฤ 20 ม.ค. 2022 3:54 pm โดย norisa_dl
งานประจำวันที่ 20 มกราคม 2565
โดย Nes224 พฤ 20 ม.ค. 2022 8:52 am บอร์ด M150 - ธราวุธ ชัยศรี
6
41
พฤ 20 ม.ค. 2022 7:19 pm โดย norisa_dl
สิ่งควรรู้ก่อนสร้าง component ใน joomla
โดย adinan49 พ 19 ม.ค. 2022 10:17 pm บอร์ด Joomla user Guide Knowledge
0
12
พ 19 ม.ค. 2022 10:17 pm โดย adinan49
ติดตั้ง Odoo 15 แล้วเจอ ปัญหาปริ้นไม่ได้ ปริ้นไม่ออก แก้ตามนี้
โดย mindphp พ 19 ม.ค. 2022 8:32 pm บอร์ด Linux - Web Server
1
16
พ 19 ม.ค. 2022 8:32 pm โดย mindphp
เริ่มหัดเขียนโปรแกรม node.js หรือ php หรือ python ดี
โดย SharminSultana พ 19 ม.ค. 2022 3:55 pm บอร์ด Programming - PHP
2
21
พฤ 20 ม.ค. 2022 6:41 pm โดย บุคคลทั่วไป
โหลด mooziicart จากไหนดีสุด
โดย Anonymous พ 19 ม.ค. 2022 2:43 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
พ 19 ม.ค. 2022 2:43 pm โดย บุคคลทั่วไป
งานประจำวันที่ 19 มกราคม 2565
โดย Nes224 พ 19 ม.ค. 2022 8:36 am บอร์ด M150 - ธราวุธ ชัยศรี
4
49
พฤ 20 ม.ค. 2022 1:08 pm โดย norisa_dl
วิธีเขียนโค้ด JavaScript ใน Joomla ผ่านไฟล์ภายนอก
โดย adinan49 อ 18 ม.ค. 2022 11:14 pm บอร์ด Joomla user Guide Knowledge
0
21
อ 18 ม.ค. 2022 11:14 pm โดย adinan49