浏览器原生语音合成（TTS）开发经验

最近先后在站点上线了两个纯前端的朗读工具：Read Aloud 和 智能朗读阅读器。两者都基于浏览器的 Web Speech API 实现，没有后端、没有上传、没有第三方语音服务。开发过程中踩了一些坑，也积累了一些可复用的经验，记录如下。

浏览器 TTS 的入口非常简洁：

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance(text);
synth.speak(utterance);

window.speechSynthesis 负责全局的语音队列，SpeechSynthesisUtterance 则是每一次发音的单元。在真正可用之前，建议先做兼容性判断：

if (!window.speechSynthesis) {
  alert('当前浏览器不支持 Web Speech API，无法使用朗读功能。');
  return;
}

目前 Safari、Chrome、Edge 等现代浏览器都支持该 API，但不同浏览器在语音质量、语音名、事件触发等方面差异明显，后面会详细说。

第一次调用 speechSynthesis.getVoices() 时，返回的数组经常为空。这是因为浏览器需要异步加载系统语音包。正确做法是监听 voiceschanged 事件，并设置超时兜底：

ttsweb-speech-apibrowserjavascriptspeech-synthesis
发布

智能朗读阅读器：浏览器本地中英文长文朗读工具

智能朗读阅读器是一款基于 Web Speech API 的纯前端朗读工具。它采用左右分屏设计：左侧为阅读区，右侧为可折叠编辑区，适合朗读中文小说、英文范文、演讲稿等长文本。所有文本处理与语音合成都在浏览器本地完成，无需上传、无需后端。

  • 左右分屏阅读：左侧阅读区、右侧可折叠编辑区，加载大文本后阅读区独立滚动，页面不再被撑高。
  • 自动分句与高亮：按中英文标点自动切分长文，朗读时当前句高亮显示，已读句子自动淡化。
  • 点击跳转朗读：在阅读区点击任意句子，即可从该句开始播放。
  • 语速 / 音调调节：语速支持 0.4x ~ 2.5x，音调支持 0.5 ~ 2.0。
  • 字号 / 行高调节：阅读区字号与行高可调，偏好自动保存到本地。
  • 语音选择：自动加载系统语音，英文文本默认优先使用 Ava 语音。
  • 上下句跳转：支持按钮或键盘 ← / → 快速切换到上一句 / 下一句。
  • 循环播放：支持单句循环与全文循环，适合重点句子跟读或反复听诵。
  • 朗读进度条：底部实时显示整体朗读进度。
  • 预设经典文本：内置《背影》、I Have a Dream、Gettysburg Address 等范文，一键体验。
  • 主题切换：支持浅色 / 深色模式，长时间阅读更护眼。
  • 文件导入：支持 .txt / .md 等文本导入，也支持拖拽文件到阅读区。
  • 快捷键：空格播放 / 暂停，Ctrl + Enter 加载文本，Esc 停止，← / → 切换句子。
  • 纯本地运行：无后端、无上传、无依赖，纯静态 HTML 页面。
tool tts reader web-speech-api browser reading-companion

JiuwenSwarm 架构设计、工作原理与核心模块深度剖析

JiuwenSwarm 是一个华为云开源的分布式 AI 多智能体协同与能力自进化系统。简单说，它是一个让 AI 智能体像团队一样协作、并且越用越聪明的系统。

模式 怎么工作 适合
Plan 模式 单 Agent 深度推理，自带任务规划 Rail，边思考边执行 复杂任务、多步骤分析
Performance 模式 卸掉规划护栏，直问直答，延迟最低 快速问答、简单查询
Swarm 模式 Leader 拆解任务，组建多 Agent 团队并行协作，可跨机器 大型复杂工作、多角色分工 
flowchart LR
    M["用户输入"] --> P{模式选择}
    P -->|agent.plan| A1["单 agent 深度规划<br/>+ task planning rail"]
    P -->|agent.fast| A2["单 agent 快速响应<br/>- heavy rail"]
    P -->|team| A3["leader 拆解任务<br/>+ teammate 分布式执行"]
    A1 --> R["输出结果"]
    A2 --> R
    A3 --> R

