congzc 2 anos atrás
pai
commit
5ac88ba082
5 arquivos alterados com 8344 adições e 8277 exclusões
  1. +31
    -31
      package.json
  2. +4
    -4
      src/components/common/top.vue
  3. +70
    -55
      src/components/home/home.vue
  4. +59
    -7
      src/components/views/live.vue
  5. +8180
    -8180
      yarn.lock

+ 31
- 31
package.json Ver arquivo

@@ -1,31 +1,31 @@
{
"name": "Metavatar",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"element-ui": "^2.15.9",
"lib-flexible": "^0.3.2",
"postcss-px2rem-exclude": "0.0.6",
"register-service-worker": "^1.7.1",
"swiper": "^4.5.1",
"video.js": "^7.20.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-pwa": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"node-sass": "6.0.1",
"sass-loader": "7.0.3",
"vue-template-compiler": "^2.6.11"
}
}
{
"name": "Metavatar",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"element-ui": "^2.15.9",
"lib-flexible": "^0.3.2",
"postcss-px2rem-exclude": "0.0.6",
"register-service-worker": "^1.7.1",
"swiper": "^4.5.1",
"video.js": "^7.20.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-pwa": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"node-sass": "6.0.1",
"sass-loader": "7.0.3",
"vue-template-compiler": "^2.6.11"
}
}

+ 4
- 4
src/components/common/top.vue Ver arquivo

