HTML form — upload .pkl + select dataset
The form users see. File input + dataset dropdown + framework dropdown. enctype=multipart/form-data is CRITICAL.
index.html
v3.1
Live preview
updates as you type
🧠 How it works
3 critical things for a file-upload form: (1) enctype='multipart/form-data' — WITHOUT THIS, the file isn't sent! Default enctype (application/x-www-form-urlencoded) only sends text. (2) <input type='file' name='model_file'> — the name MUST match the FastAPI parameter (model_file: UploadFile = File()). (3) method='post' — files can't be sent via GET (URLs have length limits). accept='.pkl,.joblib' — filters the file picker (cosmetic, doesn't validate server-side). The FastAPI parameter names (model_file, dataset, framework) must EXACTLY match the HTML name attributes. Mismatch = 422 Unprocessable Entity.
✏️ Try these changes
-
Remove enctype="multipart/form-data" from the <form>→ file upload silently fails — FastAPI returns 422 -
Change name="model_file" to name="model"→ FastAPI can't find the parameter — 422 -
Add <input type="checkbox" name="cross_validate" value="true"> Run 5-fold CV→ adds an optional benchmark option -
Add a progress bar <progress> element→ shows upload progress (needs JS)