计算机视觉深度学习【免费下载链接】computervision-recipesBest Practices, code samples, and documentation for Computer Vision.项目地址https://gitcode.com/gh_mirrors/co/computervision-recipes点击查看免费下载导读本指南围绕 computervision-recipes 仓库中 contrib/html_demo 的 UI 部分展开讲解 UICode 目录 下四个前端文件HTML / CSS / JavaScript的职责划分、页面交互逻辑与前后端调用约定。读完本文你将掌握如何在本机或 Azure Blob 存储上部署这套网页通过 Use My Model 标签页向任意已部署的 DNN 模型 API 上传图片并查看结果以及在 See Example 标签页查看图像分类、目标检测、图像相似度三类模型的示例输出。一、UICode 目录一份自包含的前端工程contrib/html_demo/UICode/readme.md明确指出该目录包含一个 HTML 文件以及独立的样式表和 JavaScript 函数文件。这四份文件构成了一套不依赖任何前端构建工具的静态网页全部逻辑都在浏览器端完成文件名职责example_imgs.js静态定义用于展示 DNN 模型示例输出index.html用户界面组件style.css网页组件的样式script.js驱动网页后端的 JavaScript 函数其中style.css与script.js必须与index.html位于同一目录否则网页无法完整渲染——这是文档中明确强调的部署约束。1. index.html页面骨架与两个核心标签页index.html 是基于 Bootstrap 4.4.1 构建的单页应用。页头导航栏包含一个 About 弹窗Modal主区域通过nav-tabs提供两个标签页Use My Model默认激活面向“测试自己部署的模型”场景。页面按步骤编号引导用户① 输入模型 API URL② 从 Webcam、Samples、Choose Files 三种来源选择最多 4 张图片对应页面上 4 个带清除按钮的缩略图槽位b64img-0~b64img-3③ 点击 Upload 按钮触发APIRequest()发起请求结果区域在下方resultsDiv0~resultsDiv3中展示。See Example面向“查看内置示例”场景。页面展示 8 张来自 Microsoft 图片集的示例缩略图example0~example7对应罐装食品、纸盒、牛奶瓶、水瓶等类别并提供 Object Detection / Image Classification / Image Similarity 三个复选框勾选状态由exampleModels()控制三个结果卡片resultsDiv8/resultsDiv7/resultsDiv9的显隐。从源码结构看示例图片与 UI 静态资源favicon、示例图均托管在cvbp-secondary.z19.web.core.windows.net的 Azure Blob 存储上页面底部按顺序加载 jQuery、Popper、Bootstrap、JSZip、JSZip-utils再加载本地script.js与example_imgs.js。2. example_imgs.js三类模型的预置示例输出example_imgs.js 定义了三个与示例图片一一对应的数组exampleIC8 条图像分类 JSON格式为[{label:can,probability:0.99}]exampleOD8 条目标检测 JSON格式为[[{top:181,left:48,bottom:578,right:427,label_name:can,label_idx:0,score:0.99}]]包含边界框坐标与类别exampleIS8 条图像相似度 JSON每条包含一组 512 维 DNN 特征向量如[{features:[...]}]。这些 JSON 与script.js中的jsonParser()所解析的三种后端响应格式保持一致这正是“示例”与“真实模型返回结果”共用同一套渲染管线的关键设计。3. style.css组件样式要点style.css共 159 行定义了页面配色与关键组件样式主色调.mainColor为#1D7D72青绿色结果标题.result-font使用#165A67canvas背景为#F2F7F6且宽度 100%.img-wrap-ph以灰色虚线边框标识空缩略图槽位.clearBtn绝对定位在缩略图左上角用于删除图片.sImg/.eImg示例与样例缩略图限制 150px 并设置指针光标.item用于图像相似度结果列表中“缩略图 文件名 距离值”的组合排版。二、核心交互流程script.js 的前后端协作script.js 是整个前端的“后端”它承担了图片采集、Base64 编码、API 调用、响应解析与 Canvas 渲染的全部工作。1. 图片采集的三种来源WebcamwebcamActivate1()通过navigator.mediaDevices.getUserMedia({video:true})请求摄像头点击 “Snap Photo” 把video当前帧绘制到离屏 canvas再点击 “Use Image” 调用photoSave()存入图片槽位关闭面板时webcamStop()会停止所有媒体轨道。SampleshandleSamples()把外部域的示例图以crossOrigin anonymous方式加载后重绘到 canvas——源码注释解释了这一做法的必要性否则 canvas 会被外部内容“污染tainted”无法导出 Base64。Choose FileshandleFiles()通过FileReader.readAsDataURL()读取本地图片限制一次最多处理 4 张photoSave()会用resizeImg()把原图分别缩放为 150px 高的缩略图用于预览和 480px 高的全图用于后续 API 请求。整个页面维护imgList4 个槽位的占用状态与imgListEmpty剩余可用槽位数removeImg()负责从显示与内存中删除某张图并释放槽位当槽位已满仍尝试添加时displayError(1)会弹出“最多同时上传 4 张图片”的告警。2. API 请求Base64 载荷的 POST 调用APIRequest()是整个 Use My Model 流程的出口先用正则/^(ftp|http|https):\/\//校验 URL 合法性APIValidation()不合法则提示 “Invalid API url.”将 4 个槽位中非空的 Base64 图片去掉data:image/...;base64,前缀b64o[i].split(,)[1]组装成{data: [base64串, ...]}的 JSON 载荷通过XMLHttpRequest以Content-Type: application/json头 POST 到用户输入的 API URL请求期间禁用 Upload 按钮并显示 spinner成功HTTP 200后调用jsonParser()解析响应失败则显示对应错误提示。这一载荷协议与后端score.py见 3_deployment_to_azure_app_service.ipynb的run()实现完全对应后端读取json.loads(raw_data)[data]中的每个 Base64 字符串经b64decode后交给 fast.ai 模型推理返回[{label: str(pred_class), probability: str(outputs[pred_idx].item())}]。3. jsonParser三类响应的一体化解析jsonParser()根据响应 JSON 结构自动分流到三种渲染分支响应特征判定依据渲染函数目标检测resp[0]是数组且首元素含top字段imgdetection()以红色strokeRect绘制边界框并在左上角填充类别标签图像分类resp[0]是对象且含probability字段imgclassification()在画布左上角绘制类别标签与置信度保留两位小数图像相似度resp[0]是对象且含features字段imgsimilarity()调用相似度计算渲染 Top-K 检索结果列表渲染前统一调用renderImage()把 Base64 图片按比例缩放居中绘制到结果 canvas 上保证画布与图片尺寸一致。这正是 See Example 标签页能够直接复用exampleIC/exampleOD/exampleIS的原因——示例数据与真实模型输出共用同一解析逻辑。4. 图像相似度前端就地计算的检索图像相似度是三类模型中唯一在浏览器端完成计算的功能。imgsimilarity(i, count, queryFeatures)的处理路径如下首次调用时parseSimFileNames()与parseSimFileFeatures()通过 JSZip 读取data/ref_filenames.zip与data/ref_features.zip本地模式或从cvbp-secondary存储桶加载example 模式得到参考图文件名列表与参考特征数组calcSimilar()用eucDistance()欧氏距离见 script.js计算查询特征与全部参考特征的相似度按距离升序排序后截取 Top-K当前固定为 5populateTable()把返回的[文件名, 距离]列表渲染成缩略图 文件名 距离Dist.: 0.xx的网格每项 150px 宽。若调用时不传查询特征queryFeatures为空则会从参考库中随机选取一张图作为查询图——这在 See Example 模式下用于演示无需查询图即可预览相似度检索效果。参考特征 ZIP 的生成与导出由 1_image_similarity_export.ipynb 完成该 notebook 把参考图 DNN 特征写入文本文件并压缩供前端下载。三、运行方式从本机直开到云端托管1. 最小运行路径无需 Azure 账号按 html_demo/readme.md 的 FAQ 说明如果不测试自己的模型无需 Azure 账号。直接进入contrib/html_demo/UICode目录在浏览器中打开index.html即可在 See Example 标签页查看三类模型的示例输出可视化。这是体验页面最快捷的方式。2. 完整运行路径含模型 API 测试要使用 Use My Model 标签页测试真实模型需按 JupyterCode/readme.md 的指引先在 computervision-recipes 的 conda 环境中依次执行以下 notebook把模型部署为可被网页调用的 API1_image_similarity_export.ipynb计算并导出参考图像特征打包为前端所需的 ZIP 文件2_upload_ui.ipynb把index.html、script.js、example_imgs.js、style.css及两个特征 ZIP 上传到 Azure Blob 存储容器需配置AZURE_ACCOUNT_NAME、AZURE_ACCOUNT_KEY、BLOB_CONTAINER_NAME见 notebook 中的参数单元格3_deployment_to_azure_app_service.ipynb把图像分类模型ResNet18部署为 Azure App Service提供可被网页跨域调用的 API 端点可选4_train_and_deploy_custom_image_similarity_webapp.ipynb微调 ResNet50 并部署自定义图像相似度 Web 应用。网页侧的使用步骤来自 UICode/readme.md 与 html_demo/readme.mdUse My Model 标签页在文本框中输入模型的 API URL选择图片来源并添加图片Webcam允许浏览器访问摄像头 → Snap Photo 拍照 → Use Image 添加、Samples点击示例图、Choose Files从文件浏览器选择本地图片点击 Upload 将图片发送到模型 API在页面下方查看可视化结果。See Example 标签页点击想查看的示例图片在下方查看图像分类、目标检测、图像相似度三个模型的结果可通过复选框独立开关各模型的显示。3. 模型部署与 CORS 配置要点从 3_deployment_to_azure_app_service.ipynb 的源码可以梳理出完整的部署链路导出模型用model_to_learner(models.resnet18(pretrainedTrue), IMAGENET_IM_SIZE)构建 fast.ai learner 并learn.export()导出为.pkl注册模型Model.register()把模型上传到 AzureML 工作区编写评分脚本score.py的init()用Model.get_model_path()加载模型run()解析 Base64 载荷并逐张推理返回 JSON构建环境用generate_yaml()从仓库根目录environment.yml裁剪出推理所需库pytorch、spacy、fastai、dataclasses再以Environment.from_conda_specification创建环境cv_test_env.docker.base_dockerfile追加libssl-dev、build-essential、libgl1-mesa-glx等系统依赖打包镜像InferenceConfig(entry_scriptscore.py, environmentcv_test_env)Model.package()生成包含模型与依赖的 Docker 镜像打印镜像位置形如myacr.azurecr.io/imagename部署 Web 应用Azure CLI# 创建资源组与 Linux App Service 计划 az group create --name myresourcegroup --location LOCATION az appservice plan create --name myplanname --resource-group myresourcegroup --sku B1 --is-linux # 用打包好的容器镜像创建 Web 应用 az webapp create --resource-group myresourcegroup --plan myplanname --name app-name --deployment-container-image-name packagelocation # 获取 ACR 凭据并激活 Web 应用 az acr credential show --name myacr az webapp config container set --name app-name --resource-group myresourcegroup \ --docker-custom-image-name packagename --docker-registry-server-url myacr.azurecr.io \ --docker-registry-server-user username --docker-registry-server-password password # 查看应用主机名 az webapp show --name app-name --resource-group myresourcegroup # 关键一步开启 CORS允许网页所在来源调用模型 az webapp cors add -n app-name --allowed-origins new-origin其中CORS 配置是前端能否调用模型的关键前提。文档 FAQ 专门回答了 CORS 相关的两类问题为什么调用模型/示例时出现 CORS 错误必须为 HTML 文件所在位置App Service启用 CORS具体操作见 3_deployment_to_azure_app_service.ipynb 第 3.F 节末尾如何为 Blob 存储账号启用 CORS在 Azure 门户打开存储账号 → 左侧 “设置” → 点击 “CORS”新增一条记录在 “Allowed origins” 列填入请求来源或*允许所有来源后保存。四、FAQ 与其他要点常见问题摘自 html_demo/readme.mdQ: 运行此代码必须要有 Azure 账号吗A: 不需要。进入 UICode 文件夹在浏览器打开index.html无需 Azure 账号即可查看模型可视化示例对应 See Example 标签页。Q: 可以使用自己的模型替换 notebooks 上传的模型吗A: 可以只需在网页中把 API URL 替换为自己的模型地址即可前提是该模型接受本文所述的{data: [base64...]}载荷并返回三类 JSON 之一。文件路径速查用途路径UI 文件清单与用法contrib/html_demo/UICode/readme.md网页入口contrib/html_demo/UICode/index.html前端逻辑contrib/html_demo/UICode/script.js示例数据contrib/html_demo/UICode/example_imgs.js样式contrib/html_demo/UICode/style.css项目级说明contrib/html_demo/readme.md配套部署 notebookscontrib/html_demo/JupyterCode/readme.md使用限制说明需要说明的是页面固定提供 4 个图片槽位单次最多处理 4 张图片Webcam 功能依赖浏览器getUserMedia权限图像相似度功能依赖前端本地加载参考特征 ZIP因此首次调用需要联网获取这些数据文件示例图片与示例输出均为静态预置数据仅用于演示渲染效果不代表模型的实时推理结果。该网页整体为静态前端未内置鉴权机制若将 API URL 对外暴露建议结合 Azure App Service 自身的访问控制与安全策略使用。赞分享计算机视觉深度学习【免费下载链接】computervision-recipesBest Practices, code samples, and documentation for Computer Vision.项目地址https://gitcode.com/gh_mirrors/co/computervision-recipes点击查看免费下载相关推荐Qwen1.5-14B安全部署最佳实践企业级应用方案Qwen1.5 14B安全部署最佳实践企业级应用方案 在当今AI技术飞速发展的时代大型语言模型的安全部署已成为企业数字化转型的关键环节。Qwen1.5 14终极指南computervision-recipes模型压缩与轻量化CV应用开发终极指南computervision recipes模型压缩与轻量化CV应用开发 想要在有限的计算资源下运行高效的计算机视觉模型吗computervisio计算机视觉深度学习抖音合集怎么批量下载一个免费工具的无水印上手指南抖音合集怎么批量下载一个免费工具的无水印上手指南 上次帮朋友把一套 50 集的 Python 教学合集一次性拉到本地用的就是 douyin download计算机视觉深度学习上一篇Laravel 开源项目指南下一篇Ink 开源项目教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考