Add rag playground

Signed-off-by: Jay Wang <[email protected]>

examples/rag-playground/.eslintrc.cjs

@@ -0,0 +1,72 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:wc/recommended',
+    'plugin:lit/recommended',
+    'prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    extraFileExtensions: ['.cjs']
+  },
+  env: {
+    es6: true,
+    browser: true
+  },
+  plugins: ['lit', '@typescript-eslint', 'prettier'],
+  ignorePatterns: ['node_modules'],
+  rules: {
+    indent: 'off',
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single', { avoidEscape: true }],
+    'prefer-const': ['error'],
+    semi: ['error', 'always'],
+    // 'max-len': [
+    //   'warn',
+    //   {
+    //     code: 80
+    //   }
+    // ],
+    'no-constant-condition': ['error', { checkLoops: false }],
+    'prettier/prettier': 2,
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_'
+      }
+    ],
+    'no-self-assign': 'off'
+  }
+};

examples/rag-playground/.fttemplates/default-template/[FTName].css

@@ -0,0 +1,11 @@
+.<FTName|paramcase > {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  box-sizing: border-box;
+}

examples/rag-playground/.fttemplates/default-template/[FTName].ts

@@ -0,0 +1,61 @@
+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 './<FTName>.css?inline';
+
+/**
+ * [FTName | sentencecase] element.
+ *
+ */
+@customElement('mememo-[FTName]')
+export class Mememo<FTName | pascalcase> 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<this>) {}
+
+  //==========================================================================||
+  //                              Custom Methods                              ||
+  //==========================================================================||
+  async initData() {};
+
+  //==========================================================================||
+  //                              Event Handlers                              ||
+  //==========================================================================||
+
+  //==========================================================================||
+  //                             Private Helpers                              ||
+  //==========================================================================||
+
+  //==========================================================================||
+  //                           Templates and Styles                           ||
+  //==========================================================================||
+  render() {
+    return html` <div class="<FTName | paramcase>">[FTName | sentencecase]</div> `;
+  };
+
+  static styles = [
+    css`
+      ${unsafeCSS(componentCSS)}
+    `
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'mememo-<FTName>': Mememo<FTName | pascalcase>;
+  }
+}

examples/rag-playground/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+pnpm-lock.yaml
+.vercel

examples/rag-playground/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

examples/rag-playground/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="/global.css" />
+    <script type="module" src="/src/components/app/app.ts"></script>
+  </head>
+
+  <body>
+    <mememo-rag-playground> </mememo-rag-playground>
+  </body>
+</html>

examples/rag-playground/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "jay",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "tsc && vite build",
+    "build:github": "tsc && vite build --mode github",
+    "deploy:github": "pnpm run build:github && pnpm gh-pages -m \"Deploy $(git log '--format=format:%H' main -1)\" -d ./dist",
+    "deploy:vercel": "pnpm run build && cp -r .vercel ./dist/ && vercel ./dist",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@floating-ui/dom": "^1.6.1",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@xenova/transformers": "^2.14.2",
+    "@xiaohk/utils": "^0.0.6",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-lit": "^1.11.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-wc": "^2.0.4",
+    "gh-pages": "^6.1.1",
+    "lit": "^3.1.2",
+    "prettier": "^3.2.4",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.2",
+    "vite-plugin-web-components-hmr": "^0.1.3"
+  }
+}