Posted on | In

student和teacher网络之间的差距较大时，student网络的性能会下降，故引入多步知识提炼，即采用一个中等规模的网络（teacher assistant）来弥合student与teacher之间的鸿沟。

提出原因：当student与teacher网络之间结果差异较大时，普通知识蒸馏方法表现并不太好。

介绍

Teacher Assistant(TA):

  • TA网络自teacher网络提炼而来
  • 在蒸馏过程中，TA作为teacher网络来训练student

Posted on | In

本文提出基于对抗学习的策略来进行知识蒸馏，定义逐级训练损失来指导和优化预定义的学生网络以回复教师模型中的知识，并使判别器网络同时区分老师和学生特征。

简介

来源：

  • 神经网络中包含冗余信息（知识）
  • 整体神经网络较大且训练慢

提出：
基于学习的集成方法。即，学习多个神经网络的集成，而不会产生任何额外的测试成本。

利用不同神经网络输出集合作为监督训练目标网络。

网络介绍

network

Read more »

Posted on | In

简介

使用一种无数据的方法根据teacher网络来训练student网络。

即不使用元数据，而是从复杂的teacher模型中合成 data impression，并将其作为原始训练数据样本的替代，通过知识蒸馏的方式，将teacher模型特征转移到student上。

Read more »

Posted on | In

PWA简介

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

实践

目录结构

Posted on | In ,

从一道笔试题开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
	console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0)

async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

/* 输出结果
 * script start
 * async1 start
 * async2
 * promise1
 * script end
 * async1 end
 * promise2
 * setTimeout
**/

执行栈与任务队列

  • JS分为同步任务和异步任务。
  • 同步任务都在主线程上执行，形成一个执行栈。
  • 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
  • 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。
Read more »

Posted on | In

安装node.js npm

1
2
3
//查看node npm版本信息
node -v
npm -v

安装vue、vue-cli

1
2
3
npm install vue

npm install --global vue-cli

创建基于webpack模板项目

创建项目
1
2
3
//project-name为项目名

vue init webpack project-name
安装项目依赖
1
npm install
运行项目
1
npm run dev

Posted on | In

富文本采用wangEditor

创建

主界面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// app.js
import React, { Component } from 'react';
import E from 'wangeditor';
import { MENUS_CONFIG, UPLOAD_ADDRESS, UPLOAD_MAXLENGTH, UPLOAD_FILENAME } from './wangEditorSettings';

class App extends Component {
    constructor(props) {
        super(props);
        
        //创建工具栏与内容区ref
        this.editorElem = React.createRef();
        this.editorContent = React.createRef();
    }
    
    componentDidMount() {
        const editor = new E(this.editorElem.current, this.editorContent.current);
        editor.customConfig.onchange = html => {
            this.props.form.setFieldsValue({
                description: html,
            });
        }
        editor.customConfig.menus = MENUS_CONFIG;
        editor.customConfig.uploadImgServer = UPLOAD_ADDRESS;
        editor.customConfig.uploadFileName = UPLOAD_FILENAME;
        editor.customConfig.uploadImgMaxLength = UPLOAD_MAXLENGTH;

        editor.create();
    }
    
    render() {
        return(
            <div>
                <div ref={this.editorElem} className={styles['editor-bar']}></div>
                <div ref={this.editorContent} className={styles['editor-content']}></div>
            </div>
        );
    }
}
配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// wangEditorSettings.js
const MENUS_CONFIG = [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    // 'backColor',  // 背景颜色
    'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    'quote',  // 引用
    // 'emoticon',  // 表情
    'image',  // 插入图片
    'table',  // 表格
    'video',  // 插入视频
    'code',  // 插入代码
    'undo',  // 撤销
    'redo'  // 重复
];

const UPLOAD_ADDRESS = '/api/v1/upload/image';

const UPLOAD_MAXLENGTH = 1;

const UPLOAD_FILENAME = 'upload';

export {
    MENUS_CONFIG,
    UPLOAD_MAXLENGTH,
    UPLOAD_ADDRESS,
    UPLOAD_FILENAME
};

界面显示带标签内容

主要是采用React提供的dangerouslySetInnerHTML。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// view.js
class View extends Component {
    constructor(props) {
        super(props);
        //...
    }
    
    //...
    
    render() {
        const { description } = this.state;
        return(
            <div 
                className={styles['description']} 
                dangerouslySetInnerHTML={{__html: description && description.replace(/<script>/, '&lt;script&gt;').replace(/<\/script>/, '&lt;script&gt;')}}
            >
            </div>
        );
    }
}

参考资料

wangEditor3使用手册

Posted on | In

最近做个表格，想做隔行换色以及自定义单元格数据展示的效果，到网上找了一些方法，算是大概实现了，记录一下。（总结还是一句话，多看API文档）

table页面展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
constructor() {
    ...
    this.columns = [{
        title: 'Research Topic',
        dataIndex: 'name',
        sorter: true,
        className: 'topic-info',
        render: (text, record) => (
            <div>
                <p><Link to="/">{text.split("|")[0]}</Link></p>
                <p title={`${text.split("|")[1]}`}>{text.split("|")[1]}</p>
            </div>
        ),
    }, {
        title: 'Researchers',
        dataIndex: 'creatorName',
        sorter:true,
        width: '15%',
    }, {
        title: 'Created',
        dataIndex: 'created',
        sorter: true,
        width: '12%',
    }, {
        title: 'Updated',
        dataIndex: 'updated',
        sorter: true,
        width: '12%',
    }, {
        title: 'Operation',
        dataIndex: 'operation',
        width: '12%',
        render: (text, record) => (
            <span>
                <a>Edit</a>
                <Divider type="vertical" />
                <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                <a>Delete</a>
                </Popconfirm>
            </span>
        ),
    }];
    ...
}

render() {
    const { loading, error, topics, tags, topicNum, tagNum, current } = this.state;
    let data = [];
    topics.forEach((topic, idx) => {
        //data属性name是把两项内容拼接在一起，用的时候split一下
        data.push({
            key: topic.id,
            name: topic.name + "|" + topic.description,
            creatorName: topic.creatorName,
            created: formatDate(topic.created, "yyyy-MM-dd"),
            updated: formatDate(topic.updated, "yyyy-MM-dd"),
        });
    });
    return(
        <Table
            className={styles['table']}
            loading={loading}
            rowSelection={rowSelection}
            columns={this.columns}
            dataSource={data}
            pagination={false}
            bordered
            rowClassName={(record, idx) => {
                if(idx % 2 === 1)
                    return 'bg-row';
            }}
        />
    );
}
  • 隔行换色通过rowClassName指定要换色的行class名
  • 自定义单元格数据是通过columns设置里render()函数返回数据，class通过className指定
样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:global{
    .bg-row {
        background-color: $gray-color-12;
    }
    .topic-info {       
        p:first-child{
            font-family: Arial, sans-serif;
        }
        p+p {
            color: $gray-color-5;
            margin-left: 20px;
            text-indent: ellipsis;
        }
    }
}
  • 用global声明一个全局变量，如果bg-row和topic-info这两个类不在global里声明，而是在外面，Chrome f12调试的时候可以看到找不到这两个样式，不造为啥。