@@ -14,11 +14,11 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="MetaGene">
{{ characters == 1 ? '邃芒慧生' : 'MetaGene' }}
{{ characters == 1 ? '慧生' : 'MetaGene' }}
</el-dropdown-item>
<el-dropdown-item command="MetaManeuver">{{ characters == 1 ? '邃芒慧播' : 'MetaManeuver' }}</el-dropdown-item>
<el-dropdown-item command="MetaStream">{{ characters == 1 ? '邃芒慧影' : 'MetaStream' }}</el-dropdown-item>
<el-dropdown-item command="MetaTuring">{{ characters == 1 ? '邃图灵' : 'MetaTuring' }}</el-dropdown-item>
<el-dropdown-item command="MetaManeuver">{{ characters == 1 ? '慧播' : 'MetaStreaming' }}</el-dropdown-item>
<el-dropdown-item command="MetaStream">{{ characters == 1 ? '慧影' : 'MetaNeuver' }}</el-dropdown-item>
<el-dropdown-item command="MetaTuring">{{ characters == 1 ? '邃芒慧侃' : 'MetaTuring' }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>


+ 70
- 55
src/components/home/home.vue Ver arquivo

@@ -4,15 +4,14 @@
<video ref="video" src="../../assets/video/P1 横版_x264.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" />
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">打造自主数字人IP 沉淀数字资产</div>
<div class="title_item3" v-if="characters == 1">自动化实时创作过程 帮助您快速定义形象 多种类型</div>
<div class="title_item3" v-if="characters == 1">创造生成 超真实 超写实 风格化 不同性别</div>
<div class="title_item3" v-if="characters == 1">多人种 分身化身随心创造</div>
<div class="title_item3" style="margin-top: 5px" v-if="characters == 1">自动化实时创作过程 帮助您快速定义形象</div>
<div class="title_item3" style="margin-top: 5px" v-if="characters == 1">多种类型创造生成 超真实 超写实 风格化</div>
<div class="title_item3" style="margin-top: 5px" v-if="characters == 1">不同性别 多人种 分身化身随心创造</div>
<div class="title_item1_y" v-if="characters != 1">Create virtual human IP</div>
<div class="title_item2" v-if="characters != 1">for your business as digital assets</div>
<div class="title_item3" v-if="characters != 1">
Automatic creation process, speed up character defined from months to hours Diversity character types, ultra-realistic, stylized or customized freely
</div>
<div class="title_item1_y" v-if="characters != 1">Create virtual human IP for your business as digital assets</div>
<div class="title_item2" v-if="characters != 1"></div>
<div class="title_item3" v-if="characters != 1">Automatic creation process, speed up character defined from months to hours</div>
<div class="title_item3" v-if="characters != 1">Diversity character types, ultra-realistic, stylized or customized freely</div>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
@@ -21,7 +20,7 @@
<div class="md1" id="md1"></div>
</div>
<div class="module_2" id="module_2">
<div class="module_2" id="module_2" :class="characters != 1 ? 'mb10' : ''">
<div class="characters_l">
<div class="titleBox">
<div class="title">
@@ -32,16 +31,15 @@
<div class="title_ctn1">
{{
characters == 1
? '文字/语音驱动生成数字人,邃芒技术所呈现的高自然度,以及多语言多种输入方式'
: 'Text/audio manipulate the virtual human created, Metavatar AIGC delivers high resolution, naturally and vividly character moves.'
? '文字/语音驱动生成数字人,邃芒技术所呈现的高自然度,以及多语言多种输入方式'
: 'Text/Audio manipulates the virtual human by supporting users to input different languages text'
}}
</div>
<div class="title_ctn1">
{{
characters == 1
? '让您的数字人可以快速进行内容生产,真正实现智能全自动的内容生产(AIGC)。'
: 'supporting multiple languages and inputs, generating digital content, bring new intelligence experience far more exciting than before .'
}}
{{ characters == 1 ? '让您的数字人可以快速进行内容生产,真正实现智能全自动的内容生产(AIGC)' : 'Metavatar AIGC pipline delivers high resolution, naturally and vividly character moves ' }}
</div>
<div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 50px">
{{ 'All in few minutes, bring new intelligence experience far more exciting than ever' }}
</div>
</div>
</div>
@@ -55,16 +53,13 @@
<div class="ctnBox">
<div class="title_ctn1">
{{
characters == 1
? '中之人驱动数字形象,快速生产各种背景下的视频,短片,影视剧等,让您的数字人轻松进入各种复杂场景,'
: 'Metavatar also supports the “中の人“ vtuber manipulation. Generating videos and broadcasting content on demand in any complex cases.'
}}
{{ characters == 1 ? '中之人驱动数字形象,快速生产各种背景下的视频,短片,影视剧等,让您的数字人轻松进入各种复杂场景' : 'Metavatar also supports the “中の人“ vtuber manipulation' }}
</div>
<div class="title_ctn1">
{{
characters == 1 ? '为企业在数字内容上提供丰富的体验,大幅节省成本提高生产效率。' : 'Provide extremely expenses saving & extendable user experience in digital content producing process.'
}}
{{ characters == 1 ? '为企业在数字内容上提供丰富的体验,大幅节省成本提高生产效率' : 'Generating videos and broadcasting content on demand in any complex cases' }}
</div>
<div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 20px">
{{ 'Provide cost saving & extendable user experience ifor digital content producation' }}
</div>
</div>
</div>
@@ -133,7 +128,8 @@
</div>
<div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology">
<img src="../../assets/img/module_5_bg_cut.png" alt="" />
<img src="../../assets/img/module_5_bg1.png" alt="" />
<!-- <img src="../../assets/img/module_5_bg_cut.png" alt="" /> -->
<div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
<div class="title">
{{ characters == 1 ? '快速 高效 完美' : 'Flexible and Vivid Avatar' }}
@@ -141,31 +137,29 @@
<div class="paragraph">
{{
characters == 1
? 'MetaGene是邃芒科技自主技术研发的自动化数字人平台,以GAN(生成对抗网络)、NeRF(神经辐射场)、多模态合成技术为基础,并加持NLP与知识图谱能力,建设元宇宙的基础设施。MetaGene 实现无人工干预的形象创造、数字人驱动以及智能交互全流程,通过MetaGene可以实时创造高辨率的虚拟数字人形象,数字分身,并且可以自由的编辑及风格化。'
: 'MetaGene is an automated digital human platform developed by Metavatar. MetaGene is based on GAN (Generative Adversarial Network), NeRF (Neural Radiation Field) and multimodal synthesis technology, combined by NLP and knowledge graph capabilities to build the infrastructure of the Metaverse. '
? 'Metavatar是邃芒科技自主技术研发的自动化数字人平台,以GAN(生成对抗网络)、Stable Diffusion(扩散模型),NeRF(神经辐射场)、多模态合成技术为基础,并加持NLP与知识图谱能力,形成了数字人全链路的AIGC能力. 实现无人工干预的形象创造、数字人驱动, 视频生产以及智能交互全流程。'
: 'Metavatar is an automated digital human platform developed by a group of telant engineers & researchers. Metavatar is based on GAN (Generative Adversarial Network), Stable Diffusion, NeRF (Neural Radiation Field) and multimodal synthesis technology, combined by NLP and knowledge graph capabilities to build a powerful AIGC paltform, Generative images, video, broadcasting automatically. '
}}
</div>
<!-- <div class="paragraph" v-if="characters != 1">
User can experiences a completely automatic process of character
creation, manipulation and intelligent interaction without any
intervention.MetaGene provides high-resolution virtual digital human ,
“digital twin”, symbolization characters editable freely rapidly.
</div> -->
<div class="paragraph">
{{
characters == 1
? 'MetaGene不仅支持通过语音、文字、视频等多种有/无中之人的数字人驱动方式,为用户生成实时的生成高质量的视频内容;还通过先进技术手段降低前端算力依赖,解决直播实时性等复杂场景问题。'
: 'MetaGene not only supports real-time high-quality video content generation for users through voice, text, video and other manipulation approaches; It also reduces the front-end computing power cost and compatible in the complex scenario, such as live broadcast real-time.'
? 'Metavatar 实时创造高辨率的虚拟数字人形象,数字分身,并且可以自由的编辑及风格化。不仅支持通过语音、文字、视频等多种有/无中之人的数字人驱动方式,为用户生成实时的生成高质量的视频内容;还通过先进技术手段降低前端算力依赖,解决直播实时性等复杂场景问题。'
: 'User can experiences a completely automatic process of character creation, manipulation and intelligent interaction without any intervention.Metavatar provides high-resolution virtual digital human , “digital twin”, symbolization characters editable freely rapidly.'
}}
</div>
<div class="paragraph">
{{
characters == 1
? 'MetaGene为数字人提供了智能交互的能力,让输出的形象具备智能化互动功能,帮助处理实际业务中的问题,协助完成任务。'
: 'MetaGene provides digital human with the interactive ability, the character will have intelligent interactive functions, help to deal with real world problems in the business and assistance in completing tasks.'
? 'Metavatar 能够赋予数字人智能交互的能力,通过语音文字和用户互动,让输出的形象智能化,帮助处理实际业务中的问题,协助完成各种场景任务。'
: 'Metavatar not only supports real-time high-quality video content generation for users through voice, text, video and other manipulation approaches; It also reduces the front-end computing power cost and compatible in the complex scenario, such as live broadcast real-time, makes the whole generative digital human quie affordable. '
}}
</div>
<div class="paragraph" v-if="characters != 1">
{{
' Metavatar provides digital human with the interactive ability, the character will have intelligent interactive functions, help to deal with real world problems in the business and assistance in completing tasks.'
}}
</div>
@@ -234,11 +228,21 @@
: "Metavatar is founded in August 2021, the team built up in year 2018. "
}}
</div> -->
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'" :style="characters == 1 ? 'margin-top: 30px' : ''">
{{ characters == 1 ? `北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月,` : 'Metavatar is founded in August 2021, the team built up in year 2018.' }}
</div>
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'" style="white-space: pre-wrap">
{{
characters == 1
? `3年迭代形成AI技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才。`
: "In the past 3 years, Metavatar has iteratively been forming the whole production process of digital human based on AI technology. We own the industry's top AI image generation and driving technology, and has accumulated unique Asian surreal digital human data assets, which have been successfully used in industrial-grade film and television, brand owners and live broadcasts. The team is from scientific research institutions and first-class institutes, with PhD and Masters from the UTS, BUPT , CAS, Tsinghua University and first-class talents in the industry."
}}
</div>
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'" style="white-space: pre-wrap">
{{
characters == 1
? '北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月,3年迭代形成AI技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才。邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。'
: "Metavatar is founded in August 2021, the team built up in year 2018.In the past 3 years, Metavatar has iteratively been forming the whole production process of digital human based on AI technology. We own the industry's top AI image generation and driving technology, and has accumulated unique Asian surreal digital human data assets, which have been successfully used in industrial-grade film and television, brand owners and live broadcasts. The team is from scientific research institutions and first-class institutes, with PhD and Masters from the UTS, BUPT , CAS, Tsinghua University and first-class talents in the industry.Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way."
? `邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。`
: 'Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way.'
}}
</div>
<!-- <div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
@@ -269,6 +273,7 @@
</div>
</swiper-slide>
</swiper> -->
<!-- ---------------------------------------------- -->
<div class="timeF">
<div
class="itemBox"
@@ -290,6 +295,7 @@
</div>
</div>
</div>
<!-- ------------------------------------------------- -->
</div>
<div class="cooperationBox" v-if="characters == 1">
@@ -869,6 +875,7 @@ export default {
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #202020;
.titleBox {
width: 36%;
@@ -885,12 +892,15 @@ export default {
// margin-bottom: 14px;
font-size: 42px;
}
.title_item1 {
margin-bottom: 30px;
}
.title_item2 {
margin-bottom: 20px;
font-size: 42px;
}
.title_item3 {
font-size: 16px;
font-size: 18px;
line-height: 30px;
}
.title_btn {
@@ -937,7 +947,7 @@ export default {
.ctnBox {
margin-top: 30px;
.title_ctn1 {
font-size: 14px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7e7e7e;
@@ -966,7 +976,7 @@ export default {
.ctnBox {
margin-top: 30px;
.title_ctn1 {
font-size: 14px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7e7e7e;
@@ -975,10 +985,15 @@ export default {
}
}
}
.mb10 {
padding-bottom: 20px;
// margin-top: 40px;
}
.module_3 {
overflow: hidden;
background-color: #202020;
.imgBox1 {
background-color: #fff;
position: relative;
float: left;
width: 49%;
@@ -1090,6 +1105,7 @@ export default {
z-index: 1;
max-width: 100%;
height: 100%;
transition: all 0.3s;
}
// height: 880px;
height: 760px;
@@ -1103,7 +1119,6 @@ export default {
background-position: 166% 20%;
.titleBox {
text-indent: 2em;
position: absolute;
z-index: 2;
// position: absolute;
@@ -1124,7 +1139,7 @@ export default {
margin-bottom: 20px;
font-weight: 400;
color: #7e7e7e;
font-size: 16px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
@@ -1148,7 +1163,6 @@ export default {
}
}
.titleBox1 {
text-indent: 2em;
// position: absolute;
// top: 20%;
// left: 16%;
@@ -1190,10 +1204,11 @@ export default {
img {
position: absolute;
top: 0;
left: 25%;
left: 34%;
z-index: 1;
max-width: 100%;
height: 100%;
transition: all 0.3s;
}
// height: 880px;
height: 760px;
@@ -1207,7 +1222,6 @@ export default {
background-position: 166% 20%;
.titleBox1 {
text-indent: 2em;
position: absolute;
z-index: 2;
// position: absolute;
@@ -1215,19 +1229,19 @@ export default {
// left: 16%;
margin-left: 220px;
margin-top: 5%;
width: 680px;
width: 980px;
.title {
font-size: 48px;
font-family: Inter;
font-weight: 600;
margin-bottom: 70px;
margin-bottom: 20px;
color: #fff;
}
.paragraph {
margin-bottom: 20px;
font-weight: 400;
color: #7e7e7e;
font-size: 16px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 30px;
@@ -1635,13 +1649,14 @@ export default {
margin-top: 10px;
}
.ctn_c {
text-indent: 0;
// width: 434px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7e7e7e;
line-height: 22px;
margin-top: 30px;
// margin-top: 30px;
}
.ctn1 {
width: 436px;
@@ -1657,13 +1672,13 @@ export default {
}
.ctn_c1 {
width: 436px;
height: 222px;
// height: 222px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7e7e7e;
line-height: 30px;
margin-top: 74px;
// margin-top: 74px;
margin-left: auto;
margin-right: auto;
}


+ 59
- 7
src/components/views/live.vue Ver arquivo

@@ -1,7 +1,8 @@
<template>
<div class="Box" id="top">
<div class="module_1">
<img src="../../assets/img/metavatar_live/suiMang_live@2x.png" width="100%" height="100%" />
<video ref="video" src="../../assets/video/P1 横版_x264.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" />
<!-- <img src="../../assets/img/metavatar_live/suiMang_live@2x.png" width="100%" height="100%" /> -->
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧影</div>
<div class="title_item1_y" v-if="characters == 1">数字人内容生产从未如此高效便捷</div>
@@ -47,8 +48,13 @@
<li>
<img src="../../assets/img/metavatar_live/003@2x.png" alt="" />
</li>
<li>
<img src="../../assets/img/metavatar_live/004@2x.png" alt="" />
<li class="videoLi">
<div class="imgBox1" @click="goSetVedio(isPlayed)">
<img v-if="isPlayed" class="play" src="../../assets/img/play.png" title="click to play" />
<img v-else class="play" src="../../assets/img/pause.png" title="click to pause" />
<video ref="videoII" src="../../assets/video/video2.mp4" />
</div>
<!-- <img src="../../assets/img/metavatar_live/004@2x.png" alt="" /> -->
</li>
</div>
</div>
@@ -88,6 +94,7 @@ import { mapState, mapActions } from 'vuex';
export default {
data() {
return {
isPlayed: true,
//零时存放
charactersMy: 1,
languageLsit: [
@@ -339,6 +346,14 @@ export default {
methods: {
...mapActions(['setCharacters']),
goSetVedio(flag) {
if (flag) {
this.$refs['videoII'].play();
} else {
this.$refs['videoII'].pause();
}
this.isPlayed = !flag;
},
change(value) {
console.log(value);
this.setCharacters(value);
@@ -515,7 +530,8 @@ export default {
top: 390px;
left: 194px;
overflow: hidden;
color: #323232;
// color: #323232;
color: #fff;
.title_item1 {
margin-bottom: 14px;
font-size: 60px;
@@ -538,9 +554,11 @@ export default {
width: 220px;
text-align: center;
line-height: 60px;
color: #323232;
color: #fff;
// color: #323232;
border-radius: 40px;
border: #323232 solid 3px;
border: #fff solid 3px;
// border: #323232 solid 3px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
@@ -580,7 +598,7 @@ export default {
li {
list-style: none;
margin-right: 9px;
img {
> img {
width: 423px;
height: 540px;
cursor: pointer;
@@ -592,6 +610,40 @@ export default {
}
}
}
.videoLi {
overflow: hidden;
.imgBox1 {
position: relative;
float: left;
width: 100%;
height: 100%;
cursor: pointer;
.play {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
z-index: 99;
transition: all 0.3s;
transform: scale(10);
opacity: 0;
}
// background-color: #16e9d6;
video {
width: 100%;
height: 100%;
}
&:hover {
.play {
transform: scale(1);
opacity: 1;
}
}
}
}
}
.module_3 {
height: 810px;


+ 8180
- 8180
yarn.lock
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


Carregando…
Cancelar
Salvar