-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
268 lines (214 loc) · 8.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- big fan of your favicon
Fan by kareemov CC BY from the Noun Project
https://thenounproject.com/term/fan/2123165 -->
<link rel="shortcut icon" type="image/png" href="bigfan.png"/>
<!-- let the styling commence -->
<style>
.jumbotron {
opacity: 0.8;
margin-bottom:1em;
min-height: 5em;
}
/* longer generated messages might need smaller font size */
#metaphorical {
font-size:4vw;
}
#footer {
position:absolute;
bottom:0;
left: 0;
color:#fff;
font-size: 0.8em;
line-height:1.1;
}
#footer a {
color:#fff;
}
.backstretch {
filter: brightness(40%);
}
</style>
<!-- make title your own -->
<title>What Does Q Do?</title>
</head>
<body>
<!-- where the action happens -->
<div class="jumbotron">
<p id="metaphorical" class="display-4 text-center">Everyone is Rolling out an AI Named Q</p>
<p>What the heck does it do? Can it really be better than the builder of gizmos for James Bond?</p>
</div>
<div id="main" class="container-fluid text-center">
<button type="button" class="btn btn-primary btn-lg" id="gimme">What Does Q Do?</button>
</div><!-- #main -->
<div id="footer" class="container-fluid text-center">
<p>
<!-- background image attribution -->
<a href="https://it.wikipedia.org/wiki/File:Q_(James_Bond).jpg">File:Q (James Bond).jpg</a> Wikimedia Commons image by DMarx22 and pretty much copytighted. Invoking fair use! Parody!<br />->
<!-- code credit, thanks for keeping -->
code by <a href="http://cog.dog/"> @cogdog</a> and is <a href="https://github.com/cogdog/edtechaphors">available for forking</a>
</p>
</div>
<!-- JavaScript libs
jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js" integrity="sha512-BmM0/BQlqh02wuK5Gz9yrbe7VyIVwOzD1o40yi1IsTjriX/NGF37NyXHfmFzIlMmoSIBXgqDiG1VNU6kB5dBbA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.1.18/jquery.backstretch.min.js" integrity="sha512-bXc1hnpHIf7iKIkKlTX4x0A0zwTiD/FjGTy7rxUERPZIkHgznXrN/2qipZuKp/M3MIcVIdjF4siFugoIc2fL0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// backstrech the background image -->
$.backstretch("background.jpg");
// general purpose function to return a random index to input array
function random(array) {
return Math.floor(Math.random() * array.length)
}
// Replaces an HTML href with the link text followed by URL
// to make tweetable for array elements that have links in them
function href2text(str) {
// pattern for matching href
let regexpHref = /<a[^>]+href=\"(.*?)\"[^>]*>(.*?)<\/a>/gi;
// get matches
let match = regexpHref.exec(str);
if (match) {
// get the replacement
do {
replacement = `${match[2]} ${match[1]}`;
} while((match = regexpHref.exec(str)) !== null);
// replace the match string with the replacement
return( str.replace(regexpHref, replacement));
} else {
return (str);
}
}
// generate the link for a tweet this button
// var chirp: the message
// var bird: twitter name to credit
// var birdsong: name for this kind of generators
// Blame/Credit Stephen Downes https://www.downes.ca/post/71841
function tweet_it_like_a_bluebird( chirp, bird, birdsong ) {
$('#birdcage').html('<a href="https://twitter.com/intent/tweet?url=' + encodeURI(window.location.href) +'&text=' + encodeURIComponent('Another generated ' + birdsong + '\n\n' + href2text(chirp.replace(/(<([^>]+)>)/gi, "")) + '\n\nBlame ' + bird + ' for') + '" target="_blank"><img src="tweet.png" alt="Tweet"></a>');
}
/* All of the stuff to be randomized is created as arrays.
Create more arrays to create different mixes of things to be generated.
If a single quote, a apostrophe needed, enter as
*/
// arrays of acts of creativity
let platforms = [
'TensorFlow',
'Microsoft Azure',
'Rainbird',
'Infosys Nia',
'Wipro HOLMES',
'Dialogflow',
'Premonition',
'Ayasdi',
'MindMeld',
'Meya',
'KAI',
'Salesforce Einstein',
'Pega',
'RapidMiner',
'Anaconda Enterprise',
'NVIDIA',
'SuperAnnotate',
'IBM Watson'
];
// one character
let how = [
'autonomous',
'overfitting',
'bias',
'model collapse',
'zero-shot learning',
'heuristic',
'principal component analysis',
'backpropagation'
];
// another character
let thing = [
'backward chaining',
'bounding box',
'chatbot',
'corpus',
'agi',
'copilot',
'embodied agent',
'moat',
'token',
'embedding',
'variational autoencoder',
'activation function',
'batch normalization',
'independent component analysis',
'nanobot'
];
// a location
let bigs = [
'cognitive computing',
'entity annotation',
'entity extraction',
'hyperparameter',
'constitutional ai',
'convolutional neural network',
'model',
'generative adversarial network ',
'transformer',
'neuromorphic computing',
'sentiment analysis',
'k-nearest neighbor',
'naive bayes classifier'
];
/* Fun random names for the buttons, edit or add more */
let button_names = [
'Try Again',
'You Think You Are Clever',
'Do it Again',
'Do not click that pen',
'Too easy, redo!'
];
// generate the stuff
// lifted somewhat from https://glitch.com/~spark-chipmunk
function generate() {
/* create different ways of outputting a combination of arrays above.
Each element includes all of the text in backticks (not single quotes!)
and use the structure ${arrayname[random(arrayname)]} to insert a random
item from a specified array.
The more you add here the more varied will be the responses.
>${first[random(first)]}
*/
let options = [
`Need I remind you, ${platforms[random(platforms)]}, that you have a license to ${bigs[random(bigs)]}, not to break the ${thing[random(thing)]}.`,
`I can do more damage on my ${bigs[random(bigs)]} sitting in my pajamas before my first cup of ${how[random(how)]} than ${platforms[random(platforms)]} can do with ${thing[random(thing)]} in the field.`,
`Don’t touch ${thing[random(thing)]}! That’s my ${bigs[random(bigs)]}.`,
`I answer directly to ${platforms[random(platforms)]}. I also have a ${bigs[random(bigs)]} and two cats to feed.`,
`That is a ${bigs[random(bigs)]}, guaranteed never to wake up anybody who uses ${thing[random(thing)]} or tries to ${how[random(how)]}`,
`Now, pay attention, ${platforms[random(platforms)]}. I’ve always tried to teach you two things. First, never let them see ${thing[random(thing)]}. (And the second?) Always have a ${bigs[random(bigs)]}`,
`It’s called ${how[random(how)]}, so get used to it.`,
]
// generate it!
var generated = options[random(options)];
// update the metaphor
$('#metaphorical').html('<p>' + generated + '<br /><span id="birdcage"></span></p>');
// add the teet this button, change the tweeted name as needed (if you must)
// and provide the name for the kind of thing generated
tweet_it_like_a_bluebird( generated, '@cogdog', 'Randomized Word Analogy');
}
// set up the generate button
$(document).ready(function(){
$( "#gimme" ).click(function() {
// Generate a new thing
generate();
// make the button name random too
$("#gimme").html(button_names[random(button_names)]);
});
});//ready
</script>
</body>
</html>