add frontend

video-db · Oct 15, 2024 · 6eb2746 · 6eb2746
1 parent 90f2ed8
commit 6eb2746
Show file tree

Hide file tree

Showing 51 changed files with 2,759 additions and 4 deletions.
diff --git a/docs/get_started/install.md b/docs/get_started/install.md
@@ -3,8 +3,8 @@
 * Clone the repository:
 
 ```console
-git clone https://github.com/Spext/video-agents.git
-cd video-agents
+git clone https://github.com/video-db/Spielberg.git
+cd Spielberg
 ```
 
 * Create the .env file and set the environment variables:

diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,5 @@
-# Welcome to Video-Agents
+# Welcome to Spielberg
 
-The Video Agents project is an advanced video processing and analysis platform that utilizes a range of AI agents and language models to handle diverse video management needs and tasks. It features a modular architecture that supports easy expansion and integration of new functionalities. Core components include specialized agents for distinct processing tasks, multiple language models for natural language processing, and a flexible database interface for data storage and retrieval. The project emphasizes ease of installation and setup through a streamlined Makefile, catering to developers looking to deploy or extend its capabilities efficiently.
+The Spielberg project is an advanced video processing and analysis platform that utilizes a range of AI agents and language models to handle diverse video management needs and tasks. It features a modular architecture that supports easy expansion and integration of new functionalities. Core components include specialized agents for distinct processing tasks, multiple language models for natural language processing, and a flexible database interface for data storage and retrieval. The project emphasizes ease of installation and setup through a streamlined Makefile, catering to developers looking to deploy or extend its capabilities efficiently.
 
 ## Features
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
@@ -0,0 +1,16 @@
+# .dockerignore
+
+# Ignore directories
+node_modules/
+venv/
+__pycache__/
+logs/
+tmp/
+
+# Ignore specific files
+.DS_Store
+*.log
+*.pyc
+
+# Ignore environment files (if you don't want to copy them to the image)
+.env
diff --git a/frontend/.env.sample b/frontend/.env.sample
@@ -0,0 +1,3 @@
+VITE_APP_BACKEND_URL=http://127.0.0.1:8000
+VITE_PORT=8080
+VITE_OPEN_BROWSER=true
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:22.8.0-alpine
+
+WORKDIR /app
+
+COPY . /app/
+
+RUN npm install
+
+EXPOSE 8080
+CMD ["npm", "run", "dev"]
diff --git a/frontend/Makefile b/frontend/Makefile
@@ -0,0 +1,24 @@
+# Detect the shell (sh, bash, etc.)
+SHELL := $(shell echo $$SHELL)
+
+# Default target
+.DEFAULT_GOAL := help
+
+# Phony targets
+.PHONY: help install update run
+
+help:
+	@echo "--------------- HELP ---------------"
+	@echo "To install frontend dependencies: make install"
+	@echo "To update frontend dependencies: make update"
+	@echo "To start the frontend server: make run"
+	@echo "------------------------------------"
+
+install:
+	@npm install
+
+update:
+	@npm update
+
+run:
+	@npm run dev
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.png" />
+    <title>Chat With Video</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "spielberg-fe",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@videodb/chat-vue": "file:../../videodb-chat",
+    "@videodb/player-vue": "^0.0.2",
+    "axios": "^1.7.5",
+    "dayjs": "^1.11.13",
+    "lodash.debounce": "^4.0.8",
+    "marked": "^14.1.0",
+    "socket.io-client": "^4.7.5",
+    "uuid": "^10.0.0",
+    "vue": "^3.4.37",
+    "vue-router": "^4.4.3",
+    "vue3-popper": "^1.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.4.1"
+  }
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png
diff --git a/frontend/public/icons/ai_sparkle.png b/frontend/public/icons/ai_sparkle.png
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -0,0 +1,28 @@
+<script setup>
+import "./style.css";
+</script>
+
+<template>
+  <div class="w-full h-full template">
+    <router-view />
+  </div>
+</template>
+
+<style>
+:root {
+  --popper-theme-background-color: #333333;
+  --popper-theme-background-color-hover: #333333;
+  --popper-theme-text-color: #ffffff;
+  --popper-theme-border-width: 0px;
+  --popper-theme-border-style: solid;
+  --popper-theme-border-radius: 8px;
+  --popper-theme-padding: 4px 8px;
+  --popper-theme-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.08);
+}
+
+
+html {
+  overflow: hidden;
+}
+
+</style>
diff --git a/frontend/src/components/atoms/Avatar.vue b/frontend/src/components/atoms/Avatar.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    :class="`${className}`"
+    :style="{
+      width: `${size}px`,
+      height: `${size}px`,
+      minWidth: `${size}px`,
+    }"
+  >
+    <img
+      v-if="src && src !== ''"
+      :src="src"
+      :class="`h-full w-full min-w-full rounded-${rounded}`"
+    />
+    <div
+      v-else
+      class="flex items-center justify-center text-white"
+      :style="{ background: stringToHslColor(name) }"
+      :class="`h-full w-full min-w-full rounded-${rounded}`"
+    >
+      {{ name.charAt(0) }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '60',
+    },
+    rounded: {
+      type: String,
+      default: 'full',
+    },
+  },
+  computed: {
+    backgroundImage() {
+      return `url("${this.src}")`
+    },
+  },
+  methods: {
+    stringToHslColor(str, s = 80, l = 35) {
+      let hash = 0
+      for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash)
+      }
+
+      hash = hash % 360
+      return 'hsl(' + hash + ', ' + s + '%, ' + l + '%)'
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/atoms/Button.vue b/frontend/src/components/atoms/Button.vue
@@ -0,0 +1,62 @@
+<template>
+  <button
+    :type="type"
+    :class="computedClass"
+    :disabled="variant === 'disabled'"
+    @click="emitClick()"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+import { buttonTheme as theme } from "./theme";
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "button",
+    },
+    onClick: {
+      type: Function,
+      default: () => null,
+    },
+    size: {
+      type: String,
+      default: "normal",
+    },
+    variant: {
+      type: String,
+      default: "primary",
+    },
+    classname: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    computedClass() {
+      return [
+        "base",
+        theme.base,
+        theme.sizes[this.size],
+        theme.variants[this.variant],
+        this.classname,
+      ];
+    },
+  },
+  methods: {
+    emitClick() {
+      this.onClick();
+      this.$emit("click");
+    },
+  },
+};
+</script>
+
+<style scoped lang="css">
+.base {
+  letter-spacing: 0.04em;
+}
+</style>
diff --git a/frontend/src/components/atoms/IconButton.vue b/frontend/src/components/atoms/IconButton.vue
@@ -0,0 +1,59 @@
+<template>
+  <button
+    :type="type"
+    :class="computedClass"
+    :disabled="variant === 'disabled'"
+    @click="emitClick()"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+import { iconbuttonTheme as theme } from './theme'
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'button',
+    },
+    onClick: {
+      type: Function,
+      default: () => null,
+    },
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    variant: {
+      type: String,
+      default: 'normal',
+    },
+    classname: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    computedClass() {
+      return [
+        theme.base,
+        theme.sizes[this.size],
+        theme.variants[this.variant],
+        'iconbutton',
+        this.classname,
+      ]
+    },
+  },
+  methods: {
+    emitClick() {
+      this.onClick()
+      this.$emit('click')
+    },
+  },
+}
+</script>
+
+<style>
+</style>
diff --git a/frontend/src/components/atoms/theme.js b/frontend/src/components/atoms/theme.js
@@ -0,0 +1,32 @@
+export const iconbuttonTheme = {
+    base: `inline-flex items-center justify-center focus:outline-none`,
+    sizes: {
+      small: `p-1 rounded-2 text-xl leading-5`,
+      normal: `p-1 rounded-8 text-xl leading-5`,
+      large: `p-2 rounded-xl text-2xl leading-5`,
+    },
+    variants: {
+      normal: `border border-transparent hover:border-kilvish-200 hover:bg-kilvish-200 active:border-kilvish-200 active:bg-kilvish-200 text-kilvish`,
+      bordered: `border border-kilvish-300 hover:bg-kilvish-200 active:border-kilvish-200 active:bg-kilvish-200 text-kilvish`,
+      disabled: `border hover:border-kilvish-200 text-kilvish-400 cursor-default`,
+      active: `border border-kilvish bg-kilvish text-white shadow-key`,
+    },
+  }
+
+  export const buttonTheme = {
+    base: `inline-flex items-center focus:outline-none font-medium uppercase`,
+    sizes: {
+      small: `px-10 py-6 rounded-6 text-captionsm`,
+      normal: `px-12 py-8 rounded-8 text-xs`,
+      large: `px-14 py-12 rounded-xl text-base`,
+    },
+    variants: {
+      primary: `border border-kilvish text-white bg-kilvish hover:border-kilvish-900 hover:bg-kilvish-900 focus:border-kilvish-800 focus:bg-kilvish-800`,
+      secondary: `text-kilvish border border-kilvish-300 hover:border-kilvish-200 hover:bg-kilvish-200 active:border-kilvish-300 active:bg-kilvish-300`,
+      success: `border border-green text-white bg-green hover:border-green-600 hover:bg-green-600 focus:border-green-700 focus:bg-green-700`,
+      disabled: `border border-kilvish-200 text-kilvish-500 bg-kilvish-200 cursor-default`,
+    },
+  }
+
+  export default {}
+