网络 on Nekonull's Garden

基于 WebRecorder 和 MitmProxy 的图片手动抓取探索

Mon, 07 Oct 2024 13:58:00 +0800

最近收到任务，需要从某个站点下载一系列图片。首先当然是 F12 看下网络请求。这是一个无限滚动的瀑布流，图片地址本身是随机的（看起来文件名像是 uuid），所以没法直接遍历图片地址；此外每次滚动到底，都会触发一个获取下一页图片地址的请求，参数传的还是游标而不是页数，这又断绝了直接构造分页请求（例如 page=1）获取所有图片地址，再逐个拉取的念头。好在总图片数是有限的，大概在 2k 左右，每次下拉能拉回 50 条，所以手动抓取也不是不能接受。以下是两种手动抓取的思路。注：这里的手动抓取，指的是在浏览器前端通过模拟人类行为，无侵入且不对网站发起额外请求的抓取方式。

前置准备：AHK 翻页器

一个简单的小工具，每隔一段时间自动按 page down 翻页（建议提前 zoom out 调小页面比例，这样滚动起来效率更高）

AHK 翻页器代码

#Requires AutoHotkey v2.0

; 创建一个 GUI
MyGui := Gui()
MyGui.Add("Text", "x10 y10", "Auto Page Down:")
toggle := MyGui.Add("Checkbox", "x10 y30 vToggleState", "Enable")
MyGui.OnEvent("Close", (*) => ExitApp())
MyGui.Show()

; 设置全局变量以跟踪定时器状态
global keyHeld := false

; 定时器：每0.1秒检查一次开关状态
SetTimer(CheckToggleState, 100)

; 主循环
CheckToggleState()
{
 global keyHeld ; 声明 keyHeld 为全局变量

 if (toggle.Value) {
 if (!keyHeld) {
 ; 如果勾选了启用选项，并且哔哩哔哩窗口处于活动状态
 RandomDelayAndSendPageDown()
 keyHeld := true
 }
 } else {
 if (keyHeld) {
 ; 如果没有勾选启用选项，停止按键操作
 keyHeld := false
 }
 }
}

; 生成随机延迟并发送 Page Down 键
RandomDelayAndSendPageDown()
{
 ; 生成 500 到 1000 毫秒之间的随机延迟
 RandomDelay := Random(500, 1000)
 SetTimer(PressPageDown, RandomDelay)
}

; 按下 Page Down 键
PressPageDown()
{
 global keyHeld ; 声明 keyHeld 为全局变量
 
 if (toggle.Value) {
 Send("{PgDn}")
 RandomDelayAndSendPageDown() ; 继续下一次按键
 } else {
 keyHeld := false
 }
}

思路1：WebRecorder

