diff --git a/examples/rag-playground/src/components/playground/playground.css b/examples/rag-playground/src/components/playground/playground.css index 23a84d1..209eae3 100644 --- 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 index 223de48..ad9b5e9 100644 --- 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 {