dsh-live2dwaifu 0.1.4 → 0.2.0

package/README.md

@@ -13,7 +13,15 @@
 | 展开 | 一张小卡片，上半身，底下一条气泡装台词 |
 | 收起 | 缩成一条，只剩名字和一个 ⌃ |
 
-右下角有个小三角，拖它就能改卡片大小；标题栏的 **◐** 一键换背景（透明 / 深色 / 浅色 / 纸质）。窗口大小、背景、开合状态都记在本机，下次还是这样。
+按住标题栏能把她拖到屏幕任何地方，右下角那个小三角拖的是大小；标题栏的 **◐** 一键换背景（透明 / 深色 / 浅色 / 纸质）。位置、大小、背景、开合状态都记在本机，下次还是这样。
+
+**她会看你**：鼠标在窗口里走，眼珠跟着转，脑袋也偏一点。
+
+**能戳**：点她的头会害羞，戳身上会瞪你，点底下就应你一声。
+
+**会自己动**：模型里带 `.motion3.json` 的，隔十几秒自己播一个动作。气泡能拖着挪地方，说完过一阵自己淡下去。
+
+**跟着聊**：她挂在聊天流上（`conversation.chat.node` 插槽），助手每说一句她就念一句，情绪按话里的词换。
 
 ## 三十秒上手
 

package/assets/viewer.html

@@ -10,7 +10,10 @@
   #stage { display: block; width: 100%; height: 100%; }
   #bubble { position: absolute; left: 12px; right: 12px; bottom: 10px; min-height: 30px; box-sizing: border-box;
     background: rgba(24,27,33,.94); border: 1px solid #3a4049; border-radius: 10px; padding: 7px 10px;
-    color: #dfe4ec; font-size: 13px; line-height: 1.45; }
+    color: #dfe4ec; font-size: 13px; line-height: 1.45;
+    opacity: 0; transition: opacity .35s ease; cursor: grab; user-select: none;
+    max-height: 40%; overflow: hidden; touch-action: none; }
+  #bubble:active { cursor: grabbing; }
   #hint { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
     text-align: center; padding: 20px; color: #98a0ad; }
   #hint.show { display: flex; }

package/assets/viewer.js

@@ -44312,6 +44312,15 @@ void main(void)\r
   var exps = [];
   var expParams = /* @__PURE__ */ new Map();
   var expName = null;
+  var gazeX = 0;
+  var gazeY = 0;
+  var pokeAt = 0;
+  var sayFade = 0;
+  var motionGroups = [];
+  var nextMotionAt = 0;
+  var POKE_HEAD = ["\u5514\u3002", "\u522B\u6478\u3002", "\u5934\u53D1\u4E71\u4E86\u3002", "\u55EF\u2026\u2026", "\u4F60\u624B\u51C9\u3002"];
+  var POKE_BODY = ["\u770B\u4EC0\u4E48\u770B\u3002", "\u6233\u4EC0\u4E48\u3002", "\u54FC\u3002", "\u522B\u95F9\u3002"];
+  var POKE_LOW = ["\u5728\u5462\u3002", "\u6709\u4E8B\uFF1F", "\u600E\u4E48\u4E86\u3002"];
   var base = {};
   var BASE_IDS = ["ParamMouthForm", "ParamMouthOpenY", "ParamBrowLY", "ParamBrowRY", "ParamBrowLAngle", "ParamBrowRAngle", "ParamEyeLSmile", "ParamEyeRSmile", "ParamEyeLOpen", "ParamEyeROpen", "ParamEyeBallX", "ParamEyeBallY", "ParamAngleX", "ParamAngleY", "ParamAngleZ"];
   for (const id of BASE_IDS) base[id] = 0;
@@ -44361,6 +44370,13 @@ void main(void)\r
     exps = entry.expressions || [];
     expParams = /* @__PURE__ */ new Map();
     expName = null;
