SyuanYu 2 роки тому
батько
коміт
4d0a60041a

+ 426 - 137
layouts/ai-presenter/single.html

@@ -2,165 +2,454 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
-    <meta http-equiv="Cache-Control" content="no-cache">
-    <title>Choozmo Marketing Cloud</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
-    <link rel="stylesheet" href="/css/style.css">
-    <link rel="stylesheet" href="/css/custom.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
+  <meta http-equiv="Cache-Control" content="no-cache">
+  <title>Choozmo Marketing Cloud</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.11.2/css/all.css">
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/custom.css">
 </head>
 
 <body>
-    {{ partial "navbar.html" . }}
+  {{ partial "navbar.html" . }}
 
-    <div class="ai-presenter">
-        <div class="container">
-            <div id="home">
-                <div class="row justify-content-center align-items-center ai-content">
-                    <div class="col-12 col-md-6 d-flex justify-content-center">
-                        <section>
-                            <h2 class="title">製作影片 一鍵合成</h2>
-                            <p>
-                                上傳文字與素材,即速產生影片<br>
-                                大幅省下時間、人力、器材成本<br>
-                                腳本內容直接上鏈,紀錄透明<br>
-                                可以使用集仕多的影片版型<br>
-                                也可以自己客製化
-                            </p>
-                        </section>
-                    </div>
-                    <div class="col-12 col-md-6 my-5 my-md-0">
-                        <div class="position-relative">
-                            <img src="/img/背景紫.png" alt="" class="hero-purple">
-                            <img src="/img/背景橘.png" alt="" class="hero-orange-s">
-                            <img src="/img/textgrp3.png" alt="" class="hero-textgrp">
-                            <img src="/img/video.png" alt="" class="hero-video">
-                            <img src="/img/放大鏡.png" alt="" class="hero-amplify">
-                            <div class="hero-imgfr"><img src="/img/2222.png" alt=""></div>
-                        </div>
-                    </div>
-                    <div class="col-12">
-                        <section class="position-relative img-item">
-                            <img src="/imgs/home/首頁-06.png" alt="">
-                            <p>2022 年集仕多的研發團隊 <br>
-                                在 AI 虛擬人像上有了技術突破 <br>
-                                第三代 AI 虛擬人像 <br>
-                                不僅是視覺、聽覺也更加擬真 <br>
-                                像真正的新聞播報員等級 <br>
-                                現在不只能用集仕多的模板 <br>
-                                可以諮詢我們客製化主播以及字幕邊框</p>
-                        </section>
-                    </div>
-                </div>
+  <div class="ai-presenter">
+    <div class="container">
+      <div id="home">
+        <div class="row justify-content-center align-items-center ai-content">
+          <div class="col-12 col-md-6 d-flex justify-content-center">
+            <section>
+              <h2 class="title">製作影片 一鍵合成</h2>
+              <p>
+                上傳文字與素材,即速產生影片<br>
+                大幅省下時間、人力、器材成本<br>
+                腳本內容直接上鏈,紀錄透明<br>
+                可以使用集仕多的影片版型<br>
+                也可以自己客製化
+              </p>
+            </section>
+          </div>
+          <div class="col-12 col-md-6 my-5 my-md-0">
+            <div class="position-relative">
+              <img src="/img/背景紫.png" alt="" class="hero-purple">
+              <img src="/img/背景橘.png" alt="" class="hero-orange-s">
+              <img src="/img/textgrp3.png" alt="" class="hero-textgrp">
+              <img src="/img/video.png" alt="" class="hero-video">
+              <img src="/img/放大鏡.png" alt="" class="hero-amplify">
+              <div class="hero-imgfr"><img src="/img/2222.png" alt=""></div>
             </div>
-
-            <section class="title-item">
-                <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
-                <h4>應用方式</h4>
+          </div>
+          <div class="col-12">
+            <section class="position-relative img-item">
+              <img src="/imgs/home/首頁-06.png" alt="">
+              <p>2022 年集仕多的研發團隊 <br>
+                在 AI 虛擬人像上有了技術突破 <br>
+                第三代 AI 虛擬人像 <br>
+                不僅是視覺、聽覺也更加擬真 <br>
+                像真正的新聞播報員等級 <br>
+                現在不只能用集仕多的模板 <br>
+                可以諮詢我們客製化主播以及字幕邊框</p>
             </section>
+          </div>
+        </div>
+      </div>
 
-            <section class="title-item">
-                <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
-                <h4>使用情境</h4>
-            </section>
+      <section class="title-item my-5">
+        <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
+        <h4>應用方式</h4>
+      </section>
 
