@jjlmoya/utils-social 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jjlmoya/utils-social",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/tool/socialImageResizer/i18n/es.ts

@@ -115,31 +115,35 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     {
       type: 'grid',
       columns: [
-        { title: 'Instagram — Post Cuadrado', body: '1080 × 1080 px · Ratio 1:1' },
-        { title: 'Instagram — Post Vertical', body: '1080 × 1350 px · Ratio 4:5' },
-        { title: 'TikTok / Reels — Vertical', body: '1080 × 1920 px · Ratio 9:16' },
-        { title: 'YouTube — Miniatura', body: '1280 × 720 px · Ratio 16:9' },
-        { title: 'YouTube — Banner de Canal', body: '2560 × 1440 px · Ratio 16:9' },
-        { title: 'X (Twitter) — Post Estándar', body: '1200 × 675 px · Ratio 16:9' },
-        { title: 'LinkedIn — Portada de Perfil', body: '1584 × 396 px · Ratio 4:1' },
+        { type: 'card', title: 'Instagram — Post Cuadrado', body: '1080 × 1080 px · Ratio 1:1' },
+        { type: 'card', title: 'Instagram — Post Vertical', body: '1080 × 1350 px · Ratio 4:5' },
+        { type: 'card', title: 'TikTok / Reels — Vertical', body: '1080 × 1920 px · Ratio 9:16' },
+        { type: 'card', title: 'YouTube — Miniatura', body: '1280 × 720 px · Ratio 16:9' },
+        { type: 'card', title: 'YouTube — Banner de Canal', body: '2560 × 1440 px · Ratio 16:9' },
+        { type: 'card', title: 'X (Twitter) — Post Estándar', body: '1200 × 675 px · Ratio 16:9' },
+        { type: 'card', title: 'LinkedIn — Portada de Perfil', body: '1584 × 396 px · Ratio 4:1' },
       ],
     },
     {
       type: 'grid',
       columns: [
         {
+          type: 'card',
           title: 'Instagram',
           body: 'El formato 1:1 sigue siendo un clásico, pero el 4:5 (Vertical) ocupa más espacio en pantalla y genera hasta un 30% más de interacción en el feed de noticias.',
         },
         {
+          type: 'card',
           title: 'Short Form Content',
           body: 'Para TikTok y Reels, el estándar es 9:16. Este formato inmersivo requiere que el centro de atención esté perfectamente alineado para evitar ser tapado por la UI.',
         },
         {
+          type: 'card',
           title: 'Visual Engagement',
           body: 'Desde miniaturas hasta banners, cada asset tiene un peso específico en el clic. El recorte preciso garantiza que los textos y elementos clave sean siempre legibles.',
         },
         {
+          type: 'card',
           title: 'Branding Profesional',
           body: 'En redes profesionales como LinkedIn, la nitidez es autoridad. Los encabezados requieren ratios específicos para no aparecer pixelados en pantallas de alta densidad.',
         },

package/src/tool/tinderPhotoOptimizer/component.astro

@@ -11,7 +11,35 @@ const { ui } = Astro.props;
 const t = (ui ?? {}) as TinderPhotoOptimizerUI;
 ---
 
-<div class="tfo-root">
+<div
+  class="tfo-root"
+  data-status-optimal={t.statusOptimal}
+  data-status-incorrect={t.statusIncorrect}
+  data-status-high={t.statusHigh}
+  data-status-medium={t.statusMedium}
+  data-status-low={t.statusLow}
+  data-status-positive={t.statusPositive}
+  data-status-neutral={t.statusNeutral}
+  data-alert-excellent={t.alertExcellent}
+  data-alert-empty-spaces={t.alertEmptySpaces}
+  data-alert-almost-invisible={t.alertAlmostInvisible}
+  data-alert-too-close={t.alertTooClose}
+  data-alert-perfect-size={t.alertPerfectSize}
+  data-alert-impactful-look={t.alertImpactfulLook}
+  data-alert-eye-line-move-up={t.alertEyeLineMoveUp}
+  data-alert-eye-line-move-down={t.alertEyeLineMoveDown}
+  data-alert-tilted-head={t.alertTiltedHead}
+  data-alert-smile-detected={t.alertSmileDetected}
+  data-alert-severe-expression={t.alertSevereExpression}
+  data-alert-obstructed-top={t.alertObstructedTop}
+  data-alert-obstructed-bottom={t.alertObstructedBottom}
+  data-alert-low-light={t.alertLowLight}
+  data-alert-cut-off={t.alertCutOff}
+  data-alert-pro-tip={t.alertProTip}
+  data-canvas-face-detected={t.canvasFaceDetected}
+  data-loader-models={t.loaderModels}
+  data-loader-analyzing={t.loaderAnalyzing}
+>
   <div class="tfo-container" id="tfo-optimizer">
     <input type="file" id="image-input" accept=".jpg,.jpeg,.png,.webp,.gif" style="display: none;" />
 
@@ -20,7 +48,7 @@ const t = (ui ?? {}) as TinderPhotoOptimizerUI;
         <div id="ai-loader" class="tfo-ai-loader tfo-hidden">
           <div class="tfo-loader-content">
             <div class="tfo-scanner-bar"></div>
-            <p id="ai-loader-text">{t.loaderAnalyzing}</p>
+            <p id="ai-loader-text">{t.loaderModels}</p>
           </div>
         </div>
 
@@ -436,9 +464,9 @@ const t = (ui ?? {}) as TinderPhotoOptimizerUI;
       const targetImg = img || this.engine.image;
       if (!targetImg) return;
       this.aiLoader.classList.remove('tfo-hidden');
-      this.aiLoaderText.textContent = 'Cargando modelos de visión...';
+      this.aiLoaderText.textContent = this.getTranslation('loaderModels') || 'Loading models...';
       await this.engine.loadModels();
-      this.aiLoaderText.textContent = 'Analizando composición...';
+      this.aiLoaderText.textContent = this.getTranslation('loaderAnalyzing') || 'Analyzing...';
       const face = await this.engine.detect(targetImg);
       if (face) {
         this.autofocusBtn.style.display = 'flex';
@@ -451,21 +479,26 @@ const t = (ui ?? {}) as TinderPhotoOptimizerUI;
 
     private onStart(e: MouseEvent | TouchEvent) {
       if (e instanceof TouchEvent) e.preventDefault();
-      const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
-      const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+      const { x: cx, y: cy } = this.getClientPos(e);
       const rect = this.canvas.getBoundingClientRect();
-      const x = (clientX - rect.left) * (this.canvas.width / rect.width);
-      const y = (clientY - rect.top) * (this.canvas.height / rect.height);
+      const x = (cx - rect.left) * (this.canvas.width / rect.width);
+      const y = (cy - rect.top) * (this.canvas.height / rect.height);
+      this.initInteraction(x, y, cx, cy);
+    }
+
+    private initInteraction(x: number, y: number, cx: number, cy: number) {
       if (this.isSelecting) {
         this.selectionRect = { x, y, w: 0, h: 0 };
       } else {
         this.isDragging = true;
-        this.lastPos = { x: clientX, y: clientY };
+        this.lastPos = { x: cx, y: cy };
       }
     }
 
     private getClientPos(e: MouseEvent | TouchEvent) {
-      const src = e instanceof MouseEvent ? e : e.touches[0];
+      const touch = e instanceof TouchEvent ? e.touches[0] : null;
+      const src = e instanceof MouseEvent ? e : touch;
+      if (!src) return { x: 0, y: 0 };
       return { x: src.clientX, y: src.clientY };
     }
 
@@ -535,31 +568,46 @@ const t = (ui ?? {}) as TinderPhotoOptimizerUI;
       }
     }
 
+    private getTranslation(key: string): string {
+      const root = this.canvas.closest('.tfo-root') as HTMLElement | null;
+      const dataset = root?.dataset as Record<string, string | undefined>;
+      return dataset?.[key] || key;
+    }
+
     private updateMetrics() {
       const { metrics } = this.engine.getAnalysis();
-      const mFace = document.getElementById('metric-face-size');
-      const mEye = document.getElementById('metric-eye-line');
-      const mCoverage = document.getElementById('metric-coverage');
-      const mMood = document.getElementById('metric-mood');
-      const mQuality = document.getElementById('metric-quality');
-      if (mFace) mFace.textContent = metrics.faceSize;
-      if (mEye) mEye.textContent = metrics.eyeLine;
-      if (mCoverage) mCoverage.textContent = metrics.coverage;
-      if (mMood) mMood.textContent = metrics.mood;
-      if (mQuality) mQuality.textContent = metrics.quality;
+      const fields = [
+        { k: 'faceSize', id: 'metric-face-size' },
+        { k: 'eyeLine', id: 'metric-eye-line' },
+        { k: 'coverage', id: 'metric-coverage' },
+        { k: 'mood', id: 'metric-mood' },
+        { k: 'quality', id: 'metric-quality' }
+      ];
+      fields.forEach(f => {
+        const el = document.getElementById(f.id);
+        if (!el) return;
+        const v = metrics[f.k] as string;
+        if (f.k === 'faceSize' || (f.k === 'coverage' && v !== 'statusIncorrect')) el.textContent = v;
+        else el.textContent = this.getTranslation(v || '');
+      });
     }
 
-    private renderAlerts(alerts: { type: string; text: string }[], stacks: Record<string, HTMLElement | null>) {
+    private renderAlerts(alerts: { type: string; textKey: string }[], stacks: Record<string, HTMLElement | null>) {
       Object.values(stacks).forEach((s) => { if (s) s.innerHTML = ''; });
       if (alerts.length === 0) {
-        if (stacks.success) stacks.success.innerHTML = '<div class="tfo-alert tfo-alert--success">Composición técnica excelente.</div>';
+        if (stacks.success) {
+          const div = document.createElement('div');
+          div.className = 'tfo-alert tfo-alert--success';
+          div.textContent = this.getTranslation('alertExcellent');
+          stacks.success.appendChild(div);
+        }
       } else {
         alerts.forEach((a) => {
           const stack = stacks[a.type];
           if (stack) {
             const div = document.createElement('div');
             div.className = `tfo-alert tfo-alert--${a.type}`;
-            div.textContent = a.text;
+            div.textContent = this.getTranslation(a.textKey as string);
             stack.appendChild(div);
           }
         });
@@ -579,12 +627,12 @@ const t = (ui ?? {}) as TinderPhotoOptimizerUI;
         warning: document.getElementById('stack-warning'),
         error: document.getElementById('stack-error'),
       };
-      this.renderAlerts(alerts, stacks);
+      this.renderAlerts(alerts as { type: string; textKey: string }[], stacks);
     }
 
     draw(forceShowFaceBox?: boolean) {
       const showFaceBox = forceShowFaceBox !== undefined ? forceShowFaceBox : this.toggleFaceBoxSwitch.checked;
-      this.engine.draw(showFaceBox);
+      this.engine.draw(showFaceBox, this.getTranslation('canvasFaceDetected'));
       if (this.isSelecting && this.selectionRect.w !== 0) {
         const ctx = this.canvas.getContext('2d')!;
         ctx.strokeStyle = '#FD297B';

package/src/tool/tinderPhotoOptimizer/i18n/en.ts

@@ -1,4 +1,4 @@
-import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TinderPhotoOptimizerUI } from '../ui';
 
@@ -59,7 +59,7 @@ const faqSchema: WithContext<FAQPage> = {
   })),
 };
 
