Skip to content

Commit d071ff9

Browse files
PicoCreatorPicoCreator
committed
Merge branch 'eugene-gpujs#25-demo'
2 parents bad8f04 + bc35589 commit d071ff9

3 files changed

Lines changed: 680 additions & 0 deletions

File tree

‎demo/playground.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.paramContainer {
2+
margin-top: 20px;
3+
}
4+
5+
.paramGroup {
6+
background: rgba(0,0,0,0.2);
7+
}
8+
9+
.paramGroup .paramGroupInner {
10+
padding-top:10px;
11+
}
12+
13+
.paramGroup .paramGroupInner input,
14+
.paramGroup .paramGroupInner textarea {
15+
min-width: 100%;
16+
max-width: 100%;
17+
width:100%;
18+
}
19+
20+
.paramGroup .paramGroupInner textarea {
21+
min-height:150px;
22+
}
23+
24+
.kernelGroupInner textarea,
25+
.kernel_function {
26+
width:100%;
27+
}
28+
29+
.kernel_sample, .param_sample {
30+
min-height:40px;
31+
}
32+
33+
.chartContainer {
34+
padding-top:20px;
35+
}
36+
37+
.bench_chart {
38+
margin-top:20px;
39+
height: 400px;
40+
}

‎demo/playground.html‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>GPU.JS - playground : GPU Accelerated JavaScript</title>
6+
7+
<!-- jquery + bootstrap -->
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
11+
12+
<!-- code mirror -->
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.css">
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js"></script>
16+
17+
<!-- chartist -->
18+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css">
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.js"></script>
20+
21+
<!-- gpu.js scripts -->
22+
<script src="../bin/gpu.js"></script>
23+
<script src="playground.js"></script>
24+
<link rel="stylesheet" href="playground.css">
25+
</head>
26+
<body>
27+
<a href="https://github.com/gpujs/gpu.js" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill: rgba(21, 21, 19, 0.53); color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
28+
<div class="container">
29+
<div class="page-header">
30+
<h1>GPU.js - playground : <small style="display:inline-block">GPU Accelerated JavaScript</small></h1>
31+
</div>
32+
</div>
33+
<div class="container">
34+
<blockquote>
35+
This page here, is meant to help "play" with various algorithms, random data sets, etc.<br/>
36+
And benchmark their performance on your computer (CPU vs GPU) respective to the datasize.<br/>
37+
<br/>
38+
[SECURITY WARNING] : This playground here does an "evil" eval on the input funcitons. So obviously do not carlessly copy and paste things here.
39+
<br/><br/>
40+
<a href="https://gpu.rocks">Our main site is found at https://gpu.rocks</a>
41+
<br/><br/>
42+
Enjoy =)
43+
<br/><br/>
44+
~ GPU.JS team
45+
</blockquote>
46+
</div>
47+
<div class="container">
48+
<h3>Step 1) Setup your input parameters generator</h3>
49+
<blockquote>
50+
(to-be-implmented : currently do an array of [0-samplesize], for 2 arguments)<br/>
51+
- Setup your various argument generator settings here.
52+
<br/>
53+
<br/>
54+
- Number of parameters : To pass to the final GPU.js function<br/>
55+
- Sample size : Size for the sample display<br/>
56+
- Random seed : Seed value, used by the random function
57+
</blockquote>
58+
</div>
59+
<div class="container">
60+
<div class="col-sm-4">
61+
<label class="control-label" for="arg_count">Number of parameters</label>
62+
<div class="input-group">
63+
<span class="input-group-btn">
64+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="arg_count">
65+
<span class="glyphicon glyphicon-minus"></span>
66+
</button>
67+
</span>
68+
<input type="text" name="arg_count" id="arg_count" class="form-control input-number" value="2" min="0" max="10">
69+
<span class="input-group-btn">
70+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="arg_count">
71+
<span class="glyphicon glyphicon-plus"></span>
72+
</button>
73+
</span>
74+
</div>
75+
</div>
76+
<div class="col-sm-4">
77+
<label class="control-label" for="sample_size">Sample size</label>
78+
<div class="input-group">
79+
<span class="input-group-btn">
80+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="sample_size">
81+
<span class="glyphicon glyphicon-minus"></span>
82+
</button>
83+
</span>
84+
<input type="text" name="sample_size" id="sample_size" class="form-control input-number" value="10" min="0" max="1000">
85+
<span class="input-group-btn">
86+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="sample_size">
87+
<span class="glyphicon glyphicon-plus"></span>
88+
</button>
89+
</span>
90+
</div>
91+
</div>
92+
<div class="col-sm-4">
93+
<label class="control-label" for="rand_seed">Seed for Random</label>
94+
<div class="form-group">
95+
<input type="text" name="rand_seed" id="rand_seed" class="form-control" value="random">
96+
</div>
97+
</div>
98+
</div>
99+
<div class="container paramContainer">
100+
<div class="col-sm-6 paramGroup" id="paramGroupSample">
101+
<div class="paramGroupInner form-group">
102+
<label class="control-label" for="param_name">Parameter Name</label>
103+
<input type="text" name="param_name" class="form-control" value="A">
104+
<label class="control-label" for="param_function">Parameter Function</label>
105+
<textarea name="param_function">function(size,rand) {
106+
var ret = [];
107+
for(var i=0; i<size; ++i){
108+
ret[i] = i;
109+
}
110+
return ret;
111+
}
112+
</textarea>
113+
<label class="control-label" for="param_sample">Sample Output</label>
114+
<pre class="param_sample"></pre>
115+
</div>
116+
</div>
117+
<div class="col-sm-6 paramGroup" id="paramGroupSample">
118+
<div class="paramGroupInner form-group">
119+
<label class="control-label" for="param_name">Parameter Name</label>
120+
<input type="text" name="param_name" class="form-control" value="B">
121+
<label class="control-label" for="param_function">Parameter Function</label>
122+
<textarea name="param_function">function(size,rand) {
123+
var ret = [];
124+
for(var i=0; i<size; ++i){
125+
ret[i] = i;
126+
}
127+
return ret;
128+
}
129+
</textarea>
130+
<label class="control-label" for="param_sample">Sample Output</label>
131+
<pre class="param_sample"></pre>
132+
</div>
133+
</div>
134+
<button id="paramset_btn" type="button" class="btn btn-primary btn-lg btn-block paramset_btn">Generate parameter samples</button>
135+
</div>
136+
<div class="container">
137+
<h3>Step 2) Program your kernel function</h3>
138+
<blockquote>
139+
Code out the kernel, do note the following tips.
140+
<br/>
141+
<br/>
142+
- Parameter functions is automatically called to provide args<br/>
143+
- if/else is expensive in GPU, if/else in loops is even more expensive
144+
</blockquote>
145+
</div>
146+
<div class="container kernelContainer">
147+
<div class="kernelGroupInner form-group">
148+
<label class="control-label" for="param_function">Kernel Function</label><br/>
149+
<textarea name="kernel_function" class="kernel_function" id="kernel_function"></textarea>
150+
<button id="kernel_sample_btn" type="button" class="btn btn-primary btn-lg btn-block kernel_sample_btn">Generate kernel sample</button>
151+
<label class="control-label" for="kernel_sample">Sample Output</label>
152+
<pre id="kernel_sample" name="kernel_sample" class="kernel_sample"></pre>
153+
</div>
154+
</div>
155+
<div class="container">
156+
<h3>Step 3) CPU vs GPU</h3>
157+
<blockquote>
158+
Setup your sample size upper, lower bounds. Its increment size. Benchmark iterations
159+
<br/>
160+
And bench it!
161+
</blockquote>
162+
</div>
163+
<div class="container">
164+
<div class="col-sm-4">
165+
<label class="control-label" for="bench_lower">Lower bounds</label>
166+
<div class="input-group">
167+
<span class="input-group-btn">
168+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_lower">
169+
<span class="glyphicon glyphicon-minus"></span>
170+
</button>
171+
</span>
172+
<input type="text" name="bench_lower" id="bench_lower" class="form-control input-number" value="250" min="0" max="4294967295">
173+
<span class="input-group-btn">
174+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_lower">
175+
<span class="glyphicon glyphicon-plus"></span>
176+
</button>
177+
</span>
178+
</div>
179+
</div>
180+
<div class="col-sm-4">
181+
<label class="control-label" for="bench_upper">Upper bounds</label>
182+
<div class="input-group">
183+
<span class="input-group-btn">
184+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_upper">
185+
<span class="glyphicon glyphicon-minus"></span>
186+
</button>
187+
</span>
188+
<input type="text" name="bench_upper" id="bench_upper" class="form-control input-number" value="10000" min="0" max="4294967295">
189+
<span class="input-group-btn">
190+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_upper">
191+
<span class="glyphicon glyphicon-plus"></span>
192+
</button>
193+
</span>
194+
</div>
195+
</div>
196+
<div class="col-sm-4">
197+
<label class="control-label" for="bench_increment">Increment size</label>
198+
<div class="input-group">
199+
<span class="input-group-btn">
200+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_increment">
201+
<span class="glyphicon glyphicon-minus"></span>
202+
</button>
203+
</span>
204+
<input type="text" name="bench_increment" id="bench_increment" class="form-control input-number" value="250" min="0" max="4294967295">
205+
<span class="input-group-btn">
206+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_increment">
207+
<span class="glyphicon glyphicon-plus"></span>
208+
</button>
209+
</span>
210+
</div>
211+
</div>
212+
<div class="col-sm-4">
213+
<label class="control-label" for="arg_count">Bench Size</label>
214+
<div class="input-group">
215+
<span class="input-group-btn">
216+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_size">
217+
<span class="glyphicon glyphicon-minus"></span>
218+
</button>
219+
</span>
220+
<input type="text" name="bench_size" id="bench_size" class="form-control input-number" value="25" min="0" max="4294967295">
221+
<span class="input-group-btn">
222+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_size">
223+
<span class="glyphicon glyphicon-plus"></span>
224+
</button>
225+
</span>
226+
</div>
227+
</div>
228+
<div class="col-sm-4">
229+
<label class="control-label" for="arg_count">Warmup Size</label>
230+
<div class="input-group">
231+
<span class="input-group-btn">
232+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="warmup_size">
233+
<span class="glyphicon glyphicon-minus"></span>
234+
</button>
235+
</span>
236+
<input type="text" name="bench_size" id="warmup_size" class="form-control input-number" value="5" min="0" max="4294967295">
237+
<span class="input-group-btn">
238+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="warmup_size">
239+
<span class="glyphicon glyphicon-plus"></span>
240+
</button>
241+
</span>
242+
</div>
243+
</div>
244+
</div>
245+
<div class="container chartContainer">
246+
<button id="bench_btn" type="button" class="btn btn-primary btn-lg btn-block bench_btn">Run the benchmark!</button>
247+
<div id="chart_time" class="chart_time bench_chart"></div>
248+
<div id="chart_gain" class="chart_gain bench_chart"></div>
249+
</div>
250+
<br/>
251+
</body>
252+
</html>

0 commit comments

Comments
 (0)