如何创建一个AI原生的Web视频剪辑器

广告位招租
扫码页面底部二维码联系

大家好啊!好久没有更新WebCut的动态了,最近因为做AI短剧项目,比较少【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】时间写文章。而最近,正好看到另外一个视频【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】编辑器(原生软件)推出了AI原生能力,可本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。以通过对话来执行编辑,我就想,让WebC【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。ut接入AI是迟早的事,于是,我花了一点【本文受版权保护】转载请注明出处:www.tangshuang.net时间,准备为WebCut实现原生Agen【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。t功能。

【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。【转载请注明来源】

由于WebCut是Web视频剪辑框架,它本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net没有原生的系统调用能力,所以走CLI的路【作者:唐霜】本文作者:唐霜,转载请注明出处。是完全不通的。同时,我也希望把精力集中在【未经授权禁止转载】【本文受版权保护】Web上,而非往原生应用去切换。因此,我【版权所有,侵权必究】【本文首发于唐霜的博客】考虑的思路方向是:在Web上实现Agen【本文受版权保护】【版权所有,侵权必究】t能力。

未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。

先上图为敬,看看最终实现的效果:

【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。

在剪辑器的右侧,通过一个悬浮按钮,呼出A原创内容,盗版必究。【转载请注明来源】gent面板,在面板中,我们可以通输入自未经授权,禁止复制转载。未经授权,禁止复制转载。然语言来实现剪辑,而无需进行界面上的操作【版权所有,侵权必究】【版权所有,侵权必究】。当然,两者是串联起来的,界面上的操作(原创内容,盗版必究。未经授权,禁止复制转载。选中素材、游标位置),都可以成为Agen未经授权,禁止复制转载。【版权所有,侵权必究】t的上下文。最终,Agent会在LLM的【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】驱动下,帮我们准确的执行剪辑动作。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net

那么,实现它的原理是什么呢?接下来,就让著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】我们深入聊一聊。

转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net

首先,你需要了解,一个常见的通用的Age转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。nt是如何运作的。无论是什么形式的Age【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】nt,都遵循统一的执行模式,就是“工具调【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】用”。你只有理解和掌握了Agent如何调【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。用工具的完整流程,你才能在后来的所有设计【未经授权禁止转载】【转载请注明来源】中,作出正确的思考。

原创内容,盗版必究。【本文首发于唐霜的博客】未经授权,禁止复制转载。

上面这张示意图,充分向我们展示了“工具调【作者:唐霜】【未经授权禁止转载】用”模式的工作流程。

【未经授权禁止转载】未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】

客户端,也就是我们的Agent客户端,例【作者:唐霜】【本文首发于唐霜的博客】如Codex、我们的聊天应用程序等等,在原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net用户提出一个问题时,会将用户提出的问题,原创内容,盗版必究。转载请注明出处:www.tangshuang.net以及客户端支持的工具列表,一并提交给大模【本文受版权保护】原创内容,盗版必究。型。大模型在接收到包含了tools参数的【版权所有】唐霜 www.tangshuang.net【转载请注明来源】请求后,会在系统提示词的驱动下,根据用户【转载请注明来源】著作权归作者所有,禁止商业用途转载。的提问智能的抉择客户端是否应该执行工具。【作者:唐霜】转载请注明出处:www.tangshuang.net大模型会以 tool_calls 信息,转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。把要调用的工具名和参数,返回给客户端。客【本文受版权保护】【作者:唐霜】户端在接收到 tool_calls 响应未经授权,禁止复制转载。未经授权,禁止复制转载。后,就知道自己该执行工具调用了,于是拿着【本文受版权保护】【未经授权禁止转载】大模型返回的信息,在本地完成工具执行。当【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net完成工具执行后,客户端又把执行结果,与 【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】tool_call_id 进行绑定后,再原创内容,盗版必究。转载请注明出处:www.tangshuang.net次提交给大模型,大模型在接收到 role【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net=tool 的消息后,就知道工具执行成功【原创内容,转载请注明出处】【版权所有,侵权必究】了,需要看工具执行的结果,并结合用户已开【本文受版权保护】【本文首发于唐霜的博客】始的提问,告诉用户最终的结果。

【原创内容,转载请注明出处】【本文受版权保护】

这就是Agent最核心的最底层的最原始的未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。工具调用能力,没有这个能力,所以构建出来【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】的大厦,都是空中楼阁。

【转载请注明来源】著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。

接下来,我们需要在WebCut中实现一个未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。Agent,以及让WebCut原生支持A未经授权,禁止复制转载。未经授权,禁止复制转载。I。

原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有,侵权必究】

要怎么做呢?既然是“工具调用”,那么“工著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】具”就是基础,没有工具,一切都是免谈。所未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net以,要做的第一步,就是,把所有WebCu本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】t支持的操作,都提取出来,做成工具。

【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。【作者:唐霜】

一个视频剪辑器,可以有非常多的操作,除了【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】对媒体资源进行编辑之外,还有媒体库等附带【本文首发于唐霜的博客】【作者:唐霜】功能的操作等等。这其实是一个庞大的工程,【原创内容,转载请注明出处】未经授权,禁止复制转载。只能是分批次,按步骤提取工具,先把最常用【本文受版权保护】【原创不易,请尊重版权】的提取出来,一批一批的去实现。

【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

提取工具,并不是去把所有功能重新实现一遍【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】,而是对我们WebCut已有的接口进行一本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。次封装,封装为Agent便于调用的形式。【本文首发于唐霜的博客】【原创内容,转载请注明出处】这得益于我们WebCut原来的设计思路,【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。将UI和控制函数分开。

【未经授权禁止转载】转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】【原创不易,请尊重版权】

在WebCut中,我们基于Vue的pro【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】vide/inject,实现了一整套的全著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net局状态控制,所有的控制方法,都通过顶层的本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。useWebCutContext可以获取【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。,从而使得在创建Agent工具时,很轻松【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。的对各种处理操作进行封装,而无需再动UI转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。层任何代码。

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。本文作者:唐霜,转载请注明出处。

将顶层操作context的方法,封装为a【本文受版权保护】未经授权,禁止复制转载。gent tool,在提交给LLM去调用原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net执行,这样就完成了一个完整的调用loop【转载请注明来源】【版权所有】唐霜 www.tangshuang.net

著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。

怎么样,是不是很简单,思路上来说,真的是本文版权归作者所有,未经授权不得转载。【本文受版权保护】非常的容易。当然,在具体实现时,还是会有【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。一些小问题,还需要做细节上的处理。但是,【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】这充分说明了我们WebCut设计的正确性【转载请注明来源】本文版权归作者所有,未经授权不得转载。,这样的设计,才让整个系统可以获得最灵活【版权所有】唐霜 www.tangshuang.net【转载请注明来源】的扩展。如果你对WebCut的agent著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】功能也敢兴趣,可以到我们的仓库 github.com/tangshuan未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。g/webcut 中,切换到 feat/agent 分支【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。,了解具体实现。

本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net

2026-07-09 78

为价值买单,打赏一杯咖啡

本文价值0.78RMB