From 2a1a1716209d92725c044103c074a4d39d6c4e60 Mon Sep 17 00:00:00 2001
From: OpenIhu <hujl@pcl.ac.cn>
Date: Tue, 6 Jul 2021 09:45:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B02021=E7=89=88=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/base/head_home.tmpl |   2 +-
 templates/home.html           |   2 +-
 templates/home.tmpl           | 204 +++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 205 insertions(+), 3 deletions(-)

diff --git a/templates/base/head_home.tmpl b/templates/base/head_home.tmpl
index ba58e14ac..32eeb7f76 100644
--- a/templates/base/head_home.tmpl
+++ b/templates/base/head_home.tmpl
@@ -196,7 +196,7 @@ var _hmt = _hmt || [];
 
       {{if not .PageIsInstall}}
         <div class="ui container">
-          <div class="ui top secondary stackable main menu following bar">
+          <div class="ui top secondary stackable main menu following bar">		  
             {{template "base/head_navbar" .}}
           </div><!-- end bar -->
         </div>
diff --git a/templates/home.html b/templates/home.html
index a6de01e67..139d0e25b 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -142,7 +142,7 @@
     <div class="ui vertical masthead secondary hometop segment">
 
       <div class="ui container">
-        <div class="ui top secondary main menu following bar">
+        <div class="ui top secondary stackable main menu following bar">
           <div class="ui container" id="navbar">
             <div class="item brand" style="justify-content: space-between;">
               <a href="https://openi.org.cn/">
diff --git a/templates/home.tmpl b/templates/home.tmpl
index 4064528eb..e60a945cb 100755
--- a/templates/home.tmpl
+++ b/templates/home.tmpl
@@ -1,6 +1,208 @@
 {{template "base/head_home" .}}
-
+    <div class="ui container homebanner">
+        <h1 class="ui header">
+        启智AI开发协作平台
+        <div class="sub header">
+            面向AI领域的一站式协同开发环境
+        </div>
+        </h1>
+        <p class="am-lh-18">免费私有代码仓库，免费计算资源，大容量数据存储，<br>多类型硬件环境(GPU、NPU)，AI开发流水线（开发-调试-训练-迭代）</p>
+        <a class="circular ui secondary button" href="{{AppSubUrl}}/explore/users">立即使用 <i class="right arrow icon"></i></a>
+        <div class="bannerpic"><img class="ui fluid image" src="/img/gitopeni-index-01.svg"></div>
+    </div>
 </div><!-- end segment -->
 
