Add AudioQnA UI (#92)

* add AudioQnA UI

Signed-off-by: Yue, Wenjiao <[email protected]>

AudioQnA/front_end/.editorconfig

@@ -0,0 +1,10 @@
+[*]
+indent_style = tab
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+indent_style = space
+indent_size = 2

AudioQnA/front_end/.env

@@ -0,0 +1,7 @@
+TTS_URL = 'http://x.x.x.x:yyyy'
+
+UPLOAD_URL = 'http://x.x.x.x:yyyy'
+
+CHAT_URL = 'http://x.x.x.x:yyyy'
+
+ASR_URL = 'http://x.x.x.x:yyyy'

AudioQnA/front_end/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

AudioQnA/front_end/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: "@typescript-eslint/parser",
+	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+	plugins: ["svelte3", "@typescript-eslint", "neverthrow"],
+	ignorePatterns: ["*.cjs"],
+	overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
+	settings: {
+		"svelte3/typescript": () => require("typescript"),
+	},
+	parserOptions: {
+		sourceType: "module",
+		ecmaVersion: 2020,
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true,
+	},
+};

AudioQnA/front_end/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

AudioQnA/front_end/.prettierrc

@@ -0,0 +1,13 @@
+{
+	"pluginSearchDirs": [
+		"."
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

AudioQnA/front_end/README.md

@@ -0,0 +1,36 @@
+<h1 align="center" id="title">AudioQnA</h1>
+
+### 📸 Project Screenshots
+
+![project-screenshot](https://imgur.com/qrt8Lce.png)
+![project-screenshot](https://imgur.com/L12DP8Y.png)
+
+<h2>🧐 Features</h2>
+
+Here're some of the project's features:
+
+- Start a Talking Chat：Initiate voice chat, able to input voice content, and customize the conversation sound based on the uploaded file.
+- Upload File: Select local upload of voice file. Chat based on the uploaded sound.
+- Scroll to Bottom: The chat automatically slides to the bottom.
+
+<h2>🛠️ Get it Running:</h2>
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+3. Modify the required .env variables.
+
+   ```
+    TTS_URL = ''
+
+    UPLOAD_URL = ''
+
+    CHAT_URL = ''
+
+    ASR_URL = ''
+   ```
+
+4. Execute `npm install` to install the corresponding dependencies.
+
+5. Execute `npm run dev` in both environments

AudioQnA/front_end/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "sveltekit-auth-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev --port 5175 --host 0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@sveltejs/adapter-auto": "1.0.0-next.75",
+    "@sveltejs/kit": "^1.30.4",
+    "@tailwindcss/typography": "0.5.7",
+    "@types/debug": "4.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "autoprefixer": "^10.4.7",
+    "daisyui": "^3.5.0",
+    "debug": "4.3.4",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-neverthrow": "1.1.4",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "neverthrow": "5.0.0",
+    "pocketbase": "0.7.0",
+    "postcss": "^8.4.23",
+    "postcss-load-config": "^4.0.1",
+    "postcss-preset-env": "^8.3.2",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.7.0",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "svelte": "^3.59.1",
+    "svelte-check": "^2.7.1",
+    "svelte-fa": "3.0.3",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.1.5",
+    "ts-pattern": "4.0.5",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4",
+    "vite": "^4.3.9"
+  },
+  "type": "module",
+  "dependencies": {
+    "echarts": "^5.4.2",
+    "flowbite-svelte": "^0.38.5",
+    "fuse": "^0.4.0",
+    "fuse.js": "^6.6.2",
+    "ramda": "^0.29.0",
+    "sse.js": "^0.6.1",
+    "svelte-notifications": "^0.9.98"
+  }
+}

AudioQnA/front_end/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer,
+	],
+};
+
+module.exports = config;

AudioQnA/front_end/src/app.d.ts

@@ -0,0 +1,16 @@
+// See: https://kit.svelte.dev/docs/types#app
+// import { Result} from "neverthrow";
+
+declare namespace App {
+	interface Locals {
+		user?: User;
+	}
+	// interface PageData { }
+	// interface PageError {}
+	// interface Platform {}
+}
+
+interface ChatMessage {
+	role: string;
+	content: string;
+}