概述：用 WebRecorder 插件，录制网络请求（WebRecorder 插件会 hook 浏览器的 XMLHttpRequest 机制），dump 出 warc (Web Archive）文件，然后再解析文件，从中提取 mime 类型为图片的文件（或者知道 URL 格式的话也可以用 URL 格式匹配）。

限制：导出的时候存在文件大小限制（Chrome 下似乎是 2G，也取决于可用内存大小），总文件大小太大的话可能会有问题。

步骤：

安装 Chrome 插件 Webrecorder ArchiveWeb.page
浏览器插件栏找到 Webrecorder，点击 Start Archiving
跳转到需要抓取的网页
打开翻页器，一直往下滚动
完成后打开插件，点击 Stop Archiving
点击插件界面内的 Home 按钮，找到刚才的 Archiving Session，点击 Download，下载一个 wacz 文件到本地
修改扩展名为 zip，将其中的 archive/data.warc.gz 文件解压出来，得到 data.warc 文件
运行如下 Python 脚本，解析 warc 文件，并从中提取图片内容

Python 解析 WARC 代码

from warcio.archiveiterator import ArchiveIterator
import os
import re

# 定义一个函数过滤掉不支持的字符
def sanitize_filename(filename):
 # 定义不允许的字符
 invalid_chars = r'[\\/:*?"<>|]'
 # 替换这些字符为空字符，或者可以替换为下划线 "_"
 sanitized_filename = re.sub(invalid_chars, '_', filename)
 return sanitized_filename

# 提取 WARC 文件中的图片、视频资源
def extract_resources_from_warc(warc_file, output_dir):
 with open(warc_file, 'rb') as stream:
 for record in ArchiveIterator(stream):
 if record.http_headers:
 content_type = record.http_headers.get_header('Content-Type')
 if content_type and 'image' in content_type:
 # 获取资源文件的 URL
 url = record.rec_headers.get_header('WARC-Target-URI')
 print(url)

 # 获取资源文件内容
 content = record.content_stream().read()

 # 确定文件扩展名
 ext = 'jpg' if 'image' in content_type else 'mp4' if 'video' in content_type else ''
 if ext:
 # 生成文件名
 sanitized_url = sanitize_filename(os.path.basename(url))
 filename = os.path.join(output_dir, sanitized_url) + '.' + ext
 print("filename", filename)
 # 保存文件
 with open(filename, 'wb') as f:
 f.write(content)
 print(f"Extracted: {filename}")

# 示例用法
warc_file = 'data.warc'
output_dir = 'extracted_resources'
os.makedirs(output_dir, exist_ok=True)
extract_resources_from_warc(warc_file, output_dir)

思路2：MitmProxy

概述：安装 mitmproxy，设置浏览器代理指向 proxy，浏览时从响应中直接过滤出图片内容并保存到本地

限制：似乎没什么限制

步骤：

安装 mitmproxy
保存以下 Python 脚本为 save.py

mitmproxy save.py

import os
import re
from mitmproxy import ctx, http

# 定义文件保存目录
save_dir = "saved_media"

# 确保目录存在
if not os.path.exists(save_dir):
 os.makedirs(save_dir)

# 定义一个正则表达式，匹配Windows非法的文件名字符
def sanitize_filename(filename: str) -> str:
 # 替换非法字符为下划线
 return re.sub(r'[<>:"/\\|?*]', '_', filename)

def response(flow: http.HTTPFlow):
 # 获取响应的Content-Type
 content_type = flow.response.headers.get("Content-Type", "")

 # 判断是否为图片或视频类型
 if "image" in content_type:
 # 获取文件扩展名
 ext = content_type.split("/")[-1]

 # 从请求路径中尝试提取文件名，如果路径中没有文件名，则使用flow.id
 url_path = flow.request.path.split("/")[-1]
 if "." in url_path: # 判断路径中是否包含文件扩展名
 raw_filename = url_path
 else:
 raw_filename = f"{flow.request.host}_{flow.id}.{ext}"

 # 对文件名进行清理，确保符合Windows的文件名要求
 safe_filename = sanitize_filename(raw_filename)

 # 确定完整的保存路径
 filepath = os.path.join(save_dir, safe_filename)

 # 记录日志，打印保存的文件名和URL
 ctx.log.info(f"Saving file: {filepath} from URL: {flow.request.url}")

 # 保存文件内容
 with open(filepath, "wb") as f:
 f.write(flow.response.content)

 # 打印成功保存的日志
 ctx.log.info(f"Saved {filepath}")

运行 mitmproxy

# 需要先 cd 到 save.py 所在的目录
# 可以添加 --mode upstream:http://localhost:7890 来指定上游代理
mitmweb -s save.py

设置浏览器，指向 mitmproxy 代理（可能你需要 proxy switchyomega）
跳转到需要抓取的网页，打开翻页器
滚动到底部，且所有图片加载完成后，需要抓取的图片应该都已经保存到本地了

用 mitmproxy 让 ChatGLM 适配 OpenAI 接口

Sun, 29 Oct 2023 19:41:00 +0800

最近看到了几篇关于智谱 AI 的推送文章，才想起来他们的大模型（ChatGLM 系）已经上线好久了。回想 6B 模型刚公布的那会还在 AutoDL 上自己跑过，不过因为模型本身太小，所以其实能做的并不算多。注册了个开发者账户看了看文档，目前可以广泛使用的是 ChatGLM-Turbo，上下文窗口 32k token，定价 0.005 元/千token，还是很便宜的。更不用说因为 GLM 系模型以中文语料为主，所以同等长度的中文文本，用 GLM 的 token 消耗比用 GPT 系列的 token 消耗会小很多（测试下来大概在 4x 左右）。

官网的 Playground 玩了一会感觉还不错，生成的中文明显感觉更自然，没有 GPT 系那么浓烈的翻译腔，于是想着怎么接入到我自己用的客户端 Chatbox 中日常使用。Chatbox 有内置的 ChatGLM 支持，一般直接设置下 token 就可以了。但是因为我主要用的还是 GPT 系模型，而 Chatbox 又只能全局设置一个 API 服务器字段，所以如果要同时使用 GPT 和 ChatGLM 的话，还是得用之前提到的 mitmproxy，手动完成请求的中转（没有什么是加一个抽象层不能解决的）。这里用 mitm 方式让 GLM 适配 GPT 接口还有个额外的好处，那就是只支持 OpenAI 的第三方应用也可以自动支持 GLM 了（虽然我还没这么用过）。

和之前适配 OpenRouter 不一样，这次除了修改请求头，还要修改 SSE 响应体。不知道出于什么考虑，GLM 系列模型的响应事件和 GPT 系列的完全不同，修改起来还是有些复杂的。但总之调试了几个小时之后总算是改完了，代码在此：(不建议在生产环境使用，后果自负)

https://gist.github.com/jerrylususu/3ebcf6262d110da89ce58d1e8d55bc22

改请求头比较简单，修改如下：

换 host 和 path
换 Authorization 头：参考 GLM 开发文档的"鉴权"一节即可（注意这里要用 PyJWT 库，直接二进制安装的 mitmproxy 带的 Python 环境不支持安装包，需要走 pipx 安装，可参考官方文档）
消息列表（messages）修改：GLM 系里叫做 prompt，而且根据实测只能支持 user-assistant 交替，如果存在 system 或是有两个连续的 user 消息都会报错；这里稍微转换了下，把所有的非 user/assistant 消息都转成 user，然后手动连接下连续的同 role 消息，保证最后构造的消息列表是两个角色交替。
开启增量返回：默认似乎是全量返回，这里和 OpenAI 对齐，也改成增量

比较烦人的是改响应体，如下所示分别是 GLM 系的返回和 GPT 系的返回。可以发现 GLM 系列比较简单，只有事件类型、流 ID 和增量数据；GPT 系列就更复杂一些，返回的是个 JSON，里面还有嵌套结构。

# GLM
b'event:add\nid:8065135252561182716\ndata:\xef\xbc\x8c\n\n'
# GPT
b'data: {"id": "chatcmpl-8EymH9k9DS9iQQvIH3BguHaZqmib9", "object": "chat.completion.chunk", "created": 1698580913, "model": "gpt-3.5-turbo-0613", "choices": [{"index": 0, "delta": {"content": "?"}, "finish_reason": null}]}\n\n'

这里的改造思路其实很明确，先解析 GLM 的响应体，再据此拼装成 GPT 的相应格式，然后返回给应用就可以了，然而具体做起来还是有不少坑。

一开始想的是直接 decode 之后分行解析，后来发现不太确定是信道问题还是服务器问题，有的时候接收到的 SSE 事件只有一半（导致 utf-8 decode 失败），或者是两个事件被合并成了一个事件（一个 SSE data 里面有两个 add 事件）。用国内的术语来说这个算粘包？为了解决这个问题，先把行解析改成了正则解析，然后用补充了一个 buffer，如果发现这次的事件不完整就先扔 buffer 里，等下一个事件凑齐了再一起解析。
改完发现可以正常显示回复了，但是一直不能结束。还需要参考 OpenAI 的响应，额外补充 DONE 事件。
这样改完倒是基本能用了，但接下来发现还是不太对劲，生成代码的时候会多一个空格。这里看了响应数据，返回响应的确如此，于是在 data 开头两个空格的时候手动删掉一个。
然后发现生成 markdown 列表的时候换行消失了。查响应发现有时会有多个 data:，需要每个都处理。

目前的效果算是初步可用了吧，但是偶尔如果响应本身不完整（例如某个 SSE 事件返回了不完整的 utf8 编码字符串，下一个事件没有包含丢失的数据），那就会直接报错。不过考虑到实际频率比较低，重试的成本比较小，这里还算可以接受吧。

用 mitmproxy 重定向 OpenAI 请求到 OpenRouter

Sun, 22 Oct 2023 20:55:00 +0800

背景

最近在尝试使用一些基于 GPT 开发的工具，但遇到了一些网络相关的小问题。因为支付方式的限制，我自己并没有 OpenAI 的账户，实际使用的 API 是其他中间商（aka 二道贩子）转卖而来的， OpenRouter 就是其中一家。（实际上 OpenRouter 做的还更多一些，更像是 LLM 的聚合提供商，除了 OpenAI 也有其他家的 LLM，如 Claude 或是 LLama。）但是很多开源工具并未考虑到这种情况，基本上都是假定用户使用的就是 OpenAI 的官方 API 端点，所以很多时候并不能直接使用各类预先构建好的产物（例如 docker 镜像），而是得把源码 clone 下来，找到 import openai 或者是类似的调用发起位置，再在附近补充一些参数才能正常使用。手动改代码固然不是不行，但是总归还是有些繁琐，出问题的时候还额外增加了一个需要排查的环节。

问题

有没有更好的，更自动化的方式，例如在网络上加个代理层，在第三方工具无需修改的前提下，就可以将 OpenAI 的请求转换成 OpenRouter 的请求呢？

解决

那既然都写到这里了，当然是有的。这里的核心是一个 man-in-the-middle （mitm / 中间人）代理，在请求到达代理的时候，修改请求中的内容，使之符合我们的要求，之后再继续对外发送就可以了。mitmproxy 就是这样一个工具。当然它的功能远不止修改请求，在完善的 Python API 的加成下还能做很多其他的事。（同类的工具其他工具，如 Fiddler，应该也能实现，但方法就需要给位自行探索了。）以下就是实现本次需求的核心代码，应该不需要太多解释。

import json
from mitmproxy import http

def request(flow: http.HTTPFlow) -> None:
 # 只处理 HOST 为 api.openai.com，且请求体为 JSON 的 POST 请求
 if flow.request.host == "api.openai.com" and flow.request.method == "POST" and flow.request.headers.get("content-type", "").startswith("application/json"):
 try:
 flow.request.host = "openrouter.ai"
 flow.request.path = "/api/v1/chat/completions"
 flow.request.headers["authorization"] = "Bearer sk-xxxxxxxxxx" # token
 flow.request.headers["http-referer"] = "http://localhost:8080/my_great_app" # 应用标识
 request_data = json.loads(flow.request.get_text())

 # 甚至可以在这里切换模型
 # request_data["model"] = "anthropic/claude-instant-v1"

 flow.request.set_text(json.dumps(request_data))
 pass
 except json.JSONDecodeError:
 pass

# 需要声明回包支持 stream，否则会等待全部数据到达再返回给应用，无法实现 LLM 打字效果
def responseheaders(flow):
 flow.response.stream = True

启动 mitmproxy 时需要带上 Python 脚本参数，以及如果有上游代理则需要再声明：

mitmweb --mode upstream:http://{upstream_addr} -s openrouter.py

启动后会弹出 mitmproxy 的网页控制台，这时候就用第三方工具发请求试试了，一切顺利的话可以看到结果正常返回且网页上显示请求数据。如果出现问题也可以看命令行窗口的输出。如果第三方工具本身支持设置应用内代理（如 Chatbox）则最理想；不支持的话可以考虑设置系统代理、用 mitmproxy 的透明代理模式、或者用 Proxifer 这类工具来强制应用代理。