[]) {
157 | return chunks.reduce((acc, chunk) => {
158 | function deepMerge(target: any, source: any) {
159 | for (const key in source) {
160 | if (typeof source[key] === 'object' && source[key] !== null) {
161 | target[key] = target[key] || {};
162 | deepMerge(target[key], source[key]);
163 | } else {
164 | target[key] = source[key];
165 | }
166 | }
167 | return target;
168 | }
169 | return deepMerge(acc, chunk);
170 | }, {});
171 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JSON i18n Translation Tool
2 |
3 |
4 | 
5 |
6 |
7 |
8 | 🌐 AI-Powered JSON Internationalization Translation Tool
9 |
10 |
11 |
12 | 🔗 json.uiboy.com
13 | Free online JSON translation tool powered by AI, supporting 40+ languages
14 |
15 |
16 |
17 |
18 | 
19 |
20 |
21 | 
22 |
23 |
24 | 
25 |
26 |
27 | 
28 |
29 |
30 |
31 |
32 | English |
33 | 简体中文
34 |
35 |
36 |
37 | 🎯 An Open-Source AI Development Journey
38 |
39 |
40 |
41 | This project showcases a complete AI-assisted development process, from product design to implementation
42 |
43 |
44 |
45 | What's Included:
46 |
47 |
48 |
49 | 🔸 Product Requirements Document - Complete PRD created with AI assistance
50 | 🔸 Source Code - Full codebase with AI-powered features
51 |
52 |
53 | ## ✨ Features
54 |
55 | - 🤖 Smart translation powered by OpenAI GPT models
56 | - 🔄 Maintains JSON structure integrity
57 | - 🌍 Supports 40+ languages
58 | - 🌐 Multi-language interface
59 | - ⚡️ Real-time translation preview
60 | - 🛡️ Local API key usage for security
61 | - 📦 Export translation results
62 | - 🎯 Accurate technical term translation
63 | - 💻 Fully open source, transparent code
64 |
65 | ## 📖 AI-Driven Product Design
66 |
67 | This project includes complete Product Requirements Documents in both English and Chinese:
68 | - [English PRD](./json-translator-prd.md)
69 | - [中文 PRD](./json-translator-prd.zh.md)
70 |
71 | ## 🚀 Quick Start
72 |
73 | ### Requirements
74 |
75 | - Node.js >= 16.0.0
76 | - npm or yarn or pnpm
77 | - OpenAI API key
78 |
79 | ### Installation
80 |
81 | ```bash
82 | git clone https://github.com/ViggoZ/json-translate.git
83 | ```
84 |
85 | ```bash
86 | cd json-translate
87 | ```
88 |
89 | ```bash
90 | npm install
91 | ```
92 |
93 | ### Development
94 |
95 | ```bash
96 | npm run dev
97 | ```
98 | Visit http://localhost:3000 to view the development environment.
99 |
100 | ### Build
101 |
102 | ```bash
103 | npm run build
104 | ```
105 |
106 | ```bash
107 | npm run start
108 | ```
109 |
110 | ## 📖 Usage Guide
111 |
112 | 1. **Preparation**
113 | - Prepare your JSON file for translation
114 | - Get your OpenAI API key (https://platform.openai.com)
115 |
116 | 2. **Getting Started**
117 | - Visit the website
118 | - Upload JSON file (drag & drop supported)
119 | - Select target language
120 | - Enter API key
121 | - Start translation
122 |
123 | 3. **Features**
124 | - Single JSON file translation
125 | - Real-time translation preview
126 | - Export in JSON format
127 |
128 | ## 💡 Best Practices
129 |
130 | - Split large files into smaller ones for translation
131 | - Verify JSON format before translation
132 | - Use preview feature to confirm translation quality
133 | - Regularly backup important translation files
134 |
135 | ## 🛠 Tech Stack
136 |
137 | - **Development Tool**:
138 | - Cursor (AI-assisted development)
139 | - **Framework**: Next.js 14
140 | - **UI**:
141 | - React 18
142 | - Tailwind CSS
143 | - Radix UI
144 | - HeadlessUI
145 | - **Language**: TypeScript
146 | - **API**: OpenAI API
147 | - **Libraries**:
148 | - JSZip (file handling)
149 | - React Syntax Highlighter
150 | - React Window (virtual list)
151 |
152 | ## 🤝 Contributing
153 |
154 | I welcome all forms of contributions, whether it's new features, bug fixes, or documentation improvements.
155 |
156 | 1. Fork the project
157 | 2. Create your feature branch (`git checkout -b feature/YourFeature`)
158 | 3. Commit your changes (`git commit -m 'Add some feature'`)
159 | 4. Push to the branch (`git push origin feature/YourFeature`)
160 | 5. Open a Pull Request
161 |
162 | ### Development Guidelines
163 | - Follow existing code style
164 | - Ensure code passes `npm run lint`
165 | - Test functionality before submitting
166 |
167 | ## 📝 License
168 |
169 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
170 |
171 | ## 🙋 FAQ
172 |
173 | **Q: Is the API key secure?**
174 | A: Yes. API keys are only used temporarily in the browser and are never saved or transmitted to servers.
175 |
176 | **Q: Which languages are supported?**
177 | A: 40+ major languages including but not limited to:
178 | - Chinese (Simplified/Traditional)
179 | - English
180 | - Japanese
181 | - Korean
182 | - French
183 | - German
184 | - Spanish
185 | - Russian
186 | etc.
187 |
188 | **Q: Is there a file size limit?**
189 | A: Single files are limited to 10MB.
190 |
191 | ## 📞 Contact
192 |
193 | - Author: Viggo
194 | - Email: viggo.zw@gmail.com
195 | - Twitter: [@viggo](https://twitter.com/decohack)
196 |
197 | ## 🌟 Acknowledgments
198 |
199 | Thanks to all users who provided feedback. Special thanks to:
200 |
201 | - OpenAI team for their powerful API
202 | - Next.js team for the excellent framework
203 | - All project contributors
204 |
205 | ---
206 |
207 | If this project helps you, please give it a star ⭐️!
208 |
209 | Made with ❤️ by [@viggo](https://twitter.com/decohack)
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SelectPrimitive from "@radix-ui/react-select"
5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Select = SelectPrimitive.Root
10 |
11 | const SelectGroup = SelectPrimitive.Group
12 |
13 | const SelectValue = SelectPrimitive.Value
14 |
15 | const SelectTrigger = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef
18 | >(({ className, children, ...props }, ref) => (
19 | span]:line-clamp-1",
23 | className
24 | )}
25 | {...props}
26 | >
27 | {children}
28 |
29 |
30 |
31 |
32 | ))
33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
34 |
35 | const SelectScrollUpButton = React.forwardRef<
36 | React.ElementRef,
37 | React.ComponentPropsWithoutRef
38 | >(({ className, ...props }, ref) => (
39 |
47 |
48 |
49 | ))
50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
51 |
52 | const SelectScrollDownButton = React.forwardRef<
53 | React.ElementRef,
54 | React.ComponentPropsWithoutRef
55 | >(({ className, ...props }, ref) => (
56 |
64 |
65 |
66 | ))
67 | SelectScrollDownButton.displayName =
68 | SelectPrimitive.ScrollDownButton.displayName
69 |
70 | const SelectContent = React.forwardRef<
71 | React.ElementRef,
72 | React.ComponentPropsWithoutRef
73 | >(({ className, children, position = "popper", ...props }, ref) => (
74 |
75 |
86 |
87 |
94 | {children}
95 |
96 |
97 |
98 |
99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 |
102 | const SelectLabel = React.forwardRef<
103 | React.ElementRef,
104 | React.ComponentPropsWithoutRef
105 | >(({ className, ...props }, ref) => (
106 |
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 |
114 | const SelectItem = React.forwardRef<
115 | React.ElementRef,
116 | React.ComponentPropsWithoutRef
117 | >(({ className, children, ...props }, ref) => (
118 |
126 |
127 |
128 |
129 |
130 |
131 | {children}
132 |
133 | ))
134 | SelectItem.displayName = SelectPrimitive.Item.displayName
135 |
136 | const SelectSeparator = React.forwardRef<
137 | React.ElementRef,
138 | React.ComponentPropsWithoutRef
139 | >(({ className, ...props }, ref) => (
140 |
145 | ))
146 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
147 |
148 | export {
149 | Select,
150 | SelectGroup,
151 | SelectValue,
152 | SelectTrigger,
153 | SelectContent,
154 | SelectLabel,
155 | SelectItem,
156 | SelectSeparator,
157 | SelectScrollUpButton,
158 | SelectScrollDownButton,
159 | }
160 |
--------------------------------------------------------------------------------
/src/components/FileUpload.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { Input } from "@/components/ui/input"
4 | import { useTranslate } from "@/context/TranslateContext"
5 | import { useToast } from "@/hooks/use-toast"
6 | import { parseJson } from "@/lib/json-utils"
7 | import { UploadIcon, FileJson2Icon, KeyIcon, Languages, FileIcon } from "lucide-react"
8 | import { useState } from "react"
9 |
10 | interface FileUploadProps {
11 | dict: {
12 | title: string;
13 | description: string;
14 | dragText: string;
15 | supportText: string;
16 | apiKeyTip: string;
17 | apiKeyTitle: string;
18 | apiKeyPlaceholder: string;
19 | errorTitle: string;
20 | successTitle: string;
21 | errors?: {
22 | selectFile: string;
23 | jsonExtension: string;
24 | fileSize: string;
25 | jsonFormat: string;
26 | emptyJson: string;
27 | };
28 | success?: {
29 | uploaded: string;
30 | };
31 | }
32 | }
33 |
34 | export function FileUpload({ dict }: FileUploadProps) {
35 | const [isUploaded, setIsUploaded] = useState(false)
36 | const [fileInfo, setFileInfo] = useState<{ name: string; size: string } | null>(null)
37 | const { toast } = useToast()
38 | const { setFile, apiKey, setApiKey, resetTranslation } = useTranslate()
39 |
40 | const handleUpload = async (event: React.ChangeEvent) => {
41 | const files = event.target.files
42 |
43 | if (!files || !files[0]) {
44 | toast({
45 | variant: "destructive",
46 | title: dict.errorTitle || "Error",
47 | description: dict.errors?.selectFile || "Please select a file"
48 | })
49 | return
50 | }
51 |
52 | const file = files[0]
53 |
54 | if (!file.name.endsWith('.json')) {
55 | toast({
56 | variant: "destructive",
57 | title: "Error",
58 | description: dict.errors?.jsonExtension || "Please upload a file with a .json extension"
59 | })
60 | return
61 | }
62 |
63 | if (file.size > 10 * 1024 * 1024) {
64 | toast({
65 | variant: "destructive",
66 | title: "Error",
67 | description: dict.errors?.fileSize || "File size cannot exceed 10MB"
68 | })
69 | return
70 | }
71 |
72 | try {
73 | const text = await file.text()
74 | const result = parseJson(text.trim())
75 |
76 | if (!result.success) {
77 | throw new Error(result.error || dict.errors?.jsonFormat || 'Invalid JSON format')
78 | }
79 |
80 | if (Object.keys(result.data).length === 0) {
81 | throw new Error(dict.errors?.emptyJson || 'JSON file cannot be empty')
82 | }
83 |
84 | setFile(file)
85 | setIsUploaded(true)
86 | setFileInfo({
87 | name: file.name,
88 | size: formatFileSize(file.size)
89 | })
90 | resetTranslation()
91 | toast({
92 | title: dict.successTitle || "Success",
93 | description: dict.success?.uploaded || "File uploaded successfully"
94 | })
95 |
96 | } catch (err) {
97 | setIsUploaded(false)
98 | setFileInfo(null)
99 | toast({
100 | variant: "destructive",
101 | title: "JSON Format Error",
102 | description: err instanceof Error ? err.message : dict.errors?.jsonFormat || "Invalid file format"
103 | })
104 | }
105 | }
106 |
107 | const handleDragOver = (e: React.DragEvent) => {
108 | e.preventDefault()
109 | e.stopPropagation()
110 | }
111 |
112 | const handleDrop = async (e: React.DragEvent) => {
113 | e.preventDefault()
114 | e.stopPropagation()
115 |
116 | const files = e.dataTransfer.files
117 | if (files && files[0]) {
118 | const event = { target: { files } } as React.ChangeEvent
119 | handleUpload(event)
120 | }
121 | }
122 |
123 | const formatFileSize = (bytes: number): string => {
124 | if (bytes === 0) return '0 Bytes'
125 | const k = 1024
126 | const sizes = ['Bytes', 'KB', 'MB', 'GB']
127 | const i = Math.floor(Math.log(bytes) / Math.log(k))
128 | return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
129 | }
130 |
131 | return (
132 |
133 |
134 |
178 |
179 |
180 |
181 |
182 |
183 | {dict.apiKeyTitle || "OpenAI API Key"}
184 |
185 |
186 | {dict.apiKeyTip || "Tips: OpenAI API Key is required for translation."}
187 |
188 |
setApiKey(e.target.value)}
194 | />
195 |
196 |
19 |