Image Ai Powered Language And Code Creator

async function processImage(originalImg, prompt = 'Describe this image and generate HTML code to replicate its main components.') {

    /**
     * Creates a styled container to display the output.
     * @returns {HTMLDivElement} A styled div element.
     */
    const createOutputContainer = () => {
        const container = document.createElement('div');
        container.style.fontFamily = 'Menlo, Monaco, "Courier New", monospace';
        container.style.backgroundColor = '#1e1e1e';
        container.style.color = '#d4d4d4';
        container.style.border = '1px solid #333';
        container.style.borderRadius = '8px';
        container.style.padding = '20px';
        container.style.whiteSpace = 'pre-wrap'; // Allows text to wrap
        container.style.wordBreak = 'break-word';
        container.style.textAlign = 'left';
        container.style.lineHeight = '1.6';
        container.style.maxWidth = '100%';
        container.style.boxSizing = 'border-box';
        return container;
    };
    
    const outputContainer = createOutputContainer();
    outputContainer.innerHTML = '<span style="color: #569cd6;">🧠 Analyzing image and preparing response...</span>';

    /**
     * Simulates a call to a powerful, server-side multimodal AI API.
     * In a real-world application, this would be a `fetch` request.
     * @param {string} base64ImageData - The image data to be "sent".
     * @param {string} userPrompt - The user's instruction for the AI.
     * @returns {Promise<string>} A promise that resolves with a mock AI response.
     */
    const mockGenerativeAiApi = (base64ImageData, userPrompt) => {
        return new Promise(resolve => {
            // Simulate network latency and AI processing time (2-3 seconds)
            setTimeout(() => {
                const mockResponse = `
<strong style="color: #4ec9b0;">AI Analysis Complete</strong>

<strong style="color: #c586c0;">Image Description:</strong>
The image provided appears to be a UI mockup for a simple card component. It features a prominent central image (which is the user's uploaded image), a title, a short descriptive paragraph, and a call-to-action button. The layout is clean, centered, and uses a modern, sans-serif font.

---------------------------------

<strong style="color: #c586c0;">Generated Code (HTML with Inline CSS):</strong>
Based on your prompt: "<em style="color:#dcdcaa;">${userPrompt}</em>", here is a self-contained HTML snippet to create a similar component.

<div style="background-color: #2a2a2a; border: 1px solid #444; padding: 1em; border-radius: 5px; margin-top: 1em; font-family: 'Consolas', monospace; color: #d4d4d4; white-space: pre-wrap; word-break: break-all;">&lt;<span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #ce9178;">"
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  padding: 24px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background-color: #ffffff;
  color: #333;
  margin: 20px auto;
"</span>&gt;

  &lt;<span style="color: #569cd6;">img</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"${base64ImageData}"</span> <span style="color: #9cdcfe;">alt</span>=<span style="color: #ce9178;">"AI Generated Content"</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #ce9178;">"
    width: 100%;
    height: 180px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 16px;
  "</span>&gt;
  
  &lt;<span style="color: #569cd6;">h2</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #ce9178;">"margin: 0 0 8px; font-size: 1.5em;"</span>&gt;Card Title&lt;/<span style="color: #569cd6;">h2</span>&gt;
  
  &lt;<span style="color: #569cd6;">p</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #ce9178;">"margin: 0 0 20px; color: #586069; line-height: 1.5;"</span>&gt;
    This is a language and code description generated by an AI based on the visual structure of your uploaded image.
  &lt;/<span style="color: #569cd6;">p</span>&gt;
  
  &lt;<span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #ce9178;">"
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 24px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
  "</span>&gt;Learn More&lt;/<span style="color: #569cd6;">button</span>&gt;

&lt;/<span style="color: #569cd6;">div</span>&gt;</div>
`;
                resolve(mockResponse.trim());
            }, 2500);
        });
    };

    try {
        // 1. Convert the image to a Base64 string, which is how images are typically sent to APIs.
        const canvas = document.createElement('canvas');
        // Constrain dimensions for performance and to keep the base64 string manageable.
        const MAX_WIDTH = 512;
        const scale = MAX_WIDTH / originalImg.width;
        canvas.width = originalImg.width > MAX_WIDTH ? MAX_WIDTH : originalImg.width;
        canvas.height = originalImg.width > MAX_WIDTH ? originalImg.height * scale : originalImg.height;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        
        // Use JPEG format for smaller file size. The quality is sufficient for AI vision models.
        const base64Image = canvas.toDataURL('image/jpeg', 0.9);

        // 2. Await the response from the simulated AI API.
        const aiResponse = await mockGenerativeAiApi(base64Image, prompt);

        // 3. Display the formatted response. We use innerHTML because our mock response is trusted HTML.
        outputContainer.innerHTML = aiResponse;

    } catch (error) {
        console.error("AI processing failed:", error);
        outputContainer.innerHTML = `<span style="color: #f44747;">An error occurred during AI processing. Please check the console for details.</span>`;
    }

    // 4. Return the final element to be displayed on the page.
    return outputContainer;
}