choozmo
/
AI_Video_LP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!DOCTYPE html>
<html lang="zh-Hant">

<head>
  {{ partial "head_single.html" . }}

  <title>AI 主持人｜企業活動、直播、品牌發表的智能主持解決方案</title>
  <meta name="description" content="AI 主持人：低成本、高效率、穩定專業、多語支援。適用新品發表、企業年會、展覽、線上直播與 Kiosk 互動服務，打造高質感、零失誤的專業主持體驗。">
  <meta property="og:title" content="AI 主持人｜智能主持解決方案">
  <meta property="og:description" content="穩定表現、品質一致、24/7、多語支援，讓活動更省心、專業又具國際感。">
  <meta property="og:type" content="website">

  <!-- Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    :root {
      --brand: #ea5413;
      /* 主色 */
      --brand-dark: #c43e00;
      /* 深色版本 (hover、強調用) */
      --brand-light: #fff3ed;
      /* 淡色背景 */
      --gray-border: #e5e7eb;
      --text-dark: #0b1120;
      --text-secondary: #555;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: var(--text-dark);
      background-color: #fff;
    }

    .text-primary {
      color: var(--brand) !important;
    }

    .hero {
      background: radial-gradient(1200px 500px at 20% -10%, rgba(234, 84, 19, 0.18), transparent),
        radial-gradient(800px 400px at 100% 0%, rgba(234, 84, 19, 0.1), transparent),
        linear-gradient(180deg, #fffdfc, #fff7f3);
      border-bottom: 1px solid var(--gray-border);
    }

    .badge-soft {
      background: rgba(234, 84, 19, 0.1);
      color: var(--brand);
      border: 1px solid rgba(234, 84, 19, 0.2);
      font-weight: 600;
    }

    .shadow-soft {
      box-shadow: 0 8px 30px rgba(234, 84, 19, 0.15);
    }

    .feature-card {
      border: 1px solid var(--gray-border);
      border-radius: 16px;
      padding: 20px;
      background: #fff;
      height: 100%;
      transition: all 0.3s ease;
    }

    .feature-card:hover {
      border-color: var(--brand);
      box-shadow: 0 6px 20px rgba(234, 84, 19, 0.15);
    }

    .title {
      border-bottom: 2px solid var(--brand-light);
    }

    .link-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--brand);
      color: #fff;
      padding: 0.9rem 1.2rem;
      border-radius: 0.8rem;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
      font-weight: 600;
      box-shadow: 0 3px 8px rgba(234, 84, 19, 0.2);
    }

    .link-btn:hover {
      background: var(--brand-dark);
      color: #fff;
      box-shadow: 0 6px 14px rgba(196, 62, 0, 0.25);
    }

    .outline-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border: 2px solid var(--brand);
      color: var(--brand);
      padding: 0.8rem 1.2rem;
      border-radius: 0.8rem;
      font-weight: 600;
      background: transparent;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
    }

    .outline-btn:hover {
      background: var(--brand);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(234, 84, 19, 0.25);
    }

    .cta-band {
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 25px rgba(234, 84, 19, 0.25);
    }

    .accordion-button {
      color: var(--brand-dark);
      background-color: #fff;
      font-weight: 600;
    }

    .accordion-button:not(.collapsed) {
      color: var(--brand);
      background-color: var(--brand-light);
      box-shadow: inset 0 -1px 0 rgba(234, 84, 19, 0.1);
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 0.2rem rgba(234, 84, 19, 0.25);
    }

    .media-card img,
    .media-card video {
      border-radius: 14px;
      width: 100%;
      height: auto;
      border: 1px solid var(--gray-border);
      box-shadow: 0 4px 16px rgba(234, 84, 19, 0.1);
    }

    .kicker {
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--brand-dark);
    }

    a {
      color: var(--brand);
      text-decoration: none;
    }

    a:hover {
      color: var(--brand-dark);
    }

    .accordion-button:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5413'%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");
    }
  </style>

</head>

