本篇文章以模板匹配算法为例,使用Gradio构建一个基于opencv的模板匹配算法交互界面。体现出使用gradio构建界面的基本逻辑和简单的界面布局,附源代码。
1. 首先在你的python环境中安装opencv和gradio
pip install opencv-python gradio
2. 写一个demo脚本,比如叫demo.py
,其中源码如下:
import cv2
import gradio as gr
def temp_matching(src_img, x0, y0, x1, y1, match_method):
img = cv2.cvtColor(src_img, cv2.COLOR_RGB2GRAY)
temp = img[y0:y1, x0:x1]
th, tw = temp.shape[::]
rv = cv2.matchTemplate(img, temp, eval(match_method))
minV, maxV, minL, maxL = cv2.minMaxLoc(rv)
if match_method in ["cv2.TM_SQDIFF_NORMED", "cv2.TM_SQDIFF"]:
topleft = minL
else:
topleft = maxL
bottomright = (topleft[0] + tw, topleft[1] + th)
img = cv2.cvtColor(img, cv2.COLOR_GRAY2RGB)
cv2.rectangle(img, (x0, y0), (x1, y1), (0, 255, 0), 2)
cv2.rectangle(img, topleft, bottomright, (255, 0, 0), 2)
cv2.rectangle(src_img, (x0, y0), (x1, y1), (0, 255, 0), 2)
return [src_img, img]
if __name__=='__main__':
with gr.Blocks() as demo:
with gr.Column():
with gr.Row():
img = gr.Image(label="Ori IMG")
with gr.Column():
with gr.Row():
num1 = gr.Number(label="x0")
num2 = gr.Number(label="y0")
with gr.Row():
num3 = gr.Number(label="x1")
num4 = gr.Number(label="y1")
method = gr.Dropdown(choices=["cv2.TM_SQDIFF_NORMED", "cv2.TM_SQDIFF", "cv2.TM_CCORR", "cv2.TM_CCORR_NORMED", "cv2.TM_CCOEFF", "cv2.TM_CCOEFF_NORMED"], label="请选择匹配算法", value="cv2.TM_SQDIFF_NORMED")
btn = gr.Button(value='Match Now!')
with gr.Row():
img1 = gr.Image(label="Temp Box")
img2 = gr.Image(label="Detected Box")
btn.click(temp_matching, inputs=[img, num1, num2, num3, num4, method], outputs=[img1, img2])
demo.launch(server_port=7860)
3. 在python环境中执行python demo.py
运行demo,这里设置的端口号是7860,所以在浏览器地址栏访问127.0.0.1:7860
即可打开gradio界面。在这里可以上传图片,设置模板区域,选择模板匹配所用算法,然后可视化模板匹配结果。具体见下图,绿框表示设置的模板,红框表示匹配算法检测出的区域(右边图像中红框完全覆盖住绿框,选择其它算法可看到不重叠的效果)。
![][1]
[1]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fwww.i4bot.com%2Fusr%2Fuploads%2F2024%2F05%2F1275990191.png&pos_id=img-eX9PeYdz-1715914143867)