Selaa lähdekoodia

update ai-presenter

SyuanYu 1 kuukausi sitten
vanhempi
commit
d91a179573

+ 563 - 418
layouts/ai-presenter/single.html

@@ -19,472 +19,617 @@
 
   <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>
-              <a href="https://cloud.choozmo.com/login" class="link-btn" target="_blank">開始製作影片</a>
-            </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>
+      <div class="d-flex flex-column align-items-center">
 
-      <section class="title-item my-5">
-        <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
-        <h4>應用方式</h4>
-      </section>
 
-      <div class="mp4-box">
-        <video controls>
-          <source src="/imgs/ai-presenter/AI_Spokesgirl_v3.mp4" type="video/mp4">
-        </video>
-      </div>
+        <h2 class="mt-5 title">
+          輸入文字 取得 AI 分鏡表<br>快速製作「AI 人物影片」
+        </h2>
 
-      <section class="title-item mb-3">
-        <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
-        <h4>使用情境</h4>
-      </section>
+        <a href="https://cloud.choozmo.com/main/make-video" class="link-btn" target="_blank">免費開始體驗</a>
 
-      <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>
+        <img src="/imgs/ai-presenter/SaaS首圖.webp" alt="ChoozMo AI人物影片|SaaS首圖">
 
-      <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/CUR_9L8RtDk" 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/CUR_9L8RtDk?autoplay=1&loop=1&mute=1&playlist=CUR_9L8RtDk"
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen></iframe>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+        <h4 class="my-4 pt-5 title">
+          💡 如何從文字生成AI人物影片
+        </h4>
 
-    <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. 註冊 ChoozMo AIGV 專屬帳號</h4>
-              <p class="excerpt">一旦註冊即送 60 秒影片製作服務,使用滿意可後續加值</p>
-              <div class="d-flex justify-content-center">
-                <a href="https://cloud.choozmo.com/signup" 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 資料夾至 ChoozMo AIGV 平台</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://cloud.choozmo.com/login" class="link-btn" target="_blank">立即開始</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
+        <img src="/imgs/ai-presenter/四格SaaS教學gif.gif" alt="ChoozMo AI人物影片|四格SaaS教學">
 
-    <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/ix_FkhPX80w"
+        <h4 class="my-4 pt-5 title">
+          💡 什麼是 AI 分鏡?
+        </h4>
+
+        <p>AI 分鏡是 ChoozMo 的獨家功能,讓您無需學習繁瑣的剪輯技術,也能輕鬆創作專業級影片!</p>
+        <p>只需簡單輸入文字,即可快速生成 AI 腳本 - 分鏡表:</p>
+
+        <ol>
+          <li>
+            <strong>自動生成腳本</strong>:AI 根據文字提示自動生成完整的腳本和分鏡設計。
+          </li>
+          <li>
+            <strong>輕鬆修改</strong>:對不滿意的內容可自由調整,確保完全符合您的需求。
+          </li>
+          <li>
+            <strong>無縫製作</strong>:修改完成後,將分鏡表上傳至系統,即可生成專屬的 AI 主播影片!
+          </li>
+        </ol>
+
+        <p>ChoozMo 讓影片製作變得簡單高效,省時又省力,讓您專注於創意發揮!</p>
+
+        <a href="https://cloud.choozmo.com/main/generate-zip" class="link-btn" target="_blank">免費開始體驗</a>
+
+        <img src="/imgs/ai-presenter/AI分鏡表.webp" alt="ChoozMo AI人物影片|AI分鏡表" class="mb-5">
+
+        <h4 class="my-4 pt-5 title">
+          💡 看 AI 影片案例
+        </h4>
+
+        <!-- 電腦版 -->
+        <table class="d-none d-lg-table">
+          <tbody>
+            <tr>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?si=i-KbVD-7JlSaIeWS&autoplay=1&mute=1"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                </div>
+              </td>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?si=16RaVI7kdapf8eLG&autoplay=1&mute=1"
                     title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </div>
-                <div class="video-box my-4">
-                  <iframe width="560" height="315" src="https://www.youtube.com/embed/95gce-Upi_A"
+              </td>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?si=QL6QYJEgVDFwO3pw&autoplay=1&mute=1"
                     title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </div>
-                <p class="ms-3">▼ 台語</p>
-                <div class="video-box my-4">
-                  <iframe width="560" height="315" src="https://www.youtube.com/embed/9Pu6LUocmoc"
+              </td>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/95gce-Upi_A?si=syarZKF-BRWB96Fv&autoplay=1&mute=1"
                     title="YouTube video player" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowfullscreen></iframe>
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </div>
-                <p class="ms-3">▼ 日文</p>
-                <div class="video-box my-4">
-                  <iframe width="560" height="315" src="https://www.youtube.com/embed/PY51gyW1x8w"
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- 手機版 -->
+        <table class="d-table d-lg-none">
+          <tbody>
+            <tr>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/TzKQGBDmnXg?si=i-KbVD-7JlSaIeWS&autoplay=1&mute=1"
                     title="YouTube video player" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowfullscreen></iframe>
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </div>
-                <p class="ms-3">▼ 越南文</p>
-                <div class="video-box my-4">
-                  <iframe width="560" height="315" src="https://www.youtube.com/embed/9umdItL0GME"
+              </td>
+            </tr>
+
+            <tr>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/1iCJZFJva2c?si=16RaVI7kdapf8eLG&autoplay=1&mute=1"
                     title="YouTube video player" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowfullscreen></iframe>
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </div>
-              </section>
-            </div>
+              </td>
+            </tr>
 
