Add a new vector search + Web UI example.

trailbaseio · Nov 20, 2024 · 6bb517a · 6bb517a
1 parent fb2c5b9
commit 6bb517a
Show file tree

Hide file tree

Showing 28 changed files with 2,764 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,3 @@ node_modules/
 
 # Dev artifacts
 public/
-traildepot/
diff --git a/examples/blog/traildepot/.gitignore b/examples/blog/traildepot/.gitignore
@@ -5,3 +5,6 @@ secrets/
 uploads/
 
 !migrations/
+
+trailbase.js
+trailbase.d.ts
diff --git a/examples/coffeesearch/.gitignore b/examples/coffeesearch/.gitignore
@@ -0,0 +1,24 @@
+# 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?
diff --git a/examples/coffeesearch/Dockerfile b/examples/coffeesearch/Dockerfile
@@ -0,0 +1,19 @@
+FROM trailbase/trailbase:0.2.1 AS base
+
+COPY traildepot /app/traildepot
+COPY dist /app/public
+
+USER root
+
+RUN mkdir -p /app/traildepot/data
+RUN chown -R trailbase /app/traildepot/data
+RUN chmod +w /app/traildepot/data
+
+
+USER trailbase
+
+EXPOSE 4000
+ENTRYPOINT ["tini", "--"]
+CMD ["/app/trail", "--data-dir", "/app/traildepot", "run", "--address", "0.0.0.0:4000", "--public-dir", "/app/public"]
+
+HEALTHCHECK CMD curl --fail http://localhost:4000/api/healthcheck || exit 1
diff --git a/examples/coffeesearch/Makefile b/examples/coffeesearch/Makefile
@@ -0,0 +1,9 @@
+all: init app
+
+app: dist
+	pnpm build
+
+init:
+	mkdir -p traildepot/data; cat import.sql | sqlite3 traildepot/data/main.db -
+
+.PHONY: init
diff --git a/examples/coffeesearch/README.md b/examples/coffeesearch/README.md
@@ -0,0 +1,15 @@
+# Coffee Search
+
+A small web application demonstrating the use of TrailBase and its vector
+search to build a coffee search.
+
+To import the coffee data from CSV, run:
+
+```bash
+  mkdir -p traildepot/data
+  cat import.sql | sqlite3 traildepot/data/main.db -
+```
+
+## Reference
+
+* Coffee data [source](https://github.com/jldbc/coffee-quality-database/blob/master/data/arabica_data_cleaned.csv)
diff --git a/examples/coffeesearch/arabica_data_cleaned.csv b/examples/coffeesearch/arabica_data_cleaned.csv
diff --git a/examples/coffeesearch/eslint.config.js b/examples/coffeesearch/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/examples/coffeesearch/import.sql b/examples/coffeesearch/import.sql
@@ -0,0 +1,35 @@
+-- Create table if it doesn't exist.
+CREATE TABLE IF NOT EXISTS coffee (
+  Species TEXT,
+  Owner TEXT,
+
+  Aroma REAL,
+  Flavor REAL,
+  Acidity REAL,
+  Sweetness REAL,
+
+  embedding BLOB
+) STRICT;
+
+-- Empty table for clean import.
+DELETE FROM coffee;
+
+-- Go on to import data.
+DROP TABLE IF EXISTS temporary;
+
+.mode csv
+.import arabica_data_cleaned.csv temporary
+
+INSERT INTO coffee (Species, Owner, Aroma, Flavor, Acidity, Sweetness)
+SELECT
+  Species,
+  Owner,
+
+  CAST(Aroma AS REAL) AS Aroma,
+  CAST(Flavor AS REAL) AS Flavor,
+  CAST(Acidity AS REAL) AS Acidity,
+  CAST(Sweetness AS REAL) AS Sweetness
+FROM temporary;
+
+-- Clean up.
+DROP TABLE temporary;
diff --git a/examples/coffeesearch/index.html b/examples/coffeesearch/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Coffee Search</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/coffeesearch/package.json b/examples/coffeesearch/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "my-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "format": "prettier -w src traildepot/scripts",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "prettier": "^3.3.3",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
+  }
+}
diff --git a/examples/coffeesearch/src/App.css b/examples/coffeesearch/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/examples/coffeesearch/src/App.tsx b/examples/coffeesearch/src/App.tsx
@@ -0,0 +1,97 @@
+import { useState, useEffect } from "react";
+import "./App.css";
+
+type Data = Array<Array<object>>;
+
+async function getData(v: {
+  aroma: number;
+  flavor: number;
+  acidity: number;
+  sweetness: number;
+}): Promise<Data> {
+  const URL = import.meta.env.DEV ? "http://localhost:4000" : "";
+  const params = Object.entries(v)
+    .map(([k, v]) => `${k}=${v}`)
+    .join("&");
+  const response = await fetch(`${URL}/search?${params}`);
+  return await response.json();
+}
+
+function Input(props: {
+  label: string;
+  value: number;
+  update: (v: number) => void;
+}) {
+  return (
+    <>
+      <label>{props.label}:</label>
+      <input
+        type="number"
+        step="0.1"
+        value={props.value}
+        onChange={(el) => props.update(el.target.valueAsNumber)}
+      />
+    </>
+  );
+}
+
+function Table() {
+  const [aroma, setAroma] = useState(8);
+  const [flavor, setFlavor] = useState(8);
+  const [acidity, setAcidity] = useState(8);
+  const [sweetness, setSweetness] = useState(8);
+
+  const [data, setData] = useState<Data | undefined>();
+  useEffect(() => {
+    setData(undefined);
+    getData({ aroma, flavor, acidity, sweetness }).then((data) =>
+      setData(data),
+    );
+  }, [aroma, flavor, acidity, sweetness]);
+
+  const Row = (props: { row: Array<object> }) => (
+    <tr>
+      {props.row.map((d) => (
+        <td>{`${d}`}</td>
+      ))}
+    </tr>
+  );
+
+  return (
+    <>
+      <div className="inputs">
+        <Input label="Aroma" value={aroma} update={setAroma} />
+        <Input label="Flavor" value={flavor} update={setFlavor} />
+        <Input label="Acidity" value={acidity} update={setAcidity} />
+        <Input label="Sweetness" value={sweetness} update={setSweetness} />
+      </div>
+
+      <div className="table">
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Owner</th>
+              <th scope="col">Aroma</th>
+              <th scope="col">Flavor</th>
+              <th scope="col">Acidity</th>
+              <th scope="col">Sweetness</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {(data ?? []).map((row) => (
+              <Row row={row} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+export const App = () => (
+  <>
+    <h1>Coffee Search</h1>
+    <Table />
+  </>
+);
diff --git a/examples/coffeesearch/src/index.css b/examples/coffeesearch/src/index.css
@@ -0,0 +1,31 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.inputs {
+  margin: 1em;
+  display: grid;
+  gap: 1rem 0px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.table {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/examples/coffeesearch/src/main.tsx b/examples/coffeesearch/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { App } from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/coffeesearch/src/vite-env.d.ts b/examples/coffeesearch/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/coffeesearch/traildepot/.gitignore b/examples/coffeesearch/traildepot/.gitignore
@@ -0,0 +1,5 @@
+
+backups/
+data/
+secrets/
+uploads/
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,3 @@ node_modules/

		# Dev artifacts
		public/
		traildepot/