You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(originalImg, defaultProvider = 'Google Cloud Vision', defaultKey = '') {
// 1. Setup the main container
const container = document.createElement('div');
container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
container.style.padding = '25px';
container.style.maxWidth = '800px';
container.style.margin = '0 auto';
container.style.backgroundColor = '#ffffff';
container.style.border = '1px solid #e1e4e8';
container.style.borderRadius = '12px';
container.style.boxShadow = '0 8px 24px rgba(0,0,0,0.05)';
container.style.boxSizing = 'border-box';
const header = document.createElement('h2');
header.textContent = 'API Key Picker & Language Identifier';
header.style.marginTop = '0';
header.style.marginBottom = '5px';
header.style.color = '#24292e';
container.appendChild(header);
const desc = document.createElement('p');
desc.textContent = 'Pick an API Key from your saved vault to run the Language Identification Vision API on the image below.';
desc.style.color = '#586069';
desc.style.fontSize = '14px';
desc.style.marginBottom = '20px';
container.appendChild(desc);
// 2. Setup Local Storage utility for the "Picker" function
const STORAGE_KEY = 'lang_id_api_keys_vault';
const getStoredKeys = () => {
try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; }
catch (e) { return []; }
};
const addKeyToVault = (name, val) => {
const keys = getStoredKeys();
if (!keys.find(k => k.val === val)) {
keys.push({ name, val });
localStorage.setItem(STORAGE_KEY, JSON.stringify(keys));
}
};
// 3. Layout Grid
const grid = document.createElement('div');
grid.style.display = 'flex';
grid.style.flexWrap = 'wrap';
grid.style.gap = '30px';
container.appendChild(grid);
// -- Left Column (Image Preview)
const leftCol = document.createElement('div');
leftCol.style.flex = '1 1 300px';
leftCol.style.display = 'flex';
leftCol.style.flexDirection = 'column';
leftCol.style.justifyContent = 'center';
leftCol.style.backgroundColor = '#f6f8fa';
leftCol.style.padding = '15px';
leftCol.style.borderRadius = '8px';
leftCol.style.border = '1px dashed #d1d5da';
const imgPreview = originalImg.cloneNode();
imgPreview.style.maxWidth = '100%';
imgPreview.style.maxHeight = '350px';
imgPreview.style.objectFit = 'contain';
imgPreview.style.borderRadius = '4px';
leftCol.appendChild(imgPreview);
grid.appendChild(leftCol);
// -- Right Column (Controls)
const rightCol = document.createElement('div');
rightCol.style.flex = '1 1 300px';
rightCol.style.display = 'flex';
rightCol.style.flexDirection = 'column';
rightCol.style.gap = '16px';
grid.appendChild(rightCol);
const inputStyles = `
padding: 10px;
border-radius: 6px;
border: 1px solid #d1d5da;
box-sizing: border-box;
font-size: 14px;
width: 100%;
font-family: inherit;
background-color: #fafbfc;
`;
// Provider Config
const providerLabel = document.createElement('label');
providerLabel.innerHTML = '<strong style="color:#24292e;">1. Select API Provider:</strong>';
const providerSelect = document.createElement('select');
providerSelect.style.cssText = inputStyles;
providerSelect.innerHTML = `
<option value="Google Cloud Vision" ${defaultProvider === 'Google Cloud Vision' ? 'selected' : ''}>Google Cloud Vision API</option>
<option value="MockDemo" ${defaultProvider === 'MockDemo' ? 'selected' : ''}>Mock / Demo Mode (No Key Needed)</option>
`;
// Key Picker Config
const pickerLabel = document.createElement('label');
pickerLabel.innerHTML = '<strong style="color:#24292e;">2. Pick from Saved Keys:</strong>';
const pickerSelect = document.createElement('select');
pickerSelect.style.cssText = inputStyles;
const refreshPicker = () => {
pickerSelect.innerHTML = '<option value="">-- Setup New Key Below --</option>';
getStoredKeys().forEach(k => {
const opt = document.createElement('option');
opt.value = k.val;
opt.textContent = k.name;
pickerSelect.appendChild(opt);
});
};
refreshPicker();
// Active Key Input
const keyLabel = document.createElement('label');
keyLabel.innerHTML = '<strong style="color:#24292e;">3. Active API Key:</strong>';
const keyInput = document.createElement('input');
keyInput.type = 'text';
keyInput.value = defaultKey;
keyInput.placeholder = 'e.g., AIzaSy...';
keyInput.style.cssText = inputStyles;
// Save New Key Tool
const saveKeyWrapper = document.createElement('div');
saveKeyWrapper.style.display = 'flex';
saveKeyWrapper.style.gap = '8px';
const keyNameInput = document.createElement('input');
keyNameInput.placeholder = 'Label (e.g., My Prod Key)';
keyNameInput.style.cssText = inputStyles;
keyNameInput.style.flex = '1';
const saveKeyBtn = document.createElement('button');
saveKeyBtn.textContent = 'Save Key';
saveKeyBtn.style.padding = '0 15px';
saveKeyBtn.style.backgroundColor = '#ea4a5a';
saveKeyBtn.style.color = '#fff';
saveKeyBtn.style.border = 'none';
saveKeyBtn.style.borderRadius = '6px';
saveKeyBtn.style.cursor = 'pointer';
saveKeyBtn.style.fontWeight = 'bold';
saveKeyBtn.style.transition = 'background-color 0.2s';
saveKeyBtn.onmouseover = () => saveKeyBtn.style.backgroundColor = '#cf3d4c';
saveKeyBtn.onmouseout = () => saveKeyBtn.style.backgroundColor = '#ea4a5a';
saveKeyWrapper.appendChild(keyNameInput);
saveKeyWrapper.appendChild(saveKeyBtn);
// Wire up events
saveKeyBtn.onclick = () => {
const val = keyInput.value.trim();
const name = keyNameInput.value.trim() || `Saved Key (${val.substring(0,5)}...)`;
if (val) {
addKeyToVault(name, val);
refreshPicker();
pickerSelect.value = val;
keyNameInput.value = '';
} else {
alert('Please enter an API key to save first.');
}
};
pickerSelect.onchange = () => {
if (pickerSelect.value) {
keyInput.value = pickerSelect.value;
} else {
keyInput.value = '';
}
};
providerSelect.onchange = () => {
if (providerSelect.value === 'MockDemo') {
keyInput.style.opacity = '0.5';
keyInput.disabled = true;
} else {
keyInput.style.opacity = '1';
keyInput.disabled = false;
}
};
providerSelect.dispatchEvent(new Event('change'));
// Action Button
const runBtn = document.createElement('button');
runBtn.textContent = '▶ Identify Language in Image';
runBtn.style.padding = '14px';
runBtn.style.marginTop = '10px';
runBtn.style.backgroundColor = '#2ea44f';
runBtn.style.color = '#fff';
runBtn.style.border = 'none';
runBtn.style.borderRadius = '6px';
runBtn.style.fontSize = '16px';
runBtn.style.fontWeight = '600';
runBtn.style.cursor = 'pointer';
runBtn.style.transition = 'background-color 0.2s';
runBtn.onmouseover = () => runBtn.style.backgroundColor = '#22863a';
runBtn.onmouseout = () => runBtn.style.backgroundColor = '#2ea44f';
// Append to Right Column
[
providerLabel, providerSelect,
pickerLabel, pickerSelect,
keyLabel, keyInput, saveKeyWrapper,
runBtn
].forEach(el => rightCol.appendChild(el));
// 4. Result/Output Area
const resultBox = document.createElement('div');
resultBox.style.marginTop = '25px';
resultBox.style.padding = '20px';
resultBox.style.borderRadius = '8px';
resultBox.style.display = 'none';
container.appendChild(resultBox);
// 5. Execution Logic
runBtn.onclick = async () => {
const provider = providerSelect.value;
const activeKey = keyInput.value.trim();
if (provider === 'Google Cloud Vision' && !activeKey) {
alert('Please pick or enter a valid API Key for Google Cloud Vision.');
return;
}
resultBox.style.display = 'block';
resultBox.style.backgroundColor = '#fffbdd';
resultBox.style.border = '1px solid #e1d283';
resultBox.innerHTML = '<span style="color:#735c0f;"><strong>Status:</strong> Identifying text and language... Please wait.</span>';
runBtn.disabled = true;
runBtn.style.opacity = '0.7';
try {
if (provider === 'MockDemo') {
// Mock standard delay for simulated environment testing
await new Promise(r => setTimeout(r, 1200));
resultBox.style.backgroundColor = '#dcffe4';
resultBox.style.border = '1px solid #79b88a';
resultBox.innerHTML = `
<h3 style="margin-top:0; color:#1b5c2d;">Detection Success (Mock Demo)</h3>
<p><strong>Identified Language / Locale:</strong> <span style="background:#2ea44f; color:white; padding:4px 8px; border-radius:4px; font-weight:bold; font-size:1.1em;">EN-US (Simulated)</span></p>
<p style="margin-bottom:5px;"><strong>Extracted Text Preview:</strong></p>
<pre style="background:rgba(255,255,255,0.8); padding:12px; border-radius:6px; font-size:13px; font-family:monospace; border:1px solid #79b88a;">This is a demonstration of the UI layout since 'Mock / Demo Mode' was selected. If Google Cloud Vision was selected alongside a real valid API key, this tool would call out to analyze the original image dynamically!</pre>
`;
} else if (provider === 'Google Cloud Vision') {
// Fill transparent backgrounds with white to ensure JPEG base64 retains fidelity completely.
const canvas = document.createElement('canvas');
canvas.width = originalImg.naturalWidth;
canvas.height = originalImg.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(originalImg, 0, 0);
const b64 = canvas.toDataURL('image/jpeg', 0.9).split(',')[1];
const response = await fetch(`https://vision.googleapis.com/v1/images:annotate?key=${activeKey}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
requests: [{
image: { content: b64 },
features: [{ type: 'TEXT_DETECTION' }]
}]
})
});
const data = await response.json();
if (data.error) throw new Error(data.error.message);
const annotations = data.responses[0].textAnnotations;
if (!annotations || annotations.length === 0) {
throw new Error("No text found in the image. Language remains unknown.");
}
const localeCode = annotations[0].locale || 'Unknown';
const mainText = annotations[0].description;
resultBox.style.backgroundColor = '#dcffe4';
resultBox.style.border = '1px solid #79b88a';
resultBox.innerHTML = `
<h3 style="margin-top:0; color:#1b5c2d;">Detection Success</h3>
<p><strong>Identified Language / Locale:</strong> <span style="background:#2ea44f; color:white; padding:4px 8px; border-radius:4px; font-weight:bold; font-size:1.1em;">${localeCode.toUpperCase()}</span></p>
<p style="margin-bottom:5px;"><strong>Extracted Text Overview:</strong></p>
<pre style="background:rgba(255,255,255,0.8); padding:12px; border-radius:6px; font-size:13px; font-family:monospace; border:1px solid #79b88a; max-height:200px; overflow-y:auto;">${mainText}</pre>
`;
}
} catch (err) {
resultBox.style.backgroundColor = '#ffdce0';
resultBox.style.border = '1px solid #d73a49';
resultBox.innerHTML = `
<div style="color:#86181d;">
<h3 style="margin-top:0;">Error during Detection</h3>
<p><strong>Details:</strong> ${err.message}</p>
<p style="font-size:13px; margin-bottom:0;"><em>Check your API key. Make sure the API is enabled on your Cloud account.</em></p>
</div>
`;
} finally {
runBtn.disabled = false;
runBtn.style.opacity = '1';
}
};
return container;
}Apply Changes
