Skip to content

fix(dashboard): sync t2i template preview with text_base64 and add Shiki runtime support#7729

Open
fudengming wants to merge 2 commits intoAstrBotDevs:masterfrom
fudengming:master
Open

fix(dashboard): sync t2i template preview with text_base64 and add Shiki runtime support#7729
fudengming wants to merge 2 commits intoAstrBotDevs:masterfrom
fudengming:master

Conversation

@fudengming
Copy link
Copy Markdown

@fudengming fudengming commented Apr 22, 2026

修复 #7501 引入的 t2i 模板变量变更未同步到 WebUI 预览、i18n文案和更新日志的问题。(#7713

Modifications / 改动点

  • 更新 T2ITemplateEditor.vue 预览逻辑,支持 {{ text_base64 }}{{ shiki_runtime | safe }}

  • 新增迁移提示,检测到旧语法 {{ text | safe }} 时提示用户

  • 更新默认模板为新 base64 解码方式

  • 同步 zh-CN / en-US / ru-RU 的 i18n 变量说明

  • 在 v4.23.2 CHANGELOG 中补充模板变量变更说明

  • 新增 /api/t2i/shiki_runtime 接口支持 Shiki 运行时获取

  • This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

在使用旧语法时:
Screenshot_2026-04-22-17-48-57-56_a252b927494330cdc2c8ba3b3f952e5e
在使用新语法时:
Screenshot_2026-04-22-17-49-06-74_a252b927494330cdc2c8ba3b3f952e5e


Checklist / 检查清单

  • 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
    / 如果 PR 中有新加入的功能,已经通过 Issue / 邮件等方式和作者讨论过。

  • 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
    / 我的更改经过了良好的测试,并已在上方提供了“验证步骤”和“运行截图”

  • 🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
    / 我确保没有引入新依赖库,或者引入了新依赖库的同时将其添加到 requirements.txtpyproject.toml 文件相应位置。

  • 😮 My changes do not introduce malicious code.
    / 我的更改没有引入恶意代码。

Summary by Sourcery

Sync t2i template editor preview and backend with the new text_base64 and Shiki runtime-based templating, and add migration guidance for existing templates.

New Features:

  • Add Shiki runtime support to t2i template previews and expose it via a new /api/t2i/shiki_runtime endpoint.
  • Introduce an in-UI migration warning when legacy {{ text | safe }} syntax is detected in t2i templates.

Bug Fixes:

  • Align the Web UI t2i template preview behavior with the updated text_base64-based rendering used by the backend.

Documentation:

  • Document the t2i template variable migration from {{ text | safe }} to {{ text_base64 }} in the v4.23.2 changelog and update i18n variable descriptions across supported locales.

…iki runtime support

- Update preview regex from {{ text | safe }} to {{ text_base64 }} with base64 encoding
- Add Shiki runtime variable support ({{ shiki_runtime | safe }}) and API endpoint
- Add migration warning alert when old {{ text | safe }} syntax is detected
- Update default template to use base64 decoding approach
- Sync i18n hints for zh-CN, en-US, ru-RU
- Add breaking change notice to changelog v4.23.2

Fixes AstrBotDevs#7713
@auto-assign auto-assign Bot requested review from Fridemn and advent259141 April 22, 2026 10:08
@dosubot dosubot Bot added size:M This PR changes 30-99 lines, ignoring generated files. area:webui The bug / feature is about webui(dashboard) of astrbot. labels Apr 22, 2026
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue, and left some high level feedback:

  • The frontend Shiki runtime fetch uses /api/t2i/shiki-runtime while the backend route is registered as /t2i/shiki_runtime, so the URL/path should be aligned or proxied consistently to avoid 404s.
  • The previewContent regex for shiki_runtime (/\{\{\s*shiki_runtime\s*|\s*safe\s*\}\}/g) will treat | as an alternation operator instead of a literal pipe; consider grouping and escaping the pipe (e.g. /\{\{\s*shiki_runtime\s*\|\s*safe\s*\}\}/g) so it matches the intended template syntax.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The frontend Shiki runtime fetch uses `/api/t2i/shiki-runtime` while the backend route is registered as `/t2i/shiki_runtime`, so the URL/path should be aligned or proxied consistently to avoid 404s.
- The `previewContent` regex for `shiki_runtime` (`/\{\{\s*shiki_runtime\s*|\s*safe\s*\}\}/g`) will treat `|` as an alternation operator instead of a literal pipe; consider grouping and escaping the pipe (e.g. `/\{\{\s*shiki_runtime\s*\|\s*safe\s*\}\}/g`) so it matches the intended template syntax.

## Individual Comments

### Comment 1
<location path="dashboard/src/components/shared/T2ITemplateEditor.vue" line_range="335" />
<code_context>
-    content = content.replace(/\{\{\s*text\s*\|\s*safe\s*\}\}/g, previewData.value.text)
+    content = content.replace(/\{\{\s*text_base64\s*\}\}/g, btoa(String.fromCharCode(...new TextEncoder().encode(previewData.value.text))))
     content = content.replace(/\{\{\s*version\s*\}\}/g, previewData.value.version)
+    content = content.replace(/\{\{\s*shiki_runtime\s*|\s*safe\s*\}\}/g, previewData.value.shikiRuntime)
     return content
   } catch (error) {
</code_context>
<issue_to_address>
**issue (bug_risk):** The regex for `shiki_runtime | safe` is incorrect and will match unintended patterns.

Because of operator precedence, the pattern `/(\{\\s*shiki_runtime\\s*|\\s*safe\\s*\\}\\)/g` is interpreted as `({{ shiki_runtime ...)` **or** `(safe }})`, so it can replace partial fragments instead of the full `{{ shiki_runtime | safe }}` expression. This risks corrupting unrelated template content.

To align with the existing `text | safe` handling and only match the full expression, use:
```js
content = content.replace(/\{\{\s*shiki_runtime\s*\|\s*safe\s*\}\}/g, previewData.value.shikiRuntime)
```
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread dashboard/src/components/shared/T2ITemplateEditor.vue Outdated
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request implements a breaking change in the Text-to-Image (T2I) template system, transitioning from text | safe to text_base64 to handle text rendering via base64 encoding. It adds a new backend endpoint for the Shiki runtime, updates the frontend editor with migration alerts, and adjusts the preview rendering logic. Two high-severity issues were identified: a path mismatch between the frontend API call and the backend route, and a regex error in the template preview logic where the pipe character was not properly escaped, leading to incorrect variable replacement.

Comment thread dashboard/src/components/shared/T2ITemplateEditor.vue Outdated
Comment thread dashboard/src/components/shared/T2ITemplateEditor.vue Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:webui The bug / feature is about webui(dashboard) of astrbot. size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant