#4738 update mind page

Merged
ychao_1983 merged 2 commits from dev-csh into V20230912 7 months ago
  1. +121
    -26
      web_src/vuepages/pages/model/mind/index.vue

+ 121
- 26
web_src/vuepages/pages/model/mind/index.vue View File

@@ -20,7 +20,7 @@
</div>
<div class="apply-c">
<a class="apply-btn" download
href="https://openi.pcl.ac.cn/OpenIOSSG/promote/raw/branch/master/%e9%b9%8f%e5%9f%8e%e8%84%91%e6%b5%b7%e6%a8%a1%e5%9e%8b%e7%94%b3%e8%af%b7%e8%a1%a8.docx">申请体验</a>
href="https://openi.pcl.ac.cn/OpenIOSSG/promote/raw/branch/master/%e9%b9%8f%e5%9f%8e%e8%84%91%e6%b5%b7%e6%a8%a1%e5%9e%8b%e7%94%b3%e8%af%b7%e8%a1%a8.docx">模型申请</a>
</div>
<div class="apply-descr">下载表格,填写后发送到:secretariat@openi.org.cn</div>
</div>
@@ -72,6 +72,21 @@
<div class="line" v-if="descrIndex != item.descr.length - 1" :key="descrIndex + 100"></div>
</template>
</div>
<div class="link">
<a :href="item.link">
<span>查看项目</span>
<svg xmlns="http://www.w3.org/2000/svg"
class="styles__StyledSVGIconPathComponent-sc-gbp7ch-0 bRiIWI svg-icon-path-icon fill"
viewBox="0 0 32 32" width="16" height="16" fill="rgb(16, 16, 16)">
<defs data-reactroot=""></defs>
<g>
<path
d="M21.563 14.667l-7.152-7.152 1.885-1.885 10.371 10.371-10.371 10.371-1.885-1.885 7.152-7.152h-16.229v-2.667z">
</path>
</g>
</svg>
</a>
</div>
<div class="ops">
<a :href="op.link" v-for="(op, opIndex) in item.ops" :key="opIndex">{{ op.text }}</a>
</div>
@@ -121,8 +136,16 @@
</div>
<div class="data-distribution" v-if="tabContent[activeTab].chart.length">
<div class="title">训练数据分布</div>
<div class="chart-el" :class="`chart-el-${index}`" v-for="(item, index) in tabContent[activeTab].chart"
:key="index"></div>
<div class="descr">
<p>我们统计了40个学科领域的数据,此处只罗列了占比前5的学科领域的数据分布情况。</p>
<p>
40个学科领域包括:文学、经济、法律、教育学、医学、政治、历史、体育、游戏娱乐、影视影评、心理学、休闲旅游、计算机科学、艺术、食品科学、农业科学、电子商务、电子信息科学、管理学、交通运输、能源科学、军事、轻工业、环境科学、安全科学与消防工程、哲学、生物科学、城市规划与建设、地理、材料科学、广告营销、宗教、天文学、气象学、化学科学、物理科学、数学科学、重工业、通信技术、其他。
</p>
</div>
<div class="chart-el-c">
<div class="chart-el" :class="`chart-el-${index}`" v-for="(item, index) in tabContent[activeTab].chart"
:key="index"></div>
</div>
</div>
</div>
</div>
@@ -147,7 +170,7 @@ const templateOptions = {
},
xAxis: {
type: 'category',
axisLabel: { rotate: 30 }, // interval: 0,
axisLabel: {}, // interval: 0, rotate: 30
data: [],
},
yAxis: {
@@ -156,21 +179,22 @@ const templateOptions = {
formatter: '{value}%'
},
},
dataZoom: [{
type: 'inside',
start: 0,
end: 100
}],
// dataZoom: [{
// type: 'inside',
// start: 0,
// end: 100
// }],
series: [{
data: [],
type: 'bar',
itemStyle: {
color: '#188df0',
},
barWidth: 20,
label: {
show: false,
show: true,
position: 'top',
rotate: 30,
// rotate: 30,
formatter: '{c}%'
}
}]
@@ -190,6 +214,7 @@ export default {
['模型分片', '3456'],
['基于', 'MindSpore'],
],
link: 'https://openi.pcl.ac.cn/PCL-Platform.Intelligence/PengCheng.Mind',
ops: [],
}, {
name1: '鹏城·脑海七十亿参数',
@@ -200,6 +225,7 @@ export default {
['支持', 'NPU转换GPU'],
['基于', 'MindSpore'],
],
link: 'https://openi.pcl.ac.cn/PCL-Platform.Intelligence/PengCheng.Mind/src/branch/7B',
ops: [],
}],
activeTab: 0,
@@ -217,17 +243,23 @@ export default {
{ name: '第五阶段', tokens: '500B Tokens', },
],
chart: [{
title: '0-150B Tokens数据分布',
title: '0-150B Tokens主要数据分布',
x: ['文学', '经济', '其他', '法律', '教育学', '医学', '政治', '历史', '体育', '游戏娱乐', '影视影评', '心理学', '休闲旅游', '计算机科学', '艺术', '食品科学', '农业科学', '电子商务', '电子信息科学', '管理学', '交通运输', '能源科学', '军事', '轻工业', '环境科学', '安全科学与消防工程', '哲学', '生物科学', '城市规划与建设', '地理', '材料科学', '广告营销', '宗教', '天文学', '气象学', '化学科学', '物理科学', '数学科学', '重工业', '通信技术'],
y: [37.04, 11.98, 7.27, 7.03, 4.83, 4.8, 2.83, 2.67, 2.06, 1.89, 1.83, 1.41, 1.24, 1.06, 1.02, 0.98, 0.89, 0.85, 0.77, 0.7, 0.65, 0.64, 0.48, 0.47, 0.46, 0.43, 0.43, 0.41, 0.4, 0.4, 0.37, 0.3, 0.26, 0.24, 0.23, 0.18, 0.17, 0.13, 0.13, 0.07],
x0: ['文学', '经济', '法律', '教育学', '医学'],
y0: [37.04, 11.98, 7.03, 4.83, 4.8],
}, {
title: '150-330B Tokens数据分布',
title: '150-330B Tokens主要数据分布',
x: ['文学', '其他', '经济', '法律', '医学', '历史', '教育学', '游戏娱乐', '政治', '体育', '影视影评', '休闲旅游', '心理学', '计算机科学', '艺术', '食品科学', '电子信息科学', '农业科学', '电子商务', '管理学', '军事', '交通运输', '轻工业', '能源科学', '环境科学', '材料科学', '安全科学与消防工程', '生物科学', '哲学', '地理', '宗教', '广告营销', '化学科学', '城市规划与建设', '天文学', '气象学', '物理科学', '通信技术', '数学科学', '重工业'],
y: [28.42, 9.98, 9.59, 7.44, 5.53, 4.23, 3.59, 3.18, 2.87, 2.74, 2.26, 1.75, 1.45, 1.35, 1.33, 1.29, 1.23, 1.11, 0.89, 0.84, 0.84, 0.83, 0.69, 0.6, 0.6, 0.56, 0.54, 0.54, 0.53, 0.53, 0.52, 0.36, 0.33, 0.33, 0.26, 0.24, 0.18, 0.16, 0.15, 0.14],
x0: ['文学', '经济', '法律', '医学', '历史'],
y0: [28.42, 9.59, 7.44, 5.53, 4.23],
}, {
title: '330-530B Tokens数据分布',
title: '330-530B Tokens主要数据分布',
x: ['文学', '其他', '经济', '法律', '医学', '教育学', '历史', '政治', '游戏娱乐', '体育', '影视影评', '休闲旅游', '计算机科学', '艺术', '食品科学', '心理学', '电子商务', '农业科学', '电子信息科学', '交通运输', '轻工业', '管理学', '军事', '环境科学', '能源科学', '安全科学与消防工程', '地理', '材料科学', '生物科学', '宗教', '哲学', '广告营销', '城市规划与建设', '化学科学', '气象学', '天文学', '重工业', '物理科学', '数学科学', '通信技术'],
y: [24.94, 10.49, 10.29, 7.73, 5.17, 3.97, 3.73, 3.2, 3.2, 3.09, 2.2, 2.01, 1.72, 1.41, 1.36, 1.34, 1.29, 1.24, 1.21, 0.94, 0.91, 0.89, 0.78, 0.71, 0.69, 0.62, 0.51, 0.5, 0.5, 0.5, 0.46, 0.45, 0.37, 0.31, 0.27, 0.27, 0.2, 0.19, 0.17, 0.17],
x0: ['文学', '经济', '法律', '医学', '教育学'],
y0: [24.94, 10.29, 7.73, 5.17, 3.97],
}]
}, {
descr: [
@@ -241,25 +273,35 @@ export default {
{ name: '第五阶段', tokens: '500B Tokens', },
],
chart: [{
title: '0-36.5B Tokens数据分布',
title: '0-36.5B Tokens主要数据分布',
x: ['文学', '经济', '其他', '法律', '历史', '教育学', '政治', '体育', '医学', '游戏娱乐', '影视影评', '艺术', '农业科学', '休闲旅游', '食品科学', '计算机科学', '电子信息科学', '心理学', '交通运输', '电子商务', '军事', '地理', '管理学', '生物科学', '安全科学与消防工程', '环境科学', '能源科学', '轻工业', '哲学', '城市规划与建设', '宗教', '材料科学', '广告营销', '化学科学', '气象学', '天文学', '数学科学', '通信技术', '物理科学', '重工业'],
y: [15.38, 13.63, 11.81, 6.64, 4.72, 4.67, 4.15, 4.1, 3.86, 3.1, 2.64, 1.96, 1.94, 1.78, 1.73, 1.59, 1.47, 1.42, 1.32, 1.18, 1.13, 1.05, 1.01, 0.79, 0.74, 0.73, 0.65, 0.58, 0.56, 0.53, 0.47, 0.43, 0.39, 0.36, 0.33, 0.3, 0.25, 0.25, 0.23, 0.13],
x0: ['文学', '经济', '法律', '历史', '教育学'],
y0: [15.38, 13.63, 6.64, 4.72, 4.67],
}, {
title: '36.5-123.5B Tokens数据分布',
title: '36.5-123.5B Tokens主要数据分布',
x: ['文学', '其他', '经济', '历史', '医学', '教育学', '法律', '政治', '影视影评', '体育', '游戏娱乐', '心理学', '休闲旅游', '艺术', '食品科学', '农业科学', '计算机科学', '管理学', '交通运输', '军事', '电子信息科学', '地理', '电子商务', '宗教', '哲学', '生物科学', '环境科学', '安全科学与消防工程', '轻工业', '能源科学', '城市规划与建设', '广告营销', '材料科学', '气象学', '天文学', '化学科学', '物理科学', '数学科学', '通信技术', '重工业'],
y: [20.93, 11.48, 11.42, 5.48, 5.02, 4.91, 3.73, 3.12, 3.11, 2.98, 2.78, 2.49, 2.46, 1.96, 1.93, 1.56, 1.24, 1.09, 1.07, 1.06, 1.03, 0.92, 0.86, 0.83, 0.82, 0.61, 0.6, 0.6, 0.58, 0.52, 0.44, 0.42, 0.38, 0.31, 0.29, 0.25, 0.21, 0.19, 0.18, 0.13],
x0: ['文学', '经济', '历史', '医学', '教育学'],
y0: [20.93, 11.42, 5.48, 5.02, 4.91],
}, {
title: '123.5-197.5B Tokens数据分布',
title: '123.5-197.5B Tokens主要数据分布',
x: ['文学', '经济', '其他', '法律', '政治', '医学', '教育学', '体育', '游戏娱乐', '历史', '计算机科学', '休闲旅游', '影视影评', '电子商务', '电子信息科学', '艺术', '食品科学', '轻工业', '农业科学', '心理学', '管理学', '交通运输', '能源科学', '环境科学', '安全科学与消防工程', '广告营销', '军事', '材料科学', '地理', '宗教', '哲学', '生物科学', '城市规划与建设', '重工业', '化学科学', '气象学', '天文学', '通信技术', '物理科学', '数学科学'],
y: [19.42, 11.95, 10.82, 8.62, 5.43, 4.82, 3.79, 3.76, 3.06, 2.92, 2.37, 2.11, 2.09, 1.89, 1.37, 1.34, 1.31, 1.25, 1.07, 1.03, 1, 0.99, 0.89, 0.81, 0.65, 0.59, 0.58, 0.53, 0.49, 0.45, 0.37, 0.37, 0.36, 0.29, 0.28, 0.24, 0.24, 0.19, 0.15, 0.12],
x0: ['文学', '经济', '法律', '政治', '医学'],
y0: [19.42, 11.95, 8.62, 5.43, 4.82],
}, {
title: '197.5-284.5B Tokens数据分布',
title: '197.5-284.5B Tokens主要数据分布',
x: ['文学', '法律', '其他', '经济', '医学', '历史', '政治', '教育学', '游戏娱乐', '体育', '影视影评', '休闲旅游', '计算机科学', '心理学', '电子商务', '艺术', '食品科学', '电子信息科学', '管理学', '轻工业', '农业科学', '交通运输', '能源科学', '环境科学', '哲学', '军事', '安全科学与消防工程', '宗教', '材料科学', '广告营销', '地理', '生物科学', '城市规划与建设', '化学科学', '天文学', '重工业', '气象学', '物理科学', '通信技术', '数学科学'],
y: [29.72, 20.27, 7.48, 7.29, 3.47, 3.44, 3.14, 2.77, 2.61, 2.33, 1.66, 1.43, 1.38, 1.06, 1.02, 1, 0.94, 0.83, 0.78, 0.74, 0.74, 0.57, 0.52, 0.51, 0.5, 0.5, 0.41, 0.39, 0.38, 0.37, 0.29, 0.24, 0.22, 0.19, 0.17, 0.17, 0.16, 0.13, 0.11, 0.09],
x0: ['文学', '法律', '经济', '医学', '历史'],
y0: [29.72, 20.27, 7.29, 3.47, 3.44,],
}, {
title: '284.5-344.5B Tokens数据分布',
title: '284.5-344.5B Tokens主要数据分布',
x: ['文学', '法律', '其他', '经济', '教育学', '政治', '医学', '体育', '游戏娱乐', '历史', '休闲旅游', '计算机科学', '影视影评', '电子商务', '食品科学', '艺术', '轻工业', '心理学', '电子信息科学', '农业科学', '管理学', '环境科学', '交通运输', '能源科学', '安全科学与消防工程', '军事', '广告营销', '宗教', '材料科学', '哲学', '城市规划与建设', '重工业', '地理', '生物科学', '气象学', '天文学', '化学科学', '通信技术', '物理科学', '数学科学'],
y: [18.27, 12.97, 11.54, 10.65, 4.16, 4.12, 4.1, 3.43, 3.17, 2.84, 2.26, 2.2, 2.09, 1.8, 1.39, 1.38, 1.31, 1.15, 1.14, 1.1, 1.02, 0.83, 0.83, 0.77, 0.65, 0.61, 0.58, 0.54, 0.49, 0.37, 0.33, 0.3, 0.3, 0.25, 0.25, 0.21, 0.2, 0.17, 0.12, 0.1],
x0: ['文学', '法律', '经济', '教育学', '政治'],
y0: [18.27, 12.97, 10.65, 4.16, 4.12],
}]
}]
};
@@ -292,8 +334,10 @@ export default {
const chart = charts[i];
const options = JSON.parse(JSON.stringify(templateOptions));
options.title.text = chart.title;
options.xAxis.data = chart.x.slice(0);
options.series[0].data = chart.y.slice(0);
// options.xAxis.data = chart.x.slice(0);
// options.series[0].data = chart.y.slice(0);
options.xAxis.data = chart.x0.slice(0);
options.series[0].data = chart.y0.slice(0);
const chartHandler = echarts.init(document.querySelector(`.chart-el-${i}`));
chartHandler.setOption(options);
chartHandlers.push(chartHandler);
@@ -422,7 +466,7 @@ export default {
.model-card {
flex: 1;
max-width: 540px;
height: 270px;
align-self: stretch;
border-color: rgba(201, 188, 234, 0.4);
border-width: 1px;
border-style: solid;
@@ -512,6 +556,24 @@ export default {
}
}

.link {
display: flex;
margin-top: 16px;

a {
display: flex;
align-items: center;
height: 40px;
border-width: 1px;
border-style: solid;
color: rgb(16, 16, 16);
border-radius: 20px;
padding: 0 16px;
border-color: rgb(201, 188, 234);
background: rgb(238, 242, 255);
}
}

.ops {
a {
display: inline-block;
@@ -571,7 +633,6 @@ export default {
padding: 32px;

.descr p {
white-space: pre-line;
font-size: 16px;
color: #101010;
line-height: 24px;
@@ -638,9 +699,16 @@ export default {
}
}

.chart-el {
height: 400px;
margin-bottom: 40px;
.chart-el-c {
margin-top: 20px;
display: flex;
flex-wrap: wrap;

.chart-el {
flex-basis: calc(33%);
height: 400px;
margin-bottom: 40px;
}
}
}

@@ -648,6 +716,20 @@ export default {
.model-tab-content {
border-radius: 10px;
}

.model-tab-content .chart-el-c {
.chart-el {
flex-basis: calc(33.3%);
}
}
}

@media only screen and (max-width: 1200px) {
.model-tab-content .chart-el-c {
.chart-el {
flex-basis: calc(49%);
}
}
}

@media only screen and (max-width: 1000px) {
@@ -735,6 +817,13 @@ export default {
}
}

.models .model-card-c .model-card .link a {
height: 34px;
border-radius: 17px;
padding: 0 12px;
font-size: 14px;
}

.model-tab .tab-item {
font-size: 14px;
height: 46px;
@@ -766,5 +855,11 @@ export default {
margin-top: 20px;
margin-bottom: 10px;
}

.model-tab-content .chart-el-c {
.chart-el {
flex-basis: calc(99%);
}
}
}
</style>

Loading…
Cancel
Save