本文同步发布知乎：HFT-CNN:层级多标签分类，让你的模型多学习几次知乎主页lynne阿黎请大家不吝关注~
 
背景
 
长文本由于自身的特点和信息量，一段文本会描述一个特定的主题。短文本由于其自身长度的原因是缺少这种特征的。一般对于短文本的处理会借鉴上下文的语料或者同义词来扩充短文本的含义。但是由于文本的领域相关性，上下文的语料和同义词的分布未必和原始语料一致。由于以上原因短文本分类一直受到人们的关注。
 
在深度学习领域，对于短文本分类CNN是一种常见的方法，但是这种方法通常需要大规模的语料。文中认为短文本的多标签分类任务所面临的的问题主要是由多标签带来的数据稀疏的问题。在多标签分类中，我们会遇到标签是平行和具有层级结构的情况，例如我们看新闻的时候有生活类，科技类，娱乐类，而娱乐类又会分为电影频道，电视剧频道等等。对于标签有层级关系的问题，文中提出了Hierarchical CNN结构。
 
模型结构
 
1. CNN结构
 
文中文本分类的CNN模型类似于Text-CNN，输入是短文本sentence，sentence由词向量拼接而成，文中使用的是fasttext，接着使用卷积核为w的卷积层提取sentence的特征，然后添加max-pooling层，将这些池化层的的结果拼接然后经过全连接层和dropout得到上层标签[A,B,...]的概率，loss采用交叉熵。这是一个非常经典的CNN结构。
 
 
2. Hierarchical结构
 
对于下层标签的预测文中的思路是在上层标签的预测中模型已经学到了通用的特征，但是深层layer应该去学习原始数据集中比较详细的信息。因此文中对embedding和卷积层参数保持不变，在这个基础上进行微调学习，这一步标签也由[A,B]变为[A1,A2,B1,B2]。
 
对于最终文本分类的结果判断文章采用了两种得分方式：
 
 
BSF(Boolean Scoring Function)
 
 
MSF(Multiplicative Scoring Function)
 
两种方法都是设置一个阈值，文本在某个分类的得分超过阈值则认为是该分类的。区别是BSF只有在文本被分到一级分类的情况下才会认为分类的二级分类是正确的，MSF没有这项限制。
 
其实说到这里大家应该明白了文章的基本思路，就我个人来说感觉是比较原始但又水到渠成。因此这里的代码感觉也没有什么好讲的，就是Finetune的思路，在原始模型上加了一层全连接层。需要注意的是作者使用的是chainer实现的，相比于torch和tensorflow比较小众。
 
# Network definition for HFT model
        # =========================================================
        if self.mode == "fine-tuning":
            parameters = np.load('./CNN/PARAMS/parameters_for_multi_label_model_' + self.load_param_node_name + '.npz')
            super(CNN, self).__init__()
            set_seed_random(0)
            with self.init_scope():
                self.lookup = L.EmbedID(in_size = parameters['lookup/W'].shape[0], out_size = parameters['lookup/W'].shape[1], initialW = parameters['lookup/W'], ignore_label = -1)
                self.conv1 = L.Convolution2D(self.in_channels,self.out_channels,(2, self.row_dim),stride=1,initialW=parameters['conv1/W'],initial_bias=parameters['conv1/b'])   
                self.conv2 = L.Convolution2D(self.in_channels,self.out_channels,(3, self.row_dim),stride=1,initialW=parameters['conv2/W'],initial_bias=parameters['conv2/b'])
                self.conv3 = L.Convolution2D(self.in_channels,self.out_channels,(4, self.row_dim),stride=1,initialW=parameters['conv3/W'],initial_bias=parameters['conv3/b'])
                self.l1=L.Linear(in_size = None, out_size = self.hidden_dim, initialW=self.initializer)
                self.l2=L.Linear(in_size = self.hidden_dim, out_size = self.n_classes, initialW=self.initializer)
 
实验效果
 
