🚀 Chinese Redefine

汉语新解 - Modern Chinese Word Redefinition

An innovative AI-powered tool that reinterprets traditional Chinese words through contemporary perspectives.
Supports intelligent interpretation generation, beautiful SVG card exports, and responsive design with smooth animations.
One-click FREE deployment of your Chinese word redefinition platform.

Live Demo · Documentation · GitHub Issues

Share Chinese Redefine

^{🌟 Redefining Chinese language interpretation for the modern era. Built for language enthusiasts and cultural explorers.}

Important

This project demonstrates modern AI integration with Chinese language processing. It combines Google Gemini AI with Next.js to provide intelligent word interpretation with contemporary perspectives. Features include rate limiting, SVG export, and beautiful animations.

📑 Table of Contents

🌟 Introduction

We are passionate about bridging traditional Chinese language with modern perspectives. By leveraging cutting-edge AI technology and contemporary interpretation methods, we aim to provide users with fresh insights into classical Chinese vocabulary.

Whether you're a language learner, cultural researcher, or simply curious about modern interpretations of traditional words, Chinese Redefine will be your digital companion for exploring language evolution. The project is actively maintained and welcomes feedback for any issues encountered.

Note

Node.js >= 18.0 required
Google Gemini API key required for AI functionality
Modern browser with JavaScript enabled
Internet connection for AI processing

	No installation required! Visit our demo to experience AI-powered Chinese word redefinition.

📸 Screenshots

Main Interface

Gallery

My Cards

📸 Previous Version Screenshots

Main Interface (v1)

Word Interpretation Result (v1)

Tip

⭐ Star us to receive all release notifications from GitHub without delay!

✨ Key Features

`1` AI-Powered Interpretation

Experience next-generation Chinese word interpretation powered by Google Gemini AI. Our innovative approach provides contemporary perspectives on traditional vocabulary through advanced natural language processing. This breakthrough feature delivers creative, insightful, and thought-provoking redefinitions.

Key capabilities include:

🤖 Advanced AI: Google Gemini-powered interpretations
🎯 Cultural Context: Modern perspective on traditional words
🧠 Creative Insights: Unique and thought-provoking explanations
🛡️ Content Safety: Built-in validation and filtering

`2` Beautiful SVG Export

Revolutionary card generation system that transforms AI interpretations into stunning visual cards. With our advanced SVG generator and intuitive design, users can create shareable content while maintaining professional quality.

Export Features:

High Quality: Vector-based SVG format for crisp visuals
Customizable: Responsive design with multiple size options
Professional: Beautiful typography and layout design
Instant Download: One-click export functionality

`*` Additional Features

Beyond the core features, Chinese Redefine includes:

💨 Instant Processing: Real-time AI interpretation generation
🌐 Responsive Design: Perfect experience on all devices
🔒 Rate Limiting: Built-in API protection (5 requests/minute)
💎 Modern UI: Beautiful interface with Tailwind CSS and shadcn/ui
🎬 Smooth Animations: Delightful Framer Motion transitions
📱 Mobile Optimized: Touch-friendly interface for mobile users
⚡ Performance: Optimized with Next.js 15 and React 18
🎨 SVG Preview: Real-time card preview before download

✨ More features are continuously being added as the project evolves.

🛠️ Tech Stack

Next.js 15

React 18

TypeScript 5

Tailwind CSS

Framer Motion

Gemini AI

Vercel

Frontend Stack:

Framework: Next.js 15 with App Router
Language: TypeScript for type safety
Styling: Tailwind CSS + shadcn/ui components
Animations: Framer Motion for smooth transitions
Icons: Lucide React icon library

AI Integration:

AI Provider: Google Gemini API
Processing: Real-time Chinese text interpretation
Rate Limiting: Built-in request throttling
Validation: Chinese character validation and filtering

Development & Deployment:

Development: ESLint + Prettier for code quality
Deployment: Vercel for seamless hosting
Performance: Optimized bundle splitting
Mobile: Responsive design with PWA capabilities

Tip

Each technology was carefully selected for Chinese language processing, AI integration capabilities, and optimal user experience.

🏗️ Architecture

System Architecture

