diff --git a/Text2Image/assets/img/text2img_init.png b/Text2Image/assets/img/text2img_init.png new file mode 100644 index 0000000000..4b96c6656b Binary files /dev/null and b/Text2Image/assets/img/text2img_init.png differ diff --git a/Text2Image/assets/img/text2img_response.png b/Text2Image/assets/img/text2img_response.png new file mode 100644 index 0000000000..7d61c4860f Binary files /dev/null and b/Text2Image/assets/img/text2img_response.png differ diff --git a/Text2Image/ui/docker/Dockerfile b/Text2Image/ui/docker/Dockerfile new file mode 100644 index 0000000000..ac2bb7da31 --- /dev/null +++ b/Text2Image/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"] \ No newline at end of file diff --git a/Text2Image/ui/svelte/.editorconfig b/Text2Image/ui/svelte/.editorconfig new file mode 100644 index 0000000000..2b7a6637f7 --- /dev/null +++ b/Text2Image/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 diff --git a/Text2Image/ui/svelte/.env b/Text2Image/ui/svelte/.env new file mode 100644 index 0000000000..7ca6806494 --- /dev/null +++ b/Text2Image/ui/svelte/.env @@ -0,0 +1,2 @@ +BASE_URL = '/v1/text2image' + diff --git a/Text2Image/ui/svelte/.eslintignore b/Text2Image/ui/svelte/.eslintignore new file mode 100644 index 0000000000..38972655fa --- /dev/null +++ b/Text2Image/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 diff --git a/Text2Image/ui/svelte/.eslintrc.cjs b/Text2Image/ui/svelte/.eslintrc.cjs new file mode 100644 index 0000000000..a6592d11f7 --- /dev/null +++ b/Text2Image/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, + }, +}; diff --git a/Text2Image/ui/svelte/.prettierignore b/Text2Image/ui/svelte/.prettierignore new file mode 100644 index 0000000000..38972655fa --- /dev/null +++ b/Text2Image/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 diff --git a/Text2Image/ui/svelte/.prettierrc b/Text2Image/ui/svelte/.prettierrc new file mode 100644 index 0000000000..c932dd178f --- /dev/null +++ b/Text2Image/ui/svelte/.prettierrc @@ -0,0 +1 @@ +{"pluginSearchDirs": ["."], "overrides": [{"files": "*.svelte", "options": {"parser": "svelte"}}]} diff --git a/Text2Image/ui/svelte/README.md b/Text2Image/ui/svelte/README.md new file mode 100644 index 0000000000..296f7945b7 --- /dev/null +++ b/Text2Image/ui/svelte/README.md @@ -0,0 +1,29 @@ +# Text2Image Customized UI + +## 📸 Project Screenshots + +![project-screenshot](../../assets/img/text2img_init.png) +![project-screenshot](../../assets/img/text2img_response.png) + +## 🧐 Features + +Here're some of the project's features: + +- Generate Images from Text: Enter the image description and the desired number of images, then wait for them to be generated. + +## 🛠️ Get it Running + +1. Clone the repo. + +2. cd command to the current folder. + +3. Modify the required .env variables. + + ``` + BACKEND_BASE_URL = '' + + ``` + +4. Execute `npm install` to install the corresponding dependencies. + +5. Execute `npm run dev` in both environments diff --git a/Text2Image/ui/svelte/package.json b/Text2Image/ui/svelte/package.json new file mode 100644 index 0000000000..158764a9ba --- /dev/null +++ b/Text2Image/ui/svelte/package.json @@ -0,0 +1,61 @@ +{ + "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.48.0", + "@sveltejs/adapter-auto": "1.0.0-next.75", + "@sveltejs/adapter-static": "^3.0.0", + "@sveltejs/kit": "^2.0.0", + "@tailwindcss/typography": "0.5.7", + "@types/debug": "4.1.7", + "@types/node": "^20.12.13", + "@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", + "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": "^4.0.0", + "svelte-check": "^3.0.0", + "svelte-fa": "3.0.3", + "svelte-preprocess": "^6.0.2", + "tailwindcss": "^3.1.5", + "tslib": "^2.3.1", + "typescript": "^5.0.0", + "vite": "^5.0.0" + }, + "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", + "playwright": "^1.44.0", + "ramda": "^0.29.0", + "sse.js": "^0.6.1", + "svelte-notifications": "^0.9.98", + "svrollbar": "^0.12.0" + } +} diff --git a/Text2Image/ui/svelte/playwright.config.ts b/Text2Image/ui/svelte/playwright.config.ts new file mode 100644 index 0000000000..bd88ef1f5f --- /dev/null +++ b/Text2Image/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: 10 * 60 * 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"] }, + }, + ], +}); diff --git a/Text2Image/ui/svelte/postcss.config.cjs b/Text2Image/ui/svelte/postcss.config.cjs new file mode 100644 index 0000000000..b384b43ebe --- /dev/null +++ b/Text2Image/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; diff --git a/Text2Image/ui/svelte/src/app.d.ts b/Text2Image/ui/svelte/src/app.d.ts new file mode 100644 index 0000000000..7e27c57aee --- /dev/null +++ b/Text2Image/ui/svelte/src/app.d.ts @@ -0,0 +1,16 @@ +// 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"; diff --git a/Text2Image/ui/svelte/src/app.html b/Text2Image/ui/svelte/src/app.html new file mode 100644 index 0000000000..db69926ea8 --- /dev/null +++ b/Text2Image/ui/svelte/src/app.html @@ -0,0 +1,28 @@ + + + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/Text2Image/ui/svelte/src/app.postcss b/Text2Image/ui/svelte/src/app.postcss new file mode 100644 index 0000000000..1bb14630c8 --- /dev/null +++ b/Text2Image/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% +} \ No newline at end of file diff --git a/Text2Image/ui/svelte/src/lib/assets/layout/css/driver.css b/Text2Image/ui/svelte/src/lib/assets/layout/css/driver.css new file mode 100644 index 0000000000..453db6082a --- /dev/null +++ b/Text2Image/ui/svelte/src/lib/assets/layout/css/driver.css @@ -0,0 +1,94 @@ +.driverjs-theme { + background: transparent; + color: #fff; + box-shadow: none; + padding: 0; +} + +.driver-popover-arrow { + border: 10px solid transparent; + animation: blink 1s 3 steps(1); +} + +@keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 1; + } +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow { + border-left-color: #174ed1; +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow { + border-right-color: #174ed1; +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow { + border-top-color: #174ed1; +} + +.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow { + border-bottom-color: #174ed1; +} + +.driver-popover-footer { + background: transparent; + color: #fff; +} +.driver-popover-title { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.driver-popover-title, +.driver-popover-description { + display: block; + padding: 15px 15px 7px 15px; + background: #174ed1; + border: none; +} + +.driver-popover-close-btn { + color: #fff; +} + +.driver-popover-footer button:hover, +.driver-popover-footer button:focus { + background: #174ed1; + color: #fff; +} + +.driver-popover-description { + padding: 5px 15px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +.driver-popover-title[style*="block"] + .driver-popover-description { + margin: 0; +} +.driver-popover-progress-text { + color: #fff; +} + +.driver-popover-footer button { + background: #174ed1; + border: 2px #174ed1 dashed; + color: #fff; + border-radius: 50%; + text-shadow: none; +} +.driver-popover-close-btn:hover, +.driver-popover-close-btn:focus { + color: #fff; +} +.driver-popover-navigation-btns button + button { + margin-left: 10px; +} diff --git a/Text2Image/ui/svelte/src/lib/modules/imageList/GenerateImg.svelte b/Text2Image/ui/svelte/src/lib/modules/imageList/GenerateImg.svelte new file mode 100644 index 0000000000..736ca84674 --- /dev/null +++ b/Text2Image/ui/svelte/src/lib/modules/imageList/GenerateImg.svelte @@ -0,0 +1,24 @@ + + + + +