+<div class="explore repositories">
+    <div class="ui sticky container">
+        <div class="ui secondary pointing fluid five item menu" style="background-color: #FFF;">
+            <a class="item" href="#first">代码</a>
+            <a class="item" href="#second">数据</a>
+            <a class="item" href="#third">AI流水线</a>
+            <a class="item" href="#fourth">协同开发</a>
+            <a class="item" href="#fifth">云脑协同</a>
+        </div>
+    </div>
+
+    <div id="railContent">
+        <a name="first"></a>
+        <div class="ui container am-mt-30 basic tab i-code active" style="position: relative;">
+            <div class="ui inverted very padded segment radius15 am-pl-30">
+                <div class="ui mobile reversed stackable grid am-pl-30">
+                    <div class="six wide column">
+                        <h2 class="ui huge blue header">代码管理</h2>
+                        <p class="am-lh-18">在这里为你和你的团队创建项目，基于Git工具，提交记录或者回滚代码修改。<br>
+                        不论是公开或者私有仓库，都可免费使用所有功能。<br>
+                        尽情将你喜欢的代码都放在这里，仓库数量、存储容量不受限</p>
+                        <a class="ui blue basic button am-mt-20" href="{{AppSubUrl}}/explore/users">立即使用</a>
+                    </div>
+                    <div class="ten wide column computer only i-code-pic am-pt-30">
+                        <img class="ui fluid rounded image am-shadow-2 am-mt-10" src="/img/i-code-pic.jpg" style="position: absolute;">
+                    </div>
+                </div>          
+            </div>
+            <div class="am-mt-30 am-pt-30 am-pl-30">
+                <div class="am-pl-30 am-pb-30">
+                <h2 class="ui huge header am-bw">协作开发</h2>
+                <p class="am-lh-18">鼓励通过创建合并请求（PR)的方式，更好的进行团队协作<br>
+                    代码评审让每一次的代码修改得以二次确认，提高代码质量<br>
+                    创建并指派任务(Issue)，让每一个任务的进展有迹可循，规范管理<br>
+                    被合并的PR，可获得奖励积分；积分总额可以显示出你在项目中的贡献度，也许有一天会有人愿意为此付费<br>
+                    </p>
+                </div>  
+            </div>
+            <div class="leftline01"></div>
+        </div>
+
+        <a name="second"></a>
+        <div class="ui basic tab active am-mt-30 bg-gray am-pt-30">
+            <div class="ui container i-data" style="position: relative;">
+                <div class="leftline02"></div>
+                <div class="ui stackable grid">
+                    <div class="nine wide column">
+                        <img class="ui centered medium rounded large image" src="/img/gitopeni-index-02.svg">
+                        <div class="i-code-pic" style="margin-top: -4.0rem;">
+                            <img class="ui fluid rounded image am-shadow-2" src="/img/i-data-pic.jpg">
+                        </div>
+                    </div>
+                    <div class="seven wide column am-pt-30">
+                        <h2 class="ui huge blue header">数据集管理</h2>
+                        <p class="am-lh-18">
+                        数据是重要的生产要素，AI开发更是离不开数据；<br>
+                        - 数据与模型代码的协同，可在项目中上传关联的数据集；<br>
+                        - 数据存储免费，不限制文件大小；<br>
+                        - 数据可共享，标注清洗过的公开数据集，用户可设置为公有数据，供社区用户下载；                
+                        </p>
+                        <div class="am-mt-30 am-pt-20"></div>
+                        <h2 class="ui huge header">使用数据集</h2>
+                        <p class="am-lh-18">
+                        数据集可以直接用于训练或者推理任务中<br>
+                        创建任务时选择对应的数据集，启动任务执行环境(Docker)后，即可在Docker内访问到你的代码和数据，就像在你本地执行一样                
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div> 
+
+        <a name="third"></a>
+        <div class="ui basic tab active container am-mt-30 am-pt-30">
+            <h2 class="ui center aligned huge blue header am-pt-30">
+                AI流水线
+                <div class="sub header am-mt-10">提供集代码开发、数据管理、模型调试、推理和评测为一体的AI开发流水线</div>
+            </h2> 
+            <div class="ui divider"></div>
+            <div class="ui centered grid">
+                <div class="fourteen wide column">
+                    <div class="ui two column grid">
+                        <div class="column">
+                            <div class="ui small header">调试任务：</div>
+                            <div class="ui bulleted list">
+                                <div class="item">配置模型运行环境；</div>
+                                <div class="item">可在线编辑和调试模型代码，并将改动更新至代码仓库；</div>       
+                                <div class="item">基于编辑好的脚本，开展模型评测任务；</div>                       
+                            </div>
+                        </div>
+                        <div class="column">
+                            <div class="ui small header">作业任务：</div>
+                            <div class="ui bulleted list">
+                                <div class="item">利用已配置好的模型运行环境；</div>
+                                <div class="item">基于编辑好的脚本，一键运行，开展模型训练或模型推理任务；</div>    
+                            </div>
+                        </div>
+                    </div>  
+                </div>            
+            </div>
+            <div class="ui divider"></div>
+            <img class="ui centered image" src="/img/develop.svg">
+        </div>
+
+        <a name="fourth"></a>
+        <div class="ui basic tab active container am-mt-30 am-pt-30 i-env">
+            <h2 class="ui center aligned huge blue header am-pt-30">
+                协同开发环境
+                <div class="sub header am-mt-10">启智AI协作开发平台与传统git平台最大的不同就在于提供了面向AI开发的协同开发环境</div>
+            </h2> 
+            <div class="ui four stackable cards am-mt-20">
+                <div class="card">
+                    <div class="image">
+                        <img src="/img/i-pic-01.svg">
+                    </div>
+                    <div class="content">
+                        <a class="ui centered header">开发要素统一管理</a>
+                        <div class="description">
+                        平台提供了AI开发四大要素：模型代码、数据集、模型和执行环境的统一管理
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="image">
+                        <img src="/img/i-pic-02.svg">
+                    </div>
+                    <div class="content">
+                        <a class="ui centered header">数据协同与共享</a>
+                        <div class="description">
+                        通过在项目中上传数据集，项目成员多人协作完成数据预处理；也可以通过将数据设置为公有数据集，与社区开发者共同建立更好的模型
+                        </div>
+                    </div>
+                </div>
+                    <div class="card">
+                    <div class="image">
+                        <img src="/img/i-pic-03.svg">
+                    </div>
+                    <div class="content">
+                        <a class="ui centered header">模型管理与共享</a>
+                        <div class="description">
+                        将模型与代码版本建立关联，可以基于代码历史版本，使用不同的方式调整模型，并将结果保存下来；训练好的模型可以开放共享，让更多人的使用模型测试并提出反馈
+                        </div>
+                    </div>
+                </div>
+                    <div class="card">
+                    <div class="image">
+                        <img src="/img/i-pic-04.svg">
+                    </div>
+                    <div class="content">
+                        <a class="ui centered header">一次配置，多次使用</a>
+                        <div class="description">
+                        提供执行环境共享，一次配置，多次使用，降低模型开发门槛，避免花费重复的时间配置复杂的环境
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <a name="fifth"></a>
+        <div class="ui basic tab active container am-mt-30 am-pt-30">
+            <div class="ui very padded black inverted segment radius15">
+                <div class="ui stackable grid">
+                    <div class="six wide column">
+                        <img class="ui centered large image" src="/img/i-yunnao.svg">              
+                    </div>
+                    <div class="ten wide column am-pt-30">
+                        <h2 class="ui huge blue header">鹏城云脑开源协同</h2>
+                        <p class="am-lh-18">
+                        平台已经与鹏城云脑打通，可以利用鹏城云脑的丰富算力资源，完成AI开发任务<br>
+                        鹏城云脑现有AI算力100P FLOPS@FP16（每秒十亿亿次半精度浮点计算），主要硬件基础设施由搭载英伟达Tesla V100 的GPU服务器和搭载鲲鹏、昇腾处理器的Atlas 900 AI集群构成<br>
+                        开发者可以根据使用需求，自由选择相应计算资源，可以测试模型在不同硬件环境下的适配能力、性能、稳定性等<br>
+                        如果您的模型需要更多的计算资源，也可以单独申请<br>               
+                        </p>
+                        <a class="ui blue basic button am-mt-20" href="{{AppSubUrl}}/explore/users">马上使用</a> <a class="ui grey basic button am-mt-20" href="{{AppSubUrl}}/explore/users">单独申请</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="am-mt-30"></div>
+
+    </div><!-- end railContent -->
+
+</div><!-- end explore -->
+<script>
+    $('.menu .item')
+        .tab();
+    $('.ui.sticky')
+    .sticky({
+        context: '#railContent',
+        observeChanges: true,
+    })
+    .sticky('refresh');
+</script>
 
 {{template "base/footer" .}}
\ No newline at end of file