AI绘图开源工具Stable Diffusion WebUI前端API调用

配景

本文紧张先容 AI 绘图开源工具 Stable Diffusion WebUI 的 API 开启和根本调用方法，通过本文的阅读，你将相识到 stable-diffusion-webui 的根本先容、安装及 API 环境设置；文生图、图生图、局部重绘、后期处理处罚等 API 接口调用；图像处理处罚开辟中常用到一些方法如 Base64、PNG、Canvas及 URL 相互转换、Canvas 颜色转换等。
AI 绘图工具如今市面上比力广泛使用的紧张有两款，一个是 Midjourney，它提供面向用户有好的操纵界面，文生图、图生图等功能非常强大，但是它是一款收费软件；另一个就是开源工具 Stable Diffusion, 同样具有强大的AI绘图和图片再创造本领，但是学习本钱和上手难度相对较大，不外由于它是开源的，如今有非常多的用户和开辟者，我们可以找到丰富的训练模子和学习资源。本文先容的 Stable Diffusion WebUI 就是基于 Stable Diffusion 的具有比力完满的可视化操纵界面的 AI 绘图开源工具，它的 github 访问所在是 github.com/AUTOMATIC11…。
   趁便一提，本文上方的 Banner 图就是使用 Stable Diffusion 天生的 😎
  使用体验

在正式开辟之前，我们可以先体验一下 Stable Diffusion WebUI 以及两个接口封装和操纵界面比力良好的 AI 绘图网站，相识文生图、图生图、后期处理处罚等根本操纵步调。

• 🔗 stablediffusionweb.com/WebUI
  
• 🔗 d.design
  
• 🔗 www.liblibai.com
  

环境设置

安装 Stable Diffusion WebUI

我们起首必要先在当地大概服务器安装摆设 Stable Diffusion WebUI，可以从Github克隆堆栈，然后按分析文档举行安装，对前端开辟来说安装流程非常简单，详细安装流程各人可以自行搜刮，如今网上已经有很多保姆级的教程，本文不再赘述。

安装完成后，在 Windows操纵体系中进入 stable-diffusion-webui 根目次，然后双击 webui-user.bat 文件即可开启当地运行服务，在欣赏器中输入 http://localhost:7860 加载如下所示的界面。在 txt2img 输入框中输入必要生图图像的的正向关键词和反向关键词，点击 Generate 按钮即可天生图像。

完成根本安装后，还可以安装界面汉化插件、关键字中文翻译插件、本身喜欢的风格模子等，都可以按照教程非常容易实现。
开启 API 功能

在 stable-diffusion-webui 根目次下找到文件 webui-user.bat，使用编辑器打开这个文件，然后在 COMMANDLINE_ARGS 设置项反面添加 --api。

1. set COMMANDLINE_ARGS= --lowvram --precision full --api --listen

复制代码

然后双击 webui-user.bat 重启服务，此时在欣赏器中输入所在 https://localhost:7860/doc，就能看到如下所示的全部接口文档了，我们可以从文档中找到必要接入的接口及详细参数。

   💡 我们还可以设置如上所示的 --listen 参数，如许就可以通过局域网访问 stable-diffusion-webui 的接口了。
  实现

文生图

文生图接口，可以通过向 stable-diffusion-webui 服务发送正向关键字、反向关键字、图片尺寸、采样步数等参数来调用AI本领天生图片。我们先来看看它有哪些可设置的 payload 参数选项。（暂时只用到反面写了解释的参数，根本上可以满足大部分文生图参数设置）