文中数据集采用RCV1和Amazon 670K，相关链接可以见相关资料部分。数据集的基本情况如下，L表示数据集标签的层级深度，TrTe表示训练数据和测试数据，C表示标签整体的量。分类的效果采用F1值进行衡量，此外还采用了P@k和NDCG@k标准。
 
 
基础效果
 
文中将HFT-CNN和没有经过微调的CNN模型(WoFT-CNN)和没有经过层级结构标签处理的模型(Flat Model)进行对比，实验效果如下，其中B表示BSF,M表示MSF。
 
 
我们看到表格中有Micro和Macro这是什么意思呢？这是F1值得两种计算方式，对于单个分类来说在多分类的情况下计算F1值有两种方式，Micro和Macro。
 
 
Micro是不管类别，直接计算
 
 
Macro是将各个类别的F1计算之后然后进行平均
 
可以看出在效果上RCV1和Amazon 670K，HFT-CNN的效果都是优于其他模型的，但是在使用MSF得分和Micro F1值时WoFT的效果和HFT相同，但是在Macro F1的得分缺逊于HFT-CNN。这个我们猜测是因为WoFT整体效果比较好，但是在某一类上的分类效果差于HFT-CNN所以导致Macro F1值比较低，这也证明了HFT-CNN的初衷：对标签分类，模型先学习比较通用的知识，然后进行细分。
 
STOA效果比较
 
STOA效果文中主要对比了XML-CNN，实验效果如下，可以看到在两个数据集上，HFT-CNN的效果超越了目前的STOA的效果。
 
 
 
层级分类效果
 
文中统计了多个层级的文本分类效果，可以看出标签层级越深，分类效果越差，但是HFT-CNN的效果依然优于XML。
 
 
 
多标签数量
 
文中对于每个短文本的有多个分类的情况下对分类的数量的准确率进行了统计，可以看到分类越多识别的准确率越低。
 
 
 
训练数据规模
 
文中也讨论了训练数据的规模对实验结果的影响，可以看到训练数据越多实验效果越好。但是需要注意的是随着训练数据规模的降低，HFT-CNN的效果下降的较XML比较平缓。这表示经过多轮学习，HFT-CNN学到的语料内容更多一点。
 
 
个人思考
 
相比于Bert和其他文章，这篇文章的模型结构是比较简单而且原始的，思路也感觉是Bert玩剩下的。预训练+Finetune已经是非常流行的手段了，所以我个人对这篇文章的定位应该是术而不是道。文中对于标签层级结构的理解是非常具有启发性的，如果大家要用Bert的话也可以据此设计一些相关的预训练任务，比如让模型去学习二级标签或二级标签是否正确等，这样模型可以有针对性的学习。
 
但是文中的思想同样存在一个问题就是标签层级的划分，以及不同标签的不相关性。如果标签层级本身就划分不清楚，或标签自身有重叠，那么这样模型可能依旧无法准确的对文本进行判断。同时文章中提到了数据稀疏的问题，随着层级结构的划分，低级标签的训练文本应该比较少，那么模型是否可以如我们所想学到预期的知识这也是值得探索的。那么这时候或许我们就应该使用一些方法进行数据增强了。
 
相关资料
 
 RCV1
Amazon 670K
HFT-CNN论文
ShimShim46/HFT-CNN-源码

 
最近做的一个小程序需求，其中一个页面使用到了 textarea这个小程序组件，然后点击页面上的某个元素，会触发页面弹起一个弹窗，这时发现 textarea的 placeholder文字或者输入的文字内容，会直接穿透遮罩层和浮动弹窗，显示在最上面，开始时我以为是遮罩层和浮动弹窗的层级舍得小了，于是改大，谁知道没用，改到了 99999也没用，于是我意识到这应该不是我代码的问题，网上一搜，果然有故事。
 
解决方案隐藏 textarea
 
这是最简单的解决手段，一般弹窗的时候，都会带个遮罩层，把遮罩层下面的内容隐藏一部分，用户基本上不会注意的，然后再去掉弹窗和遮罩层的时候再把 textarea显示出来。 这种方法简单有效，大部分情况下都可以这么解决。
 