+    try {
+      const defs = model.internalModel && model.internalModel.motionManager && model.internalModel.motionManager.definitions || {};
+      motionGroups = Object.keys(defs).filter((k2) => Array.isArray(defs[k2]) && defs[k2].length);
+    } catch {
+      motionGroups = [];
+    }
+    nextMotionAt = performance.now() + 6e3;
     renderExps();
     fit();
     applyMood("\u5E73\u9759");
@@ -44440,13 +44456,22 @@ void main(void)\r
   function say(text, m2) {
     if (m2) applyMood(m2);
     const bubble = $2("bubble");
+    let s2 = String(text == null ? "" : text).replace(/\s+/g, " ").trim();
+    if (s2.length > 180) s2 = s2.slice(0, 178) + "\u2026";
     bubble.textContent = "";
+    bubble.style.opacity = "1";
+    clearTimeout(sayFade);
     let i2 = 0;
     const t2 = setInterval(() => {
-      bubble.textContent = text.slice(0, ++i2);
+      bubble.textContent = s2.slice(0, ++i2);
       mouth = 0.14;
-      if (i2 >= text.length) clearInterval(t2);
-    }, 65);
+      if (i2 >= s2.length) {
+        clearInterval(t2);
+        sayFade = setTimeout(() => {
+          bubble.style.opacity = "0";
+        }, Math.min(14e3, 4e3 + s2.length * 110));
+      }
+    }, 55);
   }
   var idleIdx = 0;
   function idleTick() {
@@ -44483,17 +44508,33 @@ void main(void)\r
       }
     }
     setP("ParamBreath", (Math.sin(t2 * 1.1) + 1) / 2);
+    const gx = Math.max(-1, Math.min(1, gazeX));
+    const gy = Math.max(-1, Math.min(1, gazeY));
+    setP("ParamEyeBallX", gx * 0.9);
+    setP("ParamEyeBallY", -gy * 0.65);
     if (!window.__holdHead) {
-      setP("ParamAngleX", Math.sin(t2 * 0.43) * 4);
-      setP("ParamAngleY", Math.sin(t2 * 0.31 + 1) * 3);
-      setP("ParamBodyAngleX", Math.sin(t2 * 0.29) * 2);
+      setP("ParamAngleX", Math.sin(t2 * 0.43) * 1.4 + gx * 7);
+      setP("ParamAngleY", Math.sin(t2 * 0.31 + 1) * 1.2 - gy * 5);
+      setP("ParamBodyAngleX", Math.sin(t2 * 0.29) * 2 + gx * 2);
     }
+    maybeMotion();
     if (mouth > 0) {
       mouth = Math.max(0, mouth - app.ticker.deltaMS / 1e3);
       setP("ParamMouthOpenY", (Math.sin(t2 * 18) * 0.5 + 0.5) * 0.26 + 0.02);
     }
     core.update();
   });
+  function maybeMotion() {
+    if (!model || !motionGroups.length) return;
+    const now = performance.now();
+    if (now < nextMotionAt) return;
+    nextMotionAt = now + 12e3 + Math.random() * 16e3;
+    const g2 = motionGroups.indexOf("Idle") >= 0 ? "Idle" : motionGroups[Math.floor(Math.random() * motionGroups.length)];
+    try {
+      model.motion(g2, void 0, 3);
+    } catch {
+    }
+  }
   window.addEventListener("resize", () => setTimeout(fit, 60));
   refresh(true).then(() => {
     if (state.models.length) setTimeout(idleTick, 2500);
@@ -44562,6 +44603,62 @@ void main(void)\r
     const d2 = e2.data || {};
     if (d2.type === "dsh-live2d/bg") applyBg(String(d2.bg || "none"));
   });
