Add search parameter input

Signed-off-by: Jay Wang <[email protected]>
poloclub · Feb 7, 2024 · bbcbb20 · bbcbb20
1 parent 297fdcb
commit bbcbb20
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 3 deletions.
diff --git a/examples/rag-playground/src/components/playground/playground.css b/examples/rag-playground/src/components/playground/playground.css
@@ -18,9 +18,9 @@
 
   grid-template-columns:
     minmax(200px, 1fr)
-    50px
-    minmax(min-content, 100px)
-    60px
+    45px
+    minmax(min-content, 105px)
+    55px
     minmax(300px, 400px);
 
   --arrow-color: var(--gray-300);
@@ -63,6 +63,10 @@
   &.container-search {
     grid-row: 1 / 2;
     grid-column: 3 / 4;
+
+    display: flex;
+    flex-flow: column;
+    align-items: center;
   }
 
   &.container-text {
@@ -381,6 +385,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
+  position: relative;
 
   .header {
     color: white;
@@ -400,3 +405,42 @@
   position: relative;
   top: -10px;
 }
+
+.search-top-info {
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  width: 100%;
+  transform: translate(-50%, calc(100% + 5px));
+  font-size: var(--font-d3);
+  color: var(--gray-600);
+
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  line-height: 1;
+  gap: 2px;
+
+  .row {
+    display: flex;
+    flex-flow: row;
+    align-items: baseline;
+
+    & input {
+      text-align: center;
+      margin-left: 2px;
+      font-variant-numeric: tabular-nums;
+      max-width: 23px;
+      border-bottom: 2px solid var(--gray-300);
+      height: 13px;
+
+      &#input-distance {
+        max-width: 28px;
+      }
+    }
+  }
+}
+
+input {
+  all: unset;
+}
diff --git a/examples/rag-playground/src/components/playground/playground.ts b/examples/rag-playground/src/components/playground/playground.ts
@@ -92,6 +92,9 @@ export class MememoPlayground extends LitElement {
   @state()
   topK = 10;
 
+  @state()
+  maxDistance = 0.25;
+
   @query('mememo-text-viewer')
   textViewerComponent: MememoTextViewer | undefined | null;
 
@@ -318,6 +321,35 @@ export class MememoPlayground extends LitElement {
     }
   }
 
+  /**
+   * Validate input and update mememo search parameters
+   * @param e Input event
+   * @param parameter Type of the parameter
+   */
+  parameterInputChanged(e: InputEvent, parameter: 'distance' | 'top-k') {
+    const element = e.currentTarget as HTMLInputElement;
+
+    if (parameter === 'distance') {
+      const value = parseFloat(element.value);
+      if (value > 0 && value < 1) {
+        this.maxDistance = value;
+      } else {
+        this.maxDistance = 0.25;
+      }
+      element.value = String(this.maxDistance);
+    }
+
+    if (parameter === 'top-k') {
+      const value = parseInt(element.value);
+      if (value > 0) {
+        this.topK = value;
+      } else {
+        this.topK = 10;
+      }
+      element.value = String(this.topK);
+    }
+  }
+
   //==========================================================================||
   //                             Private Helpers                              ||
   //==========================================================================||
@@ -466,6 +498,26 @@ export class MememoPlayground extends LitElement {
 
         <div class="container container-search">
           <div class="search-box">
+            <div class="search-top-info">
+              <span class="row"
+                >distance &lt;
+                <input
+                  id="input-distance"
+                  type="text"
+                  value="0.25"
+                  @change=${(e: InputEvent) =>
+                    this.parameterInputChanged(e, 'distance')}
+              /></span>
+              <span class="row"
+                >top-k =
+                <input
+                  id="input-top-k"
+                  type="text"
+                  value="10"
+                  @change=${(e: InputEvent) =>
+                    this.parameterInputChanged(e, 'top-k')}
+              /></span>
+            </div>
             <div class="header">MeMemo Search</div>
           </div>
         </div>