Hugging Face's logo

Spaces:
luquiT4
/
webgpu-embedding-generator-and-viewer
Running

App Files Community
webgpu-embedding-generator-and-viewer
File size: 3,769 Bytes
140769d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e0611bf
140769d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20be0fa
 
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Embeddings 3D (Plotly) | Transformers.js</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
      body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background-color: #ffffff; }
      /*
      .observablehq {
          position: relative;
          width: 100%;
          max-width: 1000px;
          margin: 0 auto;
      }
          */
      .legend-swatch {
          width: 0.5rem;
          height: 0.5rem;
          display: inline-block;
          border-radius: 50%;
          margin-right: 0.3rem;
      }
      .legend-item {
          margin-right: 1.5rem;
          font-size: 0.875rem;
          color: #6e6e80;
          display: inline-flex;
          align-items: center;
      }
      .small-copy {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin-top: 1rem;
          margin-bottom: 2rem;
      }
      /* Keep existing spinner */
      .spinner {
          border: 4px solid rgba(0, 0, 0, 0.1);
          width: 24px;
          height: 24px;
          border-radius: 50%;
          border-left-color: #09f;
          animation: spin 1s ease infinite;
          display: inline-block;
          vertical-align: middle;
      }
      @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  </style>
  <script type="module" crossorigin src="/assets/index-kpXZmbP-.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-tn0RQdqM.css">
</head>
<body class="flex flex-col items-center justify-center min-h-screen p-4">

  <div class="w-full max-w-5xl">
      <!-- Header -->
      <div class="mb-2 text-center">
          <h1 class="text-3xl font-bold text-gray-900">Embeddings: 3D (Plotly)</h1>
          <p class="text-sm text-gray-500 mt-2">Powered by Transformers.js & WebGPU</p>
      </div>

      <!-- Controls (Adapted) -->
      <div id="controls" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-6 max-w-2xl mx-auto">
          <div class="mb-4">
              <label for="text-input" class="block text-sm font-medium text-gray-700 mb-1">Enter text to embed (one per line)</label>
              <textarea id="text-input" rows="4" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="King&#10;Queen&#10;Man&#10;Woman&#10;Apple&#10;Banana&#10;Computer&#10;Keyboard"></textarea>
          </div>
          <div class="flex items-center justify-between">
              <button id="generate-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                  <span id="btn-text">Visualize Embeddings</span>
                  <div id="loader" class="spinner ml-2" style="display: none;"></div>
              </button>
              <div id="status-msg" class="text-sm text-gray-500">Model loading...</div>
          </div>
          
          <div id="progress-container" class="mt-4 hidden">
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                  <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
              </div>
              <div id="progress-label" class="text-xs text-gray-500 text-center mt-1">0%</div>
          </div>
      </div>

      <!-- Legend -->
      <div id="legend-container"></div>

      <!-- Chart -->
      <div id="chart-div" style="min-height: 500px;"></div>
  </div>

</body>
</html>