Comfyui api图生图

一、comfyui添加图片上传节点

需要两个文件，

允许上传base64格式的图片和url格式的图片

 

init.py

from .image_load import LoadImageFromURLOrBase64, LoadMaskFromURLOrBase64

NODE_CLASS_MAPPINGS = {"Load Image From URL/Base64": LoadImageFromURLOrBase64, 
                       "Load Mask From URL/Base64": LoadMaskFromURLOrBase64,
                       #"Save Image As Base64": SaveImageBase64,
                       #"Save Temp Image As Jpeg": SaveTempImageJpeg
                       }
__all__ = ['NODE_CLASS_MAPPINGS']

image_loag.py

import base64
import random
import numpy as np
import torch
import requests
import json
import folder_paths
import os
# import piexif

from PIL import Image, JpegImagePlugin, ImageOps
from io import BytesIO

class LoadImageFromURLOrBase64:   
    @classmethod
    def INPUT_TYPES(s):
        return {"required": {
            "image": ("STRING",{"default": "https://aiiiinimg.oss-cn-shenzhen.aliyuncs.com/AiImages/2024-03-29/1e6d03aa68b34612961d8e0b695c94bd.jpeg"}),
        }}
    
    CATEGORY = "image"
    
    RETURN_TYPES = ("IMAGE",)
    FUNCTION = "load_image"
    def load_image(self, image):        
        if image.startswith(('http://', 'https://')):
            response = requests.get(image)
            img = Image.open(BytesIO(response.content))
        elif image.startswith('data:image/'):  
            _, base64_str = image.split(',', 1) 
            img = Image.open(BytesIO(base64.b64decode(base64_str)))
        else: 
            img = Image.open(BytesIO(base64.b64decode(image)))
        img = ImageOps.exif_transpose(img)
        if img.mode == 'I':
            img = img.point(lambda i: i * (1 / 255))
        img = img.convert("RGB")
        image = np.array(img).astype(np.float32) / 255.0
        image_tensor = torch.from_numpy(image)[None,]
        
        return (image_tensor,)
    
class LoadMaskFromURLOrBase64:
    @classmethod
    def INPUT_TYPES(s):
        return {"required": {
            "image": ("STRING",{"default": "https://aiiiinimg.oss-cn-shenzhen.aliyuncs.com/AiImages/2024-03-29/1e6d03aa68b34612961d8e0b695c94bd.jpeg"}),
        }}
    
    CATEGORY = "mask"

    RETURN_TYPES = ("MASK",)
    FUNCTION = "load_mask"
    def load_mask(self, image):
        if image.startswith(('http://', 'https://')):
            response = requests.get(image)
            img = Image.open(BytesIO(response.content))
        elif image.startswith('data:image/'):  
            _, base64_str = image.split(',', 1) 
            img = Image.open(BytesIO(base64.b64decode(base64_str)))
        else: 
            img = Image.open(BytesIO(base64.b64decode(image)))
        img = img.convert("L")
        mask = np.array(img).astype(np.float32)
        mask = np.where(mask > 127, 1, 0).astype(np.float32)
        mask_tensor = torch.from_numpy(mask)[None, None, ]
        return (mask_tensor,)

二、重启comfyui

三、修改api.py router.py   index.html

api.py

# 图生图
class ImgToImgModel(BaseModel):
    image: str
    prompt: str

@app.post("/imgGenerateImg", tags=["perfume bottle"])
async def imgGenerateImg(data:ImgToImgModel):
    return await process_imggenerateimg(data)

# 将 static 目录中的文件作为静态文件提供
app.mount("/static", StaticFiles(directory="demo/static"), name="static")

router.py

async def process_imggenerateimg(data):
    client_id = str(uuid.uuid4()) 
    prompt = load_json_template('demo/jsonFile/img2img_api.json')
    prompt["3"]["inputs"]["seed"] = random.randrange(10**14, 10**15)
  
    prompt["6"]["inputs"]["text"] = data.prompt 
    prompt["12"]["inputs"]["image"] = data.image
    images =await get_outputs(client_id,prompt)
    return images

index.html

 <h1>Upload Image and Enter Keyword</h1>
    <input type="file" id="imageInput" accept="image/*"><br><br>
    <input type="text" id="keywordInput" placeholder="Enter keyword"><br><br>
    <button id="submitButton" onclick="handleSubmit()">Submit</button>

    <div id="uploadedImageContainer">
        <h3>Uploaded Image:</h3>
        <img id="uploadedImage" src="" alt="Uploaded Image">
    </div>
    <div id="returnedImageContainer">
        <h3>Returned Image:</h3>
        <img id="returnedImage" src="" alt="Returned Image">
    </div>

 // 图生图
    document.getElementById('uploadedImageContainer').style.display = 'none';
        document.getElementById('returnedImageContainer').style.display = 'none';

        async  function getBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                // reader.onload = () => {
                //     // Remove the data:image/jpeg;base64, part
                //     const base64String = reader.result.replace(/^data:image\/jpeg;base64,/, '');
                //     resolve(base64String);
                // };
                reader.onerror = error => reject(error);
            });
        }

    async function handleSubmit() {
        const imageInput = document.getElementById('imageInput');
        const keywordInput = document.getElementById('keywordInput');
        const uploadedImage = document.getElementById('uploadedImage');
        const returnedImage = document.getElementById('returnedImage');
        const uploadedImageContainer = document.getElementById('uploadedImageContainer');
        const returnedImageContainer = document.getElementById('returnedImageContainer');

        if (!imageInput.files.length || !keywordInput.value) {
            alert('Please upload an image and enter a keyword.');
            return;
        }

        const file = imageInput.files[0];
        const base64Image = await getBase64(file);
        // console.log(file)
        // console.log(base64Image)
        uploadedImage.src = base64Image;
        // uploadedImage.src = `data:image/jpeg;base64,${base64Image}`;
        uploadedImageContainer.style.display = 'block';

        const requestData = {
            image: base64Image,
            prompt: keywordInput.value
        };

        try {
            const response = await fetch('/imgGenerateImg', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            });

            if (response.ok) {

                const data = await response.json();
                console.log(response)
                console.log(data)

                // that.image1 = "data:image/png;base64,"+response.data.images;
                returnedImage.src = "data:image/png;base64,"+data.images[0];
                returnedImageContainer.style.display = 'block';
            } else {
                console.error('Error:', response.statusText);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }