cacarun/json-translate

JSON i18n Translation Tool

🌐 AI-Powered JSON Internationalization Translation Tool

🔗 json.uiboy.com
Free online JSON translation tool powered by AI, supporting 40+ languages

English | 简体中文

🎯 An Open-Source AI Development Journey

This project showcases a complete AI-assisted development process, from product design to implementation

What's Included:

🔸 Product Requirements Document - Complete PRD created with AI assistance
🔸 Source Code - Full codebase with AI-powered features

✨ Features

• 🤖 Smart translation powered by OpenAI GPT models
• 🔄 Maintains JSON structure integrity
• 🌍 Supports 40+ languages
• 🌐 Multi-language interface
• ⚡️ Real-time translation preview
• 🛡️ Local API key usage for security
• 📦 Export translation results
• 🎯 Accurate technical term translation
• 💻 Fully open source, transparent code

📖 AI-Driven Product Design

This project includes complete Product Requirements Documents in both English and Chinese:

• English PRD
• 中文 PRD

🚀 Quick Start

Requirements

• Node.js >= 16.0.0
• npm or yarn or pnpm
• OpenAI API key

Installation

git clone https://github.com/ViggoZ/json-translate.git

cd json-translate

npm install

Development

npm run dev

Visit http://localhost:3000 to view the development environment.

Build

npm run build

npm run start

📖 Usage Guide

1. Preparation

   • Prepare your JSON file for translation
   • Get your OpenAI API key (https://platform.openai.com)

2. Getting Started

   • Visit the website
   • Upload JSON file (drag & drop supported)
   • Select target language
   • Enter API key
   • Start translation

3. Features

   • Single JSON file translation
   • Real-time translation preview
   • Export in JSON format

💡 Best Practices

• Split large files into smaller ones for translation
• Verify JSON format before translation
• Use preview feature to confirm translation quality
• Regularly backup important translation files

🛠 Tech Stack

• Development Tool:
  • Cursor (AI-assisted development)
• Framework: Next.js 14
• UI:
  • React 18
  • Tailwind CSS
  • Radix UI
  • HeadlessUI
• Language: TypeScript
• API: OpenAI API
• Libraries:
  • JSZip (file handling)
  • React Syntax Highlighter
  • React Window (virtual list)

🤝 Contributing

I welcome all forms of contributions, whether it's new features, bug fixes, or documentation improvements.

1. Fork the project
2. Create your feature branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a Pull Request

Development Guidelines

• Follow existing code style
• Ensure code passes npm run lint
• Test functionality before submitting

📝 License

This project is licensed under the MIT License - see the LICENSE file for details

🙋 FAQ

Q: Is the API key secure?
A: Yes. API keys are only used temporarily in the browser and are never saved or transmitted to servers.

Q: Which languages are supported?
A: 40+ major languages including but not limited to:

• Chinese (Simplified/Traditional)
• English
• Japanese
• Korean
• French
• German
• Spanish
• Russian etc.

Q: Is there a file size limit?
A: Single files are limited to 10MB.

📞 Contact

• Author: Viggo
• Email: viggo.zw@gmail.com
• Twitter: @viggo

🌟 Acknowledgments

Thanks to all users who provided feedback. Special thanks to:

• OpenAI team for their powerful API
• Next.js team for the excellent framework
• All project contributors

---

If this project helps you, please give it a star ⭐️!

Made with ❤️ by [@viggo](https://twitter.com/decohack)