Generador de Prompts para IA<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n }\n .prompt-card {\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n }\n .prompt-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .copy-btn-feedback {\n transition: opacity 0.3s ease-in-out;\n }\n .loader {\n border: 4px solid #e5e7eb; \/* gray-200 *\/\n border-top: 4px solid #3498db;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 text-gray-800 min-h-screen flex items-center justify-center p-4\">\n\n <div class=\"w-full max-w-4xl mx-auto\">\n <header class=\"text-center mb-8\">\n <h2 class=\"text-2xl font-semibold text-gray-700\">Convierte tus ideas simples en prompts detallados y listos para usar.<\/h2>\n <\/header>\n\n <main>\n <div class=\"bg-white p-6 rounded-2xl shadow-lg border border-gray-200 mb-8\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-3\">\u00bfC\u00f3mo funciona?<\/h2>\n <ul class=\"list-disc list-inside space-y-2 text-gray-600\">\n <li><strong>Escribe tu idea:<\/strong> Comienza con una descripci\u00f3n simple. No te preocupes por los detalles, \u00a1nosotros nos encargamos de eso!<\/li>\n <li><strong>Sube una referencia (Opcional):<\/strong> Si tienes una imagen que te inspira, s\u00fabela. La IA la usar\u00e1 para entender mejor el estilo que buscas.<\/li>\n <li><strong>Genera y Copia:<\/strong> Presiona el bot\u00f3n y obtendr\u00e1s tres prompts \u00fanicos y creativos. Elige tu favorito, c\u00f3pialo con un clic y p\u00e9galo en tu generador de im\u00e1genes preferido.<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"bg-white p-6 rounded-2xl shadow-lg border border-gray-200\">\n <label for=\"userInput\" class=\"block text-lg font-medium text-gray-700 mb-2\">1. Escribe tu idea aqu\u00ed:<\/label>\n <textarea id=\"userInput\" rows=\"3\" class=\"w-full bg-white text-gray-900 p-4 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition\" placeholder=\"Ej: un astronauta en un bosque de hongos gigantes...\"><\/textarea>\n \n <label class=\"block text-lg font-medium text-gray-700 mb-2 mt-4\">2. (Opcional) Sube una imagen de referencia:<\/label>\n <div id=\"imageUploadContainer\" class=\"mt-2 flex justify-center items-center w-full h-48 bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 hover:border-purple-500 transition relative\">\n <div id=\"uploadPrompt\" class=\"text-center text-gray-500\">\n <svg class=\"mx-auto h-12 w-12\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 48 48\" aria-hidden=\"true\"><path d=\"M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n <p class=\"mt-1 text-sm\">Arrastra y suelta o haz clic para subir<\/p>\n <p class=\"text-xs\">PNG, JPG, WEBP<\/p>\n <\/div>\n <img decoding=\"async\" id=\"imagePreview\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"\" class=\"lazyload hidden h-full w-full object-contain rounded-lg p-2\" alt=\"Vista previa de la imagen\">\n <button id=\"removeImageBtn\" class=\"hidden absolute top-2 right-2 bg-red-600 text-white rounded-full p-1.5 hover:bg-red-700 transition z-10\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/><\/svg>\n <\/button>\n <\/div>\n <input type=\"file\" id=\"imageUpload\" class=\"hidden\" accept=\"image\/png, image\/jpeg, image\/webp\">\n\n <button id=\"generateBtn\" class=\"mt-6 w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transition transform hover:scale-105\">\n Generar Prompts\n <\/button>\n <\/div>\n\n <div id=\"loader\" class=\"text-center py-8 hidden\">\n <div class=\"loader mx-auto\"><\/div>\n <p class=\"mt-4 text-gray-600\">Generando prompts creativos...<\/p>\n <\/div>\n\n <div id=\"results\" class=\"mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n <\/div>\n <\/main>\n \n <footer class=\"text-center mt-12 text-gray-500\">\n <p>Creado para facilitar la generaci\u00f3n de im\u00e1genes con IA.<\/p>\n <\/footer>\n <\/div>\n\n <script>\n const generateBtn = document.getElementById('generateBtn');\n const userInput = document.getElementById('userInput');\n const resultsContainer = document.getElementById('results');\n const loader = document.getElementById('loader');\n \n const imageUploadContainer = document.getElementById('imageUploadContainer');\n const imageUpload = document.getElementById('imageUpload');\n const uploadPrompt = document.getElementById('uploadPrompt');\n const imagePreview = document.getElementById('imagePreview');\n const removeImageBtn = document.getElementById('removeImageBtn');\n\n let uploadedImageBase64 = null;\n let uploadedImageType = null;\n\n \/\/ --- Image Upload Logic ---\n imageUploadContainer.addEventListener('click', () => imageUpload.click());\n imageUpload.addEventListener('change', (event) => {\n const file = event.target.files[0];\n if (file) processFile(file);\n });\n\n \/\/ Drag and Drop\n imageUploadContainer.addEventListener('dragover', (event) => {\n event.preventDefault();\n imageUploadContainer.classList.add('border-purple-500', 'bg-gray-100');\n });\n imageUploadContainer.addEventListener('dragleave', () => {\n imageUploadContainer.classList.remove('border-purple-500', 'bg-gray-100');\n });\n imageUploadContainer.addEventListener('drop', (event) => {\n event.preventDefault();\n imageUploadContainer.classList.remove('border-purple-500', 'bg-gray-100');\n const file = event.dataTransfer.files[0];\n if (file) processFile(file);\n });\n\n removeImageBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n removeImage();\n });\n\n function processFile(file) {\n if (!file.type.startsWith('image\/')) {\n console.error(\"El archivo no es una imagen.\");\n return;\n }\n const reader = new FileReader();\n reader.onload = function(e) {\n imagePreview.src = e.target.result;\n imagePreview.classList.remove('hidden');\n uploadPrompt.classList.add('hidden');\n removeImageBtn.classList.remove('hidden');\n \n uploadedImageBase64 = e.target.result.split(',')[1];\n uploadedImageType = file.type;\n };\n reader.readAsDataURL(file);\n }\n\n function removeImage() {\n uploadedImageBase64 = null;\n uploadedImageType = null;\n imagePreview.src = \"\";\n imagePreview.classList.add('hidden');\n removeImageBtn.classList.add('hidden');\n uploadPrompt.classList.remove('hidden');\n imageUpload.value = ''; \/\/ Reset file input\n }\n\n \/\/ --- API Call Logic ---\n generateBtn.addEventListener('click', async () => {\n const userQuery = userInput.value.trim();\n if (!userQuery) {\n userInput.classList.add('border-red-500', 'focus:border-red-500');\n userInput.placeholder = \"Por favor, introduce una idea primero.\";\n setTimeout(() => {\n userInput.classList.remove('border-red-500', 'focus:border-red-500');\n userInput.placeholder = \"Ej: un astronauta en un bosque de hongos gigantes...\";\n }, 3000);\n return;\n }\n\n resultsContainer.innerHTML = '';\n loader.classList.remove('hidden');\n\n try {\n const apiKey = \"\"; \/\/ API key will be provided by the environment\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;\n\n const systemPrompt = \"Eres un experto en la creaci\u00f3n de prompts para generadores de im\u00e1genes de IA. Tu tarea es tomar la idea simple del usuario y expandirla en tres prompts distintos, detallados y creativos. Cada prompt debe explorar un estilo art\u00edstico o t\u00e9cnico diferente (por ejemplo: fotorrealista, fantas\u00eda \u00e9pica, acuarela, ciberpunk, etc.). Aseg\u00farate de incluir detalles sobre la composici\u00f3n, la iluminaci\u00f3n, la paleta de colores y la atm\u00f3sfera. Si el usuario sube una imagen, \u00fasala como inspiraci\u00f3n principal, describiendo su estilo y contenido como base para las nuevas ideas.\";\n\n const parts = [{ text: userQuery }];\n if (uploadedImageBase64 && uploadedImageType) {\n parts.push({\n inlineData: {\n mimeType: uploadedImageType,\n data: uploadedImageBase64\n }\n });\n }\n\n const payload = {\n systemInstruction: { parts: [{ text: systemPrompt }] },\n contents: [{ parts: parts }],\n generationConfig: {\n responseMimeType: \"application\/json\",\n responseSchema: {\n type: \"OBJECT\",\n properties: { prompts: { type: \"ARRAY\", items: { \"type\": \"STRING\" } } }\n }\n }\n };\n\n const response = await fetch(apiUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n \n if (!response.ok) throw new Error(`Error en la API: ${response.statusText}`);\n\n const result = await response.json();\n const candidate = result.candidates?.[0];\n\n if (candidate && candidate.content?.parts?.[0]?.text) {\n const parsedJson = JSON.parse(candidate.content.parts[0].text);\n displayPrompts(parsedJson.prompts);\n } else {\n throw new Error(\"No se pudo generar contenido v\u00e1lido.\");\n }\n\n } catch (error) {\n console.error('Error:', error);\n resultsContainer.innerHTML = `<p class=\"text-red-600 text-center col-span-full\">Hubo un error al generar los prompts. Por favor, intenta de nuevo.<\/p>`;\n } finally {\n loader.classList.add('hidden');\n }\n });\n\n function displayPrompts(prompts) {\n prompts.forEach((promptText) => {\n const card = document.createElement('div');\n card.className = 'prompt-card bg-white p-5 rounded-xl shadow-lg flex flex-col justify-between border border-gray-200';\n \n const promptContent = document.createElement('p');\n promptContent.className = 'text-gray-700 mb-4 h-full';\n promptContent.textContent = promptText;\n\n const copyButton = document.createElement('button');\n copyButton.className = 'copy-btn w-full bg-gray-100 hover:bg-purple-500 hover:text-white text-gray-800 font-semibold py-2 px-4 rounded-lg transition border border-gray-300';\n \n const buttonText = document.createElement('span');\n buttonText.textContent = 'Copiar Prompt';\n \n const feedbackText = document.createElement('span');\n feedbackText.className = 'copy-btn-feedback opacity-0 text-green-500 font-bold absolute inset-0 flex items-center justify-center';\n feedbackText.textContent = '\u00a1Copiado!';\n\n copyButton.style.position = 'relative';\n copyButton.appendChild(buttonText);\n copyButton.appendChild(feedbackText);\n\n copyButton.addEventListener('click', () => {\n \/\/ Use document.execCommand as a fallback for clipboard API\n const tempTextarea = document.createElement('textarea');\n tempTextarea.value = promptText;\n document.body.appendChild(tempTextarea);\n tempTextarea.select();\n document.execCommand('copy');\n document.body.removeChild(tempTextarea);\n\n \/\/ Show feedback\n buttonText.style.opacity = '0';\n feedbackText.style.opacity = '1';\n\n setTimeout(() => {\n buttonText.style.opacity = '1';\n feedbackText.style.opacity = '0';\n }, 2000);\n });\n\n card.appendChild(promptContent);\n card.appendChild(copyButton);\n resultsContainer.appendChild(card);\n });\n }\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Utiliza nuestro explorador de inteligencias artificiales para mantenerte al d\u00eda. \u00a1Actualizamos constantemente esta fant\u00e1stica lista!<\/p>","protected":false},"author":1,"featured_media":2412,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"portfolio_category":[51],"portfolio_skills":[],"portfolio_tags":[],"class_list":["post-2408","avada_portfolio","type-avada_portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio_category-diseno"],"acf":[],"_links":{"self":[{"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/avada_portfolio\/2408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/avada_portfolio"}],"about":[{"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/types\/avada_portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/comments?post=2408"}],"version-history":[{"count":12,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/avada_portfolio\/2408\/revisions"}],"predecessor-version":[{"id":2421,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/avada_portfolio\/2408\/revisions\/2421"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/media\/2412"}],"wp:attachment":[{"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/media?parent=2408"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/portfolio_category?post=2408"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/portfolio_skills?post=2408"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/edukia.org\/ca\/wp-json\/wp\/v2\/portfolio_tags?post=2408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}