├── .gitattributes
├── env.d.ts
├── public
    ├── favicon.ico
    ├── service-worker.js
    └── manifest.json
├── src
    ├── assets
    │   └── main.css
    ├── features
    │   ├── TextInput.vue
    │   ├── sync
    │   │   ├── SyncLayout.vue
    │   │   ├── JsonBin.ts
    │   │   └── useSync.ts
    │   ├── ModalWindow.vue
    │   ├── ExportData.vue
    │   ├── cards
    │   │   ├── WordCard.vue
    │   │   ├── ToolKit.vue
    │   │   ├── WordInfo.vue
    │   │   ├── AddWord.vue
    │   │   └── CardsList.vue
    │   ├── ImportData.vue
    │   ├── header
    │   │   ├── HeaderLayout.vue
    │   │   └── NewLanguage.vue
    │   ├── SettingPanel.vue
    │   └── llm
    │   │   └── useGenerateWord.ts
    ├── main.ts
    ├── App.vue
    ├── stores
    │   ├── token.ts
    │   ├── languages.ts
    │   ├── consts.ts
    │   └── words.ts
    ├── config
    │   └── index.ts
    └── utils
    │   └── errorHandler.ts
├── .prettierrc.json
├── .vscode
    └── extensions.json
├── tailwind.config.ts
├── tsconfig.json
├── .editorconfig
├── tsconfig.app.json
├── index.html
├── .gitignore
├── tsconfig.node.json
├── README.md
├── eslint.config.ts
├── vite.config.ts
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ethanhamilthon/sozdik/main/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 | 
3 | button {
4 |   @apply cursor-pointer text-sm;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/features/TextInput.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts"></script>
2 | 
3 | <template>
4 |   <input type="text" />
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/prettierrc",
3 |   "semi": false,
4 |   "singleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "Vue.volar",
4 |     "dbaeumer.vscode-eslint",
5 |     "EditorConfig.EditorConfig",
6 |     "esbenp.prettier-vscode"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ['./src/**/*.{html,vue}'],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.node.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
2 | charset = utf-8
3 | indent_size = 2
4 | indent_style = space
5 | insert_final_newline = true
6 | trim_trailing_whitespace = true
7 | 
8 | end_of_line = lf
9 | 


--------------------------------------------------------------------------------
/public/service-worker.js:
--------------------------------------------------------------------------------
1 | self.addEventListener('install', (event) => {
2 |   console.log('Service Worker установлен')
3 | })
4 | 
5 | self.addEventListener('fetch', (event) => {
6 |   console.log('Service Worker перехватывает запрос:', event.request.url)
7 | })
8 | 


--------------------------------------------------------------------------------
/src/features/sync/SyncLayout.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { onMounted } from 'vue'
 3 | import { useSyncStore } from './useSync'
 4 | 
 5 | const sync = useSyncStore()
 6 | onMounted(() => {
 7 |   sync.load()
 8 | })
 9 | </script>
10 | <template>
11 |   <slot></slot>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import './assets/main.css'
 2 | 
 3 | import { createApp } from 'vue'
 4 | import { createPinia } from 'pinia'
 5 | import App from './App.vue'
 6 | import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 7 | 
 8 | const app = createApp(App)
 9 | 
10 | app.use(createPinia())
11 | app.use(autoAnimatePlugin)
12 | 
13 | app.mount('#app')
14 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "exclude": ["src/**/__tests__/*"],
 5 |   "compilerOptions": {
 6 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 7 | 
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import HeaderLayout from '@/features/header/HeaderLayout.vue'
 3 | import CardsList from '@/features/cards/CardsList.vue'
 4 | import SyncLayout from '@/features/sync/SyncLayout.vue'
 5 | </script>
 6 | 
 7 | <template>
 8 |   <SyncLayout>
 9 |     <HeaderLayout />
10 |     <CardsList />
11 |   </SyncLayout>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Sozdik | AI Flash Cards</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 
30 | *.tsbuildinfo
31 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Sozdik",
 3 |   "short_name": "szdk",
 4 |   "description": "Learning words with AI",
 5 |   "theme_color": "#ffffff",
 6 |   "background_color": "#ffffff",
 7 |   "display": "standalone",
 8 |   "icons": [
 9 |     {
10 |       "src": "/pwa-192x192.png",
11 |       "sizes": "192x192",
12 |       "type": "image/png"
13 |     },
14 |     {
15 |       "src": "/pwa-512x512.png",
16 |       "sizes": "512x512",
17 |       "type": "image/png"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node22/tsconfig.json",
 3 |   "include": [
 4 |     "vite.config.*",
 5 |     "vitest.config.*",
 6 |     "cypress.config.*",
 7 |     "nightwatch.conf.*",
 8 |     "playwright.config.*",
 9 |     "eslint.config.*"
10 |   ],
11 |   "compilerOptions": {
12 |     "noEmit": true,
13 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
14 | 
15 |     "module": "ESNext",
16 |     "moduleResolution": "Bundler",
17 |     "types": ["node"]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Sozdik - Learn words effectively with OpenAI
 2 | 
 3 | ## Local-first app
 4 | 
 5 | Sozdik or szdk is a local-first app, which means:
 6 | - no registration
 7 | - no paid mode
 8 | - no ads
 9 | 
10 | which also means all user data will be saved in local storage.
11 | In next versions I am planning to add some kinda sync engine to sync several user devices
12 | 
13 | ## Run locally
14 | 
15 | ```bash
16 | # install
17 | pnpm install
18 | 
19 | # dev
20 | pnpm run dev
21 | 
22 | # build
23 | 
24 | pnpm run build
25 | ```
26 | 


--------------------------------------------------------------------------------
/src/features/sync/JsonBin.ts:
--------------------------------------------------------------------------------
 1 | export class Npoint {
 2 |   private id
 3 |   private root = 'https://api.npoint.io/'
 4 |   constructor(id: string) {
 5 |     this.id = id
 6 |   }
 7 | 
 8 |   public async getData() {
 9 |     const res = await fetch(this.root + this.id)
10 |     return await res.json()
11 |   }
12 | 
13 |   public async setData(data: string) {
14 |     const res = await fetch(this.root + this.id, {
15 |       method: 'POST',
16 |       body: data,
17 |       headers: {
18 |         'Content-Type': 'application/json',
19 |       },
20 |     })
21 |     return await res.json()
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/stores/token.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import { onMounted, ref, watch } from 'vue'
 3 | 
 4 | export const useTokenStore = defineStore('token', () => {
 5 |   const token = ref('')
 6 |   const show = ref(false)
 7 |   function load() {
 8 |     token.value = localStorage.getItem('OPENAI_TOKEN') || ''
 9 |   }
10 |   onMounted(() => {
11 |     load()
12 |   })
13 |   watch(token, (t) => {
14 |     localStorage.setItem('OPENAI_TOKEN', t || '')
15 |   })
16 | 
17 |   function toggleShow() {
18 |     show.value = !show.value
19 |   }
20 | 
21 |   return { token, show, toggleShow }
22 | })
23 | 


--------------------------------------------------------------------------------
/src/config/index.ts:
--------------------------------------------------------------------------------
 1 | import { z } from 'zod'
 2 | 
 3 | const ConfigSchema = z.object({
 4 |   openai: z.object({
 5 |     model: z.string(),
 6 |     temperature: z.number(),
 7 |   }),
 8 |   sync: z.object({
 9 |     endpoint: z.string().url(),
10 |     retryAttempts: z.number(),
11 |   }),
12 | })
13 | 
14 | type Config = z.infer<typeof ConfigSchema>
15 | 
16 | export const config: Config = {
17 |   openai: {
18 |     model: 'gpt-4o-2024-11-20',
19 |     temperature: 0.7,
20 |   },
21 |   sync: {
22 |     endpoint: 'https://api.npoint.io/',
23 |     retryAttempts: 3,
24 |   },
25 | }
26 | 
27 | // Validate config at runtime
28 | ConfigSchema.parse(config)
29 | 


--------------------------------------------------------------------------------
/src/features/ModalWindow.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { PhX } from '@phosphor-icons/vue'
 3 | 
 4 | const props = defineProps<{ title: string; isOpen: boolean }>()
 5 | const emit = defineEmits<{
 6 |   toggle: []
 7 | }>()
 8 | </script>
 9 | 
10 | <template>
11 |   <div
12 |     v-if="props.isOpen"
13 |     @click="emit('toggle')"
14 |     class="fixed inset-0 flex transition justify-center items-center z-20 backdrop-blur-md bg-black/50"
15 |   >
16 |     <div
17 |       @click.stop
18 |       class="w-5/6 sm:min-w-96 sm:w-auto sm:max-w-1/2 bg-white p-4 rounded-xl border border-neutral-400 flex flex-col gap-4"
19 |     >
20 |       <div class="w-full flex items-center justify-between">
21 |         <span>{{ props.title }}</span>
22 |         <PhX @click="emit('toggle')" class="cursor-pointer" :size="18" />
23 |       </div>
24 |       <slot></slot>
25 |     </div>
26 |   </div>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/eslint.config.ts:
--------------------------------------------------------------------------------
 1 | import pluginVue from 'eslint-plugin-vue'
 2 | import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 3 | import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 4 | 
 5 | // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
 6 | // import { configureVueProject } from '@vue/eslint-config-typescript'
 7 | // configureVueProject({ scriptLangs: ['ts', 'tsx'] })
 8 | // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
 9 | 
10 | export default defineConfigWithVueTs(
11 |   {
12 |     name: 'app/files-to-lint',
13 |     files: ['**/*.{ts,mts,tsx,vue}'],
14 |   },
15 | 
16 |   {
17 |     name: 'app/files-to-ignore',
18 |     ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
19 |   },
20 | 
21 |   pluginVue.configs['flat/essential'],
22 |   vueTsConfigs.recommended,
23 |   skipFormatting,
24 | )
25 | 


--------------------------------------------------------------------------------
/src/utils/errorHandler.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from 'openai'
 2 | 
 3 | export class AppError extends Error {
 4 |   constructor(
 5 |     message: string,
 6 |     public code: string,
 7 |     public details?: unknown
 8 |   ) {
 9 |     super(message)
10 |     this.name = 'AppError'
11 |   }
12 | }
13 | 
14 | export const handleLLMError = (error: unknown) => {
15 |   if (error instanceof OpenAI.APIError) {
16 |     throw new AppError(
17 |       'AI Service Unavailable',
18 |       'LLM_ERROR',
19 |       error.message
20 |     )
21 |   }
22 |   if (error instanceof Error) {
23 |     throw new AppError(
24 |       'LLM Service Error',
25 |       'UNKNOWN_LLM_ERROR',
26 |       error.message
27 |     )
28 |   }
29 |   throw error
30 | }
31 | 
32 | export const handleSyncError = (error: unknown) => {
33 |   if (error instanceof Error) {
34 |     throw new AppError(
35 |       'Sync Failed',
36 |       'SYNC_ERROR',
37 |       error.message
38 |     )
39 |   }
40 |   throw error
41 | }


--------------------------------------------------------------------------------
/src/features/ExportData.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useWordsStore } from '@/stores/words'
 3 | import { PhArrowUp } from '@phosphor-icons/vue'
 4 | const downloadJson = (filename: string, data: string) => {
 5 |   const blob = new Blob([data], { type: 'application/json' })
 6 |   const url = URL.createObjectURL(blob)
 7 |   const a = document.createElement('a')
 8 |   a.href = url
 9 |   a.download = filename
10 |   document.body.appendChild(a)
11 |   a.click()
12 |   document.body.removeChild(a)
13 |   URL.revokeObjectURL(url)
14 | }
15 | const words = useWordsStore()
16 | 
17 | const handleDownload = () => {
18 |   const jsonData = JSON.stringify(words.allWords)
19 |   downloadJson('szdk.json', jsonData)
20 | }
21 | </script>
22 | 
23 | <template>
24 |   <div
25 |     @click="handleDownload"
26 |     class="flex-1 py-2 rounded-lg gap-2 border border-neutral-400 hover:bg-neutral-100 transition cursor-pointer flex items-center justify-center"
27 |   >
28 |     <span>Export</span>
29 |     <PhArrowUp :size="16" weight="bold" />
30 |   </div>
31 | </template>
32 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import vueDevTools from 'vite-plugin-vue-devtools'
 6 | import tailwindcss from '@tailwindcss/vite'
 7 | import { VitePWA } from 'vite-plugin-pwa'
 8 | 
 9 | // https://vite.dev/config/
10 | export default defineConfig({
11 |   plugins: [
12 |     vue(),
13 |     vueDevTools(),
14 |     tailwindcss(),
15 |     VitePWA({
16 |       registerType: 'autoUpdate',
17 |       manifest: {
18 |         name: 'Sozdik',
19 |         short_name: 'szdk',
20 |         description: 'Learning words with AI',
21 |         theme_color: '#ffffff',
22 |         background_color: '#ffffff',
23 |         display: 'standalone',
24 |         icons: [
25 |           {
26 |             src: 'pwa-192x192.png',
27 |             sizes: '192x192',
28 |             type: 'image/png',
29 |           },
30 |           {
31 |             src: 'pwa-512x512.png',
32 |             sizes: '512x512',
33 |             type: 'image/png',
34 |           },
35 |         ],
36 |       },
37 |     }),
38 |   ],
39 |   resolve: {
40 |     alias: {
41 |       '@': fileURLToPath(new URL('./src', import.meta.url)),
42 |     },
43 |   },
44 | })
45 | 


--------------------------------------------------------------------------------
/src/features/cards/WordCard.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useWordsStore, type WordType } from '@/stores/words'
 3 | import ModalWindow from '../ModalWindow.vue'
 4 | import { ref } from 'vue'
 5 | 
 6 | import WordInfo from './WordInfo.vue'
 7 | const { word } = defineProps<{ word: WordType }>()
 8 | const isOpen = ref(false)
 9 | const words = useWordsStore()
10 | </script>
11 | 
12 | <template>
13 |   <div
14 |     @click="isOpen = !isOpen"
15 |     :class="[
16 |       'w-full border border-neutral-300 rounded-lg p-3 cursor-pointer hover:bg-neutral-100 transition',
17 |     ]"
18 |   >
19 |     <span class="text-xl font-bold text-neutral-800 flex items-center gap-3"
20 |       ><span>{{ word.in_target }}</span>
21 |       <span class="text-xs font-light text-neutral-400">{{ word.in_user }}</span></span
22 |     >
23 |   </div>
24 |   <ModalWindow :title="word.in_target" :is-open="isOpen" @toggle="isOpen = !isOpen">
25 |     <WordInfo :word="word" />
26 |     <div class="w-full flex items-center justify-end">
27 |       <button
28 |         @click="
29 |           () => {
30 |             words.handleDelete(word.id)
31 |             isOpen = false
32 |           }
33 |         "
34 |         class="px-4 py-2 bg-red-700 text-white rounded-md"
35 |       >
36 |         Delete
37 |       </button>
38 |     </div>
39 |   </ModalWindow>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sozdik",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "run-p type-check \"build-only {@}\" --",
 9 |     "preview": "vite preview",
10 |     "build-only": "vite build",
11 |     "type-check": "vue-tsc --build",
12 |     "lint": "eslint . --fix",
13 |     "format": "prettier --write src/"
14 |   },
15 |   "dependencies": {
16 |     "@formkit/auto-animate": "^0.8.2",
17 |     "@google/generative-ai": "^0.22.0",
18 |     "@phosphor-icons/vue": "^2.2.1",
19 |     "@tailwindcss/vite": "^4.0.9",
20 |     "marked": "^15.0.7",
21 |     "openai": "^4.85.4",
22 |     "pinia": "^3.0.1",
23 |     "tailwindcss": "^4.0.9",
24 |     "uuid": "^11.1.0",
25 |     "vue": "^3.5.13",
26 |     "zod": "^3.24.2"
27 |   },
28 |   "devDependencies": {
29 |     "@tsconfig/node22": "^22.0.0",
30 |     "@types/node": "^22.13.4",
31 |     "@vitejs/plugin-vue": "^5.2.1",
32 |     "@vue/eslint-config-prettier": "^10.2.0",
33 |     "@vue/eslint-config-typescript": "^14.4.0",
34 |     "@vue/tsconfig": "^0.7.0",
35 |     "eslint": "^9.20.1",
36 |     "eslint-plugin-vue": "^9.32.0",
37 |     "jiti": "^2.4.2",
38 |     "npm-run-all2": "^7.0.2",
39 |     "prettier": "^3.5.1",
40 |     "typescript": "~5.7.3",
41 |     "vite": "^6.1.0",
42 |     "vite-plugin-pwa": "^0.21.1",
43 |     "vite-plugin-vue-devtools": "^7.7.2",
44 |     "vue-tsc": "^2.2.2"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/features/ImportData.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useWordsStore } from '@/stores/words'
 3 | import { PhArrowDown } from '@phosphor-icons/vue'
 4 | import { ref } from 'vue'
 5 | 
 6 | const fileContent = ref<string | null>(null)
 7 | const fileInput = ref<HTMLInputElement | null>(null)
 8 | const words = useWordsStore()
 9 | 
10 | const handleFileUpload = (event: Event) => {
11 |   const input = event.target as HTMLInputElement
12 |   if (!input.files || input.files.length === 0) return
13 | 
14 |   const file = input.files[0]
15 |   const reader = new FileReader()
16 | 
17 |   reader.onload = () => {
18 |     if (typeof reader.result === 'string') {
19 |       fileContent.value = reader.result
20 |       words.importData(reader.result)
21 |       console.log('Содержимое файла:', reader.result)
22 |     }
23 |   }
24 | 
25 |   reader.readAsText(file)
26 | }
27 | 
28 | const triggerFileInput = () => {
29 |   fileInput.value?.click()
30 | }
31 | </script>
32 | 
33 | <template>
34 |   <input
35 |     ref="fileInput"
36 |     type="file"
37 |     accept="application/json"
38 |     @change="handleFileUpload"
39 |     style="display: none"
40 |   />
41 |   <div
42 |     @click="triggerFileInput"
43 |     class="flex-1 py-2 rounded-lg gap-2 border border-neutral-400 hover:bg-neutral-100 transition cursor-pointer flex items-center justify-center"
44 |   >
45 |     <span>Import</span>
46 | 
47 |     <PhArrowDown :size="16" weight="bold" />
48 |   </div>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/src/features/cards/ToolKit.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useWordsStore } from '@/stores/words'
 3 | import AddWord from './AddWord.vue'
 4 | import { PhMagnifyingGlass, PhX } from '@phosphor-icons/vue'
 5 | 
 6 | const words = useWordsStore()
 7 | </script>
 8 | 
 9 | <template>
10 |   <div class="w-full flex items-center justify-between">
11 |     <div class="flex items-center gap-3">
12 |       <div v-if="words.isSearchActive" class="flex py-[3px] items-center gap-2">
13 |         <input
14 |           v-model="words.searchQuery"
15 |           type="text"
16 |           placeholder="Search words..."
17 |           class="px-3 py-1 border rounded-md focus:outline-none focus:border-emerald-500"
18 |           autofocus
19 |         />
20 |         <button
21 |           @click="words.toggleSearch"
22 |           class="p-1 hover:bg-neutral-100 rounded-full"
23 |         >
24 |           <PhX :size="16" />
25 |         </button>
26 |       </div>
27 |       <div v-else class="flex items-center gap-3">
28 |         <span v-if="words.currentWords.length !== 0">
29 |           {{ words.currentWords.length }} words
30 |         </span>
31 |         <span v-else>No words yet</span>
32 |         <button
33 |           @click="words.toggleSearch"
34 |           class="p-1 hover:bg-neutral-100 rounded-full"
35 |         >
36 |           <PhMagnifyingGlass :size="16" />
37 |         </button>
38 |       </div>
39 |     </div>
40 |     <AddWord v-if="!words.isSearchActive" />
41 |   </div>
42 | </template>
43 | 


--------------------------------------------------------------------------------
/src/features/header/HeaderLayout.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { PhFadersHorizontal } from '@phosphor-icons/vue'
 3 | import { ref } from 'vue'
 4 | import ModalWindow from '../ModalWindow.vue'
 5 | import NewLanguage from './NewLanguage.vue'
 6 | import { useLanguagesStore } from '@/stores/languages'
 7 | import { capitalize } from 'vue'
 8 | import SettingPanel from '../SettingPanel.vue'
 9 | const langs = useLanguagesStore()
10 | const isOpen = ref(false)
11 | </script>
12 | 
13 | <template>
14 |   <header
15 |     class="w-full px-4 sm:px-12 py-4 border-b border-b-neutral-500 flex items-center justify-between"
16 |   >
17 |     <div class="flex items-center gap-3">
18 |       <span
19 |         v-for="(l, index) in langs.languages"
20 |         @click="langs.selectedIndex = index"
21 |         :key="index"
22 |         :class="[
23 |           'px-4 py-2 border-b-2 border-b-emerald-500 cursor-pointer transition text-sm',
24 |           {
25 |             'border-b-white text-neutral-400': langs.selectedIndex != index,
26 |           },
27 |         ]"
28 |         >{{ capitalize(l.target) }}</span
29 |       >
30 |       <NewLanguage />
31 |     </div>
32 | 
33 |     <div class="p-2 rounded-lg bg-neutral-200 cursor-pointer" @click="isOpen = !isOpen">
34 |       <PhFadersHorizontal class="fill-neutral-800" :size="18" />
35 |     </div>
36 |     <ModalWindow title="Settings" :is-open="isOpen" @toggle="isOpen = !isOpen">
37 |       <SettingPanel />
38 |     </ModalWindow>
39 |   </header>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/src/stores/languages.ts:
--------------------------------------------------------------------------------
 1 | import { ref, onMounted } from 'vue'
 2 | import { defineStore } from 'pinia'
 3 | import type { addedLanguages } from './consts'
 4 | import type { SubType } from './words'
 5 | 
 6 | export type Language = (typeof addedLanguages)[number]
 7 | 
 8 | export function capitalize(str: string): string {
 9 |   if (str.length === 0) return str
10 |   return str.charAt(0).toUpperCase() + str.slice(1)
11 | }
12 | 
13 | export type LanguageType = {
14 |   target: Language
15 |   user: Language
16 | }
17 | 
18 | export const useLanguagesStore = defineStore('language', () => {
19 |   const languages = ref<LanguageType[]>([])
20 |   const selectedIndex = ref(0)
21 |   const subs = ref<SubType[]>([])
22 | 
23 |   const addNewLanguage = (lang: LanguageType) => {
24 |     languages.value = [...languages.value, lang]
25 | 
26 |     localStorage.setItem('language', JSON.stringify(languages.value))
27 |     triggerSubs()
28 |   }
29 | 
30 |   const deleteLanguage = (lang: string) => {
31 |     languages.value = languages.value.filter((l) => l.target !== lang)
32 |     localStorage.setItem('language', JSON.stringify(languages.value))
33 |     triggerSubs()
34 |   }
35 | 
36 |   onMounted(() => {
37 |     languages.value = JSON.parse(localStorage.getItem('language') || '[]')
38 |   })
39 | 
40 |   function triggerSubs() {
41 |     for (const s of subs.value) {
42 |       s()
43 |     }
44 |   }
45 | 
46 |   function addSub(s: SubType) {
47 |     subs.value = [...subs.value, s]
48 |   }
49 | 
50 |   return { addSub, triggerSubs, languages, addNewLanguage, selectedIndex, deleteLanguage }
51 | })
52 | 


--------------------------------------------------------------------------------
/src/features/cards/WordInfo.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { languageCodes } from '@/stores/consts'
 3 | import type { WordType } from '@/stores/words'
 4 | import { computed } from 'vue'
 5 | import { PhSpeakerSimpleHigh } from '@phosphor-icons/vue'
 6 | 
 7 | const props = defineProps<{
 8 |   word: WordType
 9 | }>()
10 | const renderedHTML = computed(() => {
11 |   return props.word.description.replace(/\n/g, '<br>')
12 | })
13 | function sound() {
14 |   const utterance = new SpeechSynthesisUtterance(props.word.in_target)
15 |   utterance.lang =
16 |     languageCodes.find((c) => c.language === props.word.target_lang)?.code ||
17 |     'en-US'
18 |   window.speechSynthesis.speak(utterance)
19 | }
20 | </script>
21 | 
22 | <template>
23 |   <div class="w-full flex flex-wrap gap-3">
24 |     <span class="text-sm text-white px-3 py-1 bg-emerald-700 rounded-md">{{
25 |       props.word.in_user
26 |     }}</span>
27 |     <span class="text-sm text-white px-3 py-1 bg-neutral-500 rounded-md">{{
28 |       props.word.level
29 |     }}</span>
30 |     <span class="text-sm text-white px-3 py-1 bg-neutral-500 rounded-md">{{
31 |       props.word.pos || 'no pos'
32 |     }}</span>
33 |     <span
34 |       @click="sound"
35 |       class="text-sm flex items-center gap-2 text-white px-3 py-1 bg-neutral-500 rounded-md cursor-pointer"
36 |       ><PhSpeakerSimpleHigh :size="16" />{{ props.word.transcription }}</span
37 |     >
38 |   </div>
39 |   <p class="text-neutral-500 desc-height" v-html="renderedHTML"></p>
40 | </template>
41 | 
42 | <style>
43 | .desc-height {
44 |   max-height: 50dvh;
45 |   overflow-y: scroll;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/features/header/NewLanguage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import ModalWindow from '../ModalWindow.vue'
 4 | import { PhPlus } from '@phosphor-icons/vue'
 5 | import { addedLanguages } from '@/stores/consts'
 6 | import { useLanguagesStore, type Language } from '@/stores/languages'
 7 | import { computed } from 'vue'
 8 | import { capitalize } from 'vue'
 9 | const langs = useLanguagesStore()
10 | const notLearningLanguages = computed(() => {
11 |   return addedLanguages.filter((alangs) => {
12 |     return !langs.languages.map((l) => l.target).includes(alangs)
13 |   })
14 | })
15 | const selectedTarget = ref<Language>(notLearningLanguages.value[0])
16 | const selectedUser = ref<Language>(notLearningLanguages.value[0])
17 | const isOpen = ref(false)
18 | </script>
19 | 
20 | <template>
21 |   <span
22 |     @click="isOpen = !isOpen"
23 |     class="px-4 py-2 bg-neutral-100 text-sm text-neutral-500 flex items-center gap-2 rounded-lg cursor-pointer"
24 |     ><span v-if="langs.languages.length == 0">Add first language</span
25 |     ><PhPlus :size="16" weight="bold"
26 |   /></span>
27 |   <ModalWindow title="New Language" :is-open="isOpen" @toggle="isOpen = !isOpen">
28 |     <span>Which language do you wanna learn?</span>
29 |     <select v-model="selectedTarget" class="p-2 border border-neutral-300 rounded-lg" name="" id="">
30 |       <option v-for="l in notLearningLanguages" :key="l" :value="l">{{ capitalize(l) }}</option>
31 |     </select>
32 |     <span>Your native language?</span>
33 |     <select v-model="selectedUser" class="p-2 border border-neutral-300 rounded-lg" name="" id="">
34 |       <option v-for="l in addedLanguages" :key="l" :value="l">{{ capitalize(l) }}</option>
35 |     </select>
36 |     <div class="flex w-full items-center justify-end">
37 |       <button
38 |         class="bg-emerald-700 text-white px-4 py-2 rounded-md"
39 |         @click="
40 |           () => {
41 |             langs.addNewLanguage({ target: selectedTarget, user: selectedUser })
42 |             isOpen = false
43 |           }
44 |         "
45 |       >
46 |         Add
47 |       </button>
48 |     </div>
49 |   </ModalWindow>
50 | </template>
51 | 


--------------------------------------------------------------------------------
/src/stores/consts.ts:
--------------------------------------------------------------------------------
 1 | export const languageCodes = [
 2 |   { language: 'english', code: 'en-US' },
 3 |   { language: 'spanish', code: 'es-ES' },
 4 |   { language: 'french', code: 'fr-FR' },
 5 |   { language: 'german', code: 'de-DE' },
 6 |   { language: 'chinese', code: 'zh-CN' },
 7 |   { language: 'japanese', code: 'ja-JP' },
 8 |   { language: 'portuguese', code: 'pt-PT' },
 9 |   { language: 'italian', code: 'it-IT' },
10 |   { language: 'russian', code: 'ru-RU' },
11 |   { language: 'arabic', code: 'ar-SA' },
12 |   { language: 'korean', code: 'ko-KR' },
13 |   { language: 'dutch', code: 'nl-NL' },
14 |   { language: 'swedish', code: 'sv-SE' },
15 |   { language: 'turkish', code: 'tr-TR' },
16 |   { language: 'greek', code: 'el-GR' },
17 |   { language: 'hebrew', code: 'he-IL' },
18 |   { language: 'polish', code: 'pl-PL' },
19 |   { language: 'finnish', code: 'fi-FI' },
20 |   { language: 'indonesian', code: 'id-ID' },
21 |   { language: 'vietnamese', code: 'vi-VN' },
22 |   { language: 'thai', code: 'th-TH' },
23 |   { language: 'swahili', code: 'sw-KE' },
24 |   { language: 'danish', code: 'da-DK' },
25 |   { language: 'norwegian', code: 'no-NO' },
26 |   { language: 'hungarian', code: 'hu-HU' },
27 |   { language: 'czech', code: 'cs-CZ' },
28 |   { language: 'urdu', code: 'ur-PK' },
29 |   { language: 'malay', code: 'ms-MY' },
30 | ] as const
31 | 
32 | export const addedLanguages = [
33 |   'english',
34 |   'spanish',
35 |   'french',
36 |   'german',
37 |   'chinese',
38 |   'japanese',
39 |   'portuguese',
40 |   'italian',
41 |   'russian',
42 |   'arabic',
43 |   'korean',
44 |   'dutch',
45 |   'swedish',
46 |   'turkish',
47 |   'greek',
48 |   'hebrew',
49 |   'polish',
50 |   'finnish',
51 |   'indonesian',
52 |   'vietnamese',
53 |   'thai',
54 |   'swahili',
55 |   'danish',
56 |   'norwegian',
57 |   'hungarian',
58 |   'czech',
59 |   'korean',
60 |   'urdu',
61 |   'malay',
62 | ] as const
63 | 
64 | export const pos = [
65 |   'noun',
66 |   'verb',
67 |   'adjective',
68 |   'adverb',
69 |   'pronoun',
70 |   'preposition',
71 |   'postposition',
72 |   'conjunction',
73 |   'interjection',
74 |   'numeral',
75 |   'determiner',
76 | ] as const
77 | 
78 | export const levels = ['a1', 'a2', 'b1', 'b2', 'c1', 'c2'] as const
79 | 


--------------------------------------------------------------------------------
/src/features/sync/useSync.ts:
--------------------------------------------------------------------------------
 1 | import { useLanguagesStore, type LanguageType } from '@/stores/languages'
 2 | import { useWordsStore, type WordType } from '@/stores/words'
 3 | import { defineStore } from 'pinia'
 4 | import { ref, watch } from 'vue'
 5 | import { Npoint } from './JsonBin'
 6 | 
 7 | export const useSyncStore = defineStore('sync', () => {
 8 |   const id = ref('')
 9 |   const words = useWordsStore()
10 |   const langs = useLanguagesStore()
11 |   const show = ref(false)
12 |   function toggleShow() {
13 |     show.value = !show.value
14 |   }
15 | 
16 |   async function sync() {
17 |     if (id.value === '') {
18 |       console.log('there is no id for npoint to sync')
19 |       return
20 |     }
21 |     const npoint = new Npoint(id.value)
22 |     const data = await npoint.getData()
23 |     if ('setup' in data && data.setup) {
24 |       const syncWords: WordType[] = data.words
25 |       for (const w of syncWords) {
26 |         if (words.allWords.find((aw) => aw.id === w.id) === undefined) {
27 |           words.allWords = [...words.allWords, w]
28 |         }
29 |       }
30 |       const syncLangs: LanguageType[] = data.languages
31 |       for (const sl of syncLangs) {
32 |         if (langs.languages.find((l) => l.target === sl.target) === undefined) {
33 |           langs.languages = [...langs.languages, sl]
34 |         }
35 |       }
36 |     } else {
37 |       await update()
38 |     }
39 |   }
40 | 
41 |   async function update() {
42 |     if (id.value === '') {
43 |       console.log('there is no id for npoint to update')
44 |       return
45 |     }
46 |     const npoint = new Npoint(id.value)
47 |     await npoint.setData(
48 |       JSON.stringify({
49 |         setup: true,
50 |         words: words.allWords,
51 |         languages: langs.languages,
52 |       }),
53 |     )
54 |   }
55 | 
56 |   async function load() {
57 |     const ls = localStorage.getItem('npoint_id')
58 |     id.value = ls || ''
59 |     if (ls !== null) {
60 |       sync()
61 |     }
62 |   }
63 | 
64 |   async function watcher() {
65 |     console.log('Running watcher')
66 |     try {
67 |       await sync()
68 |       await update()
69 |     } catch (e) {
70 |       console.log(e)
71 |     }
72 |   }
73 | 
74 |   watch(id, sync)
75 |   watch(id, (newID) => {
76 |     localStorage.setItem('npoint_id', newID)
77 |   })
78 |   words.addSub(update)
79 |   langs.addSub(update)
80 | 
81 |   return { id, load, sync, update, show, toggleShow }
82 | })
83 | 


--------------------------------------------------------------------------------
/src/features/SettingPanel.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useLanguagesStore } from '@/stores/languages'
 3 | import { PhTrash, PhEyeClosed, PhEye } from '@phosphor-icons/vue'
 4 | import { capitalize } from 'vue'
 5 | import { useTokenStore } from '@/stores/token'
 6 | import ImportData from '@/features/ImportData.vue'
 7 | import ExportData from '@/features/ExportData.vue'
 8 | import { useSyncStore } from './sync/useSync'
 9 | 
10 | const langs = useLanguagesStore()
11 | const token = useTokenStore()
12 | const sync = useSyncStore()
13 | </script>
14 | 
15 | <template>
16 |   <div class="w-full flex flex-col gap-4">
17 |     <div class="w-full flex flex-col gap-2">
18 |       <span>Languages</span>
19 |       <span
20 |         v-for="l in langs.languages"
21 |         :key="l.target"
22 |         class="w-full flex items-center justify-between rounded-md border border-neutral-300 px-3 py-2"
23 |         ><span>{{ capitalize(l.target) }}</span>
24 |         <div @click="langs.deleteLanguage(l.target)" class="cursor-pointer">
25 |           <PhTrash :size="16" /></div
26 |       ></span>
27 |     </div>
28 |     <div class="w-full flex flex-col gap-2">
29 |       <span>OpenAI Token</span>
30 | 
31 |       <div class="relative">
32 |         <input
33 |           v-model="token.token"
34 |           :type="token.show ? 'text' : 'password'"
35 |           class="w-full focus:outline-none rounded-md border border-neutral-300 pl-3 py-2"
36 |           placeholder="your token"
37 |         />
38 |         <div
39 |           @click="token.toggleShow"
40 |           class="absolute top-1/2 -translate-y-1/2 right-3 cursor-pointer bg-white p-2 rounded-lg shadow-xl"
41 |         >
42 |           <PhEyeClosed v-if="!token.show" :size="16" />
43 |           <PhEye v-if="token.show" :size="16" />
44 |         </div>
45 |       </div>
46 |     </div>
47 |     <div class="w-full flex flex-col gap-2">
48 |       <span>Sync data</span>
49 |       <div class="w-full flex items-center gap-2">
50 |         <ImportData />
51 |         <ExportData />
52 |       </div>
53 |       <span>Npoint token</span>
54 | 
55 |       <div class="relative">
56 |         <input
57 |           v-model="sync.id"
58 |           :type="sync.show ? 'text' : 'password'"
59 |           class="w-full focus:outline-none rounded-md border border-neutral-300 pl-3 py-2"
60 |           placeholder="your npoint id"
61 |         />
62 |         <div
63 |           @click="sync.toggleShow"
64 |           class="absolute top-1/2 -translate-y-1/2 right-3 cursor-pointer bg-white p-2 rounded-lg shadow-xl"
65 |         >
66 |           <PhEyeClosed v-if="!sync.show" :size="16" />
67 |           <PhEye v-if="sync.show" :size="16" />
68 |         </div>
69 |       </div>
70 |     </div>
71 |   </div>
72 | </template>
73 | 


--------------------------------------------------------------------------------
/src/features/cards/AddWord.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { PhPlus } from '@phosphor-icons/vue'
 3 | import ModalWindow from '@/features/ModalWindow.vue'
 4 | import { ref } from 'vue'
 5 | import { useWordsStore } from '@/stores/words'
 6 | import WordInfo from './WordInfo.vue'
 7 | import { AppError } from '@/utils/errorHandler'
 8 | 
 9 | const isOpen = ref(false)
10 | const words = useWordsStore()
11 | const error = ref('')
12 | 
13 | function handleClose() {
14 |   if (words.newWord !== null) {
15 |     words.handleSave()
16 |   }
17 |   isOpen.value = false
18 |   error.value = ''
19 | }
20 | 
21 | async function handleButton() {
22 |   try {
23 |     error.value = ''
24 |     if (words.newWord !== null) {
25 |       words.handleSave()
26 |       isOpen.value = false
27 |     } else {
28 |       await words.addNewWord()
29 |     }
30 |   } catch (e) {
31 |     if (e instanceof AppError) {
32 |       error.value = e.message
33 |       if (e.code === 'TOKEN_MISSING') {
34 |         // Optionally redirect to settings or show settings modal
35 |         console.error('Please set your OpenAI API key')
36 |       }
37 |     } else {
38 |       error.value = 'An unexpected error occurred'
39 |     }
40 |   }
41 | }
42 | 
43 | function handleKeydown(e: KeyboardEvent) {
44 |   if (e.key === 'Enter' && !e.shiftKey) {
45 |     e.preventDefault()
46 |     handleButton()
47 |   }
48 | }
49 | </script>
50 | 
51 | <template>
52 |   <div
53 |     @click="isOpen = !isOpen"
54 |     class="flex items-center gap-3 bg-emerald-900 rounded-md px-4 py-2 cursor-pointer"
55 |   >
56 |     <PhPlus :size="16" weight="bold" class="fill-white" />
57 |     <span class="text-white">New word</span>
58 |   </div>
59 |   <ModalWindow title="Create new word" :is-open="isOpen" @toggle="handleClose">
60 |     <div class="w-full flex flex-col gap-4">
61 |       <div class="w-full flex items-center gap-4">
62 |         <input
63 |           v-model="words.inputToWord"
64 |           type="text"
65 |           placeholder="your word"
66 |           class="flex-1 pl-3 py-2 focus:outline-none border rounded-lg border-neutral-500"
67 |           @keydown="handleKeydown"
68 |         />
69 |         <button
70 |           :disabled="words.isLoading"
71 |           @click="handleButton"
72 |           class="px-4 py-2 rounded-lg bg-emerald-700 text-white"
73 |         >
74 |           {{
75 |             words.isLoading
76 |               ? 'Loading'
77 |               : words.newWord !== null
78 |                 ? 'Save'
79 |                 : 'Add'
80 |           }}
81 |         </button>
82 |       </div>
83 |       <div v-if="error" class="text-red-500 text-sm">
84 |         {{ error }}
85 |       </div>
86 |     </div>
87 |     <WordInfo v-if="words.newWord !== null" :word="words.newWord!" />
88 |   </ModalWindow>
89 | </template>
90 | 


--------------------------------------------------------------------------------
/src/features/cards/CardsList.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { useWordsStore } from '@/stores/words'
  3 | import WordCard from './WordCard.vue'
  4 | import ToolKit from './ToolKit.vue'
  5 | import { useLanguagesStore } from '@/stores/languages'
  6 | import { useTokenStore } from '@/stores/token'
  7 | import { computed } from 'vue'
  8 | import { PhCheckCircle } from '@phosphor-icons/vue'
  9 | const words = useWordsStore()
 10 | const langs = useLanguagesStore()
 11 | const token = useTokenStore()
 12 | const isAllDone = computed(() => {
 13 |   return (
 14 |     words.allWords.length !== 0 &&
 15 |     langs.languages.length !== 0 &&
 16 |     token.token !== ''
 17 |   )
 18 | })
 19 | </script>
 20 | 
 21 | <template>
 22 |   <main class="w-full px-4 sm:px-12 flex flex-col gap-2 py-6">
 23 |     <ToolKit />
 24 |     <div v-if="!isAllDone" class="flex flex-col gap-2 mt-16">
 25 |       <span class="text-2xl font-bold">Welcome to Sozdik</span>
 26 |       <span class="text-2xl font-bold text-emerald-800">To get started:</span>
 27 |       <br />
 28 |       <div class="w-full flex items-center gap-3">
 29 |         <div
 30 |           :class="[
 31 |             'p-1 rounded-full ',
 32 |             {
 33 |               'bg-neutral-100': token.token === '',
 34 |               'bg-emerald-500': token.token !== '',
 35 |             },
 36 |           ]"
 37 |         >
 38 |           <PhCheckCircle
 39 |             :class="[
 40 |               '',
 41 |               {
 42 |                 'fill-neutral-500': token.token === '',
 43 |                 'fill-white': token.token !== '',
 44 |               },
 45 |             ]"
 46 |             :size="16"
 47 |           />
 48 |         </div>
 49 |         <span class="text-neutral-500 text-sm">
 50 |           Add your OpenAI Token. Click to settings on the top right corner
 51 |         </span>
 52 |       </div>
 53 |       <div class="w-full flex items-center gap-3">
 54 |         <div
 55 |           :class="[
 56 |             'p-1 rounded-full ',
 57 |             {
 58 |               'bg-neutral-100': langs.languages.length === 0,
 59 |               'bg-emerald-500': langs.languages.length !== 0,
 60 |             },
 61 |           ]"
 62 |         >
 63 |           <PhCheckCircle
 64 |             :class="[
 65 |               '',
 66 |               {
 67 |                 'fill-neutral-500': langs.languages.length === 0,
 68 |                 'fill-white': langs.languages.length !== 0,
 69 |               },
 70 |             ]"
 71 |             :size="16"
 72 |           />
 73 |         </div>
 74 |         <span class="text-neutral-500 text-sm">
 75 |           Select your the languages you want to learn
 76 |         </span>
 77 |       </div>
 78 |       <div class="w-full flex items-center gap-3">
 79 |         <div
 80 |           :class="[
 81 |             'p-1 rounded-full ',
 82 |             {
 83 |               'bg-neutral-100': words.allWords.length === 0,
 84 |               'bg-emerald-500': words.allWords.length !== 0,
 85 |             },
 86 |           ]"
 87 |         >
 88 |           <PhCheckCircle
 89 |             :class="[
 90 |               '',
 91 |               {
 92 |                 'fill-neutral-500': words.allWords.length === 0,
 93 |                 'fill-white': words.allWords.length !== 0,
 94 |               },
 95 |             ]"
 96 |             :size="16"
 97 |           />
 98 |         </div>
 99 |         <span class="text-neutral-500 text-sm">
