443 lines
23 KiB
HTML
443 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>COM2014 TSP Workshop</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<!-- Bootstrap -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
|
|
|
|
<!-- Jquery -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
|
|
|
|
<!-- SocketIO -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
|
|
|
|
<!-- Console Log -->
|
|
<script type="application/javascript" src="//cdn.rawgit.com/Alorel/console-log-html/master/console-log-html.min.js"></script>
|
|
|
|
<!-- FullPage -->
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>
|
|
|
|
<!-- File Input -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.3/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.3/js/fileinput.min.js"></script>
|
|
<script src="/themes/fas/theme.js" type="text/javascript"></script>
|
|
<script src="/themes/explorer-fas/theme.js" type="text/javascript"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" />
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/node-snackbar@0.1.16/src/js/snackbar.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/css/snackbar.min.css" />
|
|
|
|
<!-- My Script -->
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<script src="/js/script.js"></script>
|
|
<script src="/js/socket_script.js"></script>
|
|
|
|
</head>
|
|
|
|
<body data-spy="scroll" data-target="#main-nav" data-offset="0">
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top" id="main-nav">
|
|
<a class="navbar-brand" href="/">TSP Workshop <span class="badge badge-primary" id="status"><span id="user_counts">0</span> Online</span></a>
|
|
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
|
|
<span class="navbar-toggler-icon "></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
|
|
<ul class="nav navbar-nav ml-auto">
|
|
<li class="nav-item" >
|
|
<a class="nav-link" href="#overview">Overview</a>
|
|
</li>
|
|
<li class="nav-item" >
|
|
<a class="nav-link" href="#leaderboard">Leaderboard</a>
|
|
</li>
|
|
<li class="nav-item" >
|
|
<a class="nav-link" href="#submission">Submission</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="fullpage">
|
|
<div id="overview">
|
|
<section class="section" id="section2">
|
|
<div class="slide">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="display-4 mt-5 mb-5 text-center">Traveling Salesman Problem</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-5">
|
|
<div class="col-12">
|
|
<div class="embed-responsive embed-responsive-16by9 box-shadow">
|
|
<iframe class="embed-responsive-item" src="/preview.html" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<div id="leaderboard">
|
|
<section id="tabs" class="section project-tab" id="section0">
|
|
<div class="slide">
|
|
<div class="container">
|
|
<div class="row text-center">
|
|
<div class="col-12">
|
|
<div class="display-4 mb-5">Leaderboard</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<nav>
|
|
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
|
|
<a class="nav-item nav-link active" id="nav-ulysses16-tab" data-toggle="tab" href="#nav-ulysses16" role="tab" aria-controls="nav-ulysses16" aria-selected="true">ulysses16</a>
|
|
<a class="nav-item nav-link" id="nav-att48-tab" data-toggle="tab" href="#nav-att48" role="tab" aria-controls="nav-att48" aria-selected="false">att48</a>
|
|
<a class="nav-item nav-link" id="nav-st70-tab" data-toggle="tab" href="#nav-st70" role="tab" aria-controls="nav-st70" aria-selected="false">st70</a>
|
|
<a class="nav-item nav-link" id="nav-a280-tab" data-toggle="tab" href="#nav-a280" role="tab" aria-controls="nav-a280" aria-selected="false">a280</a>
|
|
<a class="nav-item nav-link" id="nav-pcb442-tab" data-toggle="tab" href="#nav-pcb442" role="tab" aria-controls="nav-pcb442" aria-selected="false">pcb442</a>
|
|
<a class="nav-item nav-link" id="nav-dsj1000-tab" data-toggle="tab" href="#nav-dsj1000" role="tab" aria-controls="nav-dsj1000" aria-selected="false">dsj1000</a>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active" id="nav-ulysses16" role="tabpanel" aria-labelledby="nav-ulysses16-tab">
|
|
<table class="table leaderboard-table" cellspacing="0">
|
|
<thead class="thead-dark ">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Fitness</th>
|
|
<th>Remark</th>
|
|
<th>Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="ulysses16-last">
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-att48" role="tabpanel" aria-labelledby="nav-att48-tab">
|
|
<table class="table leaderboard-table" cellspacing="0">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Fitness</th>
|
|
<th>Remark</th>
|
|
<th>Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="att48-last">
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-st70" role="tabpanel" aria-labelledby="nav-st70-tab">
|
|
<table class="table leaderboard-table" cellspacing="0">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Fitness</th>
|
|
<th>Remark</th>
|
|
<th>Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="st70-last">
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-a280" role="tabpanel" aria-labelledby="nav-a280-tab">
|
|
<table class="table leaderboard-table" cellspacing="0">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Fitness</th>
|
|
<th>Remark</th>
|
|
<th>Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="a280-last">
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-pcb442" role="tabpanel" aria-labelledby="nav-pcb442-tab">
|
|
<table class="table leaderboard-table" cellspacing="0">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Fitness</th>
|
|
<th>Remark</th>
|
|
<th>Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="pcb442-last">
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="tab-pane fade" id="nav-dsj1000" role="tabpanel" aria-labelledby="nav-dsj1000-tab">
|
|
<table class="table leaderboard-table" cellspacing="0">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Fitness</th>
|
|
<th>Remark</th>
|
|
<th>Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr id="dsj1000-last">
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
<td> - </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="submission">
|
|
<section class="section" id="section1">
|
|
<div class="slide">
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<h1 class="mt-5 mb-5">Your Submission</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<table class="table">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th scope="col">Problem</th>
|
|
<th scope="col">Your Solution</th>
|
|
<th scope="col">Best Solution</th>
|
|
<th scope="col">Download</th>
|
|
<th scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="col">ulysses16</th>
|
|
<td id="ulysses16_your">Inf</td>
|
|
<td id="ulysses16_best">Inf</td>
|
|
<td id="ulysses16_download">
|
|
<a href="" target="_blank"><span class="badge badge-primary link">txt</span></a> <a href="" target="_blank"><span class="badge badge-success link">json</span></a>
|
|
</td>
|
|
<td>
|
|
<button type="submit" class="btn btn-primary" id="ulysses16_submit">Submit</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">att48</th>
|
|
<td id="att48_your">Inf</td>
|
|
<td id="att48_best">Inf</td>
|
|
<td id="att48_download">
|
|
<a href="" target="_blank"><span class="badge badge-primary link">txt</span></a> <a href="" target="_blank"><span class="badge badge-success link">json</span></a>
|
|
</td>
|
|
<td>
|
|
<button type="submit" class="btn btn-primary" id="att48_submit">Submit</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">st70</th>
|
|
<td id="st70_your">Inf</td>
|
|
<td id="st70_best">Inf</td>
|
|
<td id="st70_download">
|
|
<a href="" target="_blank"><span class="badge badge-primary link">txt</span></a> <a href="" target="_blank"><span class="badge badge-success link">json</span></a>
|
|
</td>
|
|
<td>
|
|
<button type="submit" class="btn btn-primary" id="st70_submit">Submit</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">a280</th>
|
|
<td id="a280_your">Inf</td>
|
|
<td id="a280_best">Inf</td>
|
|
<td id="a280_download">
|
|
<a href="" target="_blank"><span class="badge badge-primary link">txt</span></a> <a href="" target="_blank"><span class="badge badge-success link">json</span></a>
|
|
</td>
|
|
<td>
|
|
<button type="submit" class="btn btn-primary" id="a280_submit">Submit</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">pcb442</th>
|
|
<td id="pcb442_your">Inf</td>
|
|
<td id="pcb442_best">Inf</td>
|
|
<td id="pcb442_download">
|
|
<a href="" target="_blank"><span class="badge badge-primary link">txt</span></a> <a href="" target="_blank"><span class="badge badge-success link">json</span></a>
|
|
</td>
|
|
<td>
|
|
<button type="submit" class="btn btn-primary" id="pcb442_submit">Submit</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="col">dsj1000</th>
|
|
<td id="dsj1000_your">Inf</td>
|
|
<td id="dsj1000_best">Inf</td>
|
|
<td id="dsj1000_download">
|
|
<a href="" target="_blank"><span class="badge badge-primary link">txt</span></a> <a href="" target="_blank"><span class="badge badge-success link">json</span></a>
|
|
</td>
|
|
<td>
|
|
<button type="submit" class="btn btn-primary" id="dsj1000_submit">Submit</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3" id="submission_info">
|
|
<div class="col col-4">
|
|
<label for="">Your Name</label>
|
|
<input class="form-control form-control-lg" type="text" placeholder="Your Name" id="submit_name">
|
|
</div>
|
|
<div class="col col-8">
|
|
<label for="">Description</label>
|
|
<input class="form-control form-control-lg" type="text" placeholder="Precisely describe your submission." id="submit_desc">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<form class="" method="POST" enctype="multipart/form-data" id="fileUploadForm">
|
|
<div class="form-group">
|
|
<input type="file" class="form-control form-control-lg form-control-file mb-3" id="uploadfile" placeholder="Upload File" name="uploadfile" accept=".py" data-browse-on-zone-click="true" data-allowed-file-extensions='["py"]' ></input>
|
|
<button type="submit" class="btn btn-primary form-control mt-3" id="btnSubmit" disabled>Upload</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
<div class="row mb-5" id="console-box">
|
|
<div class="col col-12">
|
|
<ul id="console"></ul> <!-- I will hold the log messages -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Congradulations</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Your model has been uploaded, nice work!
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="resultModalLabel">Congradulations</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Hi, here's your result.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<!-- SubFooter -->
|
|
<footer id="sub-footer" class="subfooter">
|
|
<div class="container">
|
|
<div class="row p-4">
|
|
<div class="col-md-4 about">
|
|
<span>ABOUT ETAL</span>
|
|
<p class="text-justify font-weight-light small">
|
|
Exeter Trustworthy AI Lab (ETAL) Group is affiliated with College of Engineering, Mathematics and Physical Sciences, University of Exeter, UK.</span>
|
|
</p>
|
|
</div>
|
|
<div class="d-none d-md-block col-md-4 link">
|
|
<img class="exeter" alt="" srcset="">
|
|
</div>
|
|
<div class="d-none d-md-block col-md-4 link">
|
|
<img class="russell" alt="" srcset="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Footer -->
|
|
<footer id="main-footer" class="footer text-center">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md">
|
|
<span>Copyright © Exeter Trustworthy AI Lab</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |