Spaces:
Running
Running
| <html> | |
| <head> | |
| <!-- Global site tag (gtag.js) - Google Analytics --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-C0Q8V7CMP9"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag() { | |
| dataLayer.push(arguments); | |
| } | |
| gtag('js', new Date()); | |
| gtag('config', 'G-C0Q8V7CMP9'); | |
| </script> | |
| <title>3D In Your Browser</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta charset="UTF-8" /> | |
| <link href="./styles/main.css" rel="stylesheet" type="text/css"> | |
| </head> | |
| <body> | |
| <div id="scene-container"> | |
| <!-- Our <canvas> will be inserted here --> | |
| </div> | |
| <div id="controls" style="visibility:hidden"> | |
| <div style="z-index: 1; color:white; position: absolute; top: 20px; width: 100%; text-align: center; font-family: sans-serif">A 3D image with just a browser and a webcam<br>[<a style="color: white" href="https://github.com/vivien000/trompeloeil" target="_blank" rel="noopener noreferrer">code</a> and <a style="color: white" href="https://github.com/vivien000/trompeloeil#acknowledgements" target="_blank" rel="noopener noreferrer">credits for the 3D models</a>]<br>Press "C" to keep only the 3D image</div> | |
| <div id="video-container" style="position:absolute; left:0; bottom:0;"> | |
| <video autoplay="true" style="width:200px; margin:10px;" id="video"> | |
| </video> | |
| </div> | |
| <div style="z-index: 1; position:absolute; top:0; right: 0; margin: 20px;"> | |
| <select id="object"> | |
| <option value="0">Spaceship</option> | |
| <option value="1">Parrot</option> | |
| <option value="2">Van Gogh</option> | |
| </select> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="https://unpkg.com/@tensorflow/tfjs-core@2.4.0/dist/tf-core.js"></script> | |
| <script src="https://unpkg.com/@tensorflow/tfjs-converter@2.4.0/dist/tf-converter.js"></script> | |
| <script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@2.4.0/dist/tf-backend-webgl.js"></script> | |
| <script src="https://unpkg.com/@tensorflow-models/face-landmarks-detection@0.0.1/dist/face-landmarks-detection.js"> | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script> | |
| <script type="module" src="./src/main.js"></script> | |
| </html> | |
| <!-- Cf. https://github.com/vivien000/trompeloeil for a write-up and the credits --> |