デモに画像を追加

ics-creative · Jul 11, 2024 · 23cff3b · 23cff3b
1 parent 41c3fad
commit 23cff3b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/css/style.css b/css/style.css
@@ -54,3 +54,4 @@ body {
   background-color: rgb(51 51 51);
   box-shadow: 3px 3px 0 rgb(51 51 51);
 }
+
diff --git a/images/demo_cheek_heart.png b/images/demo_cheek_heart.png
diff --git a/images/demo_finger_heart.png b/images/demo_finger_heart.png
diff --git a/images/demo_peace.png b/images/demo_peace.png
diff --git a/index.html b/index.html
@@ -5,7 +5,6 @@
   <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
   <title>Tensorflow.jsでポーズ認識</title>
   <link rel='stylesheet' href='css/reset.css'/>
-  <link rel='stylesheet' href='css/style.css'/>
   <!-- TensorFlow.js -->
   <script src='https://cdn.jsdelivr.net/npm/@tensorflow/tfjs'></script>
   <script src='https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet'></script>
@@ -14,26 +13,57 @@
   <script src='https://cdn.jsdelivr.net/npm/@mediapipe/hands'></script>
   <script
     src='https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection/dist/hand-pose-detection.js'></script>
+  <style>
+    body {
+      font-family: "Kiwi Maru", serif;
+    }
+
+    .wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 50px;
+      height: 100dvh;
+    }
+
+    .pose-list {
+      display: flex;
+      flex-direction: column;
+      gap: 50px;
+    }
+
+    .pose-list > img {
+      width: 50px;
+    }
+  </style>
 </head>
 <body>
-<div id='app'>
-  <video
-    style='
+<div class="wrapper">
+  <div id='app'>
+    <video
+      style='
           visibility: hidden;
           height: 0;
           width: 0;
           position: fixed;
           pointer-events: none;
         '
-    id='webcam'
-    muted
-    autoplay
-    playsinline
-  ></video>
-  <div id='canvasWrapper'>
-    <canvas id='canvas'></canvas>
+      id='webcam'
+      muted
+      autoplay
+      playsinline
+    ></video>
+    <div id='canvasWrapper'>
+      <canvas id='canvas'></canvas>
+    </div>
+  </div>
+  <div class="pose-list">
+    <img src="./images/demo_peace.png" alt="">
+    <img src="./images/demo_finger_heart.png" alt="">
+    <img src="./images/demo_cheek_heart.png" alt="">
   </div>
 </div>
+
 <script type='module' src='js/main.js'></script>
 </body>
 </html>