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:
lvliang-intel
2024-05-06 08:58:54 +08:00
committed by GitHub
parent 75949aaf55
commit 91d9180520
23 changed files with 23 additions and 0 deletions

View File

@@ -0,0 +1 @@
BASIC_URL = 'http://x.x.x.x:yyyy'

5
Translation/ui/svelte/.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
*/node_modules
/build
/dist
*/.svelte-kit

View File

@@ -0,0 +1 @@
engine-strict=true

View File

@@ -0,0 +1,26 @@
<h1 align="center" id="title">Language Translation</h1>
### 📸 Project Screenshots
![project-screenshot](https://imgur.com/yT2VDBX.png)
![project-screenshot](https://imgur.com/8ajC7lE.png)
<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

View 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"
}
}

View 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
View 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 {};

View 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>

View File

@@ -0,0 +1,4 @@
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

View 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>

View 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

View 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>

View 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);
}

View 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: "🏴‍☠️" },
];

View 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>

View 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>

View 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.
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

View 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;

View 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;

View 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"
}
}

View 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()],
});