GenAIExample code structure reorg (#207)
Signed-off-by: Tian, Feng <feng.tian@intel.com> Signed-off-by: chensuyue <suyue.chen@intel.com>
This commit is contained in:
@@ -1,3 +0,0 @@
|
||||
BASIC_URL = 'http://x.x.x.x:yyyy'
|
||||
|
||||
|
||||
5
CodeTrans/ui/svelte/.gitignore
vendored
5
CodeTrans/ui/svelte/.gitignore
vendored
@@ -1,5 +0,0 @@
|
||||
*/node_modules
|
||||
/build
|
||||
/dist
|
||||
*/.svelte-kit
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
engine-strict=true
|
||||
@@ -1,27 +0,0 @@
|
||||
<h1 align="center" id="title">Code Translation</h1>
|
||||
|
||||
### 📸 Project Screenshots
|
||||
|
||||

|
||||

|
||||

|
||||
|
||||
<h2>🧐 Features</h2>
|
||||
|
||||
Here're some of the project's features:
|
||||
|
||||
- Code Translation: The system is capable of recognizing multiple languages and converting the current code content into the desired language's code format, enabling a set of codes to be reused in multiple places, thus alleviating developers' development pressure.
|
||||
|
||||
<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
|
||||
@@ -1,43 +0,0 @@
|
||||
{
|
||||
"name": "doc-summary",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"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"
|
||||
},
|
||||
"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",
|
||||
"@types/prismjs": "^1.26.3",
|
||||
"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",
|
||||
"svelte-highlight": "^7.6.0",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.11"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"prismjs": "^1.29.0",
|
||||
"sse.js": "^0.6.1",
|
||||
"svelte-notifications": "^0.9.98"
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// 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
CodeTrans/ui/svelte/src/app.d.ts
vendored
27
CodeTrans/ui/svelte/src/app.d.ts
vendored
@@ -1,27 +0,0 @@
|
||||
// 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 {};
|
||||
@@ -1,28 +0,0 @@
|
||||
<!--
|
||||
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>
|
||||
@@ -1,4 +0,0 @@
|
||||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -1,48 +0,0 @@
|
||||
<!--
|
||||
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>
|
||||
@@ -1,19 +0,0 @@
|
||||
<!--
|
||||
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 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="text-[#f5ae23] h-5 w-5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 944 B |
@@ -1,32 +0,0 @@
|
||||
<!--
|
||||
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-[#0d6efd] border-b border-gray-200 dark:border-gray-600 dark:bg-gray-800"
|
||||
>
|
||||
<nav
|
||||
class="bg-[#0d6efd] 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-end items-center w-full">
|
||||
<span
|
||||
class="whitespace-nowrap py-2 text-3xl font-semibold text-white ml-4">Code Translation</span
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -1,59 +0,0 @@
|
||||
// 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";
|
||||
import { SSE } from "sse.js";
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
export async function fetchTextStream(query: string, langFrom, langTo) {
|
||||
const payload = {
|
||||
language_from: langFrom,
|
||||
language_to: langTo,
|
||||
source_code: query,
|
||||
};
|
||||
|
||||
let url = `${BASIC_URL}/v1/code_translation_stream`;
|
||||
|
||||
return new SSE(url, {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
payload: JSON.stringify(payload),
|
||||
});
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
// 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[] = [
|
||||
{ name: "C" },
|
||||
{ name: "C++" },
|
||||
{ name: "C#" },
|
||||
{ name: "Java" },
|
||||
{ name: "Python" },
|
||||
{ name: "JavaScript" },
|
||||
{ name: "Swift" },
|
||||
{ name: "Ruby" },
|
||||
{ name: "Go" },
|
||||
{ name: "Rust" },
|
||||
{ name: "PHP" },
|
||||
{ name: "TypeScript" },
|
||||
{ name: "Kotlin" },
|
||||
{ name: "Objective-C" },
|
||||
{ name: "Perl" },
|
||||
{ name: "MATLAB" },
|
||||
{ name: "R" },
|
||||
{ name: "Lua" },
|
||||
{ name: "Bash" },
|
||||
{ name: "SQL" },
|
||||
];
|
||||
@@ -1,25 +0,0 @@
|
||||
<!--
|
||||
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>
|
||||
@@ -1,254 +0,0 @@
|
||||
<!--
|
||||
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 Highlight, { LineNumbers } from "svelte-highlight";
|
||||
import typescript from "svelte-highlight/languages/typescript";
|
||||
import c from "svelte-highlight/languages/c";
|
||||
import cpp from "svelte-highlight/languages/cpp";
|
||||
import csharp from "svelte-highlight/languages/csharp";
|
||||
import go from "svelte-highlight/languages/go";
|
||||
import java from "svelte-highlight/languages/java";
|
||||
import python from "svelte-highlight/languages/python";
|
||||
import javascript from "svelte-highlight/languages/javascript";
|
||||
import swift from "svelte-highlight/languages/swift";
|
||||
import ruby from "svelte-highlight/languages/ruby";
|
||||
import rust from "svelte-highlight/languages/rust";
|
||||
import php from "svelte-highlight/languages/php";
|
||||
import kotlin from "svelte-highlight/languages/kotlin";
|
||||
import objectivec from "svelte-highlight/languages/objectivec";
|
||||
import perl from "svelte-highlight/languages/perl";
|
||||
import matlab from "svelte-highlight/languages/matlab";
|
||||
import r from "svelte-highlight/languages/r";
|
||||
import lua from "svelte-highlight/languages/lua";
|
||||
import bash from "svelte-highlight/languages/bash";
|
||||
import sql from "svelte-highlight/languages/sql";
|
||||
|
||||
import atomOneDark from "svelte-highlight/styles/atom-one-dark";
|
||||
import Header from "$lib/header.svelte";
|
||||
import { fetchTextStream } 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";
|
||||
import TranslateIcon from "$lib/assets/translateIcon.svelte";
|
||||
|
||||
const languagesTag = {
|
||||
Typescript: typescript,
|
||||
Python: python,
|
||||
C: c,
|
||||
Cpp: cpp,
|
||||
Csharp: csharp,
|
||||
Go: go,
|
||||
Java: java,
|
||||
Javascript: javascript,
|
||||
Swift: swift,
|
||||
Ruby: ruby,
|
||||
Rust: rust,
|
||||
Php: php,
|
||||
Kotlin: kotlin,
|
||||
Objectivec: objectivec,
|
||||
Perl: perl,
|
||||
Matlab: matlab,
|
||||
R: r,
|
||||
Lua: lua,
|
||||
Bash: bash,
|
||||
Sql: sql,
|
||||
} as { [key: string]: any };
|
||||
|
||||
let copyText = "copy";
|
||||
// Set default language
|
||||
let langFrom: string = "Go";
|
||||
let langTo: string = "Python";
|
||||
let languages: Language[] = languagesList;
|
||||
// Initialize disabled state of input
|
||||
let inputDisabled: boolean = false;
|
||||
// Initialize input and output
|
||||
let input: string = "";
|
||||
let output: string = "";
|
||||
let timer: number;
|
||||
let loading = false;
|
||||
let deleteFlag: boolean = false;
|
||||
let inputClick: boolean = true;
|
||||
|
||||
function handelCopy() {
|
||||
navigator.clipboard.writeText(output);
|
||||
copyText = "copied!";
|
||||
setTimeout(() => {
|
||||
copyText = "copy";
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function handelInputClick() {
|
||||
inputClick = !inputClick;
|
||||
}
|
||||
|
||||
const handelTranslate = async () => {
|
||||
loading = true;
|
||||
output = "";
|
||||
inputClick = false;
|
||||
const eventSource = await fetchTextStream(input, langFrom, langTo);
|
||||
|
||||
eventSource.addEventListener("message", (e: any) => {
|
||||
let Msg = e.data;
|
||||
|
||||
if (Msg.startsWith("b")) {
|
||||
const trimmedData = Msg.slice(2, -1);
|
||||
if (trimmedData.includes("'''")) {
|
||||
deleteFlag = true;
|
||||
} else if (deleteFlag && trimmedData.includes("\\n")) {
|
||||
deleteFlag = false;
|
||||
} else if (trimmedData !== "</s>" && !deleteFlag) {
|
||||
output += trimmedData.replace(/\\n/g, "\n");
|
||||
}
|
||||
} else if (Msg === "[DONE]") {
|
||||
deleteFlag = false;
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
eventSource.stream();
|
||||
};
|
||||
|
||||
$: if ((input || langFrom || langTo) && input !== "") {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(handelTranslate, 1000);
|
||||
} else {
|
||||
handelTranslate;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{@html atomOneDark}
|
||||
</svelte:head>
|
||||
|
||||
<div>
|
||||
<Header />
|
||||
<div class="mt-4 flex flex-col items-center">
|
||||
<div class="w-[70%] rounded shadow-2xl p-8">
|
||||
<div class="flex flex-row gap-4 mx-4 pb-4 border-b-2">
|
||||
<TranslateIcon />
|
||||
Select Language
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<select
|
||||
class="p-4 m-2 w-full border-none"
|
||||
name="lang-from"
|
||||
id="lang-from"
|
||||
bind:value={langFrom}
|
||||
>
|
||||
{#each languages as language}
|
||||
<option value={language.name}>{language.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<select
|
||||
class="p-4 m-2 w-full border-none"
|
||||
name="lang-to"
|
||||
id="lang-to"
|
||||
bind:value={langTo}
|
||||
>
|
||||
{#each languages as language}
|
||||
<option value={language.name}>{language.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{#if inputClick}
|
||||
<textarea
|
||||
class="grow bg-[#011627] text-white"
|
||||
disabled={inputDisabled}
|
||||
name="input"
|
||||
id="translateinput"
|
||||
rows="25"
|
||||
placeholder="Input"
|
||||
bind:value={input}
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="bg-[#011627] rounded overflow-auto code-format-style"
|
||||
on:click={() => {
|
||||
handelInputClick();
|
||||
}}
|
||||
>
|
||||
<Highlight
|
||||
language={languagesTag[langFrom]}
|
||||
code={input}
|
||||
let:highlighted
|
||||
>
|
||||
<LineNumbers {highlighted} wrapLines hideBorder />
|
||||
</Highlight>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="h-[40rem] bg-[#011627] rounded overflow-auto code-format-style divide-y hiddenScroll"
|
||||
>
|
||||
{#if output !== ""}
|
||||
<div class="bg-[#282c34] p-2 px-6 text-white flex justify-end border-2 border-none border-b-gray-800">
|
||||
<button
|
||||
class="border px-3 py-1 rounded border-none"
|
||||
on:click={() => {
|
||||
handelCopy();
|
||||
}}>{copyText}</button
|
||||
>
|
||||
</div>
|
||||
<Highlight
|
||||
language={languagesTag[langTo]}
|
||||
code={output}
|
||||
let:highlighted
|
||||
>
|
||||
<LineNumbers {highlighted} wrapLines hideBorder />
|
||||
</Highlight>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if loading}
|
||||
<LoadingAnimation />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
textarea,
|
||||
.code-format-style {
|
||||
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 #91c6ff 4px;
|
||||
}
|
||||
|
||||
.hiddenScroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hiddenScroll {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
21
CodeTrans/ui/svelte/src/routes/types.d.ts
vendored
21
CodeTrans/ui/svelte/src/routes/types.d.ts
vendored
@@ -1,21 +0,0 @@
|
||||
// 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 {
|
||||
name: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Create API to return a list of languages and load them from there.
|
||||
*/
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
@@ -1,35 +0,0 @@
|
||||
// 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;
|
||||
@@ -1,43 +0,0 @@
|
||||
// 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;
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
// 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