-            <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 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>
+            <tr>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/o2puhV1Gfe4?si=QL6QYJEgVDFwO3pw&autoplay=1&mute=1"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </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>
+              </td>
+            </tr>
+
+            <tr>
+              <td>
+                <div class="iframe-box">
+                  <iframe src="https://www.youtube.com/embed/95gce-Upi_A?si=syarZKF-BRWB96Fv&autoplay=1&mute=1"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                 </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <h4 class="my-4 pt-5 title">
+          💡 為什麼選擇 ChoozMo SaaS AI 影片生成器?
+        </h4>
+
+        <p>ChoozMo 是您值得信賴的 AI 影片生成解決方案,具備以下三大優勢:</p>
+
+        <!-- 電腦版 -->
+        <table class="mt-3 d-none d-lg-table">
+          <thead>
+            <tr>
+              <th scope="col">電視台的專業品質</th>
+              <th scope="col">無需素材也能輕鬆創作</th>
+              <th scope="col">快速、高效、低成本</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <p>
+                  我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
+                </p>
+
+                <p class="mt-3">
+                  即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
+                </p>
+              </td>
+              <td>
+                <p>
+                  無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
+                </p>
+
+                <ul class="mt-3">
+                  <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
+                  <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
+                </ul>
+              </td>
+              <td>
+                <p>
+                  ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
+                </p>
+                <ul class="mt-3">
+                  <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
+                  <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
+                </ul>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- 手機版 -->
+        <table class="d-table d-lg-none">
+          <tbody>
+
+            <tr>
+              <th>
+                電視台的專業品質
+              </th>
+            </tr>
+
+            <tr>
+              <td>
+                <p>
+                  我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
+                </p>
+
+                <p class="mt-3">
+                  即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
+                </p>
+              </td>
+            </tr>
+
+            <tr>
+              <th>
+                無需素材也能輕鬆創作
+              </th>
+            </tr>
+
+            <tr>
+              <td>
+                <p>
+                  無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
+                </p>
+
+                <ul class="mt-3">
+                  <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
+                  <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
+                </ul>
+              </td>
+            </tr>
+
+            <tr>
+              <th>
+                快速、高效、低成本
+              </th>
+            </tr>
+
+            <tr>
+              <td>
+                <p>
+                  ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
+                </p>
+                <ul class="mt-3">
+                  <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
+                  <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
+                </ul>
+              </td>
+            </tr>
+          </tbody>
+
+          <!-- <tbody>
+              <tr>
+                <th>電視台的專業品質</th>
+                <td>
+                  <p>
+                    我們與多家知名電視台保持長期合作,參與過多場 AI 相關活動,製作的影片無論是畫質還是效果都達到業界頂尖標準。
+                  </p>
+  
+                  <p class="mt-3">
+                    即使在大螢幕播放,依然清晰震撼,品質無庸置疑!
+                  </p>
+                </td>
+
+              
+              </tr>
+
+              <tr>
+                <th>無需素材也能輕鬆創作</th>
+                <td>
+                  <p>
+                    無需擔心缺乏素材,ChoozMo 的 AI 技術可精準理解您的文字提示,生成高品質的照片,並自動剪輯成影片。
+                  </p>
+  
+                  <ul class="mt-3">
+                    <li>只需輸入幾段文字,即可獲得對應的精美照片。</li>
+                    <li><strong>無素材數量限制</strong>,大幅降低製作門檻,讓每個人都能輕鬆創作!</li>
+                  </ul>
+                </td>
+              </tr>
+
+              <tr>
+                <th>快速、高效、低成本</th>
+                <td>
+                  <p>
+                    ChoozMo 提供快速的影片生成流程,不需要專業人士的協助,您可以在<strong>一天內製作十幾部高質量影片!</strong>
+                  </p>
+                  <ul class="mt-3">
+                    <li><strong>省時</strong>:大幅縮短影片製作週期。</li>
+                    <li><strong>省錢</strong>:有效降低製作成本,適合各種規模的企業或個人使用。</li>
+                  </ul>
+                </td>
+              </tr>
+            </tbody> -->
+        </table>
+
+        <div class="accordion mt-5" id="accordion_1">
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_1">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
+                <h4>💡 AI 人物影片的應用場合?</h4>
+              </button>
+            </h2>
+            <div id="collapse_1" class="accordion-collapse collapse" aria-labelledby="heading_1"
+              data-bs-parent="#accordion_1">
+              <div class="accordion-body">
+                <p>AI 人物影片具有多元化的應用場景,適合以下場合:</p>
+
+                <ul>
+                  <li>教育訓練:快速生成專業教學影片,提升學習效果與參與度。</li>
+                  <li>開幕會場:製作吸睛的開幕介紹影片,增添活動亮點。</li>
+                  <li>產品/公司宣傳:用生動的 AI 角色展示品牌特色與產品價值,提升觀眾記憶度。</li>
+                  <li>個人品牌:KOL 與影音創作者可製作專屬影片,用於 YouTube、Instagram、TikTok 等社交平台,強化品牌形象與內容影響力。</li>
+                  <li>其他應用:無論是社交媒體內容、企業內部溝通,還是個性化影片創作,都能輕鬆實現。</li>
+                </ul>
               </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="accordion" id="accordion_2">
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_2">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse_2" aria-expanded="true" aria-controls="collapse_2">
+                <h4>💡 自由下載綠幕原檔</h4>
+              </button>
+            </h2>
+            <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2"
+              data-bs-parent="#accordion_2">
+              <div class="accordion-body">
+                <p>完成的 AI 人物影片不僅可直接使用,還可選擇下載AI人物綠幕原檔,為創作者提供更大的靈活性與主導權。您可以:</p>
 
-    <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>
+                <ul>
+                  <li>將影片導入其他剪輯工具進一步編輯。</li>
+                  <li>調整背景或添加更多個性化特效,滿足各種專業需求。</li>
+                </ul>
+
+                <p>透過 AI 影片製作工具,無論是商業用途還是個人創作,都能輕鬆打造專業級內容!</p>
+
+                <div class="my-5 d-flex align-items-center demo-img">
+                  <img src="/imgs/ai-presenter/YT3.webp" alt="ChoozMo AI人物影片|綠幕主播">
+                  <p class="mb-0">➡️</p>
+                  <img src="/imgs/ai-presenter/綠幕主播.webp" alt="ChoozMo AI人物影片|綠幕主播">
                 </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>
+        </div>
+
+        <h4 class="my-4 title">
+          💡 常見問題
+        </h4>
+
+        <div class="accordion my-4" id="faq_accordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="faq_heading_1">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#faq_collapse_1" aria-expanded="true" aria-controls="faq_collapse_1">
+                如何修改 AI 分鏡表內容?
+              </button>
+            </h2>
+            <div id="faq_collapse_1" class="accordion-collapse collapse" aria-labelledby="faq_heading_1"
+              data-bs-parent="#faq_accordion">
+              <div class="accordion-body">
+                AI 分鏡表提供了直觀的編輯功能,您可以輕鬆進入編輯頁面,自行設定大標題、字幕和素材文字內容。此外,素材圖片也可以自由更換,讓您的創作更加靈活。
               </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>
+
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="faq_heading_2">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#faq_collapse_2" aria-expanded="false" aria-controls="faq_collapse_2">
+                是否可以上傳自己的圖片或影片素材?
+              </button>
+            </h2>
+            <div id="faq_collapse_2" class="accordion-collapse collapse" aria-labelledby="faq_heading_2"
+              data-bs-parent="#faq_accordion">
+              <div class="accordion-body">
+                當然可以!下載 AI 分鏡表後,所有內容皆可隨意編輯,您還能輕鬆上傳個人圖片或影片素材,讓影片更加個性化。
               </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
