Skip to content

Commit 97b016c

Browse files
PicoCreatorPicoCreator
committed
Merge pull request gpujs#43 from gpujs/eugene-#25-demo
Eugene gpujs#25 demo
2 parents 2d317d0 + 0946321 commit 97b016c

3 files changed

Lines changed: 368 additions & 102 deletions

File tree

‎demo/playground.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,29 @@
22
margin-top: 20px;
33
}
44

5-
.paramGroup {
5+
.sampleSet {
66
background: rgba(0,0,0,0.2);
77
}
88

9-
.paramGroup .paramGroupInner {
9+
.sampleSet .sampleSetInner {
1010
padding-top:10px;
1111
}
1212

13-
.paramGroup .paramGroupInner input,
14-
.paramGroup .paramGroupInner textarea {
13+
.sampleSet .sampleSetInner input,
14+
.sampleSet .sampleSetInner textarea {
1515
min-width: 100%;
1616
max-width: 100%;
1717
width:100%;
1818
}
1919

20-
.paramGroup .paramGroupInner textarea {
20+
.sampleSet .sampleSetInner textarea {
2121
min-height:150px;
2222
}
2323

24+
.sampleSet .sample_output {
25+
min-height:40px;
26+
}
27+
2428
.kernelGroupInner textarea,
2529
.kernel_function {
2630
width:100%;

‎demo/playground.html‎

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js"></script>
1515
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js"></script>
1616

17+
<!-- seed random : https://github.com/davidbau/seedrandom -->
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/lib/xor4096.min.js"></script>
19+
1720
<!-- chartist -->
1821
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css">
1922
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.js"></script>
@@ -47,13 +50,21 @@ <h1>GPU.js - playground : <small style="display:inline-block">GPU Accelerated Ja
4750
<div class="container">
4851
<h3>Step 1) Setup your input parameters generator</h3>
4952
<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+
Setup your various argument generator settings here.<br/>
5354
<br/>
5455
- Number of parameters : To pass to the final GPU.js function<br/>
5556
- Sample size : Size for the sample display<br/>
56-
- Random seed : Seed value, used by the random function
57+
- Random seed : Seed value, used by the random function<br/>
58+
(Pesudo random is choosen to make testing and debugging the parameter function generator easier and consistent)<br/>
59+
<br/>
60+
Each parameter function are passed in 2 attributes<br/>
61+
<br/>
62+
- size : The sample size used for this iteration<br/>
63+
- rand : The 0-1 floating value, pesudo random generator used for this sample size, and parameter count.<br/>
64+
<br/>
65+
Additionally a dimension generator function, is required to declare the dimensions used<br/>
66+
<br/>
67+
- size : The sample size used for this iteration<br/>
5768
</blockquote>
5869
</div>
5970
<div class="container">
@@ -97,38 +108,24 @@ <h3>Step 1) Setup your input parameters generator</h3>
97108
</div>
98109
</div>
99110
<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>
111+
<div class="paramGroupContainer" id="paramGroupContainer">
112+
<div class="col-sm-6 paramGroup sampleSet" id="paramGroupTemplate" style="display:none;">
113+
<div class="paramGroupInner sampleSetInner form-group">
114+
<label class="control-label" for="param_name">Parameter Name</label>
115+
<input type="text" name="param_name" class="param_name form-control" value="A">
116+
<label class="control-label" for="param_function">Parameter Function</label>
117+
<textarea name="param_function" class="param_function"></textarea>
118+
<label class="control-label" for="param_sample">Sample Output</label>
119+
<pre class="param_sample"></pre>
120+
</div>
115121
</div>
116122
</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>
123+
<div class="col-sm-12 dim_group sampleSet" id="dim_group">
124+
<div class="sampleSetInner form-group">
125+
<label class="control-label" for="dim_function">Dimension Function</label>
126+
<textarea name="dim_function" class="dim_function" id="dim_function"></textarea>
127+
<label class="control-label" for="dim_sample">Sample Dimensions</label>
128+
<pre class="dim_sample sample_output" id="dim_sample"></pre>
132129
</div>
133130
</div>
134131
<button id="paramset_btn" type="button" class="btn btn-primary btn-lg btn-block paramset_btn">Generate parameter samples</button>
@@ -153,7 +150,7 @@ <h3>Step 2) Program your kernel function</h3>
153150
</div>
154151
</div>
155152
<div class="container">
156-
<h3>Step 3) CPU vs GPU</h3>
153+
<h3>Step 3) BENCH! CPU vs GPU</h3>
157154
<blockquote>
158155
Setup your sample size upper, lower bounds. Its increment size. Benchmark iterations
159156
<br/>
@@ -185,7 +182,7 @@ <h3>Step 3) CPU vs GPU</h3>
185182
<span class="glyphicon glyphicon-minus"></span>
186183
</button>
187184
</span>
188-
<input type="text" name="bench_upper" id="bench_upper" class="form-control input-number" value="10000" min="0" max="4294967295">
185+
<input type="text" name="bench_upper" id="bench_upper" class="form-control input-number" value="2500" min="0" max="4294967295">
189186
<span class="input-group-btn">
190187
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_upper">
191188
<span class="glyphicon glyphicon-plus"></span>
@@ -201,7 +198,7 @@ <h3>Step 3) CPU vs GPU</h3>
201198
<span class="glyphicon glyphicon-minus"></span>
202199
</button>
203200
</span>
204-
<input type="text" name="bench_increment" id="bench_increment" class="form-control input-number" value="250" min="0" max="4294967295">
201+
<input type="text" name="bench_increment" id="bench_increment" class="form-control input-number" value="50" min="0" max="4294967295">
205202
<span class="input-group-btn">
206203
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_increment">
207204
<span class="glyphicon glyphicon-plus"></span>
@@ -244,7 +241,9 @@ <h3>Step 3) CPU vs GPU</h3>
244241
</div>
245242
<div class="container chartContainer">
246243
<button id="bench_btn" type="button" class="btn btn-primary btn-lg btn-block bench_btn">Run the benchmark!</button>
244+
<h4>Average Time taken</h4>
247245
<div id="chart_time" class="chart_time bench_chart"></div>
246+
<h4>GPU Performance improvement</h4>
248247
<div id="chart_gain" class="chart_gain bench_chart"></div>
249248
</div>
250249
<br/>

0 commit comments

Comments
 (0)