前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
返回 AI 情报前线
All News · 全部资讯9865
  • LLM 访问控制核心风险:过度授权凭证
  • IncidentCopilot:本地优先的 AI DevOps 调查框架
  • Node.js PDF 语义搜索:嵌入+重排+摘要实战
  • 如何阻止 AI Agent 死循环烧光预算
  • Papero:保留文档结构的开源PDF提取工具
  • Vibe-Coded应用修复还是重建?30分钟自检指南
  • 企业 AI Agent 安全接入 AWS 的四层防线
  • 用 CloudTrail + UA 标签追踪 Agent 的 AWS 操作
  • SCPs 作为 AWS 权限天花板:即使 Admin 也无法越过
  • 给 AI Agent 的 AWS 调用打上可追踪的 UA 标签
  • 企业级 AI 编程工具落地的威胁模型与身份困境
  • GitHub Copilot 可以操控桌面应用了
  • GitHub Copilot 9 月更新:Agent 驱动开发覆盖从实现到 PR 合入全流程
  • NVIDIA OpenShell:用形式化方法验证AI Agent权限策略
  • 分析型 Agent 权限设计:让恶意 Prompt 也拿不到敏感数据
  • 用S3向量为NVIDIA NeMo Agent实现持久记忆
  • Cohere Embed 5对比评测:企业搜索/RAG新选择
  • AWS Bedrock AgentCore 构建环境感知代理实战
  • AWS 多环境安全接入 Claude Platform 实战指南
  • GitHub Copilot 支持动态工作流:代码编排 AI 任务
  • 独立开发者实战:如何在无服务器GPU上构建目标追踪GIF字幕并控制成本
  • Cloudflare 开源决策模型 Clef 与 RL 微调平台
  • OpenID 发布 AI Agent 身份管理规范
  • LLM 应用选型指南:知识图谱还是向量 RAG?
  • 谷歌Gemini 4发布:价格仅为Astra一半
  • Olmo-core 3 发布:开源可扩展的大模型 MoE 训练基础设施
  • Stack Overflow 开发者调查十年回顾:AI 影响全解析
  • navette:594KB 无 Chromium 的 AI Agent 浏览器
  • 何时用Graph RAG:当关系数据是证据链的一部分
  • 开源项目也能用AI自动分流GitHub Issues了
  • apexe:用MCP协议把现有CLI安全接入AI Agent
  • AI Agent意外上传1.3万张企业内部截图至公开GitHub仓库
  • Cloudflare竞赛:邀请开发者构建AI时代的Git平台
  • JetBrains Air 开放 IDE 内 AI Agent EAP
  • OpenAI拦截模型推理窃取攻击,但相同手法在Azure上仍有效数周
  • AI 编程 Agent 意外泄露 13000 张截图
  • Rust 重写 Pi Agent:冷启动快 10.7 倍,内存缩减 7.6 倍
  • 本地RAG上下文压缩工具:裁减70% token且答案质量不降
  • 用企业私有数据构建专属生成式AI助手的实战指南
  • CodeGraph:AI编程助手的代码知识图谱工具
  • MCP官方参考实现合集发布
  • AI查日历0%准确率:时间工具将其提升至99%
  • 拦截AI Agent工具模式幻觉:Mock Gateway方案详解
  • VS Code 1.140:Copilot Agent支持多文件夹隔离与远程任务委派
  • Gemini 4 Argon发布:100万token输出能力
  • AI Agent 沙箱隔离可能被跨 Agent 蠕虫突破
  • 机器学习模型从Notebook到生产的完整路径
  • Agent Pipeline 设计核心:步骤与决策的本质区别
  • Perplexity 发布 pplx-embed-v2-context-9b:检索答案连带验证上下文的嵌入模型
  • R.A.H.S.I.框架:AI Agent执行完整性工程实践
  • Pi编码Agent一年唱衰MCP后拥抱:工程决策复盘
  • 已加载 51 / 9865
8.0
热点
AI SCORE
技术实践2026-10-01 23:35

独立开发者实战:如何在无服务器GPU上构建目标追踪GIF字幕并控制成本

dev.to · AI#Serverless#GPU#SAM
Editor brief · 编辑速览

作者使用SAM 2/3.1分割模型在Modal无服务器GPU上实现GIF物体跟踪字幕和背景替换,详解Browser→Lambda API→Modal的架构设计与成本控制策略。

