Skip to content

Commit 0946321

Browse files
PicoCreatorPicoCreator
committed
Fully functioning benchmark demo : issue gpujs#25 is DONE!
1 parent 6cc9a7d commit 0946321

3 files changed

Lines changed: 165 additions & 80 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: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,16 @@ <h3>Step 1) Setup your input parameters generator</h3>
5555
- Number of parameters : To pass to the final GPU.js function<br/>
5656
- Sample size : Size for the sample display<br/>
5757
- 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/>
5859
<br/>
5960
Each parameter function are passed in 2 attributes<br/>
6061
<br/>
6162
- size : The sample size used for this iteration<br/>
6263
- rand : The 0-1 floating value, pesudo random generator used for this sample size, and parameter count.<br/>
6364
<br/>
64-
(Pesudo random is choosen to make testing and debugging the parameter function generator easier and consistent)
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/>
6568
</blockquote>
6669
</div>
6770
<div class="container">
@@ -106,18 +109,25 @@ <h3>Step 1) Setup your input parameters generator</h3>
106109
</div>
107110
<div class="container paramContainer">
108111
<div class="paramGroupContainer" id="paramGroupContainer">
109-
<div class="col-sm-6 paramGroup" id="paramGroupTemplate" style="display:none;">
110-
<div class="paramGroupInner form-group">
112+
<div class="col-sm-6 paramGroup sampleSet" id="paramGroupTemplate" style="display:none;">
113+
<div class="paramGroupInner sampleSetInner form-group">
111114
<label class="control-label" for="param_name">Parameter Name</label>
112115
<input type="text" name="param_name" class="param_name form-control" value="A">
113116
<label class="control-label" for="param_function">Parameter Function</label>
114-
<textarea name="param_function" class="param_function">
115-
</textarea>
117+
<textarea name="param_function" class="param_function"></textarea>
116118
<label class="control-label" for="param_sample">Sample Output</label>
117119
<pre class="param_sample"></pre>
118120
</div>
119121
</div>
120122
</div>
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>
129+
</div>
130+
</div>
121131
<button id="paramset_btn" type="button" class="btn btn-primary btn-lg btn-block paramset_btn">Generate parameter samples</button>
122132
</div>
123133
<div class="container">
@@ -140,7 +150,7 @@ <h3>Step 2) Program your kernel function</h3>
140150
</div>
141151
</div>
142152
<div class="container">
143-
<h3>Step 3) CPU vs GPU</h3>
153+
<h3>Step 3) BENCH! CPU vs GPU</h3>
144154
<blockquote>
145155
Setup your sample size upper, lower bounds. Its increment size. Benchmark iterations
146156
<br/>
@@ -172,7 +182,7 @@ <h3>Step 3) CPU vs GPU</h3>
172182
<span class="glyphicon glyphicon-minus"></span>
173183
</button>
174184
</span>
175-
<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">
176186
<span class="input-group-btn">
177187
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_upper">
178188
<span class="glyphicon glyphicon-plus"></span>
@@ -188,7 +198,7 @@ <h3>Step 3) CPU vs GPU</h3>
188198
<span class="glyphicon glyphicon-minus"></span>
189199
</button>
190200
</span>
191-
<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">
192202
<span class="input-group-btn">
193203
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_increment">
194204
<span class="glyphicon glyphicon-plus"></span>
@@ -231,7 +241,9 @@ <h3>Step 3) CPU vs GPU</h3>
231241
</div>
232242
<div class="container chartContainer">
233243
<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>
234245
<div id="chart_time" class="chart_time bench_chart"></div>
246+
<h4>GPU Performance improvement</h4>
235247
<div id="chart_gain" class="chart_gain bench_chart"></div>
236248
</div>
237249
<br/>

0 commit comments

Comments
 (0)