Skip to content

Instantly share code, notes, and snippets.

@davidbau

davidbau/fooling.html

Created February 14, 2019 06:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidbau/4ede892760f33728508aa3ce9a222196 to your computer and use it in GitHub Desktop.
Save davidbau/4ede892760f33728508aa3ce9a222196 to your computer and use it in GitHub Desktop.
Download ZIP
an example vue HTML file that displays images and metadata
Raw
fooling.html
<!DOCTYPE html>
<html>
<!-- an example vue HTML file that displays images and metadata -->
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"
integrity="sha256-CMMTrj5gGwOAXBeFi7kNokqowkzbeL8ydAJy39ewjkQ="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.js"
integrity="sha256-qwbDmNVLiCqkqRBpF46q5bjYH11j5cd+K+Y6D3/ja28="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.thumb {
display: inline-block; width: 200px;
border: 1px dashed black;
margin: 3px;
padding: 3px;
}
.thumb a {
display: block;
text-align: center;
}
.thumb img {
max-width: 192px;
}
</style>
</head>
<body>
<div id="app" v-if="cases" class="container-fluid">
<h3>{{ filename }}</h3>
<div v-for="c in cases" class="thumb">
<div>This image has true label <b>{{ c.trueclassname }}</b>
and was predicted as <b>{{ c.predclassname }}</b>
and then fooled to <b>{{ c.foolclassname }}</b>
resistance {{ c.foolpred_resistance | fixed(4) }}
</div>
<a :href="'../../../' + c.truefilename"
><img :src="'../../../' + c.truefilename"></a>
<a :href="'../../../' + c.foolfilename"
><img :src="'../../../' + c.foolfilename"></a>
</div>
</div><!--app-->
</body>
<script>
var theapp = new Vue({
el: '#app',
data: {
filename: window.location.pathname.replace(/^.*\//, ''),
cases: null
},
created: function() {
var self = this;
$.getJSON('./data.json' +
'?' + Math.random(), function(d) {
self.cases = d;
}, 'html');
},
filters: {
fixed: function(value, digits, truncate) {
if (typeof value != 'number') return value;
var fixed = value.toFixed(digits);
return truncate ? +fixed : fixed;
}
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment