Te Reo M\u0101ori AI Image Generator – WordPress Ready<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n 'maori-yellow': '#FFD700',\n 'maori-dark': '#0a0a0a',\n 'maori-grey': '#1a1a1a',\n 'maori-light-grey': '#2a2a2a'\n }\n }\n }\n }\n <\/script>\n <style>\n .image-preview-container {\n aspect-ratio: 1\/1;\n background-color: #2a2a2a;\n border: 1px solid #374151;\n }\n\n .preset-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n }\n\n .active-preset {\n border-color: #FFD700;\n background-color: rgba(255, 215, 0, 0.1);\n }\n\n .slider-container {\n scroll-snap-type: x mandatory;\n overflow-x: scroll;\n scrollbar-width: none;\n }\n\n .slider-container::-webkit-scrollbar {\n display: none;\n }\n\n .slider-item {\n scroll-snap-align: start;\n }\n\n .enhance-btn {\n transition: all 0.2s ease;\n }\n\n .enhance-btn:hover {\n transform: scale(1.05);\n }\n\n .download-btn {\n transition: all 0.2s ease;\n }\n\n .download-btn:hover {\n background-color: #FFD700;\n color: #000;\n }\n\n .storage-counter {\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.7;\n }\n }\n\n .wp-block-image-generator {\n background-color: #0a0a0a;\n color: white;\n min-height: 100vh;\n }\n\n .wp-block-generator-header {\n background-color: #1a1a1a;\n border-bottom: 1px solid #374151;\n }\n\n .wp-block-generator-sidebar {\n background-color: #1a1a1a;\n border-right: 1px solid #374151;\n }\n\n .wp-block-generator-main {\n background-color: #0a0a0a;\n }\n\n .wp-block-generator-panel {\n background-color: #1a1a1a;\n border-left: 1px solid #374151;\n }\n\n .wp-block-preset-card {\n background-color: #2a2a2a;\n border: 1px solid #374151;\n }\n\n .wp-block-input-area {\n background-color: #1a1a1a;\n border-top: 1px solid #374151;\n }\n\n .wp-block-modal {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.75);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 50;\n }\n <\/style>\n <\/head>\n\n <body class=\"bg-maori-dark text-white\">\n \n <div class=\"wp-block-image-generator flex flex-col h-screen\">\n \n <header class=\"wp-block-generator-header px-6 py-4\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4\">\n <h1 class=\"text-2xl font-bold\">\n <span class=\"text-maori-yellow\">Te Reo<\/span> M\u0101ori AI Image Generator\n <\/h1>\n <div class=\"hidden md:flex space-x-2\">\n <button class=\"px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-image mr-2\"><\/i>Generator\n <\/button>\n <button class=\"px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-history mr-2\"><\/i>History\n <\/button>\n <button class=\"px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-save mr-2\"><\/i>Saved\n <\/button>\n <\/div>\n <\/div>\n <div class=\"flex items-center space-x-4\">\n <div class=\"flex items-center space-x-2 bg-maori-light-grey px-3 py-1 rounded-full\">\n <i class=\"fas fa-hdd text-maori-yellow\"><\/i>\n <span class=\"text-sm\">Storage: <span id=\"storageCount\">0<\/span>\/50<\/span>\n <\/div>\n <button class=\"p-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded transition-colors\">\n <i class=\"fas fa-cog\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"flex flex-1 overflow-hidden\">\n \n <aside class=\"wp-block-generator-sidebar w-64 p-4 overflow-y-auto\">\n <div class=\"mb-6\">\n <h2 class=\"text-maori-yellow font-semibold mb-3\">Style Presets<\/h2>\n <div class=\"space-y-3\">\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all active-preset\">\n <div class=\"font-medium\">Traditional M\u0101ori Art<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Koru, manaia, tiki designs<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Digital Painting<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Vibrant colors, detailed brushwork<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Photorealistic<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">High detail, realistic textures<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Watercolor<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Soft blends, artistic flow<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Anime Style<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Manga inspired, expressive<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">3D Render<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">CGI, volumetric lighting<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Sketch Drawing<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Pencil, charcoal, line art<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Oil Painting<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Classic art, rich textures<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Pixel Art<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Retro, 8-bit inspired<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Minimalist<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Clean lines, simple forms<\/div>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <h2 class=\"text-maori-yellow font-semibold mb-3\">Generation Options<\/h2>\n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm mb-2\">Number of Images<\/label>\n <select class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\">\n <option>1 Image<\/option>\n <option selected>4 Images<\/option>\n <option>6 Images<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm mb-2\">Image Dimensions<\/label>\n <select class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\">\n <option>512\u00d7512<\/option>\n <option selected>768\u00d7768<\/option>\n <option>1024\u00d71024<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <h2 class=\"text-maori-yellow font-semibold mb-3\">Quick Actions<\/h2>\n <div class=\"space-y-2\">\n <button class=\"w-full px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-sync-alt mr-2\"><\/i>Regenerate\n <\/button>\n <button class=\"w-full px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-expand-alt mr-2\"><\/i>Upscale Selected\n <\/button>\n <button class=\"w-full px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-download mr-2\"><\/i>Download All\n <\/button>\n <\/div>\n <\/div>\n <\/aside>\n\n \n <main class=\"wp-block-generator-main flex-1 flex flex-col\">\n \n <div class=\"flex-1 p-6 overflow-hidden\">\n <div class=\"h-full flex flex-col\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 class=\"text-xl font-semibold\">Preview Gallery<\/h2>\n <div class=\"flex space-x-2\">\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-arrow-left mr-1\"><\/i>Prev\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n Next<i class=\"fas fa-arrow-right ml-1\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"flex-1 image-preview-container rounded-lg overflow-hidden relative\">\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <div class=\"text-center\">\n <i class=\"fas fa-image text-5xl text-gray-600 mb-4\"><\/i>\n <p class=\"text-gray-400\">Generated images will appear here<\/p>\n <p class=\"text-sm text-gray-500 mt-2\">Click “Generate” to create your first image<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"slider-container absolute inset-0 hidden\">\n <div class=\"flex h-full\">\n <div class=\"slider-item w-full flex-shrink-0 p-4\">\n <div class=\"h-full flex flex-col\">\n <div class=\"flex-1 bg-gray-800 rounded-lg flex items-center justify-center relative\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/512x512\/2a2a2a\/FFD700?text=Generated+Image\" alt=\"Generated\" class=\"max-h-full max-w-full object-contain\">\n <button class=\"absolute top-2 right-2 p-2 bg-black bg-opacity-50 rounded-full download-btn\">\n <i class=\"fas fa-download\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"wp-block-input-area p-6 border-t border-gray-700\">\n <div class=\"space-y-4\">\n <div>\n <div class=\"flex items-center justify-between mb-2\">\n <label class=\"block font-medium\">Prompt<\/label>\n <button class=\"enhance-btn px-3 py-1 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-magic mr-1\"><\/i>Enhance\n <\/button>\n <\/div>\n <textarea class=\"w-full bg-maori-light-grey border border-gray-600 rounded-lg p-3 focus:outline-none focus:border-maori-yellow transition-colors\" placeholder=\"Describe the image you want to generate...\" rows=\"3\">A beautiful M\u0101ori landscape with rolling green hills and traditional meeting house<\/textarea>\n <\/div>\n\n <div>\n <div class=\"flex items-center justify-between mb-2\">\n <label class=\"block font-medium\">Negative Prompt<\/label>\n <button class=\"enhance-btn px-3 py-1 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-magic mr-1\"><\/i>Enhance\n <\/button>\n <\/div>\n <textarea class=\"w-full bg-maori-light-grey border border-gray-600 rounded-lg p-3 focus:outline-none focus:border-maori-yellow transition-colors\" placeholder=\"What you don't want in the image...\" rows=\"2\">blurry, low quality, distorted faces, extra limbs<\/textarea>\n <\/div>\n\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4\">\n <div>\n <label class=\"block text-sm mb-1\">Reference Image<\/label>\n <div class=\"flex items-center space-x-2\">\n <button class=\"px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-upload mr-1\"><\/i>Upload\n <\/button>\n <span class=\"text-sm text-gray-400\">No file chosen<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"flex space-x-3\">\n <button class=\"px-6 py-3 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded-lg font-medium transition-colors\">\n <i class=\"fas fa-sync-alt mr-2\"><\/i>Edit Selected\n <\/button>\n <button id=\"generateBtn\" class=\"px-6 py-3 bg-maori-yellow text-black rounded-lg font-medium hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-bolt mr-2\"><\/i>Generate Images\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <aside class=\"wp-block-generator-panel w-80 p-4 overflow-y-auto\">\n <div class=\"mb-6\">\n <h3 class=\"text-maori-yellow font-semibold mb-3\">Recent Generations<\/h3>\n <div class=\"space-y-3\">\n <div class=\"bg-maori-light-grey rounded-lg p-3\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-12 h-12 bg-gray-700 rounded flex items-center justify-center\">\n <i class=\"fas fa-image\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <div class=\"font-medium text-sm\">M\u0101ori Warrior<\/div>\n <div class=\"text-xs text-gray-400\">2 hours ago<\/div>\n <\/div>\n <button class=\"p-2 hover:bg-maori-yellow hover:text-black rounded\">\n <i class=\"fas fa-download\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"bg-maori-light-grey rounded-lg p-3\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-12 h-12 bg-gray-700 rounded flex items-center justify-center\">\n <i class=\"fas fa-image\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <div class=\"font-medium text-sm\">Koru Design<\/div>\n <div class=\"text-xs text-gray-400\">Yesterday<\/div>\n <\/div>\n <button class=\"p-2 hover:bg-maori-yellow hover:text-black rounded\">\n <i class=\"fas fa-download\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <h3 class=\"text-maori-yellow font-semibold mb-3\">Saved Images<\/h3>\n <div class=\"bg-maori-light-grey rounded-lg p-4 text-center\">\n <i class=\"fas fa-save text-3xl text-gray-500 mb-2\"><\/i>\n <p class=\"text-sm text-gray-400\">No saved images yet<\/p>\n <button class=\"mt-3 px-4 py-2 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n View Saved\n <\/button>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"text-maori-yellow font-semibold mb-3\">Storage Management<\/h3>\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <div class=\"flex justify-between mb-2\">\n <span>Storage Usage<\/span>\n <span id=\"storageText\">0\/50 images<\/span>\n <\/div>\n <div class=\"w-full bg-gray-700 rounded-full h-2 mb-3\">\n <div id=\"storageBar\" class=\"bg-maori-yellow h-2 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <button id=\"downloadAllBtn\" class=\"w-full px-4 py-2 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n <i class=\"fas fa-download mr-2\"><\/i>Download All Images (ZIP)\n <\/button>\n <p class=\"text-xs text-gray-400 mt-2\">Download when you reach 50 images<\/p>\n <\/div>\n <\/div>\n <\/aside>\n <\/div>\n <\/div>\n\n \n <div id=\"loadingModal\" class=\"wp-block-modal\">\n <div class=\"bg-maori-grey rounded-lg p-8 max-w-md w-full mx-4 text-center\">\n <div class=\"flex justify-center mb-4\">\n <div class=\"w-12 h-12 border-4 border-maori-yellow border-t-transparent rounded-full animate-spin\"><\/div>\n <\/div>\n <h3 class=\"text-xl font-bold mb-2\">Generating Images<\/h3>\n <p class=\"text-gray-300\">Please wait while we create your images…<\/p>\n <div class=\"mt-4\">\n <div class=\"w-full bg-gray-700 rounded-full h-2\">\n <div id=\"progressBar\" class=\"bg-maori-yellow h-2 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-400 mt-2\">0\/4 images generated<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ API Configuration\n const API_KEY = \"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\";\n const API_ENDPOINT = \"https:\/\/openrouter.ai\/api\/v1\/images\/generations\";\n \/\/ DOM Elements\n const generateBtn = document.getElementById('generateBtn');\n const loadingModal = document.getElementById('loadingModal');\n const progressBar = document.getElementById('progressBar');\n const storageCount = document.getElementById('storageCount');\n const storageText = document.getElementById('storageText');\n const storageBar = document.getElementById('storageBar');\n const downloadAllBtn = document.getElementById('downloadAllBtn');\n const presetCards = document.querySelectorAll('.wp-block-preset-card');\n \/\/ State\n let currentStorage = 0;\n let selectedPreset = 0;\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n updateStorageDisplay();\n \/\/ Add event listeners to preset cards\n presetCards.forEach((card, index) => {\n card.addEventListener('click', () => {\n \/\/ Remove active class from all cards\n presetCards.forEach(c => c.classList.remove('active-preset'));\n \/\/ Add active class to clicked card\n card.classList.add('active-preset');\n selectedPreset = index;\n });\n });\n });\n \/\/ Generate button event\n generateBtn.addEventListener('click', async () => {\n \/\/ Show loading modal\n loadingModal.style.display = 'flex';\n \/\/ Simulate image generation progress\n let progress = 0;\n const interval = setInterval(() => {\n progress += 10;\n progressBar.style.width = `${progress}%`;\n if (progress >= 100) {\n clearInterval(interval);\n setTimeout(() => {\n loadingModal.style.display = 'none';\n \/\/ Update storage\n currentStorage += 4;\n if (currentStorage > 50) currentStorage = 50;\n updateStorageDisplay();\n \/\/ Show generated images\n showGeneratedImages();\n }, 500);\n }\n }, 200);\n });\n \/\/ Enhance prompt buttons\n document.querySelectorAll('.enhance-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n const textarea = this.parentElement.nextElementSibling;\n const currentText = textarea.value;\n if (currentText.trim() === '') {\n textarea.value = this.parentElement.querySelector('label').textContent === 'Prompt' ?\n 'Enhanced: A beautiful landscape with mountains and lake' :\n 'Enhanced: blurry, low quality, distorted';\n } else {\n textarea.value = `Enhanced: ${currentText}`;\n }\n });\n });\n \/\/ Update storage display\n function updateStorageDisplay() {\n storageCount.textContent = currentStorage;\n storageText.textContent = `${currentStorage}\/50 images`;\n storageBar.style.width = `${(currentStorage \/ 50) * 100}%`;\n \/\/ Enable\/disable download button\n if (currentStorage >= 50) {\n downloadAllBtn.disabled = false;\n downloadAllBtn.classList.add('storage-counter');\n } else {\n downloadAllBtn.disabled = true;\n downloadAllBtn.classList.remove('storage-counter');\n }\n }\n \/\/ Download all images\n downloadAllBtn.addEventListener('click', () => {\n alert('Downloading all images as ZIP file...');\n \/\/ Reset storage after download\n currentStorage = 0;\n updateStorageDisplay();\n });\n \/\/ Show generated images in slider\n function showGeneratedImages() {\n const previewContainer = document.querySelector('.image-preview-container');\n const sliderContainer = previewContainer.querySelector('.slider-container');\n \/\/ Hide placeholder, show slider\n previewContainer.querySelector('div.absolute').style.display = 'none';\n sliderContainer.style.display = 'block';\n \/\/ Update slider content (in a real app, this would show actual generated images)\n const sliderContent = sliderContainer.querySelector('.flex');\n sliderContent.innerHTML = '';\n for (let i = 0; i < 4; i++) {\n const slide = document.createElement('div');\n slide.className = 'slider-item w-full flex-shrink-0 p-4';\n slide.innerHTML = `\n <div class=\"h-full flex flex-col\">\n <div class=\"flex-1 bg-gray-800 rounded-lg flex items-center justify-center relative\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/512x512\/2a2a2a\/FFD700?text=Generated+Image+${i+1}\" alt=\"Generated\" class=\"max-h-full max-w-full object-contain\">\n Image ${i+1} - M\u0101ori Art Style<\/p> <\/div> <\/div> `;\n sliderContent.appendChild(slide);\n } \/\/ Add download functionality to new buttons sliderContent.querySelectorAll('.download-btn').forEach(btn => { btn.addEventListener('click', () => { alert('Downloading image...'); }); }); } \/\/ Navigation buttons for slider document.querySelectorAll('.fa-arrow-left, .fa-arrow-right').forEach(btn => { btn.addEventListener('click', function() { const slider = document.querySelector('.slider-container'); const scrollAmount = slider.clientWidth; if (this.classList.contains('fa-arrow-left')) { slider.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); } else { slider.scrollBy({ left: scrollAmount, behavior: 'smooth' }); } }); }); \n <\/script>\n <\/body>\n\n <\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Te Reo M\u0101ori AI Image Generator – WordPress Ready Te Reo M\u0101ori AI Image Generator Generator History Saved Storage: 0\/50 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-644","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Reo M\u0101ori AI Image Generator – WordPress Ready Te Reo M\u0101ori AI Image Generator Generator History Saved Storage: 0\/50 […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=644"}],"version-history":[{"count":3,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/644\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/644\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra-sites domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php on line 6131

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: session_start(): Session cannot be started after headers have already been sent in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/chatbot-ai-free-models/includes/class-chatbot-main.php on line 88

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902
{"id":644,"date":"2025-08-17T09:04:19","date_gmt":"2025-08-17T09:04:19","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?page_id=644"},"modified":"2025-08-17T09:08:52","modified_gmt":"2025-08-17T09:08:52","slug":"image-maori-ai","status":"publish","type":"page","link":"https:\/\/taonga.nxfanz.com\/?page_id=644","title":{"rendered":"image maori ai"},"content":{"rendered":"\n

\n\n\n\n\n \n\n \n \n \n Te Reo M\u0101ori AI Image Generator – WordPress Ready<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n 'maori-yellow': '#FFD700',\n 'maori-dark': '#0a0a0a',\n 'maori-grey': '#1a1a1a',\n 'maori-light-grey': '#2a2a2a'\n }\n }\n }\n }\n <\/script>\n <style>\n .image-preview-container {\n aspect-ratio: 1\/1;\n background-color: #2a2a2a;\n border: 1px solid #374151;\n }\n\n .preset-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n }\n\n .active-preset {\n border-color: #FFD700;\n background-color: rgba(255, 215, 0, 0.1);\n }\n\n .slider-container {\n scroll-snap-type: x mandatory;\n overflow-x: scroll;\n scrollbar-width: none;\n }\n\n .slider-container::-webkit-scrollbar {\n display: none;\n }\n\n .slider-item {\n scroll-snap-align: start;\n }\n\n .enhance-btn {\n transition: all 0.2s ease;\n }\n\n .enhance-btn:hover {\n transform: scale(1.05);\n }\n\n .download-btn {\n transition: all 0.2s ease;\n }\n\n .download-btn:hover {\n background-color: #FFD700;\n color: #000;\n }\n\n .storage-counter {\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.7;\n }\n }\n\n .wp-block-image-generator {\n background-color: #0a0a0a;\n color: white;\n min-height: 100vh;\n }\n\n .wp-block-generator-header {\n background-color: #1a1a1a;\n border-bottom: 1px solid #374151;\n }\n\n .wp-block-generator-sidebar {\n background-color: #1a1a1a;\n border-right: 1px solid #374151;\n }\n\n .wp-block-generator-main {\n background-color: #0a0a0a;\n }\n\n .wp-block-generator-panel {\n background-color: #1a1a1a;\n border-left: 1px solid #374151;\n }\n\n .wp-block-preset-card {\n background-color: #2a2a2a;\n border: 1px solid #374151;\n }\n\n .wp-block-input-area {\n background-color: #1a1a1a;\n border-top: 1px solid #374151;\n }\n\n .wp-block-modal {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.75);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 50;\n }\n <\/style>\n <\/head>\n\n <body class=\"bg-maori-dark text-white\">\n \n <div class=\"wp-block-image-generator flex flex-col h-screen\">\n \n <header class=\"wp-block-generator-header px-6 py-4\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4\">\n <h1 class=\"text-2xl font-bold\">\n <span class=\"text-maori-yellow\">Te Reo<\/span> M\u0101ori AI Image Generator\n <\/h1>\n <div class=\"hidden md:flex space-x-2\">\n <button class=\"px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-image mr-2\"><\/i>Generator\n <\/button>\n <button class=\"px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-history mr-2\"><\/i>History\n <\/button>\n <button class=\"px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-save mr-2\"><\/i>Saved\n <\/button>\n <\/div>\n <\/div>\n <div class=\"flex items-center space-x-4\">\n <div class=\"flex items-center space-x-2 bg-maori-light-grey px-3 py-1 rounded-full\">\n <i class=\"fas fa-hdd text-maori-yellow\"><\/i>\n <span class=\"text-sm\">Storage: <span id=\"storageCount\">0<\/span>\/50<\/span>\n <\/div>\n <button class=\"p-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded transition-colors\">\n <i class=\"fas fa-cog\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"flex flex-1 overflow-hidden\">\n \n <aside class=\"wp-block-generator-sidebar w-64 p-4 overflow-y-auto\">\n <div class=\"mb-6\">\n <h2 class=\"text-maori-yellow font-semibold mb-3\">Style Presets<\/h2>\n <div class=\"space-y-3\">\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all active-preset\">\n <div class=\"font-medium\">Traditional M\u0101ori Art<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Koru, manaia, tiki designs<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Digital Painting<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Vibrant colors, detailed brushwork<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Photorealistic<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">High detail, realistic textures<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Watercolor<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Soft blends, artistic flow<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Anime Style<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Manga inspired, expressive<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">3D Render<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">CGI, volumetric lighting<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Sketch Drawing<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Pencil, charcoal, line art<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Oil Painting<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Classic art, rich textures<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Pixel Art<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Retro, 8-bit inspired<\/div>\n <\/button>\n <button class=\"wp-block-preset-card w-full text-left px-4 py-3 rounded-lg transition-all\">\n <div class=\"font-medium\">Minimalist<\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Clean lines, simple forms<\/div>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <h2 class=\"text-maori-yellow font-semibold mb-3\">Generation Options<\/h2>\n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm mb-2\">Number of Images<\/label>\n <select class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\">\n <option>1 Image<\/option>\n <option selected>4 Images<\/option>\n <option>6 Images<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm mb-2\">Image Dimensions<\/label>\n <select class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\">\n <option>512\u00d7512<\/option>\n <option selected>768\u00d7768<\/option>\n <option>1024\u00d71024<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <h2 class=\"text-maori-yellow font-semibold mb-3\">Quick Actions<\/h2>\n <div class=\"space-y-2\">\n <button class=\"w-full px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-sync-alt mr-2\"><\/i>Regenerate\n <\/button>\n <button class=\"w-full px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-expand-alt mr-2\"><\/i>Upscale Selected\n <\/button>\n <button class=\"w-full px-4 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-download mr-2\"><\/i>Download All\n <\/button>\n <\/div>\n <\/div>\n <\/aside>\n\n \n <main class=\"wp-block-generator-main flex-1 flex flex-col\">\n \n <div class=\"flex-1 p-6 overflow-hidden\">\n <div class=\"h-full flex flex-col\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 class=\"text-xl font-semibold\">Preview Gallery<\/h2>\n <div class=\"flex space-x-2\">\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-arrow-left mr-1\"><\/i>Prev\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n Next<i class=\"fas fa-arrow-right ml-1\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"flex-1 image-preview-container rounded-lg overflow-hidden relative\">\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <div class=\"text-center\">\n <i class=\"fas fa-image text-5xl text-gray-600 mb-4\"><\/i>\n <p class=\"text-gray-400\">Generated images will appear here<\/p>\n <p class=\"text-sm text-gray-500 mt-2\">Click “Generate” to create your first image<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"slider-container absolute inset-0 hidden\">\n <div class=\"flex h-full\">\n <div class=\"slider-item w-full flex-shrink-0 p-4\">\n <div class=\"h-full flex flex-col\">\n <div class=\"flex-1 bg-gray-800 rounded-lg flex items-center justify-center relative\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/512x512\/2a2a2a\/FFD700?text=Generated+Image\" alt=\"Generated\" class=\"max-h-full max-w-full object-contain\">\n <button class=\"absolute top-2 right-2 p-2 bg-black bg-opacity-50 rounded-full download-btn\">\n <i class=\"fas fa-download\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"wp-block-input-area p-6 border-t border-gray-700\">\n <div class=\"space-y-4\">\n <div>\n <div class=\"flex items-center justify-between mb-2\">\n <label class=\"block font-medium\">Prompt<\/label>\n <button class=\"enhance-btn px-3 py-1 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-magic mr-1\"><\/i>Enhance\n <\/button>\n <\/div>\n <textarea class=\"w-full bg-maori-light-grey border border-gray-600 rounded-lg p-3 focus:outline-none focus:border-maori-yellow transition-colors\" placeholder=\"Describe the image you want to generate...\" rows=\"3\">A beautiful M\u0101ori landscape with rolling green hills and traditional meeting house<\/textarea>\n <\/div>\n\n <div>\n <div class=\"flex items-center justify-between mb-2\">\n <label class=\"block font-medium\">Negative Prompt<\/label>\n <button class=\"enhance-btn px-3 py-1 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-magic mr-1\"><\/i>Enhance\n <\/button>\n <\/div>\n <textarea class=\"w-full bg-maori-light-grey border border-gray-600 rounded-lg p-3 focus:outline-none focus:border-maori-yellow transition-colors\" placeholder=\"What you don't want in the image...\" rows=\"2\">blurry, low quality, distorted faces, extra limbs<\/textarea>\n <\/div>\n\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4\">\n <div>\n <label class=\"block text-sm mb-1\">Reference Image<\/label>\n <div class=\"flex items-center space-x-2\">\n <button class=\"px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-upload mr-1\"><\/i>Upload\n <\/button>\n <span class=\"text-sm text-gray-400\">No file chosen<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"flex space-x-3\">\n <button class=\"px-6 py-3 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded-lg font-medium transition-colors\">\n <i class=\"fas fa-sync-alt mr-2\"><\/i>Edit Selected\n <\/button>\n <button id=\"generateBtn\" class=\"px-6 py-3 bg-maori-yellow text-black rounded-lg font-medium hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-bolt mr-2\"><\/i>Generate Images\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <aside class=\"wp-block-generator-panel w-80 p-4 overflow-y-auto\">\n <div class=\"mb-6\">\n <h3 class=\"text-maori-yellow font-semibold mb-3\">Recent Generations<\/h3>\n <div class=\"space-y-3\">\n <div class=\"bg-maori-light-grey rounded-lg p-3\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-12 h-12 bg-gray-700 rounded flex items-center justify-center\">\n <i class=\"fas fa-image\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <div class=\"font-medium text-sm\">M\u0101ori Warrior<\/div>\n <div class=\"text-xs text-gray-400\">2 hours ago<\/div>\n <\/div>\n <button class=\"p-2 hover:bg-maori-yellow hover:text-black rounded\">\n <i class=\"fas fa-download\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"bg-maori-light-grey rounded-lg p-3\">\n <div class=\"flex items-center space-x-3\">\n <div class=\"w-12 h-12 bg-gray-700 rounded flex items-center justify-center\">\n <i class=\"fas fa-image\"><\/i>\n <\/div>\n <div class=\"flex-1\">\n <div class=\"font-medium text-sm\">Koru Design<\/div>\n <div class=\"text-xs text-gray-400\">Yesterday<\/div>\n <\/div>\n <button class=\"p-2 hover:bg-maori-yellow hover:text-black rounded\">\n <i class=\"fas fa-download\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mb-6\">\n <h3 class=\"text-maori-yellow font-semibold mb-3\">Saved Images<\/h3>\n <div class=\"bg-maori-light-grey rounded-lg p-4 text-center\">\n <i class=\"fas fa-save text-3xl text-gray-500 mb-2\"><\/i>\n <p class=\"text-sm text-gray-400\">No saved images yet<\/p>\n <button class=\"mt-3 px-4 py-2 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n View Saved\n <\/button>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"text-maori-yellow font-semibold mb-3\">Storage Management<\/h3>\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <div class=\"flex justify-between mb-2\">\n <span>Storage Usage<\/span>\n <span id=\"storageText\">0\/50 images<\/span>\n <\/div>\n <div class=\"w-full bg-gray-700 rounded-full h-2 mb-3\">\n <div id=\"storageBar\" class=\"bg-maori-yellow h-2 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <button id=\"downloadAllBtn\" class=\"w-full px-4 py-2 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\n <i class=\"fas fa-download mr-2\"><\/i>Download All Images (ZIP)\n <\/button>\n <p class=\"text-xs text-gray-400 mt-2\">Download when you reach 50 images<\/p>\n <\/div>\n <\/div>\n <\/aside>\n <\/div>\n <\/div>\n\n \n <div id=\"loadingModal\" class=\"wp-block-modal\">\n <div class=\"bg-maori-grey rounded-lg p-8 max-w-md w-full mx-4 text-center\">\n <div class=\"flex justify-center mb-4\">\n <div class=\"w-12 h-12 border-4 border-maori-yellow border-t-transparent rounded-full animate-spin\"><\/div>\n <\/div>\n <h3 class=\"text-xl font-bold mb-2\">Generating Images<\/h3>\n <p class=\"text-gray-300\">Please wait while we create your images…<\/p>\n <div class=\"mt-4\">\n <div class=\"w-full bg-gray-700 rounded-full h-2\">\n <div id=\"progressBar\" class=\"bg-maori-yellow h-2 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-400 mt-2\">0\/4 images generated<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ API Configuration\n const API_KEY = \"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\";\n const API_ENDPOINT = \"https:\/\/openrouter.ai\/api\/v1\/images\/generations\";\n \/\/ DOM Elements\n const generateBtn = document.getElementById('generateBtn');\n const loadingModal = document.getElementById('loadingModal');\n const progressBar = document.getElementById('progressBar');\n const storageCount = document.getElementById('storageCount');\n const storageText = document.getElementById('storageText');\n const storageBar = document.getElementById('storageBar');\n const downloadAllBtn = document.getElementById('downloadAllBtn');\n const presetCards = document.querySelectorAll('.wp-block-preset-card');\n \/\/ State\n let currentStorage = 0;\n let selectedPreset = 0;\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n updateStorageDisplay();\n \/\/ Add event listeners to preset cards\n presetCards.forEach((card, index) => {\n card.addEventListener('click', () => {\n \/\/ Remove active class from all cards\n presetCards.forEach(c => c.classList.remove('active-preset'));\n \/\/ Add active class to clicked card\n card.classList.add('active-preset');\n selectedPreset = index;\n });\n });\n });\n \/\/ Generate button event\n generateBtn.addEventListener('click', async () => {\n \/\/ Show loading modal\n loadingModal.style.display = 'flex';\n \/\/ Simulate image generation progress\n let progress = 0;\n const interval = setInterval(() => {\n progress += 10;\n progressBar.style.width = `${progress}%`;\n if (progress >= 100) {\n clearInterval(interval);\n setTimeout(() => {\n loadingModal.style.display = 'none';\n \/\/ Update storage\n currentStorage += 4;\n if (currentStorage > 50) currentStorage = 50;\n updateStorageDisplay();\n \/\/ Show generated images\n showGeneratedImages();\n }, 500);\n }\n }, 200);\n });\n \/\/ Enhance prompt buttons\n document.querySelectorAll('.enhance-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n const textarea = this.parentElement.nextElementSibling;\n const currentText = textarea.value;\n if (currentText.trim() === '') {\n textarea.value = this.parentElement.querySelector('label').textContent === 'Prompt' ?\n 'Enhanced: A beautiful landscape with mountains and lake' :\n 'Enhanced: blurry, low quality, distorted';\n } else {\n textarea.value = `Enhanced: ${currentText}`;\n }\n });\n });\n \/\/ Update storage display\n function updateStorageDisplay() {\n storageCount.textContent = currentStorage;\n storageText.textContent = `${currentStorage}\/50 images`;\n storageBar.style.width = `${(currentStorage \/ 50) * 100}%`;\n \/\/ Enable\/disable download button\n if (currentStorage >= 50) {\n downloadAllBtn.disabled = false;\n downloadAllBtn.classList.add('storage-counter');\n } else {\n downloadAllBtn.disabled = true;\n downloadAllBtn.classList.remove('storage-counter');\n }\n }\n \/\/ Download all images\n downloadAllBtn.addEventListener('click', () => {\n alert('Downloading all images as ZIP file...');\n \/\/ Reset storage after download\n currentStorage = 0;\n updateStorageDisplay();\n });\n \/\/ Show generated images in slider\n function showGeneratedImages() {\n const previewContainer = document.querySelector('.image-preview-container');\n const sliderContainer = previewContainer.querySelector('.slider-container');\n \/\/ Hide placeholder, show slider\n previewContainer.querySelector('div.absolute').style.display = 'none';\n sliderContainer.style.display = 'block';\n \/\/ Update slider content (in a real app, this would show actual generated images)\n const sliderContent = sliderContainer.querySelector('.flex');\n sliderContent.innerHTML = '';\n for (let i = 0; i < 4; i++) {\n const slide = document.createElement('div');\n slide.className = 'slider-item w-full flex-shrink-0 p-4';\n slide.innerHTML = `\n <div class=\"h-full flex flex-col\">\n <div class=\"flex-1 bg-gray-800 rounded-lg flex items-center justify-center relative\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/512x512\/2a2a2a\/FFD700?text=Generated+Image+${i+1}\" alt=\"Generated\" class=\"max-h-full max-w-full object-contain\">\n Image ${i+1} - M\u0101ori Art Style<\/p> <\/div> <\/div> `;\n sliderContent.appendChild(slide);\n } \/\/ Add download functionality to new buttons sliderContent.querySelectorAll('.download-btn').forEach(btn => { btn.addEventListener('click', () => { alert('Downloading image...'); }); }); } \/\/ Navigation buttons for slider document.querySelectorAll('.fa-arrow-left, .fa-arrow-right').forEach(btn => { btn.addEventListener('click', function() { const slider = document.querySelector('.slider-container'); const scrollAmount = slider.clientWidth; if (this.classList.contains('fa-arrow-left')) { slider.scrollBy({ left: -scrollAmount, behavior: 'smooth' }); } else { slider.scrollBy({ left: scrollAmount, behavior: 'smooth' }); } }); }); \n <\/script>\n <\/body>\n\n <\/html>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Te Reo M\u0101ori AI Image Generator – WordPress Ready Te Reo M\u0101ori AI Image Generator Generator History Saved Storage: 0\/50 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-644","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Reo M\u0101ori AI Image Generator – WordPress Ready Te Reo M\u0101ori AI Image Generator Generator History Saved Storage: 0\/50 […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=644"}],"version-history":[{"count":3,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/644\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/644\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}