textarea> 复制代码使用替代元素
 
有时候， textarea穿透的不是遮罩层，或者遮罩层以一种半透明而非完全遮住页面内容的形式呈现，担心用户能够看到因为 textarea的消失而导致页面跳动，产生不好的用户体验，那么就可以使用替代元素来替代 textarea而非将之直接隐藏掉。
 
基本的 textarea组件只接受文本的输入，抛开可输入性的话，外观上看就是一个含有文本节点的简单元素，只需要获取当前状态下的 textarea中输入的文字，将之赋予给一个样式与 textarea相同的普通元素，就达到了临时替代的效果。
 
rich-text> view> 复制代码
 
如上所示由于需要实时获取 textarea中已经输入的内容，所以给 textarea元素加了个 bindinput的监听器
 
showMask用于标识是否显示遮罩层(或者其他可能会被 textarea穿透的浮动元素)，如果显示遮罩层，则隐藏 textarea元素，并显示替代原宿
 
这里 textarea的隐藏使用了 wx:if，会使其彻底地从页面中消失，而重新显示出来的时候，textarea元素会重新创建，丢失原先输入，所以给其加了个 value属性，其值 txtRealContent就是缓存的 textarea已经输入的文本内容；如果你不用这种方法，不让 textarea完全显示，而仅仅是隐藏，例如使用 hidden="{{ showMask ? true :false }}"，因为不涉及到 textarea的删除与重建，所以就无需添加 value属性来控制文本内容了。
 
textarea是可以输入可换行的文本内容的，所以这里使用了 rich-text组件，在使用的时候，我发现 rich-text好像不支持溢出隐藏，所以又额外在其外面包了一层 view组件，并将其高度设置为和 textarea相同
 
上面四个步骤，都比较简单，稍微需要注意的是，如果 textarea的内容包含了换行文本，则需要对换行符进行处理：
 
