Hugging Face's logo

Spaces:
vivien
/
trompeloeil
Running

App Files Community
trompeloeil
File size: 2,336 Bytes 
e59481a
 
0b12ad4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
06ce8f8
0b12ad4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e59481a
0b12ad4
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html>
<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/[email protected]/dist/tf-core.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-converter.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-webgl.js"></script>
<script src="https://unpkg.com/@tensorflow-models/[email protected]/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 -->