Add playground grid

Signed-off-by: Jay Wang <[email protected]>
poloclub · Feb 2, 2024 · 72129df · 72129df
1 parent ac944b0
commit 72129df
Show file tree

Hide file tree

Showing 6 changed files with 394 additions and 5 deletions.
diff --git a/examples/rag-playground/index.html b/examples/rag-playground/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jay's App</title>
+    <title>MeMemo</title>
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git 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
@@ -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`
       <div class="page">
         <div class="app-container">
-          <mememo-prompt-panel></mememo-prompt-panel>
+          <mememo-playground></mememo-playground>
         </div>
       </div>
     `;

diff --git a/examples/rag-playground/src/components/playground/playground.css 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);
+    }
+  }
+}