เริิ่มต้นจาก สร้าง directory ที่ชื่อว่า templates เพื่อเก็บไฟล์ html จากนั้น ทำการออกแบบหน้า html โดยในโค้ดด้านล่างนี้จะเป็นการออกแบบให้มีการเลือกไฟล์และปุ่ม Submit
โค้ด: เลือกทั้งหมด
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FastApi</title>
</head>
<body>
<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>
<input type="file" class="form-control" id="inputGroupFile02" name="file" required>
<button type="submit" class="btn btn-primary mb-3">Submit</button>
</div>
</form>
</body>
</html>โค้ด: เลือกทั้งหมด
from fastapi import FastAPI, Request,File, UploadFile, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
import uvicornโค้ด: เลือกทั้งหมด
app =FastAPI()
templates = Jinja2Templates(directory="templates")โค้ด: เลือกทั้งหมด
@app.get("/predict/", response_class=HTMLResponse)
def index(request: Request):
context = {'request':request}
return templates.TemplateResponse("index.html",context)โค้ด: เลือกทั้งหมด
uvicorn main:app --reloadจะได้ผลลัพธ์คือ
- ผลการสั่งรันหน้าจะได้หน้าhtmlที่สร้างขึ้นแล้ะจะเข้าถึงหน้านี้ด้วยพาร์ท /predict/
- ผลการสั่งรันหน้าจะได้หน้าhtmlที่สร้างขึ้น.png (9.53 KiB) Viewed 467 times
โค้ด: เลือกทั้งหมด
@app.post('/submitform')
async def handle_form(model:str = Form(...), file: UploadFile = File(...)):
return {'model': model, 'file': file}- เมื่ออัพเดตจะได้ข้อความผลลัพธ์ตามภาพ
- เมื่อกดSubmit.png (82.39 KiB) Viewed 467 times
