You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, language = "ru") {
// Create a container to hold the image and the mood analysis results
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.fontFamily = '"Segoe UI", Helvetica, Arial, sans-serif';
container.style.backgroundColor = '#f7f9fc';
container.style.padding = '20px';
container.style.borderRadius = '12px';
container.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
container.style.maxWidth = '600px';
container.style.margin = '0 auto';
// Set up canvas for image processing and display
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Scale down image for processing and nice display if it's too large
const MAX_WIDTH = 500;
let width = originalImg.width;
let height = originalImg.height;
if (width > MAX_WIDTH) {
height = Math.round((MAX_WIDTH / width) * height);
width = MAX_WIDTH;
}
canvas.width = width;
canvas.height = height;
canvas.style.borderRadius = '8px';
canvas.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
canvas.style.maxWidth = '100%';
canvas.style.height = 'auto';
// Draw image onto canvas
ctx.drawImage(originalImg, 0, 0, width, height);
container.appendChild(canvas);
// Get pixel data to analyze colors
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
let rSum = 0, gSum = 0, bSum = 0;
let pixelCount = 0;
// Sample pixels (every 4th pixel to speed up processing)
for (let i = 0; i < data.length; i += 16) {
// Skip mostly transparent pixels
if (data[i + 3] < 128) continue;
rSum += data[i];
gSum += data[i + 1];
bSum += data[i + 2];
pixelCount++;
}
// Default to gray if image is empty or fully transparent
let r = 128, g = 128, b = 128;
if (pixelCount > 0) {
r = Math.round(rSum / pixelCount);
g = Math.round(gSum / pixelCount);
b = Math.round(bSum / pixelCount);
}
// Helper functions for color analysis
function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h * 360, s, l];
}
function determineMood(h, s, l, lang) {
const isRu = lang === 'ru';
let title = "";
let description = "";
if (l < 0.2) {
title = isRu ? "Темное и Таинственное" : "Dark & Mysterious";
description = isRu ? "Мрачные, глубокие тона, создающие загадочную атмосферу." : "Shadowy, somber, and enigmatic.";
} else if (l > 0.8 && s < 0.2) {
title = isRu ? "Воздушное и Мирное" : "Airy & Peaceful";
description = isRu ? "Светлое, минималистичное и спокойное настроение." : "Light, minimalistic, and tranquil.";
} else if (s < 0.15) {
title = isRu ? "Нейтральное и Спокойное" : "Neutral & Calm";
description = isRu ? "Сбалансированное, приземленное и неброское." : "Subtle, balanced, and grounded.";
} else {
if (h < 30 || h > 330) {
if (s > 0.6) {
title = isRu ? "Энергичное и Страстное" : "Energetic & Passionate";
description = isRu ? "Яркие красные и теплые тона несут мощную энергию." : "Vibrant reds and warm tones bring intense energy.";
} else {
title = isRu ? "Теплое и Ностальгическое" : "Warm & Nostalgic";
description = isRu ? "Приглушенные теплые оттенки создают чувство уюта." : "Muted warm tones bring a sense of comfort.";
}
} else if (h >= 30 && h < 70) {
title = isRu ? "Жизнерадостное и Оптимистичное" : "Cheerful & Optimistic";
description = isRu ? "Желтые и золотые оттенки излучают позитив и радость." : "Yellows and golds radiate positivity and joy.";
} else if (h >= 70 && h < 160) {
title = isRu ? "Естественное и Освежающее" : "Natural & Refreshing";
description = isRu ? "Зеленые оттенки ассоциируются с ростом, балансом и природой." : "Green hues evoke growth, balance, and nature.";
} else if (h >= 160 && h < 260) {
if (l < 0.4) {
title = isRu ? "Глубокое и Меланхоличное" : "Deep & Melancholic";
description = isRu ? "Темно-синие тона наводят на размышления и навевают грусть." : "Dark blues suggest introspection and depth.";
} else {
title = isRu ? "Безмятежное и Расслабляющее" : "Serene & Relaxing";
description = isRu ? "Холодные синие оттенки обеспечивают успокаивающую атмосферу." : "Cool blues provide a calming, peaceful atmosphere.";
}
} else if (h >= 260 && h <= 330) {
title = isRu ? "Мечтательное и Творческое" : "Dreamy & Creative";
description = isRu ? "Пурпурные цвета символизируют воображение и мистику." : "Purples and magentas imply imagination and mystery.";
}
}
return { title, description };
}
// Convert average RGB to HSL for psychological analysis
const [h, s, l] = rgbToHsl(r, g, b);
// Determine the mood based on color psychology
const mood = determineMood(h, s, l, language);
const isRu = language === 'ru';
// Create the mood info panel
const moodPanel = document.createElement('div');
moodPanel.style.marginTop = '20px';
moodPanel.style.padding = '20px';
moodPanel.style.backgroundColor = '#ffffff';
moodPanel.style.borderRadius = '10px';
moodPanel.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';
moodPanel.style.width = '100%';
moodPanel.style.boxSizing = 'border-box';
moodPanel.style.textAlign = 'center';
moodPanel.innerHTML = `
<h2 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 22px;">
${isRu ? "Определенное настроение:" : "Detected Mood:"} <br/>
<span style="color: rgb(${Math.max(0, r-40)}, ${Math.max(0, g-40)}, ${Math.max(0, b-40)});">${mood.title}</span>
</h2>
<div style="display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px;">
<div style="width: 40px; height: 40px; border-radius: 50%; background-color: rgb(${r},${g},${b}); border: 2px solid #eaeaea; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"></div>
<span style="color: #7f8c8d; font-size: 15px; font-weight: 500;">
${isRu ? "Доминирующий тон" : "Dominant Vibe"}
</span>
</div>
<p style="margin: 0; color: #555; font-size: 16px; font-style: italic; line-height: 1.4;">
"${mood.description}"
</p>
`;
container.appendChild(moodPanel);
return container;
}Apply Changes
