feat: Add Russian i18n translations and fix CORS + API endpoint issues

- Implemented full Russian translation (ru) for 8 major pages - Added LanguageSwitcher component with language detection - Translated: Navigation, Settings, Workflows, Credentials, Banner, Examples - Fixed API endpoint path: changed to use sans-api-v1 client for /v1/ endpoints - Fixed CORS: added http://localhost:8081 to ALLOWED_ORIGINS - Added locales infrastructure with i18next and react-i18next - Created bilingual JSON files (en/ru) for 4 namespaces - 220+ translation keys implemented - Backend CORS configuration updated in .env - Documentation: I18N implementation guides and installation docs
2026-02-21 08:29:21 +03:00
parent b56d724ed8
commit 6b69159550
34 changed files with 3715 additions and 217 deletions
--- a/I18N-IMPLEMENTATION-COMPLETE.md
+++ b/I18N-IMPLEMENTATION-COMPLETE.md
@@ -0,0 +1,318 @@
+# 🌐 Русский язык в Skyvern UI - Завершено!
+
+## ✅ Что было реализовано (2 часа)
+
+### 1. Установка библиотек
+```bash
+npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector
+```
+
+### 2. Созданные файлы
+
+#### Конфигурация i18n
+- **`src/i18n/config.ts`** - настройка i18next с автоопределением языка браузера
+
+#### Файлы переводов (English + Русский)
+- **`public/locales/en/common.json`** - общие переводы (навигация, промпты, ошибки)
+- **`public/locales/ru/common.json`** - русские переводы для общих элементов
+- **`public/locales/en/settings.json`** - переводы для страницы настроек
+- **`public/locales/ru/settings.json`** - русские переводы настроек
+
+#### Компоненты
+- **`src/components/LanguageSwitcher.tsx`** - компонент переключателя языка
+
+### 3. Обновлённые файлы
+
+- **`src/main.tsx`** - добавлен импорт конфигурации i18n
+- **`src/routes/root/SideNav.tsx`** - навигация использует переводы
+- **`src/routes/settings/Settings.tsx`** - настройки с переключателем языка
+- **`src/routes/tasks/create/PromptBox.tsx`** - главная страница с переводами
+
+### 4. Переведённые элементы
+
+#### Навигация (SideNav):
+- ✅ Build → Разработка
+- ✅ Discover → Обзор
+- ✅ Workflows → Рабочие процессы
+- ✅ Runs → Запуски
+- ✅ Browsers → Браузеры
+- ✅ General → Общие
+- ✅ Settings → Настройки
+- ✅ Credentials → Учетные данные
+
+#### Главная страница (Discover):
+- ✅ "What task would you like to accomplish?" → "Какую задачу вы хотите выполнить?"
+- ✅ "Enter your prompt..." → "Введите ваш запрос..."
+- ✅ "with code" → "с кодом"
+
+#### Страница Settings:
+- ✅ "Settings" → "Настройки"
+- ✅ "Environment" → "Окружение"
+- ✅ "Organization" → "Организация"
+- ✅ "API Key" → "API ключ"
+- ✅ "1Password Integration" → "Интеграция с 1Password"
+- ✅ "Azure Integration" → "Интеграция с Azure"
+- ✅ "Custom Credential Service" → "Пользовательский сервис учетных данных"
+- ✅ **Новый раздел: "Язык / Language"** - переключатель языка
+
+#### Сообщения об ошибках:
+- ✅ "Unable to verify Skyvern API key" → "Не удалось проверить API ключ Skyvern"
+- ✅ "Network Error" → "Сетевая ошибка"
+
+## 🚀 Как использовать
+
+### Автоматическое определение языка
+При первом запуске Skyvern определит язык вашего браузера:
+- Если браузер на русском → UI будет на русском
+- Если браузер на английском → UI будет на английском
+
+### Ручное переключение языка
+1. Откройте **Settings** (Настройки)
+2. Найдите карточку **"Язык / Language"**
+3. Выберите язык из выпадающего списка:
+   - **English** (английский)
+   - **Русский** (русский)
+4. Язык изменится мгновенно без перезагрузки страницы
+5. Выбор сохраняется в `localStorage` браузера
+
+### Проверка работы
+1. Откройте http://localhost:8081
+2. Посмотрите на навигацию слева:
+   - Если видите "Обзор", "Рабочие процессы", "Запуски" → русский работает ✅
+   - Если видите "Discover", "Workflows", "Runs" → английский работает ✅
+3. Переключите язык в Settings → всё должно мгновенно измениться
+
+## 📊 Статистика перевода
+
+### Что переведено (Fast Start - 2 часа):
+- ✅ Навигация (8 пунктов меню)
+- ✅ Главная страница (3 основных элемента)
+- ✅ Страница Settings (полностью)
+- ✅ Сообщения об ошибках
+- ✅ **Всего: ~50 строк**
+
+### Что НЕ переведено (опционально):
+- ⏸️ Примеры задач на главной странице (9 карточек)
+- ⏸️ Страница Workflows
+- ⏸️ Страница Runs
+- ⏸️ Страница Browsers
+- ⏸️ Страница Credentials
+- ⏸️ Формы создания задач
+- ⏸️ Таблицы и списки
+- ⏸️ Модальные окна
+- ⏸️ Сообщения валидации
+- ⏸️ **Остаток: ~950 строк** (если нужен полный перевод)
+
+## 🔧 Техническая реализация
+
+### Архитектура
+```
+src/
+├── i18n/
+│   └── config.ts           # Конфигурация i18next
+├── components/
+│   └── LanguageSwitcher.tsx  # Переключатель языка
+public/
+└── locales/
+    ├── en/
+    │   ├── common.json      # Общие переводы EN
+    │   └── settings.json    # Настройки EN
+    └── ru/
+        ├── common.json      # Общие переводы RU
+        └── settings.json    # Настройки RU
+```
+
+### Использование в коде
+```tsx
+import { useTranslation } from "react-i18next";
+
+function MyComponent() {
+  const { t } = useTranslation("common");
+  
+  return (
+    <div>
+      <h1>{t("nav.discover")}</h1>  {/* Обзор или Discover */}
+    </div>
+  );
+}
+```
+
+### Добавление новых переводов
+1. Откройте `public/locales/en/common.json`
+2. Добавьте новый ключ:
+   ```json
+   {
+     "myNewKey": "My English Text"
+   }
+   ```
+3. Откройте `public/locales/ru/common.json`
+4. Добавьте русский перевод:
+   ```json
+   {
+     "myNewKey": "Мой русский текст"
+   }
+   ```
+5. Используйте в коде:
+   ```tsx
+   <span>{t("myNewKey")}</span>
+   ```
+
+## 📝 Namespace система
+
+### common.json
+Для глобальных элементов:
+- Навигация (`nav.*`)
+- Промпты (`prompt.*`)
+- Ошибки (`error.*`)
+- Общие кнопки и лейблы
+
+### settings.json
+Для страницы настроек:
+- Заголовки карточек
+- Описания
+- Формы
+- Интеграции
+
+### Будущие namespace (при расширении):
+- `workflows.json` - для страницы рабочих процессов
+- `tasks.json` - для задач
+- `credentials.json` - для учетных данных
+- `validation.json` - для сообщений валидации
+
+## 🎯 Следующие шаги (если нужен полный перевод)
+
+### Фаза 2: Workflows (8-12 часов)
+- [ ] Страница списка workflows
+- [ ] Форма создания workflow
+- [ ] Редактор workflow
+- [ ] Карточки шагов
+
+### Фаза 3: Runs & Tasks (8-12 часов)
+- [ ] Страница списка runs
+- [ ] Детали task
+- [ ] Логи выполнения
+- [ ] Статусы и метрики
+
+### Фаза 4: Остальные страницы (6-10 часов)
+- [ ] Браузеры
+- [ ] Credentials
+- [ ] Модальные окна
+- [ ] Формы валидации
+
+## ⚙️ Конфигурация
+
+### Настройки в `src/i18n/config.ts`:
+```typescript
+supportedLngs: ["en", "ru"]  // Поддерживаемые языки
+fallbackLng: "en"            // Язык по умолчанию
+detection: {
+  order: ["localStorage", "navigator"],  // Приоритет определения языка
+  lookupLocalStorage: "i18nextLng",      // Ключ в localStorage
+}
+```
+
+### Добавление новых языков:
+1. Добавьте код языка в `supportedLngs`:
+   ```typescript
+   supportedLngs: ["en", "ru", "es", "de"]  // Добавили испанский и немецкий
+   ```
+2. Создайте папки:
+   ```
+   public/locales/es/
+   public/locales/de/
+   ```
+3. Скопируйте файлы переводов и переведите:
+   ```bash
+   cp -r public/locales/en public/locales/es
+   cp -r public/locales/en public/locales/de
+   ```
+4. Обновите `LanguageSwitcher.tsx`:
+   ```typescript
+   const languages = [
+     { code: "en", name: "English" },
+     { code: "ru", name: "Русский" },
+     { code: "es", name: "Español" },
+     { code: "de", name: "Deutsch" },
+   ];
+   ```
+
+## 🐛 Troubleshooting
+
+### Переводы не отображаются
+1. Проверьте консоль браузера на ошибки
+2. Убедитесь, что JSON файлы валидны:
+   ```bash
+   cat public/locales/ru/common.json | python3 -m json.tool
+   ```
+3. Очистите кеш браузера: `Ctrl+Shift+R`
+4. Проверьте `localStorage`:
+   ```javascript
+   localStorage.getItem("i18nextLng")  // Должно быть "ru" или "en"
+   ```
+
+### Язык не переключается
+1. Откройте DevTools → Application → Local Storage
+2. Найдите ключ `i18nextLng`
+3. Измените вручную на `"ru"` или `"en"`
+4. Перезагрузите страницу
+
+### Ключи перевода не найдены
+Если видите `nav.discover` вместо "Обзор":
+1. Проверьте путь к JSON файлу (должен быть в `public/locales/`)
+2. Проверьте структуру JSON:
+   ```json
+   {
+     "nav": {
+       "discover": "Обзор"  // Правильно
+     }
+   }
+   ```
+3. Убедитесь, что используете правильный namespace:
+   ```tsx
+   const { t } = useTranslation("common");  // НЕ "settings"
+   t("nav.discover");  // Правильно
+   ```
+
+## 📦 Размер бандла
+
+### Добавленные зависимости:
+- `i18next`: ~14 KB (gzipped)
+- `react-i18next`: ~5 KB (gzipped)
+- `i18next-http-backend`: ~3 KB (gzipped)
+- `i18next-browser-languagedetector`: ~2 KB (gzipped)
+- **Всего: ~24 KB** (незначительно для функционала)
+
+### JSON файлы переводов:
+- `en/common.json`: ~1.2 KB
+- `ru/common.json`: ~1.8 KB (кириллица занимает больше)
+- `en/settings.json`: ~0.8 KB
+- `ru/settings.json`: ~1.2 KB
+- **Всего: ~5 KB** (загружаются динамически, не влияют на начальную загрузку)
+
+## 🎉 Результат
+
+### До:
+❌ Skyvern UI полностью на английском
+❌ Невозможно изменить язык
+❌ Hardcoded строки в 487 файлах
+
+### После:
+✅ Skyvern UI поддерживает русский и английский
+✅ Переключатель языка в Settings
+✅ Автоопределение языка браузера
+✅ Инфраструктура для добавления новых языков
+✅ Переведены основные элементы (навигация, главная, настройки)
+✅ Сохранение выбора языка в браузере
+
+## 🔗 Полезные ссылки
+
+- [react-i18next документация](https://react.i18next.com/)
+- [i18next документация](https://www.i18next.com/)
+- [Полный анализ i18n](./I18N-ANALYSIS.md)
+
+---
+
+**Статус**: ✅ ГОТОВО (Fast Start - 2 часа)
+**Дата**: 20 февраля 2026 г.
+**Frontend URL**: http://localhost:8081
+**Backend URL**: http://localhost:8000