当前位置:首页 > 技术文章 > 正文内容

用n8n做AI工作流驱动网站出海赚美金2:网站截图与写 SEO友好的介绍

zonemu3个月前 (07-17)技术文章51

在数字化出海的浪潮中,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 协议。

相关文章

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、co...

前端React面试基础系列(React基础篇)

本文阅读8分钟,喜欢的小伙伴可以持续关系小编哦1. 什么是受控组件和非受控组件?受控组件像表单元素在用户输入时,像<input> <select>等元素需要绑定一个 chang...

vue 3 学习笔记 (八)——provide 和 inject 用法及原理

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传...

配置GitLab流水线和门禁系统(gitlab工作流)

在项目开发的过程中,为了保证代码质量,我们会使用诸多代码质量检测工具,这些工具或是在本地,或是在云端,虽然工具可以检测出异常问题,但是这些问题还是需要我们程序员来修复,如果我们不强制所有人必须修复异常...

html5你能把太阳系动态做出来,但是你能把月亮也做出来吗?

需要源码请评论后加前端学习群470593776课题:HTML5加原生js打造一个炫酷动态的太阳系简介:首先对于太阳系各大星球的运转关系,速度等资料,不然弄出来也是被喷的下场, 还有对于逻辑思维,算法的...

UEPlus for HTML5摩尔线程S50 GPU+统信UOS+海光CPU测试

UEPlus for HTML5案例测试。今天给大家带来UEPlus for HTML5的案例测试效果展示。测试环境由客户提供,处理器是海光3250,显卡是摩尔线程S50,8G显存。操作系统是统信V2...