ในการทำ 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 ดังรูป แล้วจะมีหน้าเว็บที่สร้างไว้ปรากฎขึ้นมา

จากนั้นเลือกไฟล์ เลือก model และกด 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