企业官网建设流程全解析

• 计算机视觉
• 深度学习

导读

本指南围绕 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 函数文件。这四份文件构成了一套不依赖任何前端构建工具的静态网页，全部逻辑都在浏览器端完成：

其中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 定义了三个与示例图片一一对应的数组：

• exampleIC：8 条图像分类 JSON，格式为[{"label":"can","probability":"0.99"}]；
• exampleOD：8 条目标检测 JSON，格式为[[{"top":"181","left":"48","bottom":"578","right":"427","label_name":"can","label_idx":"0","score":"0.99"}]]，包含边界框坐标与类别；
• exampleIS：8 条图像相似度 JSON，每条包含一组 512 维 DNN 特征向量，如[{"features":[...]}]。

这些 JSON 与script.js中的jsonParser()所解析的三种后端响应格式保持一致，这正是“示例”与“真实模型返回结果”共用同一套渲染管线的关键设计。

3. style.css：组件样式要点

style.css（共 159 行）定义了页面配色与关键组件样式：主色调.mainColor为#1D7D72青绿色，结果标题.result-font使用#165A67；canvas背景为#F2F7F6且宽度 100%；.img-wrap-ph以灰色虚线边框标识空缩略图槽位，.clearBtn绝对定位在缩略图左上角用于删除图片；.sImg/.eImg（示例与样例缩略图）限制 150px 并设置指针光标；.item用于图像相似度结果列表中“缩略图 + 文件名 + 距离值”的组合排版。

二、核心交互流程：script.js 的前后端协作

script.js 是整个前端的“后端”，它承担了图片采集、Base64 编码、API 调用、响应解析与 Canvas 渲染的全部工作。

1. 图片采集的三种来源

• Webcam：webcamActivate1()通过navigator.mediaDevices.getUserMedia({video:true})请求摄像头；点击 “Snap Photo” 把<video>当前帧绘制到离屏 canvas，再点击 “Use Image” 调用photoSave()存入图片槽位；关闭面板时webcamStop()会停止所有媒体轨道。
• Samples：handleSamples()把外部域的示例图以crossOrigin = "anonymous"方式加载后重绘到 canvas——源码注释解释了这一做法的必要性：否则 canvas 会被外部内容“污染（tainted）”，无法导出 Base64。
• Choose Files：handleFiles()通过FileReader.readAsDataURL()读取本地图片，限制一次最多处理 4 张；photoSave()会用resizeImg()把原图分别缩放为 150px 高的缩略图（用于预览）和 480px 高的全图（用于后续 API 请求）。

整个页面维护imgList（4 个槽位的占用状态）与imgListEmpty（剩余可用槽位数）；removeImg()负责从显示与内存中删除某张图并释放槽位；当槽位已满仍尝试添加时，displayError(1)会弹出“最多同时上传 4 张图片”的告警。

2. API 请求：Base64 载荷的 POST 调用

APIRequest()是整个 "Use My Model" 流程的出口：

1. 先用正则/^(ftp|http|https):\/\//校验 URL 合法性（APIValidation()），不合法则提示 “Invalid API url.”；
2. 将 4 个槽位中非空的 Base64 图片去掉data:image/...;base64,前缀（b64o[i].split(',')[1]），组装成{"data": [base64串, ...]}的 JSON 载荷；
3. 通过XMLHttpRequest以Content-Type: application/json头 POST 到用户输入的 API URL；
4. 请求期间禁用 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 结构自动分流到三种渲染分支：

渲染前统一调用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（当前固定为 5）；
• populateTable()把返回的[文件名, 距离]列表渲染成缩略图 + 文件名 + 距离（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，把模型部署为可被网页调用的 API：

1. 1_image_similarity_export.ipynb：计算并导出参考图像特征，打包为前端所需的 ZIP 文件；
2. 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. 3_deployment_to_azure_app_service.ipynb：把图像分类模型（ResNet18）部署为 Azure App Service，提供可被网页跨域调用的 API 端点；
4. （可选）4_train_and_deploy_custom_image_similarity_webapp.ipynb：微调 ResNet50 并部署自定义图像相似度 Web 应用。

网页侧的使用步骤（来自 UICode/readme.md 与 html_demo/readme.md）：

Use My Model 标签页：

1. 在文本框中输入模型的 API URL；
2. 选择图片来源并添加图片：Webcam（允许浏览器访问摄像头 → Snap Photo 拍照 → Use Image 添加）、Samples（点击示例图）、Choose Files（从文件浏览器选择本地图片）；
3. 点击 Upload 将图片发送到模型 API；
4. 在页面下方查看可视化结果。

See Example 标签页：

1. 点击想查看的示例图片；
2. 在下方查看图像分类、目标检测、图像相似度三个模型的结果（可通过复选框独立开关各模型的显示）。

3. 模型部署与 CORS 配置要点

从 3_deployment_to_azure_app_service.ipynb 的源码可以梳理出完整的部署链路：

1. 导出模型：用model_to_learner(models.resnet18(pretrained=True), IMAGENET_IM_SIZE)构建 fast.ai learner 并learn.export()导出为.pkl；
2. 注册模型：Model.register()把模型上传到 AzureML 工作区；
3. 编写评分脚本：score.py的init()用Model.get_model_path()加载模型，run()解析 Base64 载荷并逐张推理返回 JSON；
4. 构建环境：用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等系统依赖；
5. 打包镜像：InferenceConfig(entry_script='score.py', environment=cv_test_env)+Model.package()生成包含模型与依赖的 Docker 镜像，打印镜像位置（形如<myacr>.azurecr.io/<imagename>）；
6. 部署 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.md）

Q: 运行此代码必须要有 Azure 账号吗？A: 不需要。进入 UICode 文件夹，在浏览器打开index.html，无需 Azure 账号即可查看模型可视化示例（对应 "See Example" 标签页）。

Q: 可以使用自己的模型替换 notebooks 上传的模型吗？A: 可以，只需在网页中把 API URL 替换为自己的模型地址即可（前提是该模型接受本文所述的{"data": [base64...]}载荷并返回三类 JSON 之一）。

文件路径速查

使用限制说明

需要说明的是：页面固定提供 4 个图片槽位，单次最多处理 4 张图片；Webcam 功能依赖浏览器getUserMedia权限；图像相似度功能依赖前端本地加载参考特征 ZIP，因此首次调用需要联网获取这些数据文件；示例图片与示例输出均为静态预置数据，仅用于演示渲染效果，不代表模型的实时推理结果。该网页整体为静态前端，未内置鉴权机制，若将 API URL 对外暴露，建议结合 Azure App Service 自身的访问控制与安全策略使用。

• 计算机视觉
• 深度学习