Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@wangqianwen0418
wangqianwen0418 committed Feb 12, 2024
1 parent 4107c90 commit ca2e8a8
Showing 1 changed file with 253 additions and 1 deletion.
254 changes: 253 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,253 @@
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Webcam Pacman</title><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-teal.min.css"><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"><script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script><link rel="stylesheet" href="index.3a876b76.css"><link rel="stylesheet" href="index.558eed82.css"></head><body> <header> Control your PAC MAN via gestures in the camera! <img height="48" style="border:#fff;" src="controller.995bd56d.png"> <br> </header> <div id="no-webcam"> No webcam found. <br> To use this demo, use a device with a webcam. </div> <div id="status"> <div class="lds-ring loading-icon"> <div></div> <div></div> <div></div> <div></div> </div> <div id="status-text"> Loading mobilenet... </div> </div> <div class="controller-panels" id="controller" style="display:none"> <div class="joystick-panel panel"> <span class="instruction"> 1: Click [Add Example] button will add the current camera view as an example for the corresponding control. </span> <div class="panel-row panel-row-top"> <div class="panel-cell panel-cell-fill panel-cell-left"> </div> <div class="panel-cell panel-cell-center"> <div class="thumb-box"> <div class="thumb-box-outer"> <div class="thumb-box-inner"> <canvas class="thumb" width="224" height="224" id="up-thumb"></canvas> </div> <button class="record-button" id="up"><span>Add Sample</span></button> </div> <p> <span id="up-total">0</span> <span class="highlight"> UP </span> Examples </p> </div> </div> <div class="panel-cell panel-cell-fill panel-cell-right"> </div> </div> <div class="panel-row panel-row-middle"> <div class="panel-cell panel-cell-left"> <div class="thumb-box"> <div class="thumb-box-outer"> <div class="thumb-box-inner"> <canvas class="thumb" width="224" height="224" id="left-thumb"></canvas> </div> <button class="record-button" id="left"><span>Add Sample</span></button> </div> <p> <span id="left-total">0</span> <span class="highlight"> LEFT </span> Examples </p> </div> </div> <div class="panel-cell panel-cell-center panel-cell-fill"> <div class="webcam-box-outer"> <div class="webcam-box-inner"> <video autoplay playsinline muted id="webcam" width="224" height="224"></video> </div> </div> </div> <div class="panel-cell panel-cell-right"> <div class="thumb-box"> <div class="thumb-box-outer"> <div class="thumb-box-inner"> <canvas class="thumb" width="224" height="224" id="right-thumb"></canvas> </div> <button class="record-button" id="right"><span>Add Sample</span></button> </div> <p> <span id="right-total">0</span> <span class="highlight"> RIGHT </span> Examples </p> </div> </div> </div> <div class="panel-row panel-row-bottom"> <div class="panel-cell panel-cell-fill panel-cell-left"> </div> <div class="panel-cell panel-cell-center"> <div class="thumb-box"> <div class="thumb-box-outer"> <div class="thumb-box-inner"> <canvas class="thumb" width="224" height="224" id="down-thumb"></canvas> </div> <button class="record-button" id="down"><span>Add Sample</span></button> </div> <p> <span id="down-total">0</span> <span class="highlight"> DOWN </span> Examples </p> </div> </div> <div class="panel-cell panel-cell-fill panel-cell-right"> </div> </div> </div> <div class="panel training-panel"> <span class="instruction"> 2: Click [Train] to train the model. </span> <div class="big-buttons panel-row"> <button id="train"> <img width="66" height="66" src="button.773a154d.svg"> <span id="train-status">TRAIN MODEL</span> </button> </div> <div class="panel-row params-webcam-row"> <div class="hyper-params"> <div class="dropdown"> <label>Learning rate</label> <div class="select"> <select id="learningRate"> <option value="0.00001">0.00001</option> <option selected value="0.0001">0.0001</option> <option value="0.01">0.001</option> <option value="0.03">0.003</option> </select> </div> </div> <div class="dropdown"> <label>Batch size</label> <div class="select"> <select id="batchSizeFraction"> <option value="0.05">0.05</option> <option value="0.1">0.1</option> <option selected value="0.4">0.4</option> <option value="1">1</option> </select> </div> </div> <div class="dropdown"> <label>Epochs</label> <div class="select"> <select id="epochs"> <option value="10">10</option> <option selected value="20">20</option> <option value="40">40</option> </select> </div> </div> <div class="dropdown"> <label>Hidden units</label> <div class="select"> <select id="dense-units"> <option value="10">10</option> <option selected value="100">100</option> <option value="200">200</option> </select> </div> </div> </div> </div> </div> </div> <div class="big-buttons play-control"> <div class="instruction" style="text-align:center;color:#fff;font-size:16px;"> 3: Click [Play] to train the model. </div> <button id="predict"> <img width="66" height="66" src="button.773a154d.svg"> <span>PLAY</span> </button> </div> <div id="pacman-container"> <div id="logo"> <div id="logo-l"> <div id="logo-b"> </div> </div> </div> <p id="copyright">PAC-MAN&trade; &copy; BANDAI NAMCO Entertainment Inc.</p> </div> <script src="https://storage.googleapis.com/tfjs-examples/assets/webcam-transfer-learning/pacman-google.js"></script> <script src="index.d57e093a.js" defer></script> </body></html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Webcam Pacman</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-teal.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<script defer="" src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="/index.1303bb05.css">
<link rel="stylesheet" href="/index.3db38323.css">
</head>

