153 lines
9.4 KiB
Vue
153 lines
9.4 KiB
Vue
<template>
|
||
<div class="train-page">
|
||
<div class="grid-bg min-h-screen">
|
||
<main>
|
||
<div class="page-shell">
|
||
<section class="hero-section">
|
||
<div class="hero-content">
|
||
<div class="hero-eyebrow animate-fade-in-up">
|
||
<svg class="icon-svg--xs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||
</svg>
|
||
全新 AI 开发体验
|
||
</div>
|
||
<h1 class="hero-title animate-fade-in-up animate-delay-100">
|
||
<span class="gradient-text">训推平台</span><br>
|
||
<span class="hero-title__sub">AI模型全流程开发</span>
|
||
</h1>
|
||
<p class="hero-description animate-fade-in-up animate-delay-200">
|
||
一站式云端AI开发平台，通过对话即可快速构建智能体、工作流、网页与移动应用，依托强大的云端基础设施实现开箱即用的环境和一键部署服务
|
||
</p>
|
||
|
||
</div>
|
||
<div class="hero-blur hero-blur--blue floating"></div>
|
||
<div class="hero-blur hero-blur--indigo hero-blur--indigo-delay floating"></div>
|
||
</section>
|
||
|
||
<section id="features" class="page-section page-section--soft">
|
||
<div class="section-inner section-inner--wide">
|
||
<div class="section-heading">
|
||
<h2>全链路AI开发能力</h2>
|
||
<p>覆盖从数据处理到模型部署的全流程，一站式解决AI开发需求</p>
|
||
</div>
|
||
<div class="feature-grid">
|
||
<div v-for="feature in features" :key="feature.title" class="feature-card card-hover">
|
||
<div class="feature-card__decor" :class="feature.decorClass"></div>
|
||
<div class="feature-card__body">
|
||
<div class="feature-icon" :class="feature.iconClass">
|
||
<svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="feature.iconPath" />
|
||
</svg>
|
||
</div>
|
||
<h3>{{ feature.title }}</h3>
|
||
<p>{{ feature.desc }}</p>
|
||
<div class="tag-list">
|
||
<span v-for="tag in feature.tags" :key="tag" class="feature-tag">{{ tag }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page-section">
|
||
<div class="section-inner">
|
||
<div class="section-heading">
|
||
<h2>一站式开发流程</h2>
|
||
<p>从想法到产品上线，全流程无缝衔接</p>
|
||
</div>
|
||
<div class="workflow-list">
|
||
<div v-for="(step, index) in workflowSteps" :key="step.title" class="workflow-step" :class="{ 'step-line': index < workflowSteps.length - 1 }">
|
||
<div class="step-num" :class="step.done ? 'step-num--done' : step.iconClass">
|
||
<svg v-if="step.done" class="icon-svg--sm" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg>
|
||
<span v-else>{{ index + 1 }}</span>
|
||
</div>
|
||
<div class="workflow-step__card" :class="{ 'workflow-step__card--final': step.done }">
|
||
<h3 class="workflow-step__title">{{ step.title }}</h3>
|
||
<p class="workflow-step__desc">{{ step.desc }}</p>
|
||
<div v-if="!step.done" class="workflow-step__meta">
|
||
<span class="workflow-step__meta-label">预计时间：</span>
|
||
<span class="workflow-step__meta-value">{{ step.time }}</span>
|
||
</div>
|
||
<div v-else class="workflow-step__status">
|
||
<svg class="icon-svg--xs" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||
</svg>
|
||
已上线运营
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page-section page-section--soft">
|
||
<div class="section-inner section-inner--wide">
|
||
<div class="stats-grid">
|
||
<div v-for="stat in stats" :key="stat.label" class="stat-card card-hover">
|
||
<div class="stat-card__value gradient-text">{{ stat.value }}</div>
|
||
<div class="stat-card__label">{{ stat.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'TrainPlatform',
|
||
data() {
|
||
return {
|
||
features: [
|
||
{ title: '数据处理', desc: '支持数据清洗、标注、增强、数据集格式转换，提供海量数据集预处理能力，让数据准备更高效', tags: ['数据清洗', '智能标注', '数据增强'], iconClass: 'icon-gradient-blue', decorClass: 'decor-gradient-blue', iconPath: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4' },
|
||
{ title: '预训练', desc: '支持7B-200B参数规模的Dense/MoE模型分布式预训练、支持断点续训、支持训练可观测性。', tags: ['DeepSpeed', '多卡训练', '分布式'], iconClass: 'icon-gradient-indigo', decorClass: 'decor-gradient-indigo', iconPath: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z' },
|
||
{ title: '后训练', desc: '支持模型微调、强化学习等后训练操作，低成本高效适配业务场景。', tags: ['LoRA', 'QLoRA', 'Prefix Tuning'], iconClass: 'icon-gradient-purple', decorClass: 'decor-gradient-purple', iconPath: 'M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z' },
|
||
{ title: '量化压缩', desc: '支持FP8、INT8、FP4量化压缩技术，高效推理服务。', tags: ['INT4', 'INT8', 'GPTQ'], iconClass: 'icon-gradient-cyan', decorClass: 'decor-gradient-cyan', iconPath: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z' },
|
||
{ title: '推理部署', desc: '一键部署高性能分布式推理服务、支持PD分离、推测解码、KV缓存等先进推理优化技术', tags: ['vLLM', 'TGI', 'SGLang'], iconClass: 'icon-gradient-green', decorClass: 'decor-gradient-green', iconPath: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
|
||
{ title: '智能体开发', desc: '可视化工作流编排、多智能体交互、丰富的工具集成、深度匹配业务应用', tags: ['工作流', '工具集成', '记忆能力'], iconClass: 'icon-gradient-amber', decorClass: 'decor-gradient-amber', iconPath: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' }
|
||
],
|
||
workflowSteps: [
|
||
{ title: '数据准备', desc: '上传原始数据，使用平台提供的清洗、标注、增强工具进行处理', time: '10-30分钟', iconClass: 'icon-gradient-blue' },
|
||
{ title: '模型训练/微调', desc: '选择基础模型和训练策略，一键启动训练任务，实时监控进度', time: '1-24小时', iconClass: 'icon-gradient-indigo' },
|
||
{ title: '量化优化', desc: '对训练好的模型进行量化压缩，降低部署成本，提升推理速度', time: '30分钟-2小时', iconClass: 'icon-gradient-purple' },
|
||
{ title: '一键部署', desc: '选择推理引擎和配置参数，自动完成服务部署，获取API接口', time: '5-15分钟', iconClass: 'icon-gradient-cyan' },
|
||
{ title: '服务上线', desc: '服务自动弹性扩缩容，实时监控指标，一站式运维管理', done: true }
|
||
],
|
||
stats: [
|
||
{ value: '1.2TB', label: '日处理数据量' },
|
||
{ value: '99.8%', label: '服务可用性' },
|
||
{ value: '2.3x', label: '推理加速' },
|
||
{ value: '75%', label: '存储节省' }
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
handleStart() {
|
||
this.$message.info('开始使用训推平台')
|
||
},
|
||
handleVisit() {
|
||
this.$message.info('访问平台')
|
||
},
|
||
handleLearnMore() {
|
||
this.$message.info('了解更多')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.train-page {
|
||
padding-top: 0;
|
||
}
|
||
|
||
@import './train.css';
|
||
</style>
|