1. {
2.   "enable_hr": false,                 // 开启高清hr
3.   "denoising_strength": 0,            // 降噪强度
4.   "hr_scale": 2,                      // 高清级别
5.   "hr_upscaler": "string",
6.   "hr_second_pass_steps": 0,
7.   "hr_resize_x": 0,
8.   "hr_resize_y": 0,
9.   "hr_sampler_name": "string",
10.   "hr_prompt": "",
11.   "hr_negative_prompt": "",
12.   "prompt": "",                       // 正向关键字
13.   "styles": [
14.     "string"
15.   ],
16.   "seed": -1,                         // 随机种子
17.   "subseed": -1,                      // 子级种子
18.   "subseed_strength": 0,              // 子级种子影响力度
19.   "seed_resize_from_h": -1,
20.   "seed_resize_from_w": -1,
21.   "sampler_name": "string",
22.   "batch_size": 1,                    // 每次生成的张数
23.   "n_iter": 1,                        // 生成批次
24.   "steps": 50,                        // 生成步数
25.   "cfg_scale": 7,                     // 关键词相关性
26.   "width": 512,                       // 生成图像宽度
27.   "height": 512,                      // 生成图像高度
28.   "restore_faces": false,             // 面部修复
29.   "tiling": false,                    // 平铺
30.   "do_not_save_samples": false,
31.   "do_not_save_grid": false,
32.   "negative_prompt": "string",        // 反向关键字
33.   "eta": 0,                           // 等待时间
34.   "s_min_uncond": 0,
35.   "s_churn": 0,
36.   "s_tmax": 0,
37.   "s_tmin": 0,
38.   "s_noise": 1,
39.   "override_settings": {},             // 覆盖性配置
40.   "override_settings_restore_afterwards": true,
41.   "script_args": [],                   // lora 模型参数配置
42.   "sampler_index": "Euler",            // 采样方法
43.   "script_name": "string",
44.   "send_images": true,                 // 是否发送图像
45.   "save_images": false,                // 是否在服务端保存生成的图像
46.   "alwayson_scripts": {}               // alwayson配置
47. }

复制代码

根据必要的参数，在页面逻辑中，我们可以像下面如许实现，此时服务端会根据接口参数，一次天生4张对应的图。接口返回乐成之后，我们会吸收到一个包罗全部图片数据名为 images 的数组，数组项是格式为 base64 的图片，我们可以向下面如许转化为页面上可直接表现的图片。

1. const response = await txt2img({
2.   id_task: `task(${taskId})`,
3.   // 正向关键词
4.   prompt: 'xxxx',
5.   // 反向关键词
6.   negative_prompt: 'xxxx',
7.   // 随机种子
8.   seed: 'xxxx',
9.   // 生成步数
10.   steps: 7,
11.   // 关键词相关性
12.   cfg_scale: 20,
13.   width: 1024,
14.   height: 1024,
15.   // 每次生成的张数
16.   batch_size: 4,
17.   // 生成批次
18.   n_iter: 1,
19.   // 采样方法
20.   sampler_index: 'xxxx',
21.   // 采用的模型哈希值
22.   sd_model_hash: 'xxxx',
23.   override_settings: {
24.     sd_model_checkpoint: sdModelCheckpoint,
25.     eta_noise_seed_delta: 0.0,
26.     CLIP_stop_at_last_layers: 1.0,
27.   },
28. })
29. if (response.status === 200 && response.data) {
30.   try {
31.     const images = response.data.images;
32.     if (images.length === 0) return;
33.     data.imageUrls = images.map(item => `data:image/png;base64,${item}`);
34.   } catch (err) {}
35. }

复制代码

天生效果就是本文 Banner 图中的粉色长头发的 3D 卡透风格小姐姐 ✨ ，正向关键字大抵是 girl, long hair, pink，模子接纳的是 3dAnimationDiffusion_v10，其他参数可自行调治。本文后续实例的图生图、图优化都将接纳这张图作为参考图举行演示。

图生图

图生图接口，stable-diffusion-webui 将根据我们从接口传送的参考图，天生内容和风格雷同的图片，就像近来抖音上很火的瞬息全宇宙殊效一样，也可以将同一张图片通过选择差别模子转化为另一种画风。下面是图生图接口的详细 payload 参数，可以观察到根本上和文生图是一样的，多了一些与参考图片干系的设置，如 init_images。

1. {
2.   "init_images": [
3.     "string"
4.   ],
5.   "resize_mode": 0,
6.   "denoising_strength": 0.75,
7.   "image_cfg_scale": 0,
8.   "mask": "string",
9.   "mask_blur": 0,
10.   "mask_blur_x": 4,
11.   "mask_blur_y": 4,
12.   "inpainting_fill": 0,
13.   "inpaint_full_res": true,
14.   "inpaint_full_res_padding": 0,
15.   "inpainting_mask_invert": 0,
16.   "initial_noise_multiplier": 0,
17.   "prompt": "",
18.   "styles": [
19.     "string"
20.   ],
21.   "seed": -1,
22.   "subseed": -1,
23.   "subseed_strength": 0,
24.   "seed_resize_from_h": -1,
25.   "seed_resize_from_w": -1,
26.   "sampler_name": "string",
27.   "batch_size": 1,
28.   "n_iter": 1,
29.   "steps": 50,
30.   "cfg_scale": 7,
31.   "width": 512,
32.   "height": 512,
33.   "restore_faces": false,
34.   "tiling": false,
35.   "do_not_save_samples": false,
36.   "do_not_save_grid": false,
37.   "negative_prompt": "string",
38.   "eta": 0,
39.   "s_min_uncond": 0,
40.   "s_churn": 0,
41.   "s_tmax": 0,
42.   "s_tmin": 0,
43.   "s_noise": 1,
44.   "override_settings": {},
45.   "override_settings_restore_afterwards": true,
46.   "script_args": [],
47.   "sampler_index": "Euler",
48.   "include_init_images": false,
49.   "script_name": "string",
50.   "send_images": true,
51.   "save_images": false,
52.   "alwayson_scripts": {}
53. }

