HTML Frontend

Your image filter application needs some basic UI to allow a user to specify an image on disk and select the image filter to be applied.

✅ Start with a new file app/index.html with a basic HTML structure.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Rust Image filter</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" />

The accept attribute limits what files a user can select. As this application is for images it's enough to limit it to PNG and JPEG files for now.

✅ 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>

In case of None no filter should be applied and the user should see the image they selected unchanged.

✅ 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 type="module" src="app.js"></script>

The JavaScript file does not exist yet. You will create that in the next chapter.

✅ To ensure everything is working as expected for now serve the files over HTTP using http

cd app
http

Your application should be reachable at http://127.0.0.1:8000/. It should look something like this:

In the next chapter you will finally write the JavaScript code to load and run the WebAssembly module.

Workbook for Rust & WebAssembly workshop

HTML Frontend