-            <div class="row usecace-list">
-                <div class="col-6 col-md-3">
-                    <img src="/imgs/ai-presenter/usecace-01.png" alt="">
-                    <h5>產品介紹</h5>
-                </div>
-                <div class="col-6 col-md-3">
-                    <img src="/imgs/ai-presenter/usecace-02.png" alt="">
-                    <h5>教育培訓</h5>
-                </div>
-                <div class="col-6 col-md-3">
-                    <img src="/imgs/ai-presenter/usecace-03.png" alt="">
-                    <h5>資訊傳播</h5>
-                </div>
-                <div class="col-6 col-md-3">
-                    <img src="/imgs/ai-presenter/usecace-04.png" alt="">
-                    <h5>個人內容創作</h5>
+      <div class="mp4-box">
+        <video controls>
+          <source src="/imgs/ai-presenter/AI_Spokesgirl_v3.mp4" type="video/mp4">
+        </video>
+      </div>
+
+      <section class="title-item mb-3">
+        <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
+        <h4>使用情境</h4>
+      </section>
+
+      <div class="row usecace-list">
+        <div class="col-6 col-md-3">
+          <img src="/imgs/ai-presenter/usecace-01.png" alt="">
+          <h5>產品介紹</h5>
+        </div>
+        <div class="col-6 col-md-3">
+          <img src="/imgs/ai-presenter/usecace-02.png" alt="">
+          <h5>教育培訓</h5>
+        </div>
+        <div class="col-6 col-md-3">
+          <img src="/imgs/ai-presenter/usecace-03.png" alt="">
+          <h5>資訊傳播</h5>
+        </div>
+        <div class="col-6 col-md-3">
+          <img src="/imgs/ai-presenter/usecace-04.png" alt="">
+          <h5>個人內容創作</h5>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12 col-md-6">
+          <div class="video-left">
+            <a href="https://youtu.be/js2y4fQciLw" target="_blank">
+              <strong>快速模板範例</strong>
+              <img src="/imgs/ai-presenter/裝飾-04.png" alt="" class="click-img">
+            </a>
+            <div class="video-box">
+              <iframe width="560" height="315"
+                src="https://www.youtube.com/embed/js2y4fQciLw?autoplay=1&loop=1&mute=1&playlist=js2y4fQciLw"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen></iframe>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-6 mt-5 mt-md-0">
+          <div class="video-right">
+            <a href="https://youtu.be/rTML9TAsUS8" target="_blank">
+              <strong>客製化影片範例</strong>
+              <img src="/imgs/ai-presenter/裝飾-04.png" alt="" class="click-img">
+            </a>
+            <div class="video-box">
+              <iframe width="560" height="315"
+                src="https://www.youtube.com/embed/rTML9TAsUS8?autoplay=1&loop=1&mute=1&playlist=rTML9TAsUS8"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid step-content">
+      <div style="border: 2px solid #C791C1; padding-bottom: 40px;">
+        <img src="/imgs/ai-presenter/裝飾-05.png" alt="" class="bg-top">
+        <img src="/imgs/ai-presenter/裝飾-06.png" alt="" class="bg-bottom">
+        <div class="container">
+          <section class="title-item">
+            <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
+            <h4>快速製作模板</h4>
+          </section>
+
+          <ul class="mt-5">
+            <li>
+              <h4>1. 註冊 AI Spokesgirl 專屬帳號</h4>
+              <p class="excerpt">一旦註冊即送 60 秒影片製作服務,使用滿意可後續加值</p>
+              <div class="d-flex justify-content-center">
+                <a href="https://video.choozmo.com/register.html" class="link-btn" target="_blank">點我免費註冊</a>
+              </div>
+            </li>
+            <li>
+              <h4>2. 準備影片內容</h4>
+              <p class="excerpt">準備一個資料夾,裡面有一個 "素材資料夾" 跟 "EXCEL 檔"</p>
+              <img src="/imgs/ai-presenter/step-01.png" alt="" class="mb-4">
+              <p class="excerpt">素材資料夾裡面放照片或影片</p>
+              <img src="/imgs/ai-presenter/step-02.png" alt="">
+              <small class="d-block ms-4">包含內容:圖片/影片(.jpg/.mp4)</small>
+              <p class="mt-5 excerpt">EXCEL 檔整理成這個格式-大標題、字幕、素材、音檔</p>
+              <img src="/imgs/ai-presenter/step-03.png" alt="">
+              <ul class="point-list">
+                <li>字幕之間的斷句 使用符號【¥】</li>
+                <li>字幕每一句段落勿超過中文 25 字、英文 50 字</li>
+                <li>大標題字數勿超過中文 15 字、英文 30 字</li>
+                <li>音檔留空白</li>
+              </ul>
+              <p class="mt-5 excerpt">以下為顯示效果:</p>
+              <img src="/imgs/ai-presenter/step-04.png" alt="">
+              <p class="mt-5 excerpt">接下來同時選素材資料夾跟 EXCEL 檔,壓縮成 ZIP 檔</p>
+              <img src="/imgs/ai-presenter/step-05.png" alt="" class="my-5">
+            </li>
+            <li>
+              <h4>3. 上傳 ZIP 資料夾至 AI Spokesgirl 平台</h4>
+              <p class="excerpt">影片檔名請寫上影片名稱</p>
+              <img src="/imgs/ai-presenter/step-06.png" alt="">
+              <h4 class="my-5 caption">
+                點選“送出”之後需等待一段影片製作的時間 <br>
+                請您耐心等候,待製作完畢可於通知網址查看
+              </h4>
+              <div class="d-flex justify-content-center">
+                <a href="https://video.choozmo.com/register.html" class="link-btn" target="_blank">立即開始</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid template-content">
+      <div style="border: 2px solid #F27F60; padding-bottom: 40px;">
+        <img src="/imgs/ai-presenter/banner.png" alt="" class="bg-top">
+        <img src="/imgs/ai-presenter/裝飾-06.png" alt="" class="bg-bottom">
+        <div class="container">
+          <section class="title-item">
+            <img src="/imgs/ai-presenter/裝飾-02.png" alt="">
+            <h4>快速製作模板</h4>
+          </section>
+
+          <div class="row justify-content-center info" style="margin-top: 54vw;">
+            <div class="col-12 col-md-6 position-relative">
+              <img src="/imgs/ai-presenter/presenter-01.png" alt="" class="img-fluid img-left">
+              <p class="img-text-left">全身&emsp;/&emsp;半身</p>
+            </div>
+            <div class="col-12 col-md-6 position-relative">
+              <img src="/imgs/ai-presenter/presenter-02.png" alt="" class="img-fluid img-right">
+              <p class="img-text-right">正式服裝&emsp;/&emsp;特殊服裝</p>
+            </div>
+            <div class="col-12 col-md-6">
+              <p class="table-title excerpt">您的選項</p>
+            </div>
+            <div class="col-12 col-md-5">
+              <table class="table table-striped">
+                <tbody>
+                  <tr>
+                    <td>語言</td>
+                    <td>22 國語言</td>
+                  </tr>
+                  <tr>
+                    <td>年齡</td>
+                    <td>5 歲-80 歲</td>
+                  </tr>
+                  <tr>
+                    <td>服裝</td>
+                    <td>正裝/傳統服飾/特殊服裝</td>
+                  </tr>
+                  <tr>
+                    <td>手勢</td>
+                    <td>顯示/不顯示/活潑/正式</td>
+                  </tr>
+                  <tr>
+                    <td>語調</td>
+                    <td>快/慢</td>
+                  </tr>
+                  <tr>
+                    <td>人種</td>
+                    <td>東南亞/歐美/動畫人物</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="col-12 mt-5 d-flex flex-column align-items-center">
+              <section>
+                <p class="excerpt">您可以提供鏡面、字幕框、LOGO 等動畫(mp4 檔案)</p>
+                <img src="/imgs/ai-presenter/demo-01.png" alt="" class="mb-4">
+                <p class="excerpt">參考範例影片</p>
+                <div class="video-box my-4">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/2mcu9aFyHeg"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
                 </div>
+              </section>
             </div>
 
-            <div class="row">
-                <div class="col-6">
-                    <div class="video-left">
-                        <strong>快速模板範例</strong>
-                        <div class="video-box">
-                            <iframe width="560" height="315" src="https://www.youtube.com/embed/js2y4fQciLw"
-                                title="YouTube video player" frameborder="0"
-                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                                allowfullscreen></iframe>
-                        </div>
+            <div class="loaded pageForm">
+              <div class="row">
+                <div class="col-12 col-md-6">
+                  <div class="pageForm-p">
+                    <div class="mb-3">
+                      <div class="pageForm-title">
+                        <h3 class="pageForm-title-h3">AI 主播客製方案 <br> 只要您想得到,我們幫您做到</h3>
+                      </div>
                     </div>
-                </div>
-                <div class="col-6">
-                    <div class="video-right">
-                        <strong>客製化影片範例</strong>
-                        <div class="video-box">
-                            <iframe width="560" height="315" src="https://www.youtube.com/embed/rTML9TAsUS8"
-                                title="YouTube video player" frameborder="0"
-                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                                allowfullscreen></iframe>
-                        </div>
+                    <div class="pageForm-txt mb-3">
+                      <p>
+                        立即留資料,我們將迅速與您聯繫!
+                      </p>
+                    </div>
+                    <div class="pageForm-notice">
+                      <a class="btn-detailForm" href="/contact/service/">填寫詳細表單 &rarr;</a>
+                      <p>填寫該表單將會有專人與你聯繫。<br>
+                        如有問題歡迎來信 service@choozmo.com 或來電 036670804
+                      </p>
                     </div>
