{"id":150,"date":"2026-03-27T21:17:39","date_gmt":"2026-03-27T21:17:39","guid":{"rendered":"https:\/\/cpocreativity.com\/AI\/?page_id=150"},"modified":"2026-03-27T22:17:07","modified_gmt":"2026-03-27T22:17:07","slug":"style-protocols","status":"publish","type":"page","link":"https:\/\/cpocreativity.com\/AI\/style-protocols\/","title":{"rendered":"Style Protocols"},"content":{"rendered":"    <div id=\"cpo-app\" style=\"max-width:1200px;margin:0 auto;padding:20px;font-family:system-ui,sans-serif\">\n        <p style=\"text-align:center;color:#666;padding:40px\">Loading protocols...<\/p>\n    <\/div>\n    <style>\n        .cpo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}\n        .cpo-card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:20px;cursor:pointer;transition:all .2s}\n        .cpo-card:hover{border-color:#6366f1;box-shadow:0 8px 25px rgba(0,0,0,.1);transform:translateY(-3px)}\n        .cpo-card h3{margin:0 0 8px;font-size:1.2em;color:#1a1a1a}\n        .cpo-meta{color:#666;font-size:.9em;margin-bottom:12px;line-height:1.5}\n        .cpo-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px}\n        .cpo-tag{background:#f3f4f6;padding:4px 10px;border-radius:12px;font-size:.8em;color:#4b5563}\n        .cpo-actions{display:flex;gap:8px}\n        .cpo-btn{flex:1;padding:8px 12px;border:none;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:500}\n        .cpo-btn.view{background:#6366f1;color:#fff}\n        .cpo-btn.copy{background:#f3f4f6;color:#333}\n        .cpo-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:99999;align-items:center;justify-content:center;padding:20px}\n        .cpo-modal.active{display:flex}\n        .cpo-modal-content{background:#fff;border-radius:16px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;padding:25px}\n        .cpo-modal-header{display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #e5e5e5}\n        .cpo-close{font-size:1.5em;cursor:pointer;color:#999}\n        .cpo-prompt{background:#f9fafb;border-left:4px solid #6366f1;padding:15px;margin:15px 0}\n        .cpo-prompt.neg{border-left-color:#dc2626;background:#fef2f2}\n        .cpo-prompt pre{font-family:monospace;font-size:.9em;white-space:pre-wrap;margin:10px 0}\n        .cpo-copy{background:#6366f1;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;margin-top:10px}\n    <\/style>\n    <script>\n    (function(){\n        var API_BASE = '\/AI\/wp-json\/cpo\/v1\/';\n        var protocols = [];\n        \n        function loadProtocols() {\n            var app = document.getElementById('cpo-app');\n            if (!app) return;\n            fetch(API_BASE + 'protocols')\n                .then(function(res) {\n                    if (!res.ok) throw new Error('HTTP ' + res.status);\n                    return res.json();\n                })\n                .then(function(data) {\n                    if (!data.success || !data.data || data.data.length === 0) {\n                        app.innerHTML = '<p style=\"text-align:center;color:#666\">No protocols found<\/p>';\n                        return;\n                    }\n                    protocols = data.data;\n                    renderGrid(protocols);\n                })\n                .catch(function(err) {\n                    console.error('Error:', err);\n                    app.innerHTML = '<p style=\"text-align:center;color:#dc2626\">Error: ' + err.message + '<\/p>';\n                });\n        }\n        \n        function renderGrid(list) {\n            var app = document.getElementById('cpo-app');\n            if (!app) return;\n            var grid = document.createElement('div');\n            grid.className = 'cpo-grid';\n            list.forEach(function(p) {\n                var card = document.createElement('div');\n                card.className = 'cpo-card';\n                var moodTags = (p.mood || '').split(',').slice(0,3).map(function(m){\n                    return '<span class=\"cpo-tag\">'+esc(m.trim())+'<\/span>';\n                }).join('');\n                card.innerHTML = '<h3>'+esc(p.style_name)+'<\/h3>'+\n                    '<div class=\"cpo-meta\"><strong>ID:<\/strong> '+esc(p.style_id)+'<br><strong>v'+esc(p.version)+'<\/strong> \u2022 '+esc(p.intensity)+'<\/div>'+\n                    '<div class=\"cpo-tags\">'+moodTags+'<\/div>'+\n                    '<div class=\"cpo-actions\">'+\n                    '<button class=\"cpo-btn view\" data-id=\"'+p.style_id+'\">\ud83d\udc41\ufe0f View<\/button>'+\n                    '<button class=\"cpo-btn copy\" data-id=\"'+p.style_id+'\">\ud83d\udccb Copy<\/button>'+\n                    '<\/div>';\n                grid.appendChild(card);\n            });\n            app.innerHTML = '';\n            app.appendChild(grid);\n            \/\/ Add event listeners\n            document.querySelectorAll('.cpo-btn.view').forEach(function(btn){\n                btn.onclick = function(e){ e.stopPropagation(); viewProto(btn.dataset.id); };\n            });\n            document.querySelectorAll('.cpo-btn.copy').forEach(function(btn){\n                btn.onclick = function(e){ e.stopPropagation(); copyProto(btn.dataset.id); };\n            });\n        }\n        \n        function viewProto(id) {\n            fetch(API_BASE + 'protocols\/' + id)\n                .then(function(res){ return res.json(); })\n                .then(function(data){\n                    if(!data.success) return;\n                    var p = data.data;\n                    var modal = document.createElement('div');\n                    modal.className = 'cpo-modal active';\n                    modal.innerHTML = '<div class=\"cpo-modal-content\">'+\n                        '<div class=\"cpo-modal-header\"><h2 style=\"margin:0\">'+esc(p.identification.style_name)+'<\/h2><span class=\"cpo-close\" onclick=\"this.closest(\\'.cpo-modal\\').remove()\">&times;<\/span><\/div>'+\n                        '<p><strong>ID:<\/strong> '+esc(p.identification.style_id)+' | <strong>v'+esc(p.identification.version)+'<\/strong><\/p>'+\n                        '<div class=\"cpo-prompt\"><strong>\ud83d\udcdd Base:<\/strong><pre>'+esc(p.control_layer.base_prompt)+'<\/pre><button class=\"cpo-copy\" onclick=\"cpoCopy(this,\\''+(p.control_layer.base_prompt||'').replace(\/'\/g,\"\\\\'\")+'\\')\">\ud83d\udccb Copy<\/button><\/div>'+\n                        '<div class=\"cpo-prompt neg\"><strong>\ud83d\udeab Negative:<\/strong><pre>'+esc(p.control_layer.negative_prompt)+'<\/pre><button class=\"cpo-copy\" onclick=\"cpoCopy(this,\\''+(p.control_layer.negative_prompt||'').replace(\/'\/g,\"\\\\'\")+'\\')\">\ud83d\udccb Copy<\/button><\/div>'+\n                        '<\/div>';\n                    document.body.appendChild(modal);\n                    modal.onclick = function(e){ if(e.target===modal) modal.remove(); };\n                });\n        }\n        \n        function copyProto(id) {\n            fetch(API_BASE + 'protocols\/' + id + '\/prompt')\n                .then(function(res){ return res.json(); })\n                .then(function(data){\n                    var text = data.base_prompt + '\\n\\nNegative: ' + data.negative_prompt;\n                    navigator.clipboard.writeText(text).then(function(){ alert('\u2705 Copied!'); });\n                });\n        }\n        \n        window.cpoCopy = function(btn, txt) {\n            navigator.clipboard.writeText(txt).then(function(){\n                var orig = btn.innerHTML;\n                btn.innerHTML = '\u2705 Copied!';\n                btn.style.background = '#10b981';\n                setTimeout(function(){ btn.innerHTML = orig; btn.style.background = ''; }, 2000);\n            });\n        };\n        \n        function esc(s){ if(!s) return ''; var d=document.createElement('div'); d.textContent=s; return d.innerHTML; }\n        \n        if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', loadProtocols); }\n        else { loadProtocols(); }\n    })();\n    <\/script>\n    \n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-150","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/pages\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":3,"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/pages\/150\/revisions\/155"}],"wp:attachment":[{"href":"https:\/\/cpocreativity.com\/AI\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}