文章思维导图
Knowledge map
拖拽缩放
Full translation

完整中文译文

我构建了 GifGadgets,一套运行在浏览器端的 GIF 工具集。其中大部分是枯燥的客户端工作,但有两个功能不是:跟随 GIF 中物体移动的字幕,以及背景移除或替换。这两个功能都使用了无服务器 GPU(Modal)上的分割模型(SAM 2 和 3.1)。这篇文章讲述它们的实现方式,以及如何保持低成本运行和低维护。作为一个有日常工作的独立开发者,我希望把它搭好后能基本"撒手不管"(虽然要做到真正撒手不管还是很难的)。

跟随物体:点击 GIF 中的某个物体,字幕会逐帧追踪它。

移除或替换背景:点击主体,获取每一帧的遮罩,然后可以换一个新背景或留成透明。

其他所有功能(调整大小、裁剪、反转、格式转换、添加文字)都在浏览器中运行,文件永远不会离开设备。

架构

Browser → Lambda API → Modal。

  1. 浏览器请求 API 获取一个预签名的 S3 上传 URL,然后将 GIF 直传至私有存储。API 永远不会接触文件字节。
  2. Modal 上一个小型 CPU"代理"接收任务,然后启动一个独立的 GPU 函数。代理响应状态轮询,所以等待中的浏览器永远不会占用 GPU 资源。
  3. GPU 任务从 S3 读取 GIF,运行模型并将结果写回 S3。
  4. 浏览器轮询状态,下载结果,其余工作在本地完成。

返回遮罩,而非成品图

服务器返回每一帧的 gzip 压缩、位打包遮罩。所有合成操作(新背景、文字放置、编码)都在浏览器的 web worker 中进行。更换替换背景不需要再次调用 GPU,这才是最大程度节省成本的地方。

实时进度

GPU 任务将进度写入以 call ID 为键的 Modal Dict,这样 UI 可以显示"正在启动 GPU…"然后是"第 12 帧,共 80 帧"。如果写入失败,任务本身不会失败,UI 会回退到普通的"运行中"提示。

模型部署

追踪功能使用 L4 上的 SAM 2.1。背景移除使用 H100 上的 SAM 3.1。两者各自独立镜像、锁定依赖,升级一个不会影响另一个。模型权重在构建时 baked 到容器镜像中,所以冷启动从不等待数 GB 的下载。

保持账单可控

无服务器 GPU 会 scale 到零,这很好——直到某个功能突然爆红。按重要性排序的保护措施如下:

预付信用额度。硬性上限是 Modal 上的信用余额。如果用完,功能会降级,但不会继续计费。

DynamoDB 中的每 IP 配额,外加 WAF 速率规则。

Kill Switch。一个环境变量即可禁用分割路由,无需重新部署。

AWS 端的预算告警,设置成提前通知我。

预计算演示。示例 GIF 使用存储的结果,所以用户可以体验功能而无需消耗 GPU 算力。

以上都不是真正的全局上限,我在自己的文档中如实说明了这一点。我接受的失败模式是:AI 功能可能在繁忙的一天耗尽信用,所以 UI 会告知用户。

性能优化历程

一开始我尝试在 Lambda 上运行 SAM 推理,但速度极慢,用户体验很差(我自己测试和使用时就能感受到)。处理追踪帧需要超过一分钟。为了缩短时间,我迁移到 Modal 无服务器函数来利用 GPU,速度确实提升了。然而帧数更多的 GIF 仍然很慢,所以我对目标追踪的 GIF 按每秒 10 帧采样,效果仍然可以接受。

如果重来会怎么做的

目前项目有一个 src 文件夹存放前端构建产物,使用 jinja 构建 HTML 文件,然后放到名为 frontend 的文件夹中,同步到 S3 并通过 CloudFront 分发。

我觉得 src 和 build 可以更"DRY",但目前这东西能正常跑,我就不想动它了。

演示地址是 gifgadgets.com。演示中的背景功能有限制:[具体限制说明]。如果服务繁忙,示例 GIF 仍然可用。希望得到反馈,尤其是追踪漂移或遮罩错误的 GIF。

Original source

本文由 AI 翻译整理自 dev.to · AI,原文版权归原作者所有。

阅读英文原文
上一篇
GitHub Copilot 支持动态工作流:代码编排 AI 任务
下一篇
Cloudflare 开源决策模型 Clef 与 RL 微调平台