-const howToSchema: WithContext<HowToThing> = {
+const howToSchema: WithContext<HowTo> = {
   '@context': 'https://schema.org',
   '@type': 'HowTo',
   name: title,
@@ -244,5 +244,32 @@ export const content: ToolLocaleContent<TinderPhotoOptimizerUI> = {
     simulatorJob: 'Your Profession',
     simulatorCity: 'Lives in New York',
     simulatorDistance: '5 km away',
+
+    statusOptimal: 'OPTIMAL',
+    statusIncorrect: 'INCORRECT',
+    statusHigh: 'HIGH',
+    statusMedium: 'MEDIUM',
+    statusLow: 'LOW',
+    statusPositive: 'POSITIVE',
+    statusNeutral: 'NEUTRAL',
+
+    alertExcellent: 'Excellent technical composition.',
+    alertEmptySpaces: 'EMPTY SPACES: The image does not cover the entire frame. Adjust zoom or position.',
+    alertAlmostInvisible: 'ALMOST INVISIBLE: You are too far away. Zoom in until your face occupies at least a third of the screen.',
+    alertTooClose: 'TOO CLOSE: Extreme close-ups can appear aggressive.',
+    alertPerfectSize: 'PERFECT SIZE: Your face has the ideal ratio to convey confidence.',
+    alertImpactfulLook: 'IMPACTFUL LOOK: Your eyes are on the maximum attention line.',
+    alertEyeLineMoveUp: 'EYE LINE: For a professional frame, move your face up slightly to the top line.',
+    alertEyeLineMoveDown: 'EYE LINE: For a professional frame, move your face down slightly to the top line.',
+    alertTiltedHead: 'TILTED HEAD: A posture that is too tilted can convey instability.',
+    alertSmileDetected: 'SMILE DETECTED: Smiles significantly increase the match rate.',
+    alertSevereExpression: 'SEVERE EXPRESSION: Try using a photo with a friendlier gesture.',
+    alertObstructedTop: 'OBSTRUCTED: The progress bar covers your face.',
+    alertObstructedBottom: 'OBSTRUCTED: The information block covers your face.',
+    alertLowLight: 'POOR LIGHTING: The AI has difficulty seeing you. Look for a photo with better light.',
+    alertCutOff: 'CUT OFF: The face goes outside the vertical frame.',
+    alertProTip: 'PRO TIP: If it is a selfie, use Zoom (1.2x) to avoid lens distortions.',
+
+    canvasFaceDetected: 'Face detected',
   },
 };

package/src/tool/tinderPhotoOptimizer/i18n/es.ts

@@ -1,4 +1,4 @@
-import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TinderPhotoOptimizerUI } from '../ui';
 
