Files
ray/python/ray/tune/automlboard/templates/trial.html
T

157 lines
9.2 KiB
HTML

<html>
<head>
<title>AutoMLBoard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load staticfiles %}
<!-- jquery and bootstrap dependency -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- bootstrap table dependency -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/App.css">
<link rel="stylesheet" href="/static/css/HomePage.css">
<link rel="stylesheet" href="/static/css/ExperimentView.css">
<script src="/static/js/ExperimentList.js"></script>
<link rel="stylesheet" href="/static/css/ExperimentList.css">
<!-- awesome dependency -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="margin-right: auto;margin-left: auto;">
<a class="navbar-brand" href="#" style="padding-left: 50px">AutoMLBoard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/ray-project/ray">Github</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://ray.readthedocs.io/">Document</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="max-width: none">
<div class="outer-container row" id = "row-main">
<div class="HomePage-experiment-list-container col-md-2" id="sidebar">
<div>
<div class="collapsed-expander-container">
<div class="experiment-list-outer-container">
<div><h1 class="experiments-header" style="padding-right: 80px">Trials</h1>
<div class="collapser-container" onclick="collapse_experiment_list()">
<i class="collapser fa fa-chevron-left login-icon"></i>
</div>
<div class="experiment-list-container" style="height: 800px;">
<ul class="nav nav-pills flex-column">
{% for trial in recent_trials %}
<tr>
<li class="nav-item">
<a class="nav-link" href="trial?job_id={{ trial.job_id }}&trial_id={{ trial.trial_id }}">Trial-{{ trial.trial_id }}</a>
</li>
</tr>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="experiment-view-container col-md-8" id="content">
<div class="ExperimentPage">
<div>
<div class="ExperimentView">
<h1>Trial-{{ current_trial.trial_id }}</h1>
<hr class="divider"/>
<div class="metadata" style="max-width: 900px;">
<span class="metadata">
<span class="metadata-header">Status:</span>
{{ current_trial.trial_status }}
</span>
<br>
<span class="metadata" style="line-height: 40px">
<span class="metadata-header">Start Time:</span>
{{ current_trial.start_time }}
</span>
<span class="metadata" style="line-height: 40px">
<span class="metadata-header">End Time:</span>
{{ current_trial.end_time }}
</span>
<br>
</div>
<div class="metadata" style="margin-top: 20px">
<button disabled="" type="button" class="btn btn-default"
style="width: 80px; max-height: 35px; margin-right: 10px">Kill</button>
<a href="/job?job_id={{ job_id }}">
<button type="button" class="btn-primary btn btn-default"
style="width: 80px; max-height: 35px; margin-right: 20px">Return</button>
</a>
</div>
<hr class="divider"/>
<div class="ExperimentView-runs">
<table class="table table-hover"
id="trial_table"
data-toggle="table"
data-show-columns="true"
data-show-export="true"
data-minimum-count-columns="2"
data-id-field="id"
data-show-pagination-switch="true"
data-page-list="[10, 25, 50, 100, ALL]"
data-pagination="true"
style="border: none; max-height: 800px">
<thead>
<tr class="active">
<th class="bottom-row" data-field="Trial ID" data-sortable="true">Trial Id</th>
<th class="bottom-row" data-field="Timesteps" data-sortable="true">Timesteps</th>
<th class="bottom-row" data-field="Train Iteration" data-sortable="true">Train Iteration</th>
<th class="bottom-row" data-field="Episode Reward Mean" data-sortable="true">Episode Reward Mean</th>
<th class="bottom-row" data-field="Episodes Total" data-sortable="true">Episodes Total</th>
<th class="bottom-row" data-field="Mean Accuracy" data-sortable="true">Mean Accuracy</th>
<th class="bottom-row" data-field="Mean Loss" data-sortable="true">Mean Loss</th>
<th class="bottom-row" data-field="Time Total" data-sortable="true">Time Total</th>
<th class="bottom-row" data-field="Date" data-sortable="true">Date</th>
<th class="bottom-row" data-field="Hostname" data-sortable="true">Hostname</th>
</tr>
</thead>
<tbody>
{% for result in recent_results %}
<tr>
<td>{{ result.trial_id }}</td>
<td>{{ result.timesteps_total }}</td>
<td>{{ result.trainning_iteration }}</td>
<td>{{ result.episode_reward_mean }}</td>
<td>{{ result.episodes_total }}</td>
<td>{{ result.mean_accuracy }}</td>
<td>{{ result.loss }}</td>
<td>{{ result.time_total_s }}</td>
<td>{{ result.date }}</td>
<td>{{ result.hostname }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="experiment-view-right"></div>
</div>
</div>
</body>
</html>