import gradio as gr
from PIL import Image, ImageDraw
import yolov5
import json

model = yolov5.load("./best.pt")

def yolo(im):

    results = model(im)  # inference

    df = results.pandas().xyxy[0].to_json(orient="records")
    res = json.loads(df)

    im_with_boxes = results.render()[0]  # results.render() returns a list of images
    
    # Convert the numpy array back to an image
    output_image = Image.fromarray(im_with_boxes)

    draw = ImageDraw.Draw(im)

    for bb in res:
        xmin = bb['xmin']
        ymin = bb['ymin']
        xmax = bb['xmax']
        ymax = bb['ymax']
        draw.rectangle([xmin, ymin, xmax, ymax], outline="red", width=3)

    return [
        output_image,
        res,
        im,
    ]


inputs = gr.Image(type='pil', label="Original Image")
outputs = [
    gr.Image(type="pil", label="Output Image"), 
    gr.JSON(label="Output JSON"),
    gr.Image(type='pil', label="Output Image with Boxes"),
]

title = "YOLOv5 Character"
description = "YOLOv5 Character Gradio demo for object detection. Upload an image or click an example image to use."
article = "<p style='text-align: center'>YOLOv5 Character is an object detection model trained on the <a href=\"http://codh.rois.ac.jp/char-shape/\">日本古典籍くずし字データセット</a>.</p>"

examples = [
    ['『源氏物語』(東京大学総合図書館所蔵).jpg'],
    ['『源氏物語』(京都大学所蔵).jpg'],
    ['『平家物語』(国文学研究資料館提供).jpg']
]
demo = gr.Interface(yolo, inputs, outputs, title=title, description=description, article=article, examples=examples)

demo.css = """
.json-holder {
    height: 300px;
    overflow: auto;
}
"""

demo.launch(share=False)