Add VisualQnA UI (#572)

* update VisualQnA front_end

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* update ViualQnA into the ui folder

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>

* Add dockerFile

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>

---------

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

VisualQnA/docker/ui/docker/Dockerfile

@@ -0,0 +1,26 @@
+# Copyright (C) 2024 Intel Corporation
+# SPDX-License-Identifier: Apache-2.0
+
+# Use node 20.11.1 as the base image
+FROM node:20.11.1
+
+# Update package manager and install Git
+RUN apt-get update -y && apt-get install -y git
+
+# Copy the front-end code repository
+COPY svelte /home/user/svelte
+
+# Set the working directory
+WORKDIR /home/user/svelte
+
+# Install front-end dependencies
+RUN npm install
+
+# Build the front-end application
+RUN npm run build
+
+# Expose the port of the front-end application
+EXPOSE 5173
+
+# Run the front-end application in preview mode
+CMD ["npm", "run", "preview", "--", "--port", "5173", "--host", "0.0.0.0"]

VisualQnA/docker/ui/svelte/.editorconfig

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

VisualQnA/docker/ui/svelte/.env

@@ -0,0 +1 @@
+BACKEND_BASE_URL = 'http://backend_address:8888/v1/visualqna'

VisualQnA/docker/ui/svelte/.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

VisualQnA/docker/ui/svelte/.eslintrc.cjs

@@ -0,0 +1,34 @@
+// Copyright (c) 2024 Intel Corporation
+//
+// 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", "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,
+ },
+};

VisualQnA/docker/ui/svelte/.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

VisualQnA/docker/ui/svelte/.prettierrc

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

VisualQnA/docker/ui/svelte/package.json

@@ -0,0 +1,59 @@
+{
+ "name": "sveltekit-auth-example",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "dev": "vite dev",
+ "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",
+ "@playwright/test": "^1.45.2",
+ "@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.1",
+ "date-picker-svelte": "^2.6.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",
+ "postcss": "^8.4.31",
+ "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",
+ "tslib": "^2.3.1",
+ "typescript": "^4.7.4",
+ "vite": "^4.5.2"
+ },
+ "type": "module",
+ "dependencies": {
+ "date-fns": "^2.30.0",
+ "driver.js": "^1.3.0",
+ "flowbite-svelte": "^0.38.5",
+ "flowbite-svelte-icons": "^1.4.0",
+ "fuse.js": "^6.6.2",
+ "lodash": "^4.17.21",
+ "ramda": "^0.29.0",
+ "sse.js": "^0.6.1",
+ "svelte-notifications": "^0.9.98",
+ "svrollbar": "^0.12.0"
+ }
+}

VisualQnA/docker/ui/svelte/playwright.config.ts

@@ -0,0 +1,54 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+ testDir: "./tests",
+ /* Maximum time one test can run for. */
+ timeout: 30 * 1000,
+ expect: {
+ /**
+ * Maximum time expect() should wait for the condition to be met.
+ * For example in `await expect(locator).toHaveText();`
+ */
+ timeout: 5000,
+ },
+ /* Run tests in files in parallel */
+ fullyParallel: true,
+ /* Fail the build on CI if you accidentally left test.only in the source code. */
+ forbidOnly: !!process.env.CI,
+ /* Retry on CI only */
+ retries: process.env.CI ? 2 : 0,
+ /* Opt out of parallel tests on CI. */
+ workers: process.env.CI ? 1 : undefined,
+ /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+ reporter: [["html", { open: "never" }]],
+ /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+ use: {
+ /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+ actionTimeout: 0,
+ /* Base URL to use in actions like `await page.goto('/')`. */
+ baseURL: "http://localhost:5173",
+
+ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+ trace: "on-first-retry",
+ },
+
+ /* Configure projects for major browsers */
+ projects: [
+ {
+ name: "webkit",
+ use: { ...devices["Desktop Safari"] },
+ },
+ ],
+});

VisualQnA/docker/ui/svelte/postcss.config.cjs

@@ -0,0 +1,27 @@
+// Copyright (c) 2024 Intel Corporation
+//
+// 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.
+
+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;

VisualQnA/docker/ui/svelte/src/app.d.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2024 Intel Corporation
+//
+// 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.
+
+// See: https://kit.svelte.dev/docs/types#app
+// import { Result} from "neverthrow";
+interface Window {
+ deviceType: string;
+}

VisualQnA/docker/ui/svelte/src/app.html

@@ -0,0 +1,28 @@
+<!--
+ Copyright (c) 2024 Intel Corporation
+
+ 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.
+-->
+
+<!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 class="h-full w-full">%sveltekit.body%</div>
+ </body>
+</html>

VisualQnA/docker/ui/svelte/src/app.postcss

@@ -0,0 +1,86 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body {
+ height: 100%;
+}
+
+.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: #252e47;
+}
+
+.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%
+}