Image Recipe Finder

async function processImage(originalImg, recipeCount = 5) {
    // This tool simulates finding recipes based on an image using only client-side code.
    // Since true image recognition requires complex backend services and APIs,
    // this function provides a mocked-up demonstration of what such a tool might look like.
    // It "analyzes" the image and returns a fake list of Russian recipes ("Рецепты").

    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.padding = '16px';
    container.style.maxWidth = '400px';
    container.style.boxSizing = 'border-box';
    container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    container.style.textAlign = 'center';

    const title = document.createElement('h3');
    title.textContent = 'Найденные рецепты'; // "Found Recipes" in Russian
    title.style.margin = '0 0 10px 0';
    container.appendChild(title);

    // Create a thumbnail of the original image to display
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const thumbWidth = 150;
    const scale = thumbWidth / originalImg.width;
    const thumbHeight = originalImg.height * scale;
    canvas.width = thumbWidth;
    canvas.height = thumbHeight;
    ctx.drawImage(originalImg, 0, 0, thumbWidth, thumbHeight);
    
    const thumbImg = document.createElement('img');
     try {
        thumbImg.src = canvas.toDataURL('image/png');
    } catch (e) {
        // This error can occur if the image is from a cross-origin source (tainted canvas)
        console.error("Canvas toDataURL failed, likely due to cross-origin image.", e);
        thumbImg.alt = "Предпросмотр недоступен"; // "Preview not available"
        thumbImg.style.width = `${thumbWidth}px`;
        thumbImg.style.height = `auto`; // Maintain aspect ratio
        thumbImg.style.border = '1px dashed #999';
        thumbImg.style.display = 'inline-block';
        thumbImg.style.padding = '10px';
    }
    thumbImg.style.maxWidth = '100%';
    thumbImg.style.borderRadius = '4px';
    thumbImg.style.marginBottom = '15px';
    container.appendChild(thumbImg);

    // Add a loading indicator to simulate processing
    const loader = document.createElement('div');
    loader.style.display = 'flex';
    loader.style.alignItems = 'center';
    loader.style.justifyContent = 'center';
    loader.style.gap = '8px';
    loader.style.margin = '10px 0';

    const spinner = document.createElement('div');
    spinner.style.border = '4px solid #f3f3f3';
    spinner.style.borderTop = '4px solid #3498db';
    spinner.style.borderRadius = '50%';
    spinner.style.width = '20px';
    spinner.style.height = '20px';
    
    // Dynamically inject spinner animation keyframes if they don't exist
    if (!document.getElementById('recipe-finder-keyframes')) {
        const keyframes = `@keyframes recipe-finder-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`;
        const styleSheet = document.createElement("style");
        styleSheet.id = 'recipe-finder-keyframes';
        styleSheet.innerText = keyframes;
        document.head.appendChild(styleSheet);
    }
    
    spinner.style.animation = 'recipe-finder-spin 1s linear infinite';
    
    const loadingText = document.createElement('p');
    loadingText.textContent = 'Ищем рецепты...'; // "Searching for recipes..."
    loadingText.style.margin = '0';
    
    loader.appendChild(spinner);
    loader.appendChild(loadingText);
    container.appendChild(loader);

    // --- Simulate an asynchronous API call to "find" recipes ---
    await new Promise(resolve => setTimeout(resolve, 2500)); 

    // A predefined list of common Russian recipes
    const allRecipes = [
        "Борщ классический", "Салат 'Оливье'", "Пельмени домашние", 
        "Пирог 'Шарлотка'", "Блины на молоке", "Суп 'Харчо'", 
        "Котлеты по-киевски", "Солянка сборная", "Голубцы ленивые", 
        "Жареная картошка", "Бефстроганов", "Сырники из творога", 
        "Винегрет овощной", "Селёдка под шубой", "Расстегай с рыбой"
    ];

    // Remove the loading indicator
    container.removeChild(loader);

    // Create and display the final recipe list
    const recipeList = document.createElement('ul');
    recipeList.style.listStyleType = 'none';
    recipeList.style.padding = '0';
    recipeList.style.margin = '0';
    recipeList.style.textAlign = 'left';

    // Shuffle the recipe list and select the requested number of recipes
    const shuffled = [...allRecipes].sort(() => 0.5 - Math.random());
    const count = Math.max(0, recipeCount); // Ensure count is not negative
    const selectedRecipes = shuffled.slice(0, Math.min(count, allRecipes.length));

    if (selectedRecipes.length > 0) {
        selectedRecipes.forEach(recipeName => {
            const listItem = document.createElement('li');
            listItem.style.padding = '8px';
            listItem.style.borderBottom = '1px solid #eee';

            const link = document.createElement('a');
            link.href = '#'; // Placeholder link
            link.textContent = recipeName;
            link.style.textDecoration = 'none';
            link.style.color = '#3498db';
            link.style.cursor = 'pointer';
            link.onclick = (e) => e.preventDefault(); // Prevent page jump on click

            listItem.appendChild(link);
            recipeList.appendChild(listItem);
        });
        // Remove bottom border from the last item
        if (recipeList.lastChild) {
            recipeList.lastChild.style.borderBottom = 'none';
        }
    } else {
        const noResults = document.createElement('p');
        noResults.textContent = 'К сожалению, рецептов не найдено.'; // "Unfortunately, no recipes found."
        recipeList.appendChild(noResults);
    }
    
    container.appendChild(recipeList);

    return container;
}