网站首页 > 技术文章 正文
在数字化出海的浪潮中,AI工作流正成为提升效率、降低成本的利器。本文作者通过n8n搭建了一个AI驱动的工作流,用于帮助网站出海并赚取美金。在第一部分介绍了如何连接Supabase数据库后,本文继续深入探讨如何实现网站截图以及生成SEO友好的介绍信息。
书接上回:用n8n做AI工作流驱动网站出海赚美金1:连接Supabase数据库
年初的时候我做了一个AI编程工具的导航网站,打算流量上来后就可以接谷歌广告赚美金:
https://www.aicoding.help/cn
设想是根据AI编程开发的流程来推荐每个阶段的效率工具:灵感与想法、原型与设计、编程开发、数据库与存储、部署上线、扩展能力、数据分析、内容管理、协作与运营
这是整个网站的后端处理逻辑:
需求描述
今天来解决第二个阶段:
- 1. 把submit表中待处理的网站,逐个处理
- 2. 打开网站截图
- 3. AI生成seo偏好的详情信息存放数据库
效果是这样:
每个网站的截图作为卡片封面,网站自带的标题作为卡片标题,同时生成短描述
每个卡片点进去后就是一个详情描述,这里也是希望谷歌收录的信息,所以需要SEO友好
网站截图
这个需求的核心就是网站截图,有 3种方式
1. 第一种是 本地部署python跑
例如tap4ai自带的后端就是用的pyppeteer,相当于调用Chrome去访问网址后,截图,核心代码
2. 第二种 是调用别人现成的API
目前测下来效果比较好、且免费的是 urlscan
这是它的文档地址
https://urlscan.io/docs/api/
能顺利截reddit的图,示例:
https://urlscan.io/liveshot/?width=600&height=400&url=https://www.reddit.com/
结构就是
https://urlscan.io/liveshot/?width=【宽度】&height=【高度】&url=【网址】
但测了几个网站,语言都是德语。如上图还会有一些遮挡,应该是设备设置的问题。
其他的,要么是被禁了,要么要付费。
例如用wordpress的预览功能,会限制被禁止,应该是因为服务器在国内的原因
https://s0.wp.com/mshots/v1/https://www.reddit.com/?w=600&h=400
其他的,例如 https://gugudata.com/,就要付费,效果未知,pass
3. 第三种,就是docker部署一个无头浏览器,通过端口的形式供n8n调用
具体参考:
https://community.n8n.io/t/automate-screenshots-pdfs-and-more-integrating-n8n-with-self-hosted-browserless-playwright-changedetection-io/53351
这种,说实话还是很麻烦,尝试了一下没成功,就先放弃了。
看下来效果最好的还是第一种方法,但工作流平台都有一个通病:无法运行复杂的 python 脚本。
所以解决方案是把第一种,也就是tap4ai原本就有的python调用playwright截图功能封装成api,供n8n调用。
这个也是我解决很多复杂功能的方案:先在 Cursor完成单独模块的开发,再打包成 fastapi,通过宝塔面板部署到服务器上,再打开端口权限给 n8n 调用 。
参考 cursor 的提示词:请新建一个脚本,然后帮我把@website_crawler.py中的网页截图的相关能力,单独写到一个脚本里,如果涉及到调用其他的脚本也把代码一起放进去这是网页截图的核心部分,你需要去分析还需要哪些:…调用`sequentialthinking`MCP工具去一步一步思考处理,确保不要影响到其他的功能代码
继续把代码封装成 fastapi 接口:继续优化把@website_screenshot.py 封装成fastapi接口,用户传入一个网址后,返回截图的url,包括云存储url、缩略图url
同时,我还让 cursor 写了一个 api 测试脚本,测完没问题,我才部署:
上传到宝塔面板,部署成API
插句题外话,部署服务器很推荐用宝塔面板,通过面板来操作,能省不少事。包括 n8n、dify 等的部署基本上都很丝滑。
1. 在宝塔面板新建文件夹
把关键文件,包括代码脚本、.env环境配置、requirements.txt等一起上传进去
2. 新建Python项目
在下图位置,填好信息即可。
3. 查看日志确保服务启动
4. 在线调试
fastapi 有自带一个接口文档同时还能在上面调试很方便:
例如我部署在3333端口,文档就在 http://ip:3333/docs
找到接口函数,点Try it out,并修改下面的请求参数
点Execute,下面Curl就是自动生成好的请求
下面Response boy我们看到返回200,数据正常
调通了,最后才是到 n8n 新建 HTTP Request 节点,确保能正常返回网站的截图信息:
至此,我们最麻烦的一步就解决了。
n8n工作流
接下来,就可以着手去新建工作流。
方便起见,我们继续沿用上次的工作流,在提交网站后,直接就把提交的信息拿来抓网站截图和写介绍。
如图,上面的就是上次的工作流,解决的是从用户的输入中解析出网址,并提交到数据库,等待爬取。
不同的是,我补充了一个提取多个网站信息的节点,方便用户同时提交多个网站,甚至是把一个多网站介绍的文章放进去,也能直接全部录入了。
下面的是这次新增的工作流,解决的是把用户提交的网站进行截图、生成SEO友好的详情。
对于网站截图,上一小节已经说了通过把python脚本部署成API后,新建http请求。
接下来看写网页详情的这个节点:
测试一下录入网站:https://www.reddit.com
数据库有了:
前端也有了:
详情页也写好了:
感兴趣可以进去看看:
https://www.aicoding.help/ai/Reddit
因为我服务器在海外,通过这样的形式,对于风控较高的Reddit也能正常截图,并不会出现拦截之类的。这也是为什么我要「多此一举」部署到线上的其中一个原因。
本文由人人都是产品经理作者【饼干哥哥】,微信公众号:【饼干哥哥AGI】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
猜你喜欢
- 2025-06-13 做seo网站优化关键词排名装B要有资本!
- 2025-06-13 网站SEO的基本套路,你造吗?(网站seo 教程)
- 2024-10-04 如何实现前端单页面应用(SPA) 前端页面怎么实现的
- 2024-10-04 实战:驴妈妈SEO全自动内链系统Python版
- 2024-10-04 天企网络:网站seo优化之前端代码优化分享
- 2024-10-04 web前端的进阶路线大剖析!初学者如何迅速“升级”!
- 2024-10-04 阿里架构师,关于大型前端项目架构设计的一些分享
- 2024-10-04 一个网站完整详细的SEO优化方案 seo_网站优化教程
- 2024-10-04 SEO策略:详解大型网站SEO优化策略与方案
- 2024-10-04 Web前端性能优化思路 web前端性能优化思路是什么
你 发表评论:
欢迎- 516℃Oracle分析函数之Lag和Lead()使用
- 514℃几个Oracle空值处理函数 oracle处理null值的函数
- 507℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 500℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 493℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 486℃【数据统计分析】详解Oracle分组函数之CUBE
- 467℃Oracle有哪些常见的函数? oracle中常用的函数
- 465℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端排序 (47)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)