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 .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-main {\n background-color: #0a0a0a;\n }\n\n .wp-block-generator-sidebar {\n background-color: #1a1a1a;\n border-right: 1px solid #374151;\n }\n\n .wp-block-generator-panel {\n background-color: #1a1a1a;\n border-left: 1px solid #374151;\n }\n\n .image-preview-container {\n aspect-ratio: 1\/1;\n background-color: #2a2a2a;\n border: 1px solid #374151;\n }\n\n .tab-content {\n display: none;\n }\n\n .tab-content.active {\n display: block;\n }\n\n .progress-bar {\n transition: width 0.3s ease;\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 .dropdown-content {\n display: none;\n position: absolute;\n background-color: #2a2a2a;\n min-width: 200px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);\n z-index: 1;\n border: 1px solid #374151;\n border-radius: 4px;\n }\n\n .dropdown-content a {\n color: white;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n }\n\n .dropdown-content a:hover {\n background-color: #374151;\n }\n\n .dropdown:hover .dropdown-content {\n display: block;\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 <\/style>\n <\/head>\n\n <body class=\"bg-maori-dark text-white\">\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>\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 <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"flex flex-1 overflow-hidden\">\n \n <aside class=\"wp-block-generator-sidebar w-80 p-4 overflow-y-auto\">\n <div class=\"space-y-6\">\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Art Style<\/label>\n <select id=\"styleSelect\" 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 value=\"traditional\">Traditional M\u0101ori Art<\/option>\n <option value=\"digital\">Digital Painting<\/option>\n <option value=\"photorealistic\">Photorealistic<\/option>\n <option value=\"watercolor\">Watercolor<\/option>\n <option value=\"anime\">Anime Style<\/option>\n <option value=\"3d\">3D Render<\/option>\n <option value=\"sketch\">Sketch Drawing<\/option>\n <option value=\"oil\">Oil Painting<\/option>\n <option value=\"pixel\">Pixel Art<\/option>\n <option value=\"minimalist\">Minimalist<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Number of Images<\/label>\n <select id=\"imageCount\" 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 value=\"1\">1 Image<\/option>\n <option value=\"4\" selected>4 Images<\/option>\n <option value=\"6\">6 Images<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Image Dimensions<\/label>\n <select id=\"dimensions\" 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 value=\"512x512\">512\u00d7512<\/option>\n <option value=\"768x768\" selected>768\u00d7768<\/option>\n <option value=\"1024x1024\">1024\u00d71024<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Prompt<\/label>\n <textarea id=\"promptInput\" 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 <button id=\"enhancePrompt\" class=\"mt-2 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 Prompt\n <\/button>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Negative Prompt<\/label>\n <textarea id=\"negativePrompt\" 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 <button id=\"enhanceNegative\" class=\"mt-2 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 Negative\n <\/button>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Reference Image (Optional)<\/label>\n <div class=\"flex items-center space-x-2\">\n <button id=\"uploadBtn\" 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\" id=\"fileName\">No file chosen<\/span>\n <\/div>\n <\/div>\n\n \n <button id=\"generateBtn\" class=\"w-full 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 <\/aside>\n\n \n <main class=\"wp-block-generator-main flex-1 flex flex-col p-6\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 class=\"text-xl font-semibold\">Image Gallery<\/h2>\n <div class=\"flex space-x-2\">\n <button id=\"prevBtn\" 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 id=\"nextBtn\" 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 id=\"imageSlider\" class=\"slider-container absolute inset-0 hidden\">\n <div class=\"flex h-full\" id=\"sliderContent\">\n \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=\"space-y-6\">\n \n <div class=\"border-b border-gray-700\">\n <div class=\"flex space-x-4\">\n <button class=\"tab-btn active text-maori-yellow border-b-2 border-maori-yellow pb-2\" data-tab=\"recent\">Recent<\/button>\n <button class=\"tab-btn pb-2 hover:text-maori-yellow\" data-tab=\"saved\">Saved<\/button>\n <button class=\"tab-btn pb-2 hover:text-maori-yellow\" data-tab=\"storage\">Storage<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"recentTab\" class=\"tab-content active\">\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 \n <div id=\"savedTab\" class=\"tab-content\">\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 All Saved\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"storageTab\" class=\"tab-content\">\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 progress-bar\" 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 <\/div>\n <\/aside>\n <\/div>\n <\/div>\n\n \n <div id=\"loadingModal\" class=\"fixed inset-0 bg-black bg-opacity-75 hidden items-center justify-center z-50\">\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 progress-bar\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-400 mt-2\" id=\"progressText\">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 progressText = document.getElementById('progressText');\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 tabBtns = document.querySelectorAll('.tab-btn');\n const tabContents = document.querySelectorAll('.tab-content');\n const enhancePromptBtn = document.getElementById('enhancePrompt');\n const enhanceNegativeBtn = document.getElementById('enhanceNegative');\n const promptInput = document.getElementById('promptInput');\n const negativePrompt = document.getElementById('negativePrompt');\n const imageSlider = document.getElementById('imageSlider');\n const sliderContent = document.getElementById('sliderContent');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n \/\/ State\n let currentStorage = 0;\n let generatedImages = [];\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n updateStorageDisplay();\n \/\/ Tab switching\n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const tabId = btn.getAttribute('data-tab');\n \/\/ Update active tab button\n tabBtns.forEach(b => {\n b.classList.remove('active', 'text-maori-yellow', 'border-b-2', 'border-maori-yellow');\n b.classList.add('hover:text-maori-yellow');\n });\n btn.classList.add('active', 'text-maori-yellow', 'border-b-2', 'border-maori-yellow');\n btn.classList.remove('hover:text-maori-yellow');\n \/\/ Show active tab content\n tabContents.forEach(content => {\n content.classList.remove('active');\n });\n document.getElementById(`${tabId}Tab`).classList.add('active');\n });\n });\n \/\/ Enhance prompt buttons\n enhancePromptBtn.addEventListener('click', () => {\n const currentText = promptInput.value;\n if (currentText.trim() === '') {\n promptInput.value = 'Enhanced: A beautiful landscape with mountains and lake';\n } else {\n promptInput.value = `Enhanced: ${currentText}`;\n }\n });\n enhanceNegativeBtn.addEventListener('click', () => {\n const currentText = negativePrompt.value;\n if (currentText.trim() === '') {\n negativePrompt.value = 'Enhanced: blurry, low quality, distorted';\n } else {\n negativePrompt.value = `Enhanced: ${currentText}`;\n }\n });\n });\n \/\/ Generate button event\n generateBtn.addEventListener('click', async () => {\n const prompt = promptInput.value.trim();\n if (!prompt) {\n alert('Please enter a prompt');\n return;\n }\n \/\/ Show loading modal\n loadingModal.classList.remove('hidden');\n loadingModal.classList.add('flex');\n \/\/ Get selected values\n const imageCount = parseInt(document.getElementById('imageCount').value);\n const style = document.getElementById('styleSelect').value;\n \/\/ Simulate image generation progress\n let progress = 0;\n const interval = setInterval(() => {\n progress += 100 \/ imageCount;\n progressBar.style.width = `${progress}%`;\n progressText.textContent = `${Math.floor(progress \/ (100 \/ imageCount))}\/${imageCount} images generated`;\n if (progress >= 100) {\n clearInterval(interval);\n setTimeout(() => {\n loadingModal.classList.add('hidden');\n loadingModal.classList.remove('flex');\n \/\/ Update storage\n currentStorage += imageCount;\n if (currentStorage > 50) currentStorage = 50;\n updateStorageDisplay();\n \/\/ Generate and show images\n generateImages(imageCount, style);\n }, 500);\n }\n }, 300);\n });\n \/\/ Generate images (simulated)\n function generateImages(count, style) {\n \/\/ Hide placeholder, show slider\n document.querySelector('.image-preview-container .absolute').style.display = 'none';\n imageSlider.style.display = 'block';\n \/\/ Clear previous images\n sliderContent.innerHTML = '';\n \/\/ Generate new images\n generatedImages = [];\n for (let i = 0; i < count; i++) {\n const imageUrl = `https:\/\/placehold.co\/512x512\/2a2a2a\/FFD700?text=Image+${i+1}+${style}`;\n generatedImages.push(imageUrl);\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=\"${imageUrl}\" alt=\"Generated Image ${i+1}\" 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 hover:bg-maori-yellow hover:text-black download-image\" data-index=\"${i}\">\n \n\n \nImage ${i+1} - ${document.getElementById('styleSelect').selectedOptions[0].text}\n\n\n \n\n \n `;\n sliderContent.appendChild(slide);\n }\n \/\/ Add download functionality\n document.querySelectorAll('.download-image').forEach(btn => {\n btn.addEventListener('click', function() {\n const index = this.getAttribute('data-index');\n alert(`Downloading image ${parseInt(index) + 1}...`);\n });\n });\n }\n \/\/ Slider navigation\n prevBtn.addEventListener('click', () => {\n imageSlider.scrollBy({\n left: -imageSlider.clientWidth,\n behavior: 'smooth'\n });\n });\n nextBtn.addEventListener('click', () => {\n imageSlider.scrollBy({\n left: imageSlider.clientWidth,\n behavior: 'smooth'\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 \/\/ File upload simulation\n document.getElementById('uploadBtn').addEventListener('click', () => {\n alert('File upload dialog would appear here');\n });\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 Storage: 0\/50 Art Style Traditional […]<\/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-648","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 Storage: 0\/50 Art Style Traditional […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/648","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=648"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/648\/revisions"}],"predecessor-version":[{"id":649,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/648\/revisions\/649"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=648"}],"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":648,"date":"2025-08-17T09:40:21","date_gmt":"2025-08-17T09:40:21","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?page_id=648"},"modified":"2025-08-17T09:40:21","modified_gmt":"2025-08-17T09:40:21","slug":"try-image-generator","status":"publish","type":"page","link":"https:\/\/taonga.nxfanz.com\/?page_id=648","title":{"rendered":"try image generator"},"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 .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-main {\n background-color: #0a0a0a;\n }\n\n .wp-block-generator-sidebar {\n background-color: #1a1a1a;\n border-right: 1px solid #374151;\n }\n\n .wp-block-generator-panel {\n background-color: #1a1a1a;\n border-left: 1px solid #374151;\n }\n\n .image-preview-container {\n aspect-ratio: 1\/1;\n background-color: #2a2a2a;\n border: 1px solid #374151;\n }\n\n .tab-content {\n display: none;\n }\n\n .tab-content.active {\n display: block;\n }\n\n .progress-bar {\n transition: width 0.3s ease;\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 .dropdown-content {\n display: none;\n position: absolute;\n background-color: #2a2a2a;\n min-width: 200px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);\n z-index: 1;\n border: 1px solid #374151;\n border-radius: 4px;\n }\n\n .dropdown-content a {\n color: white;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n }\n\n .dropdown-content a:hover {\n background-color: #374151;\n }\n\n .dropdown:hover .dropdown-content {\n display: block;\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 <\/style>\n <\/head>\n\n <body class=\"bg-maori-dark text-white\">\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>\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 <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"flex flex-1 overflow-hidden\">\n \n <aside class=\"wp-block-generator-sidebar w-80 p-4 overflow-y-auto\">\n <div class=\"space-y-6\">\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Art Style<\/label>\n <select id=\"styleSelect\" 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 value=\"traditional\">Traditional M\u0101ori Art<\/option>\n <option value=\"digital\">Digital Painting<\/option>\n <option value=\"photorealistic\">Photorealistic<\/option>\n <option value=\"watercolor\">Watercolor<\/option>\n <option value=\"anime\">Anime Style<\/option>\n <option value=\"3d\">3D Render<\/option>\n <option value=\"sketch\">Sketch Drawing<\/option>\n <option value=\"oil\">Oil Painting<\/option>\n <option value=\"pixel\">Pixel Art<\/option>\n <option value=\"minimalist\">Minimalist<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Number of Images<\/label>\n <select id=\"imageCount\" 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 value=\"1\">1 Image<\/option>\n <option value=\"4\" selected>4 Images<\/option>\n <option value=\"6\">6 Images<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Image Dimensions<\/label>\n <select id=\"dimensions\" 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 value=\"512x512\">512\u00d7512<\/option>\n <option value=\"768x768\" selected>768\u00d7768<\/option>\n <option value=\"1024x1024\">1024\u00d71024<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Prompt<\/label>\n <textarea id=\"promptInput\" 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 <button id=\"enhancePrompt\" class=\"mt-2 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 Prompt\n <\/button>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Negative Prompt<\/label>\n <textarea id=\"negativePrompt\" 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 <button id=\"enhanceNegative\" class=\"mt-2 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 Negative\n <\/button>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">Reference Image (Optional)<\/label>\n <div class=\"flex items-center space-x-2\">\n <button id=\"uploadBtn\" 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\" id=\"fileName\">No file chosen<\/span>\n <\/div>\n <\/div>\n\n \n <button id=\"generateBtn\" class=\"w-full 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 <\/aside>\n\n \n <main class=\"wp-block-generator-main flex-1 flex flex-col p-6\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 class=\"text-xl font-semibold\">Image Gallery<\/h2>\n <div class=\"flex space-x-2\">\n <button id=\"prevBtn\" 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 id=\"nextBtn\" 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 id=\"imageSlider\" class=\"slider-container absolute inset-0 hidden\">\n <div class=\"flex h-full\" id=\"sliderContent\">\n \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=\"space-y-6\">\n \n <div class=\"border-b border-gray-700\">\n <div class=\"flex space-x-4\">\n <button class=\"tab-btn active text-maori-yellow border-b-2 border-maori-yellow pb-2\" data-tab=\"recent\">Recent<\/button>\n <button class=\"tab-btn pb-2 hover:text-maori-yellow\" data-tab=\"saved\">Saved<\/button>\n <button class=\"tab-btn pb-2 hover:text-maori-yellow\" data-tab=\"storage\">Storage<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"recentTab\" class=\"tab-content active\">\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 \n <div id=\"savedTab\" class=\"tab-content\">\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 All Saved\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"storageTab\" class=\"tab-content\">\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 progress-bar\" 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 <\/div>\n <\/aside>\n <\/div>\n <\/div>\n\n \n <div id=\"loadingModal\" class=\"fixed inset-0 bg-black bg-opacity-75 hidden items-center justify-center z-50\">\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 progress-bar\" style=\"width: 0%\"><\/div>\n <\/div>\n <p class=\"text-sm text-gray-400 mt-2\" id=\"progressText\">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 progressText = document.getElementById('progressText');\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 tabBtns = document.querySelectorAll('.tab-btn');\n const tabContents = document.querySelectorAll('.tab-content');\n const enhancePromptBtn = document.getElementById('enhancePrompt');\n const enhanceNegativeBtn = document.getElementById('enhanceNegative');\n const promptInput = document.getElementById('promptInput');\n const negativePrompt = document.getElementById('negativePrompt');\n const imageSlider = document.getElementById('imageSlider');\n const sliderContent = document.getElementById('sliderContent');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');\n \/\/ State\n let currentStorage = 0;\n let generatedImages = [];\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', () => {\n updateStorageDisplay();\n \/\/ Tab switching\n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const tabId = btn.getAttribute('data-tab');\n \/\/ Update active tab button\n tabBtns.forEach(b => {\n b.classList.remove('active', 'text-maori-yellow', 'border-b-2', 'border-maori-yellow');\n b.classList.add('hover:text-maori-yellow');\n });\n btn.classList.add('active', 'text-maori-yellow', 'border-b-2', 'border-maori-yellow');\n btn.classList.remove('hover:text-maori-yellow');\n \/\/ Show active tab content\n tabContents.forEach(content => {\n content.classList.remove('active');\n });\n document.getElementById(`${tabId}Tab`).classList.add('active');\n });\n });\n \/\/ Enhance prompt buttons\n enhancePromptBtn.addEventListener('click', () => {\n const currentText = promptInput.value;\n if (currentText.trim() === '') {\n promptInput.value = 'Enhanced: A beautiful landscape with mountains and lake';\n } else {\n promptInput.value = `Enhanced: ${currentText}`;\n }\n });\n enhanceNegativeBtn.addEventListener('click', () => {\n const currentText = negativePrompt.value;\n if (currentText.trim() === '') {\n negativePrompt.value = 'Enhanced: blurry, low quality, distorted';\n } else {\n negativePrompt.value = `Enhanced: ${currentText}`;\n }\n });\n });\n \/\/ Generate button event\n generateBtn.addEventListener('click', async () => {\n const prompt = promptInput.value.trim();\n if (!prompt) {\n alert('Please enter a prompt');\n return;\n }\n \/\/ Show loading modal\n loadingModal.classList.remove('hidden');\n loadingModal.classList.add('flex');\n \/\/ Get selected values\n const imageCount = parseInt(document.getElementById('imageCount').value);\n const style = document.getElementById('styleSelect').value;\n \/\/ Simulate image generation progress\n let progress = 0;\n const interval = setInterval(() => {\n progress += 100 \/ imageCount;\n progressBar.style.width = `${progress}%`;\n progressText.textContent = `${Math.floor(progress \/ (100 \/ imageCount))}\/${imageCount} images generated`;\n if (progress >= 100) {\n clearInterval(interval);\n setTimeout(() => {\n loadingModal.classList.add('hidden');\n loadingModal.classList.remove('flex');\n \/\/ Update storage\n currentStorage += imageCount;\n if (currentStorage > 50) currentStorage = 50;\n updateStorageDisplay();\n \/\/ Generate and show images\n generateImages(imageCount, style);\n }, 500);\n }\n }, 300);\n });\n \/\/ Generate images (simulated)\n function generateImages(count, style) {\n \/\/ Hide placeholder, show slider\n document.querySelector('.image-preview-container .absolute').style.display = 'none';\n imageSlider.style.display = 'block';\n \/\/ Clear previous images\n sliderContent.innerHTML = '';\n \/\/ Generate new images\n generatedImages = [];\n for (let i = 0; i < count; i++) {\n const imageUrl = `https:\/\/placehold.co\/512x512\/2a2a2a\/FFD700?text=Image+${i+1}+${style}`;\n generatedImages.push(imageUrl);\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=\"${imageUrl}\" alt=\"Generated Image ${i+1}\" 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 hover:bg-maori-yellow hover:text-black download-image\" data-index=\"${i}\">\n \n\n \nImage ${i+1} - ${document.getElementById('styleSelect').selectedOptions[0].text}\n\n\n \n\n \n `;\n sliderContent.appendChild(slide);\n }\n \/\/ Add download functionality\n document.querySelectorAll('.download-image').forEach(btn => {\n btn.addEventListener('click', function() {\n const index = this.getAttribute('data-index');\n alert(`Downloading image ${parseInt(index) + 1}...`);\n });\n });\n }\n \/\/ Slider navigation\n prevBtn.addEventListener('click', () => {\n imageSlider.scrollBy({\n left: -imageSlider.clientWidth,\n behavior: 'smooth'\n });\n });\n nextBtn.addEventListener('click', () => {\n imageSlider.scrollBy({\n left: imageSlider.clientWidth,\n behavior: 'smooth'\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 \/\/ File upload simulation\n document.getElementById('uploadBtn').addEventListener('click', () => {\n alert('File upload dialog would appear here');\n });\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 Storage: 0\/50 Art Style Traditional […]<\/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-648","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 Storage: 0\/50 Art Style Traditional […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/648","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=648"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/648\/revisions"}],"predecessor-version":[{"id":649,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/648\/revisions\/649"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}