Contexte Capture d'Écran avec OCR : Comment IntlPull Bat Lokalise sur la Localisation Visuelle

Le Problème : Les Traducteurs Manquent de Contexte

L'un des plus grands défis de la localisation est le contexte. Les traducteurs voient souvent une chaîne comme "Envoyer" sans savoir :

• Est-ce un bouton ou une étiquette ?
• Est-ce en haut ou en bas de l'écran ?
• Quelle est l'interface utilisateur environnante ?
• Combien d'espace est disponible ?

Résultat : Des traductions génériques qui ne correspondent pas à l'interface utilisateur, des problèmes de troncature, et des allers-retours sans fin entre traducteurs et développeurs.

La Solution : Contexte par Capture d'Écran

Le contexte par capture d'écran résout ce problème en vous permettant de :

1. Télécharger des captures d'écran de votre application ou site web
2. Étiqueter les clés de traduction avec des boîtes englobantes montrant exactement où elles apparaissent
3. Auto-détecter le texte en utilisant l'OCR pour accélérer le processus d'étiquetage

Quand les traducteurs travaillent sur une clé, ils voient le contexte visuel immédiatement.

IntlPull vs Lokalise : Le Duel des Captures d'Écran

IntlPull et Lokalise offrent tous deux des fonctionnalités de capture d'écran, mais l'implémentation diffère considérablement.

Comparaison des Fonctionnalités

Comparaison des Coûts

C'est là que ça devient intéressant.

Tarification OCR de Lokalise :

• Appels API Cloud Vision : 0,005-0,02 $ par requête
• Pour 1 000 captures d'écran avec OCR mensuel : 60-240 $/an en frais OCR seuls
• Plus la fonctionnalité de capture d'écran elle-même peut être un module payant

Tarification OCR d'IntlPull :

• Tesseract auto-hébergé : 0 $ par requête
• Pas de frais supplémentaires
• Inclus dans tous les plans payants

L'Avantage de l'Auto-Hébergement

IntlPull utilise Tesseract OCR, le moteur OCR open-source standard de l'industrie, fonctionnant sur votre propre infrastructure :

TerminalCopy
1# Tesseract est installé sur le serveur
2tesseract --version
3# tesseract 5.3.0
4
5# Pas d'appels API cloud
6# Pas de frais par requête
7# Pas de données quittant votre infrastructure

Avantages :

• Confidentialité : Les données de capture d'écran ne quittent jamais votre infrastructure
• Vitesse : Pas de latence réseau vers les API cloud
• Coût : Coût marginal zéro par opération OCR
• Fiabilité : Pas de pannes d'API tierce

Comment Fonctionne l'Auto-Détection

Le pipeline OCR d'IntlPull est étonnamment sophistiqué :

Étape 1 : Détection de Texte

Tesseract scanne la capture d'écran et extrait les régions de texte avec des boîtes englobantes :

JSONCopy
1{
2  "detected_texts": [
3    {
4      "text": "Submit Order",
5      "x": 350,
6      "y": 480,
7      "width": 120,
8      "height": 40,
9      "confidence": 0.95
10    },
11    {
12      "text": "Cancel",
13      "x": 200,
14      "y": 480,
15      "width": 80,
16      "height": 40,
17      "confidence": 0.92
18    }
19  ]
20}

Étape 2 : Correspondance de Clé Floue

Le texte détecté est comparé à vos clés de traduction en utilisant plusieurs stratégies :

1. Correspondance exacte (score : 1.0)
2. Correspondance de sous-chaîne (score : 0.9 x ratio)
3. Distance de Levenshtein (similitude normalisée)

Cela gère les erreurs OCR courantes comme :

• "Submit" vs "Submitt" (tolérance aux fautes de frappe)
• "SUBMIT" vs "Submit" (insensible à la casse)
• "Submit Order" vs "Submit" (correspondance partielle)

Étape 3 : Étiquettes Suggérées

L'API retourne des suggestions de mappage clé-vers-région :

JSONCopy
1{
2  "suggested_tags": [
3    {
4      "key_id": "abc123",
5      "key_name": "buttons.submit",
6      "x": 350,
7      "y": 480,
8      "width": 120,
9      "height": 40,
10      "confidence": 0.95,
11      "match_score": 1.0
12    }
13  ]
14}

Étape 4 : Révision Humaine

Les traducteurs révisent et confirment les suggestions avant qu'elles ne soient appliquées. Cela empêche les faux positifs et assure la précision.

Flux de Travail Réel

Pour les Développeurs

