Google Git
Sign in
apache / predictionio / a7a3eba1fac9bf527f5dae8698f7d7b00370b642 / . / servers / admin / app / views / Web / index.scala.html
blob: 5e2d2af96f95f039dbcc1578fb7d86c67cbaba91 [file] [log] [blame]
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PredictionIO Admin Web</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="assets/stylesheets/vendors/bootstrap.min.css">
<link rel="stylesheet" href="assets/stylesheets/vendors/darkstrap.css">
<link rel="stylesheet" href="assets/stylesheets/main.css?v=201304091">
<link rel="stylesheet" href="assets/stylesheets/vendors/jquery-ui-1.9.2.custom.min.css">
<script type="text/javascript" src="assets/javascripts/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link rel="stylesheet" href="assets/stylesheets/vendors/toastr-1.2.2.min.css">
<link rel="stylesheet" href="assets/stylesheets/vendors/toggle-switch.css">
<script type="text/template" id="auth_template">
<% if (data.username) { %>
<div id="navAuth" class="btn-group pull-right">
<a class="btn btn-inverse btn-small dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user icon-white"></i> <%= data.username %> <span class="caret"></span></a>
<ul class="dropdown-menu">
<!-- TODO
<li><a href="#">Edit Account</a></li>
<li><a href="#">Admin Settings</a></li>
<li class="divider"></li>
-->
<li><a href="?#signout"><i class="i"></i> Logout</a></li>
</ul>
</div>
<% } %>
</script>
<script type="text/template" id="signin_template">
<div class="row-fluid">
<div class="span12">
<div id="signinContainer" class="center">
<form id="signinForm" class="form-horizontal">
<div class="modal modal-visible">
<div class="modal-header">
<h4>PredictionIO Admin Panel</h4>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" name="email" required="required" placeholder="your email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" name="password" required="required" placeholder="your password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox"> <input name="remember" type="checkbox">
Remember me
</label>
</div>
</div>
<div class="pull-right">
<span id="signinFormError" class="displayNone text-warning">error</span>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary input-medium">Sign In</button>
</div>
</div>
</form>
<div>
<!-- TODO
<a href="#">Forget Password?</a>
-->
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="appsDashboard_template">
<div class="row-fluid topMargin">
<div class="span10 offset1">
<div class="modal modal-visible modal-inverse">
<div class="modal-header">
<h5>Applications</h5>
</div>
<div class="modal-container">
<section class="modal-content">
<div class="modal-item-box">
<div id="appList">
<!-- App list template -->
</div>
<div id="appCreatePanel" class="displayNone modal-item">
<div class="row-fluid">
<div class="span5">
<form class="navbar-form">
<div class="input-append">
<input id="addAppInput" type="text"
placeholder="Name your app. E.g. MyMobileApp">
<button id="createAppBtn" class="btn" type="button">Add</button>
</div>
<span id="addAppInputError" class="displayNone text-error">Something
may have gone wrong</span>
</form>
</div>
</div>
</div>
</div>
<!-- End of App -->
<a href="#" id="showAddAppBtn" class="btn btn-small pull-right">Add
an App</a>
</section>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="app_template">
<div class="modal-item">
<div class="clearfix">
<div class="pull-left">
<h5>
<a class="toggleAppDetailsAction" href="#"><%= data.appname %></a>
</h5>
</div>
<div class="modal-item-panel pull-right">
<a href="#" class="actionbtn toggleAppDetailsAction"><i
class="icon-cog icon-white"></i> Develop</a>
</div>
</div>
<div class="app-info displayNone">
<div class="appdetails">
<!-- app details template -->
</div>
<div class="appenginelist">
<!-- app engine template -->
</div>
<p>
[ <a href="#" class="eraseAllDataAction"><span
class="text-warning">Reset and Erase All Data</span></a> ]
[ <a href="#"
class="removeAppAction"><span class="text-warning">Remove
this App</span></a> ]
<!-- TODO
[ <a href="javascript:alert('This feature will be available soon.');" ><span
class="text-warning">Reset and Erase All Data</span></a> ]
[ <a href="javascript:alert('This feature will be available soon.');"><span class="text-warning">Remove this App</span></a> ]
-->
</p>
</div>
</div>
</script>
<script type="text/template" id="appdetails_template">
<div class="row-fluid">
<div class="span8">
<p>
Last Updated: <%= data.updatedtime %> <a class="detailsRefreshAction" href="#"><i class="icon-refresh"></i></a>
<br /> Number of Users: <%= data.userscount %>
<br /> Number of Items: <%= data.itemscount %>
<br /> Number of U2I Actions: <%= data.u2icount %>
</p>
<!--
<strong>API Endpoint</strong> &nbsp;[<a href="#">?</a>]
<input class="span12" type="text" readonly required="" value="<%= data.apiurl %>" name="apiurl">
-->
<strong>App Key</strong> &nbsp;<!-- TODO [<a href="#">?</a>] -->
<input class="span12" type="text" readonly required="" value="<%= data.appkey %>" name="appkey">
<div class="bottomMargin"></div>
<div class="clearfix">
<strong>Prediction Engines</strong>
<a href="?appid=<%= data.id %>#addEngine" class="pull-right btn btn-small">Add an Engine &raquo;</a>
</div>
</div>
</div>
</script>
<script type="text/template" id="appenginelist_template">
<div class="row-fluid">
<div class="span8">
<table class="table bottomMargin-large">
<thead>
<tr>
<th>Engine Name</th>
<th>Type</th>
<th></th>
</tr>
</thead>
<tbody id="appdetails_engines">
<% _.each(data.enginelist, function(engine) { %>
<tr>
<td><%= engine.enginename %></td>
<td><%= engine.engineinfoid %></td>
<td><a href="?appid=<%= data.id %>&engineid=<%= engine.id %>&engineinfoid=<%= engine.engineinfoid %>#engine" class="btn btn-small">Manage</a></td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
</script>
<script type="text/template" id="breadcrumb_template">
<ul class="breadcrumb">
<% if(data.appname != null) { %>
<li><strong><a href="#appsDashboard"><%= data.appname %></a></strong>
<% } %>
<% if(data.enginename != null) { %>
<span class="divider">/</span></li>
<li class="active"><%= data.enginename %></li>
<% } %>
</ul>
</script>
<script type="text/template" id="app_addEngine_template">
<div class="row-fluid">
<div class="span10 offset1">
<div id="breadcrumb_ContentHolder"></div>
<div class="page-header"><h4>Create an Engine</h4></div>
<div id="createEngine" class="boxContainer clearfix bottomMargin-large">
<% _.each(data, function(enginetype, index) { %>
<% if(index % 2 == 0) { %>
<div class="row-fluid">
<% } %>
<div class="span6 boxBlock">
<div class="boxtitle">
<strong><i class="icon-cog icon-white"></i> <%= enginetype.engineinfoname%></strong>
</div>
<div class="boxContent">
<%= enginetype.description%>
</div>
<div class="boxPanel clearfix">
<form>
<div class="textRight">
<span class="createEngineError text-error displayNone">Error text here</span>
</div>
<div class="pull-right">
<div class="input-append">
<input type="hidden" name="engineinfoid" value="<%= enginetype.id%>"/>
<input class="btn-input" name="enginename" type="text" placeholder="type engine name..."/>
<button class="btn btn-inverse" type="submit">Create</button>
</div>
</div>
</form>
</div>
</div>
<% if(index % 2 != 0) { %>
</div>
<% } %>
<% }); %>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="engineTabAlgorithms_template">
<div class="row-fluid bottomMargin">
<div class="span8">
<div class="boxContainer">
<div class="boxBlock">
<div class="boxtitle">
<i class="icon-fire icon-white"></i> Deployed Algorithm <small>
- running on live system</small>
</div>
<div class="boxContent">
<div id="engine_deployedAlgo_ContentHolder"></div>
</div>
</div>
</div>
</div>
</div>
<div class="boxContainer">
<div class="boxBlock">
<div class="boxContent">
<div class="row-fluid">
<div class="span8">
<h4>Available Algorithms</h4>
<!-- TODO
<a href="#" disabled id="availableAlgoDeployBtn" class="btn btn-small btn-primary">
Deploy <i class="icon-play icon-white"></i>
</a>
-->
&nbsp;
<a href="#" disabled id="availableSimEvalBtn" class="btn btn-small btn-primary">
Run Simulated Evaluation <i class="icon-signal icon-white"></i>
</a>
&nbsp;
<a href="#engineAddAlgorithm" class="btn btn-info btn-small">Add an Algorithm &raquo;</a>
<div id="engine_availableAlgoList_ContentHolder">
<!-- template here -->
</div>
</div>
<div class="span4">
<div id="engine_simevalList_ContentHolder">
<!-- template here -->
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="engine_simevalList_template">
<h4>
Simulated Evaluation <i class="icon-signal icon-white"></i>
</h4>
<table
class="table table-bordered table-condensed smallContent table-hover">
<thead>
<tr>
<th>Created Date</th>
<th>Algo(s)</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- template here -->
</tbody>
</table>
</script>
<script type="text/template" id="engine_simeval_template">
<td><%= data.createtime %></td>
<td>
<%
var algoArray = [];
_.each(data.algolist, function(algo, index) {
algoArray.push(algo.algoname);
});
%>
<%= algoArray.join(', ') %>
</td>
<td>
<div class="btn-group dropup">
<button data-toggle="dropdown"
class="btn btn-mini btn-inverse dropdown-toggle">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#simEvalReport/<%= encodeURIComponent(data.id) %>">View Report</a></li>
<li><a class="simevalDeleteBtn" href="javascript:void(0);">Stop and Delete</a></li>
</ul>
</div>
</td>
</script>
<script type="text/template" id="engine_deployedAlgo_template">
<table class="table">
<thead>
<tr>
<th>Algo Name</th>
<th>Algorithm</th>
<th>Status</th>
<!-- TODO
<th>Running Since</th>
-->
</tr>
</thead>
<tbody>
<% _.each(data.algolist, function(algo, index) { %>
<tr>
<td><%= algo.algoname %></td>
<td><%= algo.algoinfoname %></td>
<td span="2">
<% if(index == 0) { %>
<div class="btn-group">
<button data-toggle="dropdown"
class="btn btn-mini btn-inverse dropdown-toggle">
<%= data.status %> <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<!-- TODO
<li><a href="#"><i class="icon-signal"></i> View Report</a></li>
<li><a href="#"><i class="icon-pencil"></i> Edit Deploy
Settings</a></li>
<li class="divider"></li>
-->
<li><a id="algoTrainNowBtn" href="javascript:void(0);">Train Data Model Now</a></li>
<li><a id="algoUndeployBtn" href="#">Undeploy</a></li>
</ul>
</div>
<% } %>
</td>
<!-- TODO
<td span="2" class="smallContent">
<% if(index == 0) { %>
<%= data.updatedtime %>
<% } %>
</td>
-->
</tr>
<% }); %>
</tbody>
</table>
</script>
<script type="text/template" id="engine_availableAlgoList_template">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Algo Name</th>
<th>Algorithm</th>
<th>Status</th>
<th>Last Updated</th>
</tr>
</thead>
<tbody>
<!-- template here -->
</tbody>
</table>
</script>
<script type="text/template" id="engine_availableAlgo_template">
<td>
<% if ( data.status == "ready") {%>
<input type="checkbox" name="avaalgoSelect" value="<%= data.id %>" />
<% } %>
</td>
<td><%= data.algoname %></td>
<td><%= data.algoinfoname %></td>
<td>
<% if ( data.status == "ready") {%>
<div class="btn-group dropup">
<button data-toggle="dropdown"
class="btn btn-mini btn-inverse dropdown-toggle">
Ready to Deploy<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a class="algoDeployBtn" href="#">Deploy</a></li>
<li><a href="#algoSettings/<%= data.algoinfoid %>/<%= data.algoname %>/<%= encodeURIComponent(data.id) %>">View/Edit Algorithm Settings</a></li>
<li><a href="#simEvalSettings/<%= encodeURIComponent(data.id) %>">Run Simulated Evaluation</a></li>
<li class="divider"></li>
<li><a class="algoDeleteBtn" href="#">Delete</a></li>
</ul>
</div>
<% } else { %>
<div class="btn-group dropup">
<button data-toggle="dropdown"
class="btn btn-mini btn-inverse dropdown-toggle">
<% if ( data.status == "tuning") {%>
<em>Auto-tuning...</em><span class="caret"></span>
<% } else { %>
Auto-tuning Completed<span class="caret"></span>
<% } %>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#algoAutotuningReport/<%= encodeURIComponent(data.id) %>">View Tuning Report</a></li>
<li class="divider"></li>
<li><a class="algoDeleteBtn" href="#">Delete</a></li>
</ul>
</div>
<% } %>
</td>
<td class="smallContent"><%= data.updatedtime %></td>
</script>
<script type="text/template" id="engine_addAlgorithm_template">
<div class="row-fluid bottomMargin">
<div class="span12">
<div class="boxContainer">
<div class="boxBlock">
<div class="boxtitle">Available Algorithms for <%= data.engineinfoname %></div>
<div class="boxContent">
<table class="table">
<thead>
<tr>
<th>Algorithm</th>
<th>Description</th>
<th>Requirement</th>
<th>Data Requirement</th>
<th></th>
</tr>
</thead>
<tbody>
<% _.each(data.algotypelist, function(algotype) { %>
<tr>
<td><%= algotype.algoinfoname %></td>
<td><%= algotype.description %></td>
<td><%= algotype.req %></td>
<td><%= algotype.datareq %></td>
<td>
<form>
<div class="input-append">
<input type="hidden" name="algoinfoid" value="<%= algotype.id%>"/>
<input class="btn-input span9" name="algoname" type="text" placeholder="type algo name..."/>
<button class="btn btn-primary" type="submit">Add</button>
</div>
<div class="addAlgoError text-error displayNone">Error text here</div>
</form>
</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="engineStatus_template">
<div class="row-fluid bottomMargin">
<div class="span12">
Engine Status: &nbsp;
<% if (data.enginestatus == "noappdata") { %>
<span class="label label-warning"><i class="icon-warning-sign icon-white"></i> Not Running: No Data. Please import some data.</span>
<% } else if (data.enginestatus == "nodeployedalgo") { %>
<span class="label label-warning"><i class="icon-warning-sign icon-white"></i> Not Running: Please deploy an algorithm.</span>
<% } else if (data.enginestatus == "nomodeldata") { %>
<span class="label label-warning"><i class="icon-warning-sign icon-white"></i> Not Running: Waiting for the the first-time data model training.</span>
<% } else if (data.enginestatus == "nomodeldatanoscheduler") { %>
<span class="label label-warning"><i class="icon-warning-sign icon-white"></i> Not Running: Waiting for the the first-time data model training. (Scheduler is unreachable)</span>
<% } else if (data.enginestatus == "firsttraining") { %>
<span class="label label-warning"><i class="icon-warning-sign icon-white"></i> Not Running: Training the first data model.</span>
<% } else if (data.enginestatus == "training") { %>
<span class="label label-info">Running (Last Successful Training: <%= data.lasttraintime %>) (training data model) <i class="icon-ok icon-white"></i></span>
<% } else if (data.enginestatus == "runningnoscheduler") { %>
<span class="label label-warning"><i class="icon-warning-sign icon-white"></i> Running (Last Successful Training: <%= data.lasttraintime %>) (Scheduler is unreachable)</span>
<% } else if (data.enginestatus == "running") { %>
<span class="label label-info">Running (Last Successful Training: <%= data.lasttraintime %>) <i class="icon-ok icon-white"></i></span>
<% } else { %>
<span class="label label-warning"><i class="icon-warning-sign icon-white"></i> Not Running: Undetermined error</span>
<% } %>
&nbsp;&nbsp;<a href="javascript:void(0);" id="engineStatusReloadBtn" title="refresh engine status"><i class="icon-refresh"></i></a>
</div>
</div>
</script>
<script type="text/template" id="engine_template">
<div class="row-fluid">
<div class="span10 offset1">
<div class="alert alert-block alert-error displayNone">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Error placeholder here.... It should be
hidden by default. For now, please click the 'x' button.
</div>
<!-- breadcrumb -->
<div id="breadcrumb_ContentHolder"></div>
<div id="engineStatus_ContentHolder"></div>
<div id="engineTab" class="row-fluid">
<div class="span12">
<div class="pull-right">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-inverse btn-small dropdown-toggle">Engine Control <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="deleteEngineBtn" href="#">Delete this Engine</a></li>
</ul>
</div>
</div>
<ul class="nav nav-tabs" id="engineTab">
<li><a id="engineTabSettingsBtn" href="#engineTabSettings">Engine</a></li>
<li><a id="engineTabAlgorithmsBtn" href="#engineTabAlgorithms">Algorithms</a></li>
<li id="engineExtraTabTitle" class="displayNone"><a onclick="return false;" id="engineExtraTabBtn" href="#engineExtraTab">-</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="engineTabSettings">
<h4>Prediction Settings</h4>
<div id="engineTabSettingsContentHolder">
<!-- engine settings template -->
</div>
</div>
<div class="tab-pane" id="engineTabAlgorithms">
<div id="engineTabAlgorithmsContentHolder">
<!-- engine algorithms tab template -->
</div>
</div>
<div class="tab-pane" id="engineExtraTab">
<div id="engineExtraTabContentHolder">
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="engine_algoAutotuningReport_template">
<%
var algo = {};
var metric = {}
if (data.algo) {
algo = data.algo;
}
if (data.metric) {
metric = data.metric;
}
%>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal">
<div class="modal modal-visible">
<div class="modal-header">
<h4>Algorithm Autotuning Report for <%= algo.algoname%></h4>
</div>
<div class="modal-body">
<div class="bottomMargin">
<p>Auto-tuning Status: <%= data.status %></p>
<p>Start Time: <%= data.starttime %></p>
<p>End Time: <%= data.endtime %></p>
<h5 class="topMargin">Targeted Algorithm</h5>
<span>Algo Name: <%= algo.algoname %></span>
<span class="leftMargin">Algo Type: <%= algo.algoinfoname %></span>
<h5 class="topMargin">Data Split Settings</h5>
<span>Train Set: <%= data.splittrain %>%</span>
<span class="leftMargin">Validation Set: <%= data.splitvalidation %>%</span>
<span class="leftMargin">Test Set: <%= data.splittest %>%</span>
<div>
<%= data.splittersettingsstring %>
</div>
<h5 class="topMargin">Metric</h5>
<span>Name: <%= metric.metricsname %> (<%= metric.settingsstring %>)</span>
<span class="leftMargin">Number of Iteration: <%= data.evaliteration %></span>
</div>
<h4 class="topMargin-large">Average Results</h4>
<table class="table bottomMargin-large">
<thead>
<tr>
<th>Param Settings</th>
<th>Score</th>
<th></th>
</tr>
</thead>
<tbody>
<% _.each(data.metricscorelist, function(m, index) { %>
<tr>
<td><%= m.algoinfoname %>: <%= m.settingsstring %></td>
<td><%= m.score %></td>
<td>
<!-- NOTE: index 0 is baseline algo -->
<% if(index != 0) { %>
<a href="#" data-autotuneid="<%= m.algoautotuneid %>" class="algoAutotuneSelectBtn btn btn-primary btn-small">Use It</a>
<% } %>
</td>
</tr>
<% }); %>
</tbody>
</table>
<% _.each(data.metricscoreiterationlist, function(iterationscorelist, index) { %>
<h6>Results in Iteration <%= index+1 %></h6>
<table class="table">
<thead>
<tr>
<th>Param Settings</th>
<th>Score</th>
<th></th>
</tr>
</thead>
<tbody>
<% _.each(iterationscorelist, function(m) { %>
<tr>
<td><%= m.algoinfoname %>: <%= m.settingsstring %></td>
<td><%= m.score %></td>
<td></td>
</tr>
<% }); %>
</tbody>
</table>
<% }); %>
</div>
</div>
</form>
</div>
</div>
</script>
<script type="text/template" id="engine_simEvalReport_template">
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal">
<div class="modal modal-visible">
<div class="modal-header">
<h4>Simulated Evaluation Report</h4>
</div>
<div class="modal-body">
<div class="bottomMargin">
<p>Simulated Evaluation Status: <%= data.status %></p>
<p>Start Time: <%= data.starttime %></p>
<p>End Time: <%= data.endtime %></p>
<h5>Data Split Settings:</h5>
<span>Train Set: <%= data.splittrain %>%</span>
<!-- 3-part split
<span class="leftMargin">Validation Set: <%= data.splitvalidation %>%</span>
-->
<span class="leftMargin">Test Set: <%= data.splittest %>%</span>
<div>
<%= data.splittersettingsstring %>
</div>
</div>
<h5>Algorithms</h5>
<p>Settings of algorithms at the time of evaluation.</p>
<div class="well">
<ul>
<% _.each(data.algolist, function(algo) { %>
<li><%= algo.algoname %>
<p><%= algo.algoinfoname %> (<%= algo.settingsstring %>)</p>
</li>
<% }); %>
</ul>
</div>
<h4>Average Results</h4>
<% // create result matrix
var result = {};
_.each(data.algolist, function(algo) {
result[algo.id] = {};
});
_.each(data.metricscorelist, function(s) {
result[s.algoid][s.metricsid] = s.score;
});
%>
<table class="table bottomMargin-large">
<thead>
<tr>
<th>Algorithm ID</th>
<% _.each(data.metricslist, function(metrics) { %>
<th><%= metrics.metricsname%> (<%= metrics.settingsstring%>)</th>
<% }); %>
</tr>
</thead>
<tbody>
<% _.each(data.algolist, function(algo) { %>
<tr>
<td><%= algo.algoname %></td>
<% _.each(data.metricslist, function(metrics) { %>
<td><%= result[algo.id][metrics.id] %></td>
<% }); %>
</tr>
<% }); %>
</tbody>
</table>
<% _.each(data.metricscoreiterationlist, function(iterationscorelist, index) { %>
<h6>Results in Iteration <%= index+1 %></h6>
<% // create result matrix
var result = {};
_.each(data.algolist, function(algo) {
result[algo.id] = {};
});
_.each(iterationscorelist, function(s) {
result[s.algoid][s.metricsid] = s.score;
});
%>
<table class="table">
<thead>
<tr>
<th>Algorithm ID</th>
<% _.each(data.metricslist, function(metrics) { %>
<th><%= metrics.metricsname%> (<%= metrics.settingsstring%>)</th>
<% }); %>
</tr>
</thead>
<tbody>
<% _.each(data.algolist, function(algo) { %>
<tr>
<td><%= algo.algoname %></td>
<% _.each(data.metricslist, function(metrics) { %>
<td><%= result[algo.id][metrics.id] %></td>
<% }); %>
</tr>
<% }); %>
</tbody>
</table>
<% }); %>
</div>
</div>
</form>
</div>
</div>
</script>
<script type="text/template" id="engine_simEvalSettingsMetrics_template">
<li class="bottomMargin">
<div class="bottomMargin">
<select name="infoid[<%= data.index %>]" class="span6 changeMetricsSelect">
<% _.each(data.metricslist, function(metrics) { %>
<% if ( metrics.id == this.defaultmetric ) { %>
<option value="<%= metrics.id %>" selected><%= metrics.description %> (<%= metrics.name %>)</option>
<% } else { %>
<option value="<%= metrics.id %>"><%= metrics.description %> (<%= metrics.name %>)</option>
<% } %>
<% }, data); %>
</select>
<span>&nbsp;&nbsp;&nbsp;&nbsp;[<a href="#" class="deleteMetricsBtn"> remove </a>]
</span>
</div>
<div id="metricSetting_Holder">
</div>
</li>
</script>
<script type="text/template" id="engine_simEvalSettings_template">
<div class="row-fluid">
<div class="span10 offset1">
<form id="simEvalSettingsForm" class="form-horizontal">
<div class="modal modal-visible">
<div class="modal-header">
<h4>Simulated Evaluation</h4>
</div>
<div class="modal-body">
<h5>Algorithms to be Evaluated</h5>
<div class="well">
<ul>
<% _.each(data.algoList, function(algo, index) { %>
<li><%= algo.algoname %><input type="hidden" value="<%= algo.id %>" name="algoids[<%= index %>]"/></li>
<% }); %>
</ul>
</div>
<h5 class="topMargin-large">Metrics <small><!-- TODO [<a href="#">?</a>] --> </small></h5>
<p>
The above algorithms will be evaluated against the following metrics.
</p>
<ul id="metrics_list_ContentHolder">
</ul>
<a href="#" id="addMetricsBtn" class="btn btn-small btn-inverse">Add Another Metric</a>
<h5 class="topMargin-large">Data Split</h5>
<p class="bottomMargin">Adjust the slider to specify how you want to split data into Train Set and Test Set.</p>
<!-- 3-part split
<table id="dataSplitBar" width="70%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="selection" width="55%"><span>Train Set</span></td>
<td class="selection" width="20%"><span>Validation Set</span></td>
<td class="selection" width="15%"><span>Test Set</span></td>
<td width="10%"></td>
</tr>
</table>
-->
<table id="dataSplitBar" width="70%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="selection" width="60%"><span>Train Set</span></td>
<td class="selection" width="20%"><span>Test Set</span></td>
<td width="20%"></td>
</tr>
</table>
<div class="topMargin">
<!-- 3-part split
<span>Train: </span><input class="span1" readonly type="text" id="splittrain" name="splittrain" value="55">%
<span class="leftMargin">Validation: </span><input class="span1" readonly type="text" id="splitvalidation" name="splitvalidation" value="20">%
<span class="leftMargin">Test: </span><input class="span1" readonly type="text" id="splittest" name="splittest" value="15">%
-->
<span>Train: </span><input class="span1" readonly type="text" id="splittrain" name="splittrain" value="60">%
<span class="leftMargin">Test: </span><input class="span1" readonly type="text" id="splittest" name="splittest" value="20">%
</div>
<div class="topMargin-large" id="splitterSetting_Holder">
</div>
<h5 class="topMargin-large">Iteration</h5>
<p>You may want to repeat the evaluation for a few times with different sampling. An average score will be reported.</p>
<div class="topMargin">
<span>Number of Iteration: </span><input class="span1" type="text" name="evaliteration" value="3">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary input-medium">Run Now</button>
</div>
</div>
</form>
</div>
</div>
</script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="wrapper">
<!-- sticky footer -->
<div id="headbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse"> <span class="icon-bar"></span> <span
class="icon-bar"></span> <span class="icon-bar"></span>
</a> <a class="brand" href="?#appsDashboard"><img width="130px"
src="assets/images/predictionio.png" /></a>
<div id="navBar" class="nav-collapse collapse">
<ul class="nav">
<!-- <li><a href="#about">Processing Tasks <span class="badge badge-info">0</span></a></li> -->
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://docs.prediction.io" target="_blank">PredictionIO Docs</a></li>
<li><a href="http://prediction.io/download">Download SDKs</a></li>
<li><a href="https://github.com/PredictionIO">View Source Code</a></li>
<li class="divider"></li>
<li class="nav-header">Support</li>
<li><a href="https://groups.google.com/#predictionio-user">Google Group</a></li>
<li><a href="http://www.twitter.com/predictionio">Twitter</a></li>
</ul></li>
</ul>
<div id="AuthHolder"></div>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div id="mainarea" class="container-fluid">
<div id="ContentHolder"></div>
</div>
<div id="dialog_template" class="hide" title="Confirm?">
<div>
<span id="dialog_text">Are you sure?</span>
</div>
</div>
<div class="push"></div>
<!-- sticky footer -->
</div>
<div class="footer">
<hr />
<footer>
<p>PredictionIO Community Edition core is released under the
AGPL License, SDKs under Apache License and documentation under
Creative Common.</p>
<p>
<a href="http://groups.google.com/group/predictionio-user" target="_blank">Contact Us</a> | <a href="http://predictionio.atlassian.net/" target="_blank">Report Bugs</a> | <a href="https://github.com/PredictionIO/" target="_blank">Contribute
Codes</a>
</p>
</footer>
</div>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
window.jQuery
|| document
.write('<script type="text/javascript" src="assets/javascripts/vendors/jquery-1.8.3.min.js"><\/script>')
</script>
<script type="text/javascript"
src="assets/javascripts/vendors/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript"
src="assets/javascripts/vendors/bootstrap.min.js"></script>
<script type="text/javascript"
src="assets/javascripts/vendors/underscore-min.js"></script>
<script type="text/javascript"
src="assets/javascripts/vendors/json2.js"></script>
<script type="text/javascript"
src="assets/javascripts/vendors/backbone-min.js"></script>
<script type="text/javascript" src="assets/javascripts/core.js?v=20130320-1"></script>
<script type="text/javascript" src="assets/javascripts/vendors/toastr-1.2.2.min.js"></script>
<script type="text/javascript" src="assets/javascripts/vendors/colResizable-1.3.min.js"></script>
</body>
</html>