+                  </div>
                 </div>
+                <div class="col-12 col-md-6">
+                  <div class="pageForm-p">
+                    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
+                    <script>
+                      hbspt.forms.create({
+                        region: "na1",
+                        portalId: "20485755",
+                        formId: "e08cd305-569c-4913-96f5-4da9f5f90970"
+                      });
+                    </script>
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
+    </div>
+
+    <section class="title-item my-5">
+      <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
+      <h4>BLOG</h4>
+    </section>
+
+   <div class="container">
+    <div class="row sec-blogtab">
+      <div class="col-md-12">
+        <div class="blog-tabs">
+          <ul class="blog-tabs-nav">
+            <li><a href="#blog-tab-1">AI 主播是什麼?</a></li>
+            <li><a href="#blog-tab-2">誰是 AI 主播韓小夏(Summer Hen)?</a></li>
+            <li><a href="#blog-tab-3">AI 主播使用什麼技術?</a></li>
+            <li><a href="#blog-tab-4">全球有哪些 AI 主播?</a></li>
+            <li><a href="#blog-tab-5">新聞主播的工作內容是什麼?</a></li>
+            <li><a href="#blog-tab-6">如何製作一個 AI 主播?</a></li>
+          </ul>
+          <div class="blog-tabs-stage">
+            <div id="blog-tab-1" class="blog-tab-box">
+              <div class="blog-txt">
+                <p>「AI 主播」是透過虛擬人技術的的支持下,通過人臉的關鍵特色偵測、人臉特徵擷取、臉部重構、唇語辨別、情感及表情的分析等多項先進科技 AI
+                  合成主播,並結合圖像及語音等資料建立模型,並且進行模型的訓練精準化模型,生成與真人高度相似的的 AI 虛擬分身模型,進而合成 AI 主播。AI
+                  合成的主播能夠將所輸入的中英文文稿自動生成相對應之影片,在播報過程中 ,AI 主播的音頻、表情以及唇語嘴形可以保持自然一致,聲音乃是 AI 合成聲音 ,AI 主播完全展現出與真人主播無差異的資訊傳達效果。
+                </p>
+              </div>
+            </div>
+            <div id="blog-tab-2" class="blog-tab-box">
+              <div class="blog-txt">
+                <p>「AI 主播」韓小夏(Summer Hen)是集仕多股份有限公司(ChoozMo inc) 所製作的台灣第一個AI 主播,整體皆由 AI 合成。 「AI
+                  主播」韓小夏是個人工智能新聞主播,擬真程度與人類表現驚人地相當高。它不僅具有與新聞主持人的特色和聲音,乍聽真實的聲音其實是 AI 合成聲音,而且
+                  還模仿了一般主播做出的小動作,例如在報導新聞時展現一些手勢。集仕多股份有限公司(ChoozMo inc)使用獨家的技術,通過深度學習與機器學習技術
+                  學習真人的動作及表情,學習聲音的細節、說話的方式、面部表情、她的嘴唇和她移動身體的方式,AI 合成一位虛擬人,生成出高度擬真的 AI 主播韓小夏。</p>
+              </div>
+            </div>
+            <div id="blog-tab-3" class="blog-tab-box">
+              <div class="blog-txt">
+                <p>「AI 主播」主要運用深度神經網路、深度學習、Deep Fake 技術透過虛擬人技術的的支持下, 通過人臉的關鍵特色偵測、人臉特徵擷取、臉部重構、 唇語辨別、情感及表情的分析等多項先進科技合成 AI
+                  主播, 並結合圖像及語音等資料建立模型,並且進行模型的訓 練精準化模型,生成與真人高度相似的的 AI 虛擬分身模型,進而合成 AI 主播。合成的 AI 主播能夠將所輸入的中英文
+                  文稿自動生成相對應之影片,在播報過程中 ,AI 主播的音頻、表情以及唇語嘴形可以保持自然一致,AI 合成聲音並且配合內容語言的語調 ,AI 主播完全展現 出與真人主播無差異的資訊傳達效果。</p>
+              </div>
+            </div>
+            <div id="blog-tab-4" class="blog-tab-box">
+              <div class="blog-txt">
+                <p>韓國首位 AI 主播日前正式上工,引起網友熱烈討論,與真人幾乎無差別的發音及動作神態引發關注,網友感嘆科技進步同時 不免感到相當憂心,作為 AI 主播原型的主播金柱夏也直呼要更努力,才不會被 AI
+                  主播取代。韓國電視台MBN推出全國首名 AI 主播,這名以MBN當家主播金柱夏為原型的 AI 主播「AI 金柱夏」是MBN與人工智慧(AI) 開發公司 MoneyBrAIn 合作研發,完全是透過 AI
+                  合成主播,只要在系統鍵入 1000 字以內的原稿,就能自動產生播報畫面。MoneyBrAIn 公司代表張世榮接受媒體訪問時表示,新聞講求即時性,有了 AI
+                  主播,無論在什麼時後發生重大新聞,都可快速即時提供播報畫面 MBN 表示,「使用AI 主播可在突發災難狀況時,迅速向觀眾播報新聞內容,且能一天 24
+                  小時持續工作」,並可節省下大量人力、時間和費用成本,用於嘗試製作其他新節目也能有效節約資源。AI 金柱夏的影片播出後,可以看到許多網友在MBN 的 YouTube 頻道中留言,對 AI
+                  主播的逼真程度感到驚艷,感嘆科技進步之快,「完全看不出來是 AI」,也有人直呼「好可怕 ,雖然很方便,但工作機會可能又要減少了」。金柱夏本人表示,在看到AI 主播的表現後,「對於AI技術總有一天可能威脅
+                  到我的工作而感到不安」,但她也說,會更加努力及全面的傳達屬於人類的情感,這點是AI 主播目前還無法做到的。也有不願 透露身分的主播對媒體表示,在 AI
+                  主播出現後,以真人主播進行的新聞節目競爭預期更加激烈,可望激發出後續更具感性及趣味 的節目內容。韓國著名 YouTuber「Rui」(루이)在之前證實,過去在影片中實際露臉的面貌,其實是由南韓軟體技術公司
+                  dob Studio (디오비스튜디)以人工智慧技術打造。依照”扮演” YouTuber「Rui」的本人接受採訪時表示,實際上是因為希望成為一名歌手 ,但是在南韓演藝界極度重視外表的情況下,接受與 dob
+                  Studio 合作,透過深度學習的技術,將統計數據中最受歡迎面容組 合,以人工智慧方式動態合成在「Rui」本人在影片中的臉譜上,如 AI 主播一般 ,運用 Deepfake 技術,dob Studio
+                  將深 度學習組合出的面容套用在影片內容中,因此實際上僅有頸部以下身體、頭髮與聲音部分為「Rui」本人。除了 YouTube 影片 內容藉由 dob Studio 合成面容,包含在 Instagram
+                  上的靜態照片內容,其實也是藉由人工智慧技術合成。而借助人工智慧 創造的虛擬人物網紅、實況主,在目前相關技術持續精進之下,顯然也有越來越多應用可能性,例如可播報新聞的 AI 主播,虛擬實 況主,日本
+                  Hololive 便是提供讓人以虛擬人物形式進行實況直播,而南韓 MBN 電視台也以當紅主播金柱夏形象,與人工智慧技 術公司。MoneyBrAIn 合作打造人工智慧AI 主播「AI 金柱夏」 (AI
+                  김주하),藉此協助新聞內容播報。
+
+
+                  中國在 AI 主播的發展市場上,也陸續發表了多款 AI 合成主播,這款被命名「新小浩」的站立式 AI 主播,仍然以
+                  新華社主播邱浩為原型,在聲音和圖像兩大引擎上有了較大的優化和突破。在聲音方面,採用領先的波形建模技術生
+                  成音頻,大大提升了合成音頻的表現力和真實度,使聲音更具起伏及情感。在圖像方面,通過模型優化及多重數據的使用, 實現更加逼真的 AI
+                  合成表情、肢體動作與語義的恰當匹配以及更加自然的唇動及嘴形效果。「新小浩」不僅能坐著播報新聞,還 能站起來,帶著手勢、姿態等多種肢體動作聲情並茂地播報新聞,更加智能,更接近於真人。對於引人關注的新推出的
+                  AI 女主播 ,基於 AI 合成主播更加成熟的技術,AI 女主播播報效果和穩定性顯著提升。在 2018 年舉行的第五屆世界網路大會上,新華社聯合搜 狗發布全球首個合成新聞主播——「 AI
+                  合成主播」,運用最新人工智慧技術,創造出與真人主播擁有同樣播報能力的「分身」,引起了世界的關注。
 
