FEDAY 2024

#frontend #conference #AI

Ling

大模型对于json的输出很好，但是对于前端展示，需要等待完整输出前端才能显示。 Ling 框架解决了ai 流式输出期间前端无法响应的问题。通过sse 实时流式返回，返回一个类似uri,delta的字符串，告诉前端应当更新json返回的哪个字段。

对于让模型的输出结构化，这个可以实践下，以及尝试下自己编排多个ai agent。

Ling对json的处理，确实解决了前端对于流式输出的json展示的问题，能很好的提升用户体验。

摘取一段Ling文档中对于json的处理的描述

For example, consider the following JSON format:

{
  "outline": [
    {
      "topic": "What are clouds made of?"
    },
    {
      "topic": "Why do clouds look soft?"
    }
  ]
  // ...
}

During streaming input, the content may be converted in real-time into the following data outputs (using Server-sent Events):

data: {"uri": "outline/0/topic", "delta": "clo"}
data: {"uri": "outline/0/topic", "delta": "uds"}
data: {"uri": "outline/0/topic", "delta": "are"}
data: {"uri": "outline/0/topic", "delta": "mad"}
data: {"uri": "outline/0/topic", "delta": "e"}
data: {"uri": "outline/0/topic", "delta": "of"}
data: {"uri": "outline/0/topic", "delta": "?"}
data: {"uri": "outline/1/topic", "delta": "Why"}
data: {"uri": "outline/1/topic", "delta": "do"}
data: {"uri": "outline/1/topic", "delta": "clo"}
data: {"uri": "outline/1/topic", "delta": "uds"}
data: {"uri": "outline/1/topic", "delta": "loo"}
data: {"uri": "outline/1/topic", "delta": "k"}
data: {"uri": "outline/1/topic", "delta": "sof"}
data: {"uri": "outline/1/topic", "delta": "t"}
data: {"uri": "outline/1/topic", "delta": "?"}

This method of real-time data transmission facilitates immediate front-end processing.

地址：ling.bearbobo.com

Open sumi

IDE template 如果需要实现一个cursor，只需要基于opensumi 完成ai module

Web AI

google web ai 的负责人进行介绍，没想到现在端侧的模型已经这么强大了，在演示中对webcam的应用比较感兴趣，可以做很多cool的应用，比如通过手势去比划，然后在显示出来的画面上实时的去划线，这样就可以实现一个实时的画板。

Web3D AIGC应用

Aigc 可能对web3d开发流程的改造 介绍一些web 3d相关的ai 算法和模型

midscenejs

如果不引入AI，哪些场景无法解决 自然语言to自动化结果 自动采集用户行为生成自然语言的命令 也许可以通过埋点数据采集用户行为，生成自动化ui 测试 也可以通过自然语言编写主流程测试,实现跨版本的测试用例

当前模型稳定性超出想象，模型plan的稳定性非常高，通过评测去收集bad case。搜集输入对输出的影响。

对于这个分享，有点想在业务中实践一下，之前也调研过e2e的自动化测试，但是没有实践过，因为觉得开发和维护成本太高，但是如果通过自然语言编写测试用例，然后通过模型生成测试用例，这样的话，可以大大降低测试用例的编写成本，也可以提高测试用例的覆盖率。最重要的是不需要维护复杂的选择器，只需要维护自然语言的测试用例。

Qwik

你甚至能看到一个法国人用中文给你做presentation，这个世界真是太神奇了，虽然他的中文很好，但是在说到一些细节的时候，就比较难听懂他想表达什么了。

毛雨乐分享了Qwik的Resumability。对于qwik这个框架，之前只是听说过，目前看来这个框架很强的。区别于RSC或者Next的hydration，qwik通过直接返回一个html，并且在html中包含了对应模块的js，避免了hydration在客户端中parse js的过程，提高了响应速度。

但是对于这个框架，我还是有点疑问，如果js文件拆分的过多，会不会导致html文件过大，从而影响首屏渲染速度。以及对于seo的支持怎么样。

Eslint flat config

anthonny 介绍了eslint 9.0 的新特性，flat config，以及一些未来的可能发展发现。

虽然演讲很棒，但是我被 Slidev 的效果给震撼到了，直接在ppt上改代码，然后直接运行，这个效果太棒了。

杂项

padding-left 赞助了贴纸，关键是前一天买的padding-left的贴纸才到hhh

padding left 贴纸

于是我mbp变成了这样 yujian's mbp

javascript developer javascript gonna eating the ai