You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, videoUrlOrId = "dQw4w9WgXcQ", targetLangCode = "ru", autoDubToggle = "1") {
// Top-level container
const container = document.createElement("div");
container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
container.style.maxWidth = "850px";
container.style.margin = "20px auto";
container.style.backgroundColor = "#121212";
container.style.color = "#e0e0e0";
container.style.borderRadius = "10px";
container.style.overflow = "hidden";
container.style.boxShadow = "0 8px 30px rgba(0,0,0,0.8)";
container.style.border = "1px solid #333";
// Header segment
const header = document.createElement("div");
header.style.backgroundColor = "#1e1e1e";
header.style.padding = "12px 20px";
header.style.display = "flex";
header.style.justifyContent = "space-between";
header.style.alignItems = "center";
header.style.borderBottom = "1px solid #2a2a2a";
const title = document.createElement("div");
title.innerHTML = "🎬 <b>YouTube Auto-Dub Player</b> <span style='font-size:0.85em; color:#888;'>(DVDRip Translator)</span>";
title.style.fontSize = "16px";
const branding = document.createElement("div");
branding.textContent = "Языки мира переводчик";
branding.style.fontSize = "12px";
branding.style.color = "#ff4a4a";
branding.style.textTransform = "uppercase";
branding.style.letterSpacing = "1px";
branding.style.fontWeight = "bold";
header.appendChild(title);
header.appendChild(branding);
// YouTube / Image Player Wrapper
const playerWrapper = document.createElement("div");
playerWrapper.style.position = "relative";
playerWrapper.style.width = "100%";
playerWrapper.style.paddingBottom = "56.25%"; // 16:9 Aspect Ratio
playerWrapper.style.backgroundColor = "#000";
const posterImg = document.createElement("img");
posterImg.src = originalImg.src;
posterImg.style.position = "absolute";
posterImg.style.top = "0";
posterImg.style.left = "0";
posterImg.style.width = "100%";
posterImg.style.height = "100%";
posterImg.style.objectFit = "contain";
posterImg.style.opacity = "0.5";
posterImg.style.transition = "opacity 0.3s";
// Recreate standard YouTube-like play button
const playBtn = document.createElement("div");
playBtn.innerHTML = `
<svg viewBox="0 0 68 48" style="width: 80px; height: 80px;">
<path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#ff0000" fill-opacity="0.9"></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
`;
playBtn.style.position = "absolute";
playBtn.style.top = "50%";
playBtn.style.left = "50%";
playBtn.style.transform = "translate(-50%, -50%) scale(1)";
playBtn.style.cursor = "pointer";
playBtn.style.transition = "transform 0.15s ease-out";
playBtn.onmouseover = () => {
playBtn.style.transform = "translate(-50%, -50%) scale(1.15)";
posterImg.style.opacity = "0.7";
};
playBtn.onmouseout = () => {
playBtn.style.transform = "translate(-50%, -50%) scale(1)";
posterImg.style.opacity = "0.5";
};
const iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.border = "none";
iframe.style.display = "none";
iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
playerWrapper.appendChild(posterImg);
playerWrapper.appendChild(playBtn);
playerWrapper.appendChild(iframe);
// Controls Section
const controlPanel = document.createElement("div");
controlPanel.style.padding = "20px";
controlPanel.style.backgroundColor = "#181818";
controlPanel.style.display = "grid";
controlPanel.style.gridTemplateColumns = "repeat(auto-fit, minmax(200px, 1fr))";
controlPanel.style.gap = "15px";
// Video Search input
const inputGroup = document.createElement("div");
const inputLabel = document.createElement("label");
inputLabel.textContent = "Ютуб Видео Поиск (Video ID/URL):";
inputLabel.style.display = "block";
inputLabel.style.fontSize = "12px";
inputLabel.style.color = "#aaa";
inputLabel.style.marginBottom = "6px";
const videoInput = document.createElement("input");
videoInput.type = "text";
videoInput.value = videoUrlOrId;
videoInput.style.width = "100%";
videoInput.style.padding = "8px 10px";
videoInput.style.backgroundColor = "#121212";
videoInput.style.border = "1px solid #3d3d3d";
videoInput.style.color = "#fff";
videoInput.style.borderRadius = "4px";
videoInput.style.outline = "none";
videoInput.style.boxSizing = "border-box";
videoInput.onfocus = () => { videoInput.style.border = "1px solid #ff4a4a"; };
videoInput.onblur = () => { videoInput.style.border = "1px solid #3d3d3d"; };
inputGroup.appendChild(inputLabel);
inputGroup.appendChild(videoInput);
// Translation Language dropdown
const langGroup = document.createElement("div");
const langLabel = document.createElement("label");
langLabel.textContent = "Звуковая дорожка (Language Track):";
langLabel.style.display = "block";
langLabel.style.fontSize = "12px";
langLabel.style.color = "#aaa";
langLabel.style.marginBottom = "6px";
const langSelect = document.createElement("select");
langSelect.style.width = "100%";
langSelect.style.padding = "8px 10px";
langSelect.style.backgroundColor = "#121212";
langSelect.style.border = "1px solid #3d3d3d";
langSelect.style.color = "#fff";
langSelect.style.borderRadius = "4px";
langSelect.style.boxSizing = "border-box";
const languages = {
"ru": "Russian (Русский)",
"en": "English",
"es": "Spanish (Español)",
"fr": "French (Français)",
"de": "German (Deutsch)",
"zh": "Chinese (中文)",
"ja": "Japanese (日本語)",
"hi": "Hindi (हिन्दी)"
};
for (const [code, name] of Object.entries(languages)) {
const opt = document.createElement("option");
opt.value = code;
opt.textContent = name;
if (code === targetLangCode) opt.selected = true;
langSelect.appendChild(opt);
}
langGroup.appendChild(langLabel);
langGroup.appendChild(langSelect);
// Auto-Dubbing dropdown
const toggleGroup = document.createElement("div");
const toggleLabel = document.createElement("label");
toggleLabel.textContent = "Автодубляж (Auto-Dubbing):";
toggleLabel.style.display = "block";
toggleLabel.style.fontSize = "12px";
toggleLabel.style.color = "#aaa";
toggleLabel.style.marginBottom = "6px";
const toggleSelect = document.createElement("select");
toggleSelect.style.width = "100%";
toggleSelect.style.padding = "8px 10px";
toggleSelect.style.backgroundColor = "#121212";
toggleSelect.style.border = "1px solid #3d3d3d";
toggleSelect.style.color = "#fff";
toggleSelect.style.borderRadius = "4px";
toggleSelect.style.boxSizing = "border-box";
const optOn = document.createElement("option"); optOn.value = "1"; optOn.textContent = "Enabled (Neural Voice)";
const optOff = document.createElement("option"); optOff.value = "0"; optOff.textContent = "Disabled (Original Audio)";
toggleSelect.appendChild(optOn);
toggleSelect.appendChild(optOff);
toggleSelect.value = autoDubToggle;
toggleGroup.appendChild(toggleLabel);
toggleGroup.appendChild(toggleSelect);
controlPanel.appendChild(inputGroup);
controlPanel.appendChild(langGroup);
controlPanel.appendChild(toggleGroup);
// Status Terminal / Log
const statusConsole = document.createElement("div");
statusConsole.style.backgroundColor = "#080808";
statusConsole.style.padding = "10px 15px";
statusConsole.style.fontSize = "12px";
statusConsole.style.color = "#00ff41";
statusConsole.style.fontFamily = "Consolas, Courier, monospace";
statusConsole.style.borderTop = "1px solid #2a2a2a";
statusConsole.style.height = "60px";
statusConsole.style.overflowY = "auto";
statusConsole.innerHTML = "> System Ready. Waiting for playback interaction...";
container.appendChild(header);
container.appendChild(playerWrapper);
container.appendChild(controlPanel);
container.appendChild(statusConsole);
// Player Interactions
playBtn.onclick = () => {
// ID Extraction from provided snippet or fallback
let embedId = videoInput.value.trim();
const match = embedId.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})/);
if (match) {
embedId = match[1];
} else if (embedId.length !== 11) {
embedId = "dQw4w9WgXcQ"; // Fallback embedded video
statusConsole.innerHTML += "<br>> Error: Invalid YouTube ID. Firing default safety payload.";
}
posterImg.style.display = "none";
playBtn.style.display = "none";
iframe.style.display = "block";
// Autoplay embed URL
iframe.src = `https://www.youtube.com/embed/${embedId}?autoplay=1`;
statusConsole.innerHTML = `> Initializing DVDRip Cluster... Loading video payload [${embedId}].`;
// Check translation status
if (toggleSelect.value === "1") {
const langName = langSelect.options[langSelect.selectedIndex].text;
setTimeout(() => {
statusConsole.innerHTML += `<br>> Capturing original audio... Hooking Translator Node (${langName})...`;
statusConsole.scrollTo(0, statusConsole.scrollHeight);
}, 800);
setTimeout(() => {
statusConsole.innerHTML += `<br>> <span style="color: #ff9900;">[WARN] Initiating real-time AI synchronization...</span>`;
statusConsole.scrollTo(0, statusConsole.scrollHeight);
}, 1800);
setTimeout(() => {
statusConsole.innerHTML += `<br>> <span style="color: #00ff41; font-weight: bold;">[SUCCESS] Auto-Dubbing Neural Network Activated.</span>`;
statusConsole.scrollTo(0, statusConsole.scrollHeight);
// Proof-of-concept synthesis (simulating the external Auto-dub extension behavior)
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const msg = new SpeechSynthesisUtterance();
const localizations = {
"ru": "Перевод видео активирован. Автоматический дубляж запущен.",
"en": "Video sequence loaded. Auto-dubbing translator activated.",
"es": "Traducción de video activada. Doblaje automático en curso.",
"fr": "Traduction vidéo activée. Doublage automatique lancé.",
"de": "Videoübersetzung aktiviert. Automatische Synchronisation gestartet.",
"zh": "视频翻译已激活。自动配音开始运行。",
"ja": "ビデオ翻訳が有効になりました。自動吹き替えを開始します。",
"hi": "वीडियो अनुवाद सक्रिय। स्वचालित डबिंग शुरू।"
};
msg.text = localizations[langSelect.value] || localizations["en"];
msg.lang = langSelect.value;
msg.rate = 1.0;
window.speechSynthesis.speak(msg);
}
}, 3500);
} else {
setTimeout(() => {
statusConsole.innerHTML += `<br>> Playing original audio track... DVDRip translator disabled.`;
statusConsole.scrollTo(0, statusConsole.scrollHeight);
}, 1000);
}
};
// Support "Enter" key on input fields
videoInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
playBtn.click();
}
});
return container;
}Apply Changes
