中文 | EN
-
aimg2code
是一款简单易用的图片生成代码的工具,利用了多模态大模型识别文本和图像的能力。 - 可以自定义模型,但需要注意你使用的模型需要支持以下能力:
- 兼容 OpenAI 接口
- 支持图像识别
- 支持生成代码的技术栈
HTML + CSS
HTML + Tailwind
Vue + Tailwind
环境要求:node>=18
- 你可以全局安装, 然后在任意目录中使用
aimg2code
【推荐】。
npm i aimg2code -g
- 你也可以下载npm包到你的当前工作目录中。
npm i aimg2code
- 或者你可以使用 npx 来使用
aimg2code
, 避免将npm包下载到本地。
npx aimg2code
- 在
package.json
的scripts
中新增指令"scripts": { "aimg2code": "aimg2code -i ./image.png" }
- 或者直接在命令行中执行脚本,你不需要在当前工作目录中新建
package.json
,目录中仅包含配置文件即可。全局命令使用npx aimg2code -i ./image.png
aimg2code -i https:/xx.png
命令行参数介绍:
-
-i
: 需要转换的图片,值为图片相对路径或者URL的字符串。支持解析本地图片和远程图片(http/https);支持传入多张图片,以,
分隔,例如 "./img1.png,./img2.png"。 -
--temperature
: 同调用模型时传入的参数temperature
,可自定义区间在[0, 1)
中的值。temperature 值越低,生成的内容越稳定和可预测,越高则生成的内容越有创造性和多样性。传参示例--temperature=0.1
,不传此参数默认值为0.95
。
配置文件介绍:
在使用
aimg2code
的当前工作目录中必须存在aimg2code.config.json
,aimg2code
会读取配置文件完成任务。
aimg2code.config.json
有以下字段:
Name | Optional | Description | Support CLI parameters |
---|---|---|---|
openaiApiKey | ❌ | 你使用的模型的API-KEY,必须 | - |
openaiModel | ✅ | 你使用的模型的模型名,例如 gpt-4o 。默认值:gpt-4o
|
- |
openaiBaseUrl | ✅ | 你使用的模型的网络访问地址,例如 https://api.openai.com/v1 。 默认值:https://api.openai.com/v1
|
- |
images | ✅ | 需要转换成代码的图片相对路径或URL的字符串数组,支持传入多张图片, 例如 ['img1.png', 'img2.png']
|
-i, 若命令行脚本中有此参数,则忽略该项配置 |
配置文件示例:
- 这是一个涵盖了全部配置的
aimg2code.config.json
文件,模型使用 通义千问 系列的qwen-vl-max
:
// aimg2code.config.json
{
"openaiApiKey": "你申请的API-KEY",
"openaiModel": "qwen-vl-max",
"openaiBaseUrl": "https://dashscope.aliyuncs.com/compatible-mode/v1",
"images": ["./image.png"]
}
- 最小配置,使用默认模型
gpt-4o
// aimg2code.config.json
{
"openaiApiKey": "你申请的API-KEY"
}
输出文件:
选择你要生成代码的技术栈,aimg2code
调用成功后,会在当前工作目录输出转换后的html文件,文件名格式为:output_当前时间.html
- 对于同一张或者同一组图片,你可以多次调用
aimg2code
来选择最优或者最合适的结果。 - 传入多张图片时,第一张图片建议是包含了整体的内容结构,第二张或者多张图建议是对第一张图片更详细的补充,例如局部特写。
- 当传入内容较多的图片,生成代码不准确时,可以将图片根据内容结构切分后传入,每次只转换某一块内容的图片,可以提高准确率。