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:
Tian, Feng
2024-05-30 00:13:49 +08:00
committed by GitHub
parent f3d61d4246
commit 169fe96332
187 changed files with 42 additions and 40 deletions

View File

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

View File

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

View File

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

View File

@@ -1,27 +0,0 @@
<h1 align="center" id="title">Code Translation</h1>
### 📸 Project Screenshots
![project-screenshot](https://imgur.com/1M4xjok.png)
![project-screenshot](https://imgur.com/IIbG4HN.png)
![project-screenshot](https://imgur.com/FbThcUY.png)
<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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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),
});
}

View File

@@ -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" },
];

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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