<body>
<header>
Control your PAC MAN via gestures in the camera! <img height="48" style="border: white;" src="/controller.4e012d0b.png"> <br>
</header>
<div id="no-webcam">
No webcam found. <br>
To use this demo, use a device with a webcam.
</div>



<div id="status">
<div class="lds-ring loading-icon">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="status-text">
Loading mobilenet...
</div>
</div>

<div class="controller-panels" id="controller" style="display:none">



<div class="panel joystick-panel">
<span class="instruction">
<!-- add your instructions here -->
</span>
<div class="panel-row panel-row-top">

<div class="panel-cell panel-cell-left panel-cell-fill">
<!-- <p class="help-text">
Click to add the <br />
current camera <br />
view as an example <br />
for that control
</p> -->
</div>
<!-- ./panel-cell -->

<div class="panel-cell panel-cell-center">
<div class="thumb-box">
<div class="thumb-box-outer">
<div class="thumb-box-inner">
<canvas class="thumb" width="224" height="224" id="up-thumb"></canvas>
</div>
<button class="record-button" id="up"><span>Add Sample</span></button>
</div>
<p>
<span id="up-total">0</span> <span class="highlight"> UP </span> Examples
</p>
</div>
</div><!-- ./panel-cell -->

<div class="panel-cell panel-cell-right panel-cell-fill">
</div><!-- ./panel-cell -->

</div><!-- /.panel-row -->
<div class="panel-row panel-row-middle">
<div class="panel-cell panel-cell-left">
<div class="thumb-box">
<div class="thumb-box-outer">
<div class="thumb-box-inner">
<canvas class="thumb" width="224" height="224" id="left-thumb"></canvas>
</div>
<button class="record-button" id="left"><span>Add Sample</span></button>
</div>
<p>
<span id="left-total">0</span> <span class="highlight"> LEFT </span> Examples
</p>
</div>
</div><!-- ./panel-cell -->

<div class="panel-cell panel-cell-center panel-cell-fill">
<!-- <img height="108" width="129" src="./images/joystick.png" /> -->
<!-- <img height="108" src="./images/controller.png" /> -->
<div class="webcam-box-outer">
<div class="webcam-box-inner">
<video autoplay="" playsinline="" muted="" id="webcam" width="224" height="224"></video>
</div>
</div>
</div>
<!-- ./panel-cell -->