100 |           Create your first word with AI. Click on the "New word" button
101 |         </span>
102 |       </div>
103 |     </div>
104 |     <div v-if="isAllDone" class="w-full flex flex-col gap-2">
105 |       <WordCard
106 |         v-for="(w, index) in words.filteredWords"
107 |         :word="w"
108 |         :key="index"
109 |       />
110 |     </div>
111 |   </main>
112 | </template>
113 | 


--------------------------------------------------------------------------------
/src/features/llm/useGenerateWord.ts:
--------------------------------------------------------------------------------
  1 | import { z } from 'zod'
  2 | import type { Language } from '@/stores/languages'
  3 | import { levels, pos } from '@/stores/consts'
  4 | import { useTokenStore } from '@/stores/token'
  5 | import { AppError } from '@/utils/errorHandler'
  6 | import OpenAI from 'openai'
  7 | import { zodResponseFormat } from 'openai/helpers/zod'
  8 | import { config } from '@/config'
  9 | 
 10 | export const WordSchema = z.object({
 11 |   in_target: z.string(),
 12 |   in_user: z.string(),
 13 |   transcription: z.string(),
 14 |   pos: z.enum(pos).optional(),
 15 |   level: z.enum(levels),
 16 | })
 17 | 
 18 | export const useGenerateWord = () => {
 19 |   const tokenStore = useTokenStore()
 20 | 
 21 |   const validateToken = () => {
 22 |     if (!tokenStore.token || tokenStore.token.trim() === '') {
 23 |       throw new AppError(
 24 |         'OpenAI API key is not set',
 25 |         'TOKEN_MISSING',
 26 |         'Please set your OpenAI API key in settings',
 27 |       )
 28 |     }
 29 |   }
 30 | 
 31 |   const createOpenAIClient = () => {
 32 |     return new OpenAI({
 33 |       dangerouslyAllowBrowser: true,
 34 |       apiKey: tokenStore.token,
 35 |     })
 36 |   }
 37 | 
 38 |   const handleLLMError = (error: unknown) => {
 39 |     if (error instanceof OpenAI.APIError) {
 40 |       throw new AppError('AI Service Unavailable', 'LLM_ERROR', error.message)
 41 |     }
 42 |     if (error instanceof Error) {
 43 |       throw new AppError(
 44 |         'LLM Service Error',
 45 |         'UNKNOWN_LLM_ERROR',
 46 |         error.message,
 47 |       )
 48 |     }
 49 |     throw error
 50 |   }
 51 | 
 52 |   const getWordInfo = async (
 53 |     word: string,
 54 |     target: Language,
 55 |     user: Language,
 56 |   ) => {
 57 |     try {
 58 |       validateToken()
 59 |       const openai = createOpenAIClient()
 60 | 
 61 |       const completion = await openai.chat.completions.create({
 62 |         model: config.openai.model,
 63 |         messages: [
 64 |           {
 65 |             role: 'system',
 66 |             content:
 67 |               'You are AI language learning assistant. Respond with ONLY valid JSON, no markdown, no code blocks. The JSON should contain: in_target (string), in_user (string), transcription (string), pos (string, optional), level (string). Example: {"in_target": "hello", "in_user": "привет", "transcription": "həˈləʊ", "pos": "interjection", "level": "a1"}',
 68 |           },
 69 |           {
 70 |             role: 'user',
 71 |             content: `
 72 |               target language: ${target},
 73 |               user language: ${user},
 74 |               word or phrase: ${word}
 75 |             `,
 76 |           },
 77 |         ],
 78 |         response_format: zodResponseFormat(WordSchema, target),
 79 |         temperature: config.openai.temperature,
 80 |       })
 81 | 
 82 |       const content = completion.choices[0].message.content || '{}'
 83 |       // Remove any markdown code block syntax and clean the response
 84 |       const cleanJson = content
 85 |         .replace(/```json\n?/g, '')
 86 |         .replace(/```\n?/g, '')
 87 |         .trim()
 88 | 
 89 |       return cleanJson
 90 |     } catch (error) {
 91 |       handleLLMError(error)
 92 |     }
 93 |   }
 94 | 
 95 |   const generateDescription = async (
 96 |     word: string,
 97 |     target: Language,
 98 |     user: Language,
 99 |     callback: (chunk: string) => void,
100 |   ) => {
101 |     try {
102 |       validateToken()
103 |       const openai = createOpenAIClient()
104 | 
105 |       const stream = await openai.chat.completions.create({
106 |         model: config.openai.model,
107 |         messages: [
108 |           {
109 |             role: 'developer',
110 |             content:
111 |               'You are AI language learning assistant. User will send you a word or phrase, language that use learning (target) and users native language (user). You have to explain the word/phrase in user language. If the word/phrase is not in target language, then translate it to target language. You have to be short but answer should contain all importants things. You have to create 3 examples with translation in both languages. Give answer without markdown',
112 |           },
113 |           {
114 |             role: 'user',
115 |             content: `
116 |               target language: ${target},
117 |               user language: ${user},
118 |               word or phrase: ${word}
119 |             `,
120 |           },
121 |         ],
122 |         stream: true,
123 |         temperature: config.openai.temperature,
124 |       })
125 | 
126 |       for await (const chunk of stream) {
127 |         callback(chunk.choices[0]?.delta?.content || '')
128 |       }
129 |     } catch (error) {
130 |       handleLLMError(error)
131 |     }
132 |   }
133 | 
134 |   return { getWordInfo, generateDescription }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/stores/words.ts:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia'
  2 | import { useLanguagesStore, type Language } from './languages'
  3 | import { computed, onMounted, ref } from 'vue'
  4 | import { useGenerateWord, WordSchema } from '@/features/llm/useGenerateWord'
  5 | import type { levels, pos } from './consts'
  6 | import { v4 as uuidv4 } from 'uuid'
  7 | 
  8 | export type WordType = {
  9 |   id: string
 10 |   target_lang: Language
 11 |   user_lang: Language
 12 |   in_target: string
 13 |   in_user: string
 14 |   pos: (typeof pos)[number] | null
 15 |   level: (typeof levels)[number]
 16 |   transcription: string
 17 |   description: string
 18 |   createdAt: Date
 19 | }
 20 | 
 21 | export type SubType = () => void
 22 | 
 23 | export const useWordsStore = defineStore('words', () => {
 24 |   const allWords = ref<WordType[]>([])
 25 |   const subs = ref<SubType[]>([])
 26 |   function importData(data: string) {
 27 |     const newWords: WordType[] = JSON.parse(data)
 28 |     const oldWords = allWords.value
 29 |     let wordsToAdd: WordType[] = []
 30 | 
 31 |     for (const w of newWords) {
 32 |       if (oldWords.find((ow) => w.id === ow.id) === undefined) {
 33 |         wordsToAdd = [...wordsToAdd, w]
 34 |       }
 35 |     }
 36 | 
 37 |     allWords.value = [...allWords.value, ...wordsToAdd]
 38 |     localStorage.setItem('words', JSON.stringify(allWords.value))
 39 |   }
 40 |   const langs = useLanguagesStore()
 41 |   const currentWords = computed(() => {
 42 |     const currTarget = langs.languages[langs.selectedIndex]
 43 |     return allWords.value.filter((w) => currTarget.target === w.target_lang)
 44 |   })
 45 | 
 46 |   // create new word
 47 |   const newWord = ref<WordType | null>(null)
 48 |   const inputToWord = ref('')
 49 |   const bothLoading = ref<{ info: boolean; desc: boolean }>({
 50 |     info: false,
 51 |     desc: false,
 52 |   })
 53 |   const isLoading = computed(() => {
 54 |     return bothLoading.value.info || bothLoading.value.desc
 55 |   })
 56 | 
 57 |   const llm = useGenerateWord()
 58 |   function load() {
 59 |     const data = localStorage.getItem('words')
 60 |     allWords.value = data
 61 |       ? JSON.parse(data).map((word: WordType) => ({
 62 |           ...word,
 63 |           createdAt: new Date(word.createdAt),
 64 |         }))
 65 |       : []
 66 | 
 67 |     allWords.value.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
 68 |   }
 69 |   onMounted(() => {
 70 |     load()
 71 |   })
 72 |   async function addNewWord() {
 73 |     bothLoading.value = { info: true, desc: true }
 74 |     const currTarget = langs.languages[langs.selectedIndex]
 75 |     llm
 76 |       .getWordInfo(inputToWord.value, currTarget.target, currTarget.user)
 77 |       .then((info) => {
 78 |         const newWordData = WordSchema.parse(JSON.parse(info || '{}'))
 79 |         if (newWord.value !== null) {
 80 |           newWord.value = {
 81 |             ...newWordData,
 82 |             id: uuidv4(),
 83 |             target_lang: currTarget.target,
 84 |             user_lang: currTarget.user,
 85 |             pos: newWordData.pos || null,
 86 |             description: newWord.value.description || '',
 87 |             createdAt: new Date(),
 88 |           }
 89 |         } else {
 90 |           newWord.value = {
 91 |             ...newWordData,
 92 |             id: uuidv4(),
 93 |             target_lang: currTarget.target,
 94 |             user_lang: currTarget.user,
 95 |             pos: newWordData.pos || null,
 96 |             description: '',
 97 |             createdAt: new Date(),
 98 |           }
 99 |         }
100 |         bothLoading.value = { ...bothLoading.value, info: false }
101 |       })
102 |     llm.generateDescription(
103 |       inputToWord.value,
104 |       currTarget.target,
105 |       currTarget.user,
106 |       (ch) => {
107 |         if (newWord.value !== null) {
108 |           newWord.value = {
109 |             ...newWord.value,
110 |             description: newWord.value.description + ch,
111 |           }
112 |         } else {
113 |           newWord.value = {
114 |             id: uuidv4(),
115 |             in_target: '',
116 |             in_user: '',
117 |             level: 'a1',
118 |             transcription: '',
119 |             target_lang: currTarget.target,
120 |             user_lang: currTarget.user,
121 |             pos: null,
122 |             description: ch,
123 |             createdAt: new Date(),
124 |           }
125 |         }
126 |         bothLoading.value = { ...bothLoading.value, desc: false }
127 |       },
128 |     )
129 |   }
130 | 
131 |   function triggerSubs() {
132 |     for (const s of subs.value) {
133 |       s()
134 |     }
135 |   }
136 | 
137 |   function addSub(s: SubType) {
138 |     subs.value = [...subs.value, s]
139 |   }
140 | 
141 |   function handleSave() {
142 |     if (newWord.value !== null) {
143 |       allWords.value = [newWord.value, ...allWords.value]
144 |       localStorage.setItem('words', JSON.stringify(allWords.value))
145 |       newWord.value = null
146 |       inputToWord.value = ''
147 |     }
148 |     triggerSubs()
149 |   }
150 | 
151 |   function handleDelete(id: string) {
152 |     allWords.value = allWords.value.filter((w) => w.id !== id)
153 |     localStorage.setItem('words', JSON.stringify(allWords.value))
154 |     triggerSubs()
155 |   }
156 | 
157 |   function setAllWords(words: WordType[]) {
158 |     allWords.value = words
159 |     triggerSubs()
160 |   }
161 | 
162 |   const searchQuery = ref('')
163 |   const isSearchActive = ref(false)
164 | 
165 |   const filteredWords = computed(() => {
166 |     if (!isSearchActive.value || !searchQuery.value) {
167 |       return currentWords.value
168 |     }
169 | 
170 |     return currentWords.value.filter(
171 |       (word) =>
172 |         word.in_target
173 |           .toLowerCase()
174 |           .includes(searchQuery.value.toLowerCase()) ||
175 |         word.in_user.toLowerCase().includes(searchQuery.value.toLowerCase()),
176 |     )
177 |   })
178 | 
179 |   function toggleSearch() {
180 |     isSearchActive.value = !isSearchActive.value
181 |     if (!isSearchActive.value) {
182 |       searchQuery.value = ''
183 |     }
184 |   }
185 |   return {
186 |     addSub,
187 |     setAllWords,
188 |     allWords,
189 |     currentWords,
190 |     addNewWord,
191 |     load,
192 |     newWord,
193 |     inputToWord,
194 |     isLoading,
195 |     handleSave,
196 |     handleDelete,
197 |     importData,
198 |     filteredWords,
199 |     searchQuery,
200 |     isSearchActive,
201 |     toggleSearch,
202 |   }
203 | })
204 | 


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