AudioQnA/front_end/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>

AudioQnA/front_end/src/app.postcss

@@ -0,0 +1,82 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.btn {
+	@apply flex-nowrap;
+}
+a.btn {
+	@apply no-underline;
+}
+.input {
+	@apply text-base;
+}
+
+.bg-dark-blue {
+	background-color: #004a86;
+}
+
+.bg-light-blue {
+	background-color: #0068b5;
+}
+
+.bg-turquoise {
+	background-color: #00a3f6;
+}
+
+.bg-header {
+	background-color: #ffffff;
+}
+
+.bg-button {
+	background-color: #0068b5;
+}
+
+.bg-title {
+	background-color: #f7f7f7;
+}
+
+.text-header {
+	color: #0068b5;
+}
+
+.text-button {
+	color: #0071c5;
+}
+
+.text-title-color {
+	color: rgb(38,38,38);
+}
+
+.font-intel {
+	font-family: "intel-clear","tahoma",Helvetica,"helvetica",Arial,sans-serif;
+}
+
+.font-title-intel {
+	font-family: "intel-one","intel-clear",Helvetica,Arial,sans-serif;
+}
+
+.bg-footer {
+	background-color: #e7e7e7;
+}
+
+.bg-light-green {
+	background-color: #d7f3a1;
+}
+
+.bg-purple {
+	background-color: #653171;
+}
+
+.bg-dark-blue {
+	background-color: #224678;
+}
+
+.border-input-color {
+	border-color: #605e5c;
+}
+
+.w-12\/12 {
+	width: 100%
+}

AudioQnA/front_end/src/lib/assets/icons/svelte/arrow-path-icon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let overrideClasses = '';
+
+  const classes = overrideClasses ? overrideClasses : 'w-4 h-4 text-gray-500';
+</script>
+
+<svg
+  class={classes}
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+  />
+</svg>

AudioQnA/front_end/src/lib/assets/icons/svelte/assistant.svelte

@@ -0,0 +1 @@
+<svg t="1713432596850" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7421" width="32" height="32"><path d="M399.837 3.809h244.886v1016.381h-244.886v-1016.381z" fill="#231915" p-id="7422"></path></svg>

AudioQnA/front_end/src/lib/assets/icons/svelte/chat-bubble-left-icon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let overrideClasses = '';
+
+  const classes = overrideClasses ? overrideClasses : `w-6 h-6`;
+</script>
+
+<svg
+  class={classes}
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+  />
+</svg>

AudioQnA/front_end/src/lib/assets/icons/svelte/chat.svelte

@@ -0,0 +1 @@
+<svg class="w-6 h-6" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#797a9f"><path d="M512 64c259.2 0 469.333333 200.576 469.333333 448s-210.133333 448-469.333333 448a484.48 484.48 0 0 1-232.725333-58.88l-116.394667 50.645333a42.666667 42.666667 0 0 1-58.517333-49.002666l29.76-125.013334C76.629333 703.402667 42.666667 611.477333 42.666667 512 42.666667 264.576 252.8 64 512 64z m0 64C287.488 128 106.666667 300.586667 106.666667 512c0 79.573333 25.557333 155.434667 72.554666 219.285333l5.525334 7.317334 18.709333 24.192-26.965333 113.237333 105.984-46.08 27.477333 15.018667C370.858667 878.229333 439.978667 896 512 896c224.512 0 405.333333-172.586667 405.333333-384S736.512 128 512 128z m-157.696 341.333333a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m159.018667 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m158.997333 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z"></path></svg>

AudioQnA/front_end/src/lib/assets/icons/svelte/check-icon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let overrideClasses = '';
+
+  const classes = overrideClasses ? overrideClasses : `w-6 h-6`;
+</script>
+
+<svg
+  class={classes}
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M4.5 12.75l6 6 9-13.5"
+  />
+</svg>