{"id":2,"date":"2026-05-15T09:32:31","date_gmt":"2026-05-15T09:32:31","guid":{"rendered":"https:\/\/2.dealscoutnest.com\/?page_id=2"},"modified":"2026-05-15T11:18:00","modified_gmt":"2026-05-15T11:18:00","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/2.dealscoutnest.com\/","title":{"rendered":"Sample Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4782c6 e-flex e-con-boxed e-con e-parent\" data-id=\"a4782c6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a07eee2 elementor-widget elementor-widget-html\" data-id=\"a07eee2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"raph-ui-container\">\r\n    <div class=\"raph-solid-card main-panel\">\r\n        <div class=\"raph-input-group\">\r\n            <div class=\"raph-upload-box\" id=\"upload-trigger\">\r\n                <input type=\"file\" id=\"image-upload\" accept=\"image\/*\" hidden>\r\n                <div id=\"preview-box\" class=\"hidden\">\r\n                    <img decoding=\"async\" id=\"input-preview\" src=\"\">\r\n                    <span id=\"remove-img\">\u2715<\/span>\r\n                <\/div>\r\n                <div id=\"plus-icon\">+<\/div>\r\n            <\/div>\r\n            <textarea id=\"banana-prompt\" placeholder=\"Describe the image you want to generate...\"><\/textarea>\r\n        <\/div>\r\n\r\n        <div class=\"raph-options-bar\">\r\n            <div class=\"raph-dropdown\" id=\"ratio-dropdown\">\r\n                <div class=\"trigger\"><span id=\"selected-ratio-text\">1:1<\/span> <i class=\"arrow-down\"><\/i><\/div>\r\n                <div class=\"menu hidden\">\r\n                    <div class=\"item active\" data-value=\"1:1\">1:1 Square<\/div>\r\n                    <div class=\"item\" data-value=\"16:9\">16:9 Landscape<\/div>\r\n                    <div class=\"item\" data-value=\"9:16\">9:16 Portrait<\/div>\r\n                    <div class=\"item\" data-value=\"3:2\">3:2 Classic<\/div>\r\n                    <div class=\"item\" data-value=\"4:3\">4:3 Standard<\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"raph-dropdown\" id=\"style-dropdown\">\r\n                <div class=\"trigger\"><span id=\"selected-style-text\">No Style<\/span> <i class=\"arrow-down\"><\/i><\/div>\r\n                <div class=\"menu style-grid hidden\">\r\n                    <div class=\"item active\" data-value=\"none\" data-prompt=\"\">None<\/div>\r\n                    <div class=\"item\" data-value=\"anime\" data-prompt=\", anime style, vibrant colors, detailed line work, Japanese aesthetic\">Anime<\/div>\r\n                    <div class=\"item\" data-value=\"digital_art\" data-prompt=\", digital painting, highly detailed, sharp focus, trend on ArtStation\">Digital Art<\/div>\r\n                    <div class=\"item\" data-value=\"fantasy_art\" data-prompt=\", fantasy art, mythical atmosphere, epic composition, magical lighting\">Fantasy Art<\/div>\r\n                    <div class=\"item\" data-value=\"neon_punk\" data-prompt=\", neon punk style, cyber aesthetic, glowing neon lights, dark atmosphere, high contrast\">Neon Punk<\/div>\r\n                    <div class=\"item\" data-value=\"line_art\" data-prompt=\", line art style, black and white, minimal shading, clean lines, sketch aesthetic\">Line Art<\/div>\r\n                    <div class=\"item\" data-value=\"cinematic\" data-prompt=\", cinematic, film still, dramatic lighting, shallow depth of field, anamorphic, 35mm film\">Cinematic<\/div>\r\n                    <div class=\"item\" data-value=\"pixel_art\" data-prompt=\", pixel art, 8-bit aesthetic, retro gaming style, low resolution, detailed pixels\">Pixel Art<\/div>\r\n                    <div class=\"item\" data-value=\"enhance\" data-prompt=\", ultra-high resolution, sharp details, photorealistic, Unreal Engine 5 render, 8k\">Enhance<\/div>\r\n                    <div class=\"item\" data-value=\"photographic\" data-prompt=\", photorealistic, professional photography, National Geographic style, studio lighting, sharp\">Photographic<\/div>\r\n                    <div class=\"item\" data-value=\"comic_book\" data-prompt=\", comic book style, bold lines, cel shading, dynamic composition, ink illustration\">Comic Book<\/div>\r\n                    <div class=\"item\" data-value=\"origami\" data-prompt=\", origami art, folded paper style, paper texture, delicate, clean lines\">Origami<\/div>\r\n                    <div class=\"item\" data-value=\"craft_clay\" data-prompt=\", craft clay style, claymation aesthetic, soft shapes, sculpted texture, playful lighting\">Craft Clay<\/div>\r\n                    <div class=\"item\" data-value=\"3d_model\" data-prompt=\", 3D model render, ZBrush style, clean topology, studio lighting, detailed mesh\">3D Model<\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"raph-dropdown\" id=\"color-dropdown\">\r\n                <div class=\"trigger\"><span id=\"selected-color-text\">No Color<\/span> <i class=\"arrow-down\"><\/i><\/div>\r\n                <div class=\"menu hidden\">\r\n                    <div class=\"item active\" data-value=\"none\" data-prompt=\"\">None<\/div>\r\n                    <div class=\"item\" data-value=\"warm\" data-prompt=\", warm tone lighting, sepia hints, cozy atmosphere, golden hour feel\">Warm Tone<\/div>\r\n                    <div class=\"item\" data-value=\"cool\" data-prompt=\", cool tone lighting, blue and green hues, cold atmosphere, twilight feel\">Cool Tone<\/div>\r\n                    <div class=\"item\" data-value=\"muted\" data-prompt=\", muted colors, desaturated, subtle palette, calm low-contrast\">Muted Colors<\/div>\r\n                    <div class=\"item\" data-value=\"vibrant\" data-prompt=\", vibrant colors, highly saturated, rich hues, popping color palette\">Vibrant Colors<\/div>\r\n                    <div class=\"item\" data-value=\"pastel\" data-prompt=\", pastel colors, soft hues, light and airy palette, gentle tones\">Pastel Colors<\/div>\r\n                    <div class=\"item\" data-value=\"bw\" data-prompt=\", black and white photography style, monochrome, grayscale, high contrast B&W\">Black And White<\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"raph-dropdown\" id=\"lighting-dropdown\">\r\n                <div class=\"trigger\"><span id=\"selected-lighting-text\">Dramatic<\/span> <i class=\"arrow-down\"><\/i><\/div>\r\n                <div class=\"menu hidden\">\r\n                    <div class=\"item\" data-value=\"none\" data-prompt=\"\">None<\/div>\r\n                    <div class=\"item active\" data-value=\"dramatic\" data-prompt=\", dramatic lighting, high contrast, deep shadows, theatrical illumination\">Dramatic<\/div>\r\n                    <div class=\"item\" data-value=\"dimly_lit\" data-prompt=\", dimly lit, low ambient light, moody atmosphere, subtle visibility\">Dimly Lit<\/div>\r\n                    <div class=\"item\" data-value=\"studio\" data-prompt=\", studio lighting, professional setup, clean illumination, soft shadows\">Studio<\/div>\r\n                    <div class=\"item\" data-value=\"low_light\" data-prompt=\", low light environment, dark scene, high ISO feel, grainy texture\">Low Light<\/div>\r\n                    <div class=\"item\" data-value=\"golden_hour\" data-prompt=\", golden hour lighting, warm sunlight, soft glow, late afternoon feel\">Golden Hour<\/div>\r\n                    <div class=\"item\" data-value=\"backlight\" data-prompt=\", backlit composition, rim lighting effect, silhouette effect, glowing edges\">Backlight<\/div>\r\n                    <div class=\"item\" data-value=\"volumetric\" data-prompt=\", volumetric lighting, light shafts, crepuscular rays, visible dust particles\">Volumetric<\/div>\r\n                    <div class=\"item\" data-value=\"sunlight\" data-prompt=\", direct sunlight, harsh natural light, strong highlights, bright day feel\">Sunlight<\/div>\r\n                    <div class=\"item\" data-value=\"rim_lighting\" data-prompt=\", rim lighting effect, glowing edge light, high contrast composition, separation lighting\">Rim Lighting<\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"raph-dropdown\" id=\"composition-dropdown\">\r\n                <div class=\"trigger\"><span id=\"selected-composition-text\">No Composition<\/span> <i class=\"arrow-down\"><\/i><\/div>\r\n                <div class=\"menu hidden\">\r\n                    <div class=\"item active\" data-value=\"none\" data-prompt=\"\">None<\/div>\r\n                    <div class=\"item\" data-value=\"blurry_background\" data-prompt=\", shallow depth of field, blurry background, bokeh effect, sharp subject\">Blurry Background<\/div>\r\n                    <div class=\"item\" data-value=\"close_up\" data-prompt=\", close-up shot, detailed view, tightly cropped, intimate framing\">Close Up<\/div>\r\n                    <div class=\"item\" data-value=\"wide_angle\" data-prompt=\", wide angle lens, expansive perspective, broad view, panoramic feel\">Wide Angle<\/div>\r\n                    <div class=\"item\" data-value=\"narrow_dof\" data-prompt=\", narrow depth of field, focused subject, significant blur, cinematic focus\">Narrow Depth Of Field<\/div>\r\n                    <div class=\"item\" data-value=\"shot_from_below\" data-prompt=\", low angle shot, worm's-eye view, shot from below, imposing perspective\">Shot From Below<\/div>\r\n                    <div class=\"item\" data-value=\"shot_from_above\" data-prompt=\", high angle shot, bird's-eye view, shot from above, aerial perspective\">Shot From Above<\/div>\r\n                    <div class=\"item\" data-value=\"macrophotography\" data-prompt=\", macrophotography style, extreme close-up, tiny details magnified, shallow focus\">Macrophotography<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"raph-action-bar\">\r\n        <div class=\"left-controls\">\r\n            <div class=\"raph-dropdown\" id=\"model-dropdown\">\r\n                <div class=\"trigger\">\r\n                    <div class=\"user-pill\">\r\n                        <div class=\"avatar\"><\/div>\r\n                        <span id=\"selected-model-text\">Nano-Banana<\/span>\r\n                        <i class=\"arrow-down\" style=\"font-size: 8px; margin-left: 5px;\">\u25bc<\/i>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"menu hidden\">\r\n                    <div class=\"item active\" data-value=\"nano-banana\">Nano-Banana<\/div>\r\n                    <div class=\"item\" data-value=\"nano-banana-pro\">Nano-Banana Pro<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"toggle-group\">\r\n                <label class=\"switch\">\r\n                    <input type=\"checkbox\" id=\"fast-mode\">\r\n                    <span class=\"slider\"><\/span>\r\n                <\/label>\r\n                <span class=\"label-text\">Fast Mode<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"right-buttons\">\r\n            <button class=\"btn-plain\" id=\"clear-btn\">Clear<\/button>\r\n            <button class=\"btn-generate\" id=\"generate-btn\">Generate Image<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"result-display\" class=\"raph-solid-card result-panel hidden\">\r\n        <div id=\"loader-text\" class=\"status-msg\">Drawing your imagination...<\/div>\r\n        <div class=\"output-wrapper\">\r\n            <img decoding=\"async\" id=\"output-image\" src=\"\" class=\"hidden\">\r\n            <div class=\"download-container\">\r\n                <a id=\"download-link\" class=\"download-tag hidden\" download=\"nano-banana-gen.png\">\r\n                    Download Result \u2193\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n:root {\r\n    --raph-bg: #1a140f;\r\n    --raph-card: #2d241e;\r\n    --raph-border: #4a3d35;\r\n    --raph-accent: #a67c66;\r\n    --raph-text: #ffffff;\r\n    --raph-dim: #b3a49b;\r\n    --raph-dropdown-bg: rgba(45, 36, 30, 0.98); \/* \u7565\u5fae\u52a0\u6df1 *\/\r\n    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.raph-ui-container {\r\n    max-width: 900px;\r\n    margin: 20px auto;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n    color: var(--raph-text);\r\n}\r\n\r\n\/* \u5f3a\u5316\u5361\u7247\u666f\u6df1 *\/\r\n.raph-solid-card {\r\n    background: var(--raph-card);\r\n    border: 1px solid var(--raph-border);\r\n    border-radius: 18px;\r\n    padding: 24px;\r\n    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3); \/* \u589e\u52a0\u6295\u5f71\u5c42\u7ea7 *\/\r\n}\r\n\r\n.raph-input-group { \r\n    display: flex; \r\n    gap: 20px; \r\n    margin-bottom: 20px;\r\n    background: rgba(0,0,0,0.15);\r\n    padding: 12px;\r\n    border-radius: 14px;\r\n}\r\n\r\n.raph-upload-box {\r\n    width: 80px; height: 100px;\r\n    background: var(--raph-dropdown-bg); border: 2px dashed var(--raph-border);\r\n    border-radius: 12px; display: flex; align-items: center; justify-content: center;\r\n    cursor: pointer; position: relative; flex-shrink: 0;\r\n}\r\n\r\n#preview-box, #input-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }\r\n\r\n#remove-img {\r\n    position: absolute; top: -8px; right: -8px; \r\n    background: #3d3128 !important;\r\n    border: 1px solid var(--raph-border);\r\n    width: 20px; height: 20px; border-radius: 50%; font-size: 10px;\r\n    display: flex; align-items: center; justify-content: center; z-index: 10;\r\n    color: #fff;\r\n}\r\n\r\n#banana-prompt {\r\n    flex: 1; background: transparent; border: none; outline: none;\r\n    font-size: 16px; color: #fff; resize: none; height: 100px;\r\n    line-height: 1.5;\r\n}\r\n\r\n.raph-options-bar { display: flex; gap: 15px; font-size: 13px; color: var(--raph-dim); align-items: center; }\r\n\r\n\/* \u4e0b\u62c9\u83dc\u5355\u589e\u52a0\u666f\u6df1 *\/\r\n.raph-dropdown { position: relative; cursor: pointer; color: #fff; }\r\n.raph-dropdown .trigger { \r\n    display: flex; align-items: center; gap: 6px; white-space: nowrap; \r\n    padding: 4px 8px; border-radius: 6px;\r\n}\r\n\/* \u79fb\u9664 Hover \u53d8\u8272\uff0c\u4ec5\u7a0d\u5fae\u6539\u53d8\u900f\u660e\u5ea6 *\/\r\n.raph-dropdown .trigger:hover { color: #fff; opacity: 0.8; }\r\n\r\n.raph-dropdown .menu {\r\n    position: absolute; top: 100%; left: 0; margin-top: 10px;\r\n    background: var(--raph-dropdown-bg); border: 1px solid var(--raph-border);\r\n    border-radius: 12px; padding: 6px; z-index: 100;\r\n    box-shadow: 0 15px 40px rgba(0,0,0,0.8); \/* \u5f3a\u5316\u4e0b\u62c9\u83dc\u5355\u666f\u6df1 *\/\r\n    backdrop-filter: blur(12px); \/* \u5f3a\u5316\u78e8\u7802\u6548\u679c *\/\r\n}\r\n\r\n#model-dropdown .menu { top: auto; bottom: 100%; margin-bottom: 10px; }\r\n\r\n.raph-dropdown .item { \r\n    padding: 10px 12px; border-radius: 8px; white-space: nowrap; \r\n    display: flex; align-items: center; gap: 10px; \r\n}\r\n\/* \u9501\u5b9a\u989c\u8272\uff1a\u70b9\u51fb\u548c\u60ac\u505c\u4fdd\u6301\u539f\u8272\u6216\u4ec5\u900f\u660e\u5ea6\u53d8\u5316 *\/\r\n.raph-dropdown .item:hover { background: rgba(255,255,255,0.05); }\r\n.raph-dropdown .item.active { background: rgba(166, 124, 102, 0.2); color: var(--raph-accent); }\r\n\r\n.raph-dropdown .menu.style-grid {\r\n    width: 340px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;\r\n}\r\n\/* \u6536\u7d27\u4e0b\u62c9\u83dc\u5355\u9009\u9879\u7684\u95f4\u8ddd *\/\r\n.raph-dropdown .menu {\r\n    padding: 4px !important; \/* \u51cf\u5c11\u83dc\u5355\u5185\u56db\u5468\u7684\u7559\u767d *\/\r\n}\r\n\r\n.raph-dropdown .item {\r\n    padding: 6px 12px !important; \/* \u5173\u952e\uff1a\u5c06\u539f\u6765\u7684 10px \u7f29\u51cf\u4e3a 6px\uff0c\u9ad8\u5ea6\u7acb\u523b\u53d8\u7d27\u51d1 *\/\r\n    margin: 2px 0 !important;    \/* \u9009\u9879\u4e4b\u95f4\u53ea\u7559\u6781\u5c0f\u7684\u7f1d\u9699 *\/\r\n    font-size: 13px !important;   \/* \u7a0d\u5fae\u8c03\u5c0f\u4e00\u70b9\u5b57\u4f53\uff0c\u89c6\u89c9\u4e0a\u66f4\u7cbe\u81f4 *\/\r\n}\r\n\r\n\/* \u9488\u5bf9\u6837\u5f0f\u7f51\u683c\uff08style-grid\uff09\u505a\u540c\u6837\u7684\u4f18\u5316 *\/\r\n.raph-dropdown .menu.style-grid {\r\n    gap: 2px !important; \/* \u51cf\u5c11\u7f51\u683c\u6a21\u5f0f\u4e0b\u7684\u95f4\u8ddd *\/\r\n}\r\n\r\n\/* \u786e\u4fdd Nano-Banana \u836f\u4e38\u6837\u5f0f\u7684\u95f4\u8ddd\u4e5f\u540c\u6b65\u51cf\u5c0f *\/\r\n.user-pill {\r\n    padding: 4px 10px !important;\r\n}\r\n.style-grid .item { white-space: normal; font-size: 12px; }\r\n\r\n.raph-action-bar { display: flex; justify-content: space-between; margin-top: 20px; align-items: center; }\r\n.left-controls { display: flex; align-items: center; gap: 20px; }\r\n\r\n.user-pill { \r\n    background: var(--raph-dropdown-bg); padding: 6px 12px; border-radius: 20px; \r\n    display: flex; align-items: center; gap: 8px; font-size: 13px; \r\n    border: 1px solid var(--raph-border);\r\n}\r\n.user-pill:hover { opacity: 0.9; } \/* \u4ec5\u900f\u660e\u5ea6\u53d8\u5316 *\/\r\n.avatar { width: 16px; height: 16px; background: var(--raph-accent); border-radius: 50%; }\r\n\r\n.btn-generate {\r\n    background: var(--raph-accent); color: #fff; border: none;\r\n    padding: 10px 24px; border-radius: 12px; font-weight: 600; cursor: pointer; \r\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); \/* \u589e\u52a0\u666f\u6df1 *\/\r\n    transition: transform 0.2s;\r\n}\r\n.btn-generate:hover, \r\n.btn-generate:active {\r\n    background-color: var(--raph-accent) !important; \/* \u9501\u5b9a\u4f60\u7684\u54c1\u724c\u8272 *\/\r\n    color: #ffffff !important;                       \/* \u9501\u5b9a\u6587\u5b57\u767d\u8272 *\/\r\n    filter: none !important;                         \/* \u5173\u952e\uff1a\u7981\u7528\u6240\u6709\u53d8\u8272\u6ee4\u955c *\/\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; \/* \u9501\u5b9a\u6295\u5f71 *\/\r\n    outline: none !important;\r\n}\r\n\r\n\/* \u5982\u679c\u4f60\u5e0c\u671b\u70b9\u51fb\u65f6\u6709\u4e00\u70b9\u70b9\u201c\u6309\u4e0b\u201d\u7684\u53cd\u9988\uff0c\u4f46\u4e0d\u6539\u53d8\u989c\u8272\uff0c\u53ef\u4ee5\u52a0\u8fd9\u884c\u7f29\u653e\u903b\u8f91 *\/\r\n.btn-generate:active {\r\n    transform: scale(0.98); \/* \u4ec5\u8f7b\u5fae\u7f29\u5c0f\uff0c\u989c\u8272\u4f9d\u7136\u4fdd\u6301\u4e0d\u53d8 *\/\r\n}\r\n\r\n#clear-btn.btn-plain { \r\n    background: transparent !important; border: none !important; \r\n    color: var(--raph-dim) !important; cursor: pointer; font-size: 14px; \r\n    margin-right: 15px;\r\n}\r\n#clear-btn.btn-plain:hover { color: #fff !important; }\r\n\r\n.switch { position: relative; width: 34px; height: 18px; display: inline-block; vertical-align: middle; }\r\n.switch input { opacity: 0; width: 0; height: 0; }\r\n.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #4a3d35; border-radius: 18px; transition: .3s; }\r\n.slider:before { position: absolute; content: \"\"; height: 14px; width: 14px; left: 2px; bottom: 2px; background: white; border-radius: 50%; transition: .3s; }\r\ninput:checked + .slider { background: var(--raph-accent); }\r\ninput:checked + .slider:before { transform: translateX(16px); }\r\n\r\n.result-panel { margin-top: 25px; text-align: center; background: rgba(0,0,0,0.3); }\r\n.status-msg { color: var(--raph-accent); margin-bottom: 15px; font-size: 14px; font-weight: 500; }\r\n#output-image { max-width: 100%; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.7); }\r\n.download-tag {\r\n    display: inline-block; margin-top: 15px; padding: 12px 24px; background: var(--raph-accent);\r\n    color: #fff; text-decoration: none; border-radius: 25px; font-weight: bold;\r\n}\r\n\r\n.hidden { display: none !important; }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const AJAX_URL = '\/wp-admin\/admin-ajax.php';\r\n    \r\n    const fileInput = document.getElementById('image-upload');\r\n    const uploadTrigger = document.getElementById('upload-trigger');\r\n    const previewBox = document.getElementById('preview-box');\r\n    const inputPreview = document.getElementById('input-preview');\r\n    const removeImg = document.getElementById('remove-img');\r\n    const plusIcon = document.getElementById('plus-icon');\r\n    \r\n    let uploadedFilePath = '';\r\n    let currentRatio = '1:1';\r\n    let currentStylePrompt = '';\r\n    let currentColorPrompt = '';\r\n    let currentLightingPrompt = ', dramatic lighting, high contrast, deep shadows, theatrical illumination';\r\n    let currentCompositionPrompt = ''; \r\n    let selectedModel = 'nano-banana';\r\n\r\n    uploadTrigger.onclick = (e) => { if(e.target !== removeImg) fileInput.click(); };\r\n\r\n    fileInput.onchange = async function() {\r\n        const file = this.files[0];\r\n        if(!file) return;\r\n        inputPreview.src = URL.createObjectURL(file);\r\n        previewBox.classList.remove('hidden');\r\n        plusIcon.classList.add('hidden');\r\n\r\n        const fd = new FormData();\r\n        fd.append('action', 'banana_upload_to_library');\r\n        fd.append('file', file);\r\n        try {\r\n            const res = await fetch(AJAX_URL, {method:'POST', body:fd}).then(r=>r.json());\r\n            if(res.success) uploadedFilePath = res.data.path;\r\n        } catch(e) { console.error(\"Upload error\", e); }\r\n    };\r\n\r\n    removeImg.onclick = (e) => {\r\n        e.stopPropagation();\r\n        fileInput.value = '';\r\n        previewBox.classList.add('hidden');\r\n        plusIcon.classList.remove('hidden');\r\n        uploadedFilePath = '';\r\n    };\r\n\r\n    document.querySelectorAll('.raph-dropdown .trigger').forEach(trigger => {\r\n        trigger.onclick = function(e) {\r\n            e.stopPropagation();\r\n            const targetMenu = this.nextElementSibling;\r\n            document.querySelectorAll('.raph-dropdown .menu').forEach(menu => {\r\n                if(menu !== targetMenu) menu.classList.add('hidden');\r\n            });\r\n            targetMenu.classList.toggle('hidden');\r\n        };\r\n    });\r\n\r\n    document.addEventListener('click', () => {\r\n        document.querySelectorAll('.raph-dropdown .menu').forEach(menu => menu.classList.add('hidden'));\r\n    });\r\n\r\n    function setupDropdown(dropdownId, triggerTextId, promptSetter) {\r\n        const dropdown = document.getElementById(dropdownId);\r\n        const menu = dropdown.querySelector('.menu');\r\n        const triggerText = document.getElementById(triggerTextId);\r\n\r\n        menu.querySelectorAll('.item').forEach(item => {\r\n            item.onclick = (e) => {\r\n                e.stopPropagation();\r\n                menu.querySelector('.item.active')?.classList.remove('active');\r\n                item.classList.add('active');\r\n                \r\n                const val = item.dataset.prompt !== undefined ? item.dataset.prompt : item.dataset.value;\r\n                if (promptSetter) promptSetter(val);\r\n                \r\n                let visibleText = item.innerText.trim();\r\n                \r\n                if(dropdownId === 'ratio-dropdown') {\r\n                    currentRatio = item.dataset.value;\r\n                    triggerText.innerText = currentRatio;\r\n                } else if(triggerText) {\r\n                    triggerText.innerText = visibleText;\r\n                }\r\n                \r\n                menu.classList.add('hidden');\r\n            };\r\n        });\r\n    }\r\n\r\n    setupDropdown('ratio-dropdown', 'selected-ratio-text', null);\r\n    setupDropdown('style-dropdown', 'selected-style-text', (p) => currentStylePrompt = p);\r\n    setupDropdown('color-dropdown', 'selected-color-text', (p) => currentColorPrompt = p);\r\n    setupDropdown('lighting-dropdown', 'selected-lighting-text', (p) => currentLightingPrompt = p);\r\n    setupDropdown('composition-dropdown', 'selected-composition-text', (p) => currentCompositionPrompt = p);\r\n    setupDropdown('model-dropdown', 'selected-model-text', (val) => selectedModel = val);\r\n\r\n    document.getElementById('clear-btn').onclick = () => {\r\n        document.getElementById('banana-prompt').value = '';\r\n        removeImg.click(); \r\n        document.querySelector('#style-dropdown .menu [data-value=\"none\"]').click();\r\n        document.querySelector('#color-dropdown .menu [data-value=\"none\"]').click();\r\n        document.querySelector('#lighting-dropdown .menu [data-value=\"dramatic\"]').click();\r\n        document.querySelector('#composition-dropdown .menu [data-value=\"none\"]').click();\r\n    };\r\n\r\n    const genBtn = document.getElementById('generate-btn');\r\n    const resultPanel = document.getElementById('result-display');\r\n    const outputImg = document.getElementById('output-image');\r\n    const downloadLink = document.getElementById('download-link');\r\n    const loaderText = document.getElementById('loader-text');\r\n\r\n    genBtn.onclick = async () => {\r\n        const userPrompt = document.getElementById('banana-prompt').value;\r\n        if(!userPrompt) return alert(\"Please enter a prompt!\");\r\n\r\n        const finalPrompt = userPrompt + currentStylePrompt + currentColorPrompt + currentLightingPrompt + currentCompositionPrompt;\r\n\r\n        genBtn.disabled = true;\r\n        genBtn.innerText = \"Drawing...\";\r\n        resultPanel.classList.remove('hidden');\r\n        outputImg.classList.add('hidden');\r\n        downloadLink.classList.add('hidden');\r\n        loaderText.innerText = \"Generating your image, please wait...\";\r\n\r\n        const fd = new FormData();\r\n        fd.append('action', 'generate_nano_banana');\r\n        fd.append('prompt', finalPrompt);\r\n        fd.append('aspect_ratio', currentRatio);\r\n        fd.append('image_path', uploadedFilePath);\r\n        fd.append('model', selectedModel);\r\n        fd.append('fast_mode', document.getElementById('fast-mode').checked);\r\n\r\n        try {\r\n            const response = await fetch(AJAX_URL, {method:'POST', body:fd});\r\n            const res = await response.json();\r\n            if(res.success) {\r\n                outputImg.src = res.data.image;\r\n                outputImg.classList.remove('hidden');\r\n                downloadLink.href = res.data.image;\r\n                downloadLink.classList.remove('hidden');\r\n                loaderText.innerText = \"Success! Your image is ready.\";\r\n            } else {\r\n                loaderText.innerText = \"Error: \" + res.data.message;\r\n            }\r\n        } catch (e) {\r\n            loaderText.innerText = \"Network Error.\";\r\n        } finally {\r\n            genBtn.disabled = false;\r\n            genBtn.innerText = \"Generate Image\";\r\n        }\r\n    };\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2715 + 1:1 1:1 Square 16:9 Landscape 9:16 Portrait 3:2 Classic 4:3 Standard No Style None Anime Digital Art Fantasy Art Neon Punk Line Art Cinematic Pixel Art Enhance Photographic Comic Book Origami Craft Clay 3D Model No Color None Warm Tone Cool Tone Muted Colors Vibrant Colors Pastel Colors Black And White Dramatic None [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":96,"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/2.dealscoutnest.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}