@jjlmoya/utils-audiovisual 1.2.0

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

@@ -0,0 +1,246 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
+
+const slug = 'chromatic-lens-color-palette-extraction-online';
+const title = 'Chromatic Lens - Online Color Palette Extraction';
+const description = 'Extract professional color palettes from any image for free. Identify dominant colors in your photos using mathematical algorithms.';
+
+const ui: ChromaticLensUI = {
+    dropTitle: "Analyze Colors",
+    dropSubtitle: "Drag an image to extract its chromatic DNA.",
+    processingLabel: "Extracting palette...",
+    paletteTitle: "Extracted Palette",
+    copyLabel: "Copy HEX",
+    copiedLabel: "Copied!",
+    colorCountLabel: "Number of colors",
+    changeImage: "Change image",
+    faqTitle: "Frequently asked questions about color extraction",
+    bibliographyTitle: "Resources and technical documentation"
+};
+
+const faq: ChromaticLensLocaleContent['faq'] = [
+    {
+        question: "How does color extraction work?",
+        answer: "We use the 'Median Cut' algorithm, which groups image pixels according to their proximity in RGB color space to find the most representative tones.",
+    },
+    {
+        question: "Can I copy colors to my design editor?",
+        answer: "Yes, by clicking on each color, the HEX code will be automatically copied to your clipboard, ready to paste into Photoshop, Figma, or CSS.",
+    },
+    {
+        question: "What types of images can I analyze?",
+        answer: "Any JPG, PNG, or WebP file. Processing is local, so large images will be analyzed quickly without consuming network data.",
+    },
+];
+
+const howTo: ChromaticLensLocaleContent['howTo'] = [
+    {
+        name: "Upload the image",
+        text: "Upload the photograph from which you want to extract chromatic inspiration.",
+    },
+    {
+        name: "Adjust precision",
+        text: "Select how many dominant colors you want the tool to identify (from 3 to 12).",
+    },
+    {
+        name: "Analyze the result",
+        text: "The palette will appear instantly with its corresponding hexadecimal codes.",
+    },
+    {
+        name: "Copy and use",
+        text: "Click on the tones to save them and apply them to your design project.",
+    },
+];
+
+const bibliography: ChromaticLensLocaleContent['bibliography'] = [
+    {
+        name: "Median Cut Algorithm - Wikipedia",
+        url: "https://en.wikipedia.org/wiki/Median_cut",
+    },
+    {
+        name: "Color Theory for Designers",
+        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
+    },
+];
+
+const seo: ChromaticLensLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Intelligent Color Palette Extraction',
+        items: [
+            'Professional Median Cut algorithm for color analysis',
+            'Extract 3-12 dominant colors from any image',
+            'HEX codes clonable directly to the clipboard',
+            '100% local processing - ideal for creatives'
+        ]
+    },
+    { type: 'title', text: 'Color Palette Extraction: Science and Design', level: 2 },
+    { type: 'paragraph', html: 'Have you ever wondered why a movie photograph feels so harmonious? It\'s not a coincidence; it\'s color theory in action. Chromatic Lens allows you to extract that harmony directly from the pixel, transforming it into HEX codes usable in your design projects.' },
+
+    { type: 'stats', items: [
+        { value: 'Instant', label: 'Color Analysis', icon: 'mdi:lightning-bolt' },
+        { value: '100%', label: 'Local Privacy', icon: 'mdi:lock' },
+        { value: 'RGB', label: 'Precise Color Space', icon: 'mdi:palette' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'The Median Cut Algorithm Explained', level: 3 },
+    { type: 'paragraph', html: 'Intelligent palette extraction is not a simple random sampling of pixels. It uses the Median Cut algorithm, a recursive partitioning technique that ensures faithful representation:' },
+    { type: 'list', items: [
+        '<strong>Recursive Division:</strong> The RGB "color cube" of the image is recursively divided into smaller boxes.',
+        '<strong>Volume Balance:</strong> Each partition seeks to group pixels from the same color space with similar volumes.',
+        '<strong>Weighted Average:</strong> The resulting color of each box is the average of all the pixels it contains.',
+        '<strong>Faithful Representation:</strong> The dominant colors reflect the real visual atmosphere of the image, not a simple sample.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Creative Workflow', html: 'Ideal for web developers, UX/UI designers, digital artists, and creatives looking to instantly capture the visual essence of a photograph, film, or visual reference to apply in their interfaces, illustrations, or brand palettes.' },
+
+    { type: 'title', text: 'Use Cases in Digital Design', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'UX/UI Designers',
+            description: 'Extract palettes from hero images to create cohesive interfaces',
+            icon: 'mdi:palette',
+            points: [
+                'Harmonious background colors',
+                'Buttons and secondary elements',
+                'Automatically calculated contrast'
+            ]
+        },
+        {
+            title: 'Web Developers',
+            description: 'Create CSS stylesheets directly from visual references',
+            icon: 'mdi:code-braces',
+            points: [
+                'Copy HEX directly to CSS',
+                'Color variables in SCSS/CSS',
+                'Cohesive themes without prior design'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Digital Artists and Illustrators',
+            description: 'Capture chromatic references from films, nature, or art',
+            icon: 'mdi:brush',
+            points: [
+                'Reference palettes from masterworks',
+                'Cinematic color studies',
+                'Immediate visual inspiration'
+            ]
+        },
+        {
+            title: 'Branding Specialists',
+            description: 'Develop visual identities based on guide photographs',
+            icon: 'mdi:tag-multiple',
+            points: [
+                'Extract brand colors from images',
+                'Create professional chromatic guides',
+                'Ensure visual consistency'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Applied Color Theory', level: 3 },
+    { type: 'table', headers: ['Color Concept', 'Definition', 'Practical Application'], rows: [
+        ['Chromatic Harmony', 'Color combination that is visually balanced', 'Cohesive visual identity in UI'],
+        ['Contrast', 'Difference in brightness between colors', 'Readability and visual hierarchy'],
+        ['Saturation', 'Color intensity of a tone', 'Professionalism (low) vs Energy (high)'],
+        ['Color Temperature', 'Warm colors (reds) vs cool colors (blues)', 'Emotional psychology of design'],
+        ['Monochromatic Palette', 'Variations of a single tone', 'Elegance and minimalism']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Mathematical precision in extraction - not an approximate visual selection',
+            con: 'Hardly visible colors may be included if they have many pixels'
+        },
+        {
+            pro: 'Instant copy to clipboard - perfect integration with workflow',
+            con: 'Needs a modern browser compatible with Canvas API'
+        },
+        {
+            pro: 'Total privacy - 100% local analysis without data submission',
+            con: 'No history of previous analyses saved'
+        },
+        {
+            pro: 'Compatible with any digital image format',
+            con: 'Final colors depend on image compression and quality'
+        }
+    ], proTitle: 'Advantages', conTitle: 'Limitations' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Realistic Color Representation', icon: 'mdi:check-circle-outline', badge: 'Advanced Algorithm', html: 'Unlike tools that simply sample random pixels, our system uses the Median Cut algorithm that weights the entire pixel count of each tone, ensuring the resulting palette faithfully reflects the visual atmosphere and color psychology of the original image.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Median Cut',
+            definition: 'Color quantization algorithm that recursively divides RGB space into boxes, ensuring uniform distribution. Historically used in GIF and indexed color technology.'
+        },
+        {
+            term: 'RGB Color Space',
+            definition: 'Color model based on red, green, and blue. Each color is represented as a combination of these three values (0-255). Standard on digital screens and web.'
+        },
+        {
+            term: 'HEX Code',
+            definition: '6-digit hexadecimal notation (#RRGGBB) representing color on web: #FF0000 (red), #00FF00 (green), #0000FF (blue). Universal in CSS, Figma, and Adobe.'
+        },
+        {
+            term: 'Color Saturation',
+            definition: 'Intensity or purity of color. High saturation = vivid color; low saturation = grayish color. Affects the emotional perception of the design.'
+        },
+        {
+            term: 'Chromatic Harmony',
+            definition: 'Selection and combination of colors result in a visually pleasing result. It can be monochromatic, complementary, analogous, or triadic.'
+        }
+    ] },
+
+    { type: 'message', title: 'Professional Chromatic Analysis', ariaLabel: 'Technical information about color analysis', html: 'Chromatic Lens transforms manual visual analysis into algorithmic precision. It doesn\'t just extract colors: it captures the emotional and visual essence of any image, putting it directly on your clipboard as ready-to-use HEX codes. Total privacy, no limits on analysis volume.' },
+
+    { type: 'title', text: 'Design from Visual Inspiration', level: 3 },
+    { type: 'paragraph', html: 'The best color palette is the one that captures the visual intent of your reference. Chromatic Lens automates what used to be a manual process: observe, analyze, note. Now, simply drag an image and get professional HEX codes in seconds.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'en',
+};
+
+export const content: ChromaticLensLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Frequently Asked Questions",
+    faq,
+    bibliographyTitle: "References",
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

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

@@ -0,0 +1,244 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
+
+const slug = 'lente-cromatica';
+const title = 'Lente Cromática - Extracción de Paletas de Color Online';
+const description = 'Extrae paletas de colores profesionales de cualquier imagen de forma gratuita. Identifica los colores dominantes de tus fotos mediante algoritmos matemáticos.';
+
+const ui: ChromaticLensUI = {
+    dropTitle: "Analizar Colores",
+    dropSubtitle: "Arrastra una imagen para extraer su ADN cromático.",
+    processingLabel: "Extrayendo paleta...",
+    paletteTitle: "Paleta Extraída",
+    copyLabel: "Copiar HEX",
+    copiedLabel: "¡Copiado!",
+    colorCountLabel: "Número de colores",
+    changeImage: "Cambiar imagen"
+};
+
+const faq: ChromaticLensLocaleContent['faq'] = [
+    {
+        question: "¿Cómo funciona la extracción de colores?",
+        answer: "Utilizamos el algoritmo 'Median Cut', que agrupa los píxeles de la imagen según su proximidad en el espacio de color RGB para encontrar los tonos más representativos.",
+    },
+    {
+        question: "¿Puedo copiar los colores a mi editor de diseño?",
+        answer: "Sí, al hacer clic en cada color se copiará automáticamente el código HEX al portapapeles, listo para pegar en Photoshop, Figma o CSS.",
+    },
+    {
+        question: "¿Qué tipos de imágenes puedo analizar?",
+        answer: "Cualquier archivo JPG, PNG o WebP. El procesamiento es local, por lo que imágenes pesadas se analizarán rápidamente sin consumir datos de red.",
+    },
+];
+
+const howTo: ChromaticLensLocaleContent['howTo'] = [
+    {
+        name: "Carga la imagen",
+        text: "Sube la fotografía de la que quieras extraer la inspiración cromática.",
+    },
+    {
+        name: "Ajusta la precisión",
+        text: "Selecciona cuántos colores dominantes quieres que la herramienta identifique (de 3 a 12).",
+    },
+    {
+        name: "Analiza el resultado",
+        text: "La paleta aparecerá instantáneamente con sus códigos hexadecimales correspondientes.",
+    },
+    {
+        name: "Copia y utiliza",
+        text: "Haz clic en los tonos para guardarlos y aplicarlos a tu proyecto de diseño.",
+    },
+];
+
+const bibliography: ChromaticLensLocaleContent['bibliography'] = [
+    {
+        name: "Median Cut Algorithm - Wikipedia",
+        url: "https://en.wikipedia.org/wiki/Median_cut",
+    },
+    {
+        name: "Color Theory for Designers",
+        url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
+    },
+];
+
+const seo: ChromaticLensLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Extracción Inteligente de Paletas de Color',
+        items: [
+            'Algoritmo Median Cut profesional para análisis de color',
+            'Extrae 3-12 colores dominantes de cualquier imagen',
+            'Códigos HEX copiables directamente al portapapeles',
+            'Procesamiento 100% local - ideal para creativos'
+        ]
+    },
+    { type: 'title', text: 'Extracción de Paletas de Color: Ciencia y Diseño', level: 2 },
+    { type: 'paragraph', html: '¿Alguna vez te has preguntado por qué una fotografía de cine se siente tan armoniosa? No es casualidad; es la teoría del color en acción. Lente Cromática te permite extraer esa armonía directamente del píxel, transformándola en códigos HEX utilizables en tus proyectos de diseño.' },
+
+    { type: 'stats', items: [
+        { value: 'Instant', label: 'Análisis de Color', icon: 'mdi:lightning-bolt' },
+        { value: '100%', label: 'Privacidad Local', icon: 'mdi:lock' },
+        { value: 'RGB', label: 'Espacio de Color Preciso', icon: 'mdi:palette' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'El Algoritmo Median Cut Explicado', level: 3 },
+    { type: 'paragraph', html: 'La extracción inteligente de paletas no es un simple muestreo aleatorio de píxeles. Utiliza el algoritmo Median Cut, una técnica de particionamiento recursivo que garantiza representación fiel:' },
+    { type: 'list', items: [
+        '<strong>División Recursiva:</strong> El "cubo de color" RGB de la imagen se divide recursivamente en cajas más pequeñas.',
+        '<strong>Equilibrio de Volumen:</strong> Cada partición busca agrupar píxeles del mismo espacio de color con volúmenes similares.',
+        '<strong>Promedio Ponderado:</strong> El color resultante de cada caja es el promedio de todos los píxeles que contiene.',
+        '<strong>Representación Fiel:</strong> Los colores dominantes reflejan la atmósfera visual real de la imagen, no un simple muestreo.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Flujo de Trabajo Creativo', html: 'Ideal para desarrolladores web, diseñadores UX/UI, artistas digitales y creativos que buscan capturar instantáneamente la esencia visual de una fotografía, película o referencia visual para aplicarla en sus interfaces, ilustraciones o paletas de marca.' },
+
+    { type: 'title', text: 'Casos de Uso en Diseño Digital', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Diseñadores de Interfaz (UX/UI)',
+            description: 'Extraer paletas de imágenes hero para crear interfaces cohesivas',
+            icon: 'mdi:palette',
+            points: [
+                'Colores de fondo armónicos',
+                'Botones y elementos secundarios',
+                'Contraste calculado automáticamente'
+            ]
+        },
+        {
+            title: 'Desarrolladores Web',
+            description: 'Crear hojas de estilo CSS directamente desde referencias visuales',
+            icon: 'mdi:code-braces',
+            points: [
+                'Copiar HEX directamente al CSS',
+                'Variables de color en SCSS/CSS',
+                'Temas cohesivos sin diseño previo'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Artistas Digitales e Ilustradores',
+            description: 'Capturar referencias cromáticas de películas, naturaleza o arte',
+            icon: 'mdi:brush',
+            points: [
+                'Paletas de referencia de obras maestras',
+                'Estudios de color cinematográfico',
+                'Inspiración visual inmediata'
+            ]
+        },
+        {
+            title: 'Especialistas en Branding',
+            description: 'Desarrollar identidades visuales basadas en fotografías guía',
+            icon: 'mdi:tag-multiple',
+            points: [
+                'Extraer colores de marca de imágenes',
+                'Crear guías cromáticas profesionales',
+                'Asegurar consistencia visual'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Teoría del Color Aplicada', level: 3 },
+    { type: 'table', headers: ['Concepto de Color', 'Definición', 'Aplicación Práctica'], rows: [
+        ['Armonía Cromática', 'Combinación de colores que resulta visualmente equilibrada', 'Identidad visual coherente en UI'],
+        ['Contraste', 'Diferencia de luminosidad entre colores', 'Legibilidad y jerarquía visual'],
+        ['Saturación', 'Intensidad del color de un tono', 'Profesionalismo (baja) vs Energía (alta)'],
+        ['Temperatura de Color', 'Colores cálidos (rojos) vs fríos (azules)', 'Psicología emocional del diseño'],
+        ['Paleta Monocromática', 'Variaciones de un solo tono', 'Elegancia y minimalismo']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Precisión matemática en extracción - no es una selección visual aproximada',
+            con: 'Pueden incluirse colores poco visibles si tienen gran cantidad de píxeles'
+        },
+        {
+            pro: 'Copia instantánea a portapapeles - integración perfecta con flujo de trabajo',
+            con: 'Necesita navegador moderno compatible con Canvas API'
+        },
+        {
+            pro: 'Privacidad total - análisis 100% local sin envío de datos',
+            con: 'Sin guardar historial de análisis previos'
+        },
+        {
+            pro: 'Compatible con cualquier formato de imagen digital',
+            con: 'Colores finales dependen de compresión y calidad de la imagen'
+        }
+    ], proTitle: 'Ventajas', conTitle: 'Limitaciones' },
+
+    { type: 'diagnostic', variant: 'success', title: 'Representación Realista de Color', icon: 'mdi:check-circle-outline', badge: 'Algoritmo Avanzado', html: 'A diferencia de herramientas que simplemente samplen píxeles aleatorios, nuestro sistema utiliza el algoritmo Median Cut que pondera toda la cantidad de píxeles de cada tono, asegurando que la paleta resultante sea un reflejo fiel de la atmósfera visual y psicología del color de la imagen original.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Median Cut',
+            definition: 'Algoritmo de cuantización de color que divide recursivamente el espacio RGB en cajas, garantizando distribución uniforme. Usado históricamente en GIF y tecnología de color indexado.'
+        },
+        {
+            term: 'Espacio de Color RGB',
+            definition: 'Modelo de color basado en rojo, verde y azul. Cada color se representa como combinación de estos tres valores (0-255). Estándar en pantallas digitales y web.'
+        },
+        {
+            term: 'Código HEX',
+            definition: 'Notación hexadecimal de 6 dígitos (#RRGGBB) que representa color en web: #FF0000 (rojo), #00FF00 (verde), #0000FF (azul). Universal en CSS, Figma y Adobe.'
+        },
+        {
+            term: 'Saturación de Color',
+            definition: 'Intensidad o pureza del color. Alta saturación = color vivo; baja saturación = color grisáceo. Afecta la percepción emocional del diseño.'
+        },
+        {
+            term: 'Armonía Cromática',
+            definition: 'Selección y combinación de colores que resulta visualmente agradable. Puede ser monocromática, complementaria, análoga o de triada.'
+        }
+    ] },
+
+    { type: 'message', title: 'Análisis Cromático Profesional', ariaLabel: 'Información técnica sobre análisis de color', html: 'Lente Cromática transforma análisis visual manual en precisión algorítmica. No solo extrae colores: captura la esencia emocional y visual de cualquier imagen, poniéndola directamente en tu portapapeles como códigos HEX listos para usar. Privacidad total, sin límites de cantidad de análisis.' },
+
+    { type: 'title', text: 'Diseña Desde la Inspiración Visual', level: 3 },
+    { type: 'paragraph', html: 'La mejor paleta de color es aquella que captura la intención visual de tu referencia. Lente Cromática automatiza lo que antes era un proceso manual: observar, analizar, anotar. Ahora, simplemente arrastra una imagen y obtén códigos HEX profesionales en segundos.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'es',
+};
+
+export const content: ChromaticLensLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    faqTitle: 'Preguntas frecuentes sobre paletas de color',
+    bibliography,
+    bibliographyTitle: 'Recursos técnicos sobre teoría del color',
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};