textareaContent.replace(/\n/g, '
 
')
 
如果你想让 textarea自动增加高度而不是固定高度，给 textarea加了个 auto-height，那么就需要“实时”获取其高度 说是 “实时”，其实也并不是那么实时，不考虑其他样式的变化， textarea的高度与行数有关，每增减一行，其高度才会变化，所以只需要监控其内容行数的变化即可，恰好 textarea组件也已经提供了这个监控器：bindlinechange。
 
原理说完了，完整实例代码如下：
 
index.wxml
 
切换maskbutton>
 
rich-text>
 
view>
 
view>
 
Footerbutton>
 
view>
 
view>
 
view>
 
index.js
 
Page({
 
data: {
 
txtRealContent: '',
 
txtContent: '',
 
showMask: false,
 
txtHeight: 0
 
},
 
textAreaLineChange(e) {
 
this.setData({ txtHeight: e.detail.height })
 
},
 
txtInput(e) {
 
this.setData({ txtContent: e.detail.value })
 
},
 
changeMaskVisible(e) {
 
if (!this.data.showMask) {
 
// 将换行符转换为wxml可识别的换行元素
 
const txtRealContent = this.data.txtContent.replace(/\n/g, '
 
')
 
this.setData({ txtRealContent })
 
}
 
this.setData({ showMask: !this.data.showMask })
 
}
 
})
 
index.wxss
 
.rich-text {
 
overflow: hidden;
 
}
 
.mask {
 
position: fixed;
 
top: 0;
 
right: 0;
 
bottom: 0;
 
left: 0;
 
background-color: rgba(0, 0, 0, .6);
 
z-index: 10;
 
}
 
.mask-content {
 
position: fixed;
 
top: 44%;
 
left: 50%;
 
height: 60%;
 
width: 60%;
 
transform: translate(-50%, -50%);
 
background-color: yellowgreen;
 
z-index: 12;
 
}

一、定位(position)：
 
定位是一种更加高级的布局手段,通过定位我们可以将一个元素摆放到页面的任意位置
 使用position属性来设置定位
 可选值：
 static:默认值 元素是静止的 没有开启定位
 relative:开启元素的相对定位
 
 
 
相对定位的特点：
 1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化
 通过偏移量设置元素的位置:
 top:定位元素和定位位置上边的距离
 bottom:定位元素和定位位置下边的距离
 left:定位元素和定位位置左边的距离
 right:定位元素和定位位置右边的距离
 2.相对定位是参照与元素在文档流中的位置进行定位的
 3.相对定位会提升元素的层级
 4.相对定位不会使元素脱离文档流
 5.相对定位不会改变元素的性质 块还是块 行内还是行内
 
 
absolute:开启元素的绝对定位
 
 
 
绝对定位特点:
 1.开启绝对定位后 如果不设置偏移量 元素位置不会发生变化
 2.开启绝对定位后 元素会从文档流中脱离
 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
 4.绝对定位会使元素提升层级
 5.绝对定位是相对于其包含块进行定位的
 包含块(containing block):
 正常情况下包含块就是离当前元素最近的祖先块元素
 绝对定位的包含块： 离它最近的开启定位的祖先元素
 如果所有的祖先元素都没有开启定位
 则相对于根元素进行定位
 html(根元素，初始包含块)
 
 
fixed:开启元素的固定定位
 
 
 
固定定位也是一种绝对定位 所以固定定位的大部分特点和绝对定位一样
 唯一不同的是 固定定位永远参照于浏览器的视口(浏览器可视窗口)进行定位
 固定定位的元素不会随滚动条滚动上去 而是跟随可视窗口的移动而移动
 
 
sticky:开启元素的粘滞定位
 
 
 
粘滞定位的特点和相对定位基本一样
 粘滞定位可以在元素到达某个位置时固定
 
 
二、绝对定位的元素布局
 
开启定位后的等式：
 left+margin-left+border-left+padding-left+width+padding-left+width+padding-right+margin-right+right=包含块内容区的宽度
 
 
 
当开启绝对定位后：
 水平方向的布局等式就要添加left和right两个值
 此时规则和之前一样只是多添加了两个值
 当发生过渡约束时：
 如果九个值中没有auto 则自动调整right值 以使等式满足
 如果有auto则自动调整auto的值以使等式满足
 可以设置auto的值：margin width left right
 left和right的值默认是auto 则等式不满足时，会自动调整这两个值
 
 
垂直方向布局的等式也必须要满足：
 top+margin-top+margin-bottom+padding—top/bottom+border-top/bottom+height+bottom=包含块的高度
 
以下设置可以让元素水平垂直都居中:
 
 
 
left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 
 
三、元素的层级
 
 
 
对于开启定位的元素，可以通过z-index属性来指定元素的层级
 z-index需要一个整数作为参数，值越大的元素的层级越高
 元素层级越高的越优先显示
 如果元素层级一样 则优先显示靠下的
 祖先元素层级再高，不会盖住后代元素
 

 
文章目录
 
定位
相对定位
绝对定位
固定定位
粘滞定位
  
绝对定位的布局
元素的层级

 
定位
 
在对页面进行布局时除了用到浮动以外，还会用到定位，定位是一种更加高级的布局手段，通过定位可以让元素摆放到页面的任意位置，使用position属性来设置定位。
 可选值：
 
static 默认值，元素是静止没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
 
相对定位
 
当元素的positio属性设置为relative时则开启了相对定位
 
相对定位的特点：
 
元素开启了相对定位如果不设置偏移元素不会发生任何变化
相对定位是参照元素在文档流的位置进行定位
相对定位会提升元素的层级
相对定位不会使文档脱离文档流
相对定位不会改变元素的性质，块还是块，行内还是行内
 
偏移量（offset）：当元素开启相对定位后需要通过设置偏移量来改变其位置
 top 定位元素和定位位置上边的距离
 bottom 定位元素和定位位置下边的距离
 left 定位元素和定位位置左侧的距离
 right 定位元素和定位位置左侧的距离
 
注意：定位元素垂直方向的位置由top和bottom两个属性来控制
 通常只会使用其中之一，水平方向同理
 
<style>
        .box1{
            width:200px;
            height:200px;
            background-color: aquamarine;
        }
        .box2{
            width:200px;
            height:200px;
            background-color: blue;
            position:relative;
            top:200px;
            left:200px; 
        }
        .box3{
            width:200px;
            height:200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
 

 由上可知偏移量是相对于元素之前位置设置的，不会改变其他元素的位置。
 
绝对定位
 
当元素的position属性设置为absolute，则开启了元素的绝对定位，在定位中使用最多的是绝对定位。
 
绝对定位的特点：
 
开启绝对定位后，如果不设置偏移量 元素的位置不会发生变化
开启绝对定位，元素会从文档流脱离
绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
绝对定位会使元素提升一个层级
绝对定位元素是相对于其包含块进行定位
 
这里对包含块进行解释：
 1.在正常情况下包含块就是当前元素最近的祖先元素
 2.在开启绝对定位后，包含块就是离它最近的开启了定位的祖先元素
 
注意：如果所有的祖先元素都没有开启定位则根元素就是它的包含块，html（根元素，初始包含块），所以绝对定位一般是配合相对定位一起使用。
 
    <style>
        div {
            font-size: 60px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box4{
            width:400px;
            height:400px;
            background-color:blueviolet;
            position: relative;
        }
        .box5
        {
            width:300px;
            height:300px;
            background-color:white;
            position: relative; 

        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>
    <div class="box3">3</div>

</body>
 

 由上图可知给box2开启绝对定位，给box4，box5开启相对定位后，box2是相对box5移动，即是相对于包含块定位。
 
固定定位
 
将元素的position属性设置为fixed则开启的固定定位，固定定位也是一种绝对定位，所以固定定位大部分特点都跟绝对定位一样， 唯一不同的是固定定位永远参考浏览器的视口进行定位，固定定位的元素不会随网页的流动条滚动。
 
.box2 {
            width: 200px;
            height: 200px;
            background-color: blue;  
             position: fixed;
             left:0;
             top:0;
        }
 

 设置固定定位后元素不会随滚动条改变位置。
 
粘滞定位
 
当元素的position属性设置为sticky时则开启了元素的粘滞定位，粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其定位，缺点是兼容性差。
 
.nav{
              width:1210px;
              height:48px;
              background-color:#E8E7E3;
              margin:50px auto;
              position: sticky;
              top:10px;
          }
 
当视口距离nav元素10px时元素位置将固定住，不随滚动条改变。
 
绝对定位的布局
 
开启绝对定位后的水平布局由以下9个属性共同决定
 
left
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
right
 
需要满足以下等式水平方向布局才可成立：
 left + margin-left + border-left padding-left + width + padding-right +
 boreder-right + margin-right + right = 包含块内容区宽度
 
当发生过度约束时，如果9个值中没有auto则自动调整right值使等式成立，如果有auto，则自动调整auto的值以使等式满足，可设置auto的值：margin width left right。其中left和right的值默认为auto，不满足时，会自动调整这两个值。
 
可以这样设置垂直居中
 
                  left:0;
                  right:0;
                  top:0;
                  bottom:0;
                  margin:auto;
 
同理垂直方向布局等式如下
 top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
 
元素的层级
 
对于开启了定位的元素，可以通过z-indix属性来指定元素的层级， z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示，如果元素层级一样，则优先显示靠下的，祖先元素的层级再高也不会盖住后代元素
 
    <style>
        div{
            font-size: 60px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color: aquamarine;
            position: absolute;
            z-index:1;
        }
        .box2{
            width:200px;
            height:200px;
            background-color: rgba(255,0 , 0, .5);
            position: absolute;
            top:50px;
            left: 50px;
            z-index:2;
        }
        .box3{
            width:200px;
            height:200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index:3;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color:slateblue;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>
</body>