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 .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 .model-option {\n padding: 12px 16px;\n border-bottom: 1px solid #374151;\n cursor: pointer;\n }\n\n .model-option:hover {\n background-color: #2a2a2a;\n }\n\n .model-option.selected {\n background-color: #374151;\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 <button id=\"settingsBtn\" 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 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\">API Provider<\/label>\n <select id=\"apiProvider\" 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=\"openai\">OpenAI DALL-E<\/option>\n <option value=\"stability\">Stability AI<\/option>\n <option value=\"midjourney\">Midjourney (via proxy)<\/option>\n <option value=\"custom\">Custom API<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">AI Model<\/label>\n <div class=\"relative\">\n <div id=\"modelSelect\" class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow cursor-pointer\">\n <span id=\"selectedModel\">dall-e-3<\/span>\n <i class=\"fas fa-chevron-down float-right mt-1\"><\/i>\n <\/div>\n <div id=\"modelDropdown\" class=\"absolute z-10 w-full bg-maori-grey border border-gray-600 rounded mt-1 hidden\">\n <div class=\"model-option selected\" data-model=\"dall-e-3\">dall-e-3<\/div>\n <div class=\"model-option\" data-model=\"dall-e-2\">dall-e-2<\/div>\n <div class=\"model-option\" data-model=\"stablediffusion\">stable-diffusion-xl<\/div>\n <div class=\"model-option\" data-model=\"midjourney\">midjourney-v6<\/div>\n <\/div>\n <\/div>\n <\/div>\n\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=\"settingsModal\" 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-6 max-w-2xl w-full mx-4\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-maori-yellow\">API Settings<\/h3>\n <button id=\"closeSettings\" class=\"text-gray-400 hover:text-white\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n\n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium mb-2\">API Key<\/label>\n <input type=\"password\" id=\"apiKeyInput\" class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\" placeholder=\"Enter your API key...\" value=\"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\">\n <p class=\"text-xs text-gray-400 mt-1\">Enter your API key for the selected provider<\/p>\n <\/div>\n\n <div>\n <label class=\"block text-sm font-medium mb-2\">Custom API Endpoint (Optional)<\/label>\n <input type=\"text\" id=\"apiEndpoint\" class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\" placeholder=\"https:\/\/api.example.com\/v1\/images\/generations\">\n <p class=\"text-xs text-gray-400 mt-1\">Leave blank to use default endpoint<\/p>\n <\/div>\n\n <div class=\"flex justify-end space-x-3 pt-4\">\n <button id=\"cancelSettings\" class=\"px-4 py-2 bg-maori-light-grey rounded hover:bg-gray-600 transition-colors\">\n Cancel\n <\/button>\n <button id=\"saveSettings\" class=\"px-4 py-2 bg-maori-yellow text-black rounded hover:bg-yellow-400 transition-colors\">\n Save Settings\n <\/button>\n <\/div>\n <\/div>\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 let API_KEY = \"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\";\n let API_ENDPOINT = \"\";\n let SELECTED_MODEL = \"dall-e-3\";\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 const settingsBtn = document.getElementById('settingsBtn');\n const settingsModal = document.getElementById('settingsModal');\n const closeSettings = document.getElementById('closeSettings');\n const cancelSettings = document.getElementById('cancelSettings');\n const saveSettings = document.getElementById('saveSettings');\n const apiKeyInput = document.getElementById('apiKeyInput');\n const apiEndpoint = document.getElementById('apiEndpoint');\n const modelSelect = document.getElementById('modelSelect');\n const modelDropdown = document.getElementById('modelDropdown');\n const modelOptions = document.querySelectorAll('.model-option');\n const apiProvider = document.getElementById('apiProvider');\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 \/\/ Settings modal\n settingsBtn.addEventListener('click', () => {\n apiKeyInput.value = API_KEY;\n apiEndpoint.value = API_ENDPOINT;\n settingsModal.classList.remove('hidden');\n settingsModal.classList.add('flex');\n });\n closeSettings.addEventListener('click', () => {\n settingsModal.classList.add('hidden');\n settingsModal.classList.remove('flex');\n });\n cancelSettings.addEventListener('click', () => {\n settingsModal.classList.add('hidden');\n settingsModal.classList.remove('flex');\n });\n saveSettings.addEventListener('click', () => {\n API_KEY = apiKeyInput.value;\n API_ENDPOINT = apiEndpoint.value;\n settingsModal.classList.add('hidden');\n settingsModal.classList.remove('flex');\n alert('Settings saved successfully!');\n });\n \/\/ Model selection dropdown\n modelSelect.addEventListener('click', () => {\n modelDropdown.classList.toggle('hidden');\n });\n modelOptions.forEach(option => {\n option.addEventListener('click', () => {\n modelOptions.forEach(opt => opt.classList.remove('selected'));\n option.classList.add('selected');\n document.getElementById('selectedModel').textContent = option.getAttribute('data-model');\n SELECTED_MODEL = option.getAttribute('data-model');\n modelDropdown.classList.add('hidden');\n });\n });\n \/\/ Close dropdown when clicking outside\n document.addEventListener('click', (e) => {\n if (!modelSelect.contains(e.target) && !modelDropdown.contains(e.target)) {\n modelDropdown.classList.add('hidden');\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 if (!API_KEY) {\n alert('Please enter your API key in settings');\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 \/\/ API Provider change\n apiProvider.addEventListener('change', () => {\n const provider = apiProvider.value;\n let models = [];\n switch (provider) {\n case 'openai':\n models = ['dall-e-3', 'dall-e-2'];\n break;\n case 'stability':\n models = ['stable-diffusion-xl', 'stable-diffusion-v3'];\n break;\n case 'midjourney':\n models = ['midjourney-v6', 'midjourney-v5'];\n break;\n case 'custom':\n models = ['custom-model-1', 'custom-model-2'];\n break;\n }\n \/\/ Update model options\n const modelContainer = document.getElementById('modelDropdown');\n modelContainer.innerHTML = '';\n models.forEach((model, index) => {\n const option = document.createElement('div');\n option.className = 'model-option';\n if (index === 0) option.classList.add('selected');\n option.setAttribute('data-model', model);\n option.textContent = model;\n modelContainer.appendChild(option);\n });\n \/\/ Update selected model\n document.getElementById('selectedModel').textContent = models[0];\n SELECTED_MODEL = models[0];\n });\n <\/script>\n <\/body>\n\n <\/html>\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 API Provider OpenAI […]<\/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":"","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-650","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 API Provider OpenAI […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/650","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=650"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/650\/revisions"}],"predecessor-version":[{"id":651,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/650\/revisions\/651"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=650"}],"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":650,"date":"2025-08-17T09:57:18","date_gmt":"2025-08-17T09:57:18","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?page_id=650"},"modified":"2025-08-17T09:57:18","modified_gmt":"2025-08-17T09:57:18","slug":"go-image-generator","status":"publish","type":"page","link":"https:\/\/taonga.nxfanz.com\/?page_id=650","title":{"rendered":"go 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 .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 .model-option {\n padding: 12px 16px;\n border-bottom: 1px solid #374151;\n cursor: pointer;\n }\n\n .model-option:hover {\n background-color: #2a2a2a;\n }\n\n .model-option.selected {\n background-color: #374151;\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 <button id=\"settingsBtn\" 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 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\">API Provider<\/label>\n <select id=\"apiProvider\" 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=\"openai\">OpenAI DALL-E<\/option>\n <option value=\"stability\">Stability AI<\/option>\n <option value=\"midjourney\">Midjourney (via proxy)<\/option>\n <option value=\"custom\">Custom API<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <label class=\"block text-sm font-medium mb-2\">AI Model<\/label>\n <div class=\"relative\">\n <div id=\"modelSelect\" class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow cursor-pointer\">\n <span id=\"selectedModel\">dall-e-3<\/span>\n <i class=\"fas fa-chevron-down float-right mt-1\"><\/i>\n <\/div>\n <div id=\"modelDropdown\" class=\"absolute z-10 w-full bg-maori-grey border border-gray-600 rounded mt-1 hidden\">\n <div class=\"model-option selected\" data-model=\"dall-e-3\">dall-e-3<\/div>\n <div class=\"model-option\" data-model=\"dall-e-2\">dall-e-2<\/div>\n <div class=\"model-option\" data-model=\"stablediffusion\">stable-diffusion-xl<\/div>\n <div class=\"model-option\" data-model=\"midjourney\">midjourney-v6<\/div>\n <\/div>\n <\/div>\n <\/div>\n\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=\"settingsModal\" 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-6 max-w-2xl w-full mx-4\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-maori-yellow\">API Settings<\/h3>\n <button id=\"closeSettings\" class=\"text-gray-400 hover:text-white\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n\n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium mb-2\">API Key<\/label>\n <input type=\"password\" id=\"apiKeyInput\" class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\" placeholder=\"Enter your API key...\" value=\"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\">\n <p class=\"text-xs text-gray-400 mt-1\">Enter your API key for the selected provider<\/p>\n <\/div>\n\n <div>\n <label class=\"block text-sm font-medium mb-2\">Custom API Endpoint (Optional)<\/label>\n <input type=\"text\" id=\"apiEndpoint\" class=\"w-full bg-maori-light-grey border border-gray-600 rounded px-3 py-2 focus:outline-none focus:border-maori-yellow\" placeholder=\"https:\/\/api.example.com\/v1\/images\/generations\">\n <p class=\"text-xs text-gray-400 mt-1\">Leave blank to use default endpoint<\/p>\n <\/div>\n\n <div class=\"flex justify-end space-x-3 pt-4\">\n <button id=\"cancelSettings\" class=\"px-4 py-2 bg-maori-light-grey rounded hover:bg-gray-600 transition-colors\">\n Cancel\n <\/button>\n <button id=\"saveSettings\" class=\"px-4 py-2 bg-maori-yellow text-black rounded hover:bg-yellow-400 transition-colors\">\n Save Settings\n <\/button>\n <\/div>\n <\/div>\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 let API_KEY = \"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\";\n let API_ENDPOINT = \"\";\n let SELECTED_MODEL = \"dall-e-3\";\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 const settingsBtn = document.getElementById('settingsBtn');\n const settingsModal = document.getElementById('settingsModal');\n const closeSettings = document.getElementById('closeSettings');\n const cancelSettings = document.getElementById('cancelSettings');\n const saveSettings = document.getElementById('saveSettings');\n const apiKeyInput = document.getElementById('apiKeyInput');\n const apiEndpoint = document.getElementById('apiEndpoint');\n const modelSelect = document.getElementById('modelSelect');\n const modelDropdown = document.getElementById('modelDropdown');\n const modelOptions = document.querySelectorAll('.model-option');\n const apiProvider = document.getElementById('apiProvider');\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 \/\/ Settings modal\n settingsBtn.addEventListener('click', () => {\n apiKeyInput.value = API_KEY;\n apiEndpoint.value = API_ENDPOINT;\n settingsModal.classList.remove('hidden');\n settingsModal.classList.add('flex');\n });\n closeSettings.addEventListener('click', () => {\n settingsModal.classList.add('hidden');\n settingsModal.classList.remove('flex');\n });\n cancelSettings.addEventListener('click', () => {\n settingsModal.classList.add('hidden');\n settingsModal.classList.remove('flex');\n });\n saveSettings.addEventListener('click', () => {\n API_KEY = apiKeyInput.value;\n API_ENDPOINT = apiEndpoint.value;\n settingsModal.classList.add('hidden');\n settingsModal.classList.remove('flex');\n alert('Settings saved successfully!');\n });\n \/\/ Model selection dropdown\n modelSelect.addEventListener('click', () => {\n modelDropdown.classList.toggle('hidden');\n });\n modelOptions.forEach(option => {\n option.addEventListener('click', () => {\n modelOptions.forEach(opt => opt.classList.remove('selected'));\n option.classList.add('selected');\n document.getElementById('selectedModel').textContent = option.getAttribute('data-model');\n SELECTED_MODEL = option.getAttribute('data-model');\n modelDropdown.classList.add('hidden');\n });\n });\n \/\/ Close dropdown when clicking outside\n document.addEventListener('click', (e) => {\n if (!modelSelect.contains(e.target) && !modelDropdown.contains(e.target)) {\n modelDropdown.classList.add('hidden');\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 if (!API_KEY) {\n alert('Please enter your API key in settings');\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 \/\/ API Provider change\n apiProvider.addEventListener('change', () => {\n const provider = apiProvider.value;\n let models = [];\n switch (provider) {\n case 'openai':\n models = ['dall-e-3', 'dall-e-2'];\n break;\n case 'stability':\n models = ['stable-diffusion-xl', 'stable-diffusion-v3'];\n break;\n case 'midjourney':\n models = ['midjourney-v6', 'midjourney-v5'];\n break;\n case 'custom':\n models = ['custom-model-1', 'custom-model-2'];\n break;\n }\n \/\/ Update model options\n const modelContainer = document.getElementById('modelDropdown');\n modelContainer.innerHTML = '';\n models.forEach((model, index) => {\n const option = document.createElement('div');\n option.className = 'model-option';\n if (index === 0) option.classList.add('selected');\n option.setAttribute('data-model', model);\n option.textContent = model;\n modelContainer.appendChild(option);\n });\n \/\/ Update selected model\n document.getElementById('selectedModel').textContent = models[0];\n SELECTED_MODEL = models[0];\n });\n <\/script>\n <\/body>\n\n <\/html>\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 API Provider OpenAI […]<\/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":"","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-650","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 API Provider OpenAI […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/650","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=650"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/650\/revisions"}],"predecessor-version":[{"id":651,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/650\/revisions\/651"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}