-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
392 lines (382 loc) · 25.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
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Generiere mit künstlicher Intelligenz auf Knopfdruck neue Pfadinamen!">
<title>Pfadinamen-Generator</title>
<link rel="stylesheet" href="./termynal.css">
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./images/icons/icon-72x72.png">
<link rel="apple-touch-icon" href="./images/icons/icon-180x180.png" sizes="180x180">
<link rel="mask-icon" href="./images/icons/mask-icon.svg" color="#3A1C71">
<meta name="theme-color" content="#3A1C71">
</head>
<body>
<div id="background"></div>
<div id="termynal" data-termynal class="three-buttons">
<header data-ty-top>
<h1 class="desktop">Pfadinamen-Generator</h1>
<h1 class="mobile">Pfadinamen</h1>
<object class="spinner" id="spinner" type="image/svg+xml" data="./spinner.svg" aria-hidden="true"></object>
</header>
<main id="names" data-ty></main>
<footer data-ty-bottom-bar>
<button id="refresh-button" disabled="disabled">Nochmaaal ›</button>
<div>
<input type="checkbox" id="modal-trigger-de" class="modal-trigger">
<label for="modal-trigger-de" class="modal-trigger-label">
<span class="desktop">Wie funktioniert das?</span>
<span class="mobile">Info DE</span>
</label>
<label for="modal-trigger-de" class="modal-background"></label>
<div data-termynal class="modal closeable" id="about" style="padding: 3rem 45px 15px" role="dialog" aria-labelledby="dialog-title-de" aria-describedby="modal-content-de">
<header data-ty-top>
<h2 id="dialog-title-de" class="desktop">Wie funktioniert das?</h2>
</header>
<label class="modal-close-trigger" for="modal-trigger-de"></label>
<article id="modal-content-de" class="modal-content">
<p>
Diese Webseite generiert mit künstlicher Intelligenz auf Knopfdruck neue Pfadinamen.
</p>
<input type="checkbox" id="toggle-1-de" class="collapse-trigger" />
<label for="toggle-1-de" class="collapse-trigger-label">Was ist künstliche Intelligenz?</label>
<div class="collapsible">
<p>
Künstliche Intelligenz ist ein Begriff für Software, die <b>menschliches Verhalten</b> nachahmt.
Zum Beispiel ist ein Computergegner bei einem Videogame eine künstliche Intelligenz.
</p>
<p>
Ein Unterbereich davon ist das sogenannte "<b>machine learning</b>".
So nennen wir es wenn in der Software nicht explizite Verhaltensregeln einprogrammiert sind, sondern das Programm anhand von vielen Beispielen selber lernt, wie es sich verhalten soll.
</p>
</div>
<input type="checkbox" id="toggle-2-de" class="collapse-trigger" />
<label for="toggle-2-de" class="collapse-trigger-label">Wie funktioniert dieser Generator?</label>
<div class="collapsible">
<p>
Dieser Generator enthält eine machine learning Software namens <i>char-rnn</i>.
Diese wurde mit einer Liste von <b>20'000 Pfadinamen</b>, Cevinamen und Jublanamen trainiert.
Das Programm hat so gelernt, wie Pfadinamen normalerweise aussehen.
</p>
<p>
Die Namen werden <b>Buchstabe für Buchstabe</b> generiert.
Das Programm schaut immer die bisher generierten Buchstaben an, und berechnet dann, welche Buchstaben als nächstes wie gut hinpassen.
</p>
<p>
Wenn zum Beispiel bisher <i>Tarant...</i> generiert wurde, dann wird wohl als nächstes ein <i>u</i> besser passen als ein <i>x</i> oder ein <i>P</i>.
Der Generator wählt immer zufällig aus allen Buchstaben die er kennt aus, welchen Buchstaben er als nächstes schreiben soll.
Aber je passender ein Buchstabe ist, desto höher ist die Chance dass der Generator diesen Buchstaben auswählt.
</p>
</div>
<input type="checkbox" id="toggle-3-de" class="collapse-trigger" />
<label for="toggle-3-de" class="collapse-trigger-label">Wer hat das gemacht?</label>
<div class="collapsible">
<p>
Diesen Pfadinamen-Generator hat Carlo Beltrame / Cosinus aus der Pfadi Gloggi in Zürich programmiert.
</p>
<p>
Es war eine Idee die ich schon lange mal hatte, sobald ich den Artikel "The Unreasonable Effectiveness of Recurrent Neural Networks" von Andrej Karpathy gelesen habe.
Gemäss meinen Tests sind ungefähr drei Viertel der ausgespuckten Pfadinamen neuartig (d.h. nicht in der Liste der Trainingsdaten vorhanden).
</p>
<p>
Das Programm ist als Open Source auf GitHub veröffentlicht.
Wenn du einen Verbesserungsvorschlag oder eine Idee für ein weiteres Feature hast, kannst du dich gerne bei mir unter <i>cosinus (ät) gloggi (punkt) ch</i> oder auf <a href="https://github.com/carlobeltrame/pfadinamen" target="_blank">GitHub</a> melden.
</p>
<p>
Die angezeigten Bedeutungen stammen vom Pfadinamenverzeichnis <a href="https://pfadinamen.ch" target="_blank">pfadinamen.ch</a>, und dürfen mit freundlicher Erlaubnis des Autors (Michael Albertin / Purzel) auf dieser Seite wiederverwendet werden. Falls du bereits eine Bedeutung im Kopf hast und einen passenden Namen suchst, ist das Pfadinamenverzeichnis der wohl beste Ort dafür.
</p>
</div>
<input type="checkbox" id="toggle-4-de" class="collapse-trigger" />
<label for="toggle-4-de" class="collapse-trigger-label">Darf ich das bei mir in der Pfadi brauchen?</label>
<div class="collapsible">
<p>
Ja, klar. Du kannst einfach auf <a href="https://pfadinamen.app" target="_blank">https://pfadinamen.app</a> gehen.
Wenn dein Browser es unterstützt kannst du den Generator sogar wie eine App auf den Home Screen oder Desktop installieren.
</p>
<p>
Denk daran: Die Kinder in der Pfadi freuen sich darüber, wenn du Pfadinamen für sie auswählst, die wirklich zu ihnen passen.
Vielleicht solltest du daher die generierten Namen noch googeln, um sicherzugehen dass sie nichts unerwartetes bedeuten.
Oder du kannst den Generator auch nur zur Inspiration verwenden.
</p>
<p>
Achtung: Die künstliche Intelligenz ist sich nicht bewusst, wenn sie je mal etwas offensives ausspuckt.
Sie versucht nur so gut es geht, die Namen aus den Trainingsdaten nachzuahmen.
Wenn dich ein Name persönlich stört, klickst du am besten einfach auf den <i>Nochmaaal</i>-Knopf.
</p>
<p>
<b>Viel Spass beim Namen generieren!</b>
</p>
</div>
</article>
</div>
</div>
<div>
<input type="checkbox" id="modal-trigger-fr" class="modal-trigger">
<label for="modal-trigger-fr" class="modal-trigger-label">
<span class="desktop">Comment ça marche ?</span>
<span class="mobile">FR</span>
</label>
<label for="modal-trigger-fr" class="modal-background"></label>
<div data-termynal class="modal closeable" id="about-fr" style="padding: 3rem 45px 15px" role="dialog" aria-labelledby="dialog-title-fr" aria-describedby="modal-content-fr">
<header data-ty-top>
<h1 id="dialog-title-fr" class="desktop">Comment ça marche ?</h1>
</header>
<label class="modal-close-trigger" for="modal-trigger-fr"></label>
<article id="modal-content-fr" class="modal-content">
<p>
Ce site web génère de nouveaux totems grâce à l'intelligence artificielle.
</p>
<input type="checkbox" id="toggle-1-fr" class="collapse-trigger" />
<label for="toggle-1-fr" class="collapse-trigger-label">Qu'est-ce que l'intelligence artificielle ?</label>
<div class="collapsible">
<p>
L'intelligence artificielle est un logiciel qui imite le <b>comportement humain</b>.
Par exemple, une personnage non-joueur dans un jeu vidéo est animée par une intelligence artificielle.
</p>
<p>
L'une des disciplines de l'intelligence artificielle est ce que l'on appelle "<b>Machine Learning</b>".
C'est le cas lorsqu'un programme n'a pas de règles de comportement explicites programmées, mais qu'il apprend à se comporter à partir de nombreux exemples.
</p>
</div>
<input type="checkbox" id="toggle-2-fr" class="collapse-trigger" />
<label for="toggle-2-fr" class="collapse-trigger-label">Comment fonctionne ce générateur ?</label>
<div class="collapsible">
<p>
Ce générateur contient un logiciel de Machine Learning appelé <i>char-rnn</i>.
Il a été entraîné en utilisant une liste de <b>20000 totems</b> des scouts, Jungwacht & Blauring et de l'UCS.
De cette façon, le programme a appris à quoi ressemblent normalement les totems.
</p>
<p>
Les totems sont générés <b>lettre par lettre</b>.
Le programme examine les lettres déjà générées et calcule quelles sont les lettres suivantes qui conviennent le mieux.
</p>
<p>
Par exemple, si <i>Tarant...</i> a déjà été généré, un <i>u</i> conviendra probablement mieux qu'un <i>x</i> ou un <i>P</i>.
Le générateur choisit toujours au hasard la prochaine lettre qu'il écrit parmi toutes les lettres qu'il connaît.
Mais plus une lettre est bien adaptée, plus elle a de chances d'être choisie par le générateur.
</p>
</div>
<input type="checkbox" id="toggle-3-fr" class="collapse-trigger" />
<label for="toggle-3-fr" class="collapse-trigger-label">Qui a créé ça ?</label>
<div class="collapsible">
<p>
Ce générateur de totems a été programmé par Carlo Beltrame / Cosinus de Gloggi à Zürich.
</p>
<p>
C'est une idée que j'avais depuis longtemps, depuis que j'ai lu l'article "The Unreasonable Effectiveness of Recurrent Neural Networks" d'Andrej Karpathy.
D'après mes tests, environ trois sur quatre des totems générés sont complètement nouveaux (c'est-à-dire qu'ils ne sont pas présents dans les données d'entraînement).
</p>
<p>
Le programme est publié en open source sur GitHub.
Si tu as une idée d'amélioration ou de nouvelle fonctionnalité, tu peux me contacter à l'adresse <i>cosinus (at) gloggi (point) ch</i>, ou sur <a href="https://github.com/carlobeltrame/pfadinamen" target="_blank">GitHub</a>.
</p>
<p>
Les significations des totems affichés proviennent de <a href="https://pfadinamen.ch" target="_blank">pfadinamen.ch</a>. Nous avons l'aimable autorisation de l'auteur (Michael Albertin / Purzel) de les montrer sur cette page. Si tu as une signification spécifique à l'esprit et que tu cherches un nom scout adapté, pfadinamen.ch est probablement le meilleur endroit pour en trouver un.
</p>
</div>
<input type="checkbox" id="toggle-4-fr" class="collapse-trigger" />
<label for="toggle-4-fr" class="collapse-trigger-label">Puis-je l'utiliser dans mon groupe de scouts ?</label>
<div class="collapsible">
<p>
Oui, bien sûr. Tu peux simplement te rendre sur <a href="https://pfadinamen.app" target="_blank">https://pfadinamen.app</a>.
Si ton navigateur le prend en charge, tu peux même installer le générateur comme une application sur ton écran d'accueil ou ton desktop.
</p>
<p>
N'oublie pas : Les enfants scouts préfèrent avoir des totems qui leur conviennent vraiment bien.
Tu devrais peut-être googler les totems générés pour t'assurer qu'ils n'ont pas de signification inattendue.
Tu peux également utiliser le générateur à titre d'inspiration uniquement.
</p>
<p>
Attention : L'intelligence artificielle ne sait pas si ses résultats sont considérés comme choquants.
Il essaie seulement d'imiter au mieux les totems des données d'entraînement.
Si un nom te choque personnellement, il est préférable de cliquer une nouvelle fois sur le bouton <i>Nochmaaal</i>.
</p>
<p>
<b>Amuse-toi à créer des totems !</b>
</p>
</div>
</article>
</div>
</div>
<div>
<input type="checkbox" id="modal-trigger-it" class="modal-trigger">
<label for="modal-trigger-it" class="modal-trigger-label">
<span class="desktop">Come funziona?</span>
<span class="mobile">IT</span>
</label>
<label for="modal-trigger-it" class="modal-background"></label>
<div data-termynal class="modal closeable" id="about-it" style="padding: 3rem 45px 15px" role="dialog" aria-labelledby="dialog-title-it" aria-describedby="modal-content-it">
<header data-ty-top>
<h1 id="dialog-title-it" class="desktop">Come funziona?</h1>
</header>
<label class="modal-close-trigger" for="modal-trigger-it"></label>
<article id="modal-content-it" class="modal-content">
<p>
Questo sito web genera nuovi totem utilizzando l'intelligenza artificiale.
</p>
<input type="checkbox" id="toggle-1-it" class="collapse-trigger" />
<label for="toggle-1-it" class="collapse-trigger-label">Che cos'è l'intelligenza artificiale?</label>
<div class="collapsible">
<p>
L'intelligenza artificiale è un software che imita il <b>comportamento umano</b>.
Ad esempio, un personaggio non giocante in un videogioco è un'intelligenza artificiale.
</p>
<p>
Una disciplina dell'intelligenza artificiale è il cosiddetto "<b>Machine Learning</b>".
Questo avviene quando un programma non ha regole di comportamento esplicite programmate, ma impara da molti esempi come comportarsi.
</p>
</div>
<input type="checkbox" id="toggle-2-it" class="collapse-trigger" />
<label for="toggle-2-it" class="collapse-trigger-label">Come funziona questo generatore?</label>
<div class="collapsible">
<p>
Questo generatore contiene un software Machine Learning chiamato <i>char-rnn</i>.
È stato addestrato utilizzando un elenco di <b>20000 totem</b> degli scout, JuBla e dell'YMCA.
In questo modo il programma ha imparato a conoscere l'aspetto dei totem.
</p>
<p>
I totem vengono generati <b>lettera per lettera</b>.
Il programma esamina le lettere già generate e calcola quali lettere si adattano alle successive e in che misura.
</p>
<p>
Ad esempio, se <i>Tarant...</i> è già stato generato, una <i>u</i> sarà probabilmente più adatta di una <i>x</i> o di una <i>P</i>.
Il generatore sceglie sempre in modo casuale la lettera successiva da scrivere tra tutte le lettere che conosce.
Ma più una lettera si adatta, più alta è la possibilità che venga scelta dal generatore.
</p>
</div>
<input type="checkbox" id="toggle-3-it" class="collapse-trigger" />
<label for="toggle-3-it" class="collapse-trigger-label">Chi l'ha creato?</label>
<div class="collapsible">
<p>
Questo generatore di totem è stato programmato da Carlo Beltrame / Cosinus di Gloggi a Zurigo.
</p>
<p>
Era un'idea che avevo da tempo, da quando avevo letto l'articolo "The Unreasonable Effectiveness of Recurrent Neural Networks" di Andrej Karpathy.
Secondo i miei test, circa tre su quattro dei totem generati sono completamente nuovi (cioè non presenti nei dati di allenamento).
</p>
<p>
Il programma è pubblicato come open source su GitHub.
Se avete un'idea per un miglioramento o una nuova funzionalità, potete contattarmi all'indirizzo <i>cosinus (at) gloggi (punto) ch</i> o su <a href="https://github.com/carlobeltrame/pfadinamen" target="_blank">GitHub</a>.
</p>
<p>
I significati dei totem visualizzati provengono da <a href="https://pfadinamen.ch" target="_blank">pfadinamen.ch</a>. Abbiamo l'amichevole permesso dell'autore di mostrarli in questa pagina. Se avete un significato specifico in mente e state cercando un nome scout adatto a voi, pfadinamen.ch è probabilmente il posto migliore dove trovarlo.
</p>
</div>
<input type="checkbox" id="toggle-4-it" class="collapse-trigger" />
<label for="toggle-4-it" class="collapse-trigger-label">Posso usarlo nel mio gruppo scout?</label>
<div class="collapsible">
<p>
Sì, certo. È sufficiente visitare il sito <a href="https://pfadinamen.app" target="_blank">https://pfadinamen.app</a>.
Se il vostro browser lo supporta, potete anche installare il generatore come un'app sulla vostra home screen o sul desktop.
</p>
<p>
Tenete presente: I ragazzi scout preferiscono ottenere totem che siano davvero adatti a loro.
Forse dovresti cercare su Google i nomi degli scout generati per assicurarti che non abbiano un significato inaspettato.
Oppure si può usare il generatore solo come ispirazione.
</p>
<p>
Attenzione: L'intelligenza artificiale non sa se i suoi risultati sono considerati offensivi.
Cerca solo di imitare al meglio i nomi dei ricognitori presenti nei dati di addestramento.
Se un nome vi offende personalmente, è meglio cliccare ancora una volta sul tasto <i>Nochmaaal</i>.
</p>
<p>
<b>Divertitevi a generare totem!</b>
</p>
</div>
</article>
</div>
</div>
<div>
<input type="checkbox" id="modal-trigger-en" class="modal-trigger">
<label for="modal-trigger-en" class="modal-trigger-label">
<span class="desktop">How does this work?</span>
<span class="mobile">EN</span>
</label>
<label for="modal-trigger-en" class="modal-background"></label>
<div data-termynal class="modal closeable" id="about-en" style="padding: 3rem 45px 15px" role="dialog" aria-labelledby="dialog-title-en" aria-describedby="modal-content-en">
<header data-ty-top>
<h1 id="dialog-title-en" class="desktop">How does this work?</h1>
</header>
<label class="modal-close-trigger" for="modal-trigger-en"></label>
<article id="modal-content-en" class="modal-content">
<p>
This website generates new scout names using artificial intelligence.
</p>
<input type="checkbox" id="toggle-1-en" class="collapse-trigger" />
<label for="toggle-1-en" class="collapse-trigger-label">What is artificial intelligence?</label>
<div class="collapsible">
<p>
Artificial intelligence is software which imitates <b>human behaviour</b>.
For example, an NPC in a video game is an artificial intelligence.
</p>
<p>
One discipline of artificial intelligence is the so-called "<b>Machine Learning</b>".
That is when a program does not have explicit behaviour rules programmed in, but rather learns from many examples how to behave.
</p>
</div>
<input type="checkbox" id="toggle-2-en" class="collapse-trigger" />
<label for="toggle-2-en" class="collapse-trigger-label">How does this generator work?</label>
<div class="collapsible">
<p>
This generator contains machine learning software called <i>char-rnn</i>.
It was trained using a list of <b>20000 scout names</b>, JuBla names and YMCA names.
This way the program has learned what scout names normally look like.
</p>
<p>
The scout names are generated <b>letter by letter</b>.
The program looks at the already generated letters, and calculates which letters fit next and how well.
</p>
<p>
For example, if <i>Tarant...</i> has already been generated, a <i>u</i> will probably fit better as the next letter than an <i>x</i> or a <i>P</i>.
The generator always randomly chooses the next letter it writes from all the letters it knows.
But the better a letter fits, the higher it's change of getting picked by the generator.
</p>
</div>
<input type="checkbox" id="toggle-3-en" class="collapse-trigger" />
<label for="toggle-3-en" class="collapse-trigger-label">Who created this?</label>
<div class="collapsible">
<p>
This scout name generator was programmed by Carlo Beltrame / Cosinus from Gloggi in Zürich.
</p>
<p>
It was an idea I have had for a long time, ever since I read the article "The Unreasonable Effectiveness of Recurrent Neural Networks" by Andrej Karpathy.
According to my tests, around three out of four of the generated scout names are completely new (i.e. not present in the training data).
</p>
<p>
The program is published as open source on GitHub.
If you have an idea for an improvement or new feature, you can contact me at <i>cosinus (at) gloggi (dot) ch</i> or on <a href="https://github.com/carlobeltrame/pfadinamen" target="_blank">GitHub</a>.
</p>
<p>
The displayed name meanings come from <a href="https://pfadinamen.ch" target="_blank">pfadinamen.ch</a>. We have the friendly permission of the author (Michael Albertin / Purzel) to show them on this page. If you have a specific meaning in mind and are looking for a fitting scout name, pfadinamen.ch is probably the best place to find one.
</p>
</div>
<input type="checkbox" id="toggle-4-en" class="collapse-trigger" />
<label for="toggle-4-en" class="collapse-trigger-label">May I use this in my scouts group?</label>
<div class="collapsible">
<p>
Yes, sure. You can simply visit <a href="https://pfadinamen.app" target="_blank">https://pfadinamen.app</a>.
If your browser supports it, you can even install the generator like an app to your home screen or desktop.
</p>
<p>
Keep in mind: Scout kids prefer to get scout names which really suit them well.
Maybe you should google the generated scout names to make sure they don't have any unexpected meaning.
Or you could use the generator for inspiration only.
</p>
<p>
Caution: The artificial intelligence is not aware of whether its output is considered offensive.
It only tries to imitate the scout names from the training data as best as it can.
If a name offends you personally, it's best to just click the <i>Nochmaaal</i> button once more.
</p>
<p>
<b>Have fun generating scout names!</b>
</p>
</div>
</article>
</div>
</div>
</footer>
</div>
<script src="./index.js" type="module"></script>
</body>
</html>