复制代码

在页面接口逻辑中，我们可以通过以下方法实现，其他参数和文生图都是一样的，我们只必要把参考图以 base64 格式添加到 init_images 数组即可。

1. const response = await img2img({
2.   // 正向关键词
3.   prompt: prompt,
4.   // 反向关键词
5.   negative_prompt: negativePrompt,
6.   // 初始图像
7.   init_images: [sourceImage.value],
8.   // 尺寸缩放
9.   resize_mode: 0,
10.   // ...
11. });

复制代码

我们将文生图示例中的图片作为参考图，然后将大模子切换为 墨幽人造人_v1030，就能得到如下图所示的真人写实风格的图片。

局部重绘

图生图 API 还可以实现图片局部重绘、涂鸦、重绘蒙版、高清放大、图像扩充等效果。本文中，我们简单解说以下怎样实现局部重绘功能。
要实现局部重绘功能，起首我们必要使用 Canvas 创建一个画布，然后通过鼠标移动在画布上涂抹出必要重绘的路径，在现实开辟时我们可以实现一个如下图所示的图片重绘编辑器，右侧图片黄色地域 🟨 是颠末画笔涂抹必要重绘修改的地域。涂抹功能可以通过以下代码简单实现，像擦除、画笔巨细颜色选择、打消重做等扩展功能可自行搜刮怎样实现。

1. <div>
2.   <canvas id="canvas"></canvas>
3.   <img src="your_image.jpg" id="image">
4.   <button onclick="clearMask()">清除遮罩</button>
5. </div>
7. <script>
8. var canvas = document.getElementById('canvas');
9. var image = document.getElementById('image');
10. // 设置canvas宽高与图像尺寸相同
11. canvas.width = image.width;
12. canvas.height = image.height;
13. var ctx = canvas.getContext('2d');
14. var isDrawing = false; // 是否正在绘制
15. var lastX = 0;
16. var lastY = 0;
17. // 鼠标按下事件处理程序
18. canvas.addEventListener('mousedown', function(e) {
19.   isDrawing = true;
20.   [lastX, lastY] = [e.offsetX, e.offsetY];
21. });
22. // 鼠标移动事件处理程序
23. canvas.addEventListener('mousemove', function(e) {
24.   if (!isDrawing) return;
25.   drawMask(e.offsetX, e.offsetY);
26. });
27. // 鼠标释放事件处理程序
28. canvas.addEventListener('mouseup', function() {
29.   isDrawing = false;
30. });
31. // 绘制遮罩函数
32. function drawMask(x, y) {
33.   ctx.beginPath();
34.   ctx.moveTo(lastX, lastY);
35.   ctx.lineTo(x, y);
36.   ctx.strokeStyle = 'rgba(0, 0, 0, 1)'; // 设置遮罩颜色（黑色）
37.   ctx.lineWidth = 20;                   // 设置遮罩宽度
38.   ctx.lineCap = 'round';                // 设置线条末端形状为圆形
39.   ctx.stroke();
40.   [lastX, lastY] = [x, y];
41. }
42. // 清除遮罩函数
43. function clearMask() {
44.   ctx.clearRect(0, 0, canvas.width, canvas.height);
45. }
46. </script>

复制代码

涂抹完成后，我们右键生存图片，可以得到如下图左侧所示的图片。但是 stable-diffusion-webui 必要的 Mask遮罩图是涂改地域为纯白色，非修改地域为玄色，且巨细必要和原图同等，如右侧图片所示。此时就必要将得到的左侧透明遮罩层转换为右侧必要的遮罩层图片。

