IDML Translator

An MVP application for automating the translation of Adobe InDesign documents (.idml).

Features

• Upload .idml files via drag & drop
• View document text segments
• Translate segments into multiple languages (English, Russian, German, French, Spanish, Polish)
• Test modes: Reverse Text, Lorem Ipsum
• Export the translated document

Technologies

Backend:

• NestJS (TypeScript)
• Clean Architecture (Controllers → Use Cases → Domain → Infrastructure)
• OpenRouter API for AI-powered translations

Frontend:

• React 18 + TypeScript
• Vite
• Axios

Requirements

• Node.js 18+
• npm 9+
• OpenRouter API key (for AI translations)

Quick Start

1. Clone the repository and install dependencies

# Install dependencies for all parts of the project
npm install
cd backend && npm install
cd ../frontend && npm install
cd ..

2. Environment setup

Create the file backend/.env with your API key:

# Copy the example
cp backend/.env.example backend/.env

# Edit the file and add your key
# OPENROUTER_API_KEY=sk-or-v1-your-key-here

You can obtain an API key at openrouter.ai/keys

3. Run the application

# Run backend and frontend simultaneously
npm run dev

Or run them separately:

# Terminal 1 - Backend (port 3000)
cd backend
npm run start:dev

# Terminal 2 - Frontend (port 5173)
cd frontend
npm run dev

4. Open the application

Open in your browser: http://localhost:5173

Usage

1. Drag and drop a .idml file into the upload area or click to select a file
2. After uploading, a list of text segments will appear
3. Select the target translation language from the dropdown
4. Click "Translate All" to translate all segments
5. Once translation is complete, click "Download" to download the translated file

API Endpoints

Method	Endpoint	Description
POST	/api/documents/upload	Upload a .idml file
POST	/api/documents/translate	Translate text segments
GET	/api/documents/download/:id	Download the translated file

Project Structure

├── backend/
│   └── src/
│       ├── controllers/      # REST API endpoints
│       ├── application/      # Use cases, services, ports
│       ├── domain/           # Entities, business logic
│       ├── infrastructure/   # IDML parser/exporter, repository
│       └── filters/          # Exception handlers
│
├── frontend/
│   └── src/
│       ├── components/       # React components
│       ├── services/         # API client
│       └── types/            # TypeScript types
│
└── package.json              # Root scripts (npm run dev)

Translation Modes

Mode	Description
English, Russian, etc.	AI translation via OpenRouter
Reverse Text	Reverses the text (for testing purposes)
Lorem Ipsum	Replaces text with Lorem Ipsum