Skip to content

Commit 5446afb

Browse files
PicoCreatorPicoCreator
committed
Still a work in progress for playground demo
1 parent 076c33b commit 5446afb

3 files changed

Lines changed: 189 additions & 6 deletions

File tree

‎demo/playground.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,8 @@
1616
max-width: 100%;
1717
width:100%;
1818
}
19+
20+
.kernelGroupInner textarea,
21+
.kernel_function {
22+
width:100%;
23+
}

‎demo/playground.html‎

Lines changed: 99 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@
1010
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
1111

1212
<!-- code mirror -->
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js"></script>
1413
<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>
1516

1617
<!-- gpu.js scripts -->
1718
<script src="../bin/gpu.js"></script>
@@ -40,7 +41,7 @@ <h1>GPU.js - playground : <small style="display:inline-block">GPU Accelerated Ja
4041
<div class="container">
4142
<h3>Step 1) Setup your input parameters generator</h3>
4243
<blockquote>
43-
Setup your various argument generator settings here.
44+
(to-be-implmented) - Setup your various argument generator settings here.
4445
<br/>
4546
<br/>
4647
- Number of parameters : To pass to the final GPU.js function<br/>
@@ -57,7 +58,7 @@ <h3>Step 1) Setup your input parameters generator</h3>
5758
<span class="glyphicon glyphicon-minus"></span>
5859
</button>
5960
</span>
60-
<input type="text" name="arg_count" id="arg_count" class="form-control input-number" value="1" min="0" max="10">
61+
<input type="text" name="arg_count" id="arg_count" class="form-control input-number" value="2" min="0" max="10">
6162
<span class="input-group-btn">
6263
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="arg_count">
6364
<span class="glyphicon glyphicon-plus"></span>
@@ -100,6 +101,100 @@ <h3>Step 1) Setup your input parameters generator</h3>
100101
</div>
101102
</div>
102103
</div>
103-
104+
<div class="container">
105+
<h3>Step 2) Program your kernel function</h3>
106+
<blockquote>
107+
Code out the kernel, do note the following tips.
108+
<br/>
109+
<br/>
110+
- Parameter functions is automatically called to provide args<br/>
111+
- if/else is expensive in GPU, if/else in loops is even more expensive
112+
</blockquote>
113+
</div>
114+
<div class="container kernelContainer">
115+
<div class="kernelGroupInner form-group">
116+
<label class="control-label" for="param_function">Kernel Function</label><br/>
117+
<textarea name="kernel_function" class="kernel_function" id="kernel_function"></textarea>
118+
<br/>
119+
<button id="kernel_sample_btn" type="button" class="btn btn-primary btn-lg btn-block kernel_sample_btn">Generate kernel sample</button>
120+
<label class="control-label" for="kernel_sample">Sample Output</label>
121+
<pre id="kernel_sample" name="kernel_sample"></pre>
122+
</div>
123+
</div>
124+
<div class="container">
125+
<h3>Step 3) CPU vs GPU</h3>
126+
<blockquote>
127+
Setup your sample size upper, lower bounds. Its increment size. Benchmark iterations
128+
<br/>
129+
And bench it!
130+
</blockquote>
131+
</div>
132+
<div class="container">
133+
<div class="col-sm-3">
134+
<label class="control-label" for="arg_count">Lower bounds</label>
135+
<div class="input-group">
136+
<span class="input-group-btn">
137+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_lower">
138+
<span class="glyphicon glyphicon-minus"></span>
139+
</button>
140+
</span>
141+
<input type="text" name="bench_lower" id="bench_lower" class="form-control input-number" value="10" min="0" max="4294967295">
142+
<span class="input-group-btn">
143+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_lower">
144+
<span class="glyphicon glyphicon-plus"></span>
145+
</button>
146+
</span>
147+
</div>
148+
</div>
149+
<div class="col-sm-3">
150+
<label class="control-label" for="arg_count">Upper bounds</label>
151+
<div class="input-group">
152+
<span class="input-group-btn">
153+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_upper">
154+
<span class="glyphicon glyphicon-minus"></span>
155+
</button>
156+
</span>
157+
<input type="text" name="bench_upper" id="bench_upper" class="form-control input-number" value="10000" min="0" max="4294967295">
158+
<span class="input-group-btn">
159+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_upper">
160+
<span class="glyphicon glyphicon-plus"></span>
161+
</button>
162+
</span>
163+
</div>
164+
</div>
165+
<div class="col-sm-3">
166+
<label class="control-label" for="arg_count">Increment size</label>
167+
<div class="input-group">
168+
<span class="input-group-btn">
169+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_increment">
170+
<span class="glyphicon glyphicon-minus"></span>
171+
</button>
172+
</span>
173+
<input type="text" name="bench_increment" id="bench_increment" class="form-control input-number" value="10" min="0" max="4294967295">
174+
<span class="input-group-btn">
175+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_increment">
176+
<span class="glyphicon glyphicon-plus"></span>
177+
</button>
178+
</span>
179+
</div>
180+
</div>
181+
<div class="col-sm-3">
182+
<label class="control-label" for="arg_count">Bench Size</label>
183+
<div class="input-group">
184+
<span class="input-group-btn">
185+
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="bench_size">
186+
<span class="glyphicon glyphicon-minus"></span>
187+
</button>
188+
</span>
189+
<input type="text" name="bench_size" id="bench_size" class="form-control input-number" value="10" min="0" max="4294967295">
190+
<span class="input-group-btn">
191+
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="bench_size">
192+
<span class="glyphicon glyphicon-plus"></span>
193+
</button>
194+
</span>
195+
</div>
196+
</div>
197+
</div>
198+
<br/>
104199
</body>
105200
</html>