Canvas 遮罩层转换方法可以通过如下方式实现，绘制 Mask 图片，Canvas 使用鼠标绘制玄色图案，导出图片时必要把空缺部分变为玄色，绘制线条的部分变为白色，而且必要转换成和原图雷同的尺寸。此中两个参数 _canvas 是必要转换的画布，_image 是涂抹的原图。此中用于获取图像原始尺寸的方法 getImageOriginSize 可以在本文末端方法汇总中查察

1. export const drawMask = async (_canvas, _image) => {
2.   return new Promise(async(resolve) => {
3.     const canvas = _canvas;
4.     const ctx = canvas.getContext('2d');
5.     const imageData = ctx.getImageData(0, 0, canvas.clientWidth, canvas.clientHeight);
6.     const imageDataContent = imageData.data;
7.     // 修改图像数据中的像素颜色
8.     for (let i = 0; i < imageDataContent.length; i += 4) {
9.       // 判断透明度是否小于阈值
10.       if (imageDataContent[i + 3] < 128) {
11.       // 将透明部分设置为黑色
12.         imageDataContent[i] = 0;
13.         imageDataContent[i + 1] = 0;
14.         imageDataContent[i + 2] = 0;
15.         imageDataContent[i + 3] = 255;
16.       } else {
17.         // 将线条部分设置为白色
18.         imageDataContent[i] = 255;
19.         imageDataContent[i + 1] = 255;
20.         imageDataContent[i + 2] = 255;
21.         imageDataContent[i + 3] = 255;
22.       }
23.     }
24.     // 将修改后的图像数据导出为图片格式
25.     const exportCanvas = document.createElement('canvas');
26.     exportCanvas.width = canvas.clientWidth;
27.     exportCanvas.height = canvas.clientHeight;
28.     const exportCtx = exportCanvas.getContext('2d');
29.     exportCtx.putImageData(imageData, 0, 0);
30.     // mask放大到和原图一致
31.     const size = await getImageOriginSize(_image);
32.     const finalMask = await scaleImage(exportCanvas.toDataURL(), size.width, size.height);
33.     resolve(finalMask);
34.   });
35. }

复制代码

然后我们将转换后的遮罩图以 base64 的情势作为 mask 参数添加到接口参数中，添加一些正向关键字等参数举行图生图接口哀求，返回效果和上述 API 都是一样的，终极就可以得到下面所示的图像，可以观察到被涂抹地域的花朵消散了 🌺。

1. const response = await img2img({
2.   init_images: [sourceImage.value],
3.   mask: data.mask,
4.   // ...
5. });

复制代码

   💡 本文实现中将用到非常多关于图像转换的方法，，比如PNG转Base64、URL转Base64、Canvas转Base64等，这些方法的详细实现将放在文章末端的汇总中。
  后期处理处罚

后期处理处罚接口，可以实现图片高清放大、裁切、扩充等功能，有批量和单图调解两种接口，如下所示是单图调解接口。我们先来看看单图优化 API 可以吸收的参数有哪些：

1. {
2.   "resize_mode": 0,
3.   "show_extras_results": true,
4.   "gfpgan_visibility": 0,
5.   "codeformer_visibility": 0,
6.   "codeformer_weight": 0,
7.   "upscaling_resize": 2,
8.   "upscaling_resize_w": 512,
9.   "upscaling_resize_h": 512,
10.   "upscaling_crop": true,
11.   "upscaler_1": "None",
12.   "upscaler_2": "None",
13.   "extras_upscaler_2_visibility": 0,
14.   "upscale_first": false,
15.   "image": ""                       // 原图
16. }

复制代码

其他

更多接口

stable-diffusion-webui 另有很多实用的 API 可以调用，比如可以通过进度查询接口及时获取到天生图片的进度、剩余时间、列队状态等、可以通过设置查询接口获取到设置信息、已安装的模子列表等；反向推理接口可以通过已天生的图片反推出图像信息、形貌关键字等。详细接口使用方法和参数都可以在 API 文档中查询。

实用方法

在做 Web 图片处理处罚应用时必要用到很多图片干系的实用方法，以下是一些简单汇总。
① Canvas转Base64/PNG

要将 Canvas 转换为 Base64 格式图像数据，可以使用 Canvas 的 toDataURL() 方法。该方法将返回一个包罗图像数据的字符串，此中包罗图像的范例，如 image/png 和 Base64 编码的图像数据。

1. // 获取 Canvas 元素
2. var canvas = document.getElementById("myCanvas");
3. var ctx = canvas.getContext("2d");
4. // 将 Canvas 转换为 Base64 格式的图像数据
5. var dataURL = canvas.toDataURL();

