You can edit the below JavaScript code to customize the image tool.
Apply Changes
async function processImage(
originalImg,
baseText = "Opening To Big hero 6 Japanese Hiro Rockz Dvd 2014 Piracy is a crime promo ytp Disney jackness beauty and the beast trailer Thx",
channelName = "Retro Archives",
views = "3,251,462 views",
publishDate = "10 years ago"
) {
// Top-level container for the output
const container = document.createElement('div');
container.style.fontFamily = '"Roboto", Arial, sans-serif';
container.style.maxWidth = '800px';
container.style.margin = '0 auto';
container.style.backgroundColor = '#0f0f0f';
container.style.color = '#ffffff';
container.style.borderRadius = '12px';
container.style.overflow = 'hidden';
container.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)';
container.style.position = 'relative';
try {
// Dynamically load TensorFlow.js
if (!window.tf) {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.21.0/dist/tf.min.js';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// Dynamically load MobileNet Image Classification Model
if (!window.mobilenet) {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js';
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
const model = await window.mobilenet.load();
// Try analyzing the image, fallback gracefully on CORS errors
let predictions = [];
try {
predictions = await model.classify(originalImg);
} catch (e) {
predictions = [
{ className: 'Classic aesthetic' },
{ className: 'Multimedia content' },
{ className: 'Digital artifact' }
];
}
// Extract intelligent keywords to build a dynamic Video Content Description
const keywords = predictions.map(p => p.className.split(',')[0]).map(l => l.charAt(0).toUpperCase() + l.slice(1));
const topKeyword = keywords[0] || "Mystery Content";
// Craft a dynamic YouTube-style video title
const prefixWords = baseText.split(' ').slice(0, 6).join(' ');
const dynamicTitle = `${topKeyword} | ${prefixWords}... (Official Video)`;
// Generate Hashtags
const hashtags = predictions.map(p => '#' + p.className.split(',')[0].replace(/[\s\'\"]+/g, '')).join(' ');
const finalDescription = `AI Visual Analysis Elements:\n${keywords.map(k => '► ' + k).join('\n')}\n\n--- Content Details ---\n${baseText}\n\nTags: ${hashtags} #youtubepoop #archive`;
// Create the Video Player Wrapper
const playerWrapper = document.createElement('div');
playerWrapper.style.position = 'relative';
playerWrapper.style.width = '100%';
playerWrapper.style.aspectRatio = '16 / 9';
playerWrapper.style.backgroundColor = '#000000';
playerWrapper.style.display = 'flex';
playerWrapper.style.alignItems = 'center';
playerWrapper.style.justifyContent = 'center';
playerWrapper.style.overflow = 'hidden';
const img = document.createElement('img');
img.src = originalImg.src;
img.style.maxWidth = '100%';
img.style.maxHeight = '100%';
img.style.objectFit = 'contain';
// Mock Play Button Overlay
const playBtn = document.createElement('div');
playBtn.innerHTML = `
<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
<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"></path>
<path d="M 45,24 27,14 27,34" fill="#ffffff"></path>
</svg>
`;
playBtn.style.position = 'absolute';
playBtn.style.width = '68px';
playBtn.style.height = '48px';
playBtn.style.cursor = 'pointer';
playBtn.style.transition = 'transform 0.2s ease-in-out';
playBtn.onmouseover = () => { playBtn.style.transform = 'scale(1.1)'; };
playBtn.onmouseout = () => { playBtn.style.transform = 'scale(1)'; };
playerWrapper.appendChild(img);
playerWrapper.appendChild(playBtn);
// Details Section Wrapper
const infoWrapper = document.createElement('div');
infoWrapper.style.padding = '16px 20px 24px 20px';
const titleEl = document.createElement('h1');
titleEl.textContent = dynamicTitle;
titleEl.style.fontSize = '20px';
titleEl.style.fontWeight = '700';
titleEl.style.margin = '0 0 12px 0';
titleEl.style.lineHeight = '1.4';
// Channel and Views Info
const metaWrapper = document.createElement('div');
metaWrapper.style.display = 'flex';
metaWrapper.style.alignItems = 'center';
metaWrapper.style.margin = '0 0 16px 0';
const avatarColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
const avatar = document.createElement('div');
avatar.style.width = '40px';
avatar.style.height = '40px';
avatar.style.borderRadius = '50%';
avatar.style.backgroundColor = avatarColor;
avatar.style.marginRight = '12px';
avatar.style.display = 'flex';
avatar.style.alignItems = 'center';
avatar.style.justifyContent = 'center';
avatar.style.color = '#fff';
avatar.style.fontWeight = 'bold';
avatar.style.fontSize = '18px';
avatar.textContent = channelName.charAt(0).toUpperCase();
const metaText = document.createElement('div');
metaText.style.display = 'flex';
metaText.style.flexDirection = 'column';
metaText.style.justifyContent = 'center';
const channelLine = document.createElement('div');
channelLine.style.color = '#ffffff';
channelLine.style.fontWeight = 'bold';
channelLine.style.fontSize = '15px';
channelLine.textContent = channelName;
const statsLine = document.createElement('div');
statsLine.style.color = '#aaaaaa';
statsLine.style.fontSize = '12px';
statsLine.style.marginTop = '2px';
statsLine.textContent = `${views} • ${publishDate}`;
metaText.appendChild(channelLine);
metaText.appendChild(statsLine);
metaWrapper.appendChild(avatar);
metaWrapper.appendChild(metaText);
// Generated Description Box
const descWrapper = document.createElement('div');
descWrapper.style.backgroundColor = '#272727';
descWrapper.style.borderRadius = '12px';
descWrapper.style.padding = '12px 16px';
descWrapper.style.fontSize = '14px';
descWrapper.style.lineHeight = '1.5';
descWrapper.style.whiteSpace = 'pre-wrap';
descWrapper.style.wordBreak = 'break-word';
descWrapper.style.color = '#f1f1f1';
descWrapper.textContent = finalDescription;
// Assembly
infoWrapper.appendChild(titleEl);
infoWrapper.appendChild(metaWrapper);
infoWrapper.appendChild(descWrapper);
container.appendChild(playerWrapper);
container.appendChild(infoWrapper);
} catch (error) {
// General fallback in case AI components completely fail to load
container.style.padding = '40px';
container.style.textAlign = 'center';
container.style.color = '#ff5555';
container.innerHTML = `<h3>Failed to generate Video Content Description</h3><p>${error.message}</p>`;
}
return container;
}Apply Changes
