Image Scene Translator And Identifier Tool

/**
 * Processes an image to identify text scenes and optionally "translate" the alphabet
 * into a stylized, Cyrillic-like version. This tool demonstrates the capabilities of
 * the experimental Shape Detection API (TextDetector).
 *
 * NOTE: This function relies on the experimental Shape Detection API ('TextDetector').
 * As of 2023, this API is not enabled by default in most browsers.
 * For Chrome/Edge, you may need to enable the flag at: chrome://flags/#enable-experimental-web-platform-features
 *
 * @param {Image} originalImg The original HTML Image object to process.
 * @param {string} [mode='stylize'] The operation mode. Can be 'identify' to just draw boxes around text, or 'stylize' to replace the text with a stylized version.
 * @param {string} [boxColor='rgba(255, 0, 0, 0.8)'] The CSS color string for the bounding box drawn around detected text.
 * @param {string} [textColor='white'] The CSS color string for the stylized text.
 * @param {string} [textBackgroundColor='rgba(0, 0, 0, 0.8)'] The CSS color string for the background of the stylized text, to ensure readability.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a new canvas element containing the processed image.
 */
async function processImage(originalImg, mode = 'stylize', boxColor = 'rgba(255, 0, 0, 0.8)', textColor = 'white', textBackgroundColor = 'rgba(0, 0, 0, 0.8)') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded before getting its dimensions
    await originalImg.decode();
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    // Helper to draw error messages onto the canvas
    const drawError = (message) => {
        ctx.save();
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
        ctx.fillRect(0, 0, canvas.width, 80);
        ctx.fillStyle = '#C70039';
        ctx.font = `bold 24px sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Error', canvas.width / 2, 10);
        ctx.fillStyle = 'black';
        ctx.font = `16px sans-serif`;
        ctx.fillText(message, canvas.width / 2, 40);
        ctx.fillText('In Chrome, try enabling: chrome://flags/#enable-experimental-web-platform-features', canvas.width / 2, 60);
        ctx.restore();
    };

    if (!('TextDetector' in window)) {
        drawError('The TextDetector API is not supported in your browser.');
        return canvas;
    }

    let detectedTexts;
    try {
        const textDetector = new TextDetector();
        detectedTexts = await textDetector.detect(originalImg);
    } catch (e) {
        drawError(`Could not process image. Error: ${e.message}`);
        return canvas;
    }

    if (!detectedTexts || detectedTexts.length === 0) {
        // No text found, just return the original image on canvas.
        return canvas;
    }

    // This is a stylistic map, not a true transliteration, for the "translator" effect.
    const buildStylizeMap = () => {
        const map = {};
        const latinChars = 'abcehikmnoprstuwyx';
        const cyrillicLookalikes = 'аьсеhікмнорѓѕтцшух';
        for (let i = 0; i < latinChars.length; i++) {
            const l = latinChars[i];
            const c = cyrillicLookalikes[i];
            map[l] = c;
            map[l.toUpperCase()] = c.toUpperCase();
        }
        return map;
    };
    const stylizeMap = buildStylizeMap();

    const stylizeText = (text) => {
        let result = '';
        for (const char of text) {
            result += stylizeMap[char] || char; // Fallback to original character if not in map
        }
        return result;
    };

    const getFitFontSize = (text, family, maxWidth, maxHeight) => {
        let fontSize = Math.floor(maxHeight);
        if (fontSize < 8) return 8; // Minimum font size
        
        do {
            ctx.font = `${fontSize}px ${family}`;
            if (ctx.measureText(text).width <= maxWidth) {
                return fontSize;
            }
            fontSize--;
        } while (fontSize > 8);
        return 8;
    };

    detectedTexts.forEach(detectedText => {
        const bb = detectedText.boundingBox;

        // Draw bounding box (The "Identifier" part)
        ctx.strokeStyle = boxColor;
        ctx.lineWidth = Math.max(2, Math.round(Math.min(canvas.width, canvas.height) * 0.004));
        ctx.strokeRect(bb.x, bb.y, bb.width, bb.height);

        // Perform "Translation" if mode is 'stylize'
        if (mode === 'stylize') {
            const originalText = detectedText.rawValue;
            const stylized = stylizeText(originalText);

            // Draw a background over the original text to place the new text on top
            ctx.fillStyle = textBackgroundColor;
            ctx.fillRect(bb.x, bb.y, bb.width, bb.height);

            // Draw the stylized text, ensuring it fits inside the box
            ctx.fillStyle = textColor;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            const fontName = 'sans-serif';
            // Leave a small margin
            const fontSize = getFitFontSize(stylized, fontName, bb.width * 0.95, bb.height * 0.95);
            ctx.font = `${fontSize}px ${fontName}`;
            ctx.fillText(stylized, bb.x + bb.width / 2, bb.y + bb.height / 2);
        }
    });

    return canvas;
}