MemeIA \u2014 Generador con IA<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg: #0d0d0d;\n --surface: #161616;\n --surface2: #1f1f1f;\n --border: #2a2a2a;\n --accent: #f5d000;\n --accent2: #ff4d4d;\n --text: #f0f0f0;\n --muted: #777;\n --radius: 10px;\n }\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n }\n\n \/* HEADER *\/\n header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 1rem 2rem;\n border-bottom: 1px solid var(--border);\n }\n .logo { display: flex; align-items: baseline; gap: 6px; }\n .logo span:first-child {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px; color: var(--accent); letter-spacing: 1px;\n }\n .logo span:last-child { font-size: 12px; color: var(--muted); }\n .badge {\n font-size: 11px; padding: 4px 10px; border-radius: 20px;\n background: #1a1a00; color: var(--accent);\n border: 1px solid #3a3500; font-weight: 600;\n }\n\n \/* LAYOUT *\/\n main { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }\n .workspace {\n display: grid;\n grid-template-columns: 320px 1fr;\n gap: 1.25rem;\n }\n @media (max-width: 720px) { .workspace { grid-template-columns: 1fr; } }\n\n \/* PANELS *\/\n .panel {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1.25rem;\n }\n .panel-title {\n font-size: 10px; font-weight: 600; color: var(--muted);\n text-transform: uppercase; letter-spacing: .1em;\n margin-bottom: 1rem;\n display: flex; align-items: center; gap: 6px;\n }\n .panel-title::after {\n content: ''; flex: 1; height: 1px; background: var(--border);\n }\n\n \/* DROP ZONE *\/\n .drop-zone {\n border: 1.5px dashed var(--border);\n border-radius: var(--radius);\n padding: 2rem 1rem;\n text-align: center; cursor: pointer;\n transition: border-color .2s, background .2s;\n position: relative;\n }\n .drop-zone:hover, .drop-zone.active {\n border-color: var(--accent);\n background: rgba(245,208,0,.04);\n }\n .drop-zone .dz-icon { font-size: 36px; margin-bottom: .5rem; }\n .drop-zone p { font-size: 13px; color: var(--muted); }\n .drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }\n\n \/* TEMPLATES *\/\n .tpl-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;\n margin-top: .75rem;\n }\n .tpl-btn {\n font-size: 10px; padding: 5px 4px; text-align: center;\n border: 1px solid var(--border); border-radius: 6px;\n cursor: pointer; color: var(--muted); background: var(--surface2);\n transition: all .15s;\n }\n .tpl-btn:hover { border-color: var(--accent); color: var(--accent); }\n\n \/* TABS *\/\n .tabs { display: flex; gap: 4px; margin-bottom: 1rem; }\n .tab {\n flex: 1; padding: 8px; text-align: center;\n font-size: 13px; font-weight: 500; cursor: pointer;\n border-radius: 8px; border: 1px solid transparent;\n color: var(--muted); transition: all .15s;\n }\n .tab.active {\n background: var(--surface2);\n border-color: var(--border);\n color: var(--text);\n }\n .tab-content { display: none; }\n .tab-content.active { display: block; }\n\n \/* FORM ELEMENTS *\/\n label.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: .85rem; }\n label.field .lbl { font-size: 11px; color: var(--muted); font-weight: 500; }\n input[type=\"text\"], textarea, select {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 7px; color: var(--text);\n font-family: inherit; font-size: 13px;\n padding: 8px 10px; width: 100%;\n transition: border-color .15s; outline: none;\n }\n input[type=\"text\"]:focus, textarea:focus, select:focus {\n border-color: var(--accent);\n }\n textarea { resize: vertical; min-height: 60px; }\n .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n .range-row {\n display: flex; gap: 8px; align-items: center; margin-bottom: .85rem;\n }\n .range-row .lbl { font-size: 11px; color: var(--muted); min-width: 65px; }\n .range-row input[type=\"range\"] { flex: 1; accent-color: var(--accent); }\n .range-row output { font-size: 11px; color: var(--accent); min-width: 30px; text-align: right; }\n .color-row { display: flex; align-items: center; gap: 8px; margin-bottom: .85rem; }\n .color-row .lbl { font-size: 11px; color: var(--muted); }\n input[type=\"color\"] {\n width: 34px; height: 28px; border: 1px solid var(--border);\n border-radius: 6px; cursor: pointer; padding: 2px; background: none;\n }\n select option { background: var(--surface); }\n\n \/* AI PANEL *\/\n .ai-btn {\n width: 100%; padding: 10px;\n background: var(--accent); color: #000;\n border: none; border-radius: 8px;\n font-family: 'Bebas Neue', sans-serif; font-size: 18px;\n letter-spacing: 1px; cursor: pointer;\n transition: opacity .15s, transform .1s;\n display: flex; align-items: center; justify-content: center; gap: 8px;\n }\n .ai-btn:hover { opacity: .9; }\n .ai-btn:active { transform: scale(.98); }\n .ai-btn:disabled { opacity: .4; cursor: not-allowed; }\n\n .suggestions {\n display: flex; flex-direction: column; gap: 6px; margin-top: .85rem;\n }\n .suggestion {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 7px; padding: 8px 10px;\n font-size: 12px; cursor: pointer; transition: border-color .15s;\n display: flex; justify-content: space-between; align-items: flex-start;\n gap: 8px;\n }\n .suggestion:hover { border-color: var(--accent); }\n .suggestion .texts { flex: 1; }\n .suggestion .top-txt { color: var(--text); font-weight: 500; }\n .suggestion .bot-txt { color: var(--muted); margin-top: 2px; }\n .suggestion .apply-icon { color: var(--accent); font-size: 16px; flex-shrink: 0; margin-top: 2px; }\n\n .ai-status {\n font-size: 12px; color: var(--muted); margin-top: .6rem;\n min-height: 18px; display: flex; align-items: center; gap: 6px;\n }\n .dot-loader span {\n display: inline-block; width: 5px; height: 5px;\n background: var(--accent); border-radius: 50%; margin: 0 2px;\n animation: bounce .9s infinite;\n }\n .dot-loader span:nth-child(2) { animation-delay: .15s; }\n .dot-loader span:nth-child(3) { animation-delay: .3s; }\n @keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }\n\n \/* PREVIEW *\/\n .preview-box {\n background: #000; border-radius: var(--radius);\n border: 1px solid var(--border);\n min-height: 280px; display: flex; align-items: center;\n justify-content: center; position: relative; overflow: hidden;\n }\n #empty-msg { color: var(--muted); font-size: 13px; text-align: center; padding: 2rem; }\n canvas { max-width: 100%; max-height: 480px; display: none; border-radius: 8px; }\n\n \/* BOTTOM ACTIONS *\/\n .actions { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; justify-content: flex-end; }\n .btn-ghost {\n padding: 9px 18px; border: 1px solid var(--border);\n border-radius: 8px; font-size: 13px; font-weight: 500;\n cursor: pointer; background: transparent; color: var(--muted);\n transition: all .15s;\n }\n .btn-ghost:hover { color: var(--text); border-color: #444; }\n .btn-primary {\n padding: 9px 22px;\n background: var(--accent); color: #000;\n border: none; border-radius: 8px;\n font-size: 13px; font-weight: 700; cursor: pointer;\n display: none; align-items: center; gap: 6px;\n transition: opacity .15s;\n }\n .btn-primary:hover { opacity: .88; }\n\n \/* DIVIDER *\/\n .divider {\n display: flex; align-items: center; gap: 8px; margin: .75rem 0;\n font-size: 11px; color: var(--muted);\n }\n .divider::before, .divider::after {\n content: ''; flex: 1; height: 1px; background: var(--border);\n }\n\n footer {\n text-align: center; font-size: 11px; color: #444;\n padding: 2rem 1rem; border-top: 1px solid var(--border); margin-top: 2rem;\n }\n <\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"logo\">\n <span>MemeIA<\/span>\n <span>generador con inteligencia artificial<\/span>\n <\/div>\n <div class=\"badge\">\u26a1 Sin registro<\/div>\n<\/header>\n\n<main>\n <div class=\"workspace\">\n\n \n <div style=\"display:flex;flex-direction:column;gap:1rem;\">\n\n \n <div class=\"panel\">\n <div class=\"panel-title\">Imagen<\/div>\n <div class=\"drop-zone\" id=\"dropZone\">\n <div class=\"dz-icon\">\ud83d\uddbc\ufe0f<\/div>\n <p>Clic o arrastra una foto aqu\u00ed<\/p>\n <input type=\"file\" id=\"fileInput\" accept=\"image\/*\">\n <\/div>\n <div class=\"panel-title\" style=\"margin-top:1rem\">Plantillas<\/div>\n <div class=\"tpl-grid\">\n <div class=\"tpl-btn\" onclick=\"loadTemplate('drake')\">Drake<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('distracted')\">Distracted BF<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('doge')\">Doge<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('change')\">Change my mind<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('buttons')\">Two Buttons<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('fine')\">This is Fine<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"panel\">\n <div class=\"panel-title\">Texto del meme<\/div>\n <div class=\"tabs\">\n <div class=\"tab active\" onclick=\"switchTab('manual')\">\u270d\ufe0f Manual<\/div>\n <div class=\"tab\" onclick=\"switchTab('ia')\">\ud83e\udd16 Con IA<\/div>\n <\/div>\n\n \n <div class=\"tab-content active\" id=\"tab-manual\">\n <label class=\"field\">\n <span class=\"lbl\">Texto superior<\/span>\n <input type=\"text\" id=\"topText\" placeholder=\"Ej: Yo en lunes...\" oninput=\"draw()\">\n <\/label>\n <label class=\"field\">\n <span class=\"lbl\">Texto inferior<\/span>\n <input type=\"text\" id=\"botText\" placeholder=\"Ej: vs Yo en viernes\" oninput=\"draw()\">\n <\/label>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tab-ia\">\n <label class=\"field\">\n <span class=\"lbl\">Contexto adicional (opcional)<\/span>\n <textarea id=\"aiContext\" placeholder=\"Ej: hazlo gracioso, sobre el trabajo, en tono ir\u00f3nico...\"><\/textarea>\n <\/label>\n <button class=\"ai-btn\" id=\"aiBtn\" onclick=\"generateWithAI()\" disabled>\n \u2726 Generar texto con IA\n <\/button>\n <div class=\"ai-status\" id=\"aiStatus\"><\/div>\n <div class=\"suggestions\" id=\"suggestions\"><\/div>\n <\/div>\n\n \n <div class=\"divider\">estilo<\/div>\n\n <div class=\"row2\">\n <div>\n <div class=\"lbl\" style=\"font-size:11px;color:var(--muted);margin-bottom:5px\">Fuente<\/div>\n <select id=\"fontSelect\" onchange=\"draw()\">\n <option value=\"Impact\">Impact<\/option>\n <option value=\"Arial Black\">Arial Black<\/option>\n <option value=\"Comic Sans MS\">Comic Sans<\/option>\n <option value=\"Georgia\">Georgia<\/option>\n <option value=\"Verdana\">Verdana<\/option>\n <option value=\"Courier New\">Courier<\/option>\n <\/select>\n <\/div>\n <div>\n <div class=\"lbl\" style=\"font-size:11px;color:var(--muted);margin-bottom:5px\">Color texto<\/div>\n <div style=\"display:flex;gap:6px;align-items:center;margin-top:2px\">\n <input type=\"color\" id=\"topColor\" value=\"#ffffff\" oninput=\"draw()\" title=\"Superior\">\n <input type=\"color\" id=\"botColor\" value=\"#ffffff\" oninput=\"draw()\" title=\"Inferior\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"range-row\">\n <span class=\"lbl\">Tama\u00f1o<\/span>\n <input type=\"range\" id=\"fontSize\" min=\"16\" max=\"96\" value=\"42\" oninput=\"draw();sizeOut.value=this.value+'px'\">\n <output id=\"sizeOut\">42px<\/output>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div style=\"display:flex;flex-direction:column;gap:1rem;\">\n <div class=\"panel\" style=\"flex:1\">\n <div class=\"panel-title\">Vista previa<\/div>\n <div class=\"preview-box\">\n <div id=\"empty-msg\">\n <div style=\"font-size:40px;margin-bottom:.5rem\">\ud83c\udfad<\/div>\n <div>Sube una imagen para empezar<\/div>\n <\/div>\n <canvas id=\"c\"><\/canvas>\n <\/div>\n <div class=\"actions\">\n <button class=\"btn-ghost\" onclick=\"resetAll()\">Limpiar<\/button>\n <button class=\"btn-primary\" id=\"dlBtn\" onclick=\"download()\">\u2b07 Descargar PNG<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/main>\n\n<footer>Sin servidores. Sin registro. Todo ocurre en tu navegador. \u00b7 La IA analiza la imagen localmente.<\/footer>\n\n<script>\nconst canvas = document.getElementById('c');\nconst ctx = canvas.getContext('2d');\nlet img = null;\nlet imgBase64 = null;\n\n\/\/ --- DRAG & DROP ---\nconst dropZone = document.getElementById('dropZone');\nconst fileInput = document.getElementById('fileInput');\n\ndropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('active'); });\ndropZone.addEventListener('dragleave', () => dropZone.classList.remove('active'));\ndropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('active'); loadFile(e.dataTransfer.files[0]); });\nfileInput.addEventListener('change', e => loadFile(e.target.files[0]));\n\nfunction loadFile(file) {\n if (!file || !file.type.startsWith('image\/')) return;\n const reader = new FileReader();\n reader.onload = ev => {\n imgBase64 = ev.target.result.split(',')[1];\n const image = new Image();\n image.onload = () => { img = image; setupCanvas(); draw(); enableAI(); };\n image.src = ev.target.result;\n };\n reader.readAsDataURL(file);\n}\n\nfunction enableAI() {\n document.getElementById('aiBtn').disabled = false;\n}\n\nfunction setupCanvas() {\n const maxW = Math.min(img.width, 780);\n const r = maxW \/ img.width;\n canvas.width = maxW;\n canvas.height = Math.round(img.height * r);\n document.getElementById('empty-msg').style.display = 'none';\n canvas.style.display = 'block';\n const dlBtn = document.getElementById('dlBtn');\n dlBtn.style.display = 'flex';\n}\n\n\/\/ --- DRAW ---\nfunction wrapText(text, maxW) {\n const words = text.split(' ');\n const lines = []; let line = '';\n for (const w of words) {\n const test = line ? line + ' ' + w : w;\n if (ctx.measureText(test).width > maxW && line) { lines.push(line); line = w; }\n else line = test;\n }\n if (line) lines.push(line);\n return lines;\n}\n\nfunction drawBlock(text, xC, yStart, dir) {\n const size = +document.getElementById('fontSize').value;\n const font = document.getElementById('fontSelect').value;\n const colorEl = dir === 1 ? 'topColor' : 'botColor';\n const color = document.getElementById(colorEl).value;\n ctx.font = `900 ${size}px \"${font}\", Impact, sans-serif`;\n ctx.textAlign = 'center';\n ctx.textBaseline = dir === 1 ? 'top' : 'bottom';\n ctx.lineWidth = Math.max(2, size \/ 11);\n ctx.strokeStyle = 'rgba(0,0,0,.9)';\n ctx.lineJoin = 'round';\n const lines = wrapText(text.toUpperCase(), canvas.width - 40);\n lines.forEach((ln, i) => {\n const y = yStart + i * size * 1.2 * dir;\n ctx.strokeText(ln, xC, y);\n ctx.fillStyle = color;\n ctx.fillText(ln, xC, y);\n });\n}\n\nfunction draw() {\n if (!img) return;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n const top = document.getElementById('topText').value.trim();\n const bot = document.getElementById('botText').value.trim();\n if (top) drawBlock(top, canvas.width \/ 2, 12, 1);\n if (bot) drawBlock(bot, canvas.width \/ 2, canvas.height - 12, -1);\n}\n\n\/\/ --- TABS ---\nfunction switchTab(tab) {\n document.querySelectorAll('.tab').forEach((t, i) => {\n t.classList.toggle('active', (i === 0) === (tab === 'manual'));\n });\n document.getElementById('tab-manual').classList.toggle('active', tab === 'manual');\n document.getElementById('tab-ia').classList.toggle('active', tab === 'ia');\n}\n\n\/\/ --- AI GENERATION ---\nasync function generateWithAI() {\n if (!imgBase64) return;\n const btn = document.getElementById('aiBtn');\n const status = document.getElementById('aiStatus');\n const suggestions = document.getElementById('suggestions');\n const context = document.getElementById('aiContext').value.trim();\n\n btn.disabled = true;\n suggestions.innerHTML = '';\n status.innerHTML = '<div class=\"dot-loader\"><span><\/span><span><\/span><span><\/span><\/div><span>Analizando imagen con IA...<\/span>';\n\n const prompt = `Eres un experto en humor y memes de internet. Analiza esta imagen y genera 3 opciones de texto para un meme.\n\n${context ? `Instrucciones adicionales del usuario: \"${context}\"` : 'Hazlo gracioso, con humor actual de internet.'}\n\nPara cada opci\u00f3n, devuelve un JSON con este formato exacto (sin markdown, sin texto extra):\n{\n \"memes\": [\n {\"top\": \"TEXTO SUPERIOR\", \"bot\": \"TEXTO INFERIOR\"},\n {\"top\": \"TEXTO SUPERIOR\", \"bot\": \"TEXTO INFERIOR\"},\n {\"top\": \"TEXTO SUPERIOR\", \"bot\": \"TEXTO INFERIOR\"}\n ]\n}\n\nReglas:\n- Textos cortos y contundentes (m\u00e1x 8 palabras cada uno)\n- Estilo meme cl\u00e1sico: directo, ir\u00f3nico, relatable\n- En espa\u00f1ol\n- Si la imagen tiene personas o situaciones reconocibles, \u00fasalas como referencia\n- El texto debe ser GRACIOSO y ORIGINAL`;\n\n try {\n const res = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n model: 'claude-sonnet-4-20250514',\n max_tokens: 1000,\n messages: [{\n role: 'user',\n content: [\n {\n type: 'image',\n source: { type: 'base64', media_type: 'image\/jpeg', data: imgBase64 }\n },\n { type: 'text', text: prompt }\n ]\n }]\n })\n });\n\n const data = await res.json();\n const rawText = data.content.map(b => b.text || '').join('');\n const clean = rawText.replace(\/```json|```\/g, '').trim();\n const parsed = JSON.parse(clean);\n\n suggestions.innerHTML = '';\n parsed.memes.forEach((m, i) => {\n const el = document.createElement('div');\n el.className = 'suggestion';\n el.innerHTML = `\n <div class=\"texts\">\n <div class=\"top-txt\">${m.top}<\/div>\n <div class=\"bot-txt\">${m.bot}<\/div>\n <\/div>\n <div class=\"apply-icon\">\u2192<\/div>`;\n el.onclick = () => {\n document.getElementById('topText').value = m.top;\n document.getElementById('botText').value = m.bot;\n draw();\n switchTab('manual');\n };\n suggestions.appendChild(el);\n });\n\n status.innerHTML = '<span style=\"color:#4caf50\">\u2713 3 opciones generadas \u2014 haz clic para aplicar<\/span>';\n } catch (err) {\n console.error(err);\n status.innerHTML = '<span style=\"color:var(--accent2)\">\u26a0 Error al generar. Intenta de nuevo.<\/span>';\n }\n\n btn.disabled = false;\n}\n\n\/\/ --- DOWNLOAD ---\nfunction download() {\n if (!img) return;\n const a = document.createElement('a');\n a.download = 'meme-' + Date.now() + '.png';\n a.href = canvas.toDataURL('image\/png');\n a.click();\n}\n\n\/\/ --- RESET ---\nfunction resetAll() {\n img = null; imgBase64 = null;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n canvas.style.display = 'none';\n document.getElementById('empty-msg').style.display = 'block';\n document.getElementById('dlBtn').style.display = 'none';\n document.getElementById('topText').value = '';\n document.getElementById('botText').value = '';\n document.getElementById('aiStatus').innerHTML = '';\n document.getElementById('suggestions').innerHTML = '';\n document.getElementById('aiBtn').disabled = true;\n fileInput.value = '';\n}\n\n\/\/ --- TEMPLATES ---\nconst templates = {\n drake: 'https:\/\/i.imgflip.com\/30b1gx.jpg',\n distracted: 'https:\/\/i.imgflip.com\/1ur9b0.jpg',\n doge: 'https:\/\/i.imgflip.com\/4t0m5.jpg',\n change: 'https:\/\/i.imgflip.com\/24y43o.jpg',\n buttons: 'https:\/\/i.imgflip.com\/1g8my4.jpg',\n fine: 'https:\/\/i.imgflip.com\/wxica.jpg',\n};\n\nfunction loadTemplate(name) {\n const image = new Image();\n image.crossOrigin = 'anonymous';\n image.onload = async () => {\n img = image;\n \/\/ convert to base64 via canvas for templates\n const tmp = document.createElement('canvas');\n tmp.width = image.width; tmp.height = image.height;\n tmp.getContext('2d').drawImage(image, 0, 0);\n try { imgBase64 = tmp.toDataURL('image\/jpeg').split(',')[1]; } catch(e) { imgBase64 = null; }\n setupCanvas(); draw(); enableAI();\n };\n image.onerror = () => alert('No se pudo cargar la plantilla. Sube tu propia imagen.');\n image.src = templates[name];\n}\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>MemeIA \u2014 Generador con IA MemeIA generador con inteligencia artificial \u26a1 Sin registro Imagen \ud83d\uddbc\ufe0f Clic o arrastra una foto aqu\u00ed Plantillas Drake Distracted BF Doge Change my mind Two Buttons This is Fine Texto del meme \u270d\ufe0f Manual \ud83e\udd16 Con IA Texto superior Texto inferior Contexto adicional (opcional) \u2726 Generar texto con IA estilo… <\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":6,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":40,"date":"2026-04-17T11:53:36","date_gmt":"2026-04-17T11:53:36","guid":{"rendered":"https:\/\/fichadosenlared.es\/?page_id=40"},"modified":"2026-04-17T12:09:28","modified_gmt":"2026-04-17T12:09:28","slug":"prueba","status":"publish","type":"page","link":"https:\/\/fichadosenlared.es\/?page_id=40","title":{"rendered":"prueba"},"content":{"rendered":"\n\n\n\n \n \n MemeIA \u2014 Generador con IA<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg: #0d0d0d;\n --surface: #161616;\n --surface2: #1f1f1f;\n --border: #2a2a2a;\n --accent: #f5d000;\n --accent2: #ff4d4d;\n --text: #f0f0f0;\n --muted: #777;\n --radius: 10px;\n }\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n }\n\n \/* HEADER *\/\n header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 1rem 2rem;\n border-bottom: 1px solid var(--border);\n }\n .logo { display: flex; align-items: baseline; gap: 6px; }\n .logo span:first-child {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px; color: var(--accent); letter-spacing: 1px;\n }\n .logo span:last-child { font-size: 12px; color: var(--muted); }\n .badge {\n font-size: 11px; padding: 4px 10px; border-radius: 20px;\n background: #1a1a00; color: var(--accent);\n border: 1px solid #3a3500; font-weight: 600;\n }\n\n \/* LAYOUT *\/\n main { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }\n .workspace {\n display: grid;\n grid-template-columns: 320px 1fr;\n gap: 1.25rem;\n }\n @media (max-width: 720px) { .workspace { grid-template-columns: 1fr; } }\n\n \/* PANELS *\/\n .panel {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1.25rem;\n }\n .panel-title {\n font-size: 10px; font-weight: 600; color: var(--muted);\n text-transform: uppercase; letter-spacing: .1em;\n margin-bottom: 1rem;\n display: flex; align-items: center; gap: 6px;\n }\n .panel-title::after {\n content: ''; flex: 1; height: 1px; background: var(--border);\n }\n\n \/* DROP ZONE *\/\n .drop-zone {\n border: 1.5px dashed var(--border);\n border-radius: var(--radius);\n padding: 2rem 1rem;\n text-align: center; cursor: pointer;\n transition: border-color .2s, background .2s;\n position: relative;\n }\n .drop-zone:hover, .drop-zone.active {\n border-color: var(--accent);\n background: rgba(245,208,0,.04);\n }\n .drop-zone .dz-icon { font-size: 36px; margin-bottom: .5rem; }\n .drop-zone p { font-size: 13px; color: var(--muted); }\n .drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }\n\n \/* TEMPLATES *\/\n .tpl-grid {\n display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;\n margin-top: .75rem;\n }\n .tpl-btn {\n font-size: 10px; padding: 5px 4px; text-align: center;\n border: 1px solid var(--border); border-radius: 6px;\n cursor: pointer; color: var(--muted); background: var(--surface2);\n transition: all .15s;\n }\n .tpl-btn:hover { border-color: var(--accent); color: var(--accent); }\n\n \/* TABS *\/\n .tabs { display: flex; gap: 4px; margin-bottom: 1rem; }\n .tab {\n flex: 1; padding: 8px; text-align: center;\n font-size: 13px; font-weight: 500; cursor: pointer;\n border-radius: 8px; border: 1px solid transparent;\n color: var(--muted); transition: all .15s;\n }\n .tab.active {\n background: var(--surface2);\n border-color: var(--border);\n color: var(--text);\n }\n .tab-content { display: none; }\n .tab-content.active { display: block; }\n\n \/* FORM ELEMENTS *\/\n label.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: .85rem; }\n label.field .lbl { font-size: 11px; color: var(--muted); font-weight: 500; }\n input[type=\"text\"], textarea, select {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 7px; color: var(--text);\n font-family: inherit; font-size: 13px;\n padding: 8px 10px; width: 100%;\n transition: border-color .15s; outline: none;\n }\n input[type=\"text\"]:focus, textarea:focus, select:focus {\n border-color: var(--accent);\n }\n textarea { resize: vertical; min-height: 60px; }\n .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n .range-row {\n display: flex; gap: 8px; align-items: center; margin-bottom: .85rem;\n }\n .range-row .lbl { font-size: 11px; color: var(--muted); min-width: 65px; }\n .range-row input[type=\"range\"] { flex: 1; accent-color: var(--accent); }\n .range-row output { font-size: 11px; color: var(--accent); min-width: 30px; text-align: right; }\n .color-row { display: flex; align-items: center; gap: 8px; margin-bottom: .85rem; }\n .color-row .lbl { font-size: 11px; color: var(--muted); }\n input[type=\"color\"] {\n width: 34px; height: 28px; border: 1px solid var(--border);\n border-radius: 6px; cursor: pointer; padding: 2px; background: none;\n }\n select option { background: var(--surface); }\n\n \/* AI PANEL *\/\n .ai-btn {\n width: 100%; padding: 10px;\n background: var(--accent); color: #000;\n border: none; border-radius: 8px;\n font-family: 'Bebas Neue', sans-serif; font-size: 18px;\n letter-spacing: 1px; cursor: pointer;\n transition: opacity .15s, transform .1s;\n display: flex; align-items: center; justify-content: center; gap: 8px;\n }\n .ai-btn:hover { opacity: .9; }\n .ai-btn:active { transform: scale(.98); }\n .ai-btn:disabled { opacity: .4; cursor: not-allowed; }\n\n .suggestions {\n display: flex; flex-direction: column; gap: 6px; margin-top: .85rem;\n }\n .suggestion {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 7px; padding: 8px 10px;\n font-size: 12px; cursor: pointer; transition: border-color .15s;\n display: flex; justify-content: space-between; align-items: flex-start;\n gap: 8px;\n }\n .suggestion:hover { border-color: var(--accent); }\n .suggestion .texts { flex: 1; }\n .suggestion .top-txt { color: var(--text); font-weight: 500; }\n .suggestion .bot-txt { color: var(--muted); margin-top: 2px; }\n .suggestion .apply-icon { color: var(--accent); font-size: 16px; flex-shrink: 0; margin-top: 2px; }\n\n .ai-status {\n font-size: 12px; color: var(--muted); margin-top: .6rem;\n min-height: 18px; display: flex; align-items: center; gap: 6px;\n }\n .dot-loader span {\n display: inline-block; width: 5px; height: 5px;\n background: var(--accent); border-radius: 50%; margin: 0 2px;\n animation: bounce .9s infinite;\n }\n .dot-loader span:nth-child(2) { animation-delay: .15s; }\n .dot-loader span:nth-child(3) { animation-delay: .3s; }\n @keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }\n\n \/* PREVIEW *\/\n .preview-box {\n background: #000; border-radius: var(--radius);\n border: 1px solid var(--border);\n min-height: 280px; display: flex; align-items: center;\n justify-content: center; position: relative; overflow: hidden;\n }\n #empty-msg { color: var(--muted); font-size: 13px; text-align: center; padding: 2rem; }\n canvas { max-width: 100%; max-height: 480px; display: none; border-radius: 8px; }\n\n \/* BOTTOM ACTIONS *\/\n .actions { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; justify-content: flex-end; }\n .btn-ghost {\n padding: 9px 18px; border: 1px solid var(--border);\n border-radius: 8px; font-size: 13px; font-weight: 500;\n cursor: pointer; background: transparent; color: var(--muted);\n transition: all .15s;\n }\n .btn-ghost:hover { color: var(--text); border-color: #444; }\n .btn-primary {\n padding: 9px 22px;\n background: var(--accent); color: #000;\n border: none; border-radius: 8px;\n font-size: 13px; font-weight: 700; cursor: pointer;\n display: none; align-items: center; gap: 6px;\n transition: opacity .15s;\n }\n .btn-primary:hover { opacity: .88; }\n\n \/* DIVIDER *\/\n .divider {\n display: flex; align-items: center; gap: 8px; margin: .75rem 0;\n font-size: 11px; color: var(--muted);\n }\n .divider::before, .divider::after {\n content: ''; flex: 1; height: 1px; background: var(--border);\n }\n\n footer {\n text-align: center; font-size: 11px; color: #444;\n padding: 2rem 1rem; border-top: 1px solid var(--border); margin-top: 2rem;\n }\n <\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"logo\">\n <span>MemeIA<\/span>\n <span>generador con inteligencia artificial<\/span>\n <\/div>\n <div class=\"badge\">\u26a1 Sin registro<\/div>\n<\/header>\n\n<main>\n <div class=\"workspace\">\n\n \n <div style=\"display:flex;flex-direction:column;gap:1rem;\">\n\n \n <div class=\"panel\">\n <div class=\"panel-title\">Imagen<\/div>\n <div class=\"drop-zone\" id=\"dropZone\">\n <div class=\"dz-icon\">\ud83d\uddbc\ufe0f<\/div>\n <p>Clic o arrastra una foto aqu\u00ed<\/p>\n <input type=\"file\" id=\"fileInput\" accept=\"image\/*\">\n <\/div>\n <div class=\"panel-title\" style=\"margin-top:1rem\">Plantillas<\/div>\n <div class=\"tpl-grid\">\n <div class=\"tpl-btn\" onclick=\"loadTemplate('drake')\">Drake<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('distracted')\">Distracted BF<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('doge')\">Doge<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('change')\">Change my mind<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('buttons')\">Two Buttons<\/div>\n <div class=\"tpl-btn\" onclick=\"loadTemplate('fine')\">This is Fine<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"panel\">\n <div class=\"panel-title\">Texto del meme<\/div>\n <div class=\"tabs\">\n <div class=\"tab active\" onclick=\"switchTab('manual')\">\u270d\ufe0f Manual<\/div>\n <div class=\"tab\" onclick=\"switchTab('ia')\">\ud83e\udd16 Con IA<\/div>\n <\/div>\n\n \n <div class=\"tab-content active\" id=\"tab-manual\">\n <label class=\"field\">\n <span class=\"lbl\">Texto superior<\/span>\n <input type=\"text\" id=\"topText\" placeholder=\"Ej: Yo en lunes...\" oninput=\"draw()\">\n <\/label>\n <label class=\"field\">\n <span class=\"lbl\">Texto inferior<\/span>\n <input type=\"text\" id=\"botText\" placeholder=\"Ej: vs Yo en viernes\" oninput=\"draw()\">\n <\/label>\n <\/div>\n\n \n <div class=\"tab-content\" id=\"tab-ia\">\n <label class=\"field\">\n <span class=\"lbl\">Contexto adicional (opcional)<\/span>\n <textarea id=\"aiContext\" placeholder=\"Ej: hazlo gracioso, sobre el trabajo, en tono ir\u00f3nico...\"><\/textarea>\n <\/label>\n <button class=\"ai-btn\" id=\"aiBtn\" onclick=\"generateWithAI()\" disabled>\n \u2726 Generar texto con IA\n <\/button>\n <div class=\"ai-status\" id=\"aiStatus\"><\/div>\n <div class=\"suggestions\" id=\"suggestions\"><\/div>\n <\/div>\n\n \n <div class=\"divider\">estilo<\/div>\n\n <div class=\"row2\">\n <div>\n <div class=\"lbl\" style=\"font-size:11px;color:var(--muted);margin-bottom:5px\">Fuente<\/div>\n <select id=\"fontSelect\" onchange=\"draw()\">\n <option value=\"Impact\">Impact<\/option>\n <option value=\"Arial Black\">Arial Black<\/option>\n <option value=\"Comic Sans MS\">Comic Sans<\/option>\n <option value=\"Georgia\">Georgia<\/option>\n <option value=\"Verdana\">Verdana<\/option>\n <option value=\"Courier New\">Courier<\/option>\n <\/select>\n <\/div>\n <div>\n <div class=\"lbl\" style=\"font-size:11px;color:var(--muted);margin-bottom:5px\">Color texto<\/div>\n <div style=\"display:flex;gap:6px;align-items:center;margin-top:2px\">\n <input type=\"color\" id=\"topColor\" value=\"#ffffff\" oninput=\"draw()\" title=\"Superior\">\n <input type=\"color\" id=\"botColor\" value=\"#ffffff\" oninput=\"draw()\" title=\"Inferior\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"range-row\">\n <span class=\"lbl\">Tama\u00f1o<\/span>\n <input type=\"range\" id=\"fontSize\" min=\"16\" max=\"96\" value=\"42\" oninput=\"draw();sizeOut.value=this.value+'px'\">\n <output id=\"sizeOut\">42px<\/output>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div style=\"display:flex;flex-direction:column;gap:1rem;\">\n <div class=\"panel\" style=\"flex:1\">\n <div class=\"panel-title\">Vista previa<\/div>\n <div class=\"preview-box\">\n <div id=\"empty-msg\">\n <div style=\"font-size:40px;margin-bottom:.5rem\">\ud83c\udfad<\/div>\n <div>Sube una imagen para empezar<\/div>\n <\/div>\n <canvas id=\"c\"><\/canvas>\n <\/div>\n <div class=\"actions\">\n <button class=\"btn-ghost\" onclick=\"resetAll()\">Limpiar<\/button>\n <button class=\"btn-primary\" id=\"dlBtn\" onclick=\"download()\">\u2b07 Descargar PNG<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/main>\n\n<footer>Sin servidores. Sin registro. Todo ocurre en tu navegador. \u00b7 La IA analiza la imagen localmente.<\/footer>\n\n<script>\nconst canvas = document.getElementById('c');\nconst ctx = canvas.getContext('2d');\nlet img = null;\nlet imgBase64 = null;\n\n\/\/ --- DRAG & DROP ---\nconst dropZone = document.getElementById('dropZone');\nconst fileInput = document.getElementById('fileInput');\n\ndropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('active'); });\ndropZone.addEventListener('dragleave', () => dropZone.classList.remove('active'));\ndropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('active'); loadFile(e.dataTransfer.files[0]); });\nfileInput.addEventListener('change', e => loadFile(e.target.files[0]));\n\nfunction loadFile(file) {\n if (!file || !file.type.startsWith('image\/')) return;\n const reader = new FileReader();\n reader.onload = ev => {\n imgBase64 = ev.target.result.split(',')[1];\n const image = new Image();\n image.onload = () => { img = image; setupCanvas(); draw(); enableAI(); };\n image.src = ev.target.result;\n };\n reader.readAsDataURL(file);\n}\n\nfunction enableAI() {\n document.getElementById('aiBtn').disabled = false;\n}\n\nfunction setupCanvas() {\n const maxW = Math.min(img.width, 780);\n const r = maxW \/ img.width;\n canvas.width = maxW;\n canvas.height = Math.round(img.height * r);\n document.getElementById('empty-msg').style.display = 'none';\n canvas.style.display = 'block';\n const dlBtn = document.getElementById('dlBtn');\n dlBtn.style.display = 'flex';\n}\n\n\/\/ --- DRAW ---\nfunction wrapText(text, maxW) {\n const words = text.split(' ');\n const lines = []; let line = '';\n for (const w of words) {\n const test = line ? line + ' ' + w : w;\n if (ctx.measureText(test).width > maxW && line) { lines.push(line); line = w; }\n else line = test;\n }\n if (line) lines.push(line);\n return lines;\n}\n\nfunction drawBlock(text, xC, yStart, dir) {\n const size = +document.getElementById('fontSize').value;\n const font = document.getElementById('fontSelect').value;\n const colorEl = dir === 1 ? 'topColor' : 'botColor';\n const color = document.getElementById(colorEl).value;\n ctx.font = `900 ${size}px \"${font}\", Impact, sans-serif`;\n ctx.textAlign = 'center';\n ctx.textBaseline = dir === 1 ? 'top' : 'bottom';\n ctx.lineWidth = Math.max(2, size \/ 11);\n ctx.strokeStyle = 'rgba(0,0,0,.9)';\n ctx.lineJoin = 'round';\n const lines = wrapText(text.toUpperCase(), canvas.width - 40);\n lines.forEach((ln, i) => {\n const y = yStart + i * size * 1.2 * dir;\n ctx.strokeText(ln, xC, y);\n ctx.fillStyle = color;\n ctx.fillText(ln, xC, y);\n });\n}\n\nfunction draw() {\n if (!img) return;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n const top = document.getElementById('topText').value.trim();\n const bot = document.getElementById('botText').value.trim();\n if (top) drawBlock(top, canvas.width \/ 2, 12, 1);\n if (bot) drawBlock(bot, canvas.width \/ 2, canvas.height - 12, -1);\n}\n\n\/\/ --- TABS ---\nfunction switchTab(tab) {\n document.querySelectorAll('.tab').forEach((t, i) => {\n t.classList.toggle('active', (i === 0) === (tab === 'manual'));\n });\n document.getElementById('tab-manual').classList.toggle('active', tab === 'manual');\n document.getElementById('tab-ia').classList.toggle('active', tab === 'ia');\n}\n\n\/\/ --- AI GENERATION ---\nasync function generateWithAI() {\n if (!imgBase64) return;\n const btn = document.getElementById('aiBtn');\n const status = document.getElementById('aiStatus');\n const suggestions = document.getElementById('suggestions');\n const context = document.getElementById('aiContext').value.trim();\n\n btn.disabled = true;\n suggestions.innerHTML = '';\n status.innerHTML = '<div class=\"dot-loader\"><span><\/span><span><\/span><span><\/span><\/div><span>Analizando imagen con IA...<\/span>';\n\n const prompt = `Eres un experto en humor y memes de internet. Analiza esta imagen y genera 3 opciones de texto para un meme.\n\n${context ? `Instrucciones adicionales del usuario: \"${context}\"` : 'Hazlo gracioso, con humor actual de internet.'}\n\nPara cada opci\u00f3n, devuelve un JSON con este formato exacto (sin markdown, sin texto extra):\n{\n \"memes\": [\n {\"top\": \"TEXTO SUPERIOR\", \"bot\": \"TEXTO INFERIOR\"},\n {\"top\": \"TEXTO SUPERIOR\", \"bot\": \"TEXTO INFERIOR\"},\n {\"top\": \"TEXTO SUPERIOR\", \"bot\": \"TEXTO INFERIOR\"}\n ]\n}\n\nReglas:\n- Textos cortos y contundentes (m\u00e1x 8 palabras cada uno)\n- Estilo meme cl\u00e1sico: directo, ir\u00f3nico, relatable\n- En espa\u00f1ol\n- Si la imagen tiene personas o situaciones reconocibles, \u00fasalas como referencia\n- El texto debe ser GRACIOSO y ORIGINAL`;\n\n try {\n const res = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n model: 'claude-sonnet-4-20250514',\n max_tokens: 1000,\n messages: [{\n role: 'user',\n content: [\n {\n type: 'image',\n source: { type: 'base64', media_type: 'image\/jpeg', data: imgBase64 }\n },\n { type: 'text', text: prompt }\n ]\n }]\n })\n });\n\n const data = await res.json();\n const rawText = data.content.map(b => b.text || '').join('');\n const clean = rawText.replace(\/```json|```\/g, '').trim();\n const parsed = JSON.parse(clean);\n\n suggestions.innerHTML = '';\n parsed.memes.forEach((m, i) => {\n const el = document.createElement('div');\n el.className = 'suggestion';\n el.innerHTML = `\n <div class=\"texts\">\n <div class=\"top-txt\">${m.top}<\/div>\n <div class=\"bot-txt\">${m.bot}<\/div>\n <\/div>\n <div class=\"apply-icon\">\u2192<\/div>`;\n el.onclick = () => {\n document.getElementById('topText').value = m.top;\n document.getElementById('botText').value = m.bot;\n draw();\n switchTab('manual');\n };\n suggestions.appendChild(el);\n });\n\n status.innerHTML = '<span style=\"color:#4caf50\">\u2713 3 opciones generadas \u2014 haz clic para aplicar<\/span>';\n } catch (err) {\n console.error(err);\n status.innerHTML = '<span style=\"color:var(--accent2)\">\u26a0 Error al generar. Intenta de nuevo.<\/span>';\n }\n\n btn.disabled = false;\n}\n\n\/\/ --- DOWNLOAD ---\nfunction download() {\n if (!img) return;\n const a = document.createElement('a');\n a.download = 'meme-' + Date.now() + '.png';\n a.href = canvas.toDataURL('image\/png');\n a.click();\n}\n\n\/\/ --- RESET ---\nfunction resetAll() {\n img = null; imgBase64 = null;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n canvas.style.display = 'none';\n document.getElementById('empty-msg').style.display = 'block';\n document.getElementById('dlBtn').style.display = 'none';\n document.getElementById('topText').value = '';\n document.getElementById('botText').value = '';\n document.getElementById('aiStatus').innerHTML = '';\n document.getElementById('suggestions').innerHTML = '';\n document.getElementById('aiBtn').disabled = true;\n fileInput.value = '';\n}\n\n\/\/ --- TEMPLATES ---\nconst templates = {\n drake: 'https:\/\/i.imgflip.com\/30b1gx.jpg',\n distracted: 'https:\/\/i.imgflip.com\/1ur9b0.jpg',\n doge: 'https:\/\/i.imgflip.com\/4t0m5.jpg',\n change: 'https:\/\/i.imgflip.com\/24y43o.jpg',\n buttons: 'https:\/\/i.imgflip.com\/1g8my4.jpg',\n fine: 'https:\/\/i.imgflip.com\/wxica.jpg',\n};\n\nfunction loadTemplate(name) {\n const image = new Image();\n image.crossOrigin = 'anonymous';\n image.onload = async () => {\n img = image;\n \/\/ convert to base64 via canvas for templates\n const tmp = document.createElement('canvas');\n tmp.width = image.width; tmp.height = image.height;\n tmp.getContext('2d').drawImage(image, 0, 0);\n try { imgBase64 = tmp.toDataURL('image\/jpeg').split(',')[1]; } catch(e) { imgBase64 = null; }\n setupCanvas(); draw(); enableAI();\n };\n image.onerror = () => alert('No se pudo cargar la plantilla. Sube tu propia imagen.');\n image.src = templates[name];\n}\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>MemeIA \u2014 Generador con IA MemeIA generador con inteligencia artificial \u26a1 Sin registro Imagen \ud83d\uddbc\ufe0f Clic o arrastra una foto aqu\u00ed Plantillas Drake Distracted BF Doge Change my mind Two Buttons This is Fine Texto del meme \u270d\ufe0f Manual \ud83e\udd16 Con IA Texto superior Texto inferior Contexto adicional (opcional) \u2726 Generar texto con IA estilo… <\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":6,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/fichadosenlared.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}