@@ -59,7 +59,7 @@ const faqSchema: WithContext<FAQPage> = {
   })),
 };
 
-const howToSchema: WithContext<HowToThing> = {
+const howToSchema: WithContext<HowTo> = {
   '@context': 'https://schema.org',
   '@type': 'HowTo',
   name: title,
@@ -244,5 +244,32 @@ export const content: ToolLocaleContent<TinderPhotoOptimizerUI> = {
     simulatorJob: 'Tu Profesión',
     simulatorCity: 'Vive en España',
     simulatorDistance: 'A 5 km de ti',
+
+    statusOptimal: 'ÓPTIMA',
+    statusIncorrect: 'INCORRECTA',
+    statusHigh: 'ALTA',
+    statusMedium: 'MEDIA',
+    statusLow: 'BAJA',
+    statusPositive: 'POSITIVO',
+    statusNeutral: 'NEUTRAL',
+
+    alertExcellent: 'Composición técnica excelente.',
+    alertEmptySpaces: 'ESPACIOS VACÍOS: La imagen no cubre todo el encuadre. Ajusta el zoom o la posición.',
+    alertAlmostInvisible: 'CASI INVISIBLE: Estás muy lejos. Haz zoom hasta que tu cara ocupe al menos un tercio de la pantalla.',
+    alertTooClose: 'DEMASIADO CERCA: Los primeros planos extremos pueden resultar agresivos.',
+    alertPerfectSize: 'TAMAÑO PERFECTO: Tu rostro tiene el ratio ideal para transmitir confianza.',
+    alertImpactfulLook: 'MIRADA IMPACTANTE: Tus ojos están en la línea de atención máxima.',
+    alertEyeLineMoveUp: 'LÍNEA DE OJOS: Para un encuadre profesional, sube un poco el rostro hasta la línea superior.',
+    alertEyeLineMoveDown: 'LÍNEA DE OJOS: Para un encuadre profesional, baja un poco el rostro hasta la línea superior.',
+    alertTiltedHead: 'CABEZA INCLINADA: Una postura demasiado torcida puede transmitir inestabilidad.',
+    alertSmileDetected: 'SONRISA DETECTADA: Las sonrisas aumentan la tasa de match significativamente.',
+    alertSevereExpression: 'EXPRESIÓN SEVERA: Intenta usar una foto con un gesto más amable.',
+    alertObstructedTop: 'OBSTRUIDO: La barra de progreso tapa tu rostro.',
+    alertObstructedBottom: 'OBSTRUIDO: El bloque de información tapa tu cara.',
+    alertLowLight: 'ILUMINACIÓN DEFICIENTE: La IA tiene dificultades para verte. Busca una foto con mejor luz.',
+    alertCutOff: 'CORTADO: El rostro se sale del encuadre vertical.',
+    alertProTip: 'CONSEJO PRO: Si es una selfie, usa el Zoom (1.2x) para evitar distorsiones de lente.',
+
+    canvasFaceDetected: 'Cara detectada',
   },
 };

package/src/tool/tinderPhotoOptimizer/i18n/fr.ts

@@ -1,4 +1,4 @@
-import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TinderPhotoOptimizerUI } from '../ui';
 
