-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
157 lines (142 loc) · 7.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>warping-machine</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="src/index.css">
<link rel="stylesheet" type="text/css" href="src/bar-graph.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-image.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/umap-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/scatter-gl.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<!-- for training, TM style -->
<script src="https://unpkg.com/browse/[email protected]/seedrandom.min.js"></script>
<!-- hash64 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<!-- facets, polymer glue code -->
<!-- polymer, for facets, see https://github.com/PAIR-code/what-if-tool/issues/7#issuecomment-514660444 -->
<script>
window.addEventListener('WebComponentsReady', function() {
var link = document.createElement('link');
link.rel = "import";
link.href = "./src/facets-jupyter.html";
link.onload = function() {
console.log('> facets tag loaded');
};
document.head.appendChild(link);
});
</script>
<script src="./src/webcomponents-lite.js"></script>
<script>
window.module = {exports: {}}; // hack for prando umd not working
</script>
<script src="https://unpkg.com/[email protected]/dist/Prando.umd.js"></script>
<div>
<div style="margin: 10px; border-radius: 10px; box-shadow: 0px 2px 2px rgba(0,0,0,0.20); background: rgb(229,119, 1); padding: 20px;">
<h1><a href="/">questionable-machine</a></h1>
</div>
<div class="VerticalSection" style="display: flex; flex-direction: row;">
<div class="Panel">
<div class="Panel-content">
<h2>1. Training dataset</h2>
<div class="Panel-text">First, load the project that you used to create your model in <a target="_blank" href="https://teachablemachine.withgoogle.com/train/image">Teachable Machine</a>.</div>
</div>
<div class="Panel-actions">
<div class="Status" id="training-status"></div>
<div class="File Button">
<div class="File-caption">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6H20C21.1 6 22 6.9 22 8V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18L2.01 6C2.01 4.9 2.9 4 4 4H10L12 6ZM4 8V18H20V8H4Z" fill="#888"></path>
</svg>
Open training project
</div>
<input id="training-zip-input" class="fileList" type="file" accept="application/zip">
</div>
<a class="ExampleLink" href="/data/training-project.zip"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12.17L15.59 9.59L17 11L12 16L7 11L8.41 9.59L11 12.17V4H13V12.17ZM6 15H4V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V15H18V18H6V15Z" fill="#888"></path>
</svg>
<span>Download example</span>
</a>
</div>
</div>
<div class="Panel">
<div class="Panel-content">
<h2>2. Image model</h2>
<div class="Panel-text">Then, load the image model you created in <a target="_blank" href="https://teachablemachine.withgoogle.com/train/image">Teachable Machine</a>. This only accepts zip files uploaded locally.</div>
</div>
<div class="Panel-actions">
<div class="Status" id="model-status"></div>
<div class="File Button">
<div class="File-caption">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6H20C21.1 6 22 6.9 22 8V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18L2.01 6C2.01 4.9 2.9 4 4 4H10L12 6ZM4 8V18H20V8H4Z" fill="#888"></path>
</svg>
Open model.zip
</div>
<input id="model-zip-input" class="fileList" type="file" accept="application/zip">
</div>
<a class="ExampleLink" href="/data/model.zip"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12.17L15.59 9.59L17 11L12 16L7 11L8.41 9.59L11 12.17V4H13V12.17ZM6 15H4V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V15H18V18H6V15Z" fill="#888"></path>
</svg>
<span>Download example</span>
</a>
</div>
</div>
<div class="Panel">
<div class="Panel-content">
<h2>3. Concepts dataset</h2>
<div class="Panel-text">Next, load a project from <a target="_blank" href="https://teachablemachine.withgoogle.com/train/image">Teachable Machine</a> that labels concepts where you want to explore bias in your model.</div>
</div>
<div class="Panel-actions">
<div class="Status" id="concepts-status"></div>
<div class="File Button">
<div class="File-caption">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6H20C21.1 6 22 6.9 22 8V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18L2.01 6C2.01 4.9 2.9 4 4 4H10L12 6ZM4 8V18H20V8H4Z" fill="#888"></path>
</svg>
Open concepts project
</div>
<input id="concepts-zip-input" class="fileList" type="file" accept="application/zip">
</div>
<a class="ExampleLink" href="/data/concepts-project.zip">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12.17L15.59 9.59L17 11L12 16L7 11L8.41 9.59L11 12.17V4H13V12.17ZM6 15H4V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V15H18V18H6V15Z" fill="#888"></path>
</svg>
<span>Download example</span>
</a>
</div>
</div>
<div class="Panel">
<div class="Panel-content">
<h2>4. tcav!</h2>
<div class="Panel-text">...</div>
</div>
<div class="Panel-actions ButtonList">
<button disabled="disabled" id="tcav-button" class="Button">go</button>
</div>
</div>
</div>
<div>
<div class="Workspace" id="workspace"></div>
</div>
<div id="log"></div>
</div>
<script type="module">
import {create} from './src/bar-graph.js';
import {facets} from './src/facets.js';
import {main} from './src/index.js';
main({
facets: facets,
createBarGraph: create
});
</script>
</body>
</html>