learning/learn.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>It's Alive!</title>
    <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
</head>
<script> window.tiny_graphics = {};             // Store all our JavaScipt code inside of classes here.
window.classes = {}
</script>
<body>

<div class="body_container">
    <h3 id="trainingProgress"></h3>
</div>

<div class="canvas-widget" id="main-canvas"></div>
<style>
    * { font-family: monospace }
    body { background: DarkGray }
    div { background: white }
    canvas { width: 1200px; height: 600px; margin-bottom:-3px }
    .canvas-widget { width: 1200px; background: DimGray }
    table { border-collapse: collapse; display:block; overflow-x: auto; }
    table.control-box { width: 1200px; border:0; margin:0; max-height:380px; transition:.5s; overflow-y:scroll; background:DimGray }
    table.control-box:hover { max-height:500px }
    table.control-box td { overflow:hidden; border:0; background:DimGray; border-radius:30px }
    table.control-box td .control-div { background: #EEEEEE; height:338px; padding: 5px 5px 5px 30px; box-shadow: 25px 0px 60px -15px inset }
    table.control-box td * { background:transparent }
    table.control-box .control-div td { border-radius:unset }
    table.control-box .control-title { padding:7px 40px; color:white; background:DarkSlateGray; box-shadow: 25px 0px 70px -15px inset black }
    .live_string { display:inline-block; background: unset }
    table, th, td { border: 2px solid black; vertical-align: top; white-space: nowrap }
    button { background: #4C9F50; color: white; padding: 6px; border-radius:9px;
        box-shadow: 4px 6px 16px 0px rgba(0,0,0,0.3); transition: background .3s, transform .3s }
    button:hover, button:focus { transform: scale(1.3); color:gold }
    .link { text-decoration:underline; cursor: pointer }
    .show { transform: scaleY(1); height:200px; overflow:auto }
    .hide { transform: scaleY(0); height:0px; overflow:hidden  }
</style>
<br>
<div class="body_container" id="statContainer" style="position:relative"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.6"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
<script src="../tiny-graphics.js" ></script>  <!--  Javascript "include" files.  Any code in them gets executed as part of the page loading. //-->
<script src=  "../dependencies.js" ></script>
<script src=        "../shapes.js" ></script>
<script src=       "../physics.js" ></script>
<script src=     "../materials.js" ></script>
<script src=  "../spikey_agent.js" ></script>
<script src= "../agent_physics.js" ></script>
<script src=    "../main-scene.js" ></script>
<script src="../training-scene.js" ></script>
<script src="utils.js"></script>
<script src="replay-buffer.js"></script>
<script src="noise.js"></script>
<script src="actor_critic.js"></script>
<script src="ddpg.js"></script>
<script src="agent.js"></script>
<script src="index.js"></script>
</body>
<script>
  // ********************* THE ENTRY POINT OF YOUR WHOLE PROGRAM STARTS HERE *********************
  // Use this code to embed a widget into any web page.  The widget inclues a 3D WebGL area
  // (an HTML canvas) and various panels of controls.

  "use strict"

  // First, list the names of scenes we will add to our canvas.  These will register themselves
  // with this widget's Canvas_Manager so that their code can be called upon every time a
  // draw / keyboard / mouse event happens on the web page.
  const scenes = [ "Training_Scene"];

  // Use the Canvas_Widget class to display the WebGL demo.  Pass in
  // the name of the HTML element we are to replace with the widget.
  var canvas = new Canvas_Widget( "main-canvas", scenes );
  //   new Canvas_Widget( "alternate-canvas", scenes );

  var agent = new Agent(canvas.canvas_manager.scene_components[0]);
  agent.train();
</script>
</html>