ArtGuide/test.html at master · SmartAppUnipi/ArtGuide · GitHub

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>

<head>
  <title>ArtGuide Test UI</title>
</head>

<body>
  <form style="line-height: 3em;" onsubmit="event.preventDefault(); main()">
    File: <input type="file" id="image" accept="image/png, image/jpeg"><br>
    Language:
    <select id="language">
      <option value="en" selected>English</option>
      <option value="it">Italian</option>
    </select><br>
    Expertise level:
    <select id="expertiseLevel">
      <option value="1" selected>Child</option>
      <option value="2">Novice</option>
      <option value="3">Knowledgeable</option>
      <option value="4">Expert</option>
    </select><br>
    Tastes: <input type="text" id="tastes" value="history"></br>
    Endpoint: <input type="text" id="endpoint" value="http://localhost:2345/upload"></br>
    <input type="submit">
  </form>

  Result:<br>
  <p id="response"></p>

  <script>
    function toBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
      })
    }

    function buildJson(image, language = "en", expertiseLevel = 1, tastes = []) {
      return {
        location: {
          lat: 43.7228,
          lng: 10.4017
        },
        userProfile: {
          id: 42,
          tastes: tastes,
          language: language,
          expertiseLevel: expertiseLevel
        },
        image: image
      }
    }

    function post(json, endpoint) {
      return fetch(endpoint, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(json)
      }).then(res => res.json())
    }

    function main() {
      const image = document.getElementById("image").files[0]
      const tastes = document.getElementById("tastes").value.split(",")
      const language = document.getElementById("language").value
      const expertiseLevel = document.getElementById("expertiseLevel").value
      const endpoint = document.getElementById("endpoint").value
      const response = document.getElementById("response")

      response.innerText = "loading..."

      toBase64(image)
        .then(b64 => buildJson(b64, language, expertiseLevel, tastes))
        .then(json => post(json, endpoint))
        .then(json => {
          console.log(json)
          response.innerText = json.tailoredText
        })
        .catch(ex => {
          console.error(ex)
          response.innerText = "Error. Check the console."
        })
    }

  </script>
</body>

</html>