-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
214 lines (177 loc) · 6.94 KB
/
index.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE HTML>
<html>
<head>
<title>SDG Analyzer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
<script type="module" src="assets/js/transformers.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body class="is-preload">
<!-- Header -->
<div id="header">
<div class="top">
<!-- Logo -->
<div id="logo">
<span class="image avatar48"><img src="images/SDG_wheel.png" alt="" /></span>
<h1>SDG Analyzer</h1>
<p>In-Browser Semantic Similarity</p>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#top" id="top-link"><span class="icon solid fa-home">Intro</span></a></li>
<li><a href="#query" id="query-link"><span class="icon solid fa-envelope">Query</span></a>
</li>
<li><a href="#sdgs" id="sdgs-link"><span class="icon solid fa-th">SDGs</span></a>
</li>
<li><a href="#about" id="about-link"><span class="icon solid fa-user">About</span></a></li>
</ul>
</nav>
</div>
<div class="bottom">
<!-- Social Icons -->
<ul class="icons">
<li><a href="https://twitter.com/DomeGIS" class="icon brands fa-twitter"><span
class="label">Twitter</span></a></li>
<li><a href="https://github.com/do-me/SDG-Analyzer" class="icon brands fa-github"><span
class="label">Github</span></a></li>
</ul>
</div>
</div>
<!-- Main -->
<div id="main">
<div id="spinner_overlay" hidden>
<div id="spinner"></div>
<h4 class="overlay_text">
Processing in your browser... <br>
Short queries of a few sentences should be almost instant.<br>
Longer texts might take up to 30 seconds.</h4>
</div>
<!-- Intro -->
<section id="top" class="one dark cover">
<div class="container">
<header>
<h2 class="alt" id="title">SDG<strong> Analyzer</strong></h2>
<h4 class="subtitle">Get the most related SDG targets for your text!</h4>
</header>
<footer>
<a href="#query" class="button scrolly">Let's start!</a>
</footer>
</div>
</section>
<!-- query -->
<section id="query" class="two">
<div class="container">
<header>
<h2>Query</h2>
</header>
<p>Copy and paste any text and hit "Query" (currently limited to ~6000 words)</p>
<form>
<div class="row">
<!--<div class="col-6 col-12-mobile"><input type="text" name="name" placeholder="Name" /></div>
<div class="col-6 col-12-mobile"><input type="text" name="email" placeholder="Email" /></div> -->
<div class="col-12">
<button class="exampleButton" id="buttonA">Example 1: Normal query</button>
<button class="exampleButton" id="buttonC">Example 2: Wikipedia about EU's Erasmus
programme</button>
<button class="exampleButton" id="buttonB">Example 3: Fairytale "Hansel and Gretel"</button>
<textarea id="query_text" name="message" placeholder="Message">
We will provide food to the poor.
</textarea>
</div>
<div class="col-12">
<button type="submit" href="#sdgs" class="button scrolly" value="Send Message" id="query_button"
disabled>Loading...</button>
</div>
</div>
</form>
</div>
</section>
<!-- sdgs -->
<section id="sdgs" class="three">
<div class="container">
<header>
<h2>Most relevant SDGs</h2>
</header>
<div id="chart-container"></div>
<br>
<br>
<a class="button" id="toggleButton">Show all/less</a>
<br>
<br>
<table id="results-table">
<thead>
<tr>
<th data-index="0">Icon<span class="sort-icon" style="display: none;"></span></th>
<th data-index="1" class="sort_int">SDG Number <span class="sort-icon"></span></th>
<th data-index="2" class="sort_string">SDG Title <span class="sort-icon"></span></th>
<th data-index="3" class="sort_special">Targets Number <span class="sort-icon"></span></th>
<th data-index="4" class="sort_int">Targets<span class="sort-icon"></span></th>
<!--
<th data-index="5" class="sort_special">Indicators Number<span class="sort-icon"></span></th>
<th data-index="6" class="sort_int">Indicators<span class="sort-icon"></span></th>
<th data-index="7" class="sort_string">UNSD Indicator Codes <span class="sort-icon"></span></th>
-->
<th data-index="5" class="sort_float">Score<span class="sort-icon"></span></th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</section>
<!-- About Me -->
<section id="about" class="four">
<div class="container">
<header>
<h2>About</h2>
</header>
<p>SDG Analyzer is a semantic similarity app running entirely in your browser.
It is built with amazing open source technology: <a href="https://github.com/xenova/transformers.js"
target="_blank">transformers.js</a> for running the
latest machine learning models in your browser and Jina AI's recently released large context
embeddings <a href="https://huggingface.co/jinaai/jina-embeddings-v2-base-en"
target="_blank">jinaai/jina-embeddings-v2-base-en</a>.
<br>
<br>
The embeddings for each target are compared to the query embedding (cosine distance) and sorted
accordingly. The diagram shows the maximum target similarity score for each SDG. Note that due to
the nature of embeddings
the absolute value of the cosine distance does matter less than the relative position of each entry.
<br>
<br>
If you like this app, <a href="https://github.com/do-me/SDG-Analyzer" target="_blank">star it on
GitHub</a> and make sure to have a look at <a href="https://do-me.github.io/SemanticFinder/"
target="_blank">SemanticFinder</a> for in-browser semantic search!
<br>
Built by <a href="https://www.linkedin.com/in/dominik-weckm%C3%BCller/" target="_blank">me</a>.
</p>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<!-- Copyright -->
<ul class="copyright">
<li>© Dominik Weckmüller 2023. All rights reserved.</li>
<li>HTML template: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script type="module" src="assets/js/main.js"></script>
</body>
</html>
<!--
HTML Template: Prologue by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->