<div class="panel-cell panel-cell-right">
<div class="thumb-box">
<div class="thumb-box-outer">
<div class="thumb-box-inner">
<canvas class="thumb" width="224" height="224" id="right-thumb"></canvas>
</div>
<button class="record-button" id="right"><span>Add Sample</span></button>
</div>
<p>
<span id="right-total">0</span> <span class="highlight"> RIGHT </span> Examples
</p>
</div>
</div><!-- ./panel-cell -->

</div><!-- /.panel-row -->

<div class="panel-row panel-row-bottom">

<div class="panel-cell panel-cell-left panel-cell-fill">
</div><!-- ./panel-cell -->

<div class="panel-cell panel-cell-center">
<div class="thumb-box">
<div class="thumb-box-outer">
<div class="thumb-box-inner">
<canvas class="thumb" width="224" height="224" id="down-thumb"></canvas>
</div>
<button class="record-button" id="down"><span>Add Sample</span></button>
</div>
<p>
<span id="down-total">0</span> <span class="highlight"> DOWN </span> Examples
</p>
</div>
</div><!-- ./panel-cell -->

<div class="panel-cell panel-cell-right panel-cell-fill">
</div><!-- ./panel-cell -->

</div><!-- /.panel-row -->


</div><!-- /.panel -->

<div class="panel training-panel">
<span class="instruction">
<!-- add your instructions here -->
</span>
<!-- Big buttons. -->
<div class="panel-row big-buttons">
<button id="train">
<img width="66" height="66" src="/button.865c3eaf.svg">
<span id="train-status">TRAIN MODEL</span>
</button>

</div><!-- /.panel-row -->

<div class="panel-row params-webcam-row">

<!-- Hyper params. -->
<div class="hyper-params">

<!-- Learning rate -->
<div class="dropdown">
<label>Learning rate</label>
<div class="select">
<select id="learningRate">
<option value="0.00001">0.00001</option>
<option selected="" value="0.0001">0.0001</option>
<option value="0.01">0.001</option>
<option value="0.03">0.003</option>
</select>
</div>
</div>

<!-- Batch size -->
<div class="dropdown">
<label>Batch size</label>
<div class="select">
<select id="batchSizeFraction">
<option value="0.05">0.05</option>
<option value="0.1">0.1</option>
<option selected="" value="0.4">0.4</option>
<option value="1">1</option>
</select>
</div>
</div>

<!-- Epochs -->
<div class="dropdown">
<label>Epochs</label>
<div class="select">
<select id="epochs">
<option value="10">10</option>
<option selected="" value="20">20</option>
<option value="40">40</option>
</select>
</div>
</div>

<!-- Hidden units -->
<div class="dropdown">
<label>Hidden units</label>
<div class="select">
<select id="dense-units">
<option value="10">10</option>
<option selected="" value="100">100</option>
<option value="200">200</option>
</select>
</div>
</div>

</div><!-- /.hyper-params -->



</div><!-- /.panel-row -->

</div><!-- /.panel -->

</div><!-- /#controller -->


<!-- start of pac man -->


<div class="big-buttons play-control">
<div class="instruction" style="text-align: center; color: white; font-size: 16px;">
<!-- add your instructions here -->
</div>
<button id="predict">
<img width="66" height="66" src="/button.865c3eaf.svg">
<span>PLAY</span>
</button>
</div>

<div id="pacman-container">
<div id="logo">
<div id="logo-l">
<div id="logo-b">
</div>
</div>
</div>
<p id="copyright">PAC-MAN&trade; &copy; BANDAI NAMCO Entertainment Inc.</p>
</div>

<script src="https://storage.googleapis.com/tfjs-examples/assets/webcam-transfer-learning/pacman-google.js"></script>
<!-- end of pac man -->


<script src="/index.3d214d75.js" defer=""></script>
</body>

</html>

0 comments on commit ca2e8a8

Please sign in to comment.