generated from CMU-Vis-2021/a3-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
363 lines (348 loc) · 31.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_io//favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_io//favicon-16x16.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Insightful Saliency Maps</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://d3js.org/d3.v6.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container" id="top">
<h1>In<span style="font-style: italic;">sight</span>ful Saliency Maps</h1>
<nav>
<button id = "openTab1" onclick = "changeTab(this,'tab1')" class = "active">Stylize an Image</button>
<button id = "openTab2" onclick = "changeTab(this,'tab2')">Saliency Similarity</button>
<button id = "openTab4" onclick = "changeTab(this,'tab4')">Model Comparison</button>
<button id = "openTab3" onclick = "changeTab(this,'tab3')">Explain an Image</button>
</nav>
<div id = "tab1">
<h2>Make your own stylized image. See what the AI predicts. Is it biased towards texture or shape?</h2>
<div class = "flex">
<div class = "flex-inner step">
<label for="shape"><span class = "number">1</span>Choose a shape:</label>
<span class = "select">
<select class = "standard-select" name="shape" id="shapeselect0" onchange="firstIputDone()">
<option value="-1" selected disabled hidden>Select choice</option>
<option value="dog">Dog</option>
<option value="bear">Bear</option>
</select>
</span>
<div id = "tab1-input2" class = "disabled">
<label for="texture"><span class = "number">2</span>Choose a texture:</label>
<span class = "select">
<select disabled class = "standard-select" name="texture" id="textureselect0" onchange="stylizeImg()">
<option value="-1" selected disabled hidden>Select choice</option>
<option value="bikes">Bicycle</option>
<option value="tiger">Tiger</option>
<option value="trucks">Trucks</option>
<option value="zebra">Zebra</option>
<option value="elephant">Elephant</option>
</select>
</span>
</div>
<div class="flex disabled" id="stylized-img-div1">
<img alt= "Animal with texture over it deforming the base image underneathe." id="stylized-img-ss1" style="position: relative; margin: 0px; max-width: 300px;">
</div>
<div id="sliderTab1" style="display: none; padding-top: 10px; text-align: center;">
<input name = "opacity" type="range" id="sliderOpacity1" min="0" max="100" value="40" class="sliders" oninput='changeOpacity(slider = document.querySelector("#sliderOpacity1"), imgchoice = document.querySelector("#xrai-img1"), text = document.getElementById("numOpacity1"))' /> <span id="numOpacity1">40</span><label for = "sliderOpacity1">% opacity</label>
</div>
<div id="checkboxoverlap" style="text-align: center; display: none; padding-top: 10px;">
<img id="xraiscale" src="./assets/heatmaps/scale.png" style="width: 50%; padding: 5px; display: none;" alt = "heatmap from black to yellow">
<input type="checkbox" name="tab1List" value="unchecked" id="tab1xrai" onchange="xraicheck()"/><label for = "tab1xrai">Overlap regions important to the AI</label>
</div>
</div>
<div class="flex-inner step disabled" id = "tab1-input3">
<label for="graph"><span class = "number">3</span>AI prediction for image class:</label>
<div id="d3-bar-tab1"></div>
</div>
</div>
<br>
<br>
<br>
<!-- <button id = "detailsButton" class = "blue" onmouseenter="hoverBtn()" onmouseleave="leaveBtn()" onclick="location.href='#details'; includeHTML();">Learn about In<span style="font-style: italic;">sight</span>ful Saliency Maps</button>
<div id="details">
<button id = "topButton" class = "blue" onmouseenter="hoverBtn()" onmouseleave="leaveBtn()" onclick="location.href='#top';">Go to top</button>
<h1>About In<span style="font-style: italic;">sight</span>ful Saliency Maps</h1>
<div w3-include-html="./content.html"></div>
</div> -->
</div>
<div id = "tab2" class = "hidden">
<h2>Explore the saliency maps of stylized images. See how they compare to the saliency map of the original, un-stylized image.</h2>
<p class = "explain">A saliency map identifies what regions in an image are the most important to a neural network's prediciton. XRAI is a saliency method that uses regions and colors to interpret how a computer understands an image. Typically, the image is split into a <b><span class = "gradient rect"></span>gradient of colors</b> that represent what features in the image are <b><span class = "box yellow"></span>most important to identifying the class of the image</b> all the way to what features are <b><span class = "box purple"></span>least important</b> to identifying the class of the image.</p>
<div class="flex">
<div class = "flex-inner step" id = "stylized-saliency">
<p style="text-align: center;"> <span class = "number">1</span><b> Choose a stylized image:</b></p>
<div class="stylized-select" style="padding: 10px; text-align: center;">
<select class = "standard-select" name="stylized" id="stylized-ss" onchange="ssimg()" style="width:30%;">
<option value="-1" selected disabled hidden>Select choice</option>
<option value="dog-stylized-tiger">Dog x Tiger</option>
<option value="dog-stylized-zebra">Dog x Zebra</option>
<option value="dog-stylized-trucks">Dog x Trucks</option>
<option value="dog-stylized-bikes">Dog x Bikes</option>
<option value="dog-stylized-elephant">Dog x Elephant</option>
<option value="bear-stylized-trucks">Bear x Trucks</option>
<option value="bear-stylized-tiger">Bear x Tiger</option>
<option value="bear-stylized-zebra">Bear x Zebra</option>
<option value="bear-stylized-bikes">Bear x Bikes</option>
<option value="bear-stylized-elephant">Bear x Elephant</option>
</select>
</div>
<div id = "disabled1-tab2" class = "disabled">
<p style="text-align: center;"> Prediction: <b><span id="AIpred"> </span></b>; <span id="AIconf"> </span>% confidence </p>
<div class="flex" id="stylized-img-div">
<img alt = "stylexed animal with texture over top" id="stylized-img-ss">
</div>
<div id="sliders" style="display: none; text-align: center;">
<input name = "slider1" type="range" id="sliderOpacity" min="0" max="100" value="40" class="sliders" oninput="changeOpacity()" /> <span id="numOpacity">40</span><label for = "sliderOpacity">%</label>
</div>
<div style="text-align: center;">
<input type="radio" class= "xraiList" name="xraiList" value="show" id="xrai" onchange="xrairadio()" checked><label for = "xrai">Show XRAI</label>
<input type="radio" class= "xraiList" name="xraiList" value="hide" id="xrai2" onchange="xrairadio()"><label for = "xrai2">Hide XRAI</label>
<input type="radio" class= "xraiList" name="xraiList" value="overlap" id="overlap" onchange="xraioverlap()"><label for = "overlap">Overlap XRAI</label>
</div>
</div>
</div>
<div class = "flex-inner step disabled" id = "original-saliency" style="text-align: center;">
<p> <b> Original image: </b> </p>
<div class="original-select" style="padding: 10px;">
<select disabled class = "standard-select" name="original" id="original-ss" onchange="ogimg()" style="width:30%;">
<option value="-1" selected disabled hidden>Select stylized image</option>
<option value="dog" disabled>Dog</option>
<!-- <option value="elephant" disabled>Elephant</option> -->
<option value="bear" disabled>Bear</option>
</select>
</div>
<p> Prediction: <b><span id="OgAIpred"> </span></b>; <span id="OgAIconf"> </span>% confidence</p>
<div class="flex" id="original-img-div">
<img alt = "animal with no texture on top of it" id="original-img-ss">
</div>
<div id="slidersOg" style="display: none;">
<input type="range" id="sliderOpacityOg" min="0" max="100" value="40" class="sliders" oninput='changeOpacity(slider = document.querySelector("#sliderOpacityOg"), imggchoice = document.querySelector("#xrai-og-img"), text = document.getElementById("numOpacityOg"))' /> <span id="numOpacityOg">40</span><label for = "sliderOpacityOg">%</label>
</div>
<input type="radio" class= "ogList" name="ogList" value="show" id="og1" onchange='xrairadio(document.getElementsByName("ogList"), query = ".flex #original-img-div", appendHTML = "<div class = \"img-label\" ><div><p>XRAI</p></div><img alt = \"heatmap of how computer identifies image overtop other heatmaps of different computer vision algorithms\" id=\"original-img-xrai\"></div>", originalHTML = "<img alt = \"original image of animal\" id=\"original-img-ss\">", sliders= document.getElementById("slidersOg"),opacityNum = document.querySelector("#sliderOpacityOg"))' checked><label for = "og1">Show XRAI</label>
<input type="radio" class= "ogList" name="ogList" value="hide" id="og2" onchange='xrairadio(document.getElementsByName("ogList"), query = ".flex #original-img-div", appendHTML = "<div class = \"img-label\" ><div><p>XRAI</p></div><img alt = \"heatmap of how computer identifies image\" id=\"original-img-xrai\"></div>", originalHTML = "<img alt = \"original image of animal\" id=\"original-img-ss\">", sliders= document.getElementById("slidersOg"), opacityNum = document.querySelector("#sliderOpacityOg"))'><label for = "og2">Hide XRAI</label>
<input type="radio" class= "ogList" name="ogList" value="overlap" id="og3" onchange='xraioverlap(document.getElementById("original-ss"), id="original-img-ss", query = ".flex #original-img-div", appendHTML = "<img alt = \"original image of animal\" id=\"original-img-ss\" style=\"position: relative;\"> <img alt = \"original image of animal\" id=\"xrai-og-img\" style=\"position: absolute; opacity: 40%\">", sliders = document.getElementById("slidersOg"), opacityNum = document.querySelector("#sliderOpacityOg"))'><label for = "og3">Overlap XRAI</label>
</div>
</div>
<div class="visualize-similarity" style="max-width: 1200px;">
<div id="salsim-div" style="display: none;">
<p> <b> Visualize the similarity between the two saliency maps. </b> </p>
<div class="flex">
<div class="flex-inner step" style="padding: 20px;">
<div style="text-align: center;">
<p>Intersection:</p>
</div>
<div id="sliders">
<input type="range" name = "deltaValue" id="sliderAlpha" min="0" max="20" step="5" value="15" class="sliders" oninput="changeAlpha()" /> <span id="numAlpha">15</span> <label for = "sliderAlpha">delta</label>
</div>
<img alt = "Result of two image spliced together. similar areas are shown while non-similar areas are blacked out" id="salsim-img" style="border: 0px; width: auto;margin: auto;"/>
</div>
<div class="flex-inner step" style="padding: 20px;">
<p>Comparison of Colors:</p>
<div id="sliders">
<input type="range" id="sliderK" min="2" max="7" step="1" value="6" class="sliders" oninput="changeK()" /> <span id="numK">6</span> <label for = "sliderK">colors</label>
</div>
<div class="flex">
<div class="flex-inner step">
<div id="salsim-pie1" style="padding: 5px;"> </div>
</div>
<div class="flex-inner step">
<div id="salsim-pie2" style="padding: 5px;"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="visualize-similarity" >
<p> <b> Compute the average saliency map</b> </p>
<div class="flex step">
<div class="flex-inner step">
<p id="average-title"> <span class = "number">1</span><b> Choose an Image Class: </b> </p>
<div class="average-select" style="padding: 10px;">
<select class = "standard-select" name="average-select" id="average-select" onchange="displayImgs()" style="width:70%;">
<option value="-1" selected disabled hidden>Select choice</option>
<option value="dog">Dog</option>
<!-- <option value="elephant">Elephant</option> -->
<option value="bear">Bear</option>
</select>
</div>
<p id="imageOptions" style="display: block;font-size: 18px;font-weight: bold;margin: 22px;"><span class = "number">2</span> Select the images below to include in the average: </p>
<div class="row" id="imageOptions rows" style="display: none;">
<div class="column">
<div class="card" id="img 1" name="none">
<img alt = "Animal stylized with a bike texture" id="imggrid 1" style="margin: 0px; padding: inherit;" onmouseenter="hoverImggrid(document.getElementById('imggrid 1'))" onmouseleave="leaveImggrid(document.getElementById('imggrid 1'))" onclick="addImg(document.getElementById('img 1'))" src="./assets/shapes/bear.jpg" >
<img alt = "undisplayed image" style="display: none;" id="imggrid 1 heatmap" src="./assets/shapes/bear.jpg">
</div>
</div>
<div class="column">
<div class="card" id="img 2" name="name">
<img alt = "Animal stylized with an elephant texture" id="imggrid 2" style="margin: 0px; padding: inherit;" onmouseenter="hoverImggrid(document.getElementById('imggrid 2'))" onmouseleave="leaveImggrid(document.getElementById('imggrid 2'))" onclick="addImg(document.getElementById('img 2'))" src="./assets/shapes/bear.jpg">
<img alt = "undisplayed image" style="display: none;" id="imggrid 2 heatmap" src="./assets/shapes/bear.jpg">
</div>
</div>
<div class="column">
<div class="card" name="none" id="img 3">
<img alt = "Animal stylized with an tiger fur texture" id="imggrid 3" style="margin: 0px; padding: inherit;" onmouseenter="hoverImggrid(document.getElementById('imggrid 3'))" onmouseleave="leaveImggrid(document.getElementById('imggrid 3'))" onclick="addImg(document.getElementById('img 3'))" src="./assets/shapes/bear.jpg">
<img alt = "undisplayed image" style="display: none;" id="imggrid 3 heatmap" src="./assets/shapes/bear.jpg">
</div>
</div>
<div class="column">
<div class="card" name="none" id="img 4">
<img alt = "Animal stylized with a truck texture" id="imggrid 4" style="margin: 0px; padding: inherit;" onmouseenter="hoverImggrid(document.getElementById('imggrid 4'))" onmouseleave="leaveImggrid(document.getElementById('imggrid 4'))" onclick="addImg(document.getElementById('img 4'))" src="./assets/shapes/bear.jpg">
<img alt = "undisplayed image" style="display: none;" id="imggrid 4 heatmap" src="./assets/shapes/bear.jpg">
</div>
</div>
<div class="column">
<div class="card" name="none" id="img 5">
<img alt = "Animal stylized with a zebra stripes texture" id="imggrid 5" style="margin: 0px; padding: inherit;" onmouseenter="hoverImggrid(document.getElementById('imggrid 5'))" onmouseleave="leaveImggrid(document.getElementById('imggrid 5'))" onclick="addImg(document.getElementById('img 5'))" src="./assets/shapes/bear.jpg">
<img alt = "undisplayed image" style="display: none;" id="imggrid 5 heatmap" src="./assets/shapes/bear.jpg">
</div>
</div>
</div>
<button style = "display: none; " id = "averageCompute imageOptions" class = "blue disableButtonWoraround" onmouseenter="hoverBtn()" onmouseleave="leaveBtn()" onclick="computeAvg();">Generate Average Saliency Map</button>
</div>
</div>
<div class="flex" style="padding-top: 40px;">
<div class="flex-inner step" id="canvasAvg" style="display: none;">
<p id="imageOptions" style="font-size: 18px; font-weight: bold;"> Average Saliency Map: </p>
<img style = "display:none" alt = "Shows layered heatmaps overtop each other. most algorithms identity the nose area as the most important in the image but vary in identifying other aspects." id="avgHeatmap">
</div>
<div class="flex-inner steos" id="ogHeatmap" style="display: none;">
<p id="imageOptions" style="font-size: 18px; font-weight: bold; margin-top: 0px;"> Original Saliency Map: </p>
<img alt = "Shows original heat map" id="ogheat" style="width: 200px; height: 200px;" src="./assets/shapes/bear.jpg">
</div>
</div>
</div>
</div>
<div id = "tab3" class = "hidden">
<div class = "flex">
<div class = "flex-inner step"><h2>Draw what the AI sees.<br>See how your perception compares to the AI.</h2></div>
<div class = "flex-inner gifTopper">
<img alt = "Result of two image spliced together. similar areas are shown while non-similar areas are blacked out" id = "canvasImg">
</div>
</div>
<p>The AI makes predictions based on regions it feels are important to identifying the image. Can you guess what places in this image the AI feels are the <b><span class = "box yellow"></span>most important</b> to identifying it?<br>What is <b><span class = "box orange"></span>important</b> and <b><span class = "box red"></span>somewhat important</b>? Finally, what is <b><span class = "box purple"></span>least important</b>?</p>
<div class = "step">
<h3> Draw on the image how you think a computer would classify it</h3>
<div class = "flex">
<div>
<canvas id="canvas" width="330" height="330" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<div class = "drawControls">
<h4>Select a color</h4>
<button class ="color-btn yellow active" onclick = "changeColorCanvas('yellow')">Yellow</button>
<button class ="color-btn orange" onclick = "changeColorCanvas('orange')">Orange</button>
<button class ="color-btn red" onclick = "changeColorCanvas('red')">Red</button>
<button class ="color-btn purple" onclick = "changeColorCanvas('purple')">Purple</button>
</div>
</div>
<div id = "d3-canvas-bar">
<h4>Percentage of pixels correct so far</h4>
<p><span class = "ai"></span>= Here's a hint! This is how the computer sees</p>
</div>
</div>
<div id = "answerCanvas">
<h3>Here's what the computer sees</h3>
<canvas id="canvas-compare" width="330" height="330" >
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<img id = "canvasImg-compare" src = "./assets/quiz/doberman-heat.png" style="display: none;" alt = "heatmap of doberman shows how an AI would classify the image. The head is the most important while nexk and body shape are second most important.">
<button id = "revealAnswerButton" class = "blue" onclick="revealAnswer(this)">I'm done! Show me how an AI sees this image</button>
</div>
</div>
<div id = "tab4" class = "hidden">
<h2>Compare accuracy of different models through saliency maps. Is there one that consistently performs better than others?</h2>
<div class="flex">
<div class="flex-inner step">
<p style="font-weight: bold; font-size: 18px;"><span class = "number">1</span>Select models to compare</p>
<div id="checkboxCompare" style="padding-top: 10px;">
<input type="checkbox" name="tab4Check1" value="unchecked inceptionv3" id="inceptionv3" onclick="modelCompare(document.getElementById('inceptionv3'))"><label for = "inceptionv3">Inception V3</label>
<input type="checkbox" name="tab4Check2" value="unchecked vgg16" id="vgg16" onclick="modelCompare(document.getElementById('vgg16'))"><label for = "vgg16">VGG 16</label>
<input type="checkbox" name="tab4Check3" value="unchecked convmixer" id="convmixer" onclick="modelCompare(document.getElementById('convmixer'))"><label for = "convmixer">ConvMixer</label>
</div>
<p style="font-size: 15px; padding-top: 10px;"><b>Comparison method:</b> Intersect XRAI</p>
<!-- <div id="radioCompare" style="text-align: center; padding-top: 10px;"> -->
<!-- <input type="radio" name="tab4Radio" value="show" id="showCompare" >Show XRAI -->
<!-- <input type="radio" name="tab4Radio" value="overlap" id="overlapCompare">Overlap XRAI -->
<!-- <input type="radio" name="tab4Radio" value="intersect" id="intersectCompare" checked><label for = "intersectCompare">Intersect XRAI</label> -->
<!-- <input type="radio" name="tab4Radio" value="average" id="averageCompare">Average XRAI -->
<!-- </div> -->
</div>
<div class="flex-inner step disabled" id = "tab4-dis-1">
<p style=" font-weight: bold; font-size: 18px; margin-top:0px;"><span class = "number">2</span>Select stylized image</p>
<div class="compare-select" style="padding: 10px;">
<select class = "standard-select" name="compare" id="compare-ss" onchange="intersectCompare()" style="width:100%;">
<option value="-1" selected disabled hidden>Select choice</option>
<option value="dog-stylized-tiger">Dog x Tiger</option>
<option value="dog-stylized-zebra">Dog x Zebra</option>
<option value="dog-stylized-trucks">Dog x Trucks</option>
<option value="dog-stylized-bikes">Dog x Bikes</option>
<option value="dog-stylized-elephant">Dog x Elephant</option>
<option value="bear-stylized-trucks">Bear x Trucks</option>
<option value="bear-stylized-tiger">Bear x Tiger</option>
<option value="bear-stylized-zebra">Bear x Zebra</option>
<option value="bear-stylized-bikes">Bear x Bikes</option>
<option value="bear-stylized-elephant">Bear x Elephant</option>
</select>
</div>
</div>
</div>
<p style="text-align: center;font-weight: bold; font-size: 20px" class = "disabled" id = "tab4-dis-2"> Model Comparison: </p>
<div class="flex" id="modelsCompare" style="text-align: center;">
<div class="flex-inner step" id="inceptionv3-compare" style="display: none; padding: 10px;">
<div style="text-align: center;">
<p>Inception V3 Intersection:</p>
</div>
<div id="sliders">
<input name= "delta2" type="range" id="sliderinceptionv3" min="0" max="20" step="5" value="15" class="sliders" oninput='changeAlpha(choiceVal = document.getElementById("compare-ss"), slider = document.querySelector("#sliderinceptionv3"), number = document.getElementById("numinceptionv3"), img = "#inceptionv3-img", model="inceptionv3")' /> <span id="numinceptionv3">15</span> <label for = "sliderinceptionv3">delta</label>
</div>
<img alt = "saliency of a bear image with a texture over it" id="inceptionv3-img" src="./assets/saliency-similarity/inceptionv3/bear-stylized-bikes-0.png" style="border: 0px; width: auto;"/>
</div>
<div class="flex-inner step" id="vgg16-compare" style="display: none; padding: 10px;">
<div style="text-align: center;">
<p>VGG 16 Intersection:</p>
</div>
<div id="sliders">
<input name= "delta3" type="range" id="slidervgg16" min="0" max="20" step="5" value="15" class="sliders" oninput='changeAlpha(choiceVal = document.getElementById("compare-ss"), slider = document.querySelector("#slidervgg16"), number = document.getElementById("numvgg16"), img = "#vgg16-img", model="vgg16")' /> <span id="numvgg16">15</span> <label for = "slidervgg16">delta</label>
</div>
<img alt = "saliency of a bear image with a texture over it" id="vgg16-img" src="./assets/saliency-similarity/inceptionv3/bear-stylized-bikes-0.png" style="border: 0px; width: auto;"/>
</div>
<div class="flex-inner step" id="convmixer-compare" style="display: none; padding: 10px;">
<div style="text-align: center;">
<p>ConvMixer Intersection:</p>
</div>
<div id="sliders">
<input name= "delta4" type="range" id="sliderconvmixer" min="0" max="20" step="5" value="15" class="sliders" oninput='changeAlpha(choiceVal = document.getElementById("compare-ss"), slider = document.querySelector("#sliderconvmixer"), number = document.getElementById("numconvmixer"), img = "#convmixer-img", model="convmixer")' /> <span id="numconvmixer">15</span> <label for = "sliderconvmixer">delta</label>
</div>
<img alt = "shows animal textured with bikes" id="convmixer-img" src="./assets/saliency-similarity/inceptionv3/bear-stylized-bikes-0.png" style="border: 0px; width: auto;"/>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/draw.js"></script>
<script type="text/javascript" src="./js/canvasBar.js"></script>
<script type="text/javascript" src="./js/predictions.js"></script>
<script type="text/javascript" src="./js/predictionBar.js"></script>
<script type="text/javascript" src="./js/compare.js"></script>
<script type="text/javascript" src="./js/hover.js"></script>
<script type="text/javascript" src="./js/sliders.js"></script>
<script type="text/javascript" src="./js/xrai.js"></script>
<script type="text/javascript" src="./js/stylize.js"></script>
<script type="text/javascript" src="./js/explain.js"></script>
<!-- <script type="text/javascript" src="./js/includeHTML.js"></script> -->
<script type="text/javascript" src="./js/piechartjson.js"></script>
<script type="text/javascript" src="./js/piechart.js"></script>
<script type="text/javascript" src="./js/averageSaliency.js"></script>
<script src="./opencv.js" type="text/javascript"></script>
</html>