├── .env.example
├── .eslintrc
├── .npmrc
├── .gitignore
├── .github
    └── renovate.json
├── layouts
    └── default.vue
├── tsconfig.json
├── .vscode
    ├── extensions.json
    └── settings.json
├── components
    ├── AppTitle.vue
    ├── Content.vue
    ├── Input.vue
    └── SelectLanguage.vue
├── pages
    ├── index.vue
    └── [...all].vue
├── html.d.ts
├── composables
    ├── useTranslate.ts
    └── language.ts
├── app.vue
├── nuxt.config.ts
├── public
    └── logo.svg
├── server
    └── api
    │   └── translate.post.ts
├── README.md
├── package.json
├── unocss.config.ts
└── LICENSE


/.env.example:
--------------------------------------------------------------------------------
1 | TRANSLATOR_API_KEY=


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@antfu"
3 | }
4 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | dist
4 | .output
5 | .nuxt
6 | .env
7 | .DS_Store


--------------------------------------------------------------------------------
/.github/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "github>alexzhang-dev/renovate-config"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <main class="py-10 px-40">
3 |     <slot />
4 |   </main>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json",
3 |   "compilerOptions": {
4 |     "strict": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "antfu.iconify",
 4 |     "antfu.unocss",
 5 |     "antfu.goto-alias",
 6 |     "csstools.postcss",
 7 |     "dbaeumer.vscode-eslint",
 8 |     "vue.volar"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "prettier.enable": false,
 3 |   "editor.codeActionsOnSave": {
 4 |     "source.fixAll.eslint": true
 5 |   },
 6 |   "files.associations": {
 7 |     "*.css": "postcss"
 8 |   },
 9 |   "editor.formatOnSave": false
10 | }
11 | 


--------------------------------------------------------------------------------
/components/AppTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div flex justify-start items-start w-full gap-5>
 3 |     <h1 text-10>
 4 |       Translator
 5 |     </h1>
 6 |     <div bg-orange-7 rounded-md p-1 box-border text-12px>
 7 |       powered by GPT-3
 8 |     </div>
 9 |     <a i-carbon-logo-github href="https://github.com/alexzhang1030/Translator" target="_blank" />
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Suspense>
 3 |     <div>
 4 |       <AppTitle />
 5 |       <div flex justify-between items-center mt-3>
 6 |         <Input />
 7 |         <Content />
 8 |       </div>
 9 |     </div>
10 |     <template #fallback>
11 |       <div op50 italic>
12 |         <span animate-pulse>Loading...</span>
13 |       </div>
14 |     </template>
15 |   </Suspense>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/html.d.ts:
--------------------------------------------------------------------------------
 1 | // for UnoCSS attributify mode compact in Volar
 2 | // refer: https://github.com/johnsoncodehk/volar/issues/1077#issuecomment-1145361472
 3 | declare module '@vue/runtime-dom' {
 4 |   interface HTMLAttributes {
 5 |     [key: string]: any
 6 |   }
 7 | }
 8 | declare module '@vue/runtime-core' {
 9 |   interface AllowedComponentProps {
10 |     [key: string]: any
11 |   }
12 | }
13 | export {}
14 | 


--------------------------------------------------------------------------------
/pages/[...all].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const router = useRouter()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <main p="x4 y10" text="center gray-200">
 7 |     <div text-4xl>
 8 |       <div i-carbon-warning inline-block />
 9 |     </div>
10 |     <div>Not found</div>
11 |     <div>
12 |       <button btn text-sm m="3 t8" @click="router.back()">
13 |         Back
14 |       </button>
15 |     </div>
16 |   </main>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/composables/useTranslate.ts:
--------------------------------------------------------------------------------
 1 | import { languagesNameList } from './language'
 2 | 
 3 | export const useContent = () => useState('content', () => '')
 4 | export const useTranslated = () => useState('translate', () => ({
 5 |   message: '',
 6 |   loading: false,
 7 | }))
 8 | export const useTargetLang = () => useState('targetLang', () => languagesNameList[0])
 9 | 
