前端&AI技术双周刊-2024.06.28

前端技术

• Flow Charts with CSS Anchor Positioning
  CSS 锚点 API 不仅能用于弹出框和工具提示，还适用于使用 CSS 创建流程图表。这个教程介绍如何使用 CSS 的 Anchor Position API（锚点定位API）来允许仅通过 CSS 创建流程图和图表。

• New JavaScript Set methods
  在 Node 22+、Chrome/Edge 122+、Firefox 127+ 和 Safari 17+ 中，查找集合的交集、并集和差集，以及其他与集合相关的操作，都变得易如反掌。

• 12 Design Patterns in Vue
  尽管 Vue 的设计模式在大多数应用程序中都是存在的，但很少有文章专门讨论其设计模式。本文整理了 Vue 中的 12 种不同设计模式，并提供了简洁的示例。

• How Deep is Your DOM?
  你的 DOM 树有多深 - 保持关注 DOM 大小和深度至关重要，因为它奠定了其他运行时操作（如用户交互中通过 JavaScript 更新 DOM）的基准。本文通过实验探究 DOM 深度对页面性能有什么实际影响，并给出了一些优化建议。

• TypeScript 5.5 RC
  TypeScript 5.5 RC 与 beta 版本相比，新增了对 ECMAScript 新 Set 方法的支持，调整了正则表达式的检查规则，并新增了一些性能优化，这些优化可以在许多常见场景中加快构建速度。

AI 资讯

• Stability AI 开源 Stable Diffusion 3 Medium，在图像质量、文本内容生成、复杂提示理解和资源效率方面有了显著提升
  SD3 Medium 是 Stability AI 推出的最新、最先进的文本生成图像 AI 模型。该模型具有 20 亿参数，具有体积小、适合在消费级 PC 和笔记本电脑上运行的优点，所以普通人也可以将其部署到自己的电脑上使用。模型主要提升如下：1. 图像质量：生成的图像具有卓越的细节、色彩和光照效果；实现了照片般逼真的输出，尤其在手部和面部细节上有显著改进。2. 提示理解：能够理解涉及空间推理、构图元素、动作和风格长而复杂的提示。3. 文本质量：可精确控制文字，在拼写、字距调整、字形和间距上达到专业排版。

• Runway 正式发布全新 Gen3 模型，生成视频长达 10s 且具备更完善的可控性
  6.18 日，专为电影和图像内容创作者打造生成式 AI 工具的公司 Runway 发布了 Gen-3 Alpha 视频生成模型，可生成 10s 视频（大多数竞品是 5s），且涵盖丰富的可控性组件，其核心优势包括：1. 在运镜（近焦/超广）、画面质感媲美 Sora，更和工业级电影挂钩；2. 在功能多样性上超越 Sora，支持精准控制文字、运动刷（指哪儿动哪儿）、运镜控制、导演模式（多功能于一体使视频更可控）。

拓展阅读

• 多模态大模型幻觉解码方法 - OPERA
  由上海人工智能实验室（上海AI实验室）、中国科学技术大学、香港大学及香港中文大学联合提出的缓解多模态大模型幻觉解码方法 OPERA，受到学术界广泛关注，相关成果论文入选本届 CVPR Highlight 名单。 联合团队在研究中发现“过度信赖”（Partial Over-Trust），可能为当前大模型产生幻觉的一大“元凶”，并提出了 OPERA 解码方法。基于注意力惩罚与回退策略，OPERA 可在不借助外部知识并不引入额外训练的情况下，缓解多模态大模型的幻觉问题，更有易于在不同模型和架构上部署。

• 10 Years of Vue: the Past and the Future | Evan You | Vue.js Live 2024
  Vue.js 的创建者 Evan You 最近做了一个关于 Vue 10 年的演讲——回首过去，展望未来。

• Inline conditionals in CSS?
  CSS 工作组决定在 CSS 中添加内联 if()，许多人认为这是一个压倒性的积极进步，但社区也提出了很多问题。