Spaces:
Running
Running
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <title>Shad0wKillar’s Huggy</title> | |
| <link rel="shortcut icon" href="TemplateData/favicon.ico"> | |
| <link rel="stylesheet" href="TemplateData/style.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="dark"> | |
| <header id="space-header"> | |
| <strong>Shad0wKillar’s Huggy 🐶</strong> | |
| <span id="model-status" role="status" aria-live="polite">Loading model catalog…</span> | |
| <button id="help-button" type="button">How to play</button> | |
| </header> | |
| <dialog id="help-dialog"> | |
| <h2>Play with your trained Huggy</h2> | |
| <ol> | |
| <li>Choose <strong>Play with my Huggy model</strong> in the game.</li> | |
| <li>Enter <strong>Shad0wKillar</strong> and press the search button.</li> | |
| <li>Select <strong>Shad0wKillar/ppo-Huggy</strong>.</li> | |
| <li>Select <strong>Huggy.onnx</strong> for the final model, or a checkpoint to compare earlier training.</li> | |
| <li>Load the model, then throw the stick for Huggy.</li> | |
| </ol> | |
| <p>Your model and checkpoints are bundled with this Space.</p> | |
| <p><a href="https://huggingface.co/Shad0wKillar/ppo-Huggy" target="_blank" rel="noopener">Model repository</a> | |
| · <a href="https://huggingface.co/learn/deep-rl-course/unitbonus1/introduction" target="_blank" rel="noopener">Learn to train Huggy</a></p> | |
| <form method="dialog"><button>Let me play!</button></form> | |
| </dialog> | |
| <div id="unity-container" class="unity-desktop"> | |
| <canvas id="unity-canvas"></canvas> | |
| </div> | |
| <div id="loading-cover" style="display:none;"> | |
| <div id="unity-loading-bar"> | |
| <div id="unity-logo"><img src="logo.png"></div> | |
| <div id="unity-progress-bar-empty" style="display: none;"> | |
| <div id="unity-progress-bar-full"></div> | |
| </div> | |
| <div class="spinner"></div> | |
| </div> | |
| </div> | |
| <div id="unity-fullscreen-button" style="display: none;"></div> | |
| <script src="hub-bridge.js"></script> | |
| <script> | |
| const hideFullScreenButton = ""; | |
| const buildUrl = "Build"; | |
| const loaderUrl = buildUrl + "/Huggy.loader.js"; | |
| const config = { | |
| dataUrl: buildUrl + "/Huggy.data.unityweb", | |
| frameworkUrl: buildUrl + "/Huggy.framework.js.unityweb", | |
| codeUrl: buildUrl + "/Huggy.wasm.unityweb", | |
| streamingAssetsUrl: "StreamingAssets", | |
| companyName: "Hugging Face", | |
| productName: "Huggy", | |
| productVersion: "0.1", | |
| }; | |
| const container = document.querySelector("#unity-container"); | |
| const canvas = document.querySelector("#unity-canvas"); | |
| const loadingCover = document.querySelector("#loading-cover"); | |
| const progressBarEmpty = document.querySelector("#unity-progress-bar-empty"); | |
| const progressBarFull = document.querySelector("#unity-progress-bar-full"); | |
| const fullscreenButton = document.querySelector("#unity-fullscreen-button"); | |
| const spinner = document.querySelector('.spinner'); | |
| const canFullscreen = (function () { | |
| for (const key of [ | |
| 'exitFullscreen', | |
| 'webkitExitFullscreen', | |
| 'webkitCancelFullScreen', | |
| 'mozCancelFullScreen', | |
| 'msExitFullscreen', | |
| ]) { | |
| if (key in document) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| }()); | |
| if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { | |
| container.className = "unity-mobile"; | |
| config.devicePixelRatio = 1; | |
| } | |
| loadingCover.style.display = ""; | |
| const script = document.createElement("script"); | |
| script.src = loaderUrl; | |
| script.onload = () => { | |
| createUnityInstance(canvas, config, (progress) => { | |
| spinner.style.display = "none"; | |
| progressBarEmpty.style.display = ""; | |
| progressBarFull.style.width = `${100 * progress}%`; | |
| }).then((unityInstance) => { | |
| loadingCover.style.display = "none"; | |
| if (canFullscreen) { | |
| if (!hideFullScreenButton) { | |
| fullscreenButton.style.display = ""; | |
| } | |
| fullscreenButton.onclick = () => { | |
| unityInstance.SetFullscreen(1); | |
| }; | |
| } | |
| }).catch((message) => { | |
| loadingCover.textContent = "The game could not start: " + message; | |
| loadingCover.setAttribute("role", "alert"); | |
| }); | |
| }; | |
| script.onerror = () => { | |
| loadingCover.textContent = "The game loader is missing. Upload the complete Build folder and reload."; | |
| loadingCover.setAttribute("role", "alert"); | |
| }; | |
| document.body.appendChild(script); | |
| </script> | |
| <script> | |
| const helpDialog = document.getElementById("help-dialog"); | |
| document.getElementById("help-button").onclick = () => helpDialog.showModal(); | |
| helpDialog.showModal(); | |
| </script> | |
| </body> | |
| </html> | |