gradio web ui

[AK391]

created a easy to use web ui with gradio

🛠️ PR Summary

_{Made with ❤️ by Ultralytics Actions}

🌟 Summary

Added Gradio Web Demo functionality for YOLOv5 object detection.

📊 Key Changes

• Gradio library added to requirements.txt to enable web-based demos.
• New file utils/gradio/demo.py containing code to set up a web interface using Gradio:
  • Two example images from the YOLOv5 repository are preloaded.
  • The YOLOv5s model is loaded from PyTorch hub for inference.
  • A function for running the model on the input image and rendering the output.
  • Gradio Interface setup includes descriptions, titles, and example images to guide users.

🎯 Purpose & Impact

• 🎨 Allows users to easily test YOLOv5's object detection capabilities through a web interface without needing coding skills or installation.
• 🚀 Provides immediate accessibility for demonstrations, enhancing the understanding and usability of the YOLOv5 model for both experts and non-experts alike.
• 🌐 Opens up opportunities for broader community engagement and feedback, potentially leading to further improvements in the model.

[github-actions]

👋 Hello @AK391, thank you for submitting a 🚀 PR! To allow your work to be integrated as seamlessly as possible, we advise you to:

• ✅ Verify your PR is up-to-date with origin/master. If your PR is behind origin/master an automatic GitHub actions rebase may be attempted by including the /rebase command in a comment body, or by running the following code, replacing 'feature' with the name of your local branch:

git remote add upstream https://github.com/ultralytics/yolov5.git
git fetch upstream
git checkout feature  # <----- replace 'feature' with local branch name
git rebase upstream/master
git push -u origin -f

• ✅ Verify all Continuous Integration (CI) checks are passing.
• ✅ Reduce changes to the absolute minimum required for your bug fix or feature addition. "It is not daily increase but daily decrease, hack away the unessential. The closer to the source, the less wastage there is." -Bruce Lee

[glenn-jocher]

@AK391 thanks for the PR! Really interesting, you can create a Gradio demo in very few lines of code it seems.

It looks like you've tried to increase the line thickness for larger images, maybe we can take a look at that plotting aspect. It's hard to create a one-size-fits all plotting routine because often times very large images may have many small objects that thinner lines are better suited to.

Also note that we don't want to add additional images directly to the repository, as this will increase the git clone package size for all users. Rather than adding content to the repo, you can host it directly on GitHub (by uploading it into an issue message), and then use the URL that github assigns the uploaded content. We do this ourselves for all README content, etc.

[glenn-jocher]

@AK391 also another question, can we place demo.py in either utils/gradio_demo.py or utils/gradio/demo.py?

[glenn-jocher]

@AK391 I updated demo.py a bit, and was wondering about your yolo() function. If the input is already a pil image, then there should be no need to save the image to disk and then read it from disk. If my understanding is correct then we should be able to reduce yolo() from:

def yolo(img):
    img.save("test_image_hack.png")
    img = Image.open("test_image_hack.png")
    results = model(img)  # inference
    os.remove("test_image_hack.png")

    results.render()  # updates results.imgs with boxes and labels
    for img in results.imgs:
        return Image.fromarray(img)

to:

def yolo(img):
    results = model(img)  # inference
    results.render()  # updates results.imgs with boxes and labels
    for img in results.imgs:
        return Image.fromarray(img)

Even after this simplification though I disagree with the return function within a for loop, as this would only ever return the first element, so assuming only 1 image is every passed at a time by the gradio app, this should be further reduced to:

def yolo(img):
    results = model(img)  # inference
    results.render()  # updates results.imgs with boxes and labels
    return Image.fromarray(results.imgs[0])  # return annotated PIL Image

[AK391]

@glenn-jocher thanks, I agree with the changes except the yolo function changes breaks the app
currently getting

I think saving it to disk was a way around that I tried

[AK391]

@glenn-jocher Also the label is too small to read is there a way to increase the font size?

[glenn-jocher]

@glenn-jocher thanks, I agree with the changes except the yolo function changes breaks the app
currently getting

I think saving it to disk was a way around that I tried

I believe the 'Image' object has no filename message is due to out of date YOLOv5 PyTorch Hub code that was fixed a few weeks ago. You can update your Hub cache like this to ensure you are using the latest code:

YOLOv5 PyTorch Hub Tutorial

Force Reload

If you run into problems with the above steps, setting force_reload=True may help by discarding the existing cache and force a fresh download of the latest YOLOv5 version from PyTorch Hub.

model = torch.hub.load('ultralytics/yolov5', 'yolov5s', force_reload=True)  # force reload

The labels themselves are actually the same size typically, it's your image that is larger. If you run inference on smaller images, i.e. 640 or 1280 pixels your labels will appear better sized.

[AK391]

@glenn-jocher thanks, made some changes for formatting and resizing the image to make the label more readable, I will also add the images here to use a url thanks for suggestion and remove from repo

[AK391]

@glenn-jocher added urls and removed button, should be good to merge? I will refresh app to test

[glenn-jocher]

@AK391 I can't merge additional media into yolov5 master. You have the two very large images directly in the main yolov5/ directory, as well as demo.py.

Please place demo.py in a new yolov5/utils/gradio/ directory, and delete bird.jpg and fox.jpg now that they are hosted online.

[AK391]

@glenn-jocher moved file and deleted images, also relauched however I tried both the hosted url from github and imgur and it breaks the links in the app

[AK391]

@glenn-jocher see screenshot

[AK391]

@glenn-jocher should be good to merge now example images are showing now with a workaround

[AK391]

@glenn-jocher is it ok to save the images in demo.py, should not be in repo unless demo.py is run

[glenn-jocher]

@AK391 I think for best demo performance you'd want to reduce your steps to the minimum viable steps, so saving an image and then loading it again right after is not good practice.

If there is a problem with inputting PIL Images or filenames directly then we should open up a bug report and fix it. Can you provide a minimum reproducible example of what is going wrong to help us better understand and diagnose your problem? Thank you!

[AK391]

@glenn-jocher do you mean for the hack to get around loading a file during inference or for loading example images?

[robmarkcole]

@AK391 the hack should not be necessary now if due to #2702

I understand your reasoning for wishing to put the images in the repo, since it simplifies the example. There are already a couple of example images at https://github.com/ultralytics/yolov5/tree/master/data/images that could be used

I would also suggest adding a new readme in this PR to briefly explain what gradio is and for

[glenn-jocher]

@AK391 I've updated demo.py with all changes I would recommend. Saving and loading should no longer be required as noted by @robmarkcole, and I've updated the images from parrots and foxes (COCO classes do not contain foxes) to the default YOLOv5 images.

I've also removed force_reload=True. This is meant to update your cache when it is out of date, but will be very very slow if run every time demo.py is run.
Please test these updates on your end.

[AK391]

@glenn-jocher thanks for the changes there was a error when syncing with the live app
Traceback (most recent call last):
File "utils/gradio/demo.py", line 1, in
import gradio as gr
ModuleNotFoundError: No module named 'gradio'
before gradio did not need to be installed in requirements.txt when I first ported it but since then it does need to be added to requirements.txt file
other than that looks good and thanks @robmarkcole for the suggestions

[AK391]

@glenn-jocher any update on this?