为玩家显示变量状态栏

为玩家显示变量状态栏#

MVU有一个巧妙的设计: 它会在 AI 回复结束后, 自动在回复末尾附加一串特殊字符: <StatusPlaceHolderImpl/>.
这串字符本身只是一个占位符, 没有任何作用. 但你可以用酒馆正则捕获它, 将它

仅格式提示词为空, 从而不对 AI 发送这段文本, 防止 AI 模仿这串特殊字符而在后续自己输出它
仅格式显示为我们想要展示的任何内容

仅格式提示词: 不发送状态栏占位符#

我们新增一个局部正则, 命名为 [不发送]状态栏 (按照青空莉的正则命名习惯, [不发送] 表示不发送给 AI, [隐藏] 表示不显示给玩家, 另有其他 [按作用命名]):

脚本名称: [不发送]状态栏
查找正则表达式: <StatusPlaceHolderImpl/>
替换为:
作用范围:
  - [ ] 用户输入
  - [x] AI输出
短暂:
  - [ ] 仅格式显示
  - [x] 仅格式提示词

仅格式显示: 显示状态栏#

同样地, 我们新建一个局部正则, 命名为 [界面]状态栏. 这次我们将勾选仅格式显示, 将占位符替换为我们要显示的状态栏:

脚本名称: [界面]状态栏
查找正则表达式: <StatusPlaceHolderImpl/>
替换为: 见下文
作用范围:
  - [ ] 用户输入
  - [x] AI输出
短暂:
  - [x] 仅格式显示
  - [ ] 仅格式提示词

文本状态栏#

与酒馆宏相同, {{get_message_variable::变量}} 除了作为提示词在发送给 ai 时被替换, 也会在显示时被替换.
因此我们可以将 <StatusPlaceHolderImpl/> 替换为一串带有 {{get_message_variable::变量}} 的文本, 来显示变量值:

💖 络络当前好感度: {{get_message_variable::stat_data.角色.络络.好感度}}

这样, 每次 AI 回复的下方都会自动显示这行文字, 并显示正确的数值.

当然, 你也可以使用 HTML 和 CSS 进行美化:

<style>
/* 在这里写你的CSS样式 */
.status-bar {
  font-size: 14px;
  color: #ff69b4;
  border: 1px solid #ff69b4;
  padding: 5px;
  border-radius: 8px;
}
</style>
<div class="status-bar">
💖 络络当前好感度: {{get_message_variable::stat_data.角色.络络.好感度}}
</div>

前端状态栏#

至于包含复杂脚本的 HTML 状态栏, 这已超出本教程范围.
你可以尝试请 AI 辅助编写 (实时编写前端界面或脚本), 或直接使用门之主写卡助手、Nova Creator等成熟写卡助手.

推荐的 HTML 状态栏模板

使用 const all_variables = getAllVariables() 获取整个变量, 然后用 _.get(all_variables, 'stat_data.角色.络络.好感度') 获取具体某个变量.
使用 jquery 处理显示逻辑

当然我更建议你用实时编写前端界面或脚本来让 AI 边自己看酒馆网页边编写状态栏.

```html
<head>
  <style>
  ${设计样式}
  </style>
  <script type="module">
    ${
      逻辑代码
      example: |-
        function populateCharacterData() {
          const all_variables = getAllVariables();

          const property_value = _.get(all_variables, 'stat_data.${variable path}', 'N/A');
          $('#${character}-${variable path}').text(property_value);
          ...
        }

        function toggleSection($header) {
          const $content = $header.next('.section-content');
          $content.toggleClass('expanded');

          const $arrow = $header.find('span:last-child');
          $arrow.text($content.hasClass('expanded') ? '▼' : '►');
        }

        async function init() {
          await waitGlobalInitialized('Mvu');
          populateCharacterData();

          $('.section-header').on('click', function () {
            toggleSection($(this));
          });
        }

        $(errorCatched(init));
    }
  </script>
</head>
<body>
  <div class="card-body">
    <div class="section">
      <div class="section-header">
        <span>${角色名} 核心状态</span>
        <span>▼</span>
      </div>
      <div class="section-content expanded">
        <div class="property">
          <div class="property-name">${variable name in Chinese}</div>
          <div class="property-value-container">
            <span class="property-value" id="${character}-${variable path}">--</span>
          </div>
        </div>
        <div class="property">
          <div class="property-name">${...}</div>
          <div class="property-value-container">
            <span class="property-value" id="${...}">--</span>
          </div>
        </div>
        ...
      </div>
    </div>
    <div class="section">
      <div class="section-header">
        <span>世界状态</span>
        <span>►</span>
      </div>
      <div class="section-content">${...}</div>
    </div>
    ...
  </div>
</body>
```

回顾#

至此, 我们制作了这样一个状态栏:

显示不消耗任何 token
AI 对它只需要更新需要更新的变量, 而不需要像传统状态栏一样每次都输出所有信息

但不要让这里的状态栏教程限制了你的想象力.

你没必要非要用 <StatusPlaceHolderImpl/> 来显示状态栏, 你可以用其他任何方式来显示它: 你可以自己定义一个输出格式, 在里面要求 AI 输出 "附近地点" 等没必要变量化的细节信息, 而用酒馆正则捕获这个格式, 替换为带变量的状态栏.

总之, 通过设置变量, 我们已经可以动态展示剧情状态, 实现稳定更新的状态栏. 这是一个很棒的起点, 但也仅仅是一个起点.