forked from do-me/SemanticFinder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (157 loc) · 14.2 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
<!DOCTYPE html>
<html>
<head>
<title>SemanticFinder - Frontend-only Semantic Search with transformers.js</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<br/>
<h1 class="text-center"><span class="highlight-first">SemanticFinder</span></h1>
<h2 class="text-center">Frontend-only live semantic search with <a href="https://xenova.github.io/transformers.js/"
target="_blank">transformers.js</a>. <a
href="https://github.com/do-me/SemanticFinder">GitHub</a></h2>
<div class="text-center" style="margin: 0 auto; max-width: 65%;">
<p>
Semantic search right in your browser! Calculates the embeddings and cosine similarity client-side without
server-side inferencing.<br>
Demo for <a href="https://geo.rocks/post/semanticfinder-semantic-search-frontend-only/">this blog post</a>,
building on two former ones <a
href="https://geo.rocks/post/qdrant-transformers-js-semantic-search//">[1]</a>, <a
href="https://geo.rocks/post/geospatial-vector-search-qdrant/">[2]</a> about vector search.
See other fast (pre-index) examples: <a href="https://geo.rocks/semanticfinder/ipcc">IPCC Report 2023 (85
pages)</a>, <a href="https://geo.rocks/semanticfinder/ipcc-summary">IPCC Summary 2023 (35 pages)</a>.
<br>For a more refined search, enter a low character count; for a coarser search, enter a high one. Simply
copy and paste any text and hit Submit.
</p>
</div>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-sm-9"> <!-- 80% column for text region-->
<form class="form-floating">
<div class="form-group" id="formGroupCenter">
<div class="row no-gutters">
<div class="col-md-10">
<div class="form-floating mb-3">
<input type="text" id="query-text" class="form-control"
placeholder="Enter query here" value="food"/>
<label for="query-text">query</label>
</div>
</div>
<div class="col-md-2">
<button onclick="onSubmit(); return false;" id="submit_button"
class="btn btn-primary submit-button btn-lg mb-2 form-control" disabled>
Loading...
</button>
</div>
</div>
<!-- progress bar -->
<div class="col-12">
<div class="progress" role="progressbar" aria-label="Loading model" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-secondary" id="loading-progress" style="width: 0;">""</div>
</div>
</div>
<!-- settings -->
<div class="accordion accordion-flush pb-3" id="advancedFeaturesAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="advancedFeaturesHeader">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#advancedFeaturesContent" aria-expanded="false"
aria-controls="advancedFeaturesContent">
Settings ↠
</button>
</h2>
<div id="advancedFeaturesContent" class="accordion-collapse collapse">
<div class="accordion-body">
<div class="container-fluid">
<div class="row">
<div class="col-md">
<div class="form-floating">
<select class="form-select form-control " id="model-name">
<option value="Xenova/all-MiniLM-L6-v2" selected>
all-MiniLM-L6-v2 (23 MB)
</option>
<option value="Xenova/e5-small-v2">e5-small-v2 (34 MB)</option>
<option value="Xenova/kobert">kobert (92 MB)</option>
<option value="Xenova/distiluse-base-multilingual-cased-v2">
distiluse-base-multilingual-cased-v2 (135 MB)
</option>
<option value="Xenova/e5-large-v2">e5-large-v2 (335 MB)</option>
</select>
<label for="model-name">Model:</label>
</div>
</div>
<div class="col-md">
<div class="form-floating mb-3">
<input type="number" id="threshold" class="form-control w-100"
value="5" min="1" step="1"/>
<label for="threshold"># results</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select form-control " id="split-type">
<option value="Sentence">Sentence</option>
<option value="Chars" selected># Chars</option>
<option value="Words"># Words</option>
<option value="Tokens"># Tokens</option>
<option value="Regex">Regex</option>
</select>
<label for="split-type">split by</label>
</div>
</div>
<div class="col-md">
<div class="form-floating mb-3">
<input id="split-param" class="form-control w-100"
type=number min="1" value="40"/>
<label for="split-param"># Chars</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- text box -->
<div class="form-floating">
<textarea id="input-text" class="form-control" placeholder="Enter">Near a great forest there lived a poor woodcutter and his wife, and his two children; the boy's name was Hansel and the girl's Grethel. They had very little to bite or to sup, and once, when there was great dearth in the land, the man could not even gain the daily bread. As he lay in bed one night thinking of this, and turning and tossing, he sighed heavily, and said to his wife, "What will become of us? we cannot even feed our children; there is nothing left for ourselves."
"I will tell you what, husband," answered the wife; "we will take the children early in the morning into the forest, where it is thickest; we will make them a fire, and we will give each of them a piece of bread, then we will go to our work and leave them alone; they will never find the way home again, and we shall be quit of them."
"No, wife," said the man, "I cannot do that; I cannot find in my heart to take my children into the forest and to leave them there alone; the wild animals would soon come and devour them." - "O you fool," said she, "then we will all four starve; you had better get the coffins ready," and she left him no peace until he consented. "But I really pity the poor children," said the man.
The two children had not been able to sleep for hunger, and had heard what their step-mother had said to their father. Grethel wept bitterly, and said to Hansel, "It is all over with us."
"Do be quiet, Grethel," said Hansel, "and do not fret; 1 will manage something." And when the parents had gone to sleep he got up, put on his little coat, opened the back door, and slipped out. The moon was shining brightly, and the white flints that lay in front of the house glistened like pieces of silver. Hansel stooped and filled the little pocket of his coat as full as it would hold. Then he went back again, and said to Grethel, "Be easy, dear little sister, and go to sleep quietly; God will not forsake us," and laid himself down again in his bed. When the day was breaking, and before the sun had risen, the wife came and awakened the two children, saying, "Get up, you lazy bones; we are going into the forest to cut wood." Then she gave each of them a piece of bread, and said, "That is for dinner, and you must not eat it before then, for you will get no more." Grethel carried the bread under her apron, for Hansel had his pockets full of the flints. Then they set off all together on their way to the forest. When they had gone a little way Hansel stood still and looked back towards the house, and this he did again and again, till his father said to him, "Hansel, what are you looking at? take care not to forget your legs."
"O father," said Hansel, "lam looking at my little white kitten, who is sitting up on the roof to bid me good-bye." - "You young fool," said the woman, "that is not your kitten, but the sunshine on the chimney-pot." Of course Hansel had not been looking at his kitten, but had been taking every now and then a flint from his pocket and dropping it on the road. When they reached the middle of the forest the father told the children to collect wood to make a fire to keep them, warm; and Hansel and Grethel gathered brushwood enough for a little mountain j and it was set on fire, and when the flame was burning quite high the wife said, "Now lie down by the fire and rest yourselves, you children, and we will go and cut wood; and when we are ready we will come and fetch you."
So Hansel and Grethel sat by the fire, and at noon they each ate their pieces of bread. They thought their father was in the wood all the time, as they seemed to hear the strokes of the axe: but really it was only a dry branch hanging to a withered tree that the wind moved to and fro. So when they had stayed there a long time their eyelids closed with weariness, and they fell fast asleep.
When at last they woke it was night, and Grethel began to cry, and said, "How shall we ever get out of this wood? "But Hansel comforted her, saying, "Wait a little while longer, until the moon rises, and then we can easily find the way home." And when the full moon got up Hansel took his little sister by the hand, and followed the way where the flint stones shone like silver, and showed them the road. They walked on the whole night through, and at the break of day they came to their father's house. They knocked at the door, and when the wife opened it and saw that it was Hansel and Grethel she said, "You naughty children, why did you sleep so long in the wood? we thought you were never coming home again!" But the father was glad, for it had gone to his heart to leave them both in the woods alone.
Not very long after that there was again great scarcity in those parts, and the children heard their mother say at night in bed to their father, "Everything is finished up; we have only half a loaf, and after that the tale comes to an end. The children must be off; we will take them farther into the wood this time, so that they shall not be able to find the way back again; there is no other way to manage." The man felt sad at heart, and he thought, "It would better to share one's last morsel with one's children." But the wife would listen to nothing that he said, but scolded and reproached him. He who says A must say B too, and when a man has given in once he has to do it a second time.
</textarea>
</div>
<!-- navigation buttons -->
<div class="text-center" id="submitGroup">
<button id="prev" class="btn btn-md btn-secondary mb-2 nav-button" disabled><
prev
</button>
<button id="next" class="btn btn-md btn-secondary mb-2 nav-button" disabled>next
>
</button>
</div>
</div>
</form>
<div>
<p>Progress:</p>
<div class="progress" id="progressBar" role="progressbar" aria-label="Progress Bar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="height: 75%">
<div id="progressBarProgress" class="progress-bar progress-bar-striped" style="width: 0%;">""</div>
</div>
</div>
</div>
<div class="col-sm-3"> <!-- 20% column -->
<div id="results">
<ul id="results-list"></ul>
</div>
</div>
</div>
</div>
</body>
</html>