复制代码

② 图片URL转Base64

1. export const convertUrlToBase64 = src => {
2.   return new Promise(resolve => {
3.     const img = new Image()
4.     img.crossOrigin = ''
5.     img.src = src
6.     img.onload = function () {
7.       const canvas = document.createElement('canvas');
8.       canvas.width = img.width;
9.       canvas.height = img.height;
10.       const ctx = canvas.getContext('2d');
11.       ctx.drawImage(img, 0, 0, img.width, img.height);
12.       const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
13.       const dataURL = canvas.toDataURL('image/' + ext);
14.       resolve(dataURL);
15.     }
16.   });
17. };

复制代码

③ Base64转PNG

1. export const convertBase64ToImage = src => {
2.   return new Promise((resolve) => {
3.     const arr = src.split(',');
4.     const byteString = atob(arr[1]);
5.     const ab = new ArrayBuffer(byteString.length);
6.     const ia = new Uint8Array(ab);
7.     for (let i = 0; i < byteString.length; i++) {
8.       ia[i] = byteString.charCodeAt(i);
9.     }
10.     const file = new File([ab], generateRandomId(), { type: 'image/png' });
11.     resolve(file);
12.   });
13. }

复制代码

④ 获取图像原始尺寸

1. export const getImageOriginSize = (src) => {
2.   return new Promise((resolve) => {
3.     const image = new Image();
4.     image.src = src;
5.     image.onload = () => {
6.       resolve({
7.         width: image.naturalWidth,
8.         height: image.naturalHeight
9.       });
10.     };
11.   });
12. }

复制代码

⑤ 等比缩放Base64

1. export const scaleImage = (src, width, height) => {
2.   return new Promise((resolve) => {
3.     const image = new Image();
4.     image.src = src;
5.     image.onload = () => {
6.       const canvas = document.createElement('canvas');
7.       canvas.width = width;
8.       canvas.height = height;
9.       const ctx = canvas.getContext('2d');
10.       ctx.drawImage(image, 0, 0, width, height);
11.       resolve(canvas.toDataURL());
12.     };
13.   })
14. };

复制代码

另有上述文章中提到的将透明彩色 Canvas 转化为 stable-diffusion-webui 局部重绘所需的黑底白色图案方法等。
总结

本文紧张包罗的知识点包罗：

• stable-diffusion-webui 的根本先容
  
• stable-diffusion-webui 安装及 API 环境设置
  
• 文生图、图生图、局部重绘、后期处理处罚等 API 接口调用
  
• 图像处理处罚开辟中常用到一些方法如 Base64、PNG、Canvas及 URL 相互转换、Canvas 颜色转换等
  

   想相识其他前端知识或其他未在本文中详细形貌的AI干系开辟技能干系知识，可阅读我往期的文章。假如有疑问可以在批评中留言，假如以为文章对你有资助，不要忘了一键三连哦 👍。
  写在末了

感爱好的小搭档，赠送全套AIGC学习资料，包罗AI绘画、AI人工智能等前沿科技教程和软件工具，详细看这里。
​

AIGC技能的未来发展远景广阔，随着人工智能技能的不绝发展，AIGC技能也将不绝进步。未来，AIGC技能将在游戏和盘算范畴得到更广泛的应用，使游戏和盘算体系具有更高效、更智能、更机动的特性。同时，AIGC技能也将与人工智能技能细密团结，在更多的范畴得到广泛应用，对步调员来说影响至关紧张。未来，AIGC技能将继续得到进步，同时也将与人工智能技能细密团结，在更多的范畴得到广泛应用。
 

一、AIGC全部方向的学习蹊径
AIGC全部方向的技能点做的整理，形成各个范畴的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，包管本身学得较为全面。

二、AIGC必备工具
工具都帮各人整理好了，安装就可直接上手！

三、最新AIGC学习条记
当我学到肯定根本，有本身的明白本领的时间，会去阅读一些先辈整理的册本大概手写的条记资料，这些条记详细记录了他们对一些技能点的明白，这些明白是比力独到，可以学到不一样的思绪。

四、AIGC视频教程合集
观看全面零根本学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思绪，从根本到深入，照旧很容易入门的。

五、实战案例
纸上得来终觉浅，要学会跟着视频一起敲，要动手实操，才气将本身的所学运用到现实当中去，这时间可以搞点实战案例来学习。

​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金