From 72129dfcad80cc70c66303f2112276cdbce340c0 Mon Sep 17 00:00:00 2001 From: Jay Wang Date: Fri, 2 Feb 2024 15:48:54 -0500 Subject: [PATCH] Add playground grid Signed-off-by: Jay Wang --- examples/rag-playground/index.html | 2 +- .../rag-playground/src/components/app/app.css | 5 +- .../rag-playground/src/components/app/app.ts | 4 +- .../src/components/playground/playground.css | 284 ++++++++++++++++++ .../src/components/playground/playground.ts | 102 +++++++ .../components/prompt-panel/prompt-panel.ts | 2 +- 6 files changed, 394 insertions(+), 5 deletions(-) create mode 100644 examples/rag-playground/src/components/playground/playground.css create mode 100644 examples/rag-playground/src/components/playground/playground.ts diff --git a/examples/rag-playground/index.html b/examples/rag-playground/index.html index 48342ad..750277e 100644 --- a/examples/rag-playground/index.html +++ b/examples/rag-playground/index.html @@ -4,7 +4,7 @@ - Jay's App + MeMemo diff --git a/examples/rag-playground/src/components/app/app.css b/examples/rag-playground/src/components/app/app.css index 3a11cdb..d445b0d 100644 --- a/examples/rag-playground/src/components/app/app.css +++ b/examples/rag-playground/src/components/app/app.css @@ -11,6 +11,9 @@ } .app-container { - width: 900px; + width: min(1000px, 100vw - 50px); height: 600px; + border-radius: 10px; + border: 1px solid var(--gray-400); + /* box-shadow: var(--shadow-border-light); */ } diff --git a/examples/rag-playground/src/components/app/app.ts b/examples/rag-playground/src/components/app/app.ts index f889835..5507850 100644 --- a/examples/rag-playground/src/components/app/app.ts +++ b/examples/rag-playground/src/components/app/app.ts @@ -2,7 +2,7 @@ import { LitElement, css, unsafeCSS, html, PropertyValues } from 'lit'; import { customElement, property, state, query } from 'lit/decorators.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; -import '../prompt-panel/prompt-panel'; +import '../playground/playground'; import componentCSS from './app.css?inline'; /** @@ -48,7 +48,7 @@ export class MememoRagPlayground extends LitElement { return html`
- +
`; diff --git a/examples/rag-playground/src/components/playground/playground.css b/examples/rag-playground/src/components/playground/playground.css new file mode 100644 index 0000000..e2fb8bb --- /dev/null +++ b/examples/rag-playground/src/components/playground/playground.css @@ -0,0 +1,284 @@ +.playground { + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 20px; + + position: relative; + display: grid; + + grid-template-rows: auto 40px auto 30px min-content 40px auto; + + grid-template-columns: + minmax(min-content, 300px) + 50px + minmax(min-content, 100px) + 60px + minmax(300px, 1fr); + + --arrow-color: var(--gray-300); + --border-radius: 5px; + --block-shadow: 0px 0px 2px hsla(0, 0%, 0%, 0.1), + 0px 0px 6px hsla(0, 0%, 0%, 0.05); +} + +.container { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + z-index: 2; + + background-color: white; + box-sizing: border-box; + + &.container-input { + grid-row: 1 / 2; + grid-column: 1 / 2; + border-radius: var(--border-radius); + box-shadow: var(--block-shadow); + border: 1px solid hsla(0deg, 0%, 0%, 0.08); + } + + &.container-search { + grid-row: 1 / 2; + grid-column: 3 / 4; + } + + &.container-text { + grid-row: 1 / 8; + grid-column: 5 / 6; + width: 100%; + height: 100%; + border-radius: var(--border-radius); + box-shadow: var(--block-shadow); + border: 1px solid hsla(0deg, 0%, 0%, 0.08); + } + + &.container-prompt { + grid-row: 3 / 4; + grid-column: 1 / 4; + border-radius: var(--border-radius); + box-shadow: var(--block-shadow); + border: 1px solid hsla(0deg, 0%, 0%, 0.08); + } + + &.container-model { + grid-row: 5 / 6; + grid-column: 1 / 4; + } + + &.container-output { + grid-row: 7 / 8; + grid-column: 1 / 4; + border-radius: var(--border-radius); + box-shadow: var(--block-shadow); + border: 1px solid hsla(0deg, 0%, 0%, 0.08); + } +} + +.flow { + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + position: relative; + + &.input-text { + grid-row: 1 / 2; + grid-column: 2 / 5; + } + + &.input-prompt { + grid-row: 2 / 3; + grid-column: 1 / 2; + } + + &.text-prompt { + grid-row: 3 / 4; + grid-column: 4 / 5; + transform: rotate(180deg); + } + + &.prompt-output { + grid-row: 4 / 7; + grid-column: 1 / 4; + } +} + +.horizontal-flow { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + + .background { + position: relative; + width: 100%; + height: 10px; + + .line-loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 100%; + height: 30px; + display: inline-block; + overflow: hidden; + z-index: 2; + + &.hidden { + display: none; + } + } + + .line-loader::after { + content: ''; + width: 100px; + height: 100%; + background: linear-gradient( + 90deg, + hsla(0, 100%, 100%, 0) 0%, + hsla(0, 100%, 100%, 0) 10%, + hsla(0, 100%, 100%, 0.5) 50%, + hsla(0, 100%, 100%, 0) 90%, + hsla(0, 100%, 100%, 0) 100% + ); + + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + animation: animate-loader 1500ms ease-out infinite; + } + + @keyframes animate-loader { + 0% { + left: 0; + transform: translateX(-100%); + } + 100% { + left: 100%; + transform: translateX(0%); + } + } + + .start-rectangle { + position: absolute; + left: 0px; + height: 100%; + width: calc(100% - 18px); + background-color: var(--arrow-color); + z-index: 1; + + display: flex; + align-items: center; + justify-content: center; + } + + .end-triangle { + position: absolute; + right: 0px; + top: 50%; + transform: translateY(-50%); + z-index: 1; + + width: 0; + height: 0; + border-top: 15px solid transparent; + border-bottom: 15px solid transparent; + border-left: 20px solid var(--arrow-color); + } + } +} + +.vertical-flow { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + + .background { + position: relative; + height: 100%; + width: 10px; + + .line-loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + height: 100%; + width: 30px; + display: inline-block; + overflow: hidden; + z-index: 2; + + &.hidden { + display: none; + } + } + + .line-loader::after { + content: ''; + height: 100px; + width: 100%; + background: linear-gradient( + 90deg, + hsla(0, 100%, 100%, 0) 0%, + hsla(0, 100%, 100%, 0) 10%, + hsla(0, 100%, 100%, 0.5) 50%, + hsla(0, 100%, 100%, 0) 90%, + hsla(0, 100%, 100%, 0) 100% + ); + + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + animation: animate-loader 1500ms ease-out infinite; + } + + @keyframes animate-loader { + 0% { + left: 0; + transform: translateX(-100%); + } + 100% { + left: 100%; + transform: translateX(0%); + } + } + + .start-rectangle { + position: absolute; + left: 0px; + width: 100%; + height: calc(100% - 18px); + background-color: var(--arrow-color); + z-index: 1; + + display: flex; + align-items: center; + justify-content: center; + } + + .end-triangle { + position: absolute; + left: 50%; + bottom: 0px; + transform: translateX(-50%); + z-index: 1; + + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-top: 20px solid var(--arrow-color); + } + } +} diff --git a/examples/rag-playground/src/components/playground/playground.ts b/examples/rag-playground/src/components/playground/playground.ts new file mode 100644 index 0000000..08887f4 --- /dev/null +++ b/examples/rag-playground/src/components/playground/playground.ts @@ -0,0 +1,102 @@ +import { LitElement, css, unsafeCSS, html, PropertyValues } from 'lit'; +import { customElement, property, state, query } from 'lit/decorators.js'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; + +import componentCSS from './playground.css?inline'; + +/** + * Playground element. + * + */ +@customElement('mememo-playground') +export class MememoPlayground extends LitElement { + //==========================================================================|| + // Class Properties || + //==========================================================================|| + + //==========================================================================|| + // Lifecycle Methods || + //==========================================================================|| + constructor() { + super(); + } + + /** + * This method is called before new DOM is updated and rendered + * @param changedProperties Property that has been changed + */ + willUpdate(changedProperties: PropertyValues) {} + + //==========================================================================|| + // Custom Methods || + //==========================================================================|| + async initData() {} + + //==========================================================================|| + // Event Handlers || + //==========================================================================|| + + //==========================================================================|| + // Private Helpers || + //==========================================================================|| + + //==========================================================================|| + // Templates and Styles || + //==========================================================================|| + render() { + return html` +
+
Input
+
Search
+
Text
+
Prompt
+
Model
+
Output
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ `; + } + + static styles = [ + css` + ${unsafeCSS(componentCSS)} + ` + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'mememo-playground': MememoPlayground; + } +} diff --git a/examples/rag-playground/src/components/prompt-panel/prompt-panel.ts b/examples/rag-playground/src/components/prompt-panel/prompt-panel.ts index 61af1fc..190cebb 100644 --- a/examples/rag-playground/src/components/prompt-panel/prompt-panel.ts +++ b/examples/rag-playground/src/components/prompt-panel/prompt-panel.ts @@ -62,7 +62,7 @@ export class MememoPromptPanel extends LitElement { detail: '', requestID: this.embeddingWorkerRequestID, model: EmbeddingModel.gteSmall, - sentences: ['Hello, how are you', 'yo'] + sentences: ['Hello, how are you'] } }; this.embeddingWorker.postMessage(message);