|
<!DOCTYPE html> |
|
<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>Jammot the Robot with Sentis</title> |
|
<link rel="shortcut icon" href="TemplateData/favicon.ico"> |
|
<link rel="stylesheet" href="TemplateData/style.css"> |
|
<style> |
|
div#discordButton button{ |
|
position: absolute; |
|
left: 0px; |
|
} |
|
</style> |
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
|
</head> |
|
<body class="dark"> |
|
|
|
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<img class="modal-title" id="exampleModalLabel" src="./TemplateData/logo.png" alt="logo" style="max-height:200px" class="img-fluid"/> |
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true">×</span> |
|
</button> |
|
</div> |
|
<div class="modal-body"> |
|
<h3> What is Unity Sentis Jammo the Robot 🤖? </h3> |
|
<p> This is a game where a robot that can understand player orders and perform them.</p> |
|
<p> |
|
The🤖has a list of actions and uses a sentence similarity model that selects the closest action given the player's order. |
|
|
|
The magical part is that this AI model <b>runs directly inside our game 🤯</b> |
|
|
|
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> |
|
|
|
You want to build your own smart robot? Check this tutorial 👉 <a href="" target="_blank">Start here</a></p> |
|
|
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-success" data-dismiss="modal">Let me play!</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<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> |
|
const hideFullScreenButton = ""; |
|
const buildUrl = "Build"; |
|
const loaderUrl = buildUrl + "/SentisTemp.loader.js"; |
|
const config = { |
|
dataUrl: buildUrl + "/SentisTemp.data", |
|
frameworkUrl: buildUrl + "/SentisTemp.framework.js", |
|
codeUrl: buildUrl + "/SentisTemp.wasm", |
|
streamingAssetsUrl: "StreamingAssets", |
|
companyName: "Hugging Face", |
|
productName: "Jammot the Robot with Sentis", |
|
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) => { |
|
alert(message); |
|
}); |
|
}; |
|
document.body.appendChild(script); |
|
</script> |
|
<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> |
|
<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> |
|
<script> |
|
$(document).ready(function(){ |
|
$("#infoModal").modal('show'); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
