import gradio as gr
from PIL import Image, ImageDraw, ImageFont
import io


# 定义一个函数，它接受一张图片和一些文本，返回一个 HTML 页面
def create_html_page(input_image):
    # 将输入图片转换为 Pillow Image 对象
    image = Image.open(input_image)
    # image = input_image
    # print(image.shape)
    # 创建一个新的 Pillow Image 对象，大小为原始图片大小加上文本高度
    new_image = Image.new('RGB', (image.width, image.height + 50), color = 'white')
    new_image.paste(image, (0, 0))
    draw = ImageDraw.Draw(new_image)
    # 定义字体、字号和颜色
    # font = ImageFont.truetype("arial.ttf", 36)
    color = (0, 0, 0)
    # 在图片下方绘制文本
    text = 'model output text'
    draw.text((0, image.height), text, fill=color)
    # 将带有图片和文本的 HTML 页面返回
    # output_html = '<img src="data:image/png;base64,{}">'.format(
    #     draw.getvalue().encode('base64').decode())
    # output_html += '<p>{}</p>'.format(text)
    return image

# Create Gradio input and output components
image_input = gr.inputs.Image(type='filepath', label="Input Image")
image_caption_checkbox = gr.inputs.Checkbox(label="Image Caption", default=True)
dense_caption_checkbox = gr.inputs.Checkbox(label="Dense Caption", default=True)
semantic_segment_checkbox = gr.inputs.Checkbox(label="Semantic Segment", default=False)
image_caption_device = gr.inputs.Radio(choices=['cuda', 'cpu'], default='cpu', label='Image Caption Device')
dense_caption_device = gr.inputs.Radio(choices=['cuda', 'cpu'], default='cuda', label='Dense Caption Device')
semantic_segment_device = gr.inputs.Radio(choices=['cuda', 'cpu'], default='cuda', label='Semantic Segment Device')
controlnet_device = gr.inputs.Radio(choices=['cuda', 'cpu'], default='cpu', label='ControlNet Device')

# iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface = gr.Interface(fn=create_html_page, inputs=[image_input], outputs=["image"])

iface.launch()