index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="./ui/css/index.css">
    <title>MediaPipe Examples</title>
  </head>

  <body id="body">
    <gesture-control-debug></gesture-control-debug> 
      <div class="contentFrame">
        <a href="http://5of12.co.uk">
          <img src="./media/5of12_Logo_Borderless.png" alt="5of12 Logo" class="logo">
        </a>
        <h1>5of12 MediaPipe Playground</h1>
        <p>
          A collection of JavaScript examples showcasing Google's 
            <a href="https://github.com/google-ai-edge/mediapipe">MediaPipe</a>. 
        </p>
        <p>
          The examples focus on hand and body tracking for fun and experimentation.
          <br>We also demonstrate how to combine Body with Hand tracking, for associating hands with Google's 
            <a href="https://ai.google.dev/edge/api/mediapipe/js/tasks-vision">Tasks Vision API</a>
        </p>
        <div class="hstack">
          <div id="exampleCard" class="exampleCard">
            <a href="./examples/WorldInYourHands.html">
              <img class="exampleImage" src="./media/map.gif" alt="World In Your Hands Example">
            </a>
            <p>Explore mapping data with two handed gestures. Pinch and zoom!</p>
            <a class="exampleLink green" href="./examples/WorldInYourHands.html">World In Your Hands</a>
          </div>
          <div id="exampleCard" class="exampleCard">
            <a href="./examples/SpinTheShark.html">
              <img class="exampleImage" src="./media/shark.gif" alt="Spin The Shark Example">
            </a>
            <p>Give 3D objects a spin. <br>Explore the shark with a single hand!</p>
            <a class="exampleLink yellow" href="./examples/SpinTheShark.html">Spin The Shark</a>
          </div>
          <div id="exampleCard" class="exampleCard">
            <a href="./examples/WarpFingers.html">
              <img class="exampleImage" src="./media/starfield.gif" alt="Warp Fingers Example">
              </a>
            <p>Head to the stars with pose detections. Engage warp speed!</p>
            <a class="exampleLink blue" href="./examples/WarpFingers.html">Warp Fingers</a>
          </div>
        </div>
        <a class="debugButton" href="./examples/MediaPipeDebug.html">Debug MediaPipe with Tiny Hands</a>
        <p>Examples have been tested with Safari, Chrome, Arc, Edge for desktop. Not optimised for mobile.</p>
        <div class="github-icon">
          <a href="https://github.com/5of12/MediaPipe-Playground" target="_blank" title="View on GitHub"></a>
        </div>
      </div>
  </body>
</html>