pairwise-comparison/image-pairwise-comparison.html at main · eugene-khyst/pairwise-comparison · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Image Pairwise Comparison</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
  <link rel="stylesheet" href="image-pairwise-comparison.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
</head>

<body>
  <nav class="navbar is-light has-text-centered">
    <div class="navbar-menu is-active">
      <div class="navbar-start">
        <a class="navbar-item" href="https://evgeniy-khist.github.io/">
          evgeniy-khist.github.io
        </a>
        <a class="navbar-item" href="pairwise-comparison.html">
          Pairwise Comparison
        </a>
        <a class="navbar-item" href="solution-comparison.html">
          Solution Comparison
        </a>
        <a class="navbar-item" href="image-pairwise-comparison.html">
          Image Pairwise Comparison
        </a>
      </div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="github-button" href="https://github.com/evgeniy-khist/pairwise-comparison" data-icon="octicon-star"
            data-size="large" data-show-count="true"
            aria-label="Star evgeniy-khist/pairwise-comparison on GitHub">Star</a>
        </div>
        <div class="navbar-item">
          <a class="github-button" href="https://github.com/evgeniy-khist/pairwise-comparison/fork"
            data-icon="octicon-repo-forked" data-size="large" data-show-count="true"
            aria-label="Fork evgeniy-khist/pairwise-comparison on GitHub">Fork</a>
        </div>
        <div class="navbar-item">
          <a class="github-button" href="https://github.com/evgeniy-khist" data-size="large" data-show-count="true"
            aria-label="Follow @evgeniy-khist on GitHub">Follow @evgeniy-khist</a>
        </div>
      </div>
    </div>
  </nav>

  <section id="app" class="section">
    <div class="container">
      <div class="field">
        <div class="file is-centered is-boxed has-name">
          <label class="file-label">
            <input id="filechooser" class="file-input" type="file" multiple>
            <span class="file-cta">
              <span class="file-icon">
                <i class="fas fa-upload"></i>
              </span>
              <span class="file-label">
                Choose images…
              </span>
            </span>
          </label>
        </div>
      </div>

      <div v-if="nextNotVotedPair != null">
        <p class="title is-3 has-text-centered">Compare images</p>
        <div id="compared-images" class="columns is-vcentered">
          <div class="column compared-image">
            <a @click="nextNotVotedPair.voteForItem1()">
              <img :src="nextNotVotedPair.item1.value.url" :title="nextNotVotedPair.item1.value.filename">
            </a>
          </div>
          <div class="column compared-image">
            <a @click="nextNotVotedPair.voteForItem2()">
              <img :src="nextNotVotedPair.item2.value.url" :title="nextNotVotedPair.item2.value.filename">
            </a>
          </div>
        </div>
      </div>

      <div v-if="allPairsVoted">
        <table class="table is-bordered is-striped is-hoverable center">
          <thead>
            <tr>
              <th>Image</th>
              <th>Filename</th>
              <th>Rank</th>
              <th>Score</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in sortedItems">
              <td>
                <img :src="item.value.url" :title="item.value.filename" class="thumbnail">
              </td>
              <td>{{ item.value.filename }}</td>
              <td>{{ index + 1 }}</td>
              <td>{{ item.score }}</td>
            </tr>
          </tbody>
        </table>

        <div class="rated-image" v-for="(item, index) in sortedItems">
          <p class="title is-3 has-text-centered">#{{ index + 1 }}</p>
          <img :src="item.value.url" :title="item.value.filename">
          <hr>
        </div>
      </div>
    </div>
  </section>

  <script src="pairwise-comparison.js"></script>
  <script src="image-pairwise-comparison-vue.js"></script>
</body>

</html>