huggingface-projects/UnitySentisJammoTheRobot

1<!DOCTYPE html>2<html lang="en-us">3  <head>4    <meta charset="utf-8">5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">6    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">7    <title>Jammot the Robot with Sentis</title>8    <link rel="shortcut icon" href="TemplateData/favicon.ico">9    <link rel="stylesheet" href="TemplateData/style.css">10    <style>11      div#discordButton button{12        position: absolute;13        left: 0px;14    }15    </style>16    <!-- Bootstrap CSS -->17    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">18  </head>19  <body class="dark">20    <!-- Modal -->21    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">22      <div class="modal-dialog" role="document">23        <div class="modal-content">24          <div class="modal-header">25            <img class="modal-title" id="exampleModalLabel" src="./TemplateData/logo.png" alt="logo" style="max-height:200px" class="img-fluid"/>26            <button type="button" class="close" data-dismiss="modal" aria-label="Close">27              <span aria-hidden="true">&times;</span>28            </button>29          </div>30          <div class="modal-body">31            <h3> What is Unity Sentis Jammo the Robot 🤖? </h3>32            <p> This is a game where a robot that can understand player orders and perform them.</p>33            <p>34              The🤖has a list of actions and uses a sentence similarity model that selects the closest action given the player's order.35 36              The magical part is that this AI model <b>runs directly inside our game 🤯</b>37 38              This is possible thanks to <a href="https://docs.unity3d.com/Packages/com.unity.sentis@1.0/manual/get-started.html">Unity Sentis</a>: a new library where you to <b>run ONNX models directly within your game</b>.</p>39 40              You want to build your own smart robot? Check this tutorial 👉 <a href="" target="_blank">Start here</a></p>41 42          </div>43          <div class="modal-footer">44            <button type="button" class="btn btn-success" data-dismiss="modal">Let me play!</button>45          </div>46        </div>47      </div>48    </div>49 50    <div id="unity-container" class="unity-desktop">51      <canvas id="unity-canvas"></canvas>52    </div>53    <div id="loading-cover" style="display:none;">54      <div id="unity-loading-bar">55        <div id="unity-logo"><img src="logo.png"></div>56        <div id="unity-progress-bar-empty" style="display: none;">57          <div id="unity-progress-bar-full"></div>58        </div>59        <div class="spinner"></div>60      </div>61    </div>62    <div id="unity-fullscreen-button" style="display: none;"></div>63    <script>64      const hideFullScreenButton = "";65      const buildUrl = "Build";66      const loaderUrl = buildUrl + "/SentisTemp.loader.js";67      const config = {68        dataUrl: buildUrl + "/SentisTemp.data",69        frameworkUrl: buildUrl + "/SentisTemp.framework.js",70        codeUrl: buildUrl + "/SentisTemp.wasm",71        streamingAssetsUrl: "StreamingAssets",72        companyName: "Hugging Face",73        productName: "Jammot the Robot with Sentis",74        productVersion: "0.1",75      };76 77      const container = document.querySelector("#unity-container");78      const canvas = document.querySelector("#unity-canvas");79      const loadingCover = document.querySelector("#loading-cover");80      const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");81      const progressBarFull = document.querySelector("#unity-progress-bar-full");82      const fullscreenButton = document.querySelector("#unity-fullscreen-button");83      const spinner = document.querySelector('.spinner');84 85      const canFullscreen = (function() {86        for (const key of [87            'exitFullscreen',88            'webkitExitFullscreen',89            'webkitCancelFullScreen',90            'mozCancelFullScreen',91            'msExitFullscreen',92          ]) {93          if (key in document) {94            return true;95          }96        }97        return false;98      }());99 100      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {101        container.className = "unity-mobile";102        config.devicePixelRatio = 1;103      }104      loadingCover.style.display = "";105 106      const script = document.createElement("script");107      script.src = loaderUrl;108      script.onload = () => {109        createUnityInstance(canvas, config, (progress) => {110          spinner.style.display = "none";111          progressBarEmpty.style.display = "";112          progressBarFull.style.width = `${100 * progress}%`;113        }).then((unityInstance) => {114          loadingCover.style.display = "none";115          if (canFullscreen) {116            if (!hideFullScreenButton) {117              fullscreenButton.style.display = "";118            }119            fullscreenButton.onclick = () => {120              unityInstance.SetFullscreen(1);121            };122          }123        }).catch((message) => {124          alert(message);125        });126      };127      document.body.appendChild(script);128    </script>129     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>130      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>131    <script>132        $(document).ready(function(){133            $("#infoModal").modal('show');134        });135      </script>136  </body>137</html>138