You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, language = "eng", searchMode = "auto") {
// Synchronously create and return the container so progress can be monitored
const container = document.createElement('div');
container.style.fontFamily = 'system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif';
container.style.textAlign = 'center';
container.style.padding = '24px';
container.style.color = '#333';
container.style.backgroundColor = '#ffffff';
container.style.borderRadius = '12px';
container.style.border = '1px solid #eaeaea';
container.style.maxWidth = '640px';
container.style.margin = '0 auto';
container.style.boxShadow = '0 8px 24px rgba(0,0,0,0.06)';
const header = document.createElement('h2');
header.innerText = 'Image to Music Search Finder';
header.style.marginTop = '0';
header.style.color = '#111';
header.style.fontSize = '20px';
container.appendChild(header);
const statusText = document.createElement('p');
statusText.innerText = 'Preparing image...';
statusText.style.fontWeight = '500';
statusText.style.fontSize = '15px';
statusText.style.color = '#555';
container.appendChild(statusText);
const progressBar = document.createElement('div');
progressBar.style.width = '100%';
progressBar.style.height = '6px';
progressBar.style.backgroundColor = '#f0f0f0';
progressBar.style.borderRadius = '3px';
progressBar.style.overflow = 'hidden';
progressBar.style.margin = '16px 0';
const progressFill = document.createElement('div');
progressFill.style.width = '5%';
progressFill.style.height = '100%';
progressFill.style.backgroundColor = '#3b82f6';
progressFill.style.transition = 'width 0.3s ease';
progressBar.appendChild(progressFill);
container.appendChild(progressBar);
// Start background processing without blocking rendering
(async () => {
try {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = originalImg.naturalWidth || originalImg.width || 300;
canvas.height = originalImg.naturalHeight || originalImg.height || 300;
if (canvas.width > 0 && canvas.height > 0) {
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
}
// Image Content & Mood Analyser (Fallback if OCR finds no text)
let mood = 'Electronic Ambient';
try {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
let r = 0, g = 0, b = 0, count = 0;
// Cap the samples drastically to keep mood calculation virtually instant
const step = Math.max(4, Math.floor((canvas.width * canvas.height) / 10000) * 4);
for (let i = 0; i < imageData.length; i += step) {
if (imageData[i + 3] > 0) { // skip if pixel is highly transparent
r += imageData[i];
g += imageData[i + 1];
b += imageData[i + 2];
count++;
}
}
if (count > 0) {
r = Math.floor(r / count);
g = Math.floor(g / count);
b = Math.floor(b / count);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
if (brightness > 210) mood = "Happy Uplifting Pop";
else if (brightness < 50) mood = "Dark Ambient Sub Bass";
else if (r > g + 40 && r > b + 40) mood = "Energetic Rock or Synthwave";
else if (b > r + 40 && b > g + 40) mood = "Calm Chillout Dream Pop";
else if (g > r + 30 && g > b + 30) mood = "Nature Relaxing Acoustic";
else if (brightness > 130) mood = "Cinematic Epic Soundtrack";
else mood = "Deep Melancholic Electronic";
}
} catch(e) {
console.warn("Could not extract mood from image pixels. CORS rules often apply.", e);
}
let query = "";
let isTextSearch = false;
if (searchMode === "auto" || searchMode === "text") {
progressFill.style.width = '10%';
statusText.innerText = 'Setting up OCR engine...';
// Dynamically import lightweight Tesseract for reading screenshot titles / lyrics
if (typeof Tesseract === 'undefined') {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
document.head.appendChild(script);
await new Promise((resolve, reject) => {
script.onload = resolve;
script.onerror = () => reject(new Error("Failed to load Tesseract.js"));
});
}
const result = await Tesseract.recognize(canvas, language, {
logger: m => {
if (m.status === 'recognizing text' || m.status === 'loading tesseract core' || m.status === 'loading language traineddata') {
let pct = (m.progress || 0) * 100;
// Precursor tasks get 10-50%, Active OCR gets 50-100%
if (m.status !== 'recognizing text') {
pct = 10 + (pct * 0.4);
} else {
pct = 50 + (pct * 0.5);
}
progressFill.style.width = Math.round(pct) + '%';
statusText.innerText = m.status === 'recognizing text' ? 'Reading text from image...' : 'Downloading OCR engine...';
}
}
});
// Refine extracted text to a useful search query
let text = result?.data?.text?.trim() || "";
if (text.length > 2) {
let lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 2);
if (lines.length > 0) {
query = lines.slice(0, 3).join(' ')
.replace(/[^a-zA-Z0-9\s-]/g, ' ')
.replace(/\s+/g, ' ')
.trim();
// Cut query down to max 10 words to prevent 400 errors across search platforms
let words = query.split(' ');
if (words.length > 10) {
query = words.slice(0, 10).join(' ');
}
if (query.length > 2) {
isTextSearch = true;
}
}
}
}
// Fallback to mood if there naturally wasn't textual detail in the image
if (!isTextSearch) {
query = mood + " music";
isTextSearch = false;
}
let encodedQuery = encodeURIComponent(query);
statusText.remove();
progressBar.remove();
// Build Final Dynamic UI Container
const resultDiv = document.createElement('div');
resultDiv.style.textAlign = 'left';
resultDiv.style.animation = 'fadeIn 0.5s ease';
const styleId = 'music-search-hover-styles';
if (!document.getElementById(styleId)) {
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.music-platform-link:hover {
filter: brightness(1.1) contrast(1.05);
transform: translateY(-2px);
}
.music-platform-link {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.12);
}
`;
document.head.appendChild(style);
}
let finalHtml = `
<div style="background:#f4f7fa; padding: 22px; border-radius: 8px; border: 1px solid #e0e7ff;">
<h3 style="margin-top:0; font-size:15px; color:#475569; text-transform:uppercase; letter-spacing:0.5px;">
Search Approach:
<span style="color:#0f172a; font-weight:700;">
${isTextSearch ? 'Text Found on Image' : 'Image Mood Match'}
</span>
</h3>
${isTextSearch
? `<p style="color:#64748b; font-size:14px; margin-bottom:8px;">We detected the following text to aid your music search:</p>
<div style="background:#ffffff; padding:12px 16px; border-left:4px solid #10b981; font-style:italic; font-size:17px; color:#1e293b; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); word-break:break-word;">
"${query}"
</div>`
: `<p style="color:#64748b; font-size:14px; margin-bottom:8px;">No prominent text detected. Cultivating matches based on visual mood:</p>
<div style="background:#ffffff; padding:12px 16px; border-left:4px solid #3b82f6; font-style:italic; font-size:17px; font-weight:600; color:#1e293b; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); word-break:break-word;">
"${query}"
</div>`
}
<h3 style="margin-top:26px; font-size:16px; color:#0f172a; margin-bottom:14px; text-align:center;">Hunt For Mixes & Tracks Via:</h3>
<div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap:12px;">
<a class="music-platform-link" href="https://www.youtube.com/results?search_query=${encodedQuery}" target="_blank" style="display:block; text-align:center; padding:12px 10px; background:#ff0000; color:#fff; text-decoration:none; border-radius:6px; font-weight:600; font-size:14px;">YouTube</a>
<a class="music-platform-link" href="https://open.spotify.com/search/${encodedQuery}" target="_blank" style="display:block; text-align:center; padding:12px 10px; background:#1db954; color:#fff; text-decoration:none; border-radius:6px; font-weight:600; font-size:14px;">Spotify</a>
<a class="music-platform-link" href="https://music.apple.com/search?term=${encodedQuery}" target="_blank" style="display:block; text-align:center; padding:12px 10px; background:#fa243c; color:#fff; text-decoration:none; border-radius:6px; font-weight:600; font-size:14px;">Apple Music</a>
<a class="music-platform-link" href="https://soundcloud.com/search?q=${encodedQuery}" target="_blank" style="display:block; text-align:center; padding:12px 10px; background:#ff5500; color:#fff; text-decoration:none; border-radius:6px; font-weight:600; font-size:14px;">SoundCloud</a>
</div>
</div>
`;
resultDiv.innerHTML = finalHtml;
container.appendChild(resultDiv);
} catch (err) {
statusText.innerText = 'An error occurred processing the image.';
progressBar.style.display = 'none';
const errorMsg = document.createElement('p');
errorMsg.style.color = '#ef4444';
errorMsg.style.fontSize = '14px';
errorMsg.innerText = err.message || 'Unknown error.';
container.appendChild(errorMsg);
}
})();
return container;
}Apply Changes