Gateway + AgentServer 双进程架构，支持： 多用户隔离：

jiuwenswarmagent智能体多智能体swarm架构设计源码分析glm-5.2
发布

高中英语3500词：浏览器本地背单词工具

高中英语3500词是一款纯前端、无需安装的浏览器背单词工具。它内置高考核心词汇，采用卡片式记忆设计，支持释义隐藏、朗读、收藏标记和进度统计，所有学习状态都保存在浏览器本地。

  • 内置高考词汇库：覆盖高中英语 3500 核心词，打开即用，无需上传词表。
  • 卡片式记忆：大字显示单词，点击卡片或按空格即可显示/隐藏中文释义。
  • 顺序与随机模式：支持顺序背诵和随机抽词，一键切换复习方式。
  • 朗读发音：基于 Web Speech API，支持单词朗读、语速调节和语音选择。
  • 自动朗读设置：可开启切换单词时自动朗读、显示释义时自动朗读。
  • 收藏/标为不熟：遇到重点或不会的单词，按 S 或点击星标收藏，便于集中复习。
  • 仅看收藏过滤：开启过滤后只显示已收藏单词，针对性巩固薄弱词汇。
  • 显示释义后自动下一个：可设置延迟时间，自动推进到下一张卡片。
  • 单词列表与搜索：侧滑单词列表支持按英文或中文释义快速搜索跳转。
  • 进度统计：顶部显示当前进度条和第几个 / 总词数。
  • 学习状态本地保存：收藏、设置、释义显示状态均通过 localStorage 保存，刷新不丢失。
  • 快捷键支持：空格/点击显示释义、← → 翻页、R 随机、P 朗读、A 自动朗读、S 收藏、L 列表、G 设置。
  1. 打开 高中英语3500词。
  2. 点击卡片或按空格查看释义。
  3. 熟悉的词按 → 或点击"下一个 →"继续；不熟悉的词按 S 收藏。
  4. 需要听发音时，按 P 或点击 "🔊 朗读"。
  5. 想针对性复习时，打开设置开启"仅显示收藏"。
tool english vocabulary education flashcards browser
发布

Read Aloud：浏览器本地长文朗读器

Read Aloud 是一款纯前端、无需上传文本的浏览器朗读工具。它基于 Web Speech API 实现，全部文本处理与语音合成都在本地完成，适合朗读英文范文、中文小说、演讲稿、技术文档等长文本。

  • 本地朗读：文本不离开浏览器，无上传、无服务端、保护隐私。
  • 自动分句：按段落和标点自动切分长文，避免单次文本过长被浏览器截断。
  • 当前句高亮：朗读时文本区切换为阅读视图，当前句子高亮并自动滚动到视野中央。
  • 点击跳转播放：在阅读视图中单击任意句子，即可从该句开始播放。
  • 语速与音调调节：支持 0.5x ~ 2.0x 语速调节，以及 0.5 ~ 2.0 的音调调节。
  • 多语音选择：自动根据语言选择系统语音，也支持手动切换。
  • 中英文支持：自动检测中英文比例，或手动指定中文 / 英文。
  • 进度与时间显示：实时显示当前句数、总句数和已用时间。
  1. 打开 Read Aloud。
  2. 将需要朗读的文本粘贴到编辑区。
  3. 点击 ▶ 朗读 开始播放。
  4. 需要暂停时点击 ⏸ 暂停，或点击 ⏹ 停止 结束朗读并恢复编辑。
  • 在编辑区内按 Ctrl / ⌘ + Space：播放 / 暂停。
  • 焦点在编辑区外时，按 Space：快速播放 / 暂停。
  • 按 Esc：关闭帮助窗口。

Read Aloud 依赖 Web Speech API，建议使用 Safari、Chrome、Edge 等现代浏览器。

tool tts read-aloud web-speech-api browser local-tts
发布

极简长文朗读器：左右分屏实时朗读工具

极简长文朗读器是一款基于浏览器 Web Speech API 的本地文本朗读工具。它采用左右分屏的极简设计：左侧输入文本，右侧实时生成可朗读的阅读视图，全部处理都在浏览器内完成，无需上传、无需后端。

  • 左右分屏实时同步：左侧编辑文本，右侧阅读视图即时解析渲染，边写边读。
  • 中英文智能识别：自动判断文本为中文还是英文，也可手动选择语种。
  • 按句高亮：朗读时当前句子以黄色高亮显示，并自动滚动到视野中央。
  • 点击跳转播放：点击阅读视图中的任意句子，即可从该句开始朗读。
  • 语速调节：支持 0.5x ~ 2.0x 语速调节，拖动滑块即可实时生效。
  • 发音人选择：自动加载系统语音，支持手动切换中英文发音人。
  • 防中断保活：针对部分浏览器长段朗读容易中断的问题，内置保活机制。
  • 内置范例：一键加载中英文示例文本，快速体验朗读效果。
特性 极简长文朗读器 Read Aloud
界面 左右分屏，实时同步 编辑/阅读视图切换
分句 按中英文标点实时切分 段落 + 句子双层切分
音调调节 无 支持
进度显示 无 句数 / 时间
设计 极简 Tailwind 风格 卡片式工具风格

可以根据个人喜好选择更适合自己的一款，两者都是纯浏览器本地运行。

tool tts reader web-speech-api browser minimalist

发布

剪贴板备份：浏览器本地剪贴板历史管理工具

剪贴板备份是一款纯前端、无需后端的浏览器剪贴板历史管理工具。它支持保存文本、HTML、RTF、图片等多种剪贴板格式，利用浏览器 IndexedDB 本地持久化存储，随时恢复或下载历史内容。

  • 多格式剪贴板捕获：支持保存文本、HTML、RTF、URL 列表、PNG / JPEG / GIF / WebP 图片等多种剪贴板格式。
  • 本地持久化存储：所有备份数据通过 IndexedDB 存储在浏览器本地，刷新页面或关闭浏览器后数据不丢失。
  • 多格式预览：支持按格式切换预览，文本、HTML、图片分别渲染，HTML 内容经 DOMPurify 安全过滤。
  • 一键恢复复制：点击复制按钮即可将备份内容还原到系统剪贴板，图片自动转换为 PNG 格式以兼容 Clipboard API。
  • 逐格式下载：每个备份的每种格式均可单独下载为对应文件（txt、html、rtf、png 等）。
  • 相对时间显示：备份时间以"刚刚""5 分钟前""2 小时前"等相对时间展示，直观易读。
  • 全页粘贴支持：不仅可以在粘贴区域粘贴，在页面任意位置按 Ctrl+V 均可触发备份。
  • 批量清空：支持一键删除所有备份，操作前需确认，防止误删。
  1. 打开 剪贴板备份。
  2. 点击页面粘贴区域并按 Ctrl + V 粘贴内容，或在页面任意位置直接粘贴。
  3. 备份自动保存并显示在列表中，可预览、复制或下载。
  4. 点击 清空全部 可删除所有历史备份。
tool clipboard backup browser indexeddb local-storage
发布

SVG 渲染器：在线 SVG 实时预览工具

SVG 渲染器是一款纯前端的在线 SVG 预览工具。它支持粘贴 SVG 代码或从 URL 加载 SVG 文件，右侧实时渲染预览，全部处理都在浏览器内完成，无需上传、无需后端。

  • 双模式输入：支持直接粘贴 SVG 代码，或输入 URL 从网络加载 SVG 文件。
  • 实时预览：左侧编辑或粘贴代码，右侧即时渲染 SVG 图形，所见即所得。
  • 安全沙箱渲染：使用 DOMPurify 对 SVG 进行安全过滤，并在沙箱 iframe 中渲染，防范 XSS 和恶意脚本。
  • 智能宽高比：自动解析 SVG 的 viewBox 或 width/height 属性，保持正确的图形比例。
  • URL 分享：通过 URL hash 加载的 SVG 地址可直接分享，他人打开即可查看同一图形。
  • 响应式布局：桌面端左右分屏，移动端自动切换为上下堆叠，适配各种设备。
  • 内置示例：首次打开自动加载示例 SVG，快速体验渲染效果。
  1. 打开 SVG 渲染器。
  2. 点击 粘贴 标签，将 SVG 代码粘贴到左侧编辑区。
  3. 或点击 URL 标签，输入 SVG 文件地址后点击 加载。
  4. 右侧预览区即时显示渲染结果。

SVG 渲染器为纯静态 HTML 页面，兼容所有现代浏览器。建议使用 Chrome、Edge、Safari 或 Firefox 最新版本。

  • HTML + CSS + JavaScript
  • DOMPurify（SVG 安全过滤）
  • 无后端、无依赖、纯静态页面
tool svg renderer preview browser graphics
发布

DOT 文件渲染器：在线 Graphviz 图形预览工具

DOT 文件渲染器是一款纯前端的在线 Graphviz 图形预览工具。只需在浏览器中粘贴 DOT 语言描述的图结构代码，即可实时渲染为有向图或无向图 SVG，支持通过 URL 片段直接分享图形代码，无需安装任何本地软件。

  • 实时渲染：输入 DOT 代码后自动防抖渲染，500ms 内即时出图。
  • URL 分享：图形代码自动编码到 URL 片段中，复制链接即可分享完整图形。
  • 加载示例：内置完整流程图示例，一键体验渲染效果。
  • 错误提示：DOT 语法错误时，在输出区显示详细错误信息。
  • 纯浏览器运行：基于 Viz.js 在浏览器端完成全部渲染，无后端、无上传。
  1. 打开 DOT 文件渲染器。
  2. 在输入区粘贴您的 .dot 文件内容。
  3. 图形会自动渲染到下方的输出区。
  4. 复制当前浏览器地址栏中的 URL 即可分享图形。
  • 有向图（digraph）
  • 无向图（graph）
  • 节点样式、边标签、布局方向（rankdir）等 Graphviz 标准属性
  • HTML + CSS + JavaScript
  • Viz.js（WebAssembly 版 Graphviz）
  • 无后端、无依赖、纯静态页面
我要设计一个WEB应用（HTML），在线渲染DOT文件。有什么好的思路？先分析需求，进行设计，再实现（一个html），存储到 @tools/ 目录。
tool dot graphviz graph diagram visualization
发布

Markdown 渲染器：在线 Markdown 转 HTML 工具

Markdown 渲染器是一款纯前端的在线 Markdown 转 HTML 工具。它调用 GitHub Markdown API 进行渲染，支持 GitHub Flavored Markdown (GFM) 标准，输出干净的 HTML 代码和实时预览，无需安装任何软件，打开浏览器即可使用。

  • GitHub API 渲染：调用 GitHub 官方 Markdown API，渲染结果与 GitHub 页面保持一致。
  • GFM 模式切换：支持标准 Markdown 和 GitHub Flavored Markdown 两种模式，一键切换。
  • 实时预览：渲染后的结果即时显示在预览区，包括代码高亮、表格、引用块等样式。
  • 自动清理 HTML：可选清理隐藏元素（aria-hidden、nofollow 等），整理 heading 结构，输出更干净的 HTML。
  • 自动生成目录：根据文章中的 h2-h6 标题自动提取并生成可点击的目录导航。
  • 复制 HTML：一键复制清理后的 HTML 源码，方便粘贴到博客或编辑器中。
  • 复制富文本：一键复制带格式的富文本，可直接粘贴到 Word、Notion、邮件等支持富文本的地方。
  • 自动保存：输入内容自动保存到浏览器 localStorage，刷新页面不丢失。
  1. 打开 Markdown 渲染器。
  2. 在编辑区粘贴需要渲染的 Markdown 文本。
  3. 根据需要勾选"使用 GitHub Flavored Markdown (GFM)"。
  4. 点击渲染按钮，预览区和 HTML 输出区会同步更新。
  5. 点击复制 HTML或复制富文本获取渲染结果。
tool markdown gfm html github-api converter
发布

二维码识别器：支持图片上传、剪贴板粘贴与摄像头扫码

二维码识别器是一款纯前端在线 QR 码识别工具，基于 jsQR 库实现。它支持图片上传、拖拽、剪贴板粘贴以及摄像头实时扫码四种方式，所有图片处理均在浏览器本地完成，不会上传到任何服务器，保护隐私安全。

  • 图片上传识别：点击或拖拽图片文件到识别区域，即可自动解析二维码内容。
  • 剪贴板粘贴识别：直接按 Ctrl / ⌘ + V 粘贴剪贴板中的图片，无需先保存文件。
  • 摄像头实时扫码：调用设备摄像头，持续扫描画面中的二维码，适合快速识别实物上的 QR 码。
  • 前后摄像头切换：支持在设备的前置与后置摄像头之间切换，适应不同扫码场景。
  • 双指缩放对焦：摄像头模式下支持双指捏合缩放画面，双击重置缩放，方便对准远距离或微小二维码。
  • UTF-8 中文支持：底层使用 TextDecoder('utf-8') 解码二进制数据，确保中文、日文等非 ASCII 字符正确显示。
  • 链接自动识别：识别结果若为 URL，自动渲染为可点击的超链接，一键跳转。
  • 一键复制结果：识别后点击"复制识别结果"按钮，快速将内容复制到剪贴板。
  • 纯前端隐私安全：所有图像处理在本地完成，图片不离开浏览器，无需担心隐私泄露。

二维码识别器依赖 getUserMedia 和 jsQR 库，建议使用 Chrome、Edge、Safari、Firefox 等现代浏览器。

tool qr-code scanner decoder browser jsqr camera
发布

二维码生成器：支持网址、文本与 WiFi 的在线二维码工具

一款纯前端在线二维码生成工具，支持为网址、文本和 WiFi 网络创建可扫描的二维码，可自定义样式、尺寸与颜色，并直接下载 PNG 图片。

  • 双模式生成：支持「网址 / 文本」和「WiFi 网络」两种二维码类型，一键切换
  • WiFi 二维码：输入 SSID、密码、选择加密方式（WPA/WEP/无），支持隐藏网络，手机扫码即可自动连接
  • 自定义样式：提供「方块」和「流体」两种视觉风格，流体样式采用自适应圆角与同心圆定位图案
  • 灵活尺寸：小 / 中 / 大 三档尺寸可选，适配不同使用场景
  • 颜色与边框：可自定义二维码颜色，并选择是否添加外圆角边框
  • 实时预览：调整样式、尺寸、颜色或边框后，二维码实时更新
  • 下载 PNG：一键下载高清 PNG 图片，可直接用于打印或分享
  • 复制图片：支持将二维码图片复制到剪贴板，方便粘贴到文档或聊天中
  • 中文支持：内置 UTF-8 编码处理，完美支持中文文本与中文 WiFi 名称
  • 纯前端运行：所有计算在浏览器本地完成，无需上传数据，保护隐私
  1. 打开页面，选择「网址 / 文本」或「WiFi」模式
  2. 输入对应内容（网址、文本，或 WiFi 网络信息）
  3. 选择样式、尺寸、颜色，是否添加边框
  4. 点击「生成二维码」
  5. 使用「下载 PNG」或「复制图片」保存结果

使用现代浏览器（Chrome、Edge、Firefox、Safari）可获得最佳体验。

tool qrcode generator wifi browser png
发布

高中英语词汇速记：卡片式背单词与复习工具

高中英语词汇速记是一款纯前端浏览器背单词工具，专为高考英语词汇复习设计。它采用卡片式翻转记忆，支持单词搜索、朗读、已会/未会标记、随机顺序和进度统计，所有学习状态保存在浏览器本地，无需安装、无需上传。

  • 内置高考词汇库：覆盖高中英语核心词汇，打开即用。
  • 卡片式记忆：大字显示单词，点击或按 H 键显示/隐藏中文释义。
  • 搜索跳转：顶部搜索框支持按英文单词或中文释义快速定位。
  • 朗读发音：基于 Web Speech API，点击单词或按空格即可朗读，支持语速调节和语音选择。
  • 已会/未会标记：按 K 标记已会、按 M 标记未会，分类管理学习进度。
  • 学习模式过滤：设置面板支持切换"全部""仅未会""仅已会"三种学习模式。
  • 随机顺序：按 S 或点击随机按钮打乱词汇顺序，强化记忆。
  • 自动朗读：开启自动模式后，切换单词自动朗读，解放双手。
  • 字母筛选：设置面板可按首字母筛选词汇，针对性复习某字母开头的单词。
  • 进度统计：顶部实时显示当前进度、已会数量和未会数量。
  • 学习状态本地保存：标记、设置、模式均通过 localStorage 保存，刷新不丢失。
  • 快捷键支持：空格朗读、← → 翻页、H 显隐释义、K 已会、M 未会、S 随机、A 自动、/ 搜索。
  1. 打开 高中英语词汇速记。
  2. 查看单词，不确定释义时按 H 或点击卡片显示中文。
  3. 熟悉的词按 K 标记已会，不熟悉的词按 M 标记未会。
  4. 需要听发音时按空格或点击单词/播放按钮。
  5. 想针对性复习未会单词时，打开设置切换为"仅未会"模式。
tool english vocabulary education flashcards browser memory

发布

扫雷：浏览器本地益智游戏

扫雷是一款经典的浏览器本地益智游戏。无需下载安装，打开网页即可游玩，支持简单、中等、困难三种难度，同时适配桌面端与移动端操作。

  • 三种难度可选：简单（9×9，10 颗雷）、中等（16×16，40 颗雷）、困难（30×16，99 颗雷），一键切换。
  • 首次点击保护：第一次点击永远不会踩到雷，确保开局安全。
  • 自动展开空区：翻开无雷的空白格子时，自动级联展开周围相邻区域。
  • 插旗标记：支持右键或长按标记疑似地雷位置，实时显示剩余雷数。
  • 双模式切换：移动端提供"点击翻开 / 点击插旗"模式切换按钮，操作更直观。
  • 长按插旗：移动端支持长按格子快速插旗，并伴随触觉反馈（若设备支持）。
  • 计时器：从第一次点击开始计时，精确到秒。
  • 表情按钮：重置按钮随游戏状态变化（😊 / 😵 / 😎），点击即可重新开始。
  • 动画效果：翻开格子、踩雷爆炸、胜利庆祝均配有流畅的 CSS 动画。
  • 彩色数字提示：周围雷数 1~8 分别用不同颜色显示，便于快速判断。
  1. 打开 扫雷。
  2. 选择难度（默认简单）。
  3. 点击格子开始游戏，首次点击安全无雷。
  4. 根据数字提示推理雷的位置，用右键或长按插旗标记。
  5. 翻开所有安全格子即可获胜，踩到雷则游戏结束。
  6. 点击表情按钮 😊 随时重新开始。
平台 翻开 插旗
桌面端 左键单击 右键单击
移动端 单击（翻开模式） 长按 0.5 秒 / 切换插旗模式后单击
tool game minesweeper puzzle browser
链接

Simon Willison 的博客 - Django创始人、AI工程极客

Simon Willison's Weblog 是开源社区和 AI 工程领域极具影响力的个人技术博客。它的创办者 Simon Willison 是著名的 Python Web 框架 Django 的联合创始人之一，同时也是开源数据分析工具 Datasette 的作者。