graph TB
    subgraph "Frontend Layer"
        A[Next.js App] --> B[React Components]
        B --> C[Framer Motion]
        C --> D[API Layer]
    end
    
    subgraph "Backend Layer"
        E[API Routes] --> F[Input Validation]
        F --> G[Rate Limiting]
        G --> H[Gemini AI]
    end
    
    subgraph "External Services"
        I[Google Gemini API]
        J[Vercel Hosting]
        K[CDN Delivery]
    end
    
    D --> E
    H --> I
    A --> J
    A --> K
    
    subgraph "Client Features"
        L[SVG Generator]
        M[File Download]
        N[Responsive UI]
    end
    
    B --> L
    L --> M
    B --> N

Component Structure

src/
├── app/                    # Next.js App Router
│   ├── api/generate/      # AI generation endpoint
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Main application
├── components/            # React components
│   ├── ui/               # shadcn/ui base components
│   ├── CardGenerator.tsx # Main generator component
│   ├── ResultCard.tsx    # Result display
│   ├── DownloadButton.tsx# SVG export functionality
│   └── SVGPreview.tsx    # Card preview
├── lib/                  # Utility libraries
│   ├── animations.ts     # Framer Motion variants
│   ├── errors.ts         # Error handling
│   ├── svgGenerator.ts   # SVG creation logic
│   └── utils.ts          # Helper functions
└── public/               # Static assets

⚡️ Performance

Key Metrics:

⚡ < 1s Page load time with Next.js optimization
🚀 95+ Lighthouse performance score
💨 < 2s AI response time via Gemini API
📊 99.9% uptime on Vercel infrastructure
🔄 Real-time user interface updates

Performance Optimizations:

🎯 Smart Bundling: Automatic code splitting with Next.js
📦 Component Optimization: Lazy loading and tree shaking
🖼️ Asset Optimization: Optimized SVG generation
🔄 API Efficiency: Rate limiting and request optimization

🚀 Getting Started

Prerequisites

Important

Ensure you have the following installed:

Node.js 18.0+ (Download)
npm/yarn/pnpm package manager
Google Gemini API key (Get API Key)
Git (Download)

Quick Installation

1. Clone Repository

git clone https://github.com/ChanMeng666/chinese-redefine.git
cd chinese-redefine

2. Install Dependencies

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm (recommended)
pnpm install

3. Environment Setup

# Create environment file
cp .env.example .env.local

# Edit environment variables
nano .env.local

4. Start Development

npm run dev

🎉 Success! Open http://localhost:3000 to view the application.

Environment Setup

Create .env.local file with the following variables:

# Google Gemini API
GEMINI_API_KEY="your-gemini-api-key-here"

# Optional: Analytics & Monitoring
NEXT_PUBLIC_ANALYTICS_ID="your-analytics-id"

Tip

Get your Gemini API key from Google AI Studio - it's free to start!

Development Mode

# Start with hot reload
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run linting
npm run lint

🛳 Deployment

`A` Vercel Deployment

One-Click Deploy:

Manual Deployment:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

`B` Docker Deployment

# Build Docker image
docker build -t chinese-redefine .

# Run container
docker run -p 3000:3000 -e GEMINI_API_KEY=your-key chinese-redefine

`C` Environment Variables

Variable	Description	Required	Example
`GEMINI_API_KEY`	Google Gemini API key	✅	`AIzaSyC...`
`NODE_ENV`	Environment mode	🔶	`production`

Note

✅ Required, 🔶 Optional

📖 Usage Guide

Basic Usage

Getting Started:

Visit the Application at chinese-redefine.chanmeng-dev.workers.dev
Enter Chinese Word in the input field (up to 10 characters)
Click Generate to get AI-powered interpretation
Preview & Download your custom SVG card

Input Requirements:

Must contain Chinese characters (汉字)
Maximum 10 characters
No special symbols or HTML tags
Rate limit: 5 requests per minute

API Reference

Generate Interpretation:

POST /api/generate
Content-Type: application/json

{
  "word": "智慧"
}

# Response
{
  "result": "现代社会中，智慧不再是知识的积累，而是在信息爆炸时代中保持清醒头脑，懂得什么时候说'我不知道'的勇气。",
  "remaining": 4
}

Rate Limiting:

🔄 5 requests/minute per IP address
📊 Rate limit headers included in responses
⏰ 60-second reset window

🔌 Integrations