-        <div class="container-fluid step-content">
-            <div class="container">
-                <section class="title-item">
-                    <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
-                    <h4>快速製作模板</h4>
-                </section>
-
-                <ul class="mt-5">
-                    <li>
-                        <h4>1. 註冊 AI Spokesgirl 專屬帳號</h4>
-                        <p>一旦註冊即送 60 秒影片製作服務,使用滿意可後續加值</p>
-                        <div class="d-flex justify-content-center">
-                            <a href="https://video.choozmo.com/register.html" class="link-btn" target="_blank">點我免費註冊</a>
-                        </div>
-                    </li>
-                    <li>
-                        <h4>2. 準備影片內容</h4>
-                        <p>準備一個資料夾,裡面有一個 "素材資料夾" 跟 "EXCEL 檔"</p>
-                        <img src="/imgs/ai-presenter/step-01.png" alt="" class="mb-4">
-                        <p>素材資料夾裡面放照片或影片</p>
-                        <img src="/imgs/ai-presenter/step-02.png" alt="">
-                        <small class="d-block ms-4">包含內容:圖片/影片(.jpg/.mp4)</small>
-                        <p class="mt-5">EXCEL 檔整理成這個格式-大標題、字幕、素材、音檔</p>
-                        <img src="/imgs/ai-presenter/step-03.png" alt="">
-                        <ul class="point-list">
-                            <li>字幕之間的斷句 使用符號【¥】</li>
-                            <li>字幕每一句段落勿超過中文 25 字、英文 50 字</li>
-                            <li>大標題字數勿超過中文 15 字、英文 30 字</li>
-                            <li>音檔留空白</li>
-                        </ul>
-                        <p class="mt-5">以下為顯示效果:</p>
-                        <img src="/imgs/ai-presenter/step-04.png" alt="">
-                        <p class="mt-5">接下來同時選素材資料夾跟 EXCEL 檔,壓縮成 ZIP 檔</p>
-                        <img src="/imgs/ai-presenter/step-05.png" alt="">
-                    </li>
-                </ul>
+
+                  由三星旗下獨立實驗室 STAR Labs 孵化出 NEON 虛擬人,之所以叫 NEON,是因為 NEON 一詞源自 NEO(新)+ humaN(人類)。 NEON
+                  虛擬人在對人物原始面部、聲音等數據進行捕捉並學習之後,可以自主創建未錄入過的新表情、新動作、新對話,甚至能說其他語言,可應用於 AI
+                  主播等層面,未來的應用相當的廣大。NEON虛擬人不只是百科般的語音助手,而是能像真人一樣快速響 應對話,做出真實表情神態的夥伴。三星 Star labs 戰略負責人 Bob Lian
+                  提到:「我們希望創造一個有自己的表情、行為、情感、 甚至感覺和記憶的新生命。」
+                </p>
+              </div>
+            </div>
+            <div id="blog-tab-5" class="blog-tab-box">
+              <div class="blog-txt">
+                <p>
+                  新聞主播是通過報導在地方、國家和國際層面上發生的新聞故事和事件來通知公眾的記者。作為電視新聞廣播的首席記者,他們利用自己的公開演講技巧準確而簡潔地將新聞傳達給觀眾。正如職位所暗示的那樣,他們是共同主持或主持新聞節目的專業人士。在現場記者發表各自的故事後,他們保持節目片段之間的連續性。成功的新聞主播擁有追蹤者,即在特定市場中信任並偏愛他們而不是其他選擇的觀眾。一些主播因報導歷史上的特定事件而退休多年後仍被人們記住。已故的沃爾特·克朗凱特(Walter
+                  Cronkite)當然就是這種情況,他在 CBS 的 19 年職業生涯包括報導 1963 年約翰·肯尼迪總統遇刺事件和 1969 年首次登月。</p>
+              </div>
+            </div>
+            <div id="blog-tab-6" class="blog-tab-box">
+              <div class="blog-txt">
+                <p>
+                  建立輸入文稿與輸出音頻訊息的關聯,在圖像的生成技術中,使用人的臉孔辨識,以及三維的臉部重建、表情建模以及肢體動作模型, 建立輸入的文稿、輸出的音頻和視覺動畫的關聯及合成,透過 AI
+                  合成臉及合成聲音,最終產出栩栩如生的 AI 主播。
+                </p>
+              </div>
             </div>
+            <a class="btn-light" href="/blog">閱讀更多 ></a>
+          </div>
         </div>
+      </div>
     </div>
 
-    {{ partial "footer.html" . }}
+    <section class="title-item my-5">
+      <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
+      <h4>使用者的守法義務</h4>
+    </section>
+  
+    <section class="terms-content">
+      <p>
+        您承諾絕不為任何非法目的或以任何非法方式使用本服務,並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者,並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為,包括但不限於:
+      </p>
+      <ul>
+        <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
+        <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
+        <li>違反依法律或契約所應負之保密義務</li>
+        <li>冒用他人名義使用本服務</li>
+      </ul>
+    </section>
+
+    <section class="title-item my-5">
+      <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
+      <h4>免責聲明</h4>
+    </section>
+
+    <section class="terms-content">
+      <p>
+        您明確了解並同意:ChoozMo 對本服務不提供任何明示或默示的擔保,包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供,您使用本服務時,須自行承擔相關風險。ChoozMo 不保證以下事項:
+      </p>
+      <ul>
+        <li>本服務將符合您的需求</li>
+        <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
+        <li>由本服務之使用而取得之結果為正確或可靠</li>
+      </ul>
+      <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險,並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失,對 ChoozMo 提出任何請求或採取法律行動,您應自負完全責任。</p>
+    </section>
+
+   </div>
+
+
+ 
+  </div>
+
+  {{ partial "footer.html" . }}
+
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
+    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
+    crossorigin="anonymous"></script>
+    <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+    crossorigin="anonymous"></script>
+  <script>
+   (function() {
+    console.log('test');
+    $('.blog-tabs-stage>div').hide();
+        $('.blog-tabs-stage>div:first').show();
+        $('.blog-tabs-nav li:first').addClass('blog-tab-active');
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
-        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
-        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
-        crossorigin="anonymous"></script>
+    $('.blog-tabs-nav a').on('click', function (event) {
+          event.preventDefault();
+          $('.blog-tabs-nav li').removeClass('blog-tab-active');
+          $(this).parent().addClass('blog-tab-active');
+          $('.blog-tabs-stage>div').hide();
+          $($(this).attr('href')).show();
+        });
+    })();
+  </script>
 </body>
 
 </html>

