js/segment-anything/index.html

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous" />
  <script type="module" src="dist/index.js"></script>
   
  <style>
    /* Add rounded corners to blocks */
    .rounded-block {
      border-radius: 10px;
      border: 1px solid #ccc;
      padding: 20px;
      position: relative;
    }

    /* Move text inside the border */
    .rounded-block h4 {
      position: absolute;
      top: 00%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 5px 10px;
      background-color: #212529;
      font-size: 18px;
    }

    .higlight {
      display: inline-block;
    }

    .higlight:hover {
      border: 1px solid red;
    }
  </style>

</head>

<body data-bs-theme="dark">
  <title>segment anything example</title>
  <div class="container-fluid">
    <h2>segment anything example</h2>
    
<br>

    <div style="display: none;">
      <img id="original-image" src="EgyptianCat.png" />
    </div>

    <div>
      <div class="row">
        <div class="col">
            <canvas id="img_canvas"></canvas>
        </div>
        <div class="col">
          <div class="rounded-block" style="margin-top: 40px; max-width: 200px;">
            <h4>Latencies</h4>
            <div style="margin-top: 10px;">
              encoder: <div id="encoder_latency" class="higlight"></div>
            </div>
            <div style="margin-top: 10px;">
              decoder: <div id="decoder_latency" class="higlight"></div>
            </div>
          </div>
          <div style="margin-top: 40px;">
            <form>
              <div class="form-group ">
                <input title="Upload Image" type="file" id="file-in" name="file-in"
                  accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">
              </div>
            </form>
            <div class="form-group ">
              <button id="cut-button" type="button" class="btn btn-primary">Cut</button>
              <button id="clear-button" type="button" class="btn btn-primary">Clear</button>
            </div>
            <div style="margin-top: 30px;">
              <div>Other providers:</div>
              <a href="index.html?provider=wasm&model=sam_b_int8">wasm</a>
              <a href="index.html?provider=webgpu&model=sam_b">webgpu</a>
            </div>
          </div>

        <p class="text-lg-start">
        <div id="status" style="font: 1em consolas;"></div>
        </p>
      </div>
</body>