Service	Purpose	Status	Documentation
Google Gemini	AI text generation	✅ Active	Gemini API
Vercel	Hosting & deployment	✅ Active	Vercel Docs
Framer Motion	Animations	✅ Active	Motion Docs
Tailwind CSS	Styling framework	✅ Active	Tailwind Docs

⌨️ Development

Local Development

Setup Development Environment:

# Clone repository
git clone https://github.com/ChanMeng666/chinese-redefine.git
cd chinese-redefine

# Install dependencies
pnpm install

# Set up environment
cp .env.example .env.local

# Start development server
pnpm dev

Development Scripts:

# Development
pnpm dev          # Start dev server with hot reload
pnpm build        # Production build
pnpm start        # Start production server
pnpm lint         # ESLint code checking

Adding Features

Feature Development Workflow:

Create Feature Branch:

git checkout -b feature/amazing-feature

Development Guidelines:

✅ Follow TypeScript best practices
✅ Add proper error handling
✅ Include responsive design
✅ Test with Chinese characters
✅ Follow accessibility guidelines

Component Structure:

// components/NewFeature.tsx
'use client';

import React from 'react';
import { motion } from 'framer-motion';

const NewFeature = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    >
      {/* Your feature content */}
    </motion.div>
  );
};

export default NewFeature;

Testing

Manual Testing:

✅ Test with various Chinese words
✅ Verify rate limiting functionality
✅ Check SVG export quality
✅ Test responsive design on mobile
✅ Validate error handling

🤝 Contributing

We welcome contributions! Here's how you can help improve Chinese Redefine:

Contributing Process:

Fork & Clone:

git clone https://github.com/your-username/chinese-redefine.git
cd chinese-redefine

Create Branch:

git checkout -b feature/your-feature-name

Make Changes:

Follow our coding standards
Test your changes thoroughly
Update documentation as needed

Submit PR:

Provide clear description
Include screenshots for UI changes
Reference related issues

Contribution Areas:

🐛 Bug Reports: Help us identify and fix issues
💡 Feature Requests: Suggest new functionality
📚 Documentation: Improve our guides and examples
🌐 Localization: Add support for more languages

❤️ Sponsor

Support Chinese Redefine development and help us continue building amazing tools for language exploration!

Sponsor Benefits:

🎯 Priority Support: Get help faster
🚀 Early Access: Try new features first
💬 Direct Communication: Connect with maintainers
🏷️ Recognition: Credits in documentation

📄 License

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

Open Source Benefits:

✅ Commercial use allowed
✅ Modification allowed
✅ Distribution allowed
✅ Private use allowed

👥 Author

_{Chan Meng}
Creator & Lead Developer

Chan Meng

LinkedIn: chanmeng666
GitHub: ChanMeng666
Email: [email protected]
Website: chanmeng.org

🚀 Redefining Chinese Language Interpretation 🌟
Bridging traditional wisdom with modern perspectives

⭐ Star us on GitHub • 📖 Read the Documentation • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute

Made with ❤️ by Chan Meng

Name		Name	Last commit message	Last commit date
Latest commit History 60 Commits
.github		.github
.idea		.idea
app		app
components		components
docs/superpowers		docs/superpowers
drizzle		drizzle
lib		lib
public		public
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
components.json		components.json
drizzle.config.ts		drizzle.config.ts
middleware.ts		middleware.ts
next.config.ts		next.config.ts
open-next.config.ts		open-next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
wrangler.toml		wrangler.toml

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

🚀 Chinese Redefine

汉语新解 - Modern Chinese Word Redefinition

TOC

🌟 Introduction

📸 Screenshots

✨ Key Features

1 AI-Powered Interpretation

2 Beautiful SVG Export

* Additional Features

🛠️ Tech Stack

🏗️ Architecture

System Architecture

Component Structure

⚡️ Performance

🚀 Getting Started

Prerequisites

Quick Installation

Environment Setup

Development Mode

🛳 Deployment

A Vercel Deployment

B Docker Deployment

C Environment Variables

📖 Usage Guide

Basic Usage

API Reference

🔌 Integrations

⌨️ Development

Local Development

Adding Features

Testing

🤝 Contributing

❤️ Sponsor

📄 License

👥 Author

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

`1` AI-Powered Interpretation

`2` Beautiful SVG Export

`*` Additional Features

`A` Vercel Deployment

`B` Docker Deployment

`C` Environment Variables

Packages