mirror of
https://github.com/wassname/metacar.git
synced 2026-09-07 17:00:35 +08:00
123 lines
5.0 KiB
HTML
123 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Metacar: A reinforcement learning environment for self-driving cars in the browser.</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">
|
||
<h2>Metacar</h2>
|
||
<h3>A reinforcement learning environment for self-driving cars in the browser.</h3>
|
||
<pre><code data-language="javascript"> const env = new metacar.env("canvas", metacar.level.fullCity);<br> env.load();</code></pre>
|
||
<p>
|
||
Learn how to start with metacar by reading the <a href="https://github.com/thibo73800/metacar">documentation</a>.
|
||
</p>
|
||
|
||
<br><br><br>
|
||
<h3>Check out examples of algorithms created with <b>metacar</b></h3>
|
||
<br><br><br>
|
||
|
||
<div class="level_link_box" style="height: 300px;">
|
||
<a href="/qtable.html"><img class="floatleft" src="/public/img/level0.png" /></a>
|
||
<h4>
|
||
<br><a href="/qtable.html">Discrete Actions</a>
|
||
</h4>
|
||
<p>
|
||
Algorithm: <b>Q-learning with table</b> <br><br>
|
||
In this example, the goal is to demonstrate a simple working example of a reinforcement learning
|
||
algorithm using the metacar environment. You can check out
|
||
<a href="/qtable.html">the demo</a> or take a look at the <a href="#">medium tutorial</a>.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="level_link_box" style="height: 298px;">
|
||
<a href="/policy.html"><img class="floatright" src="/public/img/level1.png" /></a>
|
||
<h4>
|
||
<br><a href="/policy.html">Discrete Actions in traffic</a>
|
||
</h4>
|
||
<p>
|
||
Algorithm: <b>Policy gradient algorithm based on Monte Carlo exploration (REINFORCE).</b> <br><br>
|
||
|
||
The neural network is build using <a href="http://js.tensorflow.org">tensorflow.js</a>. Check out <a href="/policy.html"> the demo</a>.
|
||
<br><br>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="level_link_box" style="height: 263px;">
|
||
<a href="/ddpg.html"><img width="393px" class="floatleft" src="/public/img/ddpg.png" /></a>
|
||
<h4>
|
||
<br><a href="/ddpg.html">Continous Actions</a>
|
||
</h4>
|
||
<br>
|
||
<ul style="margin:0;">
|
||
<li><b>Deep Deterministic Policy Gradients (DDPG): <a href="https://arxiv.org/abs/1509.02971">paper</a></b> </li>
|
||
<li><b>Parameter Space Noise for Exploration</b>: <a href="https://blog.openai.com/better-exploration-with-parameter-noise/">paper</a> </li>
|
||
</ul>
|
||
|
||
<p>
|
||
The control is based on two continuous values for the throttle and steering angle of the car.
|
||
The model is made using <a href="http://js.tensorflow.org">tensorflow.js</a>
|
||
</p>
|
||
</div>
|
||
|
||
|
||
<div class="level_link_box" style="height: 263px;">
|
||
<a href="/ddpg-traffic.html"><img width="366px" class="floatright" src="/public/img/ddpg-traffic.png" /></a>
|
||
<h4>
|
||
<br><a href="/ddpg-traffic.html">Continous Actions in traffic</a>
|
||
</h4>
|
||
<br>
|
||
<ul style="margin:0;">
|
||
<li><b>Deep Deterministic Policy Gradients (DDPG): <a href="https://arxiv.org/abs/1509.02971">paper</a></b> </li>
|
||
<li><b>Parameter Space Noise for Exploration</b>: <a href="https://blog.openai.com/better-exploration-with-parameter-noise/">paper</a> </li>
|
||
</ul>
|
||
<p>
|
||
The control is based on two continuous values for the throttle and steering angle of the car.
|
||
The model is made using <a href="http://js.tensorflow.org">tensorflow.js</a>
|
||
<br><br>
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="level_link_box" style="height: 261px;">
|
||
<a href="/editor.html"><img class="floatleft" src="/public/img/editor.png" /></a>
|
||
<h4>
|
||
<br><a href="/editor.html">Create your own level!</a>
|
||
</h4>
|
||
<p>
|
||
Metacar lets you edit your own level using the <a href="/editor.html">the editor</a>.
|
||
Also, you’re more than welcome to <a href="https://github.com/thibo73800/metacar">contribute</a> to the project.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
|
||
<script src="/dist/metacar.min.js"></script>
|
||
|
||
<script type="text/javascript" src="/public/js/index.js"></script>
|
||
</body>
|
||
</html>
|