[前端]将StableDifussion集成到前端项目的若干步骤

前言

由于在项目中继承了Meta的segment anything,用于图片的裁剪和分割,在此记录一下使用过程及注意事项。

Segment Anything在github有一个开源Demo,但是开源的Demo中说明较少,并且和官网的Demo相比功能较为简陋。

原理

Segment Anything Model (SAM) 是一种用于图像分割的人工智能模型,由 Meta 的 FAIR (Fundamental AI Research) 实验室于 2023 年提出。图像分割是指将图像中的每个像素分配给不同的类别,从而识别和分割图像中的不同对象或区域。SAM 的原理是使用一种称为稳定扩散 (Stable Diffusion) 的方法,将图像分割问题转化为一系列的二值化问题,即将图像中的某个对象与背景区分开来。SAM 使用一个编码器-解码器 (Encoder-Decoder) 网络,以及一个条件生成器 (Conditional Generator) 和一个分割器 (Segmenter) 来实现这一过程。编码器-解码器网络将输入图像编码为一个隐向量 (Latent Vector),然后解码为一个与输入图像相同大小的二值图像,表示对象的掩码 (Mask)。条件生成器根据用户提供的文本或语音提示,生成一个条件向量 (Conditional Vector),用于指定要分割的对象的类别或属性。分割器则根据隐向量和条件向量,生成一个分数图 (Score Map),表示每个像素属于对象的概率。通过对分数图进行阈值化,就可以得到最终的分割结果。SAM 的优点是可以在零样本 (Zero-Shot) 的情况下,根据任意的提示,分割任意的对象,而不需要额外的训练数据或标注。SAM 在多个图像分割任务上都表现出了令人印象深刻的性能,甚至超过了一些完全监督 (Fully Supervised) 的模型⁵⁶⁷。SAM 的代码和数据集 (SA-1B) 已经公开发布,以促进计算机视觉领域的基础模型 (Foundation Model) 的研究。(new bing写的很好)

SegmentAnythingModel

简要版:SAM使用Stable Diffusion进行图像分割,通过指定方法对图片进行编码,生成一个.npy格式的二进制文件,在客户端(前端)进行解码,解码出的数据可以输入进.onnx的的模型文件读出的模型(该文件放在前端,可以根据让算法人员进行修改,按给的格式生成即可),前端屌用wasm进行计算,计算出会返回一个图片的dataUrl,可已直接使用img标签的src进行渲染。

前端处理流程

读取.onnx模型 -> 读取图片 ->将图片上传到服务器 ->服务器进行编码,并生成二进制.npy文件 -> 前端对.npy文件进行解码,并和模型一块读入模型 -> 初始化渲染容器 -> 监听用户操作(点击或者悬浮) -> 将操作参数按指定格式传入模型 -> 模型运行并生成mask图片(dataUrl) -> 前端显示分割结果

运行Demo

项目文件结构如下所示,前端代码都在demo文件夹下面,前端的操作需要在该文件夹下打开终端

直接运行会提示报错,报错为找不到model文件夹:

但在新建文件夹之后会发现提示其他错误,这个错误刚开始很奇怪,后来在网络中发现是请求两个文件夹不对,没有找到.onnx模型文件和.npy编码文件,.onnx文件应该是在demo中跑出来的,但是本人暂时不会py,所以就后端跑了文件,并生成了一个.npy文件(由显示的图片生成):

最终文件结构如下:

注意事项

1、特别注意在demo/config文件夹中的打包及运行配置,注意复制文件的plugin和开发环境下设hi在的请求头,若不进行配置请求头,会提示获取wasm报错(可以直接问new bing),复制文件是将特定文件到特定文件夹,但要注意使用不同的框架搭建的项目所使用的复制插件以及to的参数写法不一样,在develop和production模式下的配置可能也不同,千万注意(之后会另开文章写):

2、由于demo实在是太过于简陋,以至于很多参数都不明白到底是什么意思,可以到ONNX的官网看文档,也可以直接看源码,或者直接将官网的demo源码搞下来研究研究

3、没了