AI Flower Identifier \ud83c\udf38 (with Resizing)<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* ... (Your existing CSS from the previous version - no changes needed here) ... *\/\n \/* Paste your full CSS here *\/\n .flower-identifier-wp {\n background: #ffffff; padding: 24px 30px; border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); width: 90%; max-width: 650px;\n text-align: center; border: 1px solid #eaeaea; margin: 20px auto;\n font-family: 'Poppins', sans-serif;\n }\n .flower-identifier-wp h1 {\n color: #8cc63f; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; font-weight:600; margin-bottom:10px;\n }\n .flower-identifier-wp h1 i.fa-seedling { margin-right: 12px; font-size: 1.8rem; }\n .flower-identifier-wp h1 i.fa-camera-retro { margin-left: 12px; font-size: 1.5rem; }\n .flower-identifier-wp p.description { font-size: 0.95rem; color: #555; margin-bottom: 25px; line-height: 1.6; }\n .flower-identifier-wp .upload-btn-wrapper { margin: 20px 0; }\n .flower-identifier-wp .btn-app, .flower-identifier-wp button {\n background: #8cc63f; color: white; border: none; padding: 10px 18px; border-radius: 10px;\n cursor: pointer; transition: background 0.2s ease, transform 0.1s ease;\n font-weight: 500; font-size: 1em; display: inline-flex; align-items: center; justify-content: center;\n text-decoration: none;\n }\n .flower-identifier-wp .btn-app:hover, .flower-identifier-wp button:hover { background: #7baa37; transform: translateY(-1px); }\n .flower-identifier-wp .btn-app i, .flower-identifier-wp button i { margin-right: 8px; }\n .flower-identifier-wp .btn-app.btn-upload { min-width: 200px; }\n .flower-identifier-wp #imagePreviewFlower {\n max-width: 100%; max-height: 300px; margin-top: 20px; border-radius: 10px;\n border: 2px dashed #ddd; object-fit: contain; background-color: #f9fafb; padding: 5px;\n }\n .flower-identifier-wp #imagePreviewFlower.hidden { display: none; }\n .flower-identifier-wp #identifyButtonFlower { margin-top: 25px; display: none; min-width: 200px; }\n .flower-identifier-wp #identifyButtonFlower:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; transform: none; }\n .flower-identifier-wp #identifyButtonFlower:disabled:hover { background-color: #cccccc; }\n .flower-identifier-wp .loader {\n border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #8cc63f;\n width: 35px; height: 35px; animation: spinFlower 1s linear infinite; margin: 25px auto; display: none;\n }\n @keyframes spinFlower { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n .flower-identifier-wp #resultAreaFlower {\n margin-top: 25px; padding: 20px; background-color: #f9fafb; border: 1px solid #e2e8f0;\n border-radius: 10px; text-align: left; line-height: 1.7; white-space: pre-wrap; font-size: 0.9rem;\n }\n .flower-identifier-wp #resultAreaFlower.hidden { display: none; }\n .flower-identifier-wp #resultAreaFlower strong { color: #7baa37; }\n .flower-identifier-wp #errorAreaFlower .error {\n color: #D8000C; background-color: #FFD2D2; border: 1px solid #D8000C; padding: 12px 15px;\n border-radius: 10px; margin-top: 20px; font-size: 0.9rem; text-align: left;\n display: flex; align-items: center;\n }\n .flower-identifier-wp #errorAreaFlower .error i { margin-right: 10px; font-size: 1.1rem; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"app-container flower-identifier-wp\">\n <h1>\n <i class=\"fas fa-seedling\"><\/i>\n AI Flower Identifier\n <i class=\"fas fa-camera-retro\"><\/i>\n <\/h1>\n <p class=\"description\">Upload a picture of a flower. Large images will be automatically resized for faster processing!<\/p>\n\n <div class=\"upload-btn-wrapper\">\n <button class=\"btn-app btn-upload\" onclick=\"document.getElementById('fileInputFlower').click();\">\n <i class=\"fas fa-upload\"><\/i> Upload Flower Image\n <\/button>\n <input type=\"file\" id=\"fileInputFlower\" accept=\"image\/*\" style=\"display:none;\">\n <\/div>\n\n <img decoding=\"async\" id=\"imagePreviewFlower\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"#\" alt=\"Image Preview\" class=\"lazyload hidden\"\/>\n\n <button id=\"identifyButtonFlower\" class=\"btn-app\">\n <i class=\"fas fa-search-plus\"><\/i> Identify Flower\n <\/button>\n\n <div class=\"loader\" id=\"loaderFlower\"><\/div>\n <div id=\"resultAreaFlower\" class=\"hidden\" aria-live=\"polite\"><\/div>\n <div id=\"errorAreaFlower\" aria-live=\"assertive\"><\/div>\n <\/div>\n\n <script type=\"text\/javascript\">\n document.addEventListener('DOMContentLoaded', function() {\n const ajax_url = typeof flowerIdentifierAjaxParams !== 'undefined' ? flowerIdentifierAjaxParams.ajax_url : '\/wp-admin\/admin-ajax.php';\n \/\/ const ajax_nonce = typeof flowerIdentifierAjaxParams !== 'undefined' ? flowerIdentifierAjaxParams.nonce : '';\n\n const fileInput = document.getElementById('fileInputFlower');\n const imagePreview = document.getElementById('imagePreviewFlower');\n const identifyButton = document.getElementById('identifyButtonFlower');\n const loader = document.getElementById('loaderFlower');\n const resultArea = document.getElementById('resultAreaFlower');\n const errorArea = document.getElementById('errorAreaFlower');\n\n let originalFile = null; \/\/ Keep track of the original selected file\n let apiReadyImageData = null; \/\/ This will hold { inline_data: { mime_type: ..., data: ... } }\n\n const MAX_IMAGE_WIDTH = 1024; \/\/ Max width for resizing\n const MAX_IMAGE_HEIGHT = 1024; \/\/ Max height for resizing\n const IMAGE_QUALITY = 0.8; \/\/ JPEG\/WebP quality (0.0 to 1.0)\n const RESIZE_THRESHOLD_MB = 1; \/\/ Resize images larger than 1MB\n\n const GEMINI_PROMPT_TEXT = \"You are a helpful flower identification assistant. Identify the flower in this image. Provide its common name, scientific name (if known), a brief description including typical colors and petal shape, its native region, and 1-2 interesting facts or common care tips (like sunlight or water needs). Format the response clearly using markdown-like bolding for headers (e.g., '**Common Name:**'). If it's not a flower or you absolutely cannot identify it, say so clearly and politely. Crucially, do NOT ask any follow-up questions, engage in conversation, or provide information beyond the requested points.** Your response should be a direct answer to this identification request. \";\n\n \/**\n * Resizes an image file using a canvas.\n * @param {File} file The image file to resize.\n * @returns {Promise<object|null>} A promise that resolves with an object { base64: string, mimeType: string } or null on error.\n *\/\n async function resizeImage(file) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement('canvas');\n let width = img.width;\n let height = img.height;\n\n if (width > height) {\n if (width > MAX_IMAGE_WIDTH) {\n height = Math.round(height * (MAX_IMAGE_WIDTH \/ width));\n width = MAX_IMAGE_WIDTH;\n }\n } else {\n if (height > MAX_IMAGE_HEIGHT) {\n width = Math.round(width * (MAX_IMAGE_HEIGHT \/ height));\n height = MAX_IMAGE_HEIGHT;\n }\n }\n\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, width, height);\n\n let outputMimeType = 'image\/webp';\n let dataUrl = canvas.toDataURL(outputMimeType, IMAGE_QUALITY);\n\n \/\/ Fallback to JPEG if WebP is not supported or creates an invalid string (rare)\n if (!dataUrl || !dataUrl.startsWith('data:image\/webp')) {\n outputMimeType = 'image\/jpeg';\n dataUrl = canvas.toDataURL(outputMimeType, IMAGE_QUALITY);\n }\n\n if (!dataUrl) {\n reject(new Error(\"Canvas toDataURL failed to generate image.\"));\n return;\n }\n resolve({ base64: dataUrl.split(',')[1], mimeType: outputMimeType });\n };\n img.onerror = (err) => reject(new Error(\"Image could not be loaded for resizing. \" + err));\n img.src = event.target.result; \/\/ This is the Data URL from FileReader\n };\n reader.onerror = (err) => reject(new Error(\"FileReader could not read the file. \" + err));\n reader.readAsDataURL(file); \/\/ Read the original file to get its data for the Image object\n });\n }\n\n if(fileInput) {\n fileInput.addEventListener('change', async function(event) { \/\/ Make this async\n if(errorArea) errorArea.innerHTML = '';\n if(resultArea) {\n resultArea.classList.add('hidden');\n resultArea.innerHTML = '';\n }\n apiReadyImageData = null; \/\/ Reset\n originalFile = event.target.files[0];\n\n if (!originalFile) {\n if(imagePreview) {\n imagePreview.classList.add('hidden');\n imagePreview.src = \"#\";\n }\n validateInputs();\n return;\n }\n\n \/\/ Show original image in preview immediately\n const previewReader = new FileReader();\n previewReader.onload = (e) => {\n if(imagePreview) {\n imagePreview.src = e.target.result;\n imagePreview.classList.remove('hidden');\n }\n };\n previewReader.readAsDataURL(originalFile);\n\n \/\/ Disable identify button while processing\n if(identifyButton) identifyButton.disabled = true;\n if(loader) loader.style.display = 'block'; \/\/ Show loader during potential resize\n\n try {\n if (originalFile.size > RESIZE_THRESHOLD_MB * 1024 * 1024) {\n showError(\"Resizing large image, please wait...\");\n const resizedData = await resizeImage(originalFile);\n apiReadyImageData = { inline_data: { mime_type: resizedData.mimeType, data: resizedData.base64 } };\n if(errorArea && errorArea.innerHTML.includes(\"Resizing large image\")) errorArea.innerHTML = ''; \/\/ Clear resizing message\n console.log(\"Image resized. New size approx:\", Math.round(resizedData.base64.length * 3\/4 \/ 1024) + \"KB\");\n } else {\n \/\/ For smaller files, convert to Base64 directly\n const base64 = await new Promise((resolve, reject) => {\n const smallFileReader = new FileReader();\n smallFileReader.onloadend = () => resolve(smallFileReader.result.split(',')[1]);\n smallFileReader.onerror = reject;\n smallFileReader.readAsDataURL(originalFile);\n });\n apiReadyImageData = { inline_data: { mime_type: originalFile.type, data: base64 } };\n console.log(\"Image is small, using original (Base64 encoded).\");\n }\n } catch (err) {\n showError(\"Could not process image: \" + err.message + \". Please try another image.\");\n console.error(\"Image processing error:\", err);\n apiReadyImageData = null; \/\/ Ensure it's null on error\n } finally {\n if(loader) loader.style.display = 'none';\n validateInputs(); \/\/ Re-evaluate button state\n }\n });\n }\n\n function validateInputs() {\n if (!identifyButton) return;\n \/\/ Enable button only if apiReadyImageData is successfully prepared\n if (apiReadyImageData) {\n identifyButton.style.display = 'inline-flex';\n identifyButton.disabled = false;\n } else {\n identifyButton.style.display = 'none';\n identifyButton.disabled = true;\n }\n }\n\n async function identifyFlower() {\n if (!apiReadyImageData) {\n showError(\"Image not ready or processing failed. Please re-upload the image.\");\n return;\n }\n\n if(loader) loader.style.display = 'block';\n if(resultArea) { resultArea.classList.add('hidden'); resultArea.innerHTML = ''; }\n if(errorArea) errorArea.innerHTML = '';\n if(identifyButton) identifyButton.disabled = true;\n\n try {\n const formData = new FormData();\n formData.append('action', 'identify_flower_gemini');\n formData.append('imagePart', JSON.stringify(apiReadyImageData)); \/\/ Use the (potentially resized) image data\n formData.append('promptText', GEMINI_PROMPT_TEXT);\n \/\/ if (ajax_nonce) formData.append('security', ajax_nonce);\n\n const response = await fetch(ajax_url, { method: 'POST', body: formData });\n const data = await response.json();\n\n if (!data.success) {\n console.error(\"WordPress AJAX Error:\", data.data);\n let errorMessage = (data.data && data.data.error) ? data.data.error : \"An error occurred via WordPress proxy.\";\n if (data.data && data.data.details_api && data.data.details_api.error && data.data.details_api.error.message) {\n errorMessage += \" API Details: \" + data.data.details_api.error.message;\n } else if (data.data && data.data.details) {\n errorMessage += \" Details: \" + data.data.details;\n }\n showError(errorMessage);\n return;\n }\n\n const geminiResponse = data.data;\n if (geminiResponse.candidates && geminiResponse.candidates.length > 0 && \/* ... more checks ... *\/ geminiResponse.candidates[0].content.parts[0]) {\n let flowerInfo = geminiResponse.candidates[0].content.parts[0].text;\n flowerInfo = flowerInfo.replace(\/\\*\\*(.*?)\\*\\*\/g, '<strong>$1<\/strong>');\n if(resultArea) {\n resultArea.innerHTML = flowerInfo.replace(\/\\n\/g, '<br>');\n resultArea.classList.remove('hidden');\n }\n } else if (geminiResponse.promptFeedback && geminiResponse.promptFeedback.blockReason) {\n showError(`Content blocked by API: ${geminiResponse.promptFeedback.blockReason}.`);\n } else {\n showError(\"Could not get a valid identification via WordPress proxy.\");\n console.warn(\"Unexpected WordPress proxy response structure:\", geminiResponse);\n }\n\n } catch (error) {\n console.error(\"JS Error in identifyFlower:\", error);\n showError(`A JavaScript error occurred: ${error.message}`);\n } finally {\n if(loader) loader.style.display = 'none';\n validateInputs(); \/\/ Re-enable button if image is still considered ready\n }\n }\n\n if(identifyButton) {\n identifyButton.addEventListener('click', function(event) {\n event.preventDefault();\n identifyFlower();\n });\n }\n\n function showError(message) {\n if(errorArea) errorArea.innerHTML = `<p class=\"error\"><i class=\"fas fa-exclamation-triangle\"><\/i> ${message}<\/p>`;\n \/\/ Do not hide loader here, as showError might be called during resize before main loader is shown for API call\n }\n\n \/\/ Initial validation if an image was somehow pre-selected (unlikely here)\n validateInputs();\n });\n <\/script>\n\n<\/body>\n<\/html><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-23783","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Detector de flores - Verdnatura<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Detector de flores - Verdnatura\" \/>\n<meta property=\"og:url\" content=\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\" \/>\n<meta property=\"og:site_name\" content=\"Verdnatura\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\",\"url\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\",\"name\":\"Detector de flores - Verdnatura\",\"isPartOf\":{\"@id\":\"https:\/\/verdnatura.info\/en\/#website\"},\"datePublished\":\"2025-05-13T14:19:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/verdnatura.info\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Detector de flores\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/verdnatura.info\/en\/#website\",\"url\":\"https:\/\/verdnatura.info\/en\/\",\"name\":\"Verdnatura\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/verdnatura.info\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Detector de flores - Verdnatura","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","og_locale":"en_US","og_type":"article","og_title":"Detector de flores - Verdnatura","og_url":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","og_site_name":"Verdnatura","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","url":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","name":"Detector de flores - Verdnatura","isPartOf":{"@id":"https:\/\/verdnatura.info\/en\/#website"},"datePublished":"2025-05-13T14:19:29+00:00","breadcrumb":{"@id":"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/verdnatura.info\/en\/detector-de-flores\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/verdnatura.info\/en\/"},{"@type":"ListItem","position":2,"name":"Detector de flores"}]},{"@type":"WebSite","@id":"https:\/\/verdnatura.info\/en\/#website","url":"https:\/\/verdnatura.info\/en\/","name":"Verdnatura","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/verdnatura.info\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/23783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/comments?post=23783"}],"version-history":[{"count":0,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/23783\/revisions"}],"wp:attachment":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/media?parent=23783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n AI Flower Identifier \ud83c\udf38 (with Resizing)<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n \/* ... (Your existing CSS from the previous version - no changes needed here) ... *\/\n \/* Paste your full CSS here *\/\n .flower-identifier-wp {\n background: #ffffff; padding: 24px 30px; border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); width: 90%; max-width: 650px;\n text-align: center; border: 1px solid #eaeaea; margin: 20px auto;\n font-family: 'Poppins', sans-serif;\n }\n .flower-identifier-wp h1 {\n color: #8cc63f; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; font-weight:600; margin-bottom:10px;\n }\n .flower-identifier-wp h1 i.fa-seedling { margin-right: 12px; font-size: 1.8rem; }\n .flower-identifier-wp h1 i.fa-camera-retro { margin-left: 12px; font-size: 1.5rem; }\n .flower-identifier-wp p.description { font-size: 0.95rem; color: #555; margin-bottom: 25px; line-height: 1.6; }\n .flower-identifier-wp .upload-btn-wrapper { margin: 20px 0; }\n .flower-identifier-wp .btn-app, .flower-identifier-wp button {\n background: #8cc63f; color: white; border: none; padding: 10px 18px; border-radius: 10px;\n cursor: pointer; transition: background 0.2s ease, transform 0.1s ease;\n font-weight: 500; font-size: 1em; display: inline-flex; align-items: center; justify-content: center;\n text-decoration: none;\n }\n .flower-identifier-wp .btn-app:hover, .flower-identifier-wp button:hover { background: #7baa37; transform: translateY(-1px); }\n .flower-identifier-wp .btn-app i, .flower-identifier-wp button i { margin-right: 8px; }\n .flower-identifier-wp .btn-app.btn-upload { min-width: 200px; }\n .flower-identifier-wp #imagePreviewFlower {\n max-width: 100%; max-height: 300px; margin-top: 20px; border-radius: 10px;\n border: 2px dashed #ddd; object-fit: contain; background-color: #f9fafb; padding: 5px;\n }\n .flower-identifier-wp #imagePreviewFlower.hidden { display: none; }\n .flower-identifier-wp #identifyButtonFlower { margin-top: 25px; display: none; min-width: 200px; }\n .flower-identifier-wp #identifyButtonFlower:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; transform: none; }\n .flower-identifier-wp #identifyButtonFlower:disabled:hover { background-color: #cccccc; }\n .flower-identifier-wp .loader {\n border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #8cc63f;\n width: 35px; height: 35px; animation: spinFlower 1s linear infinite; margin: 25px auto; display: none;\n }\n @keyframes spinFlower { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n .flower-identifier-wp #resultAreaFlower {\n margin-top: 25px; padding: 20px; background-color: #f9fafb; border: 1px solid #e2e8f0;\n border-radius: 10px; text-align: left; line-height: 1.7; white-space: pre-wrap; font-size: 0.9rem;\n }\n .flower-identifier-wp #resultAreaFlower.hidden { display: none; }\n .flower-identifier-wp #resultAreaFlower strong { color: #7baa37; }\n .flower-identifier-wp #errorAreaFlower .error {\n color: #D8000C; background-color: #FFD2D2; border: 1px solid #D8000C; padding: 12px 15px;\n border-radius: 10px; margin-top: 20px; font-size: 0.9rem; text-align: left;\n display: flex; align-items: center;\n }\n .flower-identifier-wp #errorAreaFlower .error i { margin-right: 10px; font-size: 1.1rem; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"app-container flower-identifier-wp\">\n <h1>\n <i class=\"fas fa-seedling\"><\/i>\n AI Flower Identifier\n <i class=\"fas fa-camera-retro\"><\/i>\n <\/h1>\n <p class=\"description\">Upload a picture of a flower. Large images will be automatically resized for faster processing!<\/p>\n\n <div class=\"upload-btn-wrapper\">\n <button class=\"btn-app btn-upload\" onclick=\"document.getElementById('fileInputFlower').click();\">\n <i class=\"fas fa-upload\"><\/i> Upload Flower Image\n <\/button>\n <input type=\"file\" id=\"fileInputFlower\" accept=\"image\/*\" style=\"display:none;\">\n <\/div>\n\n <img decoding=\"async\" id=\"imagePreviewFlower\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"#\" alt=\"Image Preview\" class=\"lazyload hidden\"\/>\n\n <button id=\"identifyButtonFlower\" class=\"btn-app\">\n <i class=\"fas fa-search-plus\"><\/i> Identify Flower\n <\/button>\n\n <div class=\"loader\" id=\"loaderFlower\"><\/div>\n <div id=\"resultAreaFlower\" class=\"hidden\" aria-live=\"polite\"><\/div>\n <div id=\"errorAreaFlower\" aria-live=\"assertive\"><\/div>\n <\/div>\n\n <script type=\"text\/javascript\">\n document.addEventListener('DOMContentLoaded', function() {\n const ajax_url = typeof flowerIdentifierAjaxParams !== 'undefined' ? flowerIdentifierAjaxParams.ajax_url : '\/wp-admin\/admin-ajax.php';\n \/\/ const ajax_nonce = typeof flowerIdentifierAjaxParams !== 'undefined' ? flowerIdentifierAjaxParams.nonce : '';\n\n const fileInput = document.getElementById('fileInputFlower');\n const imagePreview = document.getElementById('imagePreviewFlower');\n const identifyButton = document.getElementById('identifyButtonFlower');\n const loader = document.getElementById('loaderFlower');\n const resultArea = document.getElementById('resultAreaFlower');\n const errorArea = document.getElementById('errorAreaFlower');\n\n let originalFile = null; \/\/ Keep track of the original selected file\n let apiReadyImageData = null; \/\/ This will hold { inline_data: { mime_type: ..., data: ... } }\n\n const MAX_IMAGE_WIDTH = 1024; \/\/ Max width for resizing\n const MAX_IMAGE_HEIGHT = 1024; \/\/ Max height for resizing\n const IMAGE_QUALITY = 0.8; \/\/ JPEG\/WebP quality (0.0 to 1.0)\n const RESIZE_THRESHOLD_MB = 1; \/\/ Resize images larger than 1MB\n\n const GEMINI_PROMPT_TEXT = \"You are a helpful flower identification assistant. Identify the flower in this image. Provide its common name, scientific name (if known), a brief description including typical colors and petal shape, its native region, and 1-2 interesting facts or common care tips (like sunlight or water needs). Format the response clearly using markdown-like bolding for headers (e.g., '**Common Name:**'). If it's not a flower or you absolutely cannot identify it, say so clearly and politely. Crucially, do NOT ask any follow-up questions, engage in conversation, or provide information beyond the requested points.** Your response should be a direct answer to this identification request. \";\n\n \/**\n * Resizes an image file using a canvas.\n * @param {File} file The image file to resize.\n * @returns {Promise<object|null>} A promise that resolves with an object { base64: string, mimeType: string } or null on error.\n *\/\n async function resizeImage(file) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (event) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement('canvas');\n let width = img.width;\n let height = img.height;\n\n if (width > height) {\n if (width > MAX_IMAGE_WIDTH) {\n height = Math.round(height * (MAX_IMAGE_WIDTH \/ width));\n width = MAX_IMAGE_WIDTH;\n }\n } else {\n if (height > MAX_IMAGE_HEIGHT) {\n width = Math.round(width * (MAX_IMAGE_HEIGHT \/ height));\n height = MAX_IMAGE_HEIGHT;\n }\n }\n\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, width, height);\n\n let outputMimeType = 'image\/webp';\n let dataUrl = canvas.toDataURL(outputMimeType, IMAGE_QUALITY);\n\n \/\/ Fallback to JPEG if WebP is not supported or creates an invalid string (rare)\n if (!dataUrl || !dataUrl.startsWith('data:image\/webp')) {\n outputMimeType = 'image\/jpeg';\n dataUrl = canvas.toDataURL(outputMimeType, IMAGE_QUALITY);\n }\n\n if (!dataUrl) {\n reject(new Error(\"Canvas toDataURL failed to generate image.\"));\n return;\n }\n resolve({ base64: dataUrl.split(',')[1], mimeType: outputMimeType });\n };\n img.onerror = (err) => reject(new Error(\"Image could not be loaded for resizing. \" + err));\n img.src = event.target.result; \/\/ This is the Data URL from FileReader\n };\n reader.onerror = (err) => reject(new Error(\"FileReader could not read the file. \" + err));\n reader.readAsDataURL(file); \/\/ Read the original file to get its data for the Image object\n });\n }\n\n if(fileInput) {\n fileInput.addEventListener('change', async function(event) { \/\/ Make this async\n if(errorArea) errorArea.innerHTML = '';\n if(resultArea) {\n resultArea.classList.add('hidden');\n resultArea.innerHTML = '';\n }\n apiReadyImageData = null; \/\/ Reset\n originalFile = event.target.files[0];\n\n if (!originalFile) {\n if(imagePreview) {\n imagePreview.classList.add('hidden');\n imagePreview.src = \"#\";\n }\n validateInputs();\n return;\n }\n\n \/\/ Show original image in preview immediately\n const previewReader = new FileReader();\n previewReader.onload = (e) => {\n if(imagePreview) {\n imagePreview.src = e.target.result;\n imagePreview.classList.remove('hidden');\n }\n };\n previewReader.readAsDataURL(originalFile);\n\n \/\/ Disable identify button while processing\n if(identifyButton) identifyButton.disabled = true;\n if(loader) loader.style.display = 'block'; \/\/ Show loader during potential resize\n\n try {\n if (originalFile.size > RESIZE_THRESHOLD_MB * 1024 * 1024) {\n showError(\"Resizing large image, please wait...\");\n const resizedData = await resizeImage(originalFile);\n apiReadyImageData = { inline_data: { mime_type: resizedData.mimeType, data: resizedData.base64 } };\n if(errorArea && errorArea.innerHTML.includes(\"Resizing large image\")) errorArea.innerHTML = ''; \/\/ Clear resizing message\n console.log(\"Image resized. New size approx:\", Math.round(resizedData.base64.length * 3\/4 \/ 1024) + \"KB\");\n } else {\n \/\/ For smaller files, convert to Base64 directly\n const base64 = await new Promise((resolve, reject) => {\n const smallFileReader = new FileReader();\n smallFileReader.onloadend = () => resolve(smallFileReader.result.split(',')[1]);\n smallFileReader.onerror = reject;\n smallFileReader.readAsDataURL(originalFile);\n });\n apiReadyImageData = { inline_data: { mime_type: originalFile.type, data: base64 } };\n console.log(\"Image is small, using original (Base64 encoded).\");\n }\n } catch (err) {\n showError(\"Could not process image: \" + err.message + \". Please try another image.\");\n console.error(\"Image processing error:\", err);\n apiReadyImageData = null; \/\/ Ensure it's null on error\n } finally {\n if(loader) loader.style.display = 'none';\n validateInputs(); \/\/ Re-evaluate button state\n }\n });\n }\n\n function validateInputs() {\n if (!identifyButton) return;\n \/\/ Enable button only if apiReadyImageData is successfully prepared\n if (apiReadyImageData) {\n identifyButton.style.display = 'inline-flex';\n identifyButton.disabled = false;\n } else {\n identifyButton.style.display = 'none';\n identifyButton.disabled = true;\n }\n }\n\n async function identifyFlower() {\n if (!apiReadyImageData) {\n showError(\"Image not ready or processing failed. Please re-upload the image.\");\n return;\n }\n\n if(loader) loader.style.display = 'block';\n if(resultArea) { resultArea.classList.add('hidden'); resultArea.innerHTML = ''; }\n if(errorArea) errorArea.innerHTML = '';\n if(identifyButton) identifyButton.disabled = true;\n\n try {\n const formData = new FormData();\n formData.append('action', 'identify_flower_gemini');\n formData.append('imagePart', JSON.stringify(apiReadyImageData)); \/\/ Use the (potentially resized) image data\n formData.append('promptText', GEMINI_PROMPT_TEXT);\n \/\/ if (ajax_nonce) formData.append('security', ajax_nonce);\n\n const response = await fetch(ajax_url, { method: 'POST', body: formData });\n const data = await response.json();\n\n if (!data.success) {\n console.error(\"WordPress AJAX Error:\", data.data);\n let errorMessage = (data.data && data.data.error) ? data.data.error : \"An error occurred via WordPress proxy.\";\n if (data.data && data.data.details_api && data.data.details_api.error && data.data.details_api.error.message) {\n errorMessage += \" API Details: \" + data.data.details_api.error.message;\n } else if (data.data && data.data.details) {\n errorMessage += \" Details: \" + data.data.details;\n }\n showError(errorMessage);\n return;\n }\n\n const geminiResponse = data.data;\n if (geminiResponse.candidates && geminiResponse.candidates.length > 0 && \/* ... more checks ... *\/ geminiResponse.candidates[0].content.parts[0]) {\n let flowerInfo = geminiResponse.candidates[0].content.parts[0].text;\n flowerInfo = flowerInfo.replace(\/\\*\\*(.*?)\\*\\*\/g, '<strong>$1<\/strong>');\n if(resultArea) {\n resultArea.innerHTML = flowerInfo.replace(\/\\n\/g, '<br>');\n resultArea.classList.remove('hidden');\n }\n } else if (geminiResponse.promptFeedback && geminiResponse.promptFeedback.blockReason) {\n showError(`Content blocked by API: ${geminiResponse.promptFeedback.blockReason}.`);\n } else {\n showError(\"Could not get a valid identification via WordPress proxy.\");\n console.warn(\"Unexpected WordPress proxy response structure:\", geminiResponse);\n }\n\n } catch (error) {\n console.error(\"JS Error in identifyFlower:\", error);\n showError(`A JavaScript error occurred: ${error.message}`);\n } finally {\n if(loader) loader.style.display = 'none';\n validateInputs(); \/\/ Re-enable button if image is still considered ready\n }\n }\n\n if(identifyButton) {\n identifyButton.addEventListener('click', function(event) {\n event.preventDefault();\n identifyFlower();\n });\n }\n\n function showError(message) {\n if(errorArea) errorArea.innerHTML = `<p class=\"error\"><i class=\"fas fa-exclamation-triangle\"><\/i> ${message}<\/p>`;\n \/\/ Do not hide loader here, as showError might be called during resize before main loader is shown for API call\n }\n\n \/\/ Initial validation if an image was somehow pre-selected (unlikely here)\n validateInputs();\n });\n <\/script>\n\n<\/body>\n<\/html><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-23783","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Detector de flores - Verdnatura<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Detector de flores - Verdnatura\" \/>\n<meta property=\"og:url\" content=\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\" \/>\n<meta property=\"og:site_name\" content=\"Verdnatura\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\",\"url\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\",\"name\":\"Detector de flores - Verdnatura\",\"isPartOf\":{\"@id\":\"https:\/\/verdnatura.info\/en\/#website\"},\"datePublished\":\"2025-05-13T14:19:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/verdnatura.info\/en\/detector-de-flores\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/verdnatura.info\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Detector de flores\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/verdnatura.info\/en\/#website\",\"url\":\"https:\/\/verdnatura.info\/en\/\",\"name\":\"Verdnatura\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/verdnatura.info\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Detector de flores - Verdnatura","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","og_locale":"en_US","og_type":"article","og_title":"Detector de flores - Verdnatura","og_url":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","og_site_name":"Verdnatura","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","url":"https:\/\/verdnatura.info\/en\/detector-de-flores\/","name":"Detector de flores - Verdnatura","isPartOf":{"@id":"https:\/\/verdnatura.info\/en\/#website"},"datePublished":"2025-05-13T14:19:29+00:00","breadcrumb":{"@id":"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/verdnatura.info\/en\/detector-de-flores\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/verdnatura.info\/en\/detector-de-flores\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/verdnatura.info\/en\/"},{"@type":"ListItem","position":2,"name":"Detector de flores"}]},{"@type":"WebSite","@id":"https:\/\/verdnatura.info\/en\/#website","url":"https:\/\/verdnatura.info\/en\/","name":"Verdnatura","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/verdnatura.info\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/23783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/comments?post=23783"}],"version-history":[{"count":0,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/23783\/revisions"}],"wp:attachment":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/media?parent=23783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}