10 | export interface TranslateRequest {
11 |   word: string
12 |   target: string
13 | }
14 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | useHead({
 3 |   title: 'Translator',
 4 |   link: [
 5 |     {
 6 |       rel: 'icon', type: 'image/svg', href: '/logo.svg',
 7 |     },
 8 |   ],
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <NuxtLayout>
14 |     <NuxtPage />
15 |   </NuxtLayout>
16 | </template>
17 | 
18 | <style>
19 | html, body , #__nuxt{
20 |   height: 100vh;
21 |   margin: 0;
22 |   padding: 0;
23 | }
24 | 
25 | html {
26 |   background: #222;
27 |   color: white;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/composables/language.ts:
--------------------------------------------------------------------------------
 1 | import ISO6391 from 'iso-639-1'
 2 | 
 3 | export interface LanguageNameItem {
 4 |   code: string
 5 |   nativeName: string
 6 |   name: string
 7 | }
 8 | 
 9 | export const languagesNameList: LanguageNameItem[] = ISO6391.getAllCodes().map(code => ({
10 |   code,
11 |   nativeName: ISO6391.getNativeName(code),
12 |   name: ISO6391.getName(code),
13 | }))
14 | 
15 | export const inputLanguages = [{
16 |   code: 'auto',
17 |   nativeName: 'Auto Detect',
18 |   name: 'Auto Detect',
19 | }]
20 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtConfig({
 2 |   modules: [
 3 |     '@vueuse/nuxt',
 4 |     '@unocss/nuxt',
 5 |     '@pinia/nuxt',
 6 |     '@nuxtjs/color-mode',
 7 |     '@nuxt/devtools',
 8 |     '@vue-macros/nuxt',
 9 |   ],
10 |   experimental: {
11 |     reactivityTransform: true,
12 |     inlineSSRStyles: false,
13 |   },
14 |   css: [
15 |     '@unocss/reset/tailwind.css',
16 |   ],
17 |   colorMode: {
18 |     classSuffix: '',
19 |   },
20 |   devServer: {
21 |     port: 5173,
22 |   },
23 | })
24 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M16 28h-3c-3.9 0-7-3.1-7-7v-4h2v4c0 2.8 2.2 5 5 5h3v2zm12 2h2.2l-4.6-11h-2.2l-4.6 11H21l.8-2h5.3l.9 2zm-5.3-4l1.8-4.4l1.8 4.4h-3.6zM28 15h-2v-4c0-2.8-2.2-5-5-5h-4V4h4c3.9 0 7 3.1 7 7v4zM14 5V3H9V1H7v2H2v2h8.2c-.2.9-.8 2.5-2.2 4c-.6-.7-1.1-1.4-1.4-2H4.3c.4 1 1.1 2.2 2.1 3.3c-.8.7-2 1.3-3.4 1.8l.7 1.9c1.8-.7 3.2-1.5 4.3-2.3c1.1.9 2.5 1.7 4.3 2.3l.7-1.9c-1.4-.5-2.6-1.2-3.5-1.8c1.9-2 2.5-4.1 2.7-5.3H14z"/></svg>


--------------------------------------------------------------------------------
/server/api/translate.post.ts:
--------------------------------------------------------------------------------
 1 | import { ChatGPTAPI } from 'chatgpt'
 2 | import type { TranslateRequest } from '~/composables/useTranslate'
 3 | 
 4 | const api = new ChatGPTAPI({
 5 |   apiKey: process.env.TRANSLATOR_API_KEY!,
 6 | })
 7 | 
 8 | const getRequest = (m: string, target: string) => `Please translate "${m}" to ${target}.`
 9 | 
10 | export default defineEventHandler(async (event) => {
11 |   const { word, target } = await readBody<TranslateRequest>(event)
12 |   const message = await api.sendMessage(getRequest(word, target))
13 |   return message
14 | })
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Translator
 2 | 
 3 | It's an online translator powered by OpenAI GPT-3.
 4 | 
 5 | Highly recommend to use it by locally.
 6 | 
 7 | The online demo uses the free API key, may be slow or even broken.
 8 | 
 9 | ## Setup
10 | 
11 | ```bash
12 | # Install dependencies
13 | pnpm i
14 | 
15 | # Build
16 | pnpm build
17 | 
18 | # Start server
19 | pnpm start
20 | ```
21 | 
22 | > Notice you need provide an openai api key in your environment variables before execute `pnpm start`, and the key is `TRANSLATOR_API_KEY`.
23 | 
24 | Then access `http://localhost:3000` in your browser.
25 | 


--------------------------------------------------------------------------------
/components/Content.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const translated = useTranslated()
 3 | const targetLang = useTargetLang()
 4 | 
 5 | useLocalStorage('targetLang', targetLang)
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div w="48%">
10 |     <SelectLanguage v-model="targetLang" mb-3 show-label :data="languagesNameList" />
11 |     <div w-full h-200px bg="dark-800" shadow-md rounded-md p-2>
12 |       <svg v-if="translated.loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
13 |         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
14 |         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
15 |       </svg>
16 |       {{ translated.message ?? 'Translated' }}
17 |     </div>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "packageManager": "pnpm@8.10.3",
 4 |   "scripts": {
 5 |     "build": "nuxi build",
 6 |     "dev": "nuxi dev --open",
 7 |     "start": "node .output/server/index.mjs",
 8 |     "lint": "eslint .",
 9 |     "postinstall": "nuxi prepare",
10 |     "generate": "nuxi generate"
11 |   },
12 |   "devDependencies": {
13 |     "@antfu/eslint-config": "^0.43.1",
14 |     "@iconify-json/carbon": "^1.1.21",
15 |     "@iconify-json/twemoji": "^1.1.12",
16 |     "@nuxt/devtools": "^1.0.2",
17 |     "@nuxtjs/color-mode": "^3.3.0",
18 |     "@pinia/nuxt": "^0.5.1",
19 |     "@types/node": "^20.9.0",
20 |     "@unocss/nuxt": "^0.57.3",
21 |     "@vue-macros/nuxt": "^1.9.5",
22 |     "@vueuse/nuxt": "^10.6.0",
23 |     "eslint": "^8.53.0",
24 |     "nuxt": "^3.8.1",
25 |     "pinia": "^2.1.7",
26 |     "taze": "^0.12.0",
27 |     "typescript": "^5.2.2"
28 |   },
29 |   "dependencies": {
30 |     "@headlessui/vue": "^1.7.16",
31 |     "@heroicons/vue": "^2.0.18",
32 |     "chatgpt": "^5.2.5",
33 |     "iso-639-1": "^3.1.0"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   defineConfig,
 3 |   presetAttributify,
 4 |   presetIcons,
 5 |   presetTypography,
 6 |   presetUno,
 7 |   presetWebFonts,
 8 |   transformerDirectives,
 9 |   transformerVariantGroup,
10 | } from 'unocss'
11 | 
12 | export default defineConfig({
13 |   shortcuts: [
14 |     ['btn', 'px-4 py-1 rounded inline-block bg-gray-600 text-white cursor-pointer hover:bg-gray-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
15 |     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
16 |   ],
17 |   presets: [
18 |     presetUno(),
19 |     presetAttributify(),
20 |     presetIcons({
21 |       scale: 1.2,
22 |     }),
23 |     presetTypography(),
24 |     presetWebFonts({
25 |       fonts: {
26 |         sans: 'DM Sans',
27 |         serif: 'DM Serif Display',
28 |         mono: 'DM Mono',
29 |       },
30 |     }),
31 |   ],
32 |   transformers: [
33 |     transformerDirectives(),
34 |     transformerVariantGroup(),
35 |   ],
36 | })
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Alex
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/Input.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ChevronRightIcon } from '@heroicons/vue/20/solid'
 3 | import type { TranslateRequest } from '~~/composables/useTranslate'
 4 | 
 5 | const content = useContent()
 6 | const translated = useTranslated()
 7 | const target = useTargetLang()
 8 | 
 9 | debouncedWatch([() => content.value, () => target.value], async ([c, target]) => {
10 |   if (c) {
11 |     translated.value.message = ''
12 |     translated.value.loading = true
13 |     const { data } = await useFetch('/api/translate', {
14 |       method: 'POST',
15 |       body: {
16 |         word: c.trim(),
17 |         target: target.name,
18 |       } satisfies TranslateRequest,
19 |     })
20 |     translated.value.loading = false
21 |     translated.value.message = data.value?.text ?? ''
22 |   }
23 | }, {
24 |   debounce: 500,
25 | })
26 | 
27 | const lang = ref(inputLanguages[0])
28 | </script>
29 | 
30 | <template>
31 |   <div w="52%" flex justify-start>
32 |     <div w="92%">
33 |       <SelectLanguage v-model="lang" :data="inputLanguages" mb-3 />
34 |       <textarea v-model="content" w-full h-200px bg="dark-800" shadow-md rounded-md outline-none p-2 box-border placeholder="Type something you want to translate." />
35 |     </div>
36 |     <div w="8%" flex items-end p-3 box-border>
37 |       <div w-full h="200px" flex justify-center>
38 |         <ChevronRightIcon w-5 h-5 />
39 |       </div>
40 |     </div>
41 |   </div>
42 | </template>
43 | 
44 | <style scoped></style>
45 | 


--------------------------------------------------------------------------------
/components/SelectLanguage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   Listbox,
 4 |   ListboxButton,
 5 |   ListboxOption,
 6 |   ListboxOptions,
 7 | } from '@headlessui/vue'
 8 | import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
 9 | import type { LanguageNameItem } from '~~/composables/language'
10 | 
11 | withDefaults(defineProps<{
12 |   data: LanguageNameItem[]
13 |   showLabel?: boolean
14 | }>(), {
15 |   showLabel: false,
16 | })
17 | 
18 | const { modelValue } = defineModel<{
19 |   modelValue: LanguageNameItem
20 | }>()
21 | </script>
22 | 
23 | <template>
24 |   <div w-72 h-36px>
25 |     <Listbox v-model="modelValue">
26 |       <div class="relative mt-1">
27 |         <ListboxButton
28 |           class="relative w-full cursor-default rounded-lg bg-black py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 sm:text-sm"
29 |           cursor-pointer
30 |         >
31 |           <span class="block truncate">
32 |             {{ modelValue.name }} {{ showLabel ? `(${modelValue.nativeName})` : '' }}
33 |           </span>
34 |           <span
35 |             class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
36 |           >
37 |             <ChevronUpDownIcon
38 |               class="h-5 w-5 text-gray-400"
39 |               aria-hidden="true"
40 |             />
41 |           </span>
42 |         </ListboxButton>
43 | 
44 |         <transition
45 |           leave-active-class="transition duration-100 ease-in"
46 |           leave-from-class="opacity-100"
47 |           leave-to-class="opacity-0"
48 |         >
49 |           <ListboxOptions
50 |             class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-black  py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
51 |           >
52 |             <ListboxOption
53 |               v-for="languageName in data"
54 |               v-slot="{ active, selected }"
55 |               :key="languageName.code"
56 |               :value="languageName"
57 |               as="template"
58 |             >
59 |               <li
60 |                 class="relative cursor-default select-none py-2 pl-10 pr-4" :class="[
61 |                   active ? 'text-orange-700' : 'text-gray-300',
62 |                 ]"
63 |                 cursor-pointer
64 |               >
65 |                 <span
66 |                   class="block truncate" :class="[
67 |                     selected ? 'font-medium' : 'font-normal',
68 |                   ]"
69 |                 >
70 |                   {{ languageName.name }} {{ showLabel ? `(${languageName.nativeName})` : '' }}
71 |                 </span>
72 |                 <span
73 |                   v-if="selected"
74 |                   class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
75 |                 >
76 |                   <CheckIcon class="h-5 w-5" aria-hidden="true" />
77 |                 </span>
78 |               </li>
79 |             </ListboxOption>
80 |           </ListboxOptions>
81 |         </transition>
82 |       </div>
83 |     </Listbox>
84 |   </div>
85 | </template>
86 | 
87 | <style scoped></style>
88 | 


--------------------------------------------------------------------------------