-                    合成主播」,運用最新人工智慧技術,創造出與真人主播擁有同樣播報能力的「分身」,引起了世界的關注。
-
-
-                    由三星旗下獨立實驗室 STAR Labs 孵化出 NEON 虛擬人,之所以叫 NEON,是因為 NEON 一詞源自 NEO(新)+ humaN(人類)。 NEON
-                    虛擬人在對人物原始面部、聲音等數據進行捕捉並學習之後,可以自主創建未錄入過的新表情、新動作、新對話,甚至能說其他語言,可應用於 AI
-                    主播等層面,未來的應用相當的廣大。NEON虛擬人不只是百科般的語音助手,而是能像真人一樣快速響 應對話,做出真實表情神態的夥伴。三星 Star labs 戰略負責人 Bob Lian
-                    提到:「我們希望創造一個有自己的表情、行為、情感、 甚至感覺和記憶的新生命。」
-                  </p>
-                </div>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="faq_heading_3">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#faq_collapse_3" aria-expanded="false" aria-controls="faq_collapse_3">
+                系統是否會自動上字幕?
+              </button>
+            </h2>
+            <div id="faq_collapse_3" class="accordion-collapse collapse" aria-labelledby="faq_heading_3"
+              data-bs-parent="#faq_accordion">
+              <div class="accordion-body">
+                是的,AI 分鏡表具備全自動字幕生成功能,無需手動剪輯字幕,大幅提升製作效率!
               </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>
+
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="faq_heading_4">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#faq_collapse_4" aria-expanded="false" aria-controls="faq_collapse_4">
+                如何更換影片背景和主播?
+              </button>
+            </h2>
+            <div id="faq_collapse_4" class="accordion-collapse collapse" aria-labelledby="faq_heading_4"
+              data-bs-parent="#faq_accordion">
+              <div class="accordion-body">
+                完成分鏡表後,您只需將內容上傳至 SaaS 的<a href="https://cloud.choozmo.com/main/make-video"
+                  target="_blank">製作影片頁面</a>,即可挑選喜愛的「主播」與「模板」,讓影片風格更加符合需求。
               </div>
-              <div id="blog-tab-6" class="blog-tab-box">
-                <div class="blog-txt">
-                  <p>
-                    建立輸入文稿與輸出音頻訊息的關聯,在圖像的生成技術中,使用人的臉孔辨識,以及三維的臉部重建、表情建模以及肢體動作模型, 建立輸入的文稿、輸出的音頻和視覺動畫的關聯及合成,透過 AI
-                    合成臉及合成聲音,最終產出栩栩如生的 AI 主播。
-                  </p>
-                </div>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="faq_heading_5">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#faq_collapse_5" aria-expanded="false" aria-controls="faq_collapse_5">
+                製作影片需要多長時間?
+              </button>
+            </h2>
+            <div id="faq_collapse_5" class="accordion-collapse collapse" aria-labelledby="faq_heading_5"
+              data-bs-parent="#faq_accordion">
+              <div class="accordion-body">
+                影片製作的時間取決於影片長度。舉例來說,一支 30 秒的影片,製作時間約為 10 分鐘,快速又高效!
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="faq_heading_6">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#faq_collapse_6" aria-expanded="false" aria-controls="faq_collapse_6">
+                如何查看完成的影片?
+              </button>
+            </h2>
+            <div id="faq_collapse_6" class="accordion-collapse collapse" aria-labelledby="faq_heading_6"
+              data-bs-parent="#faq_accordion">
+              <div class="accordion-body">
+                透過<a href="https://cloud.choozmo.com/main/progress"
+                  target="_blank">影片清單</a>,您可以即時查看所有正在製作中的影片以及已完成的影片,並可直接下載成品。
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="faq_heading_7">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#faq_collapse_7" aria-expanded="false" aria-controls="faq_collapse_7">
+                如何付款?是否提供免費試用?
+              </button>
+            </h2>
+            <div id="faq_collapse_7" class="accordion-collapse collapse" aria-labelledby="faq_heading_7"
+              data-bs-parent="#faq_accordion">
+              <div class="accordion-body">
+                AI 分鏡表提供免費試用版,您只需連結 Google 帳號,即可立即體驗!若需正式版功能,可直接在<a href="https://cloud.choozmo.com/main/dashboard"
+                  target="_blank">首頁</a>線上儲值製作秒數,輕鬆升級使用完整功能。
               </div>
-              <a class="btn-light" href="/blog">閱讀更多 ></a>
             </div>
           </div>
         </div>
-      </div>
 
-      <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>
+        <h4 class="my-4 pb-3 title">
+          💡 應用實例
+        </h4>
 
-    </div>
+        <div class="row align-items-center flex-md-row flex-column-reverse">
+          <div class="col-md-6">
+            <p>
+              客家電視台推出每週一部 <a href="https://www.youtube.com/watch?v=IdbJ5ueOME0&list=PL96kIIcXJpMtO2gEqCOkkXLWeUyzetgZN"
+                target="_blank">【AI主播講天時】</a> 節目,由兩位專業的客語 AI 主播輪流主持!
+            </p>
+
+            <ul>
+              <li>用流利的客語帶來最精準的天氣資訊</li>
+              <li>每週定期更新,讓您隨時掌握最新天氣動態</li>
+            </ul>
+          </div>
+
+          <div class="col-md-6 mb-4 mb-md-0">
+            <div class="d-flex flex-column align-items-center">
+              <img width="450" src="/imgs/ai-presenter/客家2.webp" alt="ChoozMo AI人物影片|AI主播講天時">
+              <img width="450" src="/imgs/ai-presenter/客家4.webp" alt="ChoozMo AI人物影片|AI主播講天時" class="mt-4">
+            </div>
+          </div>
+        </div>
+
+        <div class="row align-items-center">
+          <div class="col-md-6">
+            <div class="d-flex flex-column">
+              <img src="/imgs/dm/ai-virtual-star/aivs08.webp" alt="ChoozMo AI人物影片|陳斐娟|應用實例" class="img-fluid">
 
+            </div>
+          </div>
+
+          <div class="col-md-6 mb-4 mb-md-0">
+            <p>
+              三立新聞【克隆娟】每週一更,為知名主播<strong>陳斐娟</strong>量身打造獨特的 AI 造型!
+            </p>
 
+            <p>
+              <strong>AI 與真人連線互動</strong>:克隆娟與陳斐娟遠端連線,一同播報新聞,創造別具一格的播報體驗。
+            </p>
+          </div>
+        </div>
 
-  </div>
+        <div class="row align-items-center flex-md-row flex-column-reverse">
+          <div class="col-md-6">
+            <p>
+              新媒體<a href="https://news.aimedium.org/" target="_blank">【算力傳媒】</a>誕生!<br>
+              AI品牌助理線上採訪
+            </p>
 
