一、简单引导

• 由窗体中的文字标签类推。图片标签，简单理解就是把文字标签中的文字变换成图片的标签。由此，图片标签，需要准备图片。
• 后面的源码B是在源码A的基础上添加，同理，源码C则是在源码B的基础上添加。

二、步骤流程图

三、步骤详情

（一）创建一个窗体

1.源码A

需要创建一个常规窗体。简单设置窗体的位置、大小尺寸等。源码A如下：

/**内容：
  图片标签
*/
import java.awt.Container; // 容器

import javax.swing.*;

class Demo extends JFrame{// frame(框架)
	public Demo(){
		setBounds(200,200,500,400);// 窗体在桌面的坐标和窗体本身的大小
		// Operation(运算),Default(默认值),exit(出口）
		setDefaultCloseOperation(EXIT_ON_CLOSE);// 窗体点击×的关闭方式
		setVisible(true);// 窗体是否可见
	}
	public static void main(String[] args){
		new Demo();
	}
}

2.源码A运行效果

源码A编译运行结果如下：

（二）窗体里添加容器和标签

1.源码B

• 源码B在源码A的基础上添加。
• 在窗体里添加容器，同时创建标签，并且将标签放入容器之中。

源码B如下：

/**内容：
  图片标签
*/
import java.awt.Container; // 容器

import javax.swing.*;

class Demo extends JFrame{// frame(框架)
	public Demo(){
		setBounds(200,200,500,400);// 窗体在桌面的坐标和窗体本身的大小
		// Operation(运算),Default(默认值),exit(出口）
		setDefaultCloseOperation(EXIT_ON_CLOSE);// 窗体点击×的关闭方式
		// container(容器),pane(窗格；边),Content(内容)
		Container c=getContentPane();//窗体里添加容器

		JLabel l=new JLabel("展示图片的标签");// 创建一个新标签

		c.add(l);// 将标签l放到容器c中

		setVisible(true);// 窗体是否可见
	}
	public static void main(String[] args){
		new Demo();
	}
}

2.源码B运行效果

源码B编译运行效果如下：

（三）图片标签

1.放置图片

把准备好的图片放于class文件同目录里。如下：

2.源码C

• 在源码B的基础上添加。
• 指定好图片路径（位置）。由源码中的：
  Icon icon_1=new ImageIcon("java.png");// 方法二
  决定作用，就当看作图片在这句代码中。最后再把这个图片放到标签中，如此，便可以看到图片的显示效果。

/**：
  图片标签
*/
import java.awt.Container; // 容器

import javax.swing.*;

class Demo extends JFrame{// frame(框架)
	public Demo(){
		setBounds(200,200,500,400);// 窗体在桌面的坐标和窗体本身的大小
		// Operation(运算),Default(默认值),exit(出口）
		setDefaultCloseOperation(EXIT_ON_CLOSE);// 窗体点击×的关闭方式
		// container(容器),pane(窗格；边),Content(内容)
		Container c=getContentPane();//窗体里添加容器

		JLabel l=new JLabel("展示图片的标签");// 创建一个新标签
		
		/*
		*方法一
		* 这个方法用记事本当工具显示URL“找不到符号的错误”
		* 可以尝试用其他工具，比如：eclipse等
		* 尚未找到解决方法
		*/
		// URL(相当于路径),Resource(资源)
//		URL url_1=Demo.class.getResource("java.png");//获取图片路径url_1
//		Icon icon_1=new ImageIcon(url_1);// url_1是相同目录下图片的路径

		Icon icon_1=new ImageIcon("java.png");// 方法二
		l.setIcon(icon_1);//添加图片，icon(图标)，
//		l.setSize(30,30);// 设定标签大小，但不会改变标签的大小
		c.add(l);// 将标签l放到容器c中

		setVisible(true);// 窗体是否可见
	}
	public static void main(String[] args){
		new Demo();
	}
}

3.源码C运行效果

4.图片内容的补充说明

• 源码C中的方法一我还无法用记事本打完代码，然后用jdk的方式来运行。需要用一些专门的开发工具，比如eclipse这些才行。因此用方法二，将图片放于class文件同目录下的方法。
• 前面是将图片放置于class文件同目录下。现在则在此目录下创建一个src文件，然后把图片放于src文件中。
  
  