‎demo/playground.js‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
$(function() {
2-
(function setupInputNumbers() {
2+
function setupInputNumbers() {
33
//plugin bootstrap minus and plus
44
//http://jsfiddle.net/laelitenetwork/puJ6G/
55
$('.btn-number').click(function(e){
@@ -73,9 +73,92 @@ $(function() {
7373
e.preventDefault();
7474
}
7575
});
76+
}
77+
78+
(function updateParamsList() {
79+
7680
})();
7781

78-
function updateParamsList() {
82+
/// Kernel code mirror object
83+
var CM_kernel = null;
84+
85+
/// One time setup of the kernel editor
86+
function setupKernelEditor() {
87+
88+
// Setup the kernel code mirror
89+
var kernel_textArea = document.getElementById("kernel_function");
90+
CM_kernel = CodeMirror.fromTextArea(kernel_textArea, {
91+
lineNumbers: true,
92+
mode: {name: "javascript", json: true},
93+
indentUnit: 3,
94+
tabSize: 3
95+
});
96+
97+
// Reset the value if needed
98+
var val = CM_kernel.getValue().trim();
99+
if(val.length <= 0) {
100+
CM_kernel.setValue("function kernel(A,B) {\n return (A[this.thread.x] * B[this.thread.x]);\n}")
101+
}
79102

103+
// Block edits for first and last line
104+
CM_kernel.on('beforeChange', function(cm,change) {
105+
if( change.from.line <= 0 || cm.lineCount() - 1 <= change.to.line) {
106+
change.cancel();
107+
}
108+
});
109+
110+
// Setup the kernel sample click call
111+
$("#kernel_sample_btn").click(updateKernelSampleDisplay);
112+
}
113+
114+
/// Get single argument sample
115+
function getOneKernelArgument(idx, sampleSize) {
116+
var pf = (function(s) {
117+
var ret = [];
118+
for(var a=0; a<s; ++a) {
119+
ret[a] = a;
120+
}
121+
return ret;
122+
})
123+
return pf(sampleSize);
80124
}
125+
126+
/// Get the argument array, with given sample size
127+
function getKernelArguments(sampleSize) {
128+
var ret = [ getOneKernelArgument(0,sampleSize), getOneKernelArgument(1,sampleSize) ];
129+
//console.log(ret);
130+
return ret;
131+
}
132+
133+
/// Get the kernel raw JS function
134+
function getKernelRawFunction() {
135+
eval("var ret = "+CM_kernel.getValue());
136+
return ret;
137+
}
138+
139+
/// Generate the kernel sample result
140+
function getKernelSampleResult(sampleSize) {
141+
var raw = getKernelRawFunction();
142+
var gpu = new GPU();
143+
var ker = gpu.createKernel(raw,{
144+
dimensions : [sampleSize]
145+
});
146+
147+
var args = getKernelArguments(sampleSize);
148+
return ker.apply(ker, args);
149+
}
150+
151+
function updateKernelSampleDisplay() {
152+
// Fixed sample size @TODO implmentation
153+
var res = getKernelSampleResult(10);
154+
console.log("Kernel code sample result : ", res);
155+
$("#kernel_sample").html( JSON.stringify(res) );
156+
}
157+
158+
// The various setup actual call
159+
setupInputNumbers();
160+
setupKernelEditor();
161+
162+
window.CM_kernel = CM_kernel;
163+
window.updateKernelSampleDisplay = updateKernelSampleDisplay;
81164
});

0 commit comments

Comments
 (0)