【腾讯云HAI域探秘】搭建一个永不宕机的本地SD文本生成图像应用--喂饭级高性能应用HAI部署stable diffusion webui 一键文生图

bashcd /root/stable-diffusion-webui
python launch.py --nowebui --xformers --opt-split-attention  --listen --port 7862

javascript{
     "denoising_strength": 0,
     "prompt": "puppy dogs",
     "negative_prompt": "",
     "seed": -1,
     "batch_size": 2,
     "n_iter": 1,
     "steps": 50,
     "cfg_scale": 7,
     "width": 512,
     "height": 512,
     "restore_faces": false,
     "tiling": false,
     "sampler_index": "Euler" 
}

javascript{
   "images": [...]，// 这里是一个base64格式的字符串数组，根据你请求的图片数量而定
   "parameters": {  ... },//此处为你输入的body 
   "info": "{...}"// 返回的图片的信息
}

javascript// 定义文生图请求函数
async function txt2Img() {
   // 每次请求之前清空浏览器的 localStorage 中的缓存
   txt2imgReqStorage.value = null
   txt2imgResultStorage.value = null
// 清空轮播图

txt2img_imgs.value = []
// 如果启用了 ControleNet 则将 ControlNet 相关组件中的参数填充到 文生图请求参数中

if (controlNetEnable.value === true) {

console.log(imgFileList.value)

if (imgFileList.value?.length === 0) {

message.error("ControlNet已启用，请上传图片")

return

}

if (controlNet_payload.value.module === '') {

message.error("ControlNet已启用，请选择预处理器")

return

}

if (controlNet_payload.value.model === '') {

message.error("ControlNet已启用，请选择模型")

return

}
  imgFileList.value?.forEach((value, index) => {
     if (index === 0) {
        controlNet_payload.value.input_image = value.thumbUrl || ''
     }
  })
  txt2img_payload.value.alwayson_scripts = {
     controlnet: {
        args: [controlNet_payload.value]
     }
  }

} else {

txt2img_payload.value.alwayson_scripts = {}

}
// 打印请求参数

console.log("文生图请求参数：", txt2img_payload.value)

// 将请求参数保存在浏览器的 localStorage 中

txt2imgReqStorage.value = txt2img_payload.value;

//开始请求

message.loading('正在请求...', 10)

// 文生图api调用

const resp = await axios.post('/sdapi/v1/txt2img', txt2img_payload.value)

// 打印请求结果

console.log("文生图响应结果：", resp)

if (resp.data) {

message.success('请求成功！')

// 提取请求结果中的图片

txt2imgRes.value = resp.data

// 定义一个临时数组，该数组将赋值给 txt2imgResultStorage

let tempArr = ref<string[]>([])

txt2imgRes.value?.images.forEach((value: string, index: number) => {

txt2img_imgs.value.push('data:image/png;base64,' + value)

// 临时数组中只存放2张图片，防止赋值给 txt2imgResultStorage 后超过5M（localStorage最大支持5M），抛出异常

if (index < 2) {

tempArr.value.push('data:image/png;base64,' + value)

}

})

//将提取的请求结果中的图片保存在浏览器的 localStorage 中，如果叠加显示每次生成的图片，请把以下三行代码的注释去掉即可

// if (tempArr.value.length > 0) {

//     txt2imgResultStorage.value = tempArr.value

// }

} else {

message.error('请求失败！')

}

}
// 获取文生图的采样方法

async function txt2ImgSampler() {

const resp = await axios.get("/sdapi/v1/samplers")

console.log("采样方法：", resp)

txt2ImgSamplerRes.value = resp.data

txt2ImgSamplerRes.value?.forEach((sampler: Txt2ImgSamplers) => {

txt2ImgSamplerOptions.value?.push({

value: sampler.name,

label: sampler.name

})

})

}
// 获取 ControlNet 的 Preprocessor 的值

async function controlNetPreProcessors() {

const resp = await axios.get('/controlnet/module_list')

console.log("ControlNet-Preprocessor：", resp)

controlNetModuleRes.value = resp.data

controlNetModuleRes.value?.module_list.forEach((module: string) => {

controleNetModuleSelect.value?.push({ value: module, label: module })

})

}
// 获取 ControlNet 的 Model 的值

async function controlNetModels() {

const resp = await axios.get('/controlnet/model_list')

console.log("ControlNet-Model：", resp)

controlNetModelRes.value = resp.data

controlNetModelRes.value?.model_list.forEach((model: string) => {

controleNetModelSelect.value?.push({ value: model, label: model })

})

}
// 该函数将在页面每次加载后进行调用

onMounted(() => {

// 页面加载后获取保存在浏览器的 localStorage 中的数据去填充组件的输入

if (Object.keys(txt2imgReqStorage.value).length !== 0) {

txt2img_payload.value = txt2imgReqStorage.value

}

if (txt2imgResultStorage.value.length > 0) {

txt2img_imgs.value = txt2imgResultStorage.value

}
// 调用获取文生图采样方法的函数

txt2ImgSampler()

// 调用获取 ControlNet 的 Preprocessor 的函数

controlNetPreProcessors()

// 调用获取 ControlNet 的 Model 的函数

controlNetModels()

})