此时，要想保持原来的运行效果，则需要对源码中的

Icon icon_1=new ImageIcon("java.png");// 方法二

做一些改变。

变化如下：

Icon icon_1=new ImageIcon("src/java.png");// 方法二

如此便可保证原来的运行效果。也就是源码C的运行效果。

四、结语

有部分说明放于源码之中，因为在源码中的一目了然比在外的附和说明要好。坚持记录，现在记录一下思路流程，后面再捡起时便不会那么费力了。

五、定位日期

2020.10.28；22：31

博客：https://wenjie.blog.csdn.net/
作者：走在前方
介绍：计算机硕士，多年工作经验，技术和产品负责人。 多年推荐系统/NLP/大数据工作经验。 负责公司多个AI项目产品落地，包括文本分类、关键词抽取、命名实体识别、对话系统中语义理解、FAQ智能问答、知识图谱、图搜、推荐系统等

本文主要分享核心要点

• 图片标签问题
  • 什么是多标签图像分类
  • 多标签图像分类与多类图像分类有何不同
  • 构建多标签图像分类模型的步骤
  • 你了解哪些多标签图像分类模型结构
  • 多分类和多标签分类器和损失函数选择
  • 图片标签在推荐和搜索系统应用
• 不同图片业务应用
  • 二分类
  • 多分类
  • 多目标任务
  • 多标签
  • 以图搜图
• 多目标输出图片分类应用
  • 背景和数据介绍
  • 自定义数据集合网络模型设计
  • 模型加载预测
  • 在线预测以及数据可视化
• 多标签图片分类应用
  • 多标签和多分类区别
  • 二分类和多分类以及损失函数
  • 网络模型设计
  • 多标签预测
• 以图搜图应用
  • 图搜应用场景和原理
  • 开源向量检索引擎
  • 系统架构
  • 图片特征抽取和在线实时检索

图片标签问题

• 什么是多标签图像分类
• 多标签图像分类与多类图像分类有何不同
• 构建多标签图像分类模型的步骤
• 你了解哪些多标签图像分类模型结构
• 多分类和多标签分类器和损失函数选择
• 图片标签在推荐和搜索系统应用

不同图片标签差异

图片分类：二分类（binary-class classification）场景

图片分类：多分类（Multi-class classification）场景

以4类(猫、狗、兔子和鹦鹉)看下多分类特点：

每张图片只能被分类为猫、狗、鹦鹉或兔子。没有任何一个图像属于多个类别的情况

图片分类：多输出分类（Multi-output classification）场景

3类（电商时尚类）：性别+颜色+类型（ 每张图片都有3个固定的标签 ），固定输出图片多标签

图片分类：多标签图片分类（Multi-label classification）场景

多标签图片分类

①每个图像都属于一个以上的类

②每个图片出现的标签并不是固定的

③标签获取从标签池中选择最可能标签展示

以图搜图

• 基于图片标签搜索
• 基于图片特征搜索

多目标输出图片分类

背景介绍

随着电子商务产业快速发展，有大量的数据集等待着我们去搜集和研究。除了专业拍摄高质量产品图像，商品本身还拥有多个标签属性，用于描述商品各种特征。另外，还提供了关于商品特性的描述性文本

数据介绍：每个商品都有一个唯一编码（例如：ID =15970) ，商品信息主要字段信息如下所示

数据分析

自定义数据集**+**模型定义和设计

自定义数据集

①加载指定的标签数据

②计算标签种类和数量统计

③构建标签字典

④自定义数据集工具类

模型定义和设计

①加载预训练的网络（例如：mobilenet_v2,resnet,resnext. 用户可以自己选择进行实验）

②修改基础网络结构，原来网络最后一层仅支持一个分类标签输入

③每个标签属性损失函数选择cross-entropy loss （采用联合训练求loss）

模型数据验证混淆矩阵可视化

模型加载

model = MultiOutputModel(n_color_classes,

n_gender_classes,

n_article_classes)

model.to(device)

checkpoint = “./checkpoints/2020-09-21_15-59/checkpoint-000049.pth”

