Move ui directory of Language Translation example and add it in README (#107)
* Move ui to LanguageTranslation and add it in README Signed-off-by: lvliang-intel <liang1.lv@intel.com>
This commit is contained in:
1
Translation/ui/svelte/.env
Normal file
1
Translation/ui/svelte/.env
Normal file
@@ -0,0 +1 @@
|
||||
BASIC_URL = 'http://x.x.x.x:yyyy'
|
||||
5
Translation/ui/svelte/.gitignore
vendored
Normal file
5
Translation/ui/svelte/.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
*/node_modules
|
||||
/build
|
||||
/dist
|
||||
*/.svelte-kit
|
||||
|
||||
1
Translation/ui/svelte/.npmrc
Normal file
1
Translation/ui/svelte/.npmrc
Normal file
@@ -0,0 +1 @@
|
||||
engine-strict=true
|
||||
26
Translation/ui/svelte/README.md
Normal file
26
Translation/ui/svelte/README.md
Normal file
@@ -0,0 +1,26 @@
|
||||
<h1 align="center" id="title">Language Translation</h1>
|
||||
|
||||
### 📸 Project Screenshots
|
||||
|
||||

|
||||

|
||||
|
||||
<h2>🧐 Features</h2>
|
||||
|
||||
Here're some of the project's features:
|
||||
|
||||
- Language Translation: It is able to recognize and handle multiple languages, providing translations for individual words, phrases, or even entire sentences.
|
||||
|
||||
<h2>🛠️ Get it Running:</h2>
|
||||
|
||||
1. Clone the repo.
|
||||
|
||||
2. cd command to the current folder.
|
||||
|
||||
3. Modify the required .env variables.
|
||||
```
|
||||
BASIC_URL = ''
|
||||
```
|
||||
4. Execute `npm install` to install the corresponding dependencies.
|
||||
|
||||
5. Execute `npm run dev` in both environments
|
||||
53
Translation/ui/svelte/package.json
Normal file
53
Translation/ui/svelte/package.json
Normal file
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "doc-summary",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build && npm run package",
|
||||
"preview": "vite preview",
|
||||
"package": "svelte-kit sync && svelte-package && publint",
|
||||
"prepublishOnly": "npm run package",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"svelte": "./dist/index.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"!dist/**/*.test.*",
|
||||
"!dist/**/*.spec.*"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"svelte": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/package": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"flowbite": "^2.3.0",
|
||||
"flowbite-svelte": "^0.38.5",
|
||||
"flowbite-svelte-icons": "^1.4.0",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss-load-config": "^5.0.2",
|
||||
"publint": "^0.1.9",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.11"
|
||||
},
|
||||
"svelte": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"sse.js": "^0.6.1",
|
||||
"svelte-notifications": "^0.9.98"
|
||||
}
|
||||
}
|
||||
27
Translation/ui/svelte/postcss.config.cjs
Normal file
27
Translation/ui/svelte/postcss.config.cjs
Normal file
@@ -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;
|
||||
27
Translation/ui/svelte/src/app.d.ts
vendored
Normal file
27
Translation/ui/svelte/src/app.d.ts
vendored
Normal file
@@ -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.
|
||||
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
28
Translation/ui/svelte/src/app.html
Normal file
28
Translation/ui/svelte/src/app.html
Normal file
@@ -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, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
4
Translation/ui/svelte/src/app.pcss
Normal file
4
Translation/ui/svelte/src/app.pcss
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
48
Translation/ui/svelte/src/lib/assets/loadingAnimation.svelte
Normal file
48
Translation/ui/svelte/src/lib/assets/loadingAnimation.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
<div
|
||||
class="mb-6 flex items-center justify-center self-center bg-black text-sm text-gray-500"
|
||||
/>
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<div class="relative inline-flex">
|
||||
<div class="h-2 w-2 rounded-full bg-[#0054ae]" />
|
||||
<div
|
||||
class="absolute left-0 top-0 h-2 w-2 animate-[ping_1s_infinite_100ms] rounded-full bg-[#0054ae]"
|
||||
/>
|
||||
<div
|
||||
class="duration-800 absolute left-0 top-0 h-2 w-2 animate-pulse rounded-full bg-[#0054ae]"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative inline-flex">
|
||||
<div class="h-2 w-2 rounded-full bg-[#0054ae]" />
|
||||
<div
|
||||
class="absolute left-0 top-0 h-2 w-2 animate-[ping_1s_infinite_300ms] rounded-full bg-[#0054ae]"
|
||||
/>
|
||||
<div
|
||||
class="absolute left-0 top-0 h-2 w-2 animate-pulse rounded-full bg-[#0054ae]"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative inline-flex">
|
||||
<div class="h-2 w-2 rounded-full bg-[#0054ae]" />
|
||||
<div
|
||||
class="absolute left-0 top-0 h-2 w-2 animate-[ping_1s_infinite_500ms] rounded-full bg-[#0054ae]"
|
||||
/>
|
||||
<div
|
||||
class="absolute left-0 top-0 h-2 w-2 animate-pulse rounded-full bg-[#0054ae]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
30
Translation/ui/svelte/src/lib/assets/summaryLogo.svelte
Normal file
30
Translation/ui/svelte/src/lib/assets/summaryLogo.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M18 2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM2 18V7h6.7l.4-.409A4.309 4.309 0 0 1 15.753 7H18v11H2Z"
|
||||
/>
|
||||
<path
|
||||
d="M8.139 10.411 5.289 13.3A1 1 0 0 0 5 14v2a1 1 0 0 0 1 1h2a1 1 0 0 0 .7-.288l2.886-2.851-3.447-3.45ZM14 8a2.463 2.463 0 0 0-3.484 0l-.971.983 3.468 3.468.987-.971A2.463 2.463 0 0 0 14 8Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
32
Translation/ui/svelte/src/lib/header.svelte
Normal file
32
Translation/ui/svelte/src/lib/header.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<header
|
||||
class="sticky top-0 z-40 flex-none w-full mx-auto bg-[#0054ae] border-b border-gray-200 dark:border-gray-600 dark:bg-gray-800"
|
||||
>
|
||||
<nav
|
||||
class="bg-[#0054ae] dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 px-2 sm:px-4 w-full py-1.5"
|
||||
>
|
||||
<div class="mx-auto flex flex-wrap justify-center items-center w-full">
|
||||
<span
|
||||
class="whitespace-nowrap py-2 text-3xl font-semibold text-white ml-4">Language Translation</span
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
43
Translation/ui/svelte/src/lib/shared/Network.ts
Normal file
43
Translation/ui/svelte/src/lib/shared/Network.ts
Normal file
@@ -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.
|
||||
import { env } from "$env/dynamic/public";
|
||||
|
||||
const BASIC_URL = env.BASIC_URL;
|
||||
|
||||
async function fetchPostRes(url, init) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchLanguageResponse(input: string, transform: string, transTo: string) {
|
||||
const url = `${BASIC_URL}/v1/translation`;
|
||||
const transData = {
|
||||
language_from: transform,
|
||||
language_to: transTo,
|
||||
source_language: input,
|
||||
};
|
||||
|
||||
const init: RequestInit = {
|
||||
method: "POST",
|
||||
body: JSON.stringify(transData),
|
||||
};
|
||||
|
||||
return fetchPostRes(url, init);
|
||||
}
|
||||
52
Translation/ui/svelte/src/lib/shared/constant.ts
Normal file
52
Translation/ui/svelte/src/lib/shared/constant.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
// 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 type { Language } from "../../routes/types.js";
|
||||
|
||||
export const languagesList: Language[] = [
|
||||
{ shortcode: "en", name: "English", flagUnicode: "" },
|
||||
{ shortcode: "de", name: "German", flagUnicode: "🇩🇪" },
|
||||
{ shortcode: "fr", name: "French", flagUnicode: "🇫🇷" },
|
||||
{ shortcode: "es", name: "Spanish", flagUnicode: "🇪🇸" },
|
||||
{ shortcode: "it", name: "Italian", flagUnicode: "🇮🇹" },
|
||||
{ shortcode: "pt", name: "Portuguese", flagUnicode: "🇵🇹" },
|
||||
{ shortcode: "ru", name: "Russian", flagUnicode: "🇷🇺" },
|
||||
{ shortcode: "zh", name: "Chinese", flagUnicode: "🇨🇳" },
|
||||
{ shortcode: "ja", name: "Japanese", flagUnicode: "🇯🇵" },
|
||||
{ shortcode: "ko", name: "Korean", flagUnicode: "🇰🇷" },
|
||||
{ shortcode: "sv", name: "Swedish", flagUnicode: "🇸🇪" },
|
||||
{ shortcode: "nl", name: "Dutch", flagUnicode: "🇳🇱" },
|
||||
{ shortcode: "no", name: "Norwegian", flagUnicode: "🇳🇴" },
|
||||
{ shortcode: "da", name: "Danish", flagUnicode: "🇩🇰" },
|
||||
{ shortcode: "ar", name: "Arabic", flagUnicode: "🇸🇦" },
|
||||
{ shortcode: "hi", name: "Hindi", flagUnicode: "🇮🇳" },
|
||||
{ shortcode: "tr", name: "Turkish", flagUnicode: "🇹🇷" },
|
||||
{ shortcode: "pl", name: "Polish", flagUnicode: "🇵🇱" },
|
||||
{ shortcode: "fi", name: "Finnish", flagUnicode: "🇫🇮" },
|
||||
{ shortcode: "el", name: "Greek", flagUnicode: "🇬🇷" },
|
||||
{ shortcode: "cs", name: "Czech", flagUnicode: "🇨🇿" },
|
||||
{ shortcode: "hu", name: "Hungarian", flagUnicode: "🇭🇺" },
|
||||
{ shortcode: "id", name: "Indonesian", flagUnicode: "🇮🇩" },
|
||||
{ shortcode: "ms", name: "Malay", flagUnicode: "🇲🇾" },
|
||||
{ shortcode: "th", name: "Thai", flagUnicode: "🇹🇭" },
|
||||
{ shortcode: "uk", name: "Ukrainian", flagUnicode: "🇺🇦" },
|
||||
{ shortcode: "vi", name: "Vietnamese", flagUnicode: "🇻🇳" },
|
||||
{ shortcode: "ro", name: "Romanian", flagUnicode: "🇷🇴" },
|
||||
{ shortcode: "he", name: "Hebrew", flagUnicode: "🇮🇱" },
|
||||
{ shortcode: "bn", name: "Bengali", flagUnicode: "🇧🇩" },
|
||||
{ shortcode: "bg", name: "Bulgarian", flagUnicode: "🇧🇬" },
|
||||
{ shortcode: "ca", name: "Catalan", flagUnicode: "🇪🇸" },
|
||||
{ shortcode: "hr", name: "Croatian", flagUnicode: "🇭🇷" },
|
||||
{ shortcode: "pirate", name: "Pirate", flagUnicode: "🏴☠️" },
|
||||
];
|
||||
25
Translation/ui/svelte/src/routes/+layout.svelte
Normal file
25
Translation/ui/svelte/src/routes/+layout.svelte
Normal file
@@ -0,0 +1,25 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
<script>
|
||||
import "../app.pcss";
|
||||
import Notifications from "svelte-notifications";
|
||||
|
||||
</script>
|
||||
|
||||
<Notifications>
|
||||
<slot />
|
||||
</Notifications>
|
||||
142
Translation/ui/svelte/src/routes/+page.svelte
Normal file
142
Translation/ui/svelte/src/routes/+page.svelte
Normal file
@@ -0,0 +1,142 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import Header from "$lib/header.svelte";
|
||||
import { fetchLanguageResponse } from "$lib/shared/Network.js";
|
||||
import type { Language } from "./types.js";
|
||||
import { languagesList } from "$lib/shared/constant.js";
|
||||
import LoadingAnimation from "$lib/assets/loadingAnimation.svelte";
|
||||
|
||||
// Set default language
|
||||
let langFrom: string = "en";
|
||||
let langTo: string = "zh";
|
||||
let languages: Language[] = languagesList;
|
||||
// Initialize disabled state of input
|
||||
let inputDisabled: boolean = false;
|
||||
// Initialize input and output
|
||||
let input: string = "";
|
||||
let output: string = "";
|
||||
let loading = false;
|
||||
|
||||
async function handelTranslate() {
|
||||
loading = true;
|
||||
const res = await fetchLanguageResponse(input, langFrom, langTo);
|
||||
if (res) {
|
||||
output = res.target_language;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let timer;
|
||||
|
||||
$: if ((input || langFrom || langTo) && input !== "") {
|
||||
if (langFrom === langTo) {
|
||||
output = input;
|
||||
} else {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(handelTranslate, 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Header />
|
||||
<div class="mt-10 flex flex-col items-center">
|
||||
<div class="w-[70%]">
|
||||
<div class="flex items-center mx-2">
|
||||
<select
|
||||
class="p-4 m-2 shadow-md rounded w-full border-[#0000001f] hover:border-[#0054ae]"
|
||||
name="lang-from"
|
||||
id="lang-from"
|
||||
bind:value={langFrom}
|
||||
>
|
||||
{#each languages as language}
|
||||
<option value={language.shortcode}
|
||||
>{#if language.flagUnicode}{language.flagUnicode} |
|
||||
{/if}{language.name}</option
|
||||
>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<select
|
||||
class="p-4 m-2 shadow-md rounded w-full border-[#0000001f] hover:border-[#0054ae]"
|
||||
name="lang-to"
|
||||
id="lang-to"
|
||||
bind:value={langTo}
|
||||
>
|
||||
{#each languages as language}
|
||||
<option value={language.shortcode}
|
||||
>{#if language.flagUnicode}{language.flagUnicode} |
|
||||
{/if}{language.name}</option
|
||||
>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="translate-textareas">
|
||||
<textarea
|
||||
class="grow"
|
||||
disabled={inputDisabled}
|
||||
name="input"
|
||||
id="translateinput"
|
||||
rows="25"
|
||||
placeholder="Input"
|
||||
bind:value={input}
|
||||
/>
|
||||
<textarea
|
||||
readonly
|
||||
name="output"
|
||||
class="bg-[#f5f5f5] grow disabled"
|
||||
id="translateoutput"
|
||||
rows="25"
|
||||
placeholder="Translation"
|
||||
bind:value={output}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if loading}
|
||||
<LoadingAnimation />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.translate-textareas {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
border-radius: 12px;
|
||||
border: solid rgba(128, 0, 128, 0) 4px;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.19);
|
||||
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
|
||||
#translateinput:hover {
|
||||
border: solid #0054ae 4px;
|
||||
}
|
||||
</style>
|
||||
23
Translation/ui/svelte/src/routes/types.d.ts
vendored
Normal file
23
Translation/ui/svelte/src/routes/types.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
// 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.
|
||||
|
||||
export interface Language {
|
||||
shortcode: string;
|
||||
name: string;
|
||||
flagUnicode?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Create API to return a list of languages and load them from there.
|
||||
*/
|
||||
BIN
Translation/ui/svelte/static/favicon.png
Normal file
BIN
Translation/ui/svelte/static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
35
Translation/ui/svelte/svelte.config.js
Normal file
35
Translation/ui/svelte/svelte.config.js
Normal file
@@ -0,0 +1,35 @@
|
||||
// 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 { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: [vitePreprocess({})],
|
||||
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter(),
|
||||
env: {
|
||||
publicPrefix: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
43
Translation/ui/svelte/tailwind.config.cjs
Normal file
43
Translation/ui/svelte/tailwind.config.cjs
Normal file
@@ -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: "#f2f8ff",
|
||||
100: "#eef5ff",
|
||||
200: "#deecff",
|
||||
300: "#cce2ff",
|
||||
400: "#add0ff",
|
||||
500: "#5da2fe",
|
||||
600: "#2f81ef",
|
||||
700: "#2780eb",
|
||||
800: "#226fcc",
|
||||
900: "#1b5aa5",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
15
Translation/ui/svelte/tsconfig.json
Normal file
15
Translation/ui/svelte/tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext"
|
||||
}
|
||||
}
|
||||
20
Translation/ui/svelte/vite.config.ts
Normal file
20
Translation/ui/svelte/vite.config.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
// 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 { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
});
|
||||
Reference in New Issue
Block a user