Різницю між файлами не показано, бо вона завелика
+ 0 - 31
layouts/partials/LP_components/blogs_tab.html


+ 3 - 3
layouts/partials/navbar.html

@@ -11,11 +11,11 @@
     <div class="collapse navbar-collapse w-100" id="navbarNav">
       <ul class="navbar-nav">
         <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="/">首頁</a>
+          <a class="nav-link" aria-current="page" href="/">首頁</a>
         </li>
-        <!-- <li class="nav-item">
+        <li class="nav-item">
           <a class="nav-link" href="/ai-presenter/info/">AI 主播</a>
-        </li> -->
+        </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
             aria-expanded="false">

+ 9 - 9
static/css/custom.css

@@ -501,23 +501,23 @@
   text-align: left;
 }
 
-.sec-blogtab {
+/* .sec-blogtab {
   padding-bottom: 5rem;
-}
+} */
 
 .blog-tabs {
   display: flex;
   align-items: center;
 }
 
-.blogtab-title {
+/* .blogtab-title {
   font-size: 3rem;
   letter-spacing: 1px;
   padding-bottom: 7px;
   border-bottom: 7px solid #ea5413;
   display: inline-block;
   text-align: center;
-}
+} */
 
 .blog-tabs .blog-tabs-nav {
   width: 35%;
@@ -541,7 +541,7 @@
   padding: 3.5rem;
   padding-bottom: 6rem;
   box-shadow: 0 0 10px rgb(32 32 32 / 25%);
-  height: 48rem;
+  height: 40rem;
   overflow: hidden;
   text-align: left;
   position: relative;
@@ -552,16 +552,16 @@
   overflow-y: auto;
 }
 
-.blog-tabs .blog-tabs-stage .blog-txt {
+/* .blog-tabs .blog-tabs-stage .blog-txt {
   font-size: 1.6rem;
 }
 
 .blog-tabs .blog-tabs-stage .blog-txt p {
   line-height: 32px;
   letter-spacing: 1px;
-}
+} */
 
-.btn-light {
+/* .btn-light {
   color: black;
   border: 1px solid #ea5413;
   padding: 1rem 2.5rem;
@@ -572,7 +572,7 @@
   font-size: 1.8rem;
   box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
   letter-spacing: 1px;
-}
+} */
 
 .btn-dark {
   text-decoration: none;

+ 363 - 42
static/css/style.css

@@ -986,35 +986,6 @@
 #home .more-btn:hover {
   background-color: #d54d13;
 }
-#home .sec-blogtab {
-  padding-top: 100px;
-  margin: 0 auto 50px;
-}
-#home .sec-blogtab .blogtab-title {
-  font-size: 30px;
-  font-weight: bold;
-  margin-bottom: 30px;
-}
-#home .sec-blogtab .blog-txt {
-  font-size: 16px;
-}
-#home .sec-blogtab .btn-light {
-  font-size: 16px;
-  transition: all 0.3s;
-  text-decoration: none;
-}
-@media (max-width: 767px) {
-  #home .sec-blogtab .blog-tabs .blog-tabs-nav {
-    padding: 1rem 2rem 3rem;
-  }
-}
-#home .sec-blogtab .blog-tabs-nav a {
-  transition: all 0.3s;
-  text-decoration: none;
-}
-#home .sec-blogtab .blog-tabs-nav a:hover {
-  opacity: 0.8;
-}
 #home .sec-action .action-btn {
   padding: 0.8rem 3.5rem;
   font-size: 20px;
@@ -3321,12 +3292,22 @@
 .ai-presenter .title-item img {
   width: 450px;
 }
+@media (max-width: 575px) {
+  .ai-presenter .title-item img {
+    width: 350px;
+  }
+}
 .ai-presenter .title-item h4 {
   text-align: center;
   margin-top: -41px;
   margin-left: -10px;
   font-weight: bold;
 }
+@media (max-width: 575px) {
+  .ai-presenter .title-item h4 {
+    margin-top: -34px;
+  }
+}
 .ai-presenter .usecace-list {
   margin-bottom: 100px;
 }
@@ -3352,10 +3333,29 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
   padding: 20px;
   background: #d8bbd9;
   border-radius: 20px;
 }
