-
Notifications
You must be signed in to change notification settings - Fork 6
/
viewer.htm
178 lines (144 loc) · 6.11 KB
/
viewer.htm
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
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<style>
td {
text-align: center;
}
.main td {
width:16%;
cursor: pointer;
}
.main img {
width:100%
}
.main video {
width:100%
}
img {
image-rendering: pixelated;
}
body {
min-width:1000px
}
</style>
<div style="width:100%;height:80px;margin-left:5px;">
<a href="https://aimi.stanford.edu/">
<img style="float:right;height:50px" src="assets/aimi-logo.png" />
<img style="float:right;height:50px" src="assets/stanford-logo2.png" />
</a>
<b>Study ID:</b> <span id="study"></span><br>
<b>Demographics:</b> <span id="demo"></span><br>
<b>Model Prediction:</b> <span id="pred"></span><br>
<div style="max-width:600px;">
The pediction explanations below are generated to explain the prediction of this
single pathology by looking at what the neural network used to make the prediction.</div>
</div>
<hr>
<table>
<tr class="main">
<td class="option">Input image <br><small style="color:white">a</small><img id="image" style="width:100%"/></td>
<td class="option">Image Gradient
<br><small><a class="explain" data-toggle="popover" data-placement="bottom" title="Image Gradient" data-content="This method looks at the impact of pixels on the prediction. This method ranks pixels and the top 95% of influential pixels are shown in red.">(What is this?)</a></small>
<img id="grad" style="width:100%" /></td>
<td class="option">Guided Backprop
<br><small><a class="explain" data-toggle="popover" data-placement="bottom" title="Guided Backprop" data-content="This method is similar to the Image Gradient method and offers another view into why the prediction was made. This method ranks pixels and the top 95% of influential pixels are shown in red.">(What is this?)</a></small>
<img id="guided" style="width:100%"/></td>
<td class="option">Integrated Gradients
<br><small><a class="explain" data-toggle="popover" data-placement="bottom" title="Integrated Gradients" data-content="This method is similar to the Image Gradient method and offers another view into why the prediction was made. This method ranks pixels and the top 95% of influential pixels are shown in red.">(What is this?)</a></small>
<img id="integrated" style="width:100%" /></td>
<td class="option">Latent Shift 2D
<br><small><a class="explain" data-toggle="popover" data-placement="bottom" title="Latent Shift 2D" data-content="This method looks at what pixels change when the image is simulated to have more or less of the specific pathology. This is a 2D projection of this information. This method ranks pixels and the top 95% of influential pixels are shown in red.">(What is this?)</a></small>
<img id="latentshift-max" style="width:100%" /></td>
<td class="option">Latent Shift
<br><small><a class="explain" data-toggle="popover" data-placement="bottom" title="Latent Shift Video" data-content="This method looks at what pixels change when the image is simulated to have more or less of the specific pathology. Each frame of this video is simulated. The video starts with the pathology removed and proceeds to add the pathology before reversing and starting the loop over again.">(What is this?)</a></small>
<video style="width:100%" autoplay loop muted>
<source id="latentshift" type="video/mp4">
Your browser does not support the video tag.
</video></td>
</tr>
</table>
<hr>
<div id="viewer">
Click to view an image<Br>
</div>
<hr>
<center>Joseph Paul Cohen 2021</center>
<script>
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
};
var imgb = getUrlParameter("imgb")
if (imgb){
img = atob(imgb)
}else{
img = getUrlParameter("img")
}
var trial = getUrlParameter("trial")
$("#study").text("Loading...");
$.getJSON("images/" + img + ".json", function( data ) {
console.log(data);
thisdata = data
if (trial == 0){
$("#latentshift-max").parent().css("display", "none");
$("#latentshift").parent().parent().css("display", "none");
}
if (trial == 1){
$("#grad").parent().css("display", "none");
$("#integrated").parent().css("display", "none");
$("#guided").parent().css("display", "none");
}
$("#image")[0].src = data.attribs["image"]
$("#grad")[0].src = data.attribs["grad"]
$("#integrated")[0].src = data.attribs["integrated"]
$("#guided")[0].src = data.attribs["guided"]
$("#latentshift-max")[0].src = data.attribs["latentshift-max"]
$("#latentshift")[0].src = data.attribs["latentshift"]
$("#latentshift").parent()[0].load()
if (getUrlParameter("id")){
$("#study").text(getUrlParameter("id"))
}else{
$("#study").text(data["id"])
}
$("#pred").text("p(" + data["target"] + ") = " + ((parseFloat(data["pred"])*100).toFixed(0)) + "%")
if ("Sex" in data["source"]){
sex = data["source"]["Sex"]
}else if ("PatientSex_DICOM" in data["source"]){
sex = data["source"]["PatientSex_DICOM"]
}else{
sex = "Unknown"
}
if ("Age" in data["source"]){
age = data["source"]["Age"]
}else if ("PatientBirth" in data["source"]){
age = 2010-data["source"]["PatientBirth"] + "(Approx)"
}else{
age = "Unknown"
}
$("#demo").text("Sex:" + sex + ", Age:" + age)
}).fail(function() {
$("#study").text("Failed loading this study!!!!");
});
$(".option").click(function(){
$("#viewer").empty()
thing = $(this).clone()
thing = thing.css("width","1000px")
$("#viewer").append(thing)
$('[data-toggle="popover"]').popover()
});
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>