@jjlmoya/utils-audiovisual 1.6.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +59 -58
- package/src/category/i18n/de.ts +198 -0
- package/src/category/i18n/fr.ts +1 -1
- package/src/category/i18n/id.ts +198 -0
- package/src/category/i18n/it.ts +198 -0
- package/src/category/i18n/ja.ts +198 -0
- package/src/category/i18n/ko.ts +198 -0
- package/src/category/i18n/nl.ts +198 -0
- package/src/category/i18n/pl.ts +198 -0
- package/src/category/i18n/pt.ts +198 -0
- package/src/category/i18n/ru.ts +198 -0
- package/src/category/i18n/sv.ts +198 -0
- package/src/category/i18n/tr.ts +198 -0
- package/src/category/i18n/zh.ts +198 -0
- package/src/category/index.ts +31 -3
- package/src/tests/i18n_coverage.test.ts +36 -0
- package/src/tests/schemas_fulfillment.test.ts +23 -0
- package/src/tests/title_quality.test.ts +55 -0
- package/src/tool/chromaticLens/i18n/de.ts +246 -0
- package/src/tool/chromaticLens/i18n/en.ts +1 -1
- package/src/tool/chromaticLens/i18n/es.ts +1 -1
- package/src/tool/chromaticLens/i18n/fr.ts +1 -1
- package/src/tool/chromaticLens/i18n/id.ts +246 -0
- package/src/tool/chromaticLens/i18n/it.ts +246 -0
- package/src/tool/chromaticLens/i18n/ja.ts +246 -0
- package/src/tool/chromaticLens/i18n/ko.ts +246 -0
- package/src/tool/chromaticLens/i18n/nl.ts +246 -0
- package/src/tool/chromaticLens/i18n/pl.ts +246 -0
- package/src/tool/chromaticLens/i18n/pt.ts +246 -0
- package/src/tool/chromaticLens/i18n/ru.ts +246 -0
- package/src/tool/chromaticLens/i18n/sv.ts +246 -0
- package/src/tool/chromaticLens/i18n/tr.ts +246 -0
- package/src/tool/chromaticLens/i18n/zh.ts +246 -0
- package/src/tool/chromaticLens/index.ts +15 -7
- package/src/tool/collageMaker/i18n/de.ts +233 -0
- package/src/tool/collageMaker/i18n/en.ts +1 -1
- package/src/tool/collageMaker/i18n/es.ts +1 -1
- package/src/tool/collageMaker/i18n/fr.ts +1 -1
- package/src/tool/collageMaker/i18n/id.ts +233 -0
- package/src/tool/collageMaker/i18n/it.ts +233 -0
- package/src/tool/collageMaker/i18n/ja.ts +233 -0
- package/src/tool/collageMaker/i18n/ko.ts +233 -0
- package/src/tool/collageMaker/i18n/nl.ts +233 -0
- package/src/tool/collageMaker/i18n/pl.ts +233 -0
- package/src/tool/collageMaker/i18n/pt.ts +233 -0
- package/src/tool/collageMaker/i18n/ru.ts +233 -0
- package/src/tool/collageMaker/i18n/sv.ts +233 -0
- package/src/tool/collageMaker/i18n/tr.ts +233 -0
- package/src/tool/collageMaker/i18n/zh.ts +233 -0
- package/src/tool/collageMaker/index.ts +15 -6
- package/src/tool/exifCleaner/i18n/de.ts +277 -0
- package/src/tool/exifCleaner/i18n/en.ts +2 -2
- package/src/tool/exifCleaner/i18n/es.ts +2 -2
- package/src/tool/exifCleaner/i18n/fr.ts +4 -4
- package/src/tool/exifCleaner/i18n/id.ts +277 -0
- package/src/tool/exifCleaner/i18n/it.ts +277 -0
- package/src/tool/exifCleaner/i18n/ja.ts +277 -0
- package/src/tool/exifCleaner/i18n/ko.ts +277 -0
- package/src/tool/exifCleaner/i18n/nl.ts +277 -0
- package/src/tool/exifCleaner/i18n/pl.ts +277 -0
- package/src/tool/exifCleaner/i18n/pt.ts +277 -0
- package/src/tool/exifCleaner/i18n/ru.ts +277 -0
- package/src/tool/exifCleaner/i18n/sv.ts +277 -0
- package/src/tool/exifCleaner/i18n/tr.ts +277 -0
- package/src/tool/exifCleaner/i18n/zh.ts +277 -0
- package/src/tool/exifCleaner/index.ts +16 -8
- package/src/tool/imageCompressor/i18n/de.ts +242 -0
- package/src/tool/imageCompressor/i18n/en.ts +2 -2
- package/src/tool/imageCompressor/i18n/es.ts +2 -2
- package/src/tool/imageCompressor/i18n/id.ts +242 -0
- package/src/tool/imageCompressor/i18n/it.ts +242 -0
- package/src/tool/imageCompressor/i18n/ja.ts +242 -0
- package/src/tool/imageCompressor/i18n/ko.ts +242 -0
- package/src/tool/imageCompressor/i18n/nl.ts +242 -0
- package/src/tool/imageCompressor/i18n/pl.ts +242 -0
- package/src/tool/imageCompressor/i18n/pt.ts +242 -0
- package/src/tool/imageCompressor/i18n/ru.ts +242 -0
- package/src/tool/imageCompressor/i18n/sv.ts +242 -0
- package/src/tool/imageCompressor/i18n/tr.ts +242 -0
- package/src/tool/imageCompressor/i18n/zh.ts +244 -0
- package/src/tool/imageCompressor/index.ts +15 -7
- package/src/tool/printQualityCalculator/i18n/de.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/en.ts +2 -2
- package/src/tool/printQualityCalculator/i18n/es.ts +3 -3
- package/src/tool/printQualityCalculator/i18n/fr.ts +3 -3
- package/src/tool/printQualityCalculator/i18n/id.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/it.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ja.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ko.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/nl.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/pl.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/pt.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/ru.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/sv.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/tr.ts +261 -0
- package/src/tool/printQualityCalculator/i18n/zh.ts +261 -0
- package/src/tool/printQualityCalculator/index.ts +15 -7
- package/src/tool/privacyBlur/i18n/de.ts +238 -0
- package/src/tool/privacyBlur/i18n/en.ts +1 -1
- package/src/tool/privacyBlur/i18n/es.ts +1 -1
- package/src/tool/privacyBlur/i18n/fr.ts +1 -1
- package/src/tool/privacyBlur/i18n/id.ts +238 -0
- package/src/tool/privacyBlur/i18n/it.ts +238 -0
- package/src/tool/privacyBlur/i18n/ja.ts +238 -0
- package/src/tool/privacyBlur/i18n/ko.ts +238 -0
- package/src/tool/privacyBlur/i18n/nl.ts +238 -0
- package/src/tool/privacyBlur/i18n/pl.ts +238 -0
- package/src/tool/privacyBlur/i18n/pt.ts +238 -0
- package/src/tool/privacyBlur/i18n/ru.ts +238 -0
- package/src/tool/privacyBlur/i18n/sv.ts +238 -0
- package/src/tool/privacyBlur/i18n/tr.ts +238 -0
- package/src/tool/privacyBlur/i18n/zh.ts +238 -0
- package/src/tool/privacyBlur/index.ts +15 -7
- package/src/tool/subtitleSync/i18n/de.ts +241 -0
- package/src/tool/subtitleSync/i18n/en.ts +1 -1
- package/src/tool/subtitleSync/i18n/es.ts +1 -1
- package/src/tool/subtitleSync/i18n/fr.ts +8 -8
- package/src/tool/subtitleSync/i18n/id.ts +241 -0
- package/src/tool/subtitleSync/i18n/it.ts +241 -0
- package/src/tool/subtitleSync/i18n/ja.ts +241 -0
- package/src/tool/subtitleSync/i18n/ko.ts +241 -0
- package/src/tool/subtitleSync/i18n/nl.ts +241 -0
- package/src/tool/subtitleSync/i18n/pl.ts +241 -0
- package/src/tool/subtitleSync/i18n/pt.ts +241 -0
- package/src/tool/subtitleSync/i18n/ru.ts +241 -0
- package/src/tool/subtitleSync/i18n/sv.ts +241 -0
- package/src/tool/subtitleSync/i18n/tr.ts +241 -0
- package/src/tool/subtitleSync/i18n/zh.ts +241 -0
- package/src/tool/subtitleSync/index.ts +15 -7
- package/src/tool/timelapseCalculator/i18n/de.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/fr.ts +2 -2
- package/src/tool/timelapseCalculator/i18n/id.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/it.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ja.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ko.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/nl.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/pl.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/pt.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/ru.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/sv.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/tr.ts +169 -0
- package/src/tool/timelapseCalculator/i18n/zh.ts +169 -0
- package/src/tool/timelapseCalculator/index.ts +16 -8
- package/src/tool/tvDistance/i18n/de.ts +223 -0
- package/src/tool/tvDistance/i18n/en.ts +1 -1
- package/src/tool/tvDistance/i18n/es.ts +1 -1
- package/src/tool/tvDistance/i18n/fr.ts +1 -1
- package/src/tool/tvDistance/i18n/id.ts +223 -0
- package/src/tool/tvDistance/i18n/it.ts +223 -0
- package/src/tool/tvDistance/i18n/ja.ts +223 -0
- package/src/tool/tvDistance/i18n/ko.ts +223 -0
- package/src/tool/tvDistance/i18n/nl.ts +223 -0
- package/src/tool/tvDistance/i18n/pl.ts +223 -0
- package/src/tool/tvDistance/i18n/pt.ts +223 -0
- package/src/tool/tvDistance/i18n/ru.ts +223 -0
- package/src/tool/tvDistance/i18n/sv.ts +223 -0
- package/src/tool/tvDistance/i18n/tr.ts +223 -0
- package/src/tool/tvDistance/i18n/zh.ts +223 -0
- package/src/tool/tvDistance/index.ts +15 -7
- package/src/tool/videoFrameExtractor/i18n/de.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/en.ts +1 -1
- package/src/tool/videoFrameExtractor/i18n/es.ts +1 -1
- package/src/tool/videoFrameExtractor/i18n/fr.ts +1 -1
- package/src/tool/videoFrameExtractor/i18n/id.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/it.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ja.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ko.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/nl.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/pl.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/pt.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/ru.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/sv.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/tr.ts +235 -0
- package/src/tool/videoFrameExtractor/i18n/zh.ts +235 -0
- package/src/tool/videoFrameExtractor/index.ts +16 -8
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
|
|
3
|
+
|
|
4
|
+
const slug = 'chromatic-lens-extracao-paleta-cores-online';
|
|
5
|
+
const title = 'Chromatic Lens: Extração de Paleta de Cores Online';
|
|
6
|
+
const description = 'Extraia paletas de cores profissionais de qualquer imagem gratuitamente. Identifique cores dominantes nas suas fotos usando algoritmos matemáticos.';
|
|
7
|
+
|
|
8
|
+
const ui: ChromaticLensUI = {
|
|
9
|
+
dropTitle: "Analisar Cores",
|
|
10
|
+
dropSubtitle: "Arraste uma imagem para extrair o seu ADN cromático.",
|
|
11
|
+
processingLabel: "A extrair paleta...",
|
|
12
|
+
paletteTitle: "Paleta Extraída",
|
|
13
|
+
copyLabel: "Copiar HEX",
|
|
14
|
+
copiedLabel: "Copiado!",
|
|
15
|
+
colorCountLabel: "Número de cores",
|
|
16
|
+
changeImage: "Alterar imagem",
|
|
17
|
+
faqTitle: "Perguntas frequentes sobre extração de cores",
|
|
18
|
+
bibliographyTitle: "Recursos e documentação técnica"
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const faq: ChromaticLensLocaleContent['faq'] = [
|
|
22
|
+
{
|
|
23
|
+
question: "Como funciona a extração de cores?",
|
|
24
|
+
answer: "Utilizamos o algoritmo 'Median Cut', que agrupa os píxeis da imagem de acordo com a sua proximidade no espaço de cor RGB para encontrar os tons mais representativos.",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: "Posso copiar as cores para o meu editor de design?",
|
|
28
|
+
answer: "Sim, ao clicar em cada cor, o código HEX será automaticamente copiado para a sua área de transferência, pronto para ser colado no Photoshop, Figma ou CSS.",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
question: "Que tipos de imagem posso analisar?",
|
|
32
|
+
answer: "Qualquer ficheiro JPG, PNG ou WebP. O processamento é local, pelo que imagens grandes serão analisadas rapidamente sem consumir dados de rede.",
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const howTo: ChromaticLensLocaleContent['howTo'] = [
|
|
37
|
+
{
|
|
38
|
+
name: "Carregar a imagem",
|
|
39
|
+
text: "Carregue a fotografia da qual deseja extrair inspiração cromática.",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "Ajustar precisão",
|
|
43
|
+
text: "Selecione quantas cores dominantes deseja que a ferramenta identifique (de 3 a 12).",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Analisar o resultado",
|
|
47
|
+
text: "A paleta aparecerá instantaneamente com os seus códigos hexadecimais correspondentes.",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "Copiar e usar",
|
|
51
|
+
text: "Clique nos tons para os guardar e aplicar no seu projeto de design.",
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const bibliography: ChromaticLensLocaleContent['bibliography'] = [
|
|
56
|
+
{
|
|
57
|
+
name: "Median Cut Algorithm - Wikipedia",
|
|
58
|
+
url: "https://en.wikipedia.org/wiki/Median_cut",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: "Teoria da Cor para Designers",
|
|
62
|
+
url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const seo: ChromaticLensLocaleContent['seo'] = [
|
|
67
|
+
{
|
|
68
|
+
type: 'summary',
|
|
69
|
+
title: 'Extração Inteligente de Paleta de Cores',
|
|
70
|
+
items: [
|
|
71
|
+
'Algoritmo profissional Median Cut para análise de cores',
|
|
72
|
+
'Extraia 3-12 cores dominantes de qualquer imagem',
|
|
73
|
+
'Códigos HEX copiáveis diretamente para a área de transferência',
|
|
74
|
+
'Processamento 100% local - ideal para criativos'
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{ type: 'title', text: 'Extração de Paleta de Cores: Ciência e Design', level: 2 },
|
|
78
|
+
{ type: 'paragraph', html: 'Já se perguntou por que uma fotografia de filme parece tão harmoniosa? Não é coincidência; é a teoria da cor em ação. O Chromatic Lens permite extrair essa harmonia diretamente do píxel, transformando-a em códigos HEX utilizáveis nos seus projetos de design.' },
|
|
79
|
+
|
|
80
|
+
{ type: 'stats', items: [
|
|
81
|
+
{ value: 'Instantânea', label: 'Análise de Cores', icon: 'mdi:lightning-bolt' },
|
|
82
|
+
{ value: '100%', label: 'Privacidade Local', icon: 'mdi:lock' },
|
|
83
|
+
{ value: 'RGB', label: 'Espaço de Cor Preciso', icon: 'mdi:palette' }
|
|
84
|
+
], columns: 3 },
|
|
85
|
+
|
|
86
|
+
{ type: 'title', text: 'O Algoritmo Median Cut Explicado', level: 3 },
|
|
87
|
+
{ type: 'paragraph', html: 'A extração inteligente de paletas não é uma simples amostragem aleatória de píxeis. Utiliza o algoritmo Median Cut, uma técnica de partição recursiva que assegura uma representação fiel:' },
|
|
88
|
+
{ type: 'list', items: [
|
|
89
|
+
'<strong>Divisão Recursiva:</strong> O \"cubo de cores\" RGB da imagem é dividido recursivamente em caixas mais pequenas.',
|
|
90
|
+
'<strong>Equilíbrio de Volume:</strong> Cada partição procura agrupar píxeis do mesmo espaço de cor com volumes semelhantes.',
|
|
91
|
+
'<strong>Média Ponderada:</strong> A cor resultante de cada caixa é a média de todos os píxeis que contém.',
|
|
92
|
+
'<strong>Representação Fiel:</strong> As cores dominantes refletem a atmosfera visual real da imagem, não uma simples amostra.'
|
|
93
|
+
], icon: 'mdi:check' },
|
|
94
|
+
|
|
95
|
+
{ type: 'card', title: 'Fluxo de Trabalho Criativo', html: 'Ideal para desenvolvedores web, designers UX/UI, artistas digitais e criativos que procuram capturar instantaneamente a essência visual de uma fotografia, filme ou referência visual para aplicar nas suas interfaces, ilustrações ou paletas de marca.' },
|
|
96
|
+
|
|
97
|
+
{ type: 'title', text: 'Casos de Uso em Design Digital', level: 3 },
|
|
98
|
+
{ type: 'comparative', items: [
|
|
99
|
+
{
|
|
100
|
+
title: 'Designers UX/UI',
|
|
101
|
+
description: 'Extraia paletas de imagens hero para criar interfaces coesas',
|
|
102
|
+
icon: 'mdi:palette',
|
|
103
|
+
points: [
|
|
104
|
+
'Cores de fundo harmoniosas',
|
|
105
|
+
'Botões e elementos secundários',
|
|
106
|
+
'Contraste calculado automaticamente'
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: 'Desenvolvedores Web',
|
|
111
|
+
description: 'Crie folhas de estilo CSS diretamente de referências visuais',
|
|
112
|
+
icon: 'mdi:code-braces',
|
|
113
|
+
points: [
|
|
114
|
+
'Copie HEX diretamente para CSS',
|
|
115
|
+
'Variáveis de cor em SCSS/CSS',
|
|
116
|
+
'Temas coesos sem design prévio'
|
|
117
|
+
],
|
|
118
|
+
highlight: true
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: 'Artistas Digitais e Ilustradores',
|
|
122
|
+
description: 'Capture referências cromáticas de filmes, natureza ou arte',
|
|
123
|
+
icon: 'mdi:brush',
|
|
124
|
+
points: [
|
|
125
|
+
'Paletas de referência de obras-primas',
|
|
126
|
+
'Estudos de cor cinematográficos',
|
|
127
|
+
'Inspiração visual imediata'
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
title: 'Especialistas em Branding',
|
|
132
|
+
description: 'Desenvolva identidades visuais baseadas em fotografias guia',
|
|
133
|
+
icon: 'mdi:tag-multiple',
|
|
134
|
+
points: [
|
|
135
|
+
'Extraia as cores da marca a partir de imagens',
|
|
136
|
+
'Crie guias cromáticos profissionais',
|
|
137
|
+
'Garanta a consistência visual'
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
], columns: 2 },
|
|
141
|
+
|
|
142
|
+
{ type: 'title', text: 'Teoria da Cor Aplicada', level: 3 },
|
|
143
|
+
{ type: 'table', headers: ['Conceito de Cor', 'Definição', 'Aplicação Prática'], rows: [
|
|
144
|
+
['Harmonia Cromática', 'Combinação de cores visualmente equilibrada', 'Identidade visual coesa na UI'],
|
|
145
|
+
['Contraste', 'Diferença de brilho entre cores', 'Legibilidade e hierarquia visual'],
|
|
146
|
+
['Saturação', 'Intensidade da cor de um tom', 'Profissionalismo (baixa) vs Energia (alta)'],
|
|
147
|
+
['Temperatura da Cor', 'Cores quentes (vermelhos) vs cores frias (azuis)', 'Psicologia emocional do design'],
|
|
148
|
+
['Paleta Monocromática', 'Variações de um único tom', 'Elegância e minimalismo']
|
|
149
|
+
] },
|
|
150
|
+
|
|
151
|
+
{ type: 'proscons', items: [
|
|
152
|
+
{
|
|
153
|
+
pro: 'Precisão matemática na extração - não é uma seleção visual aproximada',
|
|
154
|
+
con: 'Cores quase invisíveis podem ser incluídas se tiverem muitos píxeis'
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
pro: 'Cópia instantânea para a área de transferência - integração perfeita no fluxo de trabalho',
|
|
158
|
+
con: 'Necessita de um navegador moderno compatível com a API Canvas'
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
pro: 'Privacidade total - análise 100% local sem submissão de dados',
|
|
162
|
+
con: 'Nenhum histórico de análises anteriores guardado'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
pro: 'Compatível com qualquer formato de imagem digital',
|
|
166
|
+
con: 'As cores finais dependem da compressão e qualidade da imagem'
|
|
167
|
+
}
|
|
168
|
+
], proTitle: 'Vantagens', conTitle: 'Limitações' },
|
|
169
|
+
|
|
170
|
+
{ type: 'diagnostic', variant: 'success', title: 'Representação Realista de Cores', icon: 'mdi:check-circle-outline', badge: 'Algoritmo Avançado', html: 'Ao contrário de ferramentas que simplesmente amostram píxeis aleatórios, o nosso sistema utiliza o algoritmo Median Cut que pondera a contagem total de píxeis de cada tom, garantendo que a paleta resultante reflita fielmente a atmosfera visual e a psicologia das cores da imagem original.' },
|
|
171
|
+
|
|
172
|
+
{ type: 'glossary', items: [
|
|
173
|
+
{
|
|
174
|
+
term: 'Median Cut',
|
|
175
|
+
definition: 'Algoritmo de quantização de cor que divide recursivamente o espaço RGB em caixas, garantindo uma distribuição uniforme. Historicamente utilizado na tecnologia de cores indexadas e GIF.'
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
term: 'Espaço de Cor RGB',
|
|
179
|
+
definition: 'Modelo de cor baseado em vermelho, verde e azul. Cada cor é representada como uma combinação destes três valores (0-255). Padrão em ecrãs digitais e web.'
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
term: 'Código HEX',
|
|
183
|
+
definition: 'Notação hexadecimal de 6 dígitos (#RRGGBB) que representa a cor na web: #FF0000 (vermelho), #00FF00 (verde), #0000FF (azul). Universal em CSS, Figma e Adobe.'
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
term: 'Saturação de Cor',
|
|
187
|
+
definition: 'Intensidade ou pureza da cor. Alta saturation = cor viva; baixa saturation = cor acinzentada. Afeta a perceção emocional do design.'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
term: 'Harmonia Cromática',
|
|
191
|
+
definition: 'A seleção e combinação de cores para obter um resultado visualmente agradável. Pode ser monocromática, complementar, análoga ou triádica.'
|
|
192
|
+
}
|
|
193
|
+
] },
|
|
194
|
+
|
|
195
|
+
{ type: 'message', title: 'Análise Cromática Profissional', ariaLabel: 'Informação técnica sobre análise de cores', html: 'O Chromatic Lens transforma a análise visual manual em precisão algorítmica. Não se limita a extrair cores: captura a essência emocional e visual de qualquer imagem, colocando-a diretamente na sua área de transferência como códigos HEX prontos a usar. Privacidade total, sem limites no volume de análise.' },
|
|
196
|
+
|
|
197
|
+
{ type: 'title', text: 'Design a partir de Inspiração Visual', level: 3 },
|
|
198
|
+
{ type: 'paragraph', html: 'A melhor paleta de cores é aquela que captura a intenção visual da sua referência. O Chromatic Lens automatiza o que costumava ser um processo manual: observar, analisar, anotar. Agora, basta arrastar uma imagem e obter códigos HEX profissionais em segundos.' }
|
|
199
|
+
];
|
|
200
|
+
|
|
201
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
202
|
+
'@context': 'https://schema.org',
|
|
203
|
+
'@type': 'FAQPage',
|
|
204
|
+
mainEntity: faq.map((item) => ({
|
|
205
|
+
'@type': 'Question',
|
|
206
|
+
name: item.question,
|
|
207
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
208
|
+
})),
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const howToSchema: WithContext<HowTo> = {
|
|
212
|
+
'@context': 'https://schema.org',
|
|
213
|
+
'@type': 'HowTo',
|
|
214
|
+
name: title,
|
|
215
|
+
description,
|
|
216
|
+
step: howTo.map((step) => ({
|
|
217
|
+
'@type': 'HowToStep',
|
|
218
|
+
name: step.name,
|
|
219
|
+
text: step.text,
|
|
220
|
+
})),
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
224
|
+
'@context': 'https://schema.org',
|
|
225
|
+
'@type': 'SoftwareApplication',
|
|
226
|
+
name: title,
|
|
227
|
+
description,
|
|
228
|
+
applicationCategory: 'UtilitiesApplication',
|
|
229
|
+
operatingSystem: 'Web',
|
|
230
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
231
|
+
inLanguage: 'pt',
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
export const content: ChromaticLensLocaleContent = {
|
|
235
|
+
slug,
|
|
236
|
+
title,
|
|
237
|
+
description,
|
|
238
|
+
ui,
|
|
239
|
+
seo,
|
|
240
|
+
faqTitle: "Perguntas Frequentes",
|
|
241
|
+
faq,
|
|
242
|
+
bibliographyTitle: "Referências",
|
|
243
|
+
bibliography,
|
|
244
|
+
howTo,
|
|
245
|
+
schemas: [faqSchema as any, howToSchema as any, appSchema],
|
|
246
|
+
};
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ChromaticLensUI, ChromaticLensLocaleContent } from '../index';
|
|
3
|
+
|
|
4
|
+
const slug = 'chromatic-lens-color-palette-extraction-online';
|
|
5
|
+
const title = 'Chromatic Lens: онлайн извлечение цветовой палитры';
|
|
6
|
+
const description = 'Извлекайте профессиональные цветовые палитры из любого изображения бесплатно. Определяйте доминирующие цвета на ваших фотографиях с помощью математических алгоритмов.';
|
|
7
|
+
|
|
8
|
+
const ui: ChromaticLensUI = {
|
|
9
|
+
dropTitle: "Анализ цветов",
|
|
10
|
+
dropSubtitle: "Перетащите изображение, чтобы извлечь его хроматическую ДНК.",
|
|
11
|
+
processingLabel: "Извлечение палитры...",
|
|
12
|
+
paletteTitle: "Извлеченная палитра",
|
|
13
|
+
copyLabel: "Копировать HEX",
|
|
14
|
+
copiedLabel: "Скопировано!",
|
|
15
|
+
colorCountLabel: "Количество цветов",
|
|
16
|
+
changeImage: "Изменить изображение",
|
|
17
|
+
faqTitle: "Часто задаваемые вопросы об извлечении цвета",
|
|
18
|
+
bibliographyTitle: "Ресурсы и техническая документация"
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const faq: ChromaticLensLocaleContent['faq'] = [
|
|
22
|
+
{
|
|
23
|
+
question: "Как работает извлечение цвета?",
|
|
24
|
+
answer: "Мы используем алгоритм «Median Cut», который группирует пиксели изображения в соответствии с их близостью в цветовом пространстве RGB для поиска наиболее репрезентативных тонов.",
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: "Могу ли я копировать цвета в свой дизайнерский редактор?",
|
|
28
|
+
answer: "Да, при нажатии на каждый цвет HEX-код будет автоматически скопирован в буфер обмена, готовый для вставки в Photoshop, Figma или CSS.",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
question: "Какие типы изображений я могу анализировать?",
|
|
32
|
+
answer: "Любой файл JPG, PNG или WebP. Обработка локальная, поэтому большие изображения будут анализироваться быстро без потребления сетевого трафика.",
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const howTo: ChromaticLensLocaleContent['howTo'] = [
|
|
37
|
+
{
|
|
38
|
+
name: "Загрузите изображение",
|
|
39
|
+
text: "Загрузите фотографию, из которой вы хотите извлечь цветовое вдохновение.",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: "Настройте точность",
|
|
43
|
+
text: "Выберите, сколько доминирующих цветов должен определить инструмент (от 3 до 12).",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Проанализируйте результат",
|
|
47
|
+
text: "Палитра появится мгновенно с соответствующими шестнадцатеричными кодами.",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: "Копируйте и используйте",
|
|
51
|
+
text: "Нажимайте на тона, чтобы сохранить их и применить в своем дизайнерском проекте.",
|
|
52
|
+
},
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
const bibliography: ChromaticLensLocaleContent['bibliography'] = [
|
|
56
|
+
{
|
|
57
|
+
name: "Алгоритм Median Cut — Википедия",
|
|
58
|
+
url: "https://ru.wikipedia.org/wiki/Median_cut",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: "Теория цвета для дизайнеров",
|
|
62
|
+
url: "https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/",
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const seo: ChromaticLensLocaleContent['seo'] = [
|
|
67
|
+
{
|
|
68
|
+
type: 'summary',
|
|
69
|
+
title: 'Интеллектуальное извлечение цветовой палитры',
|
|
70
|
+
items: [
|
|
71
|
+
'Профессиональный алгоритм Median Cut для анализа цвета',
|
|
72
|
+
'Извлечение 3–12 доминирующих цветов из любого изображения',
|
|
73
|
+
'HEX-коды копируются непосредственно в буфер обмена',
|
|
74
|
+
'100% локальная обработка — идеально для креативщиков'
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{ type: 'title', text: 'Извлечение цветовой палитры: наука и дизайн', level: 2 },
|
|
78
|
+
{ type: 'paragraph', html: 'Вы когда-нибудь задумывались, почему кадр из фильма кажется таким гармоничным? Это не случайность; это теория цвета в действии. Chromatic Lens позволяет извлекать эту гармонию прямо из пикселей, превращая их в HEX-коды, пригодные для использования в ваших дизайнерских проектах.' },
|
|
79
|
+
|
|
80
|
+
{ type: 'stats', items: [
|
|
81
|
+
{ value: 'Мгновенно', label: 'Анализ цвета', icon: 'mdi:lightning-bolt' },
|
|
82
|
+
{ value: '100%', label: 'Локальная конфиденциальность', icon: 'mdi:lock' },
|
|
83
|
+
{ value: 'RGB', label: 'Точное цветовое пространство', icon: 'mdi:palette' }
|
|
84
|
+
], columns: 3 },
|
|
85
|
+
|
|
86
|
+
{ type: 'title', text: 'Объяснение алгоритма Median Cut', level: 3 },
|
|
87
|
+
{ type: 'paragraph', html: 'Интеллектуальное извлечение палитры — это не простая случайная выборка пикселей. Оно использует алгоритм Median Cut, метод рекурсивного разделения, который обеспечивает верное представление:' },
|
|
88
|
+
{ type: 'list', items: [
|
|
89
|
+
'<strong>Рекурсивное деление:</strong> «Цветовой куб» RGB изображения рекурсивно делится на более мелкие блоки.',
|
|
90
|
+
'<strong>Баланс объема:</strong> Каждый раздел стремится сгруппировать пиксели одного цветового пространства с похожими объемами.',
|
|
91
|
+
'<strong>Средневзвешенное значение:</strong> Результирующий цвет каждого блока является средним значением всех содержащихся в нем пикселей.',
|
|
92
|
+
'<strong>Точное представление:</strong> Доминирующие цвета отражают реальную визуальную атмосферу изображения, а не просто случайную пробу.'
|
|
93
|
+
], icon: 'mdi:check' },
|
|
94
|
+
|
|
95
|
+
{ type: 'card', title: 'Творческий рабочий процесс', html: 'Идеально подходит для веб-разработчиков, UX/UI-дизайнеров, цифровых художников и креативщиков, стремящихся мгновенно уловить визуальную суть фотографии, фильма или визуального референса для применения в своих интерфейсах, иллюстрациях или брендовых палитрах.' },
|
|
96
|
+
|
|
97
|
+
{ type: 'title', text: 'Варианты использования в цифровом дизайне', level: 3 },
|
|
98
|
+
{ type: 'comparative', items: [
|
|
99
|
+
{
|
|
100
|
+
title: 'UX/UI дизайнеры',
|
|
101
|
+
description: 'Извлекайте палитры из главных изображений для создания целостных интерфейсов',
|
|
102
|
+
icon: 'mdi:palette',
|
|
103
|
+
points: [
|
|
104
|
+
'Гармоничные фоновые цвета',
|
|
105
|
+
'Кнопки и второстепенные элементы',
|
|
106
|
+
'Автоматически рассчитываемый контраст'
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: 'Веб разработчики',
|
|
111
|
+
description: 'Создавайте таблицы стилей CSS непосредственно из визуальных референсов',
|
|
112
|
+
icon: 'mdi:code-braces',
|
|
113
|
+
points: [
|
|
114
|
+
'Копируйте HEX прямо в CSS',
|
|
115
|
+
'Цветовые переменные в SCSS/CSS',
|
|
116
|
+
'Целостные темы без предварительного дизайна'
|
|
117
|
+
],
|
|
118
|
+
highlight: true
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
title: 'Цифровые художники и иллюстраторы',
|
|
122
|
+
description: 'Захватывайте хроматические референсы из фильмов, природы или искусства',
|
|
123
|
+
icon: 'mdi:brush',
|
|
124
|
+
points: [
|
|
125
|
+
'Справочные палитры из шедевров',
|
|
126
|
+
'Кинематографические цветовые исследования',
|
|
127
|
+
'Мгновенное визуальное вдохновение'
|
|
128
|
+
]
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
title: 'Специалисты по брендингу',
|
|
132
|
+
description: 'Разрабатывайте визуальную идентичность на основе направляющих фотографий',
|
|
133
|
+
icon: 'mdi:tag-multiple',
|
|
134
|
+
points: [
|
|
135
|
+
'Извлекайте цвета бренда из изображений',
|
|
136
|
+
'Создавайте профессиональные хроматические руководства',
|
|
137
|
+
'Обеспечивайте визуальную согласованность'
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
], columns: 2 },
|
|
141
|
+
|
|
142
|
+
{ type: 'title', text: 'Прикладная теория цвета', level: 3 },
|
|
143
|
+
{ type: 'table', headers: ['Концепция цвета', 'Определение', 'Практическое применение'], rows: [
|
|
144
|
+
['Цветовая гармония', 'Визуально сбалансированное сочетание цветов', 'Целостная визуальная идентичность в UI'],
|
|
145
|
+
['Контраст', 'Разница в яркости между цветами', 'Читаемость и визуальная иерархия'],
|
|
146
|
+
['Насыщенность', 'Интенсивность цвета тона', 'Профессионализм (низкая) vs Энергия (высокая)'],
|
|
147
|
+
['Цветовая температура', 'Теплые цвета (красные) vs холодные (синие)', 'Эмоциональная психология дизайна'],
|
|
148
|
+
['Монохромная палитра', 'Вариации одного тона', 'Элегантность и минимализм']
|
|
149
|
+
] },
|
|
150
|
+
|
|
151
|
+
{ type: 'proscons', items: [
|
|
152
|
+
{
|
|
153
|
+
pro: 'Математическая точность при извлечении — не приблизительный визуальный выбор',
|
|
154
|
+
con: 'Могут быть включены едва видимые цвета, если в них много пикселей'
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
pro: 'Мгновенное копирование в буфер обмена — идеальная интеграция с рабочим процессом',
|
|
158
|
+
con: 'Требуется современный браузер, совместимый с Canvas API'
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
pro: 'Полная конфиденциальность — 100% локальный анализ без отправки данных',
|
|
162
|
+
con: 'История предыдущих анализов не сохраняется'
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
pro: 'Совместимость с любым форматом цифровых изображений',
|
|
166
|
+
con: 'Конечные цвета зависят от сжатия и качества изображения'
|
|
167
|
+
}
|
|
168
|
+
], proTitle: 'Преимущества', conTitle: 'Ограничения' },
|
|
169
|
+
|
|
170
|
+
{ type: 'diagnostic', variant: 'success', title: 'Реалистичное представление цвета', icon: 'mdi:check-circle-outline', badge: 'Продвинутый алгоритм', html: 'В отличие от инструментов, которые просто делают выборку случайных пикселей, наша система использует алгоритм Median Cut, который взвешивает общее количество пикселей каждого тона, гарантируя, что полученная палитра точно отражает визуальную атмосферу и психологию цвета исходного изображения.' },
|
|
171
|
+
|
|
172
|
+
{ type: 'glossary', items: [
|
|
173
|
+
{
|
|
174
|
+
term: 'Median Cut',
|
|
175
|
+
definition: 'Алгоритм квантования цвета, который рекурсивно делит пространство RGB на блоки, обеспечивая равномерное распределение. Исторически использовался в технологиях GIF и индексированных цветов.'
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
term: 'Цветовое пространство RGB',
|
|
179
|
+
definition: 'Цветовая модель, основанная на красном, зеленом и синем цветах. Каждый цвет представлен как комбинация этих трех значений (0–255). Стандарт для цифровых экранов и веб-интерфейсов.'
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
term: 'HEX-код',
|
|
183
|
+
definition: '6-значная шестнадцатеричная запись (#RRGGBB), представляющая цвет в вебе: #FF0000 (красный), #00FF00 (зеленый), #0000FF (синий). Универсальный стандарт в CSS, Figma и Adobe.'
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
term: 'Насыщенность цвета',
|
|
187
|
+
definition: 'Интенсивность или чистота цвета. Высокая насыщенность = яркий цвет; низкая насыщенность = сероватый цвет. Влияет на эмоциональное восприятие дизайна.'
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
term: 'Цветовая гармония',
|
|
191
|
+
definition: 'Выбор и сочетание цветов, приводящие к визуально приятному результату. Может быть монохромным, комплементарным, аналогичным или триадным.'
|
|
192
|
+
}
|
|
193
|
+
] },
|
|
194
|
+
|
|
195
|
+
{ type: 'message', title: 'Профессиональный хроматический анализ', ariaLabel: 'Техническая информация об анализе цвета', html: 'Chromatic Lens превращает ручной визуальный анализ в алгоритмическую точность. Он не просто извлекает цвета: он улавливает эмоциональную и визуальную суть любого изображения, помещая её прямо в ваш буфер обмена в виде готовых к использованию HEX-кодов. Полная конфиденциальность, без ограничений по объему анализа.' },
|
|
196
|
+
|
|
197
|
+
{ type: 'title', text: 'Дизайн на основе визуального вдохновения', level: 3 },
|
|
198
|
+
{ type: 'paragraph', html: 'Лучшая цветовая палитра — та, которая улавливает визуальный замысел вашего референса. Chromatic Lens автоматизирует то, что раньше было ручным процессом: наблюдение, анализ, запись. Теперь просто перетащите изображение и получите профессиональные HEX-коды за считанные секунды.' }
|
|
199
|
+
];
|
|
200
|
+
|
|
201
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
202
|
+
'@context': 'https://schema.org',
|
|
203
|
+
'@type': 'FAQPage',
|
|
204
|
+
mainEntity: faq.map((item) => ({
|
|
205
|
+
'@type': 'Question',
|
|
206
|
+
name: item.question,
|
|
207
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
208
|
+
})),
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const howToSchema: WithContext<HowTo> = {
|
|
212
|
+
'@context': 'https://schema.org',
|
|
213
|
+
'@type': 'HowTo',
|
|
214
|
+
name: title,
|
|
215
|
+
description,
|
|
216
|
+
step: howTo.map((step) => ({
|
|
217
|
+
'@type': 'HowToStep',
|
|
218
|
+
name: step.name,
|
|
219
|
+
text: step.text,
|
|
220
|
+
})),
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
224
|
+
'@context': 'https://schema.org',
|
|
225
|
+
'@type': 'SoftwareApplication',
|
|
226
|
+
name: title,
|
|
227
|
+
description,
|
|
228
|
+
applicationCategory: 'UtilitiesApplication',
|
|
229
|
+
operatingSystem: 'Web',
|
|
230
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
231
|
+
inLanguage: 'ru',
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
export const content: ChromaticLensLocaleContent = {
|
|
235
|
+
slug,
|
|
236
|
+
title,
|
|
237
|
+
description,
|
|
238
|
+
ui,
|
|
239
|
+
seo,
|
|
240
|
+
faqTitle: "Часто задаваемые вопросы",
|
|
241
|
+
faq,
|
|
242
|
+
bibliographyTitle: "Ссылки",
|
|
243
|
+
bibliography,
|
|
244
|
+
howTo,
|
|
245
|
+
schemas: [faqSchema as any, howToSchema as any, appSchema],
|
|
246
|
+
};
|