/
demo.html
261 lines (252 loc) · 14.5 KB
/
demo.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
<!DOCTYPE html>
<html lang="en" class="gr__materializecss_com">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-159559852-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-159559852-2');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WQBQJWP');</script>
<!-- End Google Tag Manager -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DJL Demo</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/theme/dracula.min.css">
<link href="https://djl.ai/website/css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
<link rel="shortcut icon" type="image/x-icon" href="https://djl.ai/website/img/favicon.png"/>
<link rel="shortcut icon" sizes="96x96" href="https://djl.ai/website/img/favicon.png">
<link rel="apple-touch-icon" href="https://djl.ai/website/img/favicon.png">
</head>
<body data-gr-c-s-loaded="true">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WQBQJWP"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="white" role="navigation">
<div class="nav-wrapper">
<div class="row">
<a href="https://djl.ai" class="logo" id="logo-container">
<img src="https://djl.ai/website/img/djl-middle.png">
</a>
<ul class="right col s10 hide-on-med-and-down">
<li><a href="https://github.com/awslabs/djl">GitHub</a></li>
<li><a href="https://docs.djl.ai/">Documentation</a></li>
<li><a href="https://djl.ai/website/javadoc.html">JavaDoc</a></li>
<li><a href="https://djl.ai/website/demo.html">Demos</a></li>
<li><a href="https://djl.ai/website/blog.html">Blogs</a></li>
<li><a href="https://docs.djl.ai/jupyter/tutorial/index.html">Tutorial</a></li>
<li><a href="https://github.com/awslabs/djl/tree/master/examples">Examples</a></li>
<li><a href="https://deepjavalibrary.slack.com/join/shared_invite/zt-ar91gjkz-qbXhr1l~LFGEIEeGBibT7w#/">Slack</a></li>
<li><a href="https://d2l.djl.ai">D2L-Java Book</a></li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li><a href="https://github.com/awslabs/djl">GitHub</a></li>
<li><a href="https://docs.djl.ai/">Documentation</a></li>
<li><a href="https://djl.ai/website/javadoc.html">JavaDoc</a></li>
<li><a href="https://djl.ai/website/demo.html">Demos</a></li>
<li><a href="https://djl.ai/website/blog.html">Blogs</a></li>
<li><a href="https://docs.djl.ai/jupyter/tutorial/index.html">Tutorial</a></li>
<li><a href="https://github.com/awslabs/djl/tree/master/examples">Examples</a></li>
<li><a href="https://deepjavalibrary.slack.com/join/shared_invite/zt-ar91gjkz-qbXhr1l~LFGEIEeGBibT7w#/">Slack</a></li>
<li><a href="https://d2l.djl.ai">D2L-Java Book</a></li>
</ul>
<a data-target="nav-mobile"
class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</div>
</nav>
<div class="blue-grey lighten-1">
<div class="container white">
<div class="section">
<h1 class="header center light-blue-text text-accent-2">DJL Live Demos</h1>
<div class="row center">
<h5 class="header col s12 light">Experience Java to solve your DL problem in a simple way.</h5>
</div>
<div class="row center">
<a href="https://github.com/aws-samples/djl-demo"
class="btn-large waves-effect waves-light light-blue accent-2">Checkout our repository</a>
<a href="https://demodocs.djl.ai/"
class="btn-large waves-effect waves-light light-blue accent-2">Documentation</a>
</div>
</div>
</div>
<div class="container hide-on-med-and-down">
<div class="card white z-depth-5">
<div class="section">
<div class="row">
<h3 class="center" id="jshell">Use online JShell to try out NDArray</h3>
<ul class="tabs black col s10 offset-s1">
<li class="tab col s3"><a href="#creation">Creation</a></li>
<li class="tab col s3"><a href="#math">Math Operation</a></li>
<li class="tab col s3"><a href="#manipulation">Data Manipulation</a></li>
<li class="tab col s3"><a href="#more">Learn More</a></li>
</ul>
<div id="creation" class="col s8 offset-s2">
<p><b>var array = manager.ones(new Shape(1,3,2))</b> to create a NDArray with shape 1,3,2</p>
<p><b>var array = manager.randomUniform(0, 1, new Shape(1, 1, 4))</b> to create a random uniform
NDArray
</p>
</div>
<div id="math" class="col s8 offset-s2">
<p><b>NDArray nd = manager.arange(1, 10).reshape(3, 3)</b> to create a NDArray and reshape to
3x3</p>
<p><b>nd = nd.transpose()</b> to transpose the NDArray</p>
<p><b>nd = nd.add(10)</b> add 10 to final result</p>
</div>
<div id="manipulation" class="col s8 offset-s2">
<p><b>NDArray nd = manager.arange(5, 14)</b> to create a NDArray from 5 to 14</p>
<p><b>nd = nd.get(nd.gte(10))</b> filter the value that are >=10</p>
<p><b>NDArray nd = manager.arange(1, 10).reshape(3, 3)</b> to create a NDArray with shape 3x3
</p>
<p><b>nd.set(new NDIndex(":, 1"), array -> array.mul(2));</b> Multiply the second column value
by 2</p>
<p>type <b>nd</b> to show the result</p>
</div>
<div id="more" class="col s8 offset-s2">
To learn more about NDArray and its methods, please checkout our <a
href="https://javadoc.io/doc/ai.djl/api/latest/ai/djl/ndarray/NDArray.html">NDArray
javadoc</a>.
</div>
<div class="col s8 offset-s2 card black z-depth-5">
<div id="terminal"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="card white z-depth-5">
<div class="section">
<div class="row center">
<h3 class="center" id="doodle">Try with Doodle Draw</h3>
<p>Live inference with AWS Lambda</p>
<div class="col s8 offset-s2 card black z-depth-5">
<canvas id="draw"></canvas>
</div>
</div>
<div class="row center">
<a class="waves-effect waves-light btn" onclick="clearMe()"><i class="material-icons left">cloud</i>clear</a>
</div>
</div>
</div>
</div>
<div class="container hide-on-small-only">
<div class="card white z-depth-5">
<div class="section">
<div class="row">
<h3 class="center" id="block-runner">DJL Block Runner</h3>
<p class="center">Test the code, Download the template, Run it locally.</p>
<ul class="col s10 offset-s1 collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>Run Inference with DJL</div>
<div class="collapsible-body">
<script src="https://gist.github.com/lanking520/2eaaf3bba094b10aaffebd999bd4ae88.js"></script>
<p>You can copy with the code snippet above to run inference with MXNet. You can also try to change the Model URL to run inference on PyTorch and TensorFlow:</p>
<p>PyTorch: Please select <b>PyTorch</b> in the engine selection dropdown and uncomment the <b>second modelUrl</b>. </p>
<p>TensorFlow: Please select <b>TensorFlow</b> in the engine selection dropdown and uncomment the <b>third modelUrl</b>. </p>
<p>Use <b>Get Template</b> to test the code in your local machine.</p>
</div>
</li>
</ul>
</div>
<div class="row">
<div class="col s10 offset-s1 blue-grey darken-4">
<textarea id="editor"></textarea>
</div>
</div>
<div class="row">
<div class="col s3 offset-s2">
<a class="waves-effect waves-light btn" onclick="submitCode()"><i class="material-icons left">cloud</i>run</a>
</div>
<div class="col s3">
<a class="waves-effect waves-light btn" onclick="getTemplate()"><i class="material-icons left">file_download</i>get
Template</a>
</div>
<div class="col s2">
<select class="browser-default" id="engine">
<option value="mxnet" selected>Engine: MXNet</option>
<option value="pytorch">Engine: PyTorch</option>
<option value="tensorflow">Engine: TensorFlow</option>
</select>
</div>
</div>
<div class="row">
<p class="col s10 offset-s1">Output</p>
<div class="col s10 offset-s1 blue-grey darken-4 z-depth-5">
<textarea id="result"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="card z-depth-5">
<div class="section">
<div class="row center">
<h5 class="header col s12 light">Want to know more?</h5>
</div>
<div class="row center">
<a href="https://github.com/aws-samples/djl-demo"
class="btn-large waves-effect waves-light light-blue accent-2 pulse">Checkout our demo repository</a>
</div>
<div class="row center">
<h5 class="header col s12 light"> Also checkout these cool projects using DJL:</h5>
<a href="https://github.com/kimim/clj-djl" class="col s10 offset-s1">Clojure API for DJL</a>
<a href="https://github.com/kingyuluk/RL-FlappyBird" class="col s10 offset-s1">Reinforcement Learning Flappy Bird game using DJL</a>
<a href="https://github.com/tspannhw/nifi-djl-processor" class="col s10 offset-s1">nifi djl processor</a>
<a href="https://github.com/Jzow/FastDJL" class="col s10 offset-s1">Fast DJL</a>
</div>
</div>
</div>
</div>
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Us</h5>
<p class="grey-text text-lighten-4">Built with <span style="color: red;">♥</span> for the
Java
community by your friends at AWS</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright 2020 <a class="brown-text text-lighten-3" href="http://aws.amazon.com/">Amazon.com, Inc.</a>
or
its
affiliates. All Rights Reserved.
</div>
</div>
</footer>
</div>
<!-- Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://djl.ai/website/js/init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
<script src="https://djl.ai/website/js/terminal.js"></script>
<script src="https://djl.ai/website/js/doodle_draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/mode/clike/clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/addon/edit/matchbrackets.min.js"></script>
<script src="https://djl.ai/website/js/blockrunner.js"></script>
<div class="sidenav-overlay"></div>
<div class="drag-target"></div>
<div class="sidenav-overlay"></div>
<div class="drag-target"></div>
</body>
</html>