-
Notifications
You must be signed in to change notification settings - Fork 0
/
doc.html
140 lines (122 loc) · 5.66 KB
/
doc.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
<html>
<!-- Do not add doctype here, it breaks the css -->
<head>
<title>MicroDraw Trainable Segmentation doc</title>
<link
rel="icon"
sizes="any"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='LightGreen'/%3E%3C/svg%3E"
>
<style>
#menu {
float: right;
margin-right: 10px;
}
#menu img {
margin-left: 15px;
}
.mui {
font-family: "Montserrat", sans-serif;
font-size: 14px;
font-weight: 200;
}
#text-container{
max-width: 700px;
position: absolute;
left: 50%;
transform: translateX( -50% );
margin-top: 20px;
}
.doc {
font-family: "Roboto Mono", monospace;
font-size: 14px;
font-weight: 100;
line-height: 1.5rem;
text-indent: -0.5rem;
color: white;
text-align: left;
}
a {
color: white;
text-decoration: none;
cursor: pointer;
}
h1{
font-family: "Roboto Mono", monospace;
font-weight: 500;
}
img.button {
width: 0.9rem;
height: 0.9rem;
margin: 8px 2px;
vertical-align: middle;
cursor: pointer;
}
img.button:hover {
opacity: 0.5;
}
img.icon {
width: 1rem;
height: 1rem;
margin: 4px 2px;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<div id="header">
<!-- Top-right menu bar -->
<div id="menu">
<img id="doc" class="button" title="documentation" src="img/doc.svg"/>
<a href="https://github.com/neuroanatomy/trainable_segmentation/issues" target="_blank"><img id="bug" class="button" title="report a bug" src="img/bug.svg"/></a>
<a href="https://github.com/neuroanatomy/trainable_segmentation" target="_blank"><img id="github" class="button" title="join our github project" style="width:15px;height:15px" src="img/github.svg"/></a>
</div>
<!-- Left-top logo -->
<div style="display:inline-block;margin:10px">
<a href="/" style="text-decoration:none">
<span style="font-family: 'Montserrat', sans-serif;color:white;font-size:24px">MicroDraw Trainable Segmentation</span>
</a>
</div>
</div>
<!-- Documentation -->
<div id="text-container" style="display: flex">
<div class="doc">
<h1>Documentation</h1>
<p>
<b>MicroDraw URL.</b> Provide the link to your MicroDraw project and the slice where you do the segmentations. You can segment in one slice a few regions that you consider helpful for the classifier to train on your data, and you can iteratively modify your segmentation.
</p>
<p>
<b>Token.</b> Provide your access token for the MicroDraw project. Log into MicroDraw and go to <a href="https://microdraw.pasteur.fr/token" target="_blank">https://microdraw.pasteur.fr/token</a>. Your token will be valid for 24h.
</p>
<p>
<b>Send to MicroDraw.</b> Sends the resulting segmentation from the random forest classifier back to your MicroDraw project.
</p>
<img style="max-width:700px;padding-top:30px;padding-bottom:3px;padding-right:25px;" src="https://raw.githubusercontent.com/neuroanatomy/trainable_segmentation/master/img/MDrandomForest_fig1_dark.png" alt=""/>
<p style="padding-left:26px;padding-right:26px;font-size:12px;text-indent: 0rem;">
<b>MicroDraw Trainable Segmentation interface & workflow.</b> Provide the link to your MicroDraw project with the segmentations and your access token. Edit your segmentations and iterate until you are happy. Then send the output segmentation back to MicroDraw. <br />
</p>
<img style="max-width:700px;padding-top:30px;padding-bottom:3px;padding-left:25px;padding-right:25px;" src="https://raw.githubusercontent.com/neuroanatomy/trainable_segmentation/master/img/MDrandomForest_fig2_dark.png" alt=""/>
<p style="padding-left:26px;padding-right:26px;font-size:12px;text-indent: 0rem;">
<b>MicroDraw Trainable Segmentation viewer.</b> The slice from MicroDraw together with its original segmentation. The output from the random forest segmentation.<br />
</p>
<img style="max-width:700px;padding-top:30px;padding-bottom:3px;padding-left:25px;padding-right:25px;" src="https://raw.githubusercontent.com/neuroanatomy/trainable_segmentation/master/img/MDrandomForest_fig3_dark.png" alt=""/>
<p style="padding-left:26px;padding-right:26px;font-size:12px;text-indent: 0rem;">
<b>Segmentation result on MicroDraw.</b> Once you are happy, send the segmentations back to MicroDraw. This will give you a mask like shown in this image.<br /><br /><br />
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- <script>window.jQuery || document.write('<script src="http://localhost/libs/jquery/3.1.1/jquery.min.js"><\/script>')</script> -->
<script src="https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.js"></script>
<!-- <script>window.MUI || document.write('<script src="http://localhost/muijs/mui.js"><\/script>')</script> -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.css" />
<!-- <link rel="stylesheet" type="text/css" href="http://localhost/muijs/mui.css" /> -->
<link rel="stylesheet" type="text/css" href="MDrandomforest.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet" />
<script>
initUI(MUI);
</script>
</body>
</html>