Files
LAFF/PictureFLAME/PictureFLAME.html
Julien Lengrand-Lambert d4dce71599 Create repo
2018-05-02 09:13:08 +02:00

284 lines
9.1 KiB
HTML
Executable File

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Picture FLAME</title>
<link rel="stylesheet" href="style.css">
<script src="parse_code.js"></script>
<script src="routines.js"></script>
<script src="routines_2.js"></script>
<script src="display_code.js"></script>
<script src="display_operand.js"></script>
<script src="regions.js"></script>
<script src="animator.js"></script>
<script>
var DEFAULT_SIZE = 5;
var DEFAULT_NB_ALG = 2;
var DEFAULT_MODE = -1;
function detect_mode(code){
//M-script look for ...
var matched = code.match(/\.\.\./g);
if (matched && matched.length != 0){
DEFAULT_MODE = 1;
}
//Python look for \
matched = code.match(/\\/g);
if (matched && matched.length != 0){
DEFAULT_MODE = 2;
}
}
var loopcount = DEFAULT_SIZE;
//matlab expressions
var newlineExpr = /\.\.\.\s*\n/;
var commentExpr = /%.*/g;
var outputExpr = /\[[^=]+\]\s*=/m;
//FLAMEPy expressions
if (DEFAULT_MODE ==2){
newlineExpr = /\\\s*\n/;
commentExpr = /#-*/;
outputExpr = /\[[^=]+\]\s*=/m;
}
function interprete_code(stmtNum){
var stmt = document.getElementById('display_code').childNodes[stmtNum].firstChild.innerHTML;
stmt = stmt.replace(newlineExpr, '\n');
var partExpr = /(_|\.)Part_[12]x[12]/gi;
var repartExpr = /(_|\.)Repart_[12]x[12]_/gi;
var contExpr = /(_|\.)Cont_with_[13]x[13]_/gi;
var oprdExpr = /\(\s*[A-z0-9]+(,|\s)/gim;
var partTypeExpr = /[123]x[123]/;
var partDirExpr = /FLA_(TOP|BOTTOM|LEFT|RIGHT|TL|TR|BL|BR)/;
if (DEFAULT_MODE == 2)
partDirExpr = /'(TOP|BOTTOM|LEFT|RIGHT|TL|TR|BL|BR)/;
var partTest = partExpr.test(stmt);
var repartTest = repartExpr.test(stmt);
var contTest = contExpr.test(stmt);
var operand = null;
if (partTest | repartTest | contTest){
//partition, repartition and continue_with routines
operand = oprdExpr.exec(stmt)[0].replace(/\(\s*/g, '').charAt(0);
for (var i=0; i != operands.length; ++i){
if (operands[i].tag == operand){
if (partTest)
operands[i].partition(
partTypeExpr.exec(stmt)[0],
(DEFAULT_MODE==1?
partDirExpr.exec(stmt)[0].substring(4):
partDirExpr.exec(stmt)[0].substring(1))
);
else if (repartTest)
operands[i].repartition();
else
operands[i].cont_with();
}
}
}
else{
//regular statements
var parsed_stmt = parse_stmt(stmt);
//highlight operands
for (var i = 0; i != parsed_stmt.args.length; ++i){
for (var j = 0; j != operands.length; ++j){
//check if operands[j] needs to be highlighted
//make output (defaulted to last arg) pink
if (operands[j].match(parsed_stmt.args[i].op)){
operands[j].select(parsed_stmt.args[i].subregion,
(i==parsed_stmt.args.length-1?'pink':'lightblue'));
}
}
}
//execute functions
if (parsed_stmt.fn != ''){
//BLAS-like function call
execute_BLAS(parsed_stmt);
}
}
}
var operands;
function make_operand(tag, m, n, i){
var len = operands.push(new Operand(tag, m, n));
return '<div id="'+tag+'" class="operand'+i+'">'+tag+operands[len-1].display()+'</div>';
}
function display_operands(operands){
var output = '';
for (var i = 0; i != operands.length; ++i){
switch (operands[i].length){
case 1: //matrix or column vector
if (operands[i].charCodeAt(0)>=97){ //vector
output += make_operand(operands[i],DEFAULT_SIZE,1, i%2);
}
else{ //vector
output += make_operand(operands[i],DEFAULT_SIZE, DEFAULT_SIZE, i%2);
}
break;
case 2: //row vector
output += make_operand(operands[i].charAt(0), 1, DEFAULT_SIZE, i%2);
break;
default://scalar
output += make_operand(operands[i],1,1, i%2);
break;
}
}
document.getElementById('display_pic').innerHTML = output;
}
var ani = null
function initialize(code){
detect_mode(document.getElementById('code').value);
//parse file
var codeSummary = parse(code);
var fnSummary = parse_fn_header(codeSummary.fn);
display_code(codeSummary.code);
//create operand images
operands = new Array();
display_operands(fnSummary.operands);
//execute FLAME algorithm
ani = new Animator(codeSummary.head, codeSummary.foot, loopcount, document.getElementById('display_code').childNodes.length);
}
function next(){
ani.next_animation();
}
function play(){
document.getElementById('next').disabled = true;
document.getElementById('reload').disabled = true;
document.getElementById('new').disabled = true;
document.getElementById('play').disabled = true;
document.getElementById('stop').disabled = false;
ani.run(stop);
}
function stop(){
document.getElementById('next').disabled = false;
document.getElementById('reload').disabled = false;
document.getElementById('new').disabled = false;
document.getElementById('play').disabled = false;
document.getElementById('stop').disabled = true;
}
function close_input_window(){
document.getElementById('input_group').style.display="none";
}
function open_input_window(){
document.getElementById('input_group').style.display="block";
}
function close_animation_window(){
document.getElementById('animation_group').style.display="none";
}
function open_animation_window(){
document.getElementById('animation_group').style.display="block";
}
function load_program(){
initialize(document.getElementById('code').value);
}
</script>
</head>
<body> <!--onLoad="initialize(document.getElementById('code').value)" -->
<h2>PictureFLAME</h2>
<div id="input_group">
<div id="input_control" class="group_header">
Input Program
<!-- <div style="float:right;color:white;background-color:navy;border:2px solid lightgray;" onClick="close_input_window();load_program();open_animation_window()">
Load
</div>
-->
<input type="button" value="Load Program" onClick="close_input_window();load_program();open_animation_window()"/>
</div>
<div id="input_block">
<textarea id="code" name="code" cols="75" rows="20" style="margin:10px">
% Copyright 2015 The University of Texas at Austin
%
% For licensing information see
% http://www.cs.utexas.edu/users/flame/license.html
%
% Programmed by: Name of author
% Email of author
function [ Y_out ] = Function_Name_unb( Y, A, X )
[ YL, YR ] = FLA_Part_1x2( Y, ...
0, 'FLA_LEFT' );
[ XL, XR ] = FLA_Part_1x2( X, ...
0, 'FLA_LEFT' );
while ( size( YL, 2 ) < size( Y, 2 ) )
[ Y0, y1, Y2 ]= FLA_Repart_1x2_to_1x3( YL, YR, ...
1, 'FLA_RIGHT' );
[ X0, x1, X2 ]= FLA_Repart_1x2_to_1x3( XL, XR, ...
1, 'FLA_RIGHT' );
%------------------------------------------------------------%
y1 = laff_gemv('No transpose', 1, A, x1, 1, y1);
%------------------------------------------------------------%
[ YL, YR ] = FLA_Cont_with_1x3_to_1x2( Y0, y1, Y2, ...
'FLA_LEFT' );
[ XL, XR ] = FLA_Cont_with_1x3_to_1x2( X0, x1, X2, ...
'FLA_LEFT' );
end
Y_out = [ YL, YR ];
return
</textarea>
</div>
</div>
<div id="animation_group" style="display:none">
<div id="control" class="group_header">
Animation
<input type = "button" id="next" value="Next" onClick="ani.next_animation()"/>
<input type = "button" id="reload" value="Reload" onClick="load_program()"/>
<input type = "button" id="new" value="New Program" onClick="close_animation_window();open_input_window()"/>
<input type = "button" id="play" value="Play" onClick="play()"/>
<input type = "button" id="stop" value="Stop" onClick="ani.stop()" disabled="true"/>
</div>
<div id='display_code'></div>
<div id='display_pic'></div>
</div>
</body>
</html>