mirror of
https://github.com/wassname/metacar.git
synced 2026-08-23 12:20:28 +08:00
63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Metacar: Discrete Actions.</title>
|
|
<link rel="icon" href="/public/img/icon.png">
|
|
<link rel="stylesheet" href="/public/css/general.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="header_container">
|
|
<h1><a href="/">Metacar</a></h1>
|
|
<a href="https://github.com/thibo73800/metacar"><img src="/public/img/github-logo.png" /></a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="canvas_container">
|
|
<!--
|
|
You just have to add a div with an ID as bellow and include the js to start
|
|
using metacar.
|
|
-->
|
|
<div class="canvas" id="canvas"></div>
|
|
</div>
|
|
|
|
<div class="body_container">
|
|
<h3>Current state (Lidar points)</h3><br><br>
|
|
<div id="realtime_viewer" style="float: left"></div>
|
|
<p>
|
|
<b>Q-learning</b> algorithm with table. <br>
|
|
|
|
You can use the <b>arrow keys</b> to control the car by yourself.<br><br>
|
|
|
|
Click on <b>"Load trained agent"</b> to load the model. Then click on <b>"Play"</b>
|
|
to see the result. <br><br>
|
|
|
|
The left window gives you an overview of what the autonomous vehicle (in red) sees.<br><br>
|
|
|
|
The algorithm is implemented <a a href="https://github.com/thibo73800/metacar/blob/master/demo/webapp/public/js/q_table_agent.js">here</a> using <a href="https://github.com/thibo73800/metacar">the metacar environement.</a>
|
|
|
|
You can see below the content of the Q-table once the model is loaded.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="body_container">
|
|
<h3>Q-table</h3><br>
|
|
<div id="q_table"></div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.6"> </script>
|
|
<script src="/dist/metacar.min.js"></script>
|
|
|
|
<script type="text/javascript" src="/public/js/utils.js"></script>
|
|
<script type="text/javascript" src="/public/js/viewer.js"></script>
|
|
|
|
<script type="text/javascript" src="/public/js/q_table/q_table_agent.js"></script>
|
|
<script type="text/javascript" src="/public/js/q_table/index.js"></script>
|
|
|
|
</body>
|
|
</html>
|