-  {{ partial "footer.html" . }}
+            <ul>
+              <li><strong>音檔自動彙整重點</strong>:AI能自動提取採訪音檔中的關鍵信息,快速整理出重要內容。</li>
+              <li><strong>專業級AI主播訪談影片</strong>:透過AI技術生成高品質的訪談影片,讓您的品牌形象更具專業感。
+              </li>
+              <li><strong>即時新聞稿生成</strong>:採訪後可立即轉換為新聞稿,方便快速發布,提升工作效率。</li>
+            </ul>
+          </div>
 
-  <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');
+          <div class="col-md-6 mb-4 mb-md-0">
+            <div class="d-flex flex-column align-items-center">
+              <img width="450" src="/imgs/ai-presenter/YT1.webp" alt="ChoozMo AI人物影片|算力傳媒">
+              <img width="450" src="/imgs/ai-presenter/算力首頁.webp" alt="ChoozMo AI人物影片|算力傳媒首頁" class="mt-4">
+            </div>
+          </div>
+        </div>
 
-      $('.blog-tabs-nav a').on('click', function (event) {
-        event.preventDefault();
-        $('.blog-tabs-nav li').removeClass('blog-tab-active');
-        $(this).parent().addClass('blog-tab-active');
+        <a href="https://cloud.choozmo.com/main/make-video" class="my-5 link-btn" target="_blank">免費開始體驗</a>
+
+        <div class="accordion my-5 pb-5" id="disclaimer">
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="disclaimerHeading_1">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#disclaimerCollapse_1" aria-expanded="false" aria-controls="disclaimerCollapse_1">
+                <p>使用者的守法義務</p>
+              </button>
+            </h2>
+            <div id="disclaimerCollapse_1" class="accordion-collapse collapse" aria-labelledby="disclaimerHeading_1"
+              data-bs-parent="#disclaimer">
+              <div class="accordion-body">
+                <section class="terms-content">
+                  <p>
+                    您承諾絕不為任何非法目的或以任何非法方式使用本服務,並承諾遵守中華民國相關法規及一切使用網際網路之國際慣例。您若係中華民國以外之使用者,並同意遵守所屬國家或地域之法令。您同意並保證不得利用本服務從事侵害他人權益或違法之行為,包括但不限於:
+                  </p>
+                  <ul>
+                    <li>上載、張貼、公布或傳送任何誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片或任何形式的檔案於本服務上</li>
+                    <li>侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利</li>
+                    <li>違反依法律或契約所應負之保密義務</li>
+                    <li>冒用他人名義使用本服務</li>
+                  </ul>
+                </section>
+              </div>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="disclaimerheading_2">
+              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                data-bs-target="#disclaimerCollapse_2" aria-expanded="false" aria-controls="disclaimerCollapse_2">
+                <p>免責聲明</p>
+              </button>
+            </h2>
+            <div id="disclaimerCollapse_2" class="accordion-collapse collapse" aria-labelledby="disclaimerheading_2"
+              data-bs-parent="#disclaimer">
+              <div class="accordion-body">
+                <section class="terms-content">
+                  <p>
+                    您明確了解並同意:ChoozMo
+                    對本服務不提供任何明示或默示的擔保,包含但不限於權利完整、商業適售性、特定目的之適用性及未侵害他人權利。本服務乃依其「現狀」及「提供使用時」之基礎提供,您使用本服務時,須自行承擔相關風險。ChoozMo
+                    不保證以下事項:
+                  </p>
+                  <ul>
+                    <li>本服務將符合您的需求</li>
+                    <li>本服務不受干擾、及時提供、安全可靠或無錯誤</li>
+                    <li>由本服務之使用而取得之結果為正確或可靠</li>
+                  </ul>
+                  <p>是否經由本服務之使用下載或取得任何資料應由您自行考量且自負風險,並拋棄因前開任何資料之下載而導致您電腦系統、網路存取、下載或播放設備之任何損壞或資料流失,對 ChoozMo
+                    提出任何請求或採取法律行動,您應自負完全責任。</p>
+                </section>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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();
-        $($(this).attr('href')).show();
-      });
-    })();
-  </script>
+        $('.blog-tabs-stage>div:first').show();
+        $('.blog-tabs-nav li:first').addClass('blog-tab-active');
+
+        $('.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>

+ 490 - 0
layouts/ai-presenter/single_backup.html

@@ -0,0 +1,490 @@
+<!DOCTYPE html>
+<html lang="en">
+{{ partial "head_single.html" . }}
+<!-- <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 AI-PR Service</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" . }}
+
+  <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>
+              <a href="https://cloud.choozmo.com/login" class="link-btn" target="_blank">開始製作影片</a>
+            </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>
+
+      <section class="title-item my-5">
+        <img src="/imgs/ai-presenter/裝飾-01.png" alt="">
+        <h4>應用方式</h4>
+      </section>
+
+      <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/CUR_9L8RtDk" 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/CUR_9L8RtDk?autoplay=1&loop=1&mute=1&playlist=CUR_9L8RtDk"
+                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. 註冊 ChoozMo AIGV 專屬帳號</h4>
+              <p class="excerpt">一旦註冊即送 60 秒影片製作服務,使用滿意可後續加值</p>
+              <div class="d-flex justify-content-center">
+                <a href="https://cloud.choozmo.com/signup" 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 資料夾至 ChoozMo AIGV 平台</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://cloud.choozmo.com/login" 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/ix_FkhPX80w"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+                </div>
+                <div class="video-box my-4">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/95gce-Upi_A"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+                </div>
+                <p class="ms-3">▼ 台語</p>
+                <div class="video-box my-4">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/9Pu6LUocmoc"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen></iframe>
+                </div>
+                <p class="ms-3">▼ 日文</p>
+                <div class="video-box my-4">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/PY51gyW1x8w"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen></iframe>
+                </div>
+                <p class="ms-3">▼ 越南文</p>
+                <div class="video-box my-4">
+                  <iframe width="560" height="315" src="https://www.youtube.com/embed/9umdItL0GME"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen></iframe>
+                </div>
+              </section>
+            </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 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
+                    合成主播」,運用最新人工智慧技術,創造出與真人主播擁有同樣播報能力的「分身」,引起了世界的關注。
+
+
+                    由三星旗下獨立實驗室 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>
+
+      <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');
+
+      $('.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>

+ 96 - 350
static/css/style.css

@@ -4262,410 +4262,156 @@
 .ai-presenter {
   margin: 100px auto;
   overflow: hidden;
+  /* 舊版 */
 }
-.ai-presenter .title-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-.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 .link-btn {
+.ai-presenter a {
   display: inline-block;
-  padding: 12px 35px;
-  margin-top: 25px;
-  font-size: 18px;
+  color: #ea5413;
   font-weight: bold;
-  border-radius: 100px;
-  text-decoration: none;
-  color: #fff;
-  background: #ea5413;
-  transition: all 0.3s;
-}
-.ai-presenter .link-btn:hover {
-  opacity: 0.8;
 }
-.ai-presenter .usecace-list {
-  margin-bottom: 100px;
+.ai-presenter img {
+  max-width: 100%;
 }
-.ai-presenter .usecace-list img {
-  width: 100%;
+.ai-presenter p,
+.ai-presenter li,
+.ai-presenter th {
+  font-size: 1.125rem;
+  line-height: 2;
 }
-.ai-presenter .usecace-list h5 {
-  font-size: 18px;
+.ai-presenter .title,
+.ai-presenter .accordion-header h4 {
+  color: #ea5413;
+  font-weight: bold;
   text-align: center;
+  line-height: 1.5;
 }
-.ai-presenter .usecace-list h5::before {
-  content: "";
-  font-weight: bold;
-  display: inline-block;
-  border: 5px solid #e0c3dd;
-  border-radius: 20px;
-  margin-right: 10px;
-  margin-bottom: 2px;
+.ai-presenter .accordion-item {
+  border: none;
 }
-.ai-presenter .video-left,
-.ai-presenter .video-right {
+.ai-presenter .accordion-item .accordion-body {
   display: flex;
   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 {
+.ai-presenter .accordion-item .accordion-header {
   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%;
-  padding: 20px;
-  font-size: 24px;
-  text-align: center;
-  background: #fff;
-  border-radius: 15px 15px 0 0;
-}
-.ai-presenter .video-left .video-box,
-.ai-presenter .video-right .video-box {
-  width: 100%;
-  margin-top: 20px;
-  padding-bottom: 45%;
-}
-.ai-presenter .video-left {
-  background: #d8bbd9;
-}
-.ai-presenter .video-right {
-  background: #fde3d9;
-}
-.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;
+  justify-content: center;
 }
-.ai-presenter .step-content .container,
-.ai-presenter .template-content .container {
-  margin-top: -38px;
+.ai-presenter .accordion-item .accordion-header button p {
+  color: #000;
 }
-.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 .accordion-item .accordion-header .accordion-button:focus {
+  box-shadow: none;
 }
-.ai-presenter .step-content .bg-top,
-.ai-presenter .template-content .bg-top {
-  top: -10px;
+.ai-presenter .accordion-item .accordion-header .accordion-button:not(.collapsed) {
+  color: #ea5413;
+  background-color: #fff;
+  box-shadow: none;
 }
-.ai-presenter .step-content .bg-bottom,
-.ai-presenter .template-content .bg-bottom {
-  bottom: -10px;
+.ai-presenter .accordion-item .accordion-header .accordion-button::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
 }
-.ai-presenter .step-content ul,
-.ai-presenter .template-content ul {
-  padding: 0;
-  list-style: none;
+.ai-presenter .accordion-item .accordion-header button {
   display: flex;
-  flex-direction: column;
   justify-content: center;
+  align-items: center;
+  width: auto;
 }
-.ai-presenter .step-content ul li,
-.ai-presenter .template-content ul li {
-  margin: 30px auto;
-}
-.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 .template-content ul li h4 {
-  color: #ea5413;
+.ai-presenter .accordion-item .accordion-header button h4,
+.ai-presenter .accordion-item .accordion-header button p {
+  margin-bottom: 0;
+  margin-right: 1rem;
+  font-size: 24px;
   font-weight: bold;
-  text-align: center;
-  line-height: 34px;
 }
-@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;
+.ai-presenter #faq_accordion {
+  width: 100%;
 }
-@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 #faq_accordion .accordion-header {
+  display: block;
 }
-.ai-presenter .step-content .excerpt,
-.ai-presenter .template-content .excerpt {
-  margin: 15px 25px 0;
-  font-size: 18px;
+.ai-presenter #faq_accordion .accordion-header button {
+  width: 100%;
   font-weight: bold;
 }
-.ai-presenter .step-content .excerpt::before,
-.ai-presenter .template-content .excerpt::before {
-  content: "";
-  font-weight: bold;
-  display: inline-block;
-  border: 5px solid #ea5413;
-  border-radius: 20px;
-  margin-right: 10px;
-  margin-bottom: 2px;
+.ai-presenter #faq_accordion .accordion-item {
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.125);
 }
-@media (max-width: 575px) {
-  .ai-presenter .step-content .excerpt,
-  .ai-presenter .template-content .excerpt {
-    font-size: 16px;
-  }
+.ai-presenter #faq_accordion .accordion-item .accordion-body {
+  display: block;
 }
-@media (max-width: 575px) {
-  .ai-presenter .step-content .caption,
-  .ai-presenter .template-content .caption {
-    font-size: 15px;
-  }
+.ai-presenter #faq_accordion .accordion-button:not(.collapsed) {
+  color: #000;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
 }
-.ai-presenter .template-content table {
-  display: table;
-  width: 110%;
-  height: auto;
-  margin-left: auto;
-  margin-top: -250px;
+.ai-presenter .link-btn {
+  display: inline-block;
+  padding: 12px 35px;
+  margin: 2rem auto 3rem;
+  font-size: 18px;
   font-weight: bold;
+  border-radius: 100px;
+  text-decoration: none;
+  color: #fff;
+  background: #ea5413;
+  transition: all 0.3s;
 }
-@media (max-width: 1199px) {
-  .ai-presenter .template-content table {
-    margin-top: -195px;
-  }
+.ai-presenter .link-btn:hover {
+  opacity: 0.8;
 }
-@media (max-width: 991px) {
-  .ai-presenter .template-content table {
-    margin-top: -140px;
-  }
+.ai-presenter .demo-img img {
+  max-width: 300px;
 }
-@media (max-width: 767px) {
-  .ai-presenter .template-content table {
-    width: 86%;
-    margin-top: 20px;
-    margin-left: 39px;
-  }
+.ai-presenter .demo-img p {
+  margin: 0 1rem;
+  font-size: 2rem;
 }
-@media (max-width: 575px) {
-  .ai-presenter .template-content table {
-    margin: 20px auto 0;
-    margin-left: auto;
-  }
+.ai-presenter table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #ccc;
+  font-size: 1rem;
+  letter-spacing: 1px;
 }
-.ai-presenter .template-content table tbody {
-  border: 1px solid #f08757;
+.ai-presenter table tbody {
+  vertical-align: top;
 }
-.ai-presenter .template-content table td {
+.ai-presenter table th {
   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: 1199px) {
-  .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 table th,
+.ai-presenter table td {
+  border: 1px solid #ccc;
+  padding: 20px;
 }
-.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 table th p,
+.ai-presenter table th ul,
+.ai-presenter table td p,
+.ai-presenter table td ul {
+  margin-bottom: 0;
 }
-.ai-presenter .template-content .info img {
-  height: auto;
+.ai-presenter .iframe-box {
   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: 1199px) {
-  .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%;
+  padding-top: 5px;
+  overflow: hidden;
 }
-@media (max-width: 1400px) {
-  .ai-presenter .template-content .info .img-text-right {
-    left: 20.5%;
-  }
+.ai-presenter .iframe-box iframe {
+  width: 100%;
+  height: 100%;
 }
 @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 .iframe-box iframe {
+    height: auto;
+    aspect-ratio: 16/9;
   }
 }
-.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;

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
static/css/style.css.map


+ 486 - 328
static/css/style.scss

@@ -4699,29 +4699,109 @@
   margin: 100px auto;
   overflow: hidden;
 
-  .title-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;
+  a {
+    display: inline-block;
+    color: #ea5413;
+    font-weight: bold;
+  }
 
-    img {
-      width: 450px;
+  img {
+    max-width: 100%;
+  }
 
-      @media (max-width: 575px) {
-        width: 350px;
+  p,
+  li,
+  th {
+    font-size: 1.125rem;
+    line-height: 2;
+  }
+
+  .title,
+  .accordion-header h4 {
+    color: #ea5413;
+    font-weight: bold;
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  .accordion-item {
+    border: none;
+
+    .accordion-body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .accordion-header {
+      display: flex;
+      justify-content: center;
+
+      button {
+        p {
+          color: #000;
+        }
+      }
+
+      .accordion-button {
+        &:focus {
+          box-shadow: none;
+        }
+
+        &:not(.collapsed) {
+          color: #ea5413;
+          background-color: #fff;
+          box-shadow: none;
+        }
+
+        &::after {
+          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+        }
+      }
+
+
+      button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: auto;
+
+        h4,
+        p {
+          margin-bottom: 0;
+          margin-right: 1rem;
+          font-size: 24px;
+          font-weight: bold;
+        }
       }
     }
+  }
 
-    h4 {
-      text-align: center;
-      margin-top: -41px;
-      margin-left: -10px;
-      font-weight: bold;
+  #faq_accordion {
+    width: 100%;
 
-      @media (max-width: 575px) {
-        margin-top: -34px;
+    .accordion-header {
+      display: block;
+
+      button {
+        width: 100%;
+        font-weight: bold;
+      }
+    }
+
+    .accordion-item {
+      margin-bottom: 20px;
+      border: 1px solid rgba(0, 0, 0, .125);
+
+      .accordion-body {
+        display: block;
+      }
+    }
+
+    .accordion-button {
+      &:not(.collapsed) {
+        color: #000;
+        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
       }
     }
   }
@@ -4729,7 +4809,7 @@
   .link-btn {
     display: inline-block;
     padding: 12px 35px;
-    margin-top: 25px;
+    margin: 2rem auto 3rem;
     font-size: 18px;
     font-weight: bold;
     border-radius: 100px;
@@ -4743,396 +4823,474 @@
     }
   }
 
-  .usecace-list {
-    margin-bottom: 100px;
-
+  .demo-img {
     img {
-      width: 100%;
+      max-width: 300px;
     }
 
-    h5 {
-      font-size: 18px;
+    p {
+      margin: 0 1rem;
+      font-size: 2rem;
+    }
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #ccc;
+    font-size: 1rem;
+    letter-spacing: 1px;
+
+    tbody {
+      vertical-align: top;
+    }
+
+    th {
       text-align: center;
+    }
 
-      &::before {
+    th,
+    td {
+      border: 1px solid #ccc;
+      padding: 20px;
+
+      p,
+      ul {
+        margin-bottom: 0;
+      }
+    }
+
+  }
+
+  .iframe-box {
+    width: 100%;
+    padding-top: 5px;
+    overflow: hidden;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+
+      @media (max-width: 991px) {
+        height: auto;
+        aspect-ratio: 16 / 9;
+      }
+    }
+  }
+
+  .terms-content {
+    font-weight: bold;
+    line-height: 32px;
+    color: #6c6d70;
+    text-align: justify;
+
+    ul {
+      padding: 0;
+      list-style: none;
+
+      li::before {
         content: "";
         font-weight: bold;
         display: inline-block;
-        border: 5px solid #e0c3dd;
+        border: 3px solid #ea5413;
         border-radius: 20px;
         margin-right: 10px;
         margin-bottom: 2px;
+        line-height: 32px;
       }
     }
   }
 
-  .video-left,
-  .video-right {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    padding: 20px;
-    background: #d8bbd9;
-    border-radius: 20px;
+  /* 舊版 */
+  // .title-item {
+  //   display: flex;
+  //   flex-direction: column;
+  //   justify-content: center;
+  //   align-items: center;
+  //   position: relative;
 
-    a {
-      display: flex;
-      width: 100%;
-      text-decoration: none;
-      color: #000;
+  //   img {
+  //     width: 450px;
 
-      &:hover .click-img {
-        top: 50px;
-      }
-    }
+  //     @media (max-width: 575px) {
+  //       width: 350px;
+  //     }
+  //   }
 
-    .click-img {
-      position: absolute;
-      width: 50px;
-      top: 60px;
-      right: 40px;
-    }
+  //   h4 {
+  //     text-align: center;
+  //     margin-top: -41px;
+  //     margin-left: -10px;
+  //     font-weight: bold;
 
-    strong {
-      width: 100%;
-      padding: 20px;
-      font-size: 24px;
-      text-align: center;
-      background: #fff;
-      border-radius: 15px 15px 0 0;
-    }
+  //     @media (max-width: 575px) {
+  //       margin-top: -34px;
+  //     }
+  //   }
+  // }
 
-    .video-box {
-      width: 100%;
-      margin-top: 20px;
-      padding-bottom: 45%;
-    }
-  }
+  // .usecace-list {
+  //   margin-bottom: 100px;
 
-  .video-left {
-    background: #d8bbd9;
-  }
+  //   img {
+  //     width: 100%;
+  //   }
 
-  .video-right {
-    background: #fde3d9;
-  }
+  //   h5 {
+  //     font-size: 18px;
+  //     text-align: center;
 
-  .mp4-box {
-    width: 70%;
-    height: 0;
-    margin: auto;
-    padding-bottom: 45%;
+  //     &::before {
+  //       content: "";
+  //       font-weight: bold;
+  //       display: inline-block;
+  //       border: 5px solid #e0c3dd;
+  //       border-radius: 20px;
+  //       margin-right: 10px;
+  //       margin-bottom: 2px;
+  //     }
+  //   }
+  // }
 
-    video {
-      width: 100%;
-      height: auto;
-    }
-  }
+  // .video-left,
+  // .video-right {
+  //   display: flex;
+  //   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;
+  //     }
+  //   }
 
-  .step-content,
-  .template-content {
-    margin: 100px auto;
-    position: relative;
+  //   .click-img {
+  //     position: absolute;
+  //     width: 50px;
+  //     top: 60px;
+  //     right: 40px;
+  //   }
 
-    .container {
-      margin-top: -38px;
-    }
+  //   strong {
+  //     width: 100%;
+  //     padding: 20px;
+  //     font-size: 24px;
+  //     text-align: center;
+  //     background: #fff;
+  //     border-radius: 15px 15px 0 0;
+  //   }
 
-    .bg-top,
-    .bg-bottom {
-      width: 100%;
-      position: absolute;
-      z-index: -10;
-      left: 0;
-      right: 0;
-    }
+  //   .video-box {
+  //     width: 100%;
+  //     margin-top: 20px;
+  //     padding-bottom: 45%;
+  //   }
+  // }
 
-    .bg-top {
-      top: -10px;
-    }
+  // .video-left {
+  //   background: #d8bbd9;
+  // }
 
-    .bg-bottom {
-      bottom: -10px;
-    }
+  // .video-right {
+  //   background: #fde3d9;
+  // }
 
-    ul {
-      padding: 0;
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+  // .mp4-box {
+  //   width: 70%;
+  //   height: 0;
+  //   margin: auto;
+  //   padding-bottom: 45%;
 
-      li {
-        margin: 30px auto;
+  //   video {
+  //     width: 100%;
+  //     height: auto;
+  //   }
+  // }
 
-        img {
-          height: auto;
-          width: 100%;
-          max-width: 800px;
-        }
+  // .step-content,
+  // .template-content {
+  //   margin: 100px auto;
+  //   position: relative;
 
-        h4 {
-          color: #ea5413;
-          font-weight: bold;
-          text-align: center;
-          line-height: 34px;
+  //   .container {
+  //     margin-top: -38px;
+  //   }
 
-          @media (max-width: 575px) {
-            font-size: 20px;
-          }
-        }
+  //   .bg-top,
+  //   .bg-bottom {
+  //     width: 100%;
+  //     position: absolute;
+  //     z-index: -10;
+  //     left: 0;
+  //     right: 0;
+  //   }
 
-        .point-list {
-          list-style: decimal;
+  //   .bg-top {
+  //     top: -10px;
+  //   }
 
-          li {
-            margin: 5px 45px;
+  //   .bg-bottom {
+  //     bottom: -10px;
+  //   }
 
-            @media (max-width: 575px) {
-              margin: 5px 0 5px 20px;
-            }
+  //   ul {
+  //     padding: 0;
+  //     list-style: none;
+  //     display: flex;
+  //     flex-direction: column;
+  //     justify-content: center;
 
-            // &::before {
-            //   content: "";
-            //   font-weight: bold;
-            //   display: inline-block;
-            //   border: 3px solid #ea5413;
-            //   border-radius: 20px;
-            //   margin-right: 10px;
-            //   margin-bottom: 2px;
-            // }
-          }
-        }
-      }
-    }
+  //     li {
+  //       margin: 30px auto;
 
-    .excerpt {
-      margin: 15px 25px 0;
-      font-size: 18px;
-      font-weight: bold;
+  //       img {
+  //         height: auto;
+  //         width: 100%;
+  //         max-width: 800px;
+  //       }
 
-      &::before {
-        content: "";
-        font-weight: bold;
-        display: inline-block;
-        border: 5px solid #ea5413;
-        border-radius: 20px;
-        margin-right: 10px;
-        margin-bottom: 2px;
-      }
+  //       h4 {
+  //         color: #ea5413;
+  //         font-weight: bold;
+  //         text-align: center;
+  //         line-height: 34px;
 
-      @media (max-width: 575px) {
-        font-size: 16px;
-      }
-    }
+  //         @media (max-width: 575px) {
+  //           font-size: 20px;
+  //         }
+  //       }
 
-    .caption {
-      @media (max-width: 575px) {
-        font-size: 15px;
-      }
-    }
-  }
+  //       .point-list {
+  //         list-style: decimal;
+
+  //         li {
+  //           margin: 5px 45px;
+
+  //           @media (max-width: 575px) {
+  //             margin: 5px 0 5px 20px;
+  //           }
+
+  //           // &::before {
+  //           //   content: "";
+  //           //   font-weight: bold;
+  //           //   display: inline-block;
+  //           //   border: 3px solid #ea5413;
+  //           //   border-radius: 20px;
+  //           //   margin-right: 10px;
+  //           //   margin-bottom: 2px;
+  //           // }
+  //         }
+  //       }
+  //     }
+  //   }
 
-  .template-content {
-    table {
-      display: table;
-      width: 110%;
-      height: auto;
-      margin-left: auto;
-      margin-top: -250px;
-      font-weight: bold;
+  //   .excerpt {
+  //     margin: 15px 25px 0;
+  //     font-size: 18px;
+  //     font-weight: bold;
 
-      @media (max-width: 1199px) {
-        margin-top: -195px;
-      }
+  //     &::before {
+  //       content: "";
+  //       font-weight: bold;
+  //       display: inline-block;
+  //       border: 5px solid #ea5413;
+  //       border-radius: 20px;
+  //       margin-right: 10px;
+  //       margin-bottom: 2px;
+  //     }
 
-      @media (max-width: 991px) {
-        margin-top: -140px;
-      }
+  //     @media (max-width: 575px) {
+  //       font-size: 16px;
+  //     }
+  //   }
 
-      @media (max-width: 767px) {
-        width: 86%;
-        margin-top: 20px;
-        margin-left: 39px;
-      }
+  //   .caption {
+  //     @media (max-width: 575px) {
+  //       font-size: 15px;
+  //     }
+  //   }
+  // }
 
-      @media (max-width: 575px) {
-        margin: 20px auto 0;
-        margin-left: auto;
-      }
+  // .template-content {
+  //   table {
+  //     display: table;
+  //     width: 110%;
+  //     height: auto;
+  //     margin-left: auto;
+  //     margin-top: -250px;
+  //     font-weight: bold;
 
-      tbody {
-        border: 1px solid #f08757;
-      }
+  //     @media (max-width: 1199px) {
+  //       margin-top: -195px;
+  //     }
 
-      td {
-        text-align: center;
-      }
+  //     @media (max-width: 991px) {
+  //       margin-top: -140px;
+  //     }
 
-      tr {
-        border-style: none !important;
-        border-bottom-width: 0px !important;
-      }
-    }
+  //     @media (max-width: 767px) {
+  //       width: 86%;
+  //       margin-top: 20px;
+  //       margin-left: 39px;
+  //     }
 
-    .table-title {
-      margin-top: -242px;
-      text-align: end;
+  //     @media (max-width: 575px) {
+  //       margin: 20px auto 0;
+  //       margin-left: auto;
+  //     }
 
-      @media (max-width: 1199px) {
-        margin-top: -185px;
-      }
+  //     tbody {
+  //       border: 1px solid #f08757;
+  //     }
 
-      @media (max-width: 991px) {
-        margin-top: -133px;
-      }
+  //     td {
+  //       text-align: center;
+  //     }
 
-      @media (max-width: 767px) {
-        margin-top: 0;
-        text-align: start;
-      }
-    }
+  //     tr {
+  //       border-style: none !important;
+  //       border-bottom-width: 0px !important;
+  //     }
+  //   }
 
-    .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-title {
+  //     margin-top: -242px;
+  //     text-align: end;
 
-    .table-striped>tbody>tr:nth-child(even)>td,
-    .table-striped>tbody>tr:nth-child(even)>th {
-      border-bottom-width: 0px !important;
-    }
+  //     @media (max-width: 1199px) {
+  //       margin-top: -185px;
+  //     }
 
-    .info {
-      img {
-        height: auto;
-        width: 100%;
-        max-width: 800px;
-      }
+  //     @media (max-width: 991px) {
+  //       margin-top: -133px;
+  //     }
 
-      .img-left {
-        @media (max-width: 767px) {
-          padding: 0 15px;
-        }
-      }
+  //     @media (max-width: 767px) {
+  //       margin-top: 0;
+  //       text-align: start;
+  //     }
+  //   }
 
-      .img-right {
-        width: 107%;
+  //   .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;
+  //   }
 
-        @media (max-width: 767px) {
-          width: 100%;
-        }
-      }
+  //   .table-striped>tbody>tr:nth-child(even)>td,
+  //   .table-striped>tbody>tr:nth-child(even)>th {
+  //     border-bottom-width: 0px !important;
+  //   }
 
-      .img-text-left,
-      .img-text-right {
-        position: absolute;
-        top: 9%;
-        color: #ea5413;
-        font-size: 34px;
-        font-weight: bold;
+  //   .info {
+  //     img {
+  //       height: auto;
+  //       width: 100%;
+  //       max-width: 800px;
+  //     }
 
-        @media (max-width: 1199px) {
-          top: 8%;
-          font-size: 28px;
-        }
+  //     .img-left {
+  //       @media (max-width: 767px) {
+  //         padding: 0 15px;
+  //       }
+  //     }
 
-        @media (max-width: 991px) {
-          font-size: 22px;
-        }
+  //     .img-right {
+  //       width: 107%;
 
-        @media (max-width: 767px) {
-          font-size: 30px;
-        }
+  //       @media (max-width: 767px) {
+  //         width: 100%;
+  //       }
+  //     }
 
-        @media (max-width: 575px) {
-          font-size: 4.8vw;
-        }
-      }
+  //     .img-text-left,
+  //     .img-text-right {
+  //       position: absolute;
+  //       top: 9%;
+  //       color: #ea5413;
+  //       font-size: 34px;
+  //       font-weight: bold;
 
-      .img-text-left {
-        left: 31%;
+  //       @media (max-width: 1199px) {
+  //         top: 8%;
+  //         font-size: 28px;
+  //       }
 
-        @media (max-width: 1400px) {
-          left: 28.5%;
-        }
+  //       @media (max-width: 991px) {
+  //         font-size: 22px;
+  //       }
 
-        @media (max-width: 767px) {
-          left: 30%;
-        }
-      }
+  //       @media (max-width: 767px) {
+  //         font-size: 30px;
+  //       }
 
-      .img-text-right {
-        left: 24.5%;
+  //       @media (max-width: 575px) {
+  //         font-size: 4.8vw;
+  //       }
+  //     }
 
-        @media (max-width: 1400px) {
-          left: 20.5%;
-        }
+  //     .img-text-left {
+  //       left: 31%;
 
-        @media (max-width: 991px) {
-          left: 18.5%;
-        }
+  //       @media (max-width: 1400px) {
+  //         left: 28.5%;
+  //       }
 
-        @media (max-width: 767px) {
-          top: 13%;
-          left: 19%;
-        }
-      }
+  //       @media (max-width: 767px) {
+  //         left: 30%;
+  //       }
+  //     }
 
-      .video-box {
-        position: relative;
-        width: 95%;
-        height: 0;
-        padding-bottom: 50%;
-        margin: auto;
-      }
-    }
+  //     .img-text-right {
+  //       left: 24.5%;
 
-    .pageForm {
-      margin-top: 8rem;
-      background: #fff;
+  //       @media (max-width: 1400px) {
+  //         left: 20.5%;
+  //       }
 
-      h3 {
-        line-height: 40px;
-      }
-    }
-  }
+  //       @media (max-width: 991px) {
+  //         left: 18.5%;
+  //       }
 
-  .sec-blogtab {
-    padding-top: 50px;
-  }
+  //       @media (max-width: 767px) {
+  //         top: 13%;
+  //         left: 19%;
+  //       }
+  //     }
 
-  .terms-content {
-    font-size: 18px;
-    font-weight: bold;
-    line-height: 32px;
-    color: #6c6d70;
-    text-align: justify;
+  //     .video-box {
+  //       position: relative;
+  //       width: 95%;
+  //       height: 0;
+  //       padding-bottom: 50%;
+  //       margin: auto;
+  //     }
+  //   }
 
-    @media (max-width: 575px) {
-      padding: 0 20px;
-    }
+  //   .pageForm {
+  //     margin-top: 8rem;
+  //     background: #fff;
 
-    ul {
-      padding: 0;
-      list-style: none;
+  //     h3 {
+  //       line-height: 40px;
+  //     }
+  //   }
+  // }
 
-      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;
-      }
-    }
-  }
+  // .sec-blogtab {
+  //   padding-top: 50px;
+  // }
 }
 
 /* ai-presenter End */

BIN
static/imgs/ai-presenter/AI分鏡表.webp


BIN
static/imgs/ai-presenter/SaaS首圖.webp


BIN
static/imgs/ai-presenter/YT1.webp


BIN
static/imgs/ai-presenter/YT2.webp


BIN
static/imgs/ai-presenter/YT3.webp


BIN
static/imgs/ai-presenter/YT4.webp


BIN
static/imgs/ai-presenter/四格SaaS教學gif.gif


BIN
static/imgs/ai-presenter/客家2.webp


BIN
static/imgs/ai-presenter/客家4.webp


BIN
static/imgs/ai-presenter/算力首頁.webp


BIN
static/imgs/ai-presenter/綠幕主播.webp


Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä