本文介绍了基于 Spring Boot 的 AI 智能评论审核与自动回复系统，实现评论的本地敏感词预筛选 + 多模态 AI 深度审核、状态机管理、异步任务调度以及上下文感知的自动回复。系统采用前端‑Controller‑Service‑AI 服务四层架构，利用正则缓存实现毫秒级本地过滤，调用多模态模型支持图文审核，并通过可配置的回复风格生成友好、专业或幽默的答案。通过 @Async 与线程池实现高并发下的非阻塞处理，提升审核效率和用户交互体验。

本项目实现了基于 Web 的 AI 对话机器人，嵌入博客页面，为读者提供基于文章上下文的智能问答。核心功能包括逐字打字机效果、暂停/继续、对话历史本地持久化、快捷常见问题以及响应式布局。技术上采用原生 HTML5 + CSS3 + JavaScript，无框架依赖；利用 Marked.js 解析 Markdown、Highlight.js 高亮代码、Font Awesome 图标，并通过 RESTful API 调用 AI 服务。系统分为用户界面层、交互逻辑层、数据处理层和服务接口层，采用状态机管理 AI 生成过程（idle、thinking、generating、paused、completed），实现状态统一更新。针对打字机与 Markdown 同步、暂停状态持久化以及多状态切换的难点，分别采用增量渲染、历史记录标记和单一状态变量管理等方案，确保交互流畅、数据可靠。

为博客底部的“每日一句”板块实现英文音频播放。需求包括点击播放、与页面风格统一、响应式兼容及播放状态提示。技术上，通过后端代理接口 `/api/daily-quote/voice` 调用有道词典每日一句 API，解决 CORS 跨域；前端新增圆形播放按钮，使用 CSS 区分默认与播放中状态（蓝‑粉渐变、脉冲动画），并编写 JavaScript 利用 HTML5 Audio API 实现获取音频 URL、播放/暂停、结束回调及错误处理。解决了跨域、DOM 加载时机和移动端样式适配等问题，最终在 PC 与移动端均呈现流畅的交互体验。整个过程涵盖后端代理、前端 UI 与音频控制、响应式设计等多个环节。

本文介绍在 Web 项目中实现自定义图片 Emoji 的完整方案。通过在 static/img/emoji 目录统一存放 PNG 表情，采用有意义的文件名并在 JavaScript 中维护路径和名称列表。核心实现包括：正则把 “[:表情名:]” 替换为对应的 <img> 标签展示；动态生成表情面板并实现点击插入编辑器；提交前将 <img> 再转回代码存入数据库。配套 CSS 确保内联显示和面板样式，并提供响应式、懒加载、最近使用记录及分类展示等进阶优化。该方案实现纯文本存储、易扩展、跨平台兼容且视觉统一。

本文详解在 Spring Boot + Thymeleaf 项目中实现博客侧边栏的热门文章和最新文章功能。通过只查询必要字段、使用 `@Cacheable` 缓存，实现一次 SQL（按发布时间倒序）获取数据，再在 Service 层和 Controller 中利用 Java 8 Stream 按浏览量排序取前 5 篇热门、直接取前 3 篇最新。前端采用 Thymeleaf 渲染列表，CSS 使用 sticky 定位保持侧边栏固定，媒体查询实现 PC 侧边显示、移动端隐藏，并通过颜色、圆点等视觉区分排名与最新。整体方案兼顾性能、响应式布局和用户体验。

本文介绍在个人博客中实现分享卡片的完整方案。首先阐述功能需求：弹出卡片、展示标题、摘要、时间、作者、二维码并可保存为图片，兼容 PC 与移动端。随后给出 HTML Overlay 结构、Canvas 绘制核心流程及双倍缩放高清处理，重点说明自定义文本换行函数、使用 qrcode.js 生成二维码并异步绘制。接着展示简约 UI 设计、配色与字体规范，以及通过 DOM 获取文章信息并利用 Canvas toDataURL 实现图片下载。最后提供媒体查询实现响应式布局，并对渲染、二维码生成和字体加载进行性能优化。整体实现了一个视觉优雅、跨平台且易于保存分享的卡片功能。