HTML Frontend
If your image filter API is working now you can already use that using curl from the command line.
To make it easier to use and test you will now build a small web frontend and serve that along the API.
Note: The HTML used here is the same that was used in the previous tutorial.
✅ In your main function match / and /app.js and serve the respective files.
To simplify deployment you can embed the files directly into the binary using include_str!.
match (req.get_method(), req.get_path()) {
(&Method::GET, "/") => Ok(Response::from_status(StatusCode::OK)
.with_content_type(mime::TEXT_HTML_UTF_8)
.with_body(include_str!("index.html"))),
(&Method::GET, "/app.js") => Ok(Response::from_status(StatusCode::OK)
.with_content_type(mime::APPLICATION_JAVASCRIPT)
.with_body(include_str!("app.js"))),
// (cut)
}
✅ Create a src/index.html file with a basic HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rust WASM Demo</title>
</head>
<body>
</body>
</html>
✅ To upload a picture the frontend needs a file selector, so add the following in between the <body> tags.
<input type="file" id="files" name="file" accept="image/png, image/jpeg" />
✅ Additionally the user should be able to select a filter. List out all available ones manually.
<select name="filter">
<option value="None">none</option>
<option value="1977" selected>1977</option>
<option value="Aden">Aden</option>
<option value="Brannan">Brannan</option>
<option value="Brooklyn">Brooklyn</option>
<option value="Clarendon">Clarendon</option>
<option value="Earlybird">Earlybird</option>
<option value="Gingham">Gingham</option>
<option value="Hudson">Hudson</option>
<option value="Inkwell">Inkwell</option>
<option value="Kelvin">Kelvin</option>
<option value="Lark">Lark</option>
<option value="Lofi">Lofi</option>
<option value="Maven">Maven</option>
<option value="Mayfair">Mayfair</option>
<option value="Moon">Moon</option>
<option value="Nashville">Nashville</option>
<option value="Reyes">Reyes</option>
<option value="Rise">Rise</option>
<option value="Slumber">Slumber</option>
<option value="Stinson">Stinson</option>
<option value="Toaster">Toaster</option>
<option value="Valencia">Valencia</option>
<option value="Walden">Walden</option>
</select>
✅ To show that an upload is in progress add a <span> where you can show a message.
<span></span>
✅ You also need a place to display the resulting image.
<img />
✅ And last but not least include the JavaScript frontend code.
<script src="app.js"></script>
The next chapter will guide you through writing the JavaScript frontend code.