model.load_state_dict(torch.load(checkpoint,map_location=‘cpu’))

model.eval()

图片多标签预测

多分类输出多标签案例演示

多标签图片分类

多标签和多分类应用

• 不同任务的图片分类应用

• 针对一张图片，强制只能一种数字，可以使用softmax分类器

• 胸部X光片：一次胸部X光片可以同时显示多种不同的医疗状况。如果我们为胸部x光片构建一个分类器，我们希望该分类器能够指示存在多种情况。这是一张同时显示肺炎和脓肿的胸部x光照片，以及相应的标签。

• 入院：根据患者的健康记录，我们可能需要预测该患者将来是否会入院。我们可以将其定义为一个分类问题：根据患者未来的入院诊断（如果有的话）对患者过去的健康记录进行分类。患者可能因多种疾病入院，因此可能有多个正确答案

介绍两个重要的分类器

Sigmoid和Softmax对比

数据介绍

分类器**+**损失函数

网络模型设计

多标签分类模型**-**效果可视化

多标签图片分类功能演示

以图搜图

图像搜索应用场景

随着数字时代的到来，传统单单的文字搜素已经无法满足人们的搜索了，图像搜索，甚至是视频搜索都已经比较成熟。

图像搜索服务 （Image Search）是以深度学习和大规模机器学习技术为核心，通过图像识别和搜索功能，实现以图搜图的和以文搜图的智能图像搜索产品。图像搜索服务在基于图像识别技术基础上，结合不同行业应用和业务场景，帮助用户实现相同或相似图片搜索。

现在大火的人工智能主要是：语音识别，自然语言处理，计算机视觉，推荐系统等等。

人工智能技术应用：

n语音识别+自然语言处理：amazon echo，google assistant/home，siri，国内一大票智能音箱

n计算机视觉：微博面孔专辑（商汤提供的cv能力），海康威视/格林深瞳的安防，**拍立淘（手机淘宝里面的相机入口），百度识图（百度app里面的相机入口），**Google Photo

n推荐系统：手机淘宝主页往下翻有个栏目叫猜你喜欢，qq/网易音乐的每日推荐歌曲等

图片搜索的主要应用是二维码扫描、以图搜图、拍照搜题、拍照翻译、AR翻译、以图搜剧等

百度图像搜索

以图搜图，在指定图库中搜索出相同或相似的图片，适用于图片精确查找、相似素材搜索、拍照搜同款商。

相似图片搜索场景

在自建图库中找到与检索图片语义相似的图片集，并给出相似度打分（综合图片类型、颜色、内容、布局等特征）；适用于各种相似图片查找、相关内容推荐场景

• 设计素材查找

基于拍摄照片查找相似或相同的图片作品，满足设计师人群、工作人员更快捷高效查找原版大图或相似作品的需求

• 商品搜索及推荐

将用户拍摄的图片在商品库中搜索，找到同款或相似的商品，进行商品销售或者相关商品推荐，提升搜索查找的便捷性，优化用户体验

• 相关内容推荐

将文章内容或者产品服务中的图片入库，通过比对用户上传的图片，查找相似图片，从而找到相关的内容信息，实现相关内容搜索、推荐

相同图片搜索场景

在自建图库中找到与检索图相同的图片，支持找到局部内容相同的大图，或适度调整背景和角度的相同图片；可用于图片精确查找、重复图片过滤等场景

应用场景

• 重复图片过滤

搜索图库中是否有相同或高度相似的图片，实现系统内图片去重或过滤，避免重复内容引起的资源浪费、体验下降等问题

• 图片精确查找

在图片库中找到主体相同的图片，结合相似度分值，判断图片内容是否严格相同，可用于特定图片查找、图片内容精准关联等场景

商品图片搜索场景

针对商品类图片，专项训练检索模型，在自建图库中搜索相同及相似的商品图片集，可找到不同颜色、背景、角度的同款商品；适用于电商平台拍照搜商品等场景

• 商品搜索及推荐

将用户拍摄的图片在商品库中搜索，找到同款或相似的商品，进行商品销售或者相关商品推荐，提升商品搜索查找的便捷性，优化用户购买体验

