File size: 1,379 Bytes
fc10439
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Predict</title>
  </head>
  <body>
    <h1>Upload an Image for Prediction</h1>
    <form id="predictForm">
      <label for="model_name">Model Name:</label>
      <input
        type="text"
        id="model_name"
        name="model_name"
        value="xception_maize"
        required
      />
      <br /><br />
      <label for="file">Choose image:</label>
      <input type="file" id="file" name="file" accept="image/*" required />
      <br /><br />
      <button type="submit">Predict</button>
    </form>

    <pre id="output"></pre>

    <script>
      const form = document.getElementById("predictForm");
      const output = document.getElementById("output");

      form.addEventListener("submit", async (e) => {
        e.preventDefault();

        const formData = new FormData(form);

        try {
          const res = await fetch("http://localhost:8000/predict", {
            method: "POST",
            body: formData,
          });

          if (!res.ok) {
            throw new Error("Server returned error: " + res.status);
          }

          const data = await res.json();
          output.textContent = JSON.stringify(data, null, 2);
        } catch (err) {
          output.textContent = "Error: " + err.message;
        }
      });
    </script>
  </body>
</html>