@@ -59,7 +59,7 @@ const faqSchema: WithContext<FAQPage> = {
   })),
 };
 
-const howToSchema: WithContext<HowToThing> = {
+const howToSchema: WithContext<HowTo> = {
   '@context': 'https://schema.org',
   '@type': 'HowTo',
   name: title,
@@ -244,5 +244,32 @@ export const content: ToolLocaleContent<TinderPhotoOptimizerUI> = {
     simulatorJob: 'Votre Profession',
     simulatorCity: 'Vit à Paris',
     simulatorDistance: 'À 5 km de vous',
+
+    statusOptimal: 'OPTIMALE',
+    statusIncorrect: 'INCORRECTE',
+    statusHigh: 'HAUTE',
+    statusMedium: 'MOYENNE',
+    statusLow: 'BASSE',
+    statusPositive: 'POSITIF',
+    statusNeutral: 'NEUTRE',
+
+    alertExcellent: 'Excellente composition technique.',
+    alertEmptySpaces: 'ESPACES VIDES : L\'image ne couvre pas tout le cadre. Ajustez le zoom ou la position.',
+    alertAlmostInvisible: 'PRESQUE INVISIBLE : Vous êtes trop loin. Zoomez jusqu\'à ce que votre visage occupe au moins un tiers de l\'écran.',
+    alertTooClose: 'TROP PRÈS : Les gros plans extrêmes peuvent paraître agressifs.',
+    alertPerfectSize: 'TAILLE PARFAITE : Votre visage a le ratio idéal pour transmettre la confiance.',
+    alertImpactfulLook: 'REGARD IMPACTANT : Vos yeux sont sur la ligne d\'attention maximale.',
+    alertEyeLineMoveUp: 'LIGNE DES YEUX : Pour un cadrage professionnel, remontez légèrement le visage jusqu\'à la ligne supérieure.',
+    alertEyeLineMoveDown: 'LIGNE DES YEUX : Pour un cadrage professionnel, baissez légèrement le visage jusqu\'à la ligne supérieure.',
+    alertTiltedHead: 'TÊTE INCLINÉE : Une posture trop inclinée peut transmettre de l\'instabilité.',
+    alertSmileDetected: 'SOURIRE DÉTECTÉ : Les sourires augmentent considérablement le taux de match.',
+    alertSevereExpression: 'EXPRESSION SÉVÈRE : Essayez d\'utiliser une photo avec un geste plus amical.',
+    alertObstructedTop: 'OBSTRUÉ : La barre de progression cache votre visage.',
+    alertObstructedBottom: 'OBSTRUÉ : Le bloc d\'information cache votre visage.',
+    alertLowLight: 'ÉCLAIRAGE DÉFICIENT : L\'IA a des difficultés à vous voir. Cherchez une photo avec une meilleure lumière.',
+    alertCutOff: 'COUPÉ : Le visage sort du cadre vertical.',
+    alertProTip: 'CONSEIL PRO : S\'il s\'agit d\'un selfie, utilisez le Zoom (1.2x) pour éviter les distorsions de l\'objectif.',
+
+    canvasFaceDetected: 'Visage détecté',
   },
 };

package/src/tool/tinderPhotoOptimizer/logic.ts

@@ -1,3 +1,5 @@
+import type { TinderPhotoOptimizerUI } from './ui';
+
 interface FaceLandmark { x: number; y: number; }
 interface FaceLandmarks { getLeftEye(): FaceLandmark[]; getRightEye(): FaceLandmark[]; positions: FaceLandmark[]; }
 interface FaceExpressions { happy: number; angry: number; }
@@ -11,8 +13,8 @@ interface FaceApiGlobal {
 declare const faceapi: FaceApiGlobal;
 
 export interface FaceDetectionResult { detection: { box: FaceBox; score: number }; landmarks: FaceLandmarks | null; expressions: FaceExpressions | null; }
-export interface AnalysisAlert { type: 'success' | 'warning' | 'error'; text: string; }
-type AnalysisCtx = { alerts: AnalysisAlert[]; metrics: Record<string, string> };
+export interface AnalysisAlert { type: 'success' | 'warning' | 'error'; textKey: keyof TinderPhotoOptimizerUI; }
+type AnalysisCtx = { alerts: AnalysisAlert[]; metrics: Record<string, keyof TinderPhotoOptimizerUI | string> };
 type ImgGeo = { x: number; y: number; w: number; h: number; canvasW: number; canvasH: number; r: number };
 type FaceGeo = { fx: number; fy: number; fw: number; fh: number; faceHeightRatio: number };
 
@@ -55,8 +57,7 @@ export class TinderOptimizerEngine {
   setManualFace(rect: { x: number; y: number; w: number; h: number }) {
     if (!this.image) return;
     const r = Math.max(this.canvas.width / this.image.width, this.canvas.height / this.image.height);
-    const w = this.image.width * r * this.zoom;
-    const h = this.image.height * r * this.zoom;
+    const w = this.image.width * r * this.zoom, h = this.image.height * r * this.zoom;
     const imgX = (this.canvas.width - w) / 2 + this.offset.x;
     const imgY = (this.canvas.height - h) / 2 + this.offset.y;
     this.faceDetection = {
@@ -66,7 +67,9 @@ export class TinderOptimizerEngine {
   }
 
   updateState(zoom: number, offset: { x: number; y: number }, brightness: number) {
-    this.zoom = zoom; this.offset = offset; this.brightness = brightness;
+    this.zoom = zoom;
+    this.offset = offset;
+    this.brightness = brightness;
   }
 
   private computeImgGeo(): ImgGeo {
@@ -80,8 +83,8 @@ export class TinderOptimizerEngine {
   private checkCoverage(ctx: AnalysisCtx, geo: ImgGeo) {
     const { x, y, w, h, canvasW, canvasH } = geo;
     const ok = !(x > 0 || y > 0 || x + w < canvasW || y + h < canvasH);
-    ctx.metrics.coverage = ok ? '100%' : 'INCORRECTA';
-    if (!ok) ctx.alerts.push({ type: 'error', text: 'ESPACIOS VACÍOS: La imagen no cubre todo el encuadre. Ajusta el zoom o la posición.' });
+    ctx.metrics.coverage = ok ? '100%' : 'statusIncorrect';
+    if (!ok) ctx.alerts.push({ type: 'error', textKey: 'alertEmptySpaces' });
   }
 
   private getFaceGeo(box: FaceBox, geo: ImgGeo): FaceGeo {
@@ -93,51 +96,57 @@ export class TinderOptimizerEngine {
 
   private analyzeFaceSize(ctx: AnalysisCtx, ratio: number) {
     ctx.metrics.faceSize = `${(ratio * 100).toFixed(1)}%`;
-    if (ratio < 0.2) ctx.alerts.push({ type: 'error', text: 'CASI INVISIBLE: Estás muy lejos. Haz zoom hasta que tu cara ocupe al menos un tercio de la pantalla.' });
-    else if (ratio > 0.6) ctx.alerts.push({ type: 'warning', text: 'DEMASIADO CERCA: Los primeros planos extremos pueden resultar agresivos.' });
-    else if (ratio >= 0.3 && ratio <= 0.5) ctx.alerts.push({ type: 'success', text: 'TAMAÑO PERFECTO: Tu rostro tiene el ratio ideal para transmitir confianza.' });
+    if (ratio < 0.2) ctx.alerts.push({ type: 'error', textKey: 'alertAlmostInvisible' });
+    else if (ratio > 0.6) ctx.alerts.push({ type: 'warning', textKey: 'alertTooClose' });
+    else if (ratio >= 0.3 && ratio <= 0.5) ctx.alerts.push({ type: 'success', textKey: 'alertPerfectSize' });
   }
 
   private analyzeEyeLine(ctx: AnalysisCtx, landmarks: FaceLandmarks, geo: ImgGeo) {
-    const avgY = (landmarks.getLeftEye()[0].y + landmarks.getRightEye()[0].y) / 2;
+    const leftEye = landmarks.getLeftEye(), rightEye = landmarks.getRightEye();
+    if (!leftEye || !leftEye.length || !rightEye || !rightEye.length) return;
+    const avgY = (leftEye[0].y + rightEye[0].y) / 2;
     const eyeDiff = (geo.y + avgY * geo.r * this.zoom) - 640;
+    this.setEyeMetric(ctx, eyeDiff);
+    if (Math.abs(this.estimateRoll(landmarks)) > 15) ctx.alerts.push({ type: 'warning', textKey: 'alertTiltedHead' });
+  }
+
+  private setEyeMetric(ctx: AnalysisCtx, eyeDiff: number) {
     if (Math.abs(eyeDiff) < 150) {
-      ctx.metrics.eyeLine = 'ÓPTIMA';
-      ctx.alerts.push({ type: 'success', text: 'MIRADA IMPACTANTE: Tus ojos están en la línea de atención máxima.' });
+      ctx.metrics.eyeLine = 'statusOptimal';
+      ctx.alerts.push({ type: 'success', textKey: 'alertImpactfulLook' });
     } else {
-      ctx.metrics.eyeLine = eyeDiff > 0 ? 'BAJA' : 'ALTA';
-      ctx.alerts.push({ type: 'warning', text: `LÍNEA DE OJOS: Para un encuadre profesional, ${eyeDiff > 0 ? 'sube' : 'baja'} un poco el rostro hasta la línea superior.` });
+      ctx.metrics.eyeLine = eyeDiff > 0 ? 'statusLow' : 'statusHigh';
+      ctx.alerts.push({ type: 'warning', textKey: eyeDiff > 0 ? 'alertEyeLineMoveUp' : 'alertEyeLineMoveDown' });
     }
-    if (Math.abs(this.estimateRoll(landmarks)) > 15) ctx.alerts.push({ type: 'warning', text: 'CABEZA INCLINADA: Una postura demasiado torcida puede transmitir inestabilidad.' });
   }
 
   private analyzeMood(ctx: AnalysisCtx, expr: FaceExpressions) {
     const happy = expr.happy || 0;
-    ctx.metrics.mood = happy > 0.7 ? 'POSITIVO' : 'NEUTRAL';
-    if (happy > 0.7) ctx.alerts.push({ type: 'success', text: 'SONRISA DETECTADA: Las sonrisas aumentan la tasa de match significativamente.' });
-    else if (expr.angry > 0.4) ctx.alerts.push({ type: 'warning', text: 'EXPRESIÓN SEVERA: Intenta usar una foto con un gesto más amable.' });
+    ctx.metrics.mood = happy > 0.7 ? 'statusPositive' : 'statusNeutral';
+    if (happy > 0.7) ctx.alerts.push({ type: 'success', textKey: 'alertSmileDetected' });
+    else if (expr.angry > 0.4) ctx.alerts.push({ type: 'warning', textKey: 'alertSevereExpression' });
   }
 
   private checkFaceObstruction(ctx: AnalysisCtx, fy: number, fh: number) {
-    if (fy < 300) ctx.alerts.push({ type: 'error', text: 'OBSTRUIDO: La barra de progreso tapa tu rostro.' });
-    else if (fy + fh > 1400) ctx.alerts.push({ type: 'error', text: 'OBSTRUIDO: El bloque de información tapa tu cara.' });
+    if (fy < 300) ctx.alerts.push({ type: 'error', textKey: 'alertObstructedTop' });
+    else if (fy + fh > 1400) ctx.alerts.push({ type: 'error', textKey: 'alertObstructedBottom' });
   }
 
   private checkFaceOut(ctx: AnalysisCtx, fg: FaceGeo, canvasW: number, canvasH: number) {
+    if (!this.faceDetection) return;
+    const confidence = this.faceDetection.detection.score;
+    ctx.metrics.quality = confidence > 0.8 ? 'statusHigh' : 'statusMedium';
+    if (confidence < 0.6) ctx.alerts.push({ type: 'warning', textKey: 'alertLowLight' });
     const { fx, fy, fw, fh } = fg;
-    const confidence = this.faceDetection!.detection.score;
-    ctx.metrics.quality = confidence > 0.8 ? 'ALTA' : 'MEDIA';
-    if (confidence < 0.6) ctx.alerts.push({ type: 'warning', text: 'ILUMINACIÓN DEFICIENTE: La IA tiene dificultades para verte. Busca una foto con mejor luz.' });
-    if (fx < 0 || fx + fw > canvasW || fy < 0 || fy + fh > canvasH) ctx.alerts.push({ type: 'error', text: 'CORTADO: El rostro se sale del encuadre vertical.' });
+    if (fx < 0 || fx + fw > canvasW || fy < 0 || fy + fh > canvasH) ctx.alerts.push({ type: 'error', textKey: 'alertCutOff' });
     this.checkFaceObstruction(ctx, fy, fh);
   }
 
   getAnalysis() {
     const alerts: AnalysisAlert[] = [];
-    const metrics: Record<string, string> = { faceSize: '0%', eyeLine: '--', coverage: '0%', mood: '--', quality: '--' };
+    const metrics: Record<string, keyof TinderPhotoOptimizerUI | string> = { faceSize: '0%', eyeLine: '--', coverage: '0%', mood: '--', quality: '--' };
     if (!this.image) return { alerts, metrics };
-    const ctx: AnalysisCtx = { alerts, metrics };
-    const geo = this.computeImgGeo();
+    const ctx: AnalysisCtx = { alerts, metrics }, geo = this.computeImgGeo();
     this.checkCoverage(ctx, geo);
     if (this.faceDetection) {
       const fg = this.getFaceGeo(this.faceDetection.detection.box, geo);
@@ -146,54 +155,51 @@ export class TinderOptimizerEngine {
       if (this.faceDetection.expressions) this.analyzeMood(ctx, this.faceDetection.expressions);
       this.checkFaceOut(ctx, fg, geo.canvasW, geo.canvasH);
     }
-    if (this.zoom < 1.15) alerts.push({ type: 'warning', text: 'CONSEJO PRO: Si es una selfie, usa el Zoom (1.2x) para evitar distorsiones de lente.' });
+    if (this.zoom < 1.15) alerts.push({ type: 'warning', textKey: 'alertProTip' });
     return { alerts, metrics };
   }
 
   private estimateRoll(landmarks: FaceLandmarks): number {
-    const l = landmarks.getLeftEye()[0], r = landmarks.getRightEye()[0];
+    const leftEye = landmarks.getLeftEye(), rightEye = landmarks.getRightEye();
+    if (!leftEye || !leftEye.length || !rightEye || !rightEye.length) return 0;
+    const l = leftEye[0], r = rightEye[0];
     return Math.atan2(r.y - l.y, r.x - l.x) * (180 / Math.PI);
   }
 
   getOptimalTransform() {
     if (!this.image || !this.faceDetection) return null;
-    const box = this.faceDetection.detection.box;
-    const r = Math.max(this.canvas.width / this.image.width, this.canvas.height / this.image.height);
+    const box = this.faceDetection.detection.box, r = Math.max(this.canvas.width / this.image.width, this.canvas.height / this.image.height);
     const optimalZoom = Math.min(Math.max((this.canvas.height * 0.25) / (box.height * r), 1), 3);
     const faceCX = box.x + box.width / 2, faceCY = box.y + box.height / 2;
     const w = this.image.width * r * optimalZoom, h = this.image.height * r * optimalZoom;
     return { zoom: optimalZoom, x: 540 - (this.canvas.width - w) / 2 - faceCX * r * optimalZoom, y: 800 - (this.canvas.height - h) / 2 - faceCY * r * optimalZoom };
   }
 
-  private drawFaceBox(x: number, y: number, r: number) {
-    const box = this.faceDetection!.detection.box;
+  private drawFaceBox(x: number, y: number, r: number, label: string) {
+    if (!this.faceDetection) return;
+    const box = this.faceDetection.detection.box;
     const fx = x + box.x * r * this.zoom, fy = y + box.y * r * this.zoom;
     const fw = box.width * r * this.zoom, fh = box.height * r * this.zoom;
-    this.ctx.strokeStyle = '#00ff00'; this.ctx.lineWidth = 6;
-    this.ctx.strokeRect(fx, fy, fw, fh);
-    this.ctx.fillStyle = '#00ff00'; this.ctx.font = 'bold 40px Arial';
-    this.ctx.fillText('Cara detectada', fx, fy - 10);
-    const landmarks = this.faceDetection!.landmarks;
+    this.ctx.strokeStyle = '#00ff00'; this.ctx.lineWidth = 6; this.ctx.strokeRect(fx, fy, fw, fh);
+    this.ctx.fillStyle = '#00ff00'; this.ctx.font = 'bold 40px Arial'; this.ctx.fillText(label, fx, fy - 10);
+    const landmarks = this.faceDetection.landmarks;
     if (landmarks) {
       this.ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
       landmarks.positions.forEach((p: FaceLandmark) => {
-        this.ctx.beginPath();
-        this.ctx.arc(x + p.x * r * this.zoom, y + p.y * r * this.zoom, 2, 0, 2 * Math.PI);
-        this.ctx.fill();
+        this.ctx.beginPath(); this.ctx.arc(x + p.x * r * this.zoom, y + p.y * r * this.zoom, 2, 0, 2 * Math.PI); this.ctx.fill();
       });
     }
   }
 
-  draw(showFaceBox: boolean) {
+  draw(showFaceBox: boolean, label?: string) {
     if (!this.image) return;
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     this.ctx.filter = `brightness(${this.brightness}%)`;
     const iw = this.image.width, ih = this.image.height;
     const r = Math.max(this.canvas.width / iw, this.canvas.height / ih);
     const w = iw * r * this.zoom, h = ih * r * this.zoom;
-    const x = (this.canvas.width - w) / 2 + this.offset.x;
-    const y = (this.canvas.height - h) / 2 + this.offset.y;
+    const x = (this.canvas.width - w) / 2 + this.offset.x, y = (this.canvas.height - h) / 2 + this.offset.y;
     this.ctx.drawImage(this.image, x, y, w, h);
-    if (showFaceBox && this.faceDetection) this.drawFaceBox(x, y, r);
+    if (showFaceBox && this.faceDetection) this.drawFaceBox(x, y, r, label || '');
   }
 }

package/src/tool/tinderPhotoOptimizer/ui.ts

@@ -34,4 +34,31 @@ export interface TinderPhotoOptimizerUI extends Record<string, string> {
   simulatorJob: string;
   simulatorCity: string;
   simulatorDistance: string;
+
+  statusOptimal: string;
+  statusIncorrect: string;
+  statusHigh: string;
+  statusMedium: string;
+  statusLow: string;
+  statusPositive: string;
+  statusNeutral: string;
+
+  alertExcellent: string;
+  alertEmptySpaces: string;
+  alertAlmostInvisible: string;
+  alertTooClose: string;
+  alertPerfectSize: string;
+  alertImpactfulLook: string;
+  alertEyeLineMoveUp: string;
+  alertEyeLineMoveDown: string;
+  alertTiltedHead: string;
+  alertSmileDetected: string;
+  alertSevereExpression: string;
+  alertObstructedTop: string;
+  alertObstructedBottom: string;
+  alertLowLight: string;
+  alertCutOff: string;
+  alertProTip: string;
+
+  canvasFaceDetected: string;
 }