NO. 12 · DEC 07, 2024 · 2 MIN

FEDAY 2024

FEDAY 2024 参会笔记,记录 Ling 流式 JSON、Web AI、midscenejs、OpenSumi、Qwik 等前端和 AI 产品技术启发。

FEDAY 2024

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

Think this is wrong?

Good. That is usually the better email.