examples/waterworld/index.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Waterworld | NeuroJS</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="vis.js"></script>
  <script src="../../build/neurojs-v2.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>

  <script type="text/javascript">

    var states = 29
    var actions = 2
    var input = states + (states + actions) * 1
     

    var actor = new window.neurojs.Network.Model([

        { type: 'input', size: input },
        { type: 'fc', size: 30, activation: 'relu' },
        { type: 'fc', size: 30, activation: 'relu', dropout: 0.5 },
        { type: 'fc', size: 30, activation: 'relu', dropout: 0.5 },
        { type: 'fc', size: 2, activation: 'sigmoid' },

    ])

    var critic = new window.neurojs.Network.Model([

        { type: 'input', size: input + actions },
        { type: 'fc', size: 50, activation: 'relu' },
        { type: 'fc', size: 50, activation: 'relu' },
        { type: 'fc', size: 50, activation: 'relu' },
        { type: 'fc', size: 1 },
        { type: 'regression' }

    ])

    window.brain = new window.neurojs.Agent({

        actor: actor.newConfiguration(),
        critic: critic.newConfiguration(),

        discount: 0.975, 
        learningRate: {
            actor: 1e-3, 
            critic: 1e-3
        },

        states: states,
        actions: actions,

        algorithm: 'ddpg',
        theta: 0.10,

        temporalWindow: 1,
        clipGradients: { action: 10, parameter: 100 }

    })
    
    

  </script>
  <style type="text/css">
      canvas { border: 1px solid white; }
      body { font-family: sans-serif;  }
      #wrap { margin: 0 auto; max-width: 800px; width: 100%;  }
    </style>

 </head>
 <body onload="start();">
   <div id="wrap">

   <!-- <canvas id="vis_canvas" width="350" height="150"></canvas> -->
   <!-- <canvas id="graph_canvas" width="350" height="150"></canvas><br /> -->
   <!-- <canvas id="net_canvas" width="700" height="200"></canvas><br /> -->

   <p>This demo was originally created by <a href="https://twitter.com/karpathy">Andrej Karpathy</a> for the project <a href="http://convnetjs.com/">ConvNetJS</a>, but was modified to use neurojs as the neural network back-end. In this case ConvNetJS was replaced by a DDPG agent. </p>

      <button onclick="goveryfast()">Go very fast</button>
      <button onclick="gofast()">Go fast</button>
      <button onclick="gonormal()">Go normal speed</button>
      <button onclick="goslow()">Go slow</button><br />
      <button onclick="downloadBrain()">Save</button>
      <input type='file' accept='*/*' onchange='readBrain(event)'><br>

      <canvas id="canvas" width="700" height="500"></canvas>
      

   <script src="rldemo.js"></script>
   </div>
 </body>
</html>