该网站在当前的 AI 和软件工程生态中具有风向标式的地位，其核心内容和特点可以概括为以下几个方面：

  • AI 辅助编程与 Agent 架构： 网站密集关注 LLM 在实际开发中的落地，近期频繁探讨 MCP（Model Context Protocol，模型上下文协议）、Claude Code、以及将安全与权限控制（如 Auth Gateway、沙箱隔离）剥离出 Agent 上下文窗口的工程实践。
  • 本地大模型与端侧运行： 关注如 Qwen、GLM 等开源/开放权重模型的迭代，热衷于测试像 M2 Ultra 等本地硬件运行量化模型用于日常编码和工作流的实际表现。
  • 数据开源与工具生态： 围绕他自己主导的 Datasette 项目（一个用于探索和发布数据的 Python 工具），分享各类扩展插件（如权限控制组件 datasette-acl、应用托管 datasette-apps 以及结合大模型的 datasette-agent）的开发思考和发布日志。

Simon 的博客不仅仅是长篇技术文章，它更像是一个高度结构化的个人知识库：

blog simon-willison ai agent django
发布

坦克大战：纯前端经典坦克射击游戏

坦克大战是一款纯前端运行的经典坦克射击游戏，基于 HTML5 Canvas 构建。玩家控制坦克消灭所有敌人、保护基地，采用关卡制推进，每关敌人数量和强度逐渐增加，支持道具收集和丰富的自定义配置。

  • 经典关卡制玩法：消灭所有敌人即可进入下一关，每关难度递增。
  • 6 种道具系统：生命+1、火力提升（散射穿甲弹）、速度提升、护盾、炸弹（全屏清敌）、冻结敌人。
  • 完整音效系统：基于 Web Audio API 合成射击、爆炸、移动、通关、游戏结束等音效。
  • 自定义游戏配置：支持调整玩家速度、射击冷却、初始生命、敌人数量与速度、道具生成间隔、地图元素数量等参数。
  • 实时侧边栏状态：显示分数、关卡、生命值（心形）、敌人进度条、活跃道具计时、游戏时间、历史最高分。
  • 暂停与音效控制：游戏中可随时暂停/继续，一键开关音效。
  • 本地最高分记录：通过 localStorage 保存历史最高分，刷新不丢失。
  • 响应式布局：适配不同屏幕尺寸，三栏布局自动调整为纵向排列。
  • WASD / 方向键：控制坦克移动
  • 空格键：发射子弹
  • 回车键：开始游戏 / 重新开始
  • P 键：暂停 / 继续游戏
  • M 键：开关音效
  • 击毁敌人坦克：100 分
  • 通关奖励：500 分
  • 道具得分：20 分
  • 基地被摧毁：游戏结束
  • HTML5 Canvas
  • JavaScript（原生，无框架依赖）
  • Web Audio API（音效合成）
  • localStorage（最高分持久化）
  • 无后端、无依赖、纯静态页面
tool game tank-battle browser canvas
笔记

下午折腾了两个纯前端二维码工具：一个识别器、一个生成器。记录下调试过程中踩过的几个坑，免得以后重复踩。

用的是 jsQR。识别英文二维码没问题，但中文二维码识别结果直接为空。

查了下，jsQR 返回的对象里有两个字段：

  • code.data：legacy 字符串，对多字节字符支持不好
  • code.binaryData：原始字节数组

正确做法是用 binaryData 配合 TextDecoder 按 UTF-8 解码：

function decodeQRData(code) {
  if (code.binaryData && code.binaryData.length) {
    const bytes = new Uint8Array(code.binaryData);
    return new TextDecoder('utf-8').decode(bytes);
  }
  return code.data || '';
}

图片识别和摄像头扫码两处都要走这个解码逻辑。

生成器中 qr.addData(value) 对中文支持不行，需要先做一次 UTF-16 到 UTF-8 的字节转换：

blognoteqr-codejavascript
发布

JSON 格式化 / 压缩：纯前端在线 JSON 处理工具