+.ai-presenter .video-left a,
+.ai-presenter .video-right a {
+  display: flex;
+  width: 100%;
+  text-decoration: none;
+  color: #000;
+}
+.ai-presenter .video-left a:hover .click-img,
+.ai-presenter .video-right a:hover .click-img {
+  top: 50px;
+}
+.ai-presenter .video-left .click-img,
+.ai-presenter .video-right .click-img {
+  position: absolute;
+  width: 50px;
+  top: 60px;
+  right: 40px;
+}
 .ai-presenter .video-left strong,
 .ai-presenter .video-right strong {
   width: 100%;
@@ -3377,10 +3377,45 @@
 .ai-presenter .video-right {
   background: #fde3d9;
 }
-.ai-presenter .step-content {
+.ai-presenter .mp4-box {
+  width: 70%;
+  height: 0;
+  margin: auto;
+  padding-bottom: 45%;
+}
+.ai-presenter .mp4-box video {
+  width: 100%;
+  height: auto;
+}
+.ai-presenter .step-content,
+.ai-presenter .template-content {
   margin: 100px auto;
+  position: relative;
+}
+.ai-presenter .step-content .container,
+.ai-presenter .template-content .container {
+  margin-top: -38px;
+}
+.ai-presenter .step-content .bg-top,
+.ai-presenter .step-content .bg-bottom,
+.ai-presenter .template-content .bg-top,
+.ai-presenter .template-content .bg-bottom {
+  width: 100%;
+  position: absolute;
+  z-index: -10;
+  left: 0;
+  right: 0;
+}
+.ai-presenter .step-content .bg-top,
+.ai-presenter .template-content .bg-top {
+  top: -10px;
+}
+.ai-presenter .step-content .bg-bottom,
+.ai-presenter .template-content .bg-bottom {
+  bottom: -10px;
 }
-.ai-presenter .step-content .link-btn {
+.ai-presenter .step-content .link-btn,
+.ai-presenter .template-content .link-btn {
   display: inline-block;
   padding: 12px 20px;
   margin-top: 25px;
@@ -3388,32 +3423,65 @@
   text-decoration: none;
   color: #fff;
   background: #ea5413;
+  transition: all 0.3s;
+}
+.ai-presenter .step-content .link-btn:hover,
+.ai-presenter .template-content .link-btn:hover {
+  opacity: 0.8;
 }
-.ai-presenter .step-content ul {
+.ai-presenter .step-content ul,
+.ai-presenter .template-content ul {
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
-.ai-presenter .step-content ul li {
+.ai-presenter .step-content ul li,
+.ai-presenter .template-content ul li {
   margin: 30px auto;
 }
-.ai-presenter .step-content ul li img {
+.ai-presenter .step-content ul li img,
+.ai-presenter .template-content ul li img {
   height: auto;
+  width: 100%;
   max-width: 800px;
 }
-.ai-presenter .step-content ul li h4 {
+.ai-presenter .step-content ul li h4,
+.ai-presenter .template-content ul li h4 {
   color: #ea5413;
   font-weight: bold;
   text-align: center;
+  line-height: 34px;
 }
-.ai-presenter .step-content ul li p {
+@media (max-width: 575px) {
+  .ai-presenter .step-content ul li h4,
+.ai-presenter .template-content ul li h4 {
+    font-size: 20px;
+  }
+}
+.ai-presenter .step-content ul li .point-list,
+.ai-presenter .template-content ul li .point-list {
+  list-style: decimal;
+}
+.ai-presenter .step-content ul li .point-list li,
+.ai-presenter .template-content ul li .point-list li {
+  margin: 5px 45px;
+}
+@media (max-width: 575px) {
+  .ai-presenter .step-content ul li .point-list li,
+.ai-presenter .template-content ul li .point-list li {
+    margin: 5px 0 5px 20px;
+  }
+}
+.ai-presenter .step-content .excerpt,
+.ai-presenter .template-content .excerpt {
   margin: 15px 25px 0;
   font-size: 18px;
   font-weight: bold;
 }
-.ai-presenter .step-content ul li p::before {
+.ai-presenter .step-content .excerpt::before,
+.ai-presenter .template-content .excerpt::before {
   content: "";
   font-weight: bold;
   display: inline-block;
@@ -3422,11 +3490,264 @@
   margin-right: 10px;
   margin-bottom: 2px;
 }
-.ai-presenter .step-content ul li .point-list {
-  list-style: decimal;
+@media (max-width: 575px) {
+  .ai-presenter .step-content .excerpt,
+.ai-presenter .template-content .excerpt {
+    font-size: 16px;
+  }
 }
-.ai-presenter .step-content ul li .point-list li {
-  margin: 5px 45px;
+@media (max-width: 575px) {
+  .ai-presenter .step-content .caption,
+.ai-presenter .template-content .caption {
+    font-size: 15px;
+  }
+}
+.ai-presenter .template-content table {
+  display: table;
+  width: 110%;
+  height: auto;
+  margin-left: auto;
+  margin-top: -250px;
+  font-weight: bold;
+}
+@media (max-width: 1200px) {
+  .ai-presenter .template-content table {
+    margin-top: -195px;
+  }
+}
+@media (max-width: 991px) {
+  .ai-presenter .template-content table {
+    margin-top: -140px;
+  }
+}
+@media (max-width: 767px) {
+  .ai-presenter .template-content table {
+    width: 86%;
+    margin-top: 20px;
+    margin-left: 39px;
+  }
+}
+@media (max-width: 575px) {
+  .ai-presenter .template-content table {
+    margin: 20px auto 0;
+    margin-left: auto;
+  }
+}
+.ai-presenter .template-content table tbody {
+  border: 1px solid #f08757;
+}
+.ai-presenter .template-content table td {
+  text-align: center;
+}
+.ai-presenter .template-content table tr {
+  border-style: none !important;
+  border-bottom-width: 0px !important;
+}
+.ai-presenter .template-content .table-title {
+  margin-top: -242px;
+  text-align: end;
+}
+@media (max-width: 1200px) {
+  .ai-presenter .template-content .table-title {
+    margin-top: -185px;
+  }
+}
+@media (max-width: 991px) {
+  .ai-presenter .template-content .table-title {
+    margin-top: -133px;
+  }
+}
+@media (max-width: 767px) {
+  .ai-presenter .template-content .table-title {
+    margin-top: 0;
+    text-align: start;
+  }
+}
+.ai-presenter .template-content .table-striped > tbody > tr:nth-child(odd) > td,
+.ai-presenter .template-content .table-striped > tbody > tr:nth-child(odd) > th {
+  box-shadow: none;
+  background-color: #fdeae1;
+  border-bottom-width: 0px !important;
+}
+.ai-presenter .template-content .table-striped > tbody > tr:nth-child(even) > td,
+.ai-presenter .template-content .table-striped > tbody > tr:nth-child(even) > th {
+  border-bottom-width: 0px !important;
+}
+.ai-presenter .template-content .info img {
+  height: auto;
+  width: 100%;
+  max-width: 800px;
+}
+@media (max-width: 767px) {
+  .ai-presenter .template-content .info .img-left {
+    padding: 0 15px;
+  }
+}
+.ai-presenter .template-content .info .img-right {
+  width: 107%;
+}
+@media (max-width: 767px) {
+  .ai-presenter .template-content .info .img-right {
+    width: 100%;
+  }
+}
+.ai-presenter .template-content .info .img-text-left,
+.ai-presenter .template-content .info .img-text-right {
+  position: absolute;
+  top: 9%;
+  color: #ea5413;
+  font-size: 34px;
+  font-weight: bold;
+}
+@media (max-width: 1200px) {
+  .ai-presenter .template-content .info .img-text-left,
+.ai-presenter .template-content .info .img-text-right {
+    top: 8%;
+    font-size: 28px;
+  }
+}
+@media (max-width: 991px) {
+  .ai-presenter .template-content .info .img-text-left,
+.ai-presenter .template-content .info .img-text-right {
+    font-size: 22px;
+  }
+}
+@media (max-width: 767px) {
+  .ai-presenter .template-content .info .img-text-left,
+.ai-presenter .template-content .info .img-text-right {
+    font-size: 30px;
+  }
+}
+@media (max-width: 575px) {
+  .ai-presenter .template-content .info .img-text-left,
+.ai-presenter .template-content .info .img-text-right {
+    font-size: 4.8vw;
+  }
+}
+.ai-presenter .template-content .info .img-text-left {
+  left: 31%;
+}
+@media (max-width: 1400px) {
+  .ai-presenter .template-content .info .img-text-left {
+    left: 28.5%;
+  }
+}
+@media (max-width: 767px) {
+  .ai-presenter .template-content .info .img-text-left {
+    left: 30%;
+  }
+}
+.ai-presenter .template-content .info .img-text-right {
+  left: 24.5%;
+}
+@media (max-width: 1400px) {
+  .ai-presenter .template-content .info .img-text-right {
+    left: 20.5%;
+  }
+}
+@media (max-width: 991px) {
+  .ai-presenter .template-content .info .img-text-right {
+    left: 18.5%;
+  }
+}
+@media (max-width: 767px) {
+  .ai-presenter .template-content .info .img-text-right {
+    top: 13%;
+    left: 19%;
+  }
+}
+.ai-presenter .template-content .info .video-box {
+  position: relative;
+  width: 95%;
+  height: 0;
+  padding-bottom: 50%;
+  margin: auto;
+}
+.ai-presenter .template-content .pageForm {
+  margin-top: 8rem;
+  background: #fff;
+}
+.ai-presenter .template-content .pageForm h3 {
+  line-height: 40px;
+}
+.ai-presenter .sec-blogtab {
+  padding-top: 50px;
+}
+.ai-presenter .terms-content {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 32px;
+  color: #6c6d70;
+  text-align: justify;
+}
+@media (max-width: 575px) {
+  .ai-presenter .terms-content {
+    padding: 0 20px;
+  }
+}
+.ai-presenter .terms-content ul {
+  padding: 0;
+  list-style: none;
+}
+.ai-presenter .terms-content ul li::before {
+  content: "";
+  font-weight: bold;
+  display: inline-block;
+  border: 3px solid #ea5413;
+  border-radius: 20px;
+  margin-right: 10px;
+  margin-bottom: 2px;
+  line-height: 32px;
+}
+
+/* ai-presenter End */
+/* sec-blogtab Start*/
+.sec-blogtab {
+  padding-top: 100px;
+  padding-bottom: 5rem;
+  margin: 0 auto 50px;
+}
+.sec-blogtab .blogtab-title {
+  display: inline-block;
+  margin-bottom: 30px;
+  padding-bottom: 7px;
+  font-size: 30px;
+  font-weight: bold;
+  text-align: center;
+  letter-spacing: 1px;
+  border-bottom: 7px solid #ea5413;
+}
+.sec-blogtab .blog-txt {
+  font-size: 16px;
+}
+.sec-blogtab .blog-txt p {
+  line-height: 32px;
+  letter-spacing: 1px;
+}
+.sec-blogtab .btn-light {
+  margin-top: 4rem;
+  padding: 1rem 2.5rem;
+  transition: all 0.3s;
+  outline: none;
+  font-size: 16px;
+  letter-spacing: 1px;
+  text-decoration: none;
+  background-color: white;
+  border: 1px solid #ea5413;
+  border-radius: 3rem;
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
+}
+@media (max-width: 767px) {
+  .sec-blogtab .blog-tabs .blog-tabs-nav {
+    padding: 1rem 2rem 3rem;
+  }
+}
+.sec-blogtab .blog-tabs-nav a {
+  transition: all 0.3s;
+  text-decoration: none;
+}
+.sec-blogtab .blog-tabs-nav a:hover {
+  opacity: 0.8;
 }
 
-/* ai-presenter End *//*# sourceMappingURL=style.css.map */
+/* sec-blogtab End*//*# sourceMappingURL=style.css.map */

Різницю між файлами не показано, бо вона завелика
+ 0 - 0
static/css/style.css.map


+ 309 - 47
static/css/style.scss

@@ -955,39 +955,6 @@
       background-color: #d54d13;
     }
   }
-  .sec-blogtab {
-    padding-top: 100px;
-    margin: 0 auto 50px;
-    .blogtab-title {
-      font-size: 30px;
-      font-weight: bold;
-      margin-bottom: 30px;
-    }
-    .blog-txt {
-      font-size: 16px;
-    }
-    .btn-light {
-      font-size: 16px;
-      transition: all 0.3s;
-      text-decoration: none;
-    }
-    .blog-tabs {
-      .blog-tabs-nav {
-        @media (max-width: 767px) {
-          padding: 1rem 2rem 3rem;
-        }
-      }
-    }
-    .blog-tabs-nav {
-      a {
-        transition: all 0.3s;
-        text-decoration: none;
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
   .sec-action {
     .action-btn {
       padding: 0.8rem 3.5rem;
@@ -3065,12 +3032,18 @@
     position: relative;
     img {
       width: 450px;
+      @media (max-width: 575px) {
+        width: 350px;
+      }
     }
     h4 {
       text-align: center;
       margin-top: -41px;
       margin-left: -10px;
       font-weight: bold;
+      @media (max-width: 575px) {
+        margin-top: -34px;
+      }
     }
   }
   .usecace-list {
@@ -3098,9 +3071,25 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    position: relative;
     padding: 20px;
     background: #d8bbd9;
     border-radius: 20px;
+    a {
+      display: flex;
+      width: 100%;
+      text-decoration: none;
+      color: #000;
+      &:hover .click-img {
+        top: 50px;
+      }
+    }
+    .click-img {
+      position: absolute;
+      width: 50px;
+      top: 60px;
+      right: 40px;
+    }
     strong {
       width: 100%;
       padding: 20px;
@@ -3124,8 +3113,38 @@
     background: #fde3d9;
   }
 
-  .step-content {
+  .mp4-box {
+    width: 70%;
+    height: 0;
+    margin: auto;
+    padding-bottom: 45%;
+    video {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .step-content,
+  .template-content {
     margin: 100px auto;
+    position: relative;
+    .container {
+      margin-top: -38px;
+    }
+    .bg-top,
+    .bg-bottom {
+      width: 100%;
+      position: absolute;
+      z-index: -10;
+      left: 0;
+      right: 0;
+    }
+    .bg-top {
+      top: -10px;
+    }
+    .bg-bottom {
+      bottom: -10px;
+    }
     .link-btn {
       display: inline-block;
       padding: 12px 20px;
@@ -3134,6 +3153,10 @@
       text-decoration: none;
       color: #fff;
       background: #ea5413;
+      transition: all 0.3s;
+      &:hover {
+        opacity: 0.8;
+      }
     }
     ul {
       padding: 0;
@@ -3145,31 +3168,25 @@
         margin: 30px auto;
         img {
           height: auto;
+          width: 100%;
           max-width: 800px;
         }
         h4 {
           color: #ea5413;
           font-weight: bold;
           text-align: center;
-        }
-        p {
-          margin: 15px 25px 0;
-          font-size: 18px;
-          font-weight: bold;
-          &::before {
-            content: "";
-            font-weight: bold;
-            display: inline-block;
-            border: 5px solid #ea5413;
-            border-radius: 20px;
-            margin-right: 10px;
-            margin-bottom: 2px;
+          line-height: 34px;
+          @media (max-width: 575px) {
+            font-size: 20px;
           }
         }
         .point-list {
           list-style: decimal;
           li {
             margin: 5px 45px;
+            @media (max-width: 575px) {
+              margin: 5px 0 5px 20px;
+            }
             // &::before {
             //   content: "";
             //   font-weight: bold;
@@ -3183,7 +3200,252 @@
         }
       }
     }
+    .excerpt {
+      margin: 15px 25px 0;
+      font-size: 18px;
+      font-weight: bold;
+      &::before {
+        content: "";
+        font-weight: bold;
+        display: inline-block;
+        border: 5px solid #ea5413;
+        border-radius: 20px;
+        margin-right: 10px;
+        margin-bottom: 2px;
+      }
+      @media (max-width: 575px) {
+        font-size: 16px;
+      }
+    }
+    .caption {
+      @media (max-width: 575px) {
+        font-size: 15px;
+      }
+    }
+  }
+
+  .template-content {
+    table {
+      display: table;
+      width: 110%;
+      height: auto;
+      margin-left: auto;
+      margin-top: -250px;
+      font-weight: bold;
+      @media (max-width: 1200px) {
+        margin-top: -195px;
+      }
+      @media (max-width: 991px) {
+        margin-top: -140px;
+      }
+      @media (max-width: 767px) {
+        width: 86%;
+        margin-top: 20px;
+        margin-left: 39px;
+      }
+      @media (max-width: 575px) {
+        margin: 20px auto 0;
+        margin-left: auto;
+      }
+      tbody {
+        border: 1px solid #f08757;
+      }
+      td {
+        text-align: center;
+      }
+      tr {
+        border-style: none !important;
+        border-bottom-width: 0px !important;
+      }
+    }
+    .table-title {
+      margin-top: -242px;
+      text-align: end;
+      @media (max-width: 1200px) {
+        margin-top: -185px;
+      }
+      @media (max-width: 991px) {
+        margin-top: -133px;
+      }
+      @media (max-width: 767px) {
+        margin-top: 0;
+        text-align: start;
+      }
+    }
+    .table-striped > tbody > tr:nth-child(odd) > td,
+    .table-striped > tbody > tr:nth-child(odd) > th {
+      box-shadow: none;
+      background-color: #fdeae1;
+      border-bottom-width: 0px !important;
+    }
+    .table-striped > tbody > tr:nth-child(even) > td,
+    .table-striped > tbody > tr:nth-child(even) > th {
+      border-bottom-width: 0px !important;
+    }
+    .info {
+      img {
+        height: auto;
+        width: 100%;
+        max-width: 800px;
+      }
+      .img-left {
+        @media (max-width: 767px) {
+          padding: 0 15px;
+        }
+      }
+      .img-right {
+        width: 107%;
+        @media (max-width: 767px) {
+          width: 100%;
+        }
+      }
+      .img-text-left,
+      .img-text-right {
+        position: absolute;
+        top: 9%;
+        color: #ea5413;
+        font-size: 34px;
+        font-weight: bold;
+        @media (max-width: 1200px) {
+          top: 8%;
+          font-size: 28px;
+        }
+        @media (max-width: 991px) {
+          font-size: 22px;
+        }
+        @media (max-width: 767px) {
+          font-size: 30px;
+        }
+        @media (max-width: 575px) {
+          font-size: 4.8vw;
+        }
+      }
+      .img-text-left {
+        left: 31%;
+        @media (max-width: 1400px) {
+          left: 28.5%;
+        }
+        @media (max-width: 767px) {
+          left: 30%;
+        }
+      }
+      .img-text-right {
+        left: 24.5%;
+        @media (max-width: 1400px) {
+          left: 20.5%;
+        }
+        @media (max-width: 991px) {
+          left: 18.5%;
+        }
+        @media (max-width: 767px) {
+          top: 13%;
+          left: 19%;
+        }
+      }
+      .video-box {
+        position: relative;
+        width: 95%;
+        height: 0;
+        padding-bottom: 50%;
+        margin: auto;
+      }
+    }
+    .pageForm {
+      margin-top: 8rem;
+      background: #fff;
+      h3 {
+        line-height: 40px;
+      }
+    }
+  }
+  .sec-blogtab {
+    padding-top: 50px;
+  }
+  .terms-content {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 32px;
+    color: #6c6d70;
+    text-align: justify;
+    @media (max-width: 575px) {
+      padding: 0 20px;
+    }
+    ul {
+      padding: 0;
+      list-style: none;
+      li::before {
+        content: "";
+        font-weight: bold;
+        display: inline-block;
+        border: 3px solid #ea5413;
+        border-radius: 20px;
+        margin-right: 10px;
+        margin-bottom: 2px;
+        line-height: 32px;
+      }
+    }
   }
 }
 
 /* ai-presenter End */
+
+/* sec-blogtab Start*/
+
+.sec-blogtab {
+  padding-top: 100px;
+  padding-bottom: 5rem;
+  margin: 0 auto 50px;
+
+  .blogtab-title {
+    display: inline-block;
+    margin-bottom: 30px;
+    padding-bottom: 7px;
+    font-size: 30px;
+    font-weight: bold;
+    text-align: center;
+    letter-spacing: 1px;
+    border-bottom: 7px solid #ea5413;
+  }
+
+  .blog-txt {
+    font-size: 16px;
+    p {
+      line-height: 32px;
+      letter-spacing: 1px;
+    }
+  }
+
+  .btn-light {
+    margin-top: 4rem;
+    padding: 1rem 2.5rem;
+    transition: all 0.3s;
+    outline: none;
+    font-size: 16px;
+    letter-spacing: 1px;
+    text-decoration: none;
+    background-color: white;
+    border: 1px solid #ea5413;
+    border-radius: 3rem;
+    box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
+  }
+
+  .blog-tabs {
+    .blog-tabs-nav {
+      @media (max-width: 767px) {
+        padding: 1rem 2rem 3rem;
+      }
+    }
+  }
+
+  .blog-tabs-nav {
+    a {
+      transition: all 0.3s;
+      text-decoration: none;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+/* sec-blogtab End*/

BIN
static/imgs/ai-presenter/AI_Spokesgirl_v3.mp4


BIN
static/imgs/ai-presenter/AI主播-28.png


BIN
static/imgs/ai-presenter/AI主播-31.png


BIN
static/imgs/ai-presenter/demo-01.png


BIN
static/imgs/ai-presenter/presenter-01.png


BIN
static/imgs/ai-presenter/presenter-012.png


BIN
static/imgs/ai-presenter/presenter-02.png


BIN
static/imgs/ai-presenter/presenter-021.png


BIN
static/imgs/ai-presenter/step-05.png


BIN
static/imgs/ai-presenter/裝飾-01.png


BIN
static/imgs/ai-presenter/裝飾-02.png


BIN
static/imgs/ai-presenter/裝飾-05.png


BIN
static/imgs/ai-presenter/裝飾-06.png


+ 13 - 7
webSite/config.toml

@@ -29,11 +29,23 @@ page = ["HTML"]
 
 # Main menu
 
+[[menu.main]]
+    identifier="index"
+    name = "首頁"
+    url  = "/"
+    weight = 1
+
+[[menu.main]]
+    identifier="AI 主播"
+    name = "AI 主播"
+    url  = "/ai-presenter/info/"
+    weight = 2
+
 [[menu.main]]
     identifier="home"
     name = "服務"
     url  = ""
-    weight = 1
+    weight = 3
 
 [[menu.main]]
     identifier="ad-operation"
@@ -116,12 +128,6 @@ page = ["HTML"]
     identifier="blog"
     name = "部落格"
     url  = "/tags/vtuber/"
-    weight = 3
-
-[[menu.main]]
-    identifier="合作夥伴"
-    name = "合作夥伴"
-    url  = "/collaboration/info/"
     weight = 4
 
 [[menu.main]]

Деякі файли не було показано, через те що забагато файлів було змінено