• 商品识别

将商品名称与图片相匹配一起入库，通过图片相似度判断实现指定集合内的商品识别，可用于户外广告拍照下单、供应链系统拍图找货等场景

接下来我们就针对图搜场景进一步探索。

阿里图像搜索

电商图库类场景

用户只需拍摄或者上传商品照片，就可以根据图片进行商品搜索。 省去了繁琐的文字描述，简化了商品搜索流程，大大提升用户的购物体验。

布料纺织场景

商标logo检索场景

在商标、标识等场景下搜索相同或相似logo图形，大幅度简化人工肉眼比对的工作量，并有效提供工作效率。

通用图库类场景

图片分享和社交类网站通常有大量通用图片供用户搜索使用，利用图像搜索服务，可在云端快速构建百亿级图像搜索引擎，提供以图搜图功能，提升用户体验。

以图搜图实践

为方便更直观认知图像搜索场景应用，我们采用的方案：

基于深度学习工具PyTorch + Facebook AI searcher Faiss向量相似性搜索算法库。

举例说明如下：

红色方框是查询图，绿色方框是完全匹配的结果，其它是最相似的top

图像搜索发展历程

卷积神经网络理论必备

采用PyTorch深度学习工具进行图片特征提取。首先我们需要做的，要理解卷积神经网络如何特征提取的？这部分重点给大家讲解相关CNN的概念。

• 初识CNN
• CNN 卷积层概念
• CNN 中的stride和zero-padding使
• CNN 特征图计算
• CNN PoolLayers和FC&训练过程演示开始学习
• CNN 网络发展历史
• 图形化介绍FC和CNN 区别以及CNN 层概念
• keras 实现CNN 网络
• 图形化方式介绍CNN在图像应用
• CNN 在语音和文本中应用介绍

Faiss向量搜索库基础入门

faiss 向量化相似索引库，主要完成文本向量化特征的存储和检索。

• faiss安装
• faiss 快速入门
• faiss 基础模块和索引选择
• faiss 基础索引类型介绍和源码分析
  • Faiss indexes IO和index factory
  • Faiss indexes 前(后)处理
  • Faiss indexes 基础索引类型
  • Faiss indexes 多种index混合
  • Faiss indexes 进阶操作
• faiss 索引优化方案
• faiss一些基准实验

以图搜图项目实战

数据介绍

数据集介绍

图片集包含 17125 张图片，涵盖 20 个目录。

n人类；

n动物（鸟、猫、牛、狗、马、羊）；

n交通工具（飞机、自行车、船、公共汽车、小轿车、摩托车、火车）；

n室内（瓶子、椅子、餐桌、盆栽植物、沙发、电视）

数据集大小：~2GB

说明：您也可以使用其他的图片数据进行图片索引构建和检索。

索引构建压缩

尝试20万照片构建图片索引生成439M索引文件

索引降维压缩后，最后生成32M索引文件，效果基本不受影响

以图搜图系统架构

以图搜图技术架构原理

为方面进一步的理解以图搜图业务场景执行方案，通过VISO 图再次演示如下：

主要分为三个部分——图像特征抽取，图像特征构建索引、图像快速检索。

**第一步：**图像特征抽取方法

• 传统的方法有各种图像处理的方法，比如hog直方图，小波过滤等方法提取特征
• 流行的深度学习方法，比如卷积神经网络等；

**第二步：**使用特征抽取器对图像库抽取特征，并以向量的形式存储起来；

**第三步：**构建索引后，图像索引的好坏影响搜索速度

通过案例来看看图像检索基本的流程。首先，提供一张图像，然后按照下面的流程执行

->抽取特征

->图像库特征匹配（余弦相似度或者欧式距离）

->相似度的大小进行排序

-> 输出匹配结果

深度学习框架选型

主要借助深度学习框架，完成图片特征提取，一般采用TensorFlow 或者 PyTorch

项目： 采用PyTorch深度学习工具，同时采用Faiss 完成图片特征存储和检索（毫秒）

** Faiss 开源向量检索引擎**