+  window.addEventListener("pointermove", (e2) => {
+    if (e2.target && e2.target.id === "bubble") return;
+    gazeX = e2.clientX / Math.max(1, window.innerWidth) * 2 - 1;
+    gazeY = e2.clientY / Math.max(1, window.innerHeight) * 2 - 1;
+  });
+  window.addEventListener("pointerleave", () => {
+    gazeX = 0;
+    gazeY = 0;
+  });
+  var pokeIdx = 0;
+  $2("stage").addEventListener("pointerdown", (e2) => {
+    if (!core) return;
+    const now = Date.now();
+    if (now - pokeAt < 800) return;
+    pokeAt = now;
+    const h2 = Math.max(1, app.renderer.height);
+    const rel = e2.clientY / h2;
+    if (rel < 0.42) say(POKE_HEAD[pokeIdx++ % POKE_HEAD.length], "\u5BB3\u7F9E");
+    else if (rel < 0.75) say(POKE_BODY[pokeIdx++ % POKE_BODY.length], "\u751F\u6C14");
+    else say(POKE_LOW[pokeIdx++ % POKE_LOW.length], "\u5F00\u5FC3");
+  });
+  (function dragBubble() {
+    const b2 = $2("bubble");
+    if (!b2) return;
+    let bx = 0;
+    let by = 0;
+    try {
+      const s2 = JSON.parse(localStorage.getItem("dsh-l2d-bub") || "{}");
+      bx = Number(s2.x) || 0;
+      by = Number(s2.y) || 0;
+      b2.style.transform = "translate(" + bx + "px," + by + "px)";
+    } catch {
+    }
+    b2.addEventListener("pointerdown", (e2) => {
+      e2.preventDefault();
+      const sx = e2.clientX;
+      const sy = e2.clientY;
+      const x0 = bx;
+      const y0 = by;
+      const move = (ev) => {
+        bx = x0 + ev.clientX - sx;
+        by = y0 + ev.clientY - sy;
+        b2.style.transform = "translate(" + bx + "px," + by + "px)";
+      };
+      const up = () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", up);
+        try {
+          localStorage.setItem("dsh-l2d-bub", JSON.stringify({ x: Math.round(bx), y: Math.round(by) }));
+        } catch {
+        }
+      };
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", up);
+    });
+  })();
 })();
 /*! Bundled license information:
 

package/lib/client.js

@@ -1,5 +1,5 @@
 ;(() => {
-  const makeFactory = () => {
+  const makeFactory = (require) => {
     const react = require('react');
     const h = react.createElement;
     const name = 'dsh-live2d';
@@ -17,7 +17,7 @@
         display:flex;flex-direction:column}
       .dsh-l2d-card.collapsed{width:146px!important;height:36px!important}
       .dsh-l2d-head{display:flex;align-items:center;gap:6px;padding:8px 10px;color:#9aa3b0;font-size:11px;
-        letter-spacing:.5px;border-bottom:1px solid #2c313a;user-select:none;flex:none}
+        letter-spacing:.5px;border-bottom:1px solid #2c313a;user-select:none;flex:none;cursor:move}
       .dsh-l2d-dot{width:6px;height:6px;border-radius:50%;background:#6aa9ff;flex:none}
       .dsh-l2d-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
       .dsh-l2d-btns{margin-left:auto;display:flex;gap:6px;flex:none}
@@ -46,17 +46,31 @@
       }
     }
 
+    function readPos() {
+      try {
+        const p = JSON.parse(localStorage.getItem('dsh-l2d-pos') || '{}');
+        return { x: Number(p.x) || 0, y: Number(p.y) || 0 };
+      } catch {
+        return { x: 0, y: 0 };
+      }
+    }
+
     function Panel() {
       const [open, setOpen] = react.useState(() => localStorage.getItem('dsh-l2d-open') !== '0');
       const [title, setTitle] = react.useState('Live2D');
       const [bg, setBg] = react.useState(() => localStorage.getItem('dsh-l2d-bg') || 'none');
       const [size, setSize] = react.useState(readSize);
+      const [pos, setPos] = react.useState(readPos);
       const [nonce, setNonce] = react.useState(0);
       const ref = react.useRef(null);
 
       react.useEffect(() => localStorage.setItem('dsh-l2d-open', open ? '1' : '0'), [open]);
       react.useEffect(() => localStorage.setItem('dsh-l2d-bg', bg), [bg]);
       react.useEffect(() => localStorage.setItem('dsh-l2d-size', JSON.stringify(size)), [size]);
+      react.useEffect(() => localStorage.setItem('dsh-l2d-pos', JSON.stringify(pos)), [pos]);
+      react.useEffect(() => {
+        frameWin = (ref.current && ref.current.contentWindow) || null;
+      }, [nonce, open]);
       react.useEffect(() => {
         if (ref.current && ref.current.contentWindow) {
           ref.current.contentWindow.postMessage({ type: 'dsh-live2d/bg', bg }, '*');
@@ -92,26 +106,48 @@
         window.addEventListener('pointerup', up);
       };
 
+      const startMove = (e) => {
+        if (e.button !== undefined && e.button !== 0) return;
+        const sx = e.clientX;
+        const sy = e.clientY;
+        const x0 = pos.x;
+        const y0 = pos.y;
+        const move = (ev) => {
+          const nx = x0 + (ev.clientX - sx);
+          const ny = y0 + (ev.clientY - sy);
+          setPos({ x: Math.round(nx), y: Math.round(ny) });
+        };
+        const up = () => {
+          window.removeEventListener('pointermove', move);
+          window.removeEventListener('pointerup', up);
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+      };
+      const noDrag = (e) => e.stopPropagation();
+
       const manage = () => ref.current && ref.current.contentWindow.postMessage({ type: 'dsh-live2d/manage' }, '*');
       const cycleBg = () => setBg(BGS[(BGS.indexOf(bg) + 1) % BGS.length]);
 
-      const cardStyle = open ? { width: size.w + 'px', height: size.h + 'px' } : {};
+      const cardStyle = open
+        ? { width: size.w + 'px', height: size.h + 'px', transform: 'translate(' + pos.x + 'px,' + pos.y + 'px)' }
+        : { transform: 'translate(' + pos.x + 'px,' + pos.y + 'px)' };
 
       return h(
         'div',
         { className: 'dsh-l2d-card' + (open ? '' : ' collapsed'), style: cardStyle },
         h(
           'div',
-          { className: 'dsh-l2d-head' },
+          { className: 'dsh-l2d-head', onPointerDown: startMove },
           h('span', { className: 'dsh-l2d-dot' }),
           h('span', { className: 'dsh-l2d-name' }, title),
           h(
             'span',
             { className: 'dsh-l2d-btns' },
-            open && h('button', { title: '模型管理', onClick: manage }, '⚙'),
-            open && h('button', { title: '背景：' + BG_LABEL[bg], onClick: cycleBg }, '◐'),
-            open && h('button', { title: '刷新', onClick: () => setNonce((n) => n + 1) }, '↻'),
-            h('button', { title: open ? '收起' : '展开', onClick: () => setOpen(!open) }, open ? '⌄' : '⌃'),
+            open && h('button', { title: '模型管理', onPointerDown: noDrag, onClick: manage }, '⚙'),
+            open && h('button', { title: '背景：' + BG_LABEL[bg], onPointerDown: noDrag, onClick: cycleBg }, '◐'),
+            open && h('button', { title: '刷新', onPointerDown: noDrag, onClick: () => setNonce((n) => n + 1) }, '↻'),
+            h('button', { title: open ? '收起' : '展开', onPointerDown: noDrag, onClick: () => setOpen(!open) }, open ? '⌄' : '⌃'),
           ),
         ),
         open
@@ -121,21 +157,89 @@
               className: 'dsh-l2d-body',
               src: BASE + '/viewer?embed=1&bg=' + encodeURIComponent(bg),
               allow: 'autoplay',
+              onLoad: () => {
+                frameWin = (ref.current && ref.current.contentWindow) || null;
+              },
             })
           : null,
         open ? h('div', { className: 'dsh-l2d-grip', onPointerDown: startDrag, title: '拖动改大小' }) : null,
       );
     }
 
+    let frameWin = null;
+    let lastSaid = '';
+    let lastSaidAt = 0;
+
+    const MOOD_HINTS = [
+      ['生气', ['气', '烦', '讨厌', '凭什么']],
+      ['委屈', ['委屈', '难过', '对不起', '哭']],
+      ['害羞', ['唔', '别看', '害羞', '脸红']],
+      ['开心', ['谢谢', '喜欢', '开心', '好耶']],
+      ['困', ['困', '睡', '熬夜']],
+    ];
+
+    function guessMood(text) {
+      for (let i = 0; i < MOOD_HINTS.length; i++) {
+        const words = MOOD_HINTS[i][1];
+        for (let j = 0; j < words.length; j++) {
+          if (text.indexOf(words[j]) >= 0) return MOOD_HINTS[i][0];
+        }
+      }
+      return '平静';
+    }
+
+    function pushSay(text) {
+      const t = String(text || '').replace(/\s+/g, ' ').trim();
+      if (!t || t === lastSaid) return;
+      if (Date.now() - lastSaidAt < 700) return;
+      lastSaid = t;
+      lastSaidAt = Date.now();
+      if (!frameWin) return;
+      try {
+        frameWin.postMessage({ type: 'dsh-live2d/say', text: t, mood: guessMood(t) }, '*');
+      } catch {}
+    }
+
+    function ChatProbe(props) {
+      const anchor = react.useRef(null);
+      const role =
+        (props && (props.role || props.kind)) ||
+        (props && props.node && (props.node.role || props.node.kind)) ||
+        (props && props.message && props.message.role) ||
+        '';
+      const skip = /user|human|prompt/i.test(String(role));
+      react.useEffect(() => {
+        if (skip) return;
+        const el = anchor.current;
+        if (!el) return;
+        let node = el.parentElement;
+        let text = '';
+        for (let i = 0; i < 5 && node; i++) {
+          const t = (node.textContent || '').trim();
+          if (t.length > 3 && t.length < 900) {
+            text = t;
+            break;
+          }
+          node = node.parentElement;
+        }
+        if (text) pushSay(text);
+      });
+      if (skip) return null;
+      return h('i', { ref: anchor, style: { display: 'none' } });
+    }
+
     function apply(ctx) {
       ensureCss();
       ctx.slots.inject('shell.overlay', function* () {
         yield ctx.slots.register({ name: 'shell.overlay', id: 'live2d', order: 900 }, Panel);
       });
+      ctx.slots.inject('conversation.chat.node', function* () {
+        yield ctx.slots.register({ name: 'conversation.chat.node', id: 'live2d-say', order: 900 }, ChatProbe);
+      });
     }
 
     return { apply, inject, name };
   };
 
-  window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: makeFactory() });
+  window.__ModuleLoader__.load({ id: 'dsh-live2dwaifu', factory: makeFactory });
 })();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-live2dwaifu",
-  "version": "0.1.4",
-  "description": "给 DSH 网页右下角请一个 Live2D 角色：会眨眼、会呼吸、说话时嘴动、心情变了眉毛跟着动。模型不用内置——谁装谁放自己的文件夹；支持自定义 .exp3.json 表情、窗口大小可拖、背景可换。",
+  "version": "0.2.0",
+  "description": "给 DSH 网页右下角请一个 Live2D 角色：会眨眼、会呼吸、视线跟着鼠标、点她有反应、说话时嘴动、心情变了眉毛跟着动。模型不用内置——谁装谁放自己的文件夹；支持自定义 .exp3.json 表情和 .motion3.json 动作，卡片能拖能缩，背景可换。",
   "type": "module",
   "main": "lib/index.js",
   "exports": {