{"id":26176,"date":"2025-10-14T13:25:28","date_gmt":"2025-10-14T04:25:28","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26176"},"modified":"2025-10-14T13:42:24","modified_gmt":"2025-10-14T04:42:24","slug":"%e3%83%9b%e3%83%ad%e3%83%a9%e3%82%a4%e3%83%96ai%e3%83%97%e3%83%ad%e3%83%b3%e3%83%97%e3%83%88%e3%82%b5%e3%82%a4%e3%83%88-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26176","title":{"rendered":"\u30db\u30ed\u30e9\u30a4\u30d6AI\u30d7\u30ed\u30f3\u30d7\u30c8\u30b5\u30a4\u30c8.html"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n  &lt;meta charset=\"utf-8\" \/>\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n  &lt;title>\u30db\u30ed\u30e9\u30a4\u30d6 AI\u30d7\u30ed\u30f3\u30d7\u30c8\u751f\u6210\u30b5\u30a4\u30c8&lt;\/title>\n  &lt;meta name=\"description\" content=\"\u30db\u30ed\u30e9\u30a4\u30d6\u306e\u30e1\u30f3\u30d0\u30fc\u5411\u3051\u306b\u3001\u753b\u50cf\u751f\u6210AI\u3067\u4f7f\u3048\u308b\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u4f5c\u6210\u3002\u65e5\u82f1\u5bfe\u5fdc\uff0f\u30c6\u30f3\u30d7\u30ec\uff0f\u30cd\u30ac\u30c6\u30a3\u30d6\uff0f\u30b3\u30d4\u30fc\u30dc\u30bf\u30f3\uff0f\u5c65\u6b74\u4fdd\u5b58\u3002\" \/>\n  &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700;900&amp;display=swap\" rel=\"stylesheet\">\n  &lt;script src=\"https:\/\/cdn.tailwindcss.com\">&lt;\/script>\n  &lt;script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { sans: &#91;'Noto Sans JP', 'ui-sans-serif', 'system-ui'] },\n          colors: {\n            skin: {\n              base: '#0b1020',\n              card: '#0f152b',\n              accent: '#60a5fa',\n              soft: '#a5b4fc'\n            }\n          },\n          boxShadow: {\n            glass: '0 8px 30px rgba(0,0,0,.35)'\n          }\n        }\n      }\n    }\n  &lt;\/script>\n  &lt;style>\n    html,body{height:100%}\n    .glass{backdrop-filter: saturate(140%) blur(12px); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}\n    .chip{border:1px solid rgba(255,255,255,.15);}\n    .mono{font-feature-settings: \"ss01\" on, \"cv01\" on;}\n  &lt;\/style>\n&lt;\/head>\n&lt;body class=\"min-h-screen bg-gradient-to-br from-slate-900 via-skin-base to-black text-slate-100 font-sans\">\n  &lt;header class=\"sticky top-0 z-30 border-b border-white\/10 bg-slate-900\/70 glass\">\n    &lt;div class=\"max-w-6xl mx-auto px-4 py-4 flex items-center gap-4\">\n      &lt;div class=\"size-10 rounded-2xl bg-skin-accent\/20 grid place-items-center shadow-glass\">\n        &lt;span class=\"text-skin-accent font-black\">AI&lt;\/span>\n      &lt;\/div>\n      &lt;div>\n        &lt;h1 class=\"text-xl md:text-2xl font-extrabold tracking-tight\">\u30db\u30ed\u30e9\u30a4\u30d6 AI\u30d7\u30ed\u30f3\u30d7\u30c8\u751f\u6210&lt;\/h1>\n        &lt;p class=\"text-slate-300 text-sm\">\u30e1\u30f3\u30d0\u30fc\u3092\u9078\u3076\u2192\u30c6\u30f3\u30d7\u30ec\u3092\u9078\u3076\u2192\u751f\u6210\uff01 \u65e5\/\u82f1\u30fb\u30cd\u30ac\u30c6\u30a3\u30d6\u30fb\u5c65\u6b74\u30fb\u30b3\u30d4\u30da\u5b8c\u5099&lt;\/p>\n      &lt;\/div>\n      &lt;div class=\"ms-auto flex items-center gap-3\">\n        &lt;label class=\"flex items-center gap-2 text-sm\">&lt;input id=\"langToggle\" type=\"checkbox\" class=\"accent-skin-accent\"> \u82f1\u8a9e\u3067\u51fa\u529b&lt;\/label>\n        &lt;button id=\"randomBtn\" class=\"px-3 py-2 rounded-xl bg-white\/10 hover:bg-white\/20 border border-white\/10\">\u30e9\u30f3\u30c0\u30e0&lt;\/button>\n        &lt;button id=\"resetBtn\" class=\"px-3 py-2 rounded-xl bg-white\/10 hover:bg-white\/20 border border-white\/10\">\u30ea\u30bb\u30c3\u30c8&lt;\/button>\n      &lt;\/div>\n    &lt;\/div>\n  &lt;\/header>\n\n  &lt;main class=\"max-w-6xl mx-auto px-4 py-6 grid lg:grid-cols-2 gap-6\">\n    &lt;!-- \u5de6\uff1a\u5165\u529b\u30d1\u30cd\u30eb -->\n    &lt;section class=\"glass rounded-2xl p-5 shadow-glass border border-white\/10\">\n      &lt;h2 class=\"font-bold text-lg mb-3\">1) \u30e1\u30f3\u30d0\u30fc &amp; \u30b9\u30bf\u30a4\u30eb\u8a2d\u5b9a&lt;\/h2>\n      &lt;div class=\"grid md:grid-cols-2 gap-4\">\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u30e1\u30f3\u30d0\u30fc&lt;\/label>\n          &lt;div class=\"flex gap-2\">\n            &lt;input id=\"memberSearch\" type=\"text\" placeholder=\"\u540d\u524d\/\u4e16\u4ee3\/\u7279\u5fb4\u3067\u691c\u7d22\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\" \/>\n          &lt;\/div>\n          &lt;div class=\"mt-2 max-h-48 overflow-auto pr-1\">\n            &lt;ul id=\"memberList\" class=\"space-y-1\">&lt;\/ul>\n          &lt;\/div>\n        &lt;\/div>\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 (\u7528\u9014)&lt;\/label>\n          &lt;select id=\"templateSelect\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\">\n            &lt;option value=\"portrait\">\u9ad8\u54c1\u8cea\u30dd\u30fc\u30c8\u30ec\u30fc\u30c8&lt;\/option>\n            &lt;option value=\"fullbody\">\u5168\u8eab\u30a4\u30e9\u30b9\u30c8&lt;\/option>\n            &lt;option value=\"chibi\">\u30c7\u30d5\u30a9\u30eb\u30e1\/\u3061\u3073\u30ad\u30e3\u30e9&lt;\/option>\n            &lt;option value=\"vtuber\">VTuber\u914d\u4fe1\u30b5\u30e0\u30cd&lt;\/option>\n            &lt;option value=\"live2d\">Live2D\u7acb\u3061\u7d75&lt;\/option>\n            &lt;option value=\"vrchat\">VRChat \u30a2\u30d0\u30bf\u30fc\u98a8&lt;\/option>\n            &lt;option value=\"manga\">\u30e2\u30ce\u30af\u30ed\u6f2b\u753b\u30b3\u30de&lt;\/option>\n            &lt;option value=\"poster\">\u30ad\u30fc\u30d3\u30b8\u30e5\u30a2\u30eb\/\u30dd\u30b9\u30bf\u30fc&lt;\/option>\n            &lt;option value=\"landscape\">\u80cc\u666f\uff06\u5c0f\u3055\u3081\u4eba\u7269&lt;\/option>\n          &lt;\/select>\n          &lt;div class=\"grid grid-cols-2 gap-2 mt-3\">\n            &lt;label class=\"text-sm flex items-center gap-2\">&lt;input id=\"nsfwSafe\" type=\"checkbox\" checked class=\"accent-skin-accent\"> NSFW\u7981\u6b62&lt;\/label>\n            &lt;label class=\"text-sm flex items-center gap-2\">&lt;input id=\"useNeg\" type=\"checkbox\" checked class=\"accent-skin-accent\"> \u30cd\u30ac\u30c6\u30a3\u30d6\u4ed8\u4e0e&lt;\/label>\n            &lt;label class=\"text-sm flex items-center gap-2\">&lt;input id=\"addPose\" type=\"checkbox\" class=\"accent-skin-accent\"> \u30dd\u30fc\u30ba\u6307\u5b9a&lt;\/label>\n            &lt;label class=\"text-sm flex items-center gap-2\">&lt;input id=\"addCamera\" type=\"checkbox\" class=\"accent-skin-accent\"> \u30ab\u30e1\u30e9\/\u30ec\u30f3\u30ba&lt;\/label>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/div>\n\n      &lt;div class=\"grid md:grid-cols-3 gap-4 mt-5\">\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u753b\u98a8\u30d7\u30ea\u30bb\u30c3\u30c8&lt;\/label>\n          &lt;select id=\"stylePreset\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\">\n            &lt;option value=\"anime\">\u30a2\u30cb\u30e1\u5857\u308a\uff08\u9bae\u3084\u304b\uff09&lt;\/option>\n            &lt;option value=\"semiReal\">\u30bb\u30df\u30ea\u30a2\u30eb&lt;\/option>\n            &lt;option value=\"watercolor\">\u6c34\u5f69\/\u3084\u308f\u3089\u304b&lt;\/option>\n            &lt;option value=\"celshade\">\u30bb\u30eb\u30eb\u30c3\u30af&lt;\/option>\n            &lt;option value=\"painterly\">\u539a\u5857\u308a\/\u7d75\u753b\u98a8&lt;\/option>\n            &lt;option value=\"3dtoon\">3D\u30c8\u30a5\u30fc\u30f3&lt;\/option>\n          &lt;\/select>\n        &lt;\/div>\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u7167\u660e\/\u96f0\u56f2\u6c17&lt;\/label>\n          &lt;select id=\"moodPreset\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\">\n            &lt;option value=\"soft\">\u67d4\u3089\u304b\u3044\u5149 \/ \u3084\u3055\u3057\u3044\u96f0\u56f2\u6c17&lt;\/option>\n            &lt;option value=\"dramatic\">\u30c9\u30e9\u30de\u30c1\u30c3\u30af \/ \u30ea\u30e0\u30e9\u30a4\u30c8&lt;\/option>\n            &lt;option value=\"studio\">\u30b9\u30bf\u30b8\u30aa\u7167\u660e \/ \u30af\u30ea\u30fc\u30f3&lt;\/option>\n            &lt;option value=\"sunset\">\u5915\u713c\u3051 \/ \u30b4\u30fc\u30eb\u30c7\u30f3\u30a2\u30ef\u30fc&lt;\/option>\n            &lt;option value=\"night\">\u591c\u666f \/ \u30cd\u30aa\u30f3&lt;\/option>\n          &lt;\/select>\n        &lt;\/div>\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u89e3\u50cf\u5ea6\u30fb\u6bd4\u7387&lt;\/label>\n          &lt;select id=\"aspectPreset\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\">\n            &lt;option value=\"square\">\u6b63\u65b9\u5f62\uff081024\u00d71024\uff09&lt;\/option>\n            &lt;option value=\"portrait\">\u7e26\u9577\uff08768\u00d71152\uff09&lt;\/option>\n            &lt;option value=\"landscape\">\u6a2a\u9577\uff081152\u00d7768\uff09&lt;\/option>\n            &lt;option value=\"thumb\">\u30b5\u30e0\u30cd\uff081280\u00d7720\uff09&lt;\/option>\n          &lt;\/select>\n        &lt;\/div>\n      &lt;\/div>\n\n      &lt;div class=\"mt-5 grid md:grid-cols-2 gap-4\">\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u8863\u88c5\u30fb\u5c0f\u7269\uff08\u4efb\u610f\uff09&lt;\/label>\n          &lt;input id=\"outfitInput\" type=\"text\" placeholder=\"\u4f8b: \u5236\u670d, \u30e9\u30a4\u30d6\u8863\u88c5, \u79c1\u670d, \u738b\u51a0, \u30de\u30f3\u30c8\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\" \/>\n        &lt;\/div>\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u80cc\u666f\u30fb\u30b7\u30fc\u30f3\uff08\u4efb\u610f\uff09&lt;\/label>\n          &lt;input id=\"bgInput\" type=\"text\" placeholder=\"\u4f8b: \u30b9\u30c6\u30fc\u30b8, \u661f\u7a7a, \u6559\u5ba4, \u30b5\u30a4\u30d0\u30fc\u30b7\u30c6\u30a3\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\" \/>\n        &lt;\/div>\n      &lt;\/div>\n\n      &lt;div class=\"mt-5 grid md:grid-cols-2 gap-4\">\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u30e2\u30c7\u30eb\/LoRA\uff08\u4efb\u610f\uff09&lt;\/label>\n          &lt;input id=\"modelInput\" type=\"text\" placeholder=\"\u4f8b: anime-v4, AnythingV5, holo_member_lora:0.8\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\" \/>\n        &lt;\/div>\n        &lt;div>\n          &lt;label class=\"block text-sm mb-1\">\u8ffd\u52a0\u30ad\u30fc\u30ef\u30fc\u30c9\uff08\u4efb\u610f\uff09&lt;\/label>\n          &lt;input id=\"extraInput\" type=\"text\" placeholder=\"\u4f8b: 1girl, detailed eyes, dynamic lighting\" class=\"w-full px-3 py-2 rounded-xl bg-black\/30 border border-white\/10\" \/>\n        &lt;\/div>\n      &lt;\/div>\n\n      &lt;div class=\"mt-6 flex flex-wrap gap-3\">\n        &lt;button id=\"generateBtn\" class=\"px-5 py-3 rounded-2xl bg-skin-accent text-black font-bold hover:opacity-90\">\u751f\u6210&lt;\/button>\n        &lt;button id=\"copyBtn\" class=\"px-5 py-3 rounded-2xl bg-white\/10 border border-white\/10 hover:bg-white\/20\">\u30b3\u30d4\u30fc&lt;\/button>\n        &lt;button id=\"saveBtn\" class=\"px-5 py-3 rounded-2xl bg-white\/10 border border-white\/10 hover:bg-white\/20\">\u5c65\u6b74\u306b\u4fdd\u5b58&lt;\/button>\n        &lt;button id=\"exportBtn\" class=\"px-5 py-3 rounded-2xl bg-white\/10 border border-white\/10 hover:bg-white\/20\">JSON\u66f8\u304d\u51fa\u3057&lt;\/button>\n        &lt;button id=\"importBtn\" class=\"px-5 py-3 rounded-2xl bg-white\/10 border border-white\/10 hover:bg-white\/20\">JSON\u8aad\u8fbc&lt;\/button>\n      &lt;\/div>\n    &lt;\/section>\n\n    &lt;!-- \u53f3\uff1a\u51fa\u529b\/\u5c65\u6b74 -->\n    &lt;section class=\"space-y-6\">\n      &lt;div class=\"glass rounded-2xl p-5 shadow-glass border border-white\/10\">\n        &lt;h2 class=\"font-bold text-lg\">2) \u51fa\u529b\uff08Positive \/ Negative \/ \u30e1\u30bf\uff09&lt;\/h2>\n        &lt;div class=\"mt-3 grid gap-3\">\n          &lt;label class=\"text-sm\">Positive Prompt&lt;\/label>\n          &lt;textarea id=\"posOut\" rows=\"6\" class=\"mono w-full px-3 py-2 rounded-xl bg-black\/50 border border-white\/10\" placeholder=\"\u3053\u3053\u306b\u751f\u6210\u7d50\u679c\">&lt;\/textarea>\n          &lt;label class=\"text-sm\">Negative Prompt&lt;\/label>\n          &lt;textarea id=\"negOut\" rows=\"4\" class=\"mono w-full px-3 py-2 rounded-xl bg-black\/50 border border-white\/10\" placeholder=\"\u3053\u3053\u306b\u30cd\u30ac\u30c6\u30a3\u30d6\">&lt;\/textarea>\n          &lt;div class=\"grid md:grid-cols-3 gap-3\">\n            &lt;div>\n              &lt;label class=\"text-sm\">\u89e3\u50cf\u5ea6&lt;\/label>\n              &lt;input id=\"metaRes\" class=\"w-full px-3 py-2 rounded-xl bg-black\/50 border border-white\/10\" readonly>\n            &lt;\/div>\n            &lt;div>\n              &lt;label class=\"text-sm\">\u63a8\u5968CFG\/Steps&lt;\/label>\n              &lt;input id=\"metaCfg\" class=\"w-full px-3 py-2 rounded-xl bg-black\/50 border border-white\/10\" value=\"CFG 6-8 \/ Steps 28-36\">\n            &lt;\/div>\n            &lt;div>\n              &lt;label class=\"text-sm\">\u63a8\u5968Sampler&lt;\/label>\n              &lt;input id=\"metaSampler\" class=\"w-full px-3 py-2 rounded-xl bg-black\/50 border border-white\/10\" value=\"DPM++ 2M Karras\">\n            &lt;\/div>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/div>\n\n      &lt;div class=\"glass rounded-2xl p-5 shadow-glass border border-white\/10\">\n        &lt;div class=\"flex items-center gap-3 mb-3\">\n          &lt;h2 class=\"font-bold text-lg\">3) \u5c65\u6b74&lt;\/h2>\n          &lt;button id=\"clearHist\" class=\"ms-auto px-3 py-1.5 text-sm rounded-xl bg-white\/10 border border-white\/10 hover:bg-white\/20\">\u5168\u524a\u9664&lt;\/button>\n        &lt;\/div>\n        &lt;div id=\"history\" class=\"space-y-3 max-h-72 overflow-auto pr-1\">&lt;\/div>\n      &lt;\/div>\n    &lt;\/section>\n  &lt;\/main>\n\n  &lt;footer class=\"max-w-6xl mx-auto px-4 pb-10 text-slate-400 text-sm\">\n    &lt;div class=\"glass rounded-2xl p-4 border border-white\/10\">\n      &lt;p class=\"leading-relaxed\">\u6ce8\u610f\uff1a\u672c\u30c4\u30fc\u30eb\u306f\u5404\u30e1\u30f3\u30d0\u30fc\u306e\u516c\u5f0f\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3\u3092\u5c0a\u91cd\u3057\u3001\u6210\u4eba\u5411\u3051\u3084\u8ab9\u8b17\u4e2d\u50b7\u306e\u5185\u5bb9\u3092\u7981\u6b62\u3057\u307e\u3059\u3002\u5546\u7528\u5229\u7528\u3084\u4e8c\u6b21\u5275\u4f5c\u30eb\u30fc\u30eb\u306f\u5404\u793e\u30dd\u30ea\u30b7\u30fc\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002&lt;\/p>\n    &lt;\/div>\n  &lt;\/footer>\n\n  &lt;script>\n    \/\/ --- \u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\uff08\u629c\u7c8b\u30fb\u8ffd\u52a0\u53ef\uff09 ---\n    const MEMBERS = &#91;\n      \/\/ JP\n      { key:'Tokino Sora', gen:'JP0', color:'#5bc0eb', motifs:&#91;'\u661f','\u30ea\u30dc\u30f3'], traits:&#91;'\u6e05\u695a','\u3084\u3055\u3057\u3044'], outfit:&#91;'\u30bb\u30fc\u30e9\u30fc\u98a8','\u30ea\u30dc\u30f3'], keywords:&#91;'idol','first gen','blue ribbon'], en:true },\n      { key:'Shirakami Fubuki', gen:'JP1', color:'#ffffff', motifs:&#91;'\u72d0','\u5c3b\u5c3e'], traits:&#91;'\u5143\u6c17','\u660e\u308b\u3044'], outfit:&#91;'\u30bb\u30fc\u30e9\u30fc','\u30de\u30d5\u30e9\u30fc'], keywords:&#91;'fox girl','white hair','animal ears'] },\n      { key:'Natsuiro Matsuri', gen:'JP1', color:'#f4a261', motifs:&#91;'\u796d','\u30dd\u30cb\u30fc\u30c6\u30fc\u30eb'], traits:&#91;'\u6d3b\u767a','\u3044\u305f\u305a\u3089'], outfit:&#91;'\u4f53\u64cd\u670d','\u6d74\u8863'], keywords:&#91;'cheerful','ponytail'] },\n      { key:'Minato Aqua', gen:'JP2', color:'#b388ff', motifs:&#91;'\u30e1\u30a4\u30c9','\u30d8\u30c3\u30c9\u30c9\u30ec\u30b9'], traits:&#91;'\u30c9\u30b8\u3063\u5b50','\u30d4\u30f3\u30af\u7d2b\u9aea'], outfit:&#91;'\u30e1\u30a4\u30c9\u670d'], keywords:&#91;'maid','twin tails'] },\n      { key:'Shion', gen:'JP2', color:'#c084fc', motifs:&#91;'\u9b54\u6cd5','\u4e09\u89d2\u5e3d'], traits:&#91;'\u5c0f\u60aa\u9b54','\u30c4\u30ea\u76ee'], outfit:&#91;'\u9b54\u5973\u670d'], keywords:&#91;'witch','purple hair'] },\n      { key:'Nakiri Ayame', gen:'JP2', color:'#ef4444', motifs:&#91;'\u9b3c\u89d2','\u548c\u88c5'], traits:&#91;'\u30af\u30fc\u30eb','\u51db'], outfit:&#91;'\u5deb\u5973\u98a8'], keywords:&#91;'oni horns','kimono style'] },\n      { key:'Ookami Mio', gen:'GAMERS', color:'#111827', motifs:&#91;'\u72fc','\u8033'], traits:&#91;'\u983c\u308c\u308b','\u843d\u3061\u7740\u304d'], outfit:&#91;'\u9ed2\u8863\u88c5'], keywords:&#91;'wolf girl','black outfit'] },\n      { key:'Houshou Marine', gen:'JP3', color:'#ef4444', motifs:&#91;'\u6d77\u8cca\u5e3d','\u9328'], traits:&#91;'\u60c5\u71b1','\u5927\u4eba\u3063\u307d\u3044'], outfit:&#91;'\u6d77\u8cca\u8863\u88c5'], keywords:&#91;'pirate','captain hat'] },\n      { key:'Usada Pekora', gen:'JP3', color:'#93c5fd', motifs:&#91;'\u3046\u3055\u8033','\u4eba\u53c2'], traits:&#91;'\u3084\u3093\u3061\u3083','\u5143\u6c17'], outfit:&#91;'\u3046\u3055\u304e\u30d1\u30fc\u30ab\u30fc'], keywords:&#91;'bunny ears','carrot'] },\n      { key:'Shiranui Flare', gen:'JP3', color:'#f59e0b', motifs:&#91;'\u30a8\u30eb\u30d5','\u8033'], traits:&#91;'\u5305\u5bb9','\u967d\u6c17'], outfit:&#91;'\u5192\u967a\u8005'], keywords:&#91;'elf ears','adventurer'] },\n      { key:'Shirogane Noel', gen:'JP3', color:'#9ca3af', motifs:&#91;'\u9a0e\u58eb','\u93a7'], traits:&#91;'\u771f\u9762\u76ee','\u529b\u6301\u3061'], outfit:&#91;'\u93a7','\u30de\u30f3\u30c8'], keywords:&#91;'knight armor','silver hair'] },\n      { key:'Hoshimachi Suisei', gen:'INoNaka\/JP', color:'#60a5fa', motifs:&#91;'\u661f','\u30a2\u30a4\u30c9\u30eb'], traits:&#91;'\u30af\u30fc\u30eb','\u30a2\u30a4\u30c9\u30eb'], outfit:&#91;'\u9752\u7cfb\u8863\u88c5'], keywords:&#91;'star motif','blue idol'] },\n      { key:'Amane Kanata', gen:'JP4', color:'#60a5fa', motifs:&#91;'\u5929\u4f7f','\u7fbd'], traits:&#91;'\u30b9\u30c8\u30a4\u30c3\u30af'], outfit:&#91;'\u767d\u84bc\u8863\u88c5'], keywords:&#91;'angel wings','halo'] },\n      { key:'Kiryu Coco', gen:'JP4', color:'#f97316', motifs:&#91;'\u30c9\u30e9\u30b4\u30f3','\u89d2'], traits:&#91;'\u8c6a\u5feb'], outfit:&#91;'\u30c9\u30e9\u30b4\u30f3\u30e2\u30c1\u30fc\u30d5'], keywords:&#91;'dragon horns','orange hair'] },\n      { key:'Tsunomaki Watame', gen:'JP4', color:'#facc15', motifs:&#91;'\u7f8a','\u30ea\u30dc\u30f3'], traits:&#91;'\u3075\u308f\u3075\u308f'], outfit:&#91;'\u7f8a\u30e2\u30c1\u30fc\u30d5'], keywords:&#91;'sheep girl','blonde'] },\n      { key:'Himemori Luna', gen:'JP4', color:'#f472b6', motifs:&#91;'\u59eb','\u738b\u51a0'], traits:&#91;'\u30ad\u30e5\u30fc\u30c8'], outfit:&#91;'\u59eb\u30c9\u30ec\u30b9'], keywords:&#91;'princess crown','pink'] },\n      { key:'Laplus Darknesss', gen:'HoloX', color:'#6d28d9', motifs:&#91;'\u60aa\u9b54','\u30de\u30f3\u30c8'], traits:&#91;'\u3044\u305f\u305a\u3089'], outfit:&#91;'\u9ed2\u7d2b\u30b3\u30fc\u30c8'], keywords:&#91;'devilish','hooded coat'] },\n      { key:'Takane Lui', gen:'HoloX', color:'#ef4444', motifs:&#91;'\u30b9\u30d1\u30a4','\u8d64\u9ed2'], traits:&#91;'\u30af\u30fc\u30eb'], outfit:&#91;'\u30b9\u30fc\u30c4\u98a8'], keywords:&#91;'spy','red black'] },\n      { key:'Sakamata Chloe', gen:'HoloX', color:'#94a3b8', motifs:&#91;'\u30b7\u30e3\u30c1','\u30d5\u30fc\u30c9'], traits:&#91;'\u3042\u3056\u3068\u3044'], outfit:&#91;'\u767d\u9ed2\u30d5\u30fc\u30c9'], keywords:&#91;'orca hoodie','monochrome'] },\n      { key:'Hakui Koyori', gen:'HoloX', color:'#fb7185', motifs:&#91;'\u7814\u7a76','\u30d4\u30f3\u30af'], traits:&#91;'\u597d\u5947\u5fc3'], outfit:&#91;'\u7814\u7a76\u767d\u8863'], keywords:&#91;'lab coat','pink hair'] },\n      { key:'Kazama Iroha', gen:'HoloX', color:'#86efac', motifs:&#91;'\u5fcd\u8005','\u5200'], traits:&#91;'\u7d20\u76f4'], outfit:&#91;'\u5fcd\u88c5\u675f'], keywords:&#91;'ninja','katana'] },\n      \/\/ EN\n      { key:'Mori Calliope', gen:'EN Myth', color:'#ef4444', motifs:&#91;'\u938c','\u6b7b\u795e'], traits:&#91;'\u30af\u30fc\u30eb'], outfit:&#91;'\u9ed2\u00d7\u30d4\u30f3\u30af'], keywords:&#91;'reaper scythe','rapper'] },\n      { key:'Gawr Gura', gen:'EN Myth', color:'#60a5fa', motifs:&#91;'\u30b5\u30e1','\u30d5\u30fc\u30c9'], traits:&#91;'\u3044\u305f\u305a\u3089'], outfit:&#91;'\u30b5\u30e1\u30d1\u30fc\u30ab\u30fc'], keywords:&#91;'shark hoodie','trident'] },\n      { key:'Takanashi Kiara', gen:'EN Myth', color:'#fb923c', motifs:&#91;'\u9ce5','\u30aa\u30ec\u30f3\u30b8'], traits:&#91;'\u60c5\u71b1'], outfit:&#91;'\u30a2\u30a4\u30c9\u30eb\u8863\u88c5'], keywords:&#91;'phoenix','orange hair'] },\n      { key:\"Ninomae Ina'nis\", gen:'EN Myth', color:'#a78bfa', motifs:&#91;'\u89e6\u624b','\u672c'], traits:&#91;'\u7a4f\u3084\u304b'], outfit:&#91;'\u4fee\u9053\u670d\u98a8'], keywords:&#91;'tentacle motif','violet'] },  &lt;!-- \u2605 \u4fee\u6b63\u6e08\u307f\uff1a\u30c0\u30d6\u30eb\u30af\u30a9\u30fc\u30c8 -->\n      { key:'Amelia Watson', gen:'EN Myth', color:'#fbbf24', motifs:&#91;'\u63a2\u5075','\u6642\u8a08'], traits:&#91;'\u597d\u5947\u5fc3'], outfit:&#91;'\u63a2\u5075\u30b3\u30fc\u30c8'], keywords:&#91;'detective','magnifying glass'] },\n      { key:'Hakos Baelz', gen:'EN Council', color:'#ef4444', motifs:&#91;'\u30cd\u30ba\u30df','\u30ab\u30aa\u30b9'], traits:&#91;'\u30cf\u30a4\u30c6\u30f3\u30b7\u30e7\u30f3'], outfit:&#91;'\u8d64\u7cfb\u8863\u88c5'], keywords:&#91;'chaos','rat tail'] },\n      { key:'IRyS', gen:'EN Project:Hope', color:'#ef5fff', motifs:&#91;'\u5929\u4f7f\u60aa\u9b54','\u30af\u30ea\u30b9\u30bf\u30eb'], traits:&#91;'\u5e0c\u671b'], outfit:&#91;'\u9ed2\u00d7\u8d64\u00d7\u7d2b'], keywords:&#91;'nephilim','crystal'] },\n      \/\/ ID (\u629c\u7c8b)\n      { key:'Kobo Kanaeru', gen:'ID3', color:'#60a5fa', motifs:&#91;'\u96e8','\u6c34'], traits:&#91;'\u3084\u3093\u3061\u3083'], outfit:&#91;'\u9752\u7cfb\u30d1\u30fc\u30ab\u30fc'], keywords:&#91;'rain theme','blue hair'] },\n    ];\n\n    \/\/ \u30cd\u30ac\u30c6\u30a3\u30d6\u30c6\u30f3\u30d7\u30ec\n    const NEGATIVE = 'nsfw, nude, lowres, low quality, worst quality, extra fingers, deformed hands, poorly drawn, watermark, logo, signature, text, blurry, jpeg artifacts, bad anatomy, out of frame';\n\n    \/\/ UI\u53d6\u5f97\n    const memberSearch = document.getElementById('memberSearch');\n    const memberList = document.getElementById('memberList');\n    const templateSelect = document.getElementById('templateSelect');\n    const stylePreset = document.getElementById('stylePreset');\n    const moodPreset = document.getElementById('moodPreset');\n    const aspectPreset = document.getElementById('aspectPreset');\n    const outfitInput = document.getElementById('outfitInput');\n    const bgInput = document.getElementById('bgInput');\n    const modelInput = document.getElementById('modelInput');\n    const extraInput = document.getElementById('extraInput');\n    const langToggle = document.getElementById('langToggle');\n    const nsfwSafe = document.getElementById('nsfwSafe');\n    const useNeg = document.getElementById('useNeg');\n    const addPose = document.getElementById('addPose');\n    const addCamera = document.getElementById('addCamera');\n\n    const generateBtn = document.getElementById('generateBtn');\n    const copyBtn = document.getElementById('copyBtn');\n    const saveBtn = document.getElementById('saveBtn');\n    const exportBtn = document.getElementById('exportBtn');\n    const importBtn = document.getElementById('importBtn');\n    const randomBtn = document.getElementById('randomBtn');\n    const resetBtn = document.getElementById('resetBtn');\n\n    const posOut = document.getElementById('posOut');\n    const negOut = document.getElementById('negOut');\n    const metaRes = document.getElementById('metaRes');\n    const metaCfg = document.getElementById('metaCfg');\n    const metaSampler = document.getElementById('metaSampler');\n    const history = document.getElementById('history');\n    const clearHist = document.getElementById('clearHist');\n\n    \/\/ \u72b6\u614b\n    let selectedMember = null;\n\n    \/\/ \u521d\u671f\u63cf\u753b\n    function renderMembers(filter=''){\n      const f = filter.toLowerCase().trim();\n      memberList.innerHTML = '';\n      MEMBERS.filter(m=>{\n        const s = &#91;m.key, m.gen, ...(m.motifs||&#91;]), ...(m.traits||&#91;]), ...(m.keywords||&#91;])].join(' ').toLowerCase();\n        return !f || s.includes(f);\n      }).forEach(m=>{\n        const li = document.createElement('li');\n        li.className = 'chip rounded-xl px-3 py-2 flex items-center gap-2 hover:bg-white\/5 cursor-pointer';\n        li.innerHTML = `&lt;span class=\"inline-block size-3 rounded-full\" style=\"background:${m.color}\">&lt;\/span>&lt;span class=\"font-medium\">${m.key}&lt;\/span>&lt;span class=\"text-xs text-slate-400\">(${m.gen})&lt;\/span>`;\n        \/\/ \u30af\u30ea\u30c3\u30af\u9078\u629e\n        li.addEventListener('click',()=>{ selectedMember = m; highlightSelection(li); });\n        \/\/ \u2605 \u30ad\u30fc\u30dc\u30fc\u30c9\u5bfe\u5fdc\n        li.setAttribute('tabindex', '0');\n        li.setAttribute('role', 'button');\n        li.addEventListener('keydown', (e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            selectedMember = m;\n            highlightSelection(li);\n          }\n        });\n        \/\/ \u65e2\u9078\u629e\u306e\u30cf\u30a4\u30e9\u30a4\u30c8\u7dad\u6301\n        if (selectedMember &amp;&amp; selectedMember.key === m.key) li.classList.add('bg-white\/10');\n        memberList.appendChild(li);\n      })\n    }\n\n    function highlightSelection(activeLi){\n      &#91;...memberList.children].forEach(li=> li.classList.remove('bg-white\/10'));\n      activeLi.classList.add('bg-white\/10');\n    }\n\n    memberSearch.addEventListener('input', e=> renderMembers(e.target.value));\n\n    \/\/ \u30a2\u30b9\u30da\u30af\u30c8 \u2192 \u8868\u793a\u89e3\u50cf\u5ea6\n    function applyAspect(){\n      const map = {\n        square: '1024x1024',\n        portrait: '768x1152',\n        landscape: '1152x768',\n        thumb: '1280x720'\n      };\n      metaRes.value = map&#91;aspectPreset.value] || '1024x1024';\n    }\n\n    aspectPreset.addEventListener('change', applyAspect);\n    applyAspect();\n\n    \/\/ \u30c6\u30f3\u30d7\u30ec\u6587\n    function templateText(id, name){\n      const jp = {\n        portrait: `${name}\u306e\u9ad8\u54c1\u8cea\u306a\u30d0\u30b9\u30c8\u30a2\u30c3\u30d7\u30dd\u30fc\u30c8\u30ec\u30fc\u30c8, \u8996\u7dda\u306f\u3053\u3061\u3089, \u304d\u3089\u3081\u304f\u77b3, \u7d30\u5bc6\u306a\u9aea, \u808c\u306e\u8cea\u611f,`,\n        fullbody: `${name}\u306e\u5168\u8eab\u30a4\u30e9\u30b9\u30c8, \u30c0\u30a4\u30ca\u30df\u30c3\u30af\u306a\u30dd\u30fc\u30ba,`,\n        chibi: `${name}\u306e\u30c7\u30d5\u30a9\u30eb\u30e1\u3061\u3073\u30ad\u30e3\u30e9, \u7b49\u8eab2~3,`,\n        vtuber: `${name}\u306e\u914d\u4fe1\u30b5\u30e0\u30cd\u98a8\u30a4\u30e9\u30b9\u30c8, \u30b5\u30a4\u30c9\u30e9\u30a4\u30c8, \u76ee\u3092\u5f15\u304f\u30bf\u30a4\u30dd\u306e\u4f59\u767d,`,\n        live2d: `${name}\u306eLive2D\u7acb\u3061\u7d75, \u80f8\u4e0a\u301c\u8170\u4e0a, \u30ec\u30a4\u30e4\u30fc\u5206\u3051\u3057\u3084\u3059\u3044\u30b7\u30f3\u30d7\u30eb\u80cc\u666f,`,\n        vrchat: `${name}\u306eVRChat\u30a2\u30d0\u30bf\u30fc\u98a8\u30c7\u30b6\u30a4\u30f3, \u5168\u8eab, \u30bb\u30eb\u30eb\u30c3\u30af,`,\n        manga: `${name}\u304c\u767b\u5834\u3059\u308b\u30e2\u30ce\u30af\u30ed\u6f2b\u753b\u30b3\u30de, \u30b9\u30af\u30ea\u30fc\u30f3\u30c8\u30fc\u30f3,`,\n        poster: `${name}\u306e\u30ad\u30fc\u30d3\u30b8\u30e5\u30a2\u30eb, \u8feb\u529b\u306e\u3042\u308b\u69cb\u56f3,`,\n        landscape: `\u80cc\u666f\u7f8e\u8853\u306e\u4e2d\u306b\u5c0f\u3055\u304f${name}, \u9060\u666f, \u96f0\u56f2\u6c17\u91cd\u8996,`\n      };\n      const en = {\n        portrait: `high-quality bust portrait of ${name}, looking at viewer, sparkling eyes, detailed hair, skin texture,`,\n        fullbody: `full-body illustration of ${name}, dynamic pose,`,\n        chibi: `super-deformed chibi ${name}, 2~3 heads tall,`,\n        vtuber: `stream thumbnail style illustration of ${name}, side lighting, space for bold typography,`,\n        live2d: `Live2D standing illustration of ${name}, bust to waist-up, simple background for easy layer separation,`,\n        vrchat: `VRChat avatar style design of ${name}, full body, toon shading,`,\n        manga: `monochrome manga panel featuring ${name}, screen tones,`,\n        poster: `key visual poster of ${name}, impactful composition,`,\n        landscape: `cinematic background with small ${name} in scene, distant view, mood-focused,`\n      }\n      return (langToggle.checked? en : jp)&#91;id] || '';\n    }\n\n    \/\/ \u30b9\u30bf\u30a4\u30eb\u30fb\u30e0\u30fc\u30c9\n    function styleText(id){\n      const jp = {\n        anime: '\u30a2\u30cb\u30e1\u5857\u308a, \u9ad8\u767a\u8272, \u30af\u30ea\u30a2\u30e9\u30a4\u30f3,',\n        semiReal: '\u30bb\u30df\u30ea\u30a2\u30eb, \u7e4a\u7d30\u306a\u30e9\u30a4\u30c6\u30a3\u30f3\u30b0, \u7d30\u5bc6\u8cea\u611f,',\n        watercolor: '\u6c34\u5f69\u98a8, \u67d4\u3089\u304b\u3044\u767a\u8272, \u306b\u3058\u307f,',\n        celshade: '\u30bb\u30eb\u30b7\u30a7\u30fc\u30c7\u30a3\u30f3\u30b0, \u30b7\u30e3\u30fc\u30d7\u306a\u5f71,',\n        painterly: '\u539a\u5857\u308a, \u7b46\u81f4, \u5965\u884c\u304d,',\n        threetoon: '3D\u30c8\u30a5\u30fc\u30f3, \u30ce\u30f3\u30d5\u30a9\u30c8\u30ea\u30a2\u30eb,'\n      };\n      const en = {\n        anime: 'anime coloring, vivid, clean linework,',\n        semiReal: 'semi-realistic, delicate lighting, fine textures,',\n        watercolor: 'watercolor style, soft colors, bleeding,',\n        celshade: 'cel-shaded, sharp shadows,',\n        painterly: 'painterly, visible brush strokes, depth,',\n        threetoon: '3D toon, non-photorealistic,'\n      };\n      const key = id === '3dtoon' ? 'threetoon' : id;\n      return (langToggle.checked? en : jp)&#91;key] || '';\n    }\n\n    function moodText(id){\n      const jp = {\n        soft: '\u3084\u308f\u3089\u304b\u3044\u74b0\u5883\u5149, \u7a4f\u3084\u304b\u306a\u8868\u60c5,',\n        dramatic: '\u30c9\u30e9\u30de\u30c1\u30c3\u30af\u30e9\u30a4\u30c6\u30a3\u30f3\u30b0, \u30ea\u30e0\u30e9\u30a4\u30c8, \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u5f37,',\n        studio: '\u30b9\u30bf\u30b8\u30aa\u7167\u660e, \u5747\u4e00\u306a\u5149, \u80cc\u666f\u30b7\u30f3\u30d7\u30eb,',\n        sunset: '\u5915\u713c\u3051\u306e\u5149, \u30b4\u30fc\u30eb\u30c7\u30f3\u30a2\u30ef\u30fc,',\n        night: '\u591c\u666f\u30cd\u30aa\u30f3, \u30b0\u30ed\u30fc, \u53cd\u5c04,'\n      };\n      const en = {\n        soft: 'soft ambient light, gentle expression,',\n        dramatic: 'dramatic lighting, rim light, high contrast,',\n        studio: 'studio lighting, even illumination, simple background,',\n        sunset: 'sunset glow, golden hour,',\n        night: 'neon nightscape, glow, reflections,'\n      };\n      return (langToggle.checked? en : jp)&#91;id] || '';\n    }\n\n    function poseText(){\n      const jp = &#91;'\u30d4\u30fc\u30b9\u30b5\u30a4\u30f3','\u7247\u624b\u3092\u80f8\u306b','\u307b\u307b\u3048\u307f','\u30c0\u30f3\u30b9\u30dd\u30fc\u30ba','\u8df3\u8e8d'];\n      const en = &#91;'peace sign','hand on chest','gentle smile','dance pose','jumping'];\n      const arr = langToggle.checked? en : jp;\n      return arr&#91;Math.floor(Math.random()*arr.length)]\n    }\n\n    function cameraText(){\n      const jp = &#91;'50mm\u30ec\u30f3\u30ba\u76f8\u5f53','f1.8\u88ab\u5199\u754c\u6df1\u5ea6','\u6975\u5c0f\u30ce\u30a4\u30ba','\u30b7\u30e3\u30fc\u30d7'];\n      const en = &#91;'50mm lens equivalent','f1.8 shallow depth of field','very low noise','sharp'];\n      const arr = langToggle.checked? en : jp;\n      return arr.join(', ');\n    }\n\n    function buildPositive(){\n      if(!selectedMember){\n        alert('\u30e1\u30f3\u30d0\u30fc\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044');\n        return '';\n      }\n      const name = selectedMember.key;\n      const tp = templateText(templateSelect.value, name);\n      const st = styleText(stylePreset.value);\n      const md = moodText(moodPreset.value);\n      const ex = extraInput.value?.trim();\n      const pieces = &#91;tp, st, md];\n\n      if(outfitInput.value.trim()) pieces.push(langToggle.checked? `outfit: ${outfitInput.value.trim()}` : `\u8863\u88c5: ${outfitInput.value.trim()}`);\n      if(bgInput.value.trim()) pieces.push(langToggle.checked? `background: ${bgInput.value.trim()}` : `\u80cc\u666f: ${bgInput.value.trim()}`);\n      if(addPose.checked) pieces.push(langToggle.checked? `pose: ${poseText()}` : `\u30dd\u30fc\u30ba: ${poseText()}`);\n      if(addCamera.checked) pieces.push(cameraText());\n\n      \/\/ \u30e1\u30f3\u30d0\u30fc\u7279\u5fb4\n      const motif = (selectedMember.motifs||&#91;]).join(', ');\n      const trait = (selectedMember.traits||&#91;]).join(', ');\n      const kw = (selectedMember.keywords||&#91;]).join(', ');\n      const profJP = `\u7279\u5fb4: ${motif}, \u6027\u683c: ${trait}, \u30ad\u30fc\u30ef\u30fc\u30c9: ${kw}`;\n      const profEN = `motifs: ${motif}, traits: ${trait}, keywords: ${kw}`;\n      pieces.push(langToggle.checked? profEN : profJP);\n\n      if(ex) pieces.push(ex);\n\n      \/\/ \u30e2\u30c7\u30eb\/LoRA\n      if(modelInput.value.trim()) pieces.push(`&#91;${modelInput.value.trim()}]`);\n\n      \/\/ NSFW\u5b89\u5168\n      if(nsfwSafe.checked){\n        pieces.push(langToggle.checked? 'sfw, wholesome' : '\u5168\u5e74\u9f62, \u5065\u5168');\n      }\n\n      return pieces.filter(Boolean).join(' ');\n    }\n\n    function buildNegative(){\n      return useNeg.checked ? NEGATIVE : '';\n    }\n\n    function generate(){\n      const pos = buildPositive();\n      if (!pos) return;\n      posOut.value = pos;\n      negOut.value = buildNegative();\n    }\n\n    function copyAll(){\n      const txt = `Positive:\\n${posOut.value}\\n\\nNegative:\\n${negOut.value}\\n\\nMeta:\\nres=${metaRes.value}, ${metaCfg.value}, sampler=${metaSampler.value}`;\n      navigator.clipboard.writeText(txt).then(()=>{ toast('\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f'); });\n    }\n\n    function toast(msg){\n      const t = document.createElement('div');\n      t.textContent = msg;\n      t.className = 'fixed bottom-5 left-1\/2 -translate-x-1\/2 px-4 py-2 rounded-xl bg-white\/10 border border-white\/10 shadow-glass';\n      document.body.appendChild(t);\n      setTimeout(()=> t.remove(), 1600);\n    }\n\n    function saveHistory(){\n      const item = {\n        time: new Date().toISOString(),\n        member: selectedMember?.key || '(\u672a\u9078\u629e)',\n        template: templateSelect.value,\n        style: stylePreset.value,\n        mood: moodPreset.value,\n        aspect: aspectPreset.value,\n        pos: posOut.value,\n        neg: negOut.value,\n        meta: { res: metaRes.value, cfg: metaCfg.value, sampler: metaSampler.value }\n      };\n      const arr = JSON.parse(localStorage.getItem('holo_prompt_hist')||'&#91;]');\n      arr.unshift(item);\n      \/\/ \u4fdd\u5b58\u4e0a\u9650\uff1a\u6700\u65b0\u304b\u3089\u6700\u5927100\u4ef6\uff08\u6587\u5b57\u5217\u9577\u3067\u5207\u308b\u3068JSON\u304c\u58ca\u308c\u308b\u305f\u3081\u4ef6\u6570\u3067\u5236\u5fa1\uff09\n      const MAX_ITEMS = 100;\n      localStorage.setItem('holo_prompt_hist', JSON.stringify(arr.slice(0, MAX_ITEMS)));\n      renderHistory();\n      toast('\u5c65\u6b74\u306b\u4fdd\u5b58\u3057\u307e\u3057\u305f');\n    }\n\n    function renderHistory(){\n      const arr = JSON.parse(localStorage.getItem('holo_prompt_hist')||'&#91;]');\n      history.innerHTML = '';\n      arr.forEach((it, idx)=>{\n        const card = document.createElement('div');\n        card.className = 'rounded-xl p-3 border border-white\/10 bg-black\/30';\n        card.innerHTML = `\n          &lt;div class='flex items-center gap-2 mb-2'>\n            &lt;span class='text-slate-300 text-sm'>${new Date(it.time).toLocaleString()}&lt;\/span>\n            &lt;span class='ms-auto text-xs chip rounded-lg px-2 py-0.5'>${it.member}&lt;\/span>\n          &lt;\/div>\n          &lt;div class='text-xs text-slate-400 mb-2'>${it.template} \/ ${it.style} \/ ${it.mood} \/ ${it.aspect}&lt;\/div>\n          &lt;details class='mb-2'>\n            &lt;summary class='cursor-pointer text-skin-soft'>Positive&lt;\/summary>\n            &lt;pre class='whitespace-pre-wrap text-sm'>${escapeHtml(it.pos)}&lt;\/pre>\n          &lt;\/details>\n          &lt;details class='mb-2'>\n            &lt;summary class='cursor-pointer text-skin-soft'>Negative&lt;\/summary>\n            &lt;pre class='whitespace-pre-wrap text-sm'>${escapeHtml(it.neg)}&lt;\/pre>\n          &lt;\/details>\n          &lt;div class='flex gap-2'>\n            &lt;button class='px-3 py-1.5 rounded-lg bg-white\/10 border border-white\/10 hover:bg-white\/20' data-act='load' data-idx='${idx}'>\u8aad\u307f\u8fbc\u3080&lt;\/button>\n            &lt;button class='px-3 py-1.5 rounded-lg bg-white\/10 border border-white\/10 hover:bg-white\/20' data-act='copy' data-idx='${idx}'>\u30b3\u30d4\u30fc&lt;\/button>\n            &lt;button class='px-3 py-1.5 rounded-lg bg-white\/10 border border-white\/10 hover:bg-white\/20' data-act='del' data-idx='${idx}'>\u524a\u9664&lt;\/button>\n          &lt;\/div>\n        `;\n        card.addEventListener('click', e=>{\n          const btn = e.target.closest('button');\n          if(!btn) return;\n          const { act, idx } = btn.dataset;\n          const list = JSON.parse(localStorage.getItem('holo_prompt_hist')||'&#91;]');\n          if(act==='del'){\n            list.splice(idx,1);\n            localStorage.setItem('holo_prompt_hist', JSON.stringify(list));\n            renderHistory();\n          }else if(act==='copy'){\n            navigator.clipboard.writeText(`Positive:\\n${list&#91;idx].pos}\\n\\nNegative:\\n${list&#91;idx].neg}`);\n            toast('\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f');\n          }else if(act==='load'){\n            loadHistoryItem(list&#91;idx]);\n          }\n        })\n        history.appendChild(card);\n      })\n    }\n\n    function loadHistoryItem(it){\n      selectedMember = MEMBERS.find(m=> m.key === it.member) || null;\n      templateSelect.value = it.template;\n      stylePreset.value = it.style;\n      moodPreset.value = it.mood;\n      aspectPreset.value = it.aspect; applyAspect();\n      posOut.value = it.pos; negOut.value = it.neg;\n      toast('\u5c65\u6b74\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3057\u305f');\n      renderMembers(memberSearch.value);\n    }\n\n    clearHist.addEventListener('click', ()=>{\n      localStorage.removeItem('holo_prompt_hist');\n      renderHistory();\n      toast('\u5c65\u6b74\u3092\u524a\u9664\u3057\u307e\u3057\u305f');\n    });\n\n    \/\/ JSON\u5165\u51fa\u529b\n    exportBtn.addEventListener('click', ()=>{\n      const data = localStorage.getItem('holo_prompt_hist')||'&#91;]';\n      const blob = new Blob(&#91;data], {type:'application\/json'});\n      const a = document.createElement('a');\n      a.href = URL.createObjectURL(blob);\n      a.download = 'holo_prompt_history.json';\n      a.click();\n    });\n\n    importBtn.addEventListener('click', ()=>{\n      const inp = document.createElement('input');\n      inp.type = 'file'; inp.accept = 'application\/json';\n      inp.onchange = () => {\n        const file = inp.files&#91;0];\n        if(!file) return;\n        const reader = new FileReader();\n        reader.onload = e => {\n          try{\n            const arr = JSON.parse(e.target.result);\n            if(Array.isArray(arr)){\n              localStorage.setItem('holo_prompt_hist', JSON.stringify(arr));\n              renderHistory();\n              toast('JSON\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3057\u305f');\n            } else { alert('\u4e0d\u6b63\u306aJSON\u3067\u3059'); }\n          }catch(err){ alert('\u8aad\u307f\u8fbc\u307f\u5931\u6557: '+err.message); }\n        };\n        reader.readAsText(file);\n      };\n      inp.click();\n    });\n\n    \/\/ \u30e9\u30f3\u30c0\u30e0\uff06\u30ea\u30bb\u30c3\u30c8\n    randomBtn.addEventListener('click', ()=>{\n      selectedMember = MEMBERS&#91;Math.floor(Math.random()*MEMBERS.length)];\n      renderMembers(memberSearch.value);\n      generate();\n      toast('\u30e9\u30f3\u30c0\u30e0\u9078\u629e\u3057\u307e\u3057\u305f');\n    });\n\n    resetBtn.addEventListener('click', ()=>{\n      memberSearch.value=''; selectedMember=null; renderMembers('');\n      templateSelect.value='portrait'; stylePreset.value='anime'; moodPreset.value='soft'; aspectPreset.value='square'; applyAspect();\n      outfitInput.value=''; bgInput.value=''; modelInput.value=''; extraInput.value='';\n      posOut.value=''; negOut.value='';\n      toast('\u521d\u671f\u5316\u3057\u307e\u3057\u305f');\n    });\n\n    \/\/ \u751f\u6210\/\u30b3\u30d4\u30fc\/\u4fdd\u5b58\n    generateBtn.addEventListener('click', generate);\n    copyBtn.addEventListener('click', copyAll);\n    saveBtn.addEventListener('click', saveHistory);\n\n    \/\/ \u8a00\u8a9e\u5207\u66ff\u6642\u306b\u518d\u751f\u6210\n    langToggle.addEventListener('change', ()=>{ if(posOut.value) generate(); });\n\n    \/\/ HTML\u30a8\u30b9\u30b1\u30fc\u30d7\n    function escapeHtml(str=''){\n      return str.replace(\/&#91;&amp;&lt;>\"]\/g, s=> ({'&amp;':'&amp;amp;','&lt;':'&amp;lt;','>':'&amp;gt;','\"':'&amp;quot;'}&#91;s]));\n    }\n\n    \/\/ \u521d\u671f\u63cf\u753b\n    renderMembers('');\n    renderHistory();\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[55],"tags":[3],"class_list":["post-26176","post","type-post","status-publish","format-standard","hentry","category-ai","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26176"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26176\/revisions"}],"predecessor-version":[{"id":26178,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26176\/revisions\/26178"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26176"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}