TerminalCopy
1# Télécharger les captures d'écran depuis CI/CD
2for screenshot in screenshots/*.png; do
3  curl -X POST \
4    -H "X-API-Key: ip_live_xxx" \
5    -F "file=@$screenshot" \
6    -F "tags=v2.5.0,checkout-flow" \
7    https://api.intlpull.com/api/v1/projects/PROJECT_ID/screenshots
8done

Pour les Chefs de Projet

1. Naviguer vers l'onglet Captures d'écran dans le tableau de bord
2. Cliquer sur "Auto-Détecter" sur chaque capture d'écran
3. Réviser les étiquettes suggérées et confirmer
4. Les traducteurs voient maintenant le contexte visuel pour toutes les clés étiquetées

Pour les Traducteurs

Quand ils traduisent "buttons.submit", ils voient :

• Le bouton réel dans l'interface utilisateur
• Le contexte environnant (ce qui est au-dessus/en dessous)
• L'espace disponible pour la traduction
• Plusieurs captures d'écran si la clé apparaît à différents endroits

Benchmarks de Performance

Nous avons testé les temps de traitement OCR sur un serveur typique :

Pour la plupart des captures d'écran (écrans mobiles, pages web), le traitement se termine en moins de 2 secondes.

Comparaison : L'Approche de Lokalise

Lokalise utilise une approche basée sur le cloud :

Capture d'écran -> API Cloud -> Détection Texte -> Réponse
               |
         Latence réseau + coûts API

Inconvénients :

• Coûts par requête qui s'accumulent
• Latence réseau pour chaque opération
• Dépendance à la disponibilité d'API tierce
• Données de capture d'écran envoyées à des serveurs externes

Configurer les Captures d'Écran dans IntlPull

Prérequis

Pour les déploiements auto-hébergés, installez Tesseract :

TerminalCopy
1# macOS
2brew install tesseract
3
4# Ubuntu/Debian
5apt-get install tesseract-ocr
6
7# Docker
8FROM alpine:3.19
9RUN apk add tesseract-ocr

Utilisation API

Télécharger une capture d'écran :

TerminalCopy
1curl -X POST \
2  -H "X-API-Key: YOUR_KEY" \
3  -F "file=@screenshot.png" \
4  -F "name=Checkout Page" \
5  -F "tags=checkout,mobile" \
6  https://api.intlpull.com/api/v1/projects/{projectId}/screenshots

Déclencher l'auto-détection :

TerminalCopy
1curl -X POST \
2  -H "X-API-Key: YOUR_KEY" \
3  -H "Content-Type: application/json" \
4  -d '{"min_confidence": 0.7}' \
5  https://api.intlpull.com/api/v1/projects/{projectId}/screenshots/{screenshotId}/auto-detect

Créer par lot des étiquettes de clé depuis les résultats OCR :

TerminalCopy
1curl -X POST \
2  -H "X-API-Key: YOUR_KEY" \
3  -H "Content-Type: application/json" \
4  -d '{
5    "key_maps": [
6      {"key_id": "abc123", "x": 100, "y": 200, "width": 80, "height": 30, "auto_detected": true},
7      {"key_id": "def456", "x": 300, "y": 200, "width": 60, "height": 30, "auto_detected": true}
8    ]
9  }' \
10  https://api.intlpull.com/api/v1/projects/{projectId}/screenshots/{screenshotId}/keys/bulk

Intégration SDK

Le SDK TypeScript rend cela encore plus facile :

TypeScriptCopy
1import { IntlPull } from '@intlpullhq/sdk';
2
3const client = new IntlPull({ apiKey: 'ip_live_xxx' });
4
5// Télécharger et auto-étiqueter en un flux
6async function processScreenshot(filePath: string) {
7  // 1. Télécharger
8  const screenshot = await client.screenshots.upload(projectId, {
9    file: fs.readFileSync(filePath),
10    name: path.basename(filePath),
11    tags: ['v2.5.0'],
12  });
13
14  // 2. Auto-détecter
15  const detection = await client.screenshots.autoDetect(
16    projectId,
17    screenshot.id,
18    { minConfidence: 0.7 }
19  );
20
21  // 3. Appliquer les correspondances haute confiance
22  const highConfidence = detection.suggestedTags.filter(t => t.match_score >= 0.9);
23
24  if (highConfidence.length > 0) {
25    await client.screenshots.bulkCreateKeyMaps(projectId, screenshot.id, {
26      keyMaps: highConfidence.map(t => ({
27        keyId: t.key_id,
28        x: t.x,
29        y: t.y,
30        width: t.width,
31        height: t.height,
32        autoDetected: true,
33        confidence: t.match_score,
34      })),
35    });
36  }
37
38  console.log('Tagged ' + highConfidence.length + ' keys automatically');
39}

Meilleures Pratiques

1. Capturer des Images Représentatives

• Inclure tous les états (vide, chargement, erreur, succès)
• Capturer différentes tailles d'écran (mobile, tablette, bureau)
• Étiqueter les numéros de version dans les métadonnées pour le suivi

2. Utiliser des Étiquettes pour l'Organisation

TerminalCopy
1# Étiqueter par zone de fonctionnalité
2-F "tags=checkout,payment"
3
4# Étiqueter par version
5-F "tags=v2.5.0,sprint-42"
6
7# Étiqueter par plateforme
8-F "tags=ios,dark-mode"

3. Définir des Seuils de Confiance Appropriés

• 0.9+ : Auto-appliquer sans révision (haute confiance)
• 0.7-0.9 : Suggérer mais exiger confirmation
• <0.7 : Ne pas suggérer (trop incertain)

4. Réviser les Résultats OCR

L'OCR n'est pas parfaite. Problèmes courants :

• Caractères similaires (O vs 0, l vs I)
• Polices stylisées
• Texte à faible contraste

Ayez toujours un humain pour réviser les étiquettes automatisées.

Migration depuis Lokalise

Si vous passez de Lokalise :

TerminalCopy
1# Exporter les captures d'écran depuis Lokalise (si disponible via API)
2# Puis télécharger par lot sur IntlPull
3
4npx @intlpullhq/cli migrate --screenshots --from lokalise

Ce qui transfère :

• Images de capture d'écran
• Mappages clé-vers-capture existants
• Étiquettes et métadonnées

Conclusion : Pourquoi IntlPull Gagne

Pour les équipes qui :

• Traitent beaucoup de captures d'écran
• Se soucient de la confidentialité des données
• Veulent des coûts prévisibles
• Ont besoin d'automatisation API

L'approche Tesseract auto-hébergée d'IntlPull est le gagnant clair.

Prêt à donner aux traducteurs le contexte dont ils ont besoin ? Commencez votre essai gratuit ou lisez la documentation complète.