<body>
  {{ partial "navbar.html" . }}

  <!-- Hero -->
  <header class="hero py-5 mt-5">
    <div class="container pt-5">
      <div class="row align-items-center g-4">
        <div class="col-lg-7">
          <!-- <span class="badge badge-soft mb-3">AI 主持人 · 智能內容創作</span> -->
          <h1 class="display-5 fw-bold mb-3">專為活動與品牌打造的 <strong class="text-primary">AI 主持人</strong></h1>
          <p class="lead text-secondary mb-4">
            以 AI 主持人打造高品質、可擴充、零情緒波動的主持體驗。支援多語切換、腳本客製、品牌語氣一致，
            適用新品發表、年會、展覽、直播與 Kiosk 互動服務。
          </p>
          <div class="d-flex flex-wrap gap-3">
            <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank"
              rel="noopener">
              <i class="bi bi-chat-dots"></i> 立即與專人諮詢
            </a>
            <a href="#cases" class="outline-btn d-inline-flex align-items-center">
              <i class="bi bi-play-circle"></i> 查看實際案例
            </a>
          </div>
          <div class="mt-4 text-secondary small">
            <i class="bi bi-shield-check me-1"></i> 穩定 · 多語 · 可擴充 · 品牌一致性
          </div>
        </div>
        <div class="col-lg-5">
          <div class="p-3 bg-white shadow-soft rounded-4">
            <img src="/img/meet-taipei.webp" alt="AI 主持人範例" class="w-100 rounded-3">
          </div>
          <p class="text-center small text-secondary mt-2">▲ AI 主持人示意</p>
        </div>
      </div>
    </div>
  </header>

  <!-- Why AI Host -->
  <section class="py-5 mt-5">
    <div class="container">
      <div class="text-center">
        <p class="kicker mb-2">Why AI Host</p>
        <h2 class="fw-bold mb-4">企業為什麼選擇 AI 主持人？</h2>
      </div>

      <div class="row g-4">
        <div class="col-md-6 col-lg-3">
          <div class="feature-card">
            <div class="d-flex align-items-center mb-2"><i
                class="bi bi-cash-coin fs-3 text-primary me-2"></i><strong>低成本、高效率</strong></div>
            <p class="mb-0 text-secondary">透過 AI 訓練與腳本設定，快速生成專業主持內容，大幅節省人力與前置成本。</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="feature-card">
            <div class="d-flex align-items-center mb-2"><i
                class="bi bi-broadcast-pin fs-3 text-primary me-2"></i><strong>穩定表現，品質一致</strong></div>
            <p class="mb-0 text-secondary">不受情緒與外在因素影響，發音清晰、語速可控，場場穩定專業。</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="feature-card">
            <div class="d-flex align-items-center mb-2"><i
                class="bi bi-translate fs-3 text-primary me-2"></i><strong>多語支援，全球無障礙</strong></div>
            <p class="mb-0 text-secondary">自由切換多種語言，適合跨國企業與國際展會，展現品牌國際力。</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="feature-card">
            <div class="d-flex align-items-center mb-2"><i
                class="bi bi-diagram-3 fs-3 text-primary me-2"></i><strong>彈性應用多場域</strong></div>
            <p class="mb-0 text-secondary">新品發表、年會、展覽、直播、Kiosk 互動服務皆適用，品牌形象專業又新穎。</p>
          </div>
        </div>
      </div>

      <p class="mt-4 text-secondary">
        AI 主持人結合了<strong>效率、專業、穩定、國際化</strong>的優勢，不僅能降低成本，更能讓企業活動脫穎而出，吸引觀眾目光。
      </p>
    </div>
  </section>

  <!-- Industries -->
  <section class="py-5 mb-5 bg-light">
    <div class="container text-center">
      <p class="kicker mb-2">Industries</p>
      <h2 class="fw-bold mb-4">AI 主持人可廣泛應用於各產業</h2>
      <div class="row g-4">
        <div class="col-6 col-md-3">
          <i class="bi bi-building fs-1 text-brand"></i>
          <p class="fw-semibold mt-2 mb-0">企業活動</p>
        </div>
        <div class="col-6 col-md-3">
          <i class="bi bi-cart-check fs-1 text-brand"></i>
          <p class="fw-semibold mt-2 mb-0">電商直播</p>
        </div>
        <div class="col-6 col-md-3">
          <i class="bi bi-tv fs-1 text-brand"></i>
          <p class="fw-semibold mt-2 mb-0">媒體節目</p>
        </div>
        <div class="col-6 col-md-3">
          <i class="bi bi-people fs-1 text-brand"></i>
          <p class="fw-semibold mt-2 mb-0">展覽與博覽會</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Use Cases (Accordion) -->
  <section class="pb-5">
    <div class="container">
      <div class="accordion mt-4" id="accordion_2">
        <div class="accordion-item">
          <h2 class="accordion-header" id="heading_2">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_2"
              aria-expanded="true" aria-controls="collapse_2">
              <h4 class="px-3 m-0">💡 其他應用場景</h4>
            </button>
          </h2>
          <div id="collapse_2" class="accordion-collapse collapse show" aria-labelledby="heading_2"
            data-bs-parent="#accordion_2">
            <div class="accordion-body py-4">
              <ul class="m-0">
                <li class="mb-3"><strong>新聞與媒體：</strong> 自動化新聞播報，節省主播人力與製作成本。</li>
                <li class="mb-3"><strong>影音創作者：</strong> 打造專屬虛擬角色，提升內容吸引力，塑造品牌 IP。</li>
                <li class="mb-3"><strong>電商與行銷：</strong> 24/7 AI 主播帶貨，提升轉換率與銷售額。</li>
                <li class="mb-3"><strong>客服與企業應用：</strong> 即時處理大量重複問題，統一品牌語調與形象。</li>
                <li class="mb-0"><strong>Kiosk 互動服務：</strong> 公共場域的人性化自助體驗，降低等候時間。</li>
              </ul>
              <p class="mt-3 mb-0 ms-3">
                👉 AI 虛擬替身不僅能<strong>降低成本、提升效率</strong>，更能幫助企業打造創新形象，成為跨產業的<strong>數位轉型關鍵解決方案</strong>。
              </p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- How it works -->
  <section class="py-5 mb-5">
    <div class="container">
      <div class="text-center">
        <p class="kicker mb-2">How It Works</p>
        <h2 class="fw-bold mb-4">導入流程超簡單，四步完成</h2>
      </div>

      <div class="row g-4">
        <div class="col-md-6 col-lg-3">
          <div class="feature-card h-100">
            <span class="badge text-secondary mb-2 ps-0">Step 1</span>
            <h5>需求訪談</h5>
            <p class="text-secondary mb-0">活動型態、觀眾輪廓、品牌語氣與多語需求確認。</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="feature-card h-100">
            <span class="badge text-secondary mb-2 ps-0">Step 2</span>
            <h5>腳本與角色設定</h5>
            <p class="text-secondary mb-0">主持稿、互動節點、Q&A 知識庫與語音人設建立。</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="feature-card h-100">
            <span class="badge text-secondary mb-2 ps-0">Step 3</span>
            <h5>錄製與測試</h5>
            <p class="text-secondary mb-0">多輪測試優化發音節奏、視覺、音樂與互動節拍。</p>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="feature-card h-100">
            <span class="badge text-secondary mb-2 ps-0">Step 4</span>
            <h5>正式上線</h5>
            <p class="text-secondary mb-0">現場／線上部署，提供技術支援與成效報告。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Cases -->
  <section id="cases" class="py-5 bg-light">
    <div class="container text-center">
      <p class="kicker mb-2">Case Studies</p>
      <h2 class="fw-bold mb-4">AI 虛擬人應用實例</h2>

      <div class="row g-4">
        <div class="col-lg-6">
          <div class="media-card">
            <img src="/img/aicustomer/三立娟姐.gif" alt="ChoozMo AI 客服｜三立克隆娟">
          </div>
          <p class="mt-2 small text-secondary">▲ 三立新聞【克隆娟】</p>
        </div>

        <div class="col-lg-6">
          <div class="media-card">
            <video src="/img/aicustomer/LIHO-DEMO.mp4" autoplay muted playsinline loop></video>
          </div>
          <p class="mt-2 small text-secondary">▲ LiHo TV</p>
        </div>

        <div class="col-lg-6">
          <div class="media-card">
            <video src="/img/aicustomer/客家整年合輯.mp4" autoplay muted playsinline loop></video>
          </div>
          <p class="mt-2 small text-secondary">▲ 客家電視台（整年合輯）</p>
        </div>

        <div class="col-lg-6">
          <div class="media-card">
            <video src="/img/aicustomer/客家demo3.mp4" autoplay muted playsinline loop></video>
          </div>
          <p class="mt-2 small text-secondary">▲ 客家電視台</p>
        </div>
      </div>

      <p class="my-5 text-center" style="line-height: 2;">🚀 選擇 ChoozMo AI 虛擬人解決方案<br>為您的企業開啟智能內容創作的新篇章，實現品牌價值全面提升</p>

      <div class="text-center">
        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank"
          rel="noopener">
          <i class="bi bi-rocket-takeoff"></i> 立即諮詢與評估方案
        </a>
      </div>
    </div>
  </section>

  <!-- CTA band -->
  <section class="py-5 mt-5">
    <div class="container">
      <div class="cta-band p-4 p-md-5 d-flex flex-column flex-lg-row align-items-center justify-content-between gap-3">
        <div>
          <h3 class="mb-2 fw-bold">想讓你的下一場活動，穩、準、亮眼？</h3>
          <p class="mb-0">我們提供腳本客製、多語配音、品牌語調訓練與現場部署，一站式搞定。</p>
        </div>
        <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true"
          class="btn btn-light btn-lg fw-semibold">
          取得免費顧問建議
        </a>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="py-5 mb-5">
    <div class="container">
      <div class="text-center">
        <p class="kicker mb-2">FAQ</p>
        <h2 class="fw-bold mb-4">常見問題</h2>
      </div>

      <div class="row g-4">
        <div class="col-md-6">
          <div class="feature-card">
            <h6 class="mb-2"><i class="bi bi-question-circle me-1"></i> AI 主持人是否能即時互動？</h6>
            <p class="mb-0 text-secondary">可支援預錄與半即時互動兩種模式；若需全即時互動，將視現場網路與設備狀態調整方案。</p>
          </div>
        </div>
        <div class="col-md-6">
          <div class="feature-card">
            <h6 class="mb-2"><i class="bi bi-translate me-1"></i> AI 主持人支援哪些語言？</h6>
            <p class="mb-0 text-secondary">AI 主持人可支援全球主要語言與多種口音，包括中、英、日、韓、泰語等。可依品牌需求調整語氣、說話風格與語調，滿足國際活動及多國使用。</p>
          </div>
        </div>
        <div class="col-md-6">
          <div class="feature-card">
            <h6 class="mb-2"><i class="bi bi-lightning-charge me-1"></i> 導入是否困難？</h6>
            <p class="mb-0 text-secondary">
              完全不難！AI 主持人可依品牌需求快速客製腳本與語音，系統支援現有影音製作流程，
              無需額外設備即可啟用，輕鬆導入各類活動與場域。
            </p>
          </div>
        </div>
        <div class="col-md-6">
          <div class="feature-card">
            <h6 class="mb-2"><i class="bi bi-shield-lock me-1"></i> 品牌與資料安全如何保障？</h6>
            <p class="mb-0 text-secondary">內容均依企業保密規範處理，模型與素材可採自家或私有儲存，避免洩露風險。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{ partial "footer.html" . }}

  <script>
    document.getElementById('y').textContent = new Date().getFullYear();
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>