Faiss是Facebook AI团队开源的针对聚类和相似性搜索库，为稠密向量提供高效相似度搜索和聚类，支持十亿级别向量的搜索，是目前最为成熟的近似近邻搜索库。它包含多种搜索任意大小向量集（备注：向量集大小由RAM内存决定）的算法，以及用于算法评估和参数调整的支持代码。Faiss用C++编写，并提供与Numpy完美衔接的Python接口

Faiss 不同类别索引

Faiss索引构建源码解读

图片特征抽取

在线实时检索演示

• 第一张照片：用户检索照片，后面相似照片推荐（相似得分：从左到右、从上到下排序）
• 索引库采样降维压缩，压缩前后减少1/4
• 图片检索速度在毫秒级别( 5000 万图片库)

更多以图搜图的效果案例**>>**

img标签介绍

介绍

img: 英文全称 image（图像），代表的是一张图片。

如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：

<img src="图片的URL" />

能插入的图片类型

• 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。

• 不能往网页中插入的图片格式是：psd、ai等。

HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

img标签的src属性

这里涉及到图片的一个属性：

• src属性：指图片的路径。英文名称 source。

在写图片的路径时，有两种写法：相对路径、绝对路径

写法一：图片的相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和上一层目录。

举例1：

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg">

<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

相对路径不会出现这种情况：

aaa/../bbb/1.jpg

../要么不写，要么就写在开头。

举例2：

<img src="images/1.jpg">

上方代码的意思是说，当前html页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg
效果：

相对路径的面试题。现有如下文件层级图：

问题：如果想在index.html中插入1.png，那么对应的img语句是？

分析：

现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。

答案：

<img src="../../photo/1.png" />

写法二：图片的绝对路径

绝对路径包括以下两种：

（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">

（2）网络路径。举例：

<img src="http://img.smyhvae.com/20200122_200901.png">

大家打开上面的img中的链接，可能有惊喜哦。

相对路径和绝对路径的总结

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案： 用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：

<img src="file://C:\Users\qianguyihao\Pictures\明星\1.jpg" alt="" />

总结一下：

无论是在 a 标签还是 img 标签上，如果要用路径。只有两种路径能用，就是相对路径和绝对路径：

• 相对路径从自己出发，找到别人。

• 绝对路径，就是http://或者https://开头的路径。

• 绝对不允许使用file://开头的文件，这个是完全错误的！

img标签的其他属性

width、height 属性

• width：图像的宽度。

• height：图像的高度。

width和height，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

重要提示：如果要想保证图片等比例缩放，请只设置width和height中其中一个。

Alt 属性

• alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。

Alt属性效果演示：

如上图所示：当图片 src 不可用的时候，显示文字。这样做，至少能让用户知道，这个图片大概是什么内容。

title 属性

• title：提示性文本。鼠标悬停时出现的文本。

title 属性不该被用作一幅图片在 alt 之外的补充说明信息。如果一幅图片需要小标题，使用 figure 或 figcaption 元素。

title 元素的值一般作为提示条(tooltip)呈现给用户，在光标于图片上停下后显示出来。尽管这确实能给用户提供更多的信息，您不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，可以选择上面提供的一种方法将其内联显示，而不是使用 title。

举例：

<img src="images/1.jpg" width="300" height="`188" title="这是美女">

效果：

align 属性

• 图片的align属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。

如果想实现图文混排的效果，请使用align属性，取值为left或right。

我们来分别看一下这align属性的这几个属性值的区别。

1、align=""，图片和文字低端对齐。即默认情况下的显示效果：

2、align="center"：图片和文字水平方向上居中对齐。显示效果：

3、align="top"：图片与文字顶端对齐。显示效果：

4、align="left"：图片在文字的左边。显示效果：

5、align="right"：图片在文字的右边。显示效果：

其他已废弃的属性

• Align（已废弃）：指图片的水平对齐方式，属性值可以是：top、middle、bottom、left、center、right。该属性已废弃，替换为 vertical-align这个CSS属性。
• border（已废弃）：给图片加边框，单位是像素，边框的颜色默认黑色。该属性已废弃，替换为 border这个CSS属性。
• Hspace（已废弃）：指图片左右的边距。
• Vspace（已废弃）：指图片上下的边距。