5.0
关注
AI SCORE
技术实践2025-09-15 23:55
Real-Time AI Agent 挑战赛获奖案例
DEV Community · Varshith V Hegde#Agent#实战
Editor brief · 编辑速览
开发者赢得实时 AI Agent 竞赛后，构建应用程序展示成果。提供了 Agent 技术的实战参考。
开发者赢得实时 AI Agent 竞赛后，构建应用程序展示成果。提供了 Agent 技术的实战参考。
嘿，DEV 社区！👋
事情是这样的 ☕——我最近赢得了 Real-Time AI Agents Challenge（此处应有彩带 🎉）。作为一名有自尊的开发者，我的第一反应当然是向全世界分享这场史诗级胜利。然而，现实给我的暴击，比 JavaScript 的 undefined 报错还要狠……
恭喜由 n8n 和 Bright Data 赞助的 Real-Time AI Agents Challenge 获奖者！
想象一下：你赢得了一场挑战，兴奋得飘飘然，恨不得站在数字世界的屋顶上大声宣布。但问题是，你该分享什么？一条普普通通的获奖公告链接？这差不多就和在深色模式下盯着油漆变干一样有趣。
我试着分享了链接，但说实话——社交媒体上的链接，就像生日派对上的蔬菜。理论上它对你有好处，但没人会为此感到兴奋。我真正想要的是一种视觉化的东西，一种无须真的大喊，就能高呼“快看我，我干成了一件事！”的东西。
就在这时，我灵光一现——为什么不做一个工具，把无聊的获奖公告页面转换成精美、适合分享的卡片呢？因为很显然，我解决所有问题的办法都是：“为它开发一个 App。”😅
于是，DEV Challenge Winners Showcase 诞生了——一个比三份浓缩咖啡还要浮夸、却又同样不可或缺的工具！
放入两个 DEV.to URL → App 会说：“咖啡帮我拿一下。”☕ 获奖公告：https://dev.to/devteam/congrats-to-the-winners-<challenge-name> 原始挑战页面：https://dev.to/challenges/<challenge-name>
放入两个 DEV.to URL → App 会说：“咖啡帮我拿一下。”☕
获奖公告：https://dev.to/devteam/congrats-to-the-winners-<challenge-name>
原始挑战页面：https://dev.to/challenges/<challenge-name>
AI 驱动的解析 → Gemini AI 会像追最新八卦一样读完两个页面
AI 驱动的解析 → Gemini AI 会像追最新八卦一样读完两个页面
生成精美卡片 → 一件适合分享的杰作就此出炉
生成精美卡片 → 一件适合分享的杰作就此出炉
海量自定义选项 → 因为一种尺寸根本不可能适合所有人
海量自定义选项 → 因为一种尺寸根本不可能适合所有人
智能识别获奖者：随便给它一篇 DEV.to 获奖公告，它提取所有获奖者的速度，比你说出“npm install”还快。
搜寻徽章：自动找到并获取官方获奖徽章（毕竟，徽章本质上就是数字奖杯）。
丰富主题：四种主题任你选择，因为人的心情总会变化：
Modern：适合想在 LinkedIn 上显得专业的时候。
Modern：适合想在 LinkedIn 上显得专业的时候。
Retro：把怀旧值直接拉满（甚至配有像素字体！）。
Vertical：非常适合 Instagram 快拍（因为竖屏才是未来）。
Minimalist：适合追求少即是多的时候（不过，多也同样是多）。
React + TypeScript：因为我喜欢代码就像喜欢咖啡一样——类型必须够强。
Google Gemini API：AI 负责所有繁重工作，而功劳归我。
Tailwind CSS：适合想快速完成样式，又想让整个过程看起来很帅的时候。
html-to-image：把 DOM 转换成 PNG 魔法的无名英雄。
最酷的部分是什么？我使用 Gemini 解析获奖文章和挑战页面中非结构化的 HTML，从中提取：
🏆 获奖公告文章中的获奖者详细信息
🎖️ 挑战页面中的官方徽章图片
这就像拥有了一名超级聪明的实习生：它从不抱怨早餐时间还要阅读杂乱的 HTML，而且还能像数字侦探一样追踪徽章。
// Simplified version of the magic happening
const winnersData = await gemini.parseWinnersPost(winnersUrl);
const badgeUrl = await gemini.findChallengeBadge(challengeUrl);
// *chef's kiss* - structured JSON + badge URL comes back
这东西的可定制程度，比 Subway 三明治还高：
随意开启或关闭任何元素
像 Bob Ross 一样挑选颜色
像做室内装修一样调整尺寸
上传自定义徽章，因为品牌形象很重要
好吧，我当然可以说，这是为了整个 DEV 社区的共同福祉（其中确实有一部分原因是这样），但咱们还是实话实说 💯——我只是想用一种更酷的方式分享自己的胜利，而且很显然，我什么事都没办法用简单的方式来做。
但问题是——它最后还真挺有用！现在，任何人都可以把自己在 DEV 挑战中取得的胜利，变成配得上 Instagram 的内容。它就像一种让成果焕然一新的滤镜。
你不再需要分享一条平淡无奇、被人划过去的速度比服务条款还快的链接，而是能得到一张精美、个性化的卡片，让人停下手指并产生疑问：“等等，这是怎么回事？”
这就是“我赢了一个东西”与展示一张精美视觉作品之间的区别——后者表达的是：“我赢了一个东西，而且我还有设计能力来证明这一点。”
前往 devchallengewinners.varshithvhegde.in 亲自体验一下吧！我甚至准备了演示 URL，所以即使你还没赢得过挑战，也能直接试用（当然，赢得挑战本身也很有意思）。
我正在考虑添加更多主题，也许再来点动画，甚至可能支持其他平台……又或者，我会直接用它庆祝生活中的每一次小胜利。有人想要“我第一次尝试就编译成功了”纪念卡吗？
有时候，最好的工具恰恰来自最切身的挫败感。我想用更好的方式分享自己的胜利，于是干脆开发了一整个 App。这究竟算敬业，还是轻度痴迷——由你来判断！😄
不过，现在我们所有人都有办法，让自己在 DEV 上取得的成就看起来和实际感受一样酷。说真的，开发的本质不就是这样吗？解决问题——每次都用一个过度工程化的方案来解决。
P.S. 如果你最后用这个工具分享了自己的胜利，记得标记我！我就靠这种认可活着。另外，如果你发现了 Bug，请温柔地提交报告——我的感情比没有 flexbox 的 CSS 布局还要脆弱。🥺
P.P.S. 没错，我知道自己开发了一整个应用，只是为了让链接分享起来更好看。不，我不后悔。是的，这完全是正常的开发者行为。😎
你为了解决某个“第一世界开发者问题”，做过最酷的工具是什么？把它发在评论区吧——我特别喜欢看到大家用创意方案解决荒唐问题！
部分评论可能仅对已登录的访客可见。登录后即可查看全部评论。
如需采取进一步措施，你可以考虑屏蔽此人和／或举报滥用行为。