Result

+ +
+ {#each $imgList as img} +
+ +
+ {/each} +
diff --git a/Text2Image/ui/svelte/src/lib/network/Network.ts b/Text2Image/ui/svelte/src/lib/network/Network.ts new file mode 100644 index 0000000000..1b770763b7 --- /dev/null +++ b/Text2Image/ui/svelte/src/lib/network/Network.ts @@ -0,0 +1,39 @@ +// 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. + +import { env } from "$env/dynamic/public"; + +const BACKEND_BASE_URL = env.BASE_URL; + +export async function fetchImgList(query: string, img_num: number) { + const url = `${BACKEND_BASE_URL}`; + const data = { + prompt: query, + num_images_per_prompt: img_num, + }; + const init: RequestInit = { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data), + }; + + try { + const response = await fetch(url, init); + if (!response.ok) throw response.status; + return await response.json(); + } catch (error) { + console.error("network error: ", error); + return undefined; + } +} diff --git a/Text2Image/ui/svelte/src/lib/shared/components/header/header.svelte b/Text2Image/ui/svelte/src/lib/shared/components/header/header.svelte new file mode 100644 index 0000000000..a5d5ca668c --- /dev/null +++ b/Text2Image/ui/svelte/src/lib/shared/components/header/header.svelte @@ -0,0 +1,33 @@ + + + +
+ +
diff --git a/Text2Image/ui/svelte/src/lib/shared/components/loading/Loading.svelte b/Text2Image/ui/svelte/src/lib/shared/components/loading/Loading.svelte new file mode 100644 index 0000000000..51e89cfe7e --- /dev/null +++ b/Text2Image/ui/svelte/src/lib/shared/components/loading/Loading.svelte @@ -0,0 +1,48 @@ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Text2Image/ui/svelte/src/lib/shared/components/scrollbar/Scrollbar.svelte b/Text2Image/ui/svelte/src/lib/shared/components/scrollbar/Scrollbar.svelte new file mode 100644 index 0000000000..f18e23e690 --- /dev/null +++ b/Text2Image/ui/svelte/src/lib/shared/components/scrollbar/Scrollbar.svelte @@ -0,0 +1,48 @@ + + + + +
+ +
+ +
+ +
+ + diff --git a/Text2Image/ui/svelte/src/lib/shared/stores/common/Store.ts b/Text2Image/ui/svelte/src/lib/shared/stores/common/Store.ts new file mode 100644 index 0000000000..fd5b2cf6b5 --- /dev/null +++ b/Text2Image/ui/svelte/src/lib/shared/stores/common/Store.ts @@ -0,0 +1,17 @@ +// 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. + +import { writable } from "svelte/store"; + +export let imgList = writable([]); diff --git a/Text2Image/ui/svelte/src/routes/+layout.svelte b/Text2Image/ui/svelte/src/routes/+layout.svelte new file mode 100644 index 0000000000..e0206206e7 --- /dev/null +++ b/Text2Image/ui/svelte/src/routes/+layout.svelte @@ -0,0 +1,29 @@ + + + + + +
+ +
+ diff --git a/Text2Image/ui/svelte/src/routes/+page.svelte b/Text2Image/ui/svelte/src/routes/+page.svelte new file mode 100644 index 0000000000..bea2150dbc --- /dev/null +++ b/Text2Image/ui/svelte/src/routes/+page.svelte @@ -0,0 +1,161 @@ + + + + +
+
+
+

AI Image Generator

+
+ Description prompt + + {#if inputHint} +

+ Please input the details you want to describe! +

+ {/if} +
+
+ Number of images: + {#each numButtons as button} + + {/each} + + + {#if notNumber} +

+ Enter a number greater than 0! +

+ {/if} + +
+ {#if loading} + + {:else if $imgList.length !== 0} + + {/if} +
+
+ + diff --git a/Text2Image/ui/svelte/src/routes/+page.ts b/Text2Image/ui/svelte/src/routes/+page.ts new file mode 100644 index 0000000000..174376ecaf --- /dev/null +++ b/Text2Image/ui/svelte/src/routes/+page.ts @@ -0,0 +1,13 @@ +// 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. diff --git a/Text2Image/ui/svelte/static/favicon.png b/Text2Image/ui/svelte/static/favicon.png new file mode 100644 index 0000000000..75b997f815 Binary files /dev/null and b/Text2Image/ui/svelte/static/favicon.png differ diff --git a/Text2Image/ui/svelte/svelte.config.js b/Text2Image/ui/svelte/svelte.config.js new file mode 100644 index 0000000000..0f2977ecce --- /dev/null +++ b/Text2Image/ui/svelte/svelte.config.js @@ -0,0 +1,38 @@ +// 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. + +import adapter from "@sveltejs/adapter-auto"; +import preprocess from "svelte-preprocess"; +import postcssPresetEnv from "postcss-preset-env"; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + // Consult https://github.com/sveltejs/svelte-preprocess + // for more information about preprocessors + preprocess: preprocess({ + sourceMap: true, + postcss: { + plugins: [postcssPresetEnv({ features: { "nesting-rules": true } })], + }, + }), + + kit: { + adapter: adapter(), + env: { + publicPrefix: "", + }, + }, +}; + +export default config; diff --git a/Text2Image/ui/svelte/tailwind.config.cjs b/Text2Image/ui/svelte/tailwind.config.cjs new file mode 100644 index 0000000000..6cc3a8b951 --- /dev/null +++ b/Text2Image/ui/svelte/tailwind.config.cjs @@ -0,0 +1,43 @@ +// 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 config = { + content: ["./src/**/*.{html,js,svelte,ts}", "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}"], + + plugins: [require("flowbite/plugin")], + + darkMode: "class", + + theme: { + extend: { + colors: { + // flowbite-svelte + primary: { + 50: "#FFF5F2", + 100: "#FFF1EE", + 200: "#FFE4DE", + 300: "#FFD5CC", + 400: "#FFBCAD", + 500: "#FE795D", + 600: "#EF562F", + 700: "#EB4F27", + 800: "#CC4522", + 900: "#A5371B", + }, + }, + }, + }, +}; + +module.exports = config; diff --git a/Text2Image/ui/svelte/tests/txt2Img.spec.ts b/Text2Image/ui/svelte/tests/txt2Img.spec.ts new file mode 100644 index 0000000000..ee1035de1a --- /dev/null +++ b/Text2Image/ui/svelte/tests/txt2Img.spec.ts @@ -0,0 +1,28 @@ +// Copyright (C) 2024 Intel Corporation +// SPDX-License-Identifier: Apache-2.0 + +import { test, expect, type Page } from "@playwright/test"; + +// Initialization before each test +test.beforeEach(async ({ page }) => { + await page.goto("/"); +}); + +// Constants definition +const CHAT_ITEMS = ["An astronaut riding a green horse"]; + +// Helper function: Enter message to chat +async function enterMessageToChat(page: Page, message: string) { + await page.getByTestId("img-input").click(); + await page.getByTestId("img-input").fill(message); + await page.waitForTimeout(1000); + await page.getByTestId("img-gen").click(); +} + +// Test description: New Chat +test.describe("New Image", () => { + // Test: Enter message to generate new images + test("should enter message to generate new images", async ({ page }) => { + await enterMessageToChat(page, CHAT_ITEMS[0]); + }); +}); diff --git a/Text2Image/ui/svelte/tsconfig.json b/Text2Image/ui/svelte/tsconfig.json new file mode 100644 index 0000000000..0f47472f79 --- /dev/null +++ b/Text2Image/ui/svelte/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true + } +} diff --git a/Text2Image/ui/svelte/vite.config.ts b/Text2Image/ui/svelte/vite.config.ts new file mode 100644 index 0000000000..26a821a147 --- /dev/null +++ b/Text2Image/ui/svelte/vite.config.ts @@ -0,0 +1,26 @@ +// 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. + +import { sveltekit } from "@sveltejs/kit/vite"; +import type { UserConfig } from "vite"; + +const config: UserConfig = { + plugins: [sveltekit()], + server: { + host: "0.0.0.0", + port: 5173, + }, +}; + +export default config;