JSON 格式化 / 压缩是一款纯前端在线 JSON 处理工具，无需联网、无需上传数据，所有操作均在浏览器本地完成。支持格式化、压缩、转义与去转义，适合开发者在日常工作中快速处理 JSON 数据。

  • 格式化：将压缩的 JSON 文本一键展开为带缩进的可读格式，便于查看与调试。
  • 压缩：去除 JSON 中所有不必要的空格与换行，生成最小体积的 JSON 字符串。
  • 转义：将 JSON 对象序列化为转义后的字符串，方便嵌入代码或配置文件。
  • 去转义：将转义后的 JSON 字符串还原为原始内容，支持带引号或不带引号的输入。
  • 一键复制：处理结果可直接复制到剪贴板，无需手动选中。
  • 一键清空：快速清空输入与输出区域，方便处理下一段数据。
  • 实时错误提示：JSON 解析失败时，状态栏会显示具体错误信息，帮助定位问题。
  • 深色模式支持：自动跟随系统主题，也支持手动切换，长时间使用不刺眼。
  • 左右分屏布局：输入与输出并排显示，大屏对比查看更高效，移动端自动切换为上下布局。
  1. 打开 JSON 格式化 / 压缩。
  2. 将 JSON 文本粘贴到左侧输入框。
  3. 点击工具栏上的 格式化、压缩、转义 或 去转义 按钮进行处理。
  4. 处理结果即时显示在右侧输出框，点击 复制结果 即可复制到剪贴板。
  • HTML + CSS + JavaScript
  • 无后端、无依赖、纯静态页面
  • 支持深色模式与响应式布局
tool json formatter browser developer-tools

发布

研究 Simon Willison 的博客设计风格和内容组织方式

User: 研究这个网站设计的风格和功能：https://simonwillison.net/ 这里有许多不同类型的内容（如Link、TIL、Tool、Entries、Quotes、Notes、Guides等），它是如何融合到一起的。 https://wangjunjian.com/ 是我的博客，我想参考一下。 Kimi: 让我先浏览这两个网站，了解它们的设计风格和内容组织方式。 我已经仔细浏览了这两个网站。Simon Willison 的博客是一个非常经典的"个人知识流"设计，它将 Entries、Links、Quotes、Notes、Guides、TILs、Tools 等多种内容类型按时间线无缝融合，配合极简的排版和强大的标签系统。你的博客"军舰的日志"则是更传统的技术博客布局，内容质量很高，主要围绕 AI Agent、LLM 等技术主题。

在我深入研究并给出具体建议之前，想先确认几个关键问题：

  1. 你想借鉴的侧重点是什么？ 是 primarily 学习 Simon 的视觉设计风格和布局（极简、时间流、多种内容类型混排），还是想在自己的博客中也引入多种内容类型（如 Link、TIL、Quotes 等），还是两者都想？

你目前的博客是基于什么技术栈？ 比如 Jekyll、Hugo、Next.js、VuePress 等？

blog design analysis

本周 AI 新闻 20260619

本周主线：开源模型密集发布、SpaceX 600 亿美元吞下 Cursor、Anthropic Fable 5 遭美国商务部强制下线，智能体安全与监管同时升温。

  1. SpaceX 全股票收购 Cursor：这笔 600 亿美元的交易将 AI 编程工具市场进一步纳入马斯克生态，也标志着开发者工具成为巨头 AI 军备竞赛的制高点。
  2. Anthropic Fable 5 / Mythos 5 遭美商务部下线：因一句 "Fix this code" 触发出口管制，Dario Amodei 本周赴华盛顿谈判，事件持续发酵。
  3. 智谱 GLM-5.2 与月之暗面 Kimi K2.7-Code 相继开源：中国开源模型在 1M 上下文与编程专用模型上继续施压闭源 frontier。
  4. DeepSeek 完成首轮融资：超过 500 亿元人民币（约 74 亿美元）、估值突破 500 亿美元，继续刷新中国大模型公司的融资纪录。
  5. Agentjacking 攻击曝光：针对 Claude Code、Cursor、Codex 的假 Sentry 错误注入，85% 成功率，再次敲响智能体安全警钟。

一句话串起本周主线：模型开源、资本整合、监管收紧、安全反噬四条线同时加速，AI 行业正从能力竞赛进入治理与商业化并行的深水区。

6 月 16 日，智谱 AI（Z.ai）正式释放 GLM-5.

Anthropic智谱AICursorDeepSeekNVIDIA智能体监管融资