AI 守護?��?治�? - Line Bot MVP 系�? - Luke?��???/title> <meta name="description" content="深入�?? Line Bot MVP ??AI 治�??�能：�??��?溫度計、�?模�??��??�主?��?議�??�測，�??��???24 小�?待命?��??��?護者�?> <link rel="canonical" href="https://lukehou.com/projects/line-bot-ai.html"> <meta property="og:type" content="website"> <meta property="og:url" content="https://lukehou.com/projects/line-bot-ai.html"> <meta property="og:title" content="AI 守護?��?治�? - Line Bot MVP 系�? - Luke?��???> <meta property="og:description" content="深入�?? Line Bot MVP ??AI 治�??�能：�??��?溫度計、�?模�??��??�主?��?議�??�測，�??��???24 小�?待命?��??��?護者�?> <meta property="og:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-ai-cover.jpg"> <meta property="og:site_name" content="Luke Hou"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="AI 守護?��?治�? - Line Bot MVP 系�? - Luke?��???> <meta name="twitter:description" content="深入�?? Line Bot MVP ??AI 治�??�能：�??��?溫度計、�?模�??��??�主?��?議�??�測，�??��???24 小�?待命?��??��?護者�?> <meta name="twitter:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-ai-cover.jpg">  <meta property="og:url" content="https://lukehou.com/projects/line-bot-ai.html"> <meta property="og:description" content="深入�?? Line Bot MVP ??AI 治�??�能：�??��?溫度計、�?模�??��??�主?��?議�??�測，�??��???24 小�?待命?��??��?護者�?> <meta property="og:locale" content="zh_TW">  <meta name="twitter:title" content="AI 守護?��?治�? - Line Bot MVP 系�?"> <meta name="twitter:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-ai-cover.jpg">  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "TechArticle", "headline": "AI 守護?��?治�? - Line Bot MVP 系�?", "description": "深入�?? Line Bot MVP ??AI 治�??�能：�??��?溫度計、�?模�??��??�主?��?議�??�測，�??��???24 小�?待命?��??��?護者�?, "image": "https://lukehou.com/images/line-ai-bot-mvp/og-ai-cover.jpg", "author": { "@type": "Person", "name": "Luke Hou", "url": "https://lukehou.com" }, "publisher": { "@type": "Person", "name": "Luke Hou" }, "datePublished": "2025-12-25", "keywords": ["AI", "Line Bot", "Sentiment Analysis", "Project Management", "Automation"], "articleSection": "Technology", "inLanguage": "zh-TW" } </script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="../css/style.css">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0V2L1DQVPY"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-0V2L1DQVPY'); </script> <style> :root { /* Christmas Palette */ --xmas-red: #D42426; --xmas-green: #165B33; --xmas-gold: #F8B229; --xmas-snow: #F0F2F5; --xmas-dark: #0F0F0F; } /* ?? ?��??�度�?*/ .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 5px; background: linear-gradient(90deg, var(--xmas-gold), var(--xmas-red)); z-index: 9999; transition: width 0.1s ease-out; } /* ?? 返�??�部?��? */ .back-to-top-btn { position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px; background: linear-gradient(135deg, var(--xmas-gold), var(--xmas-red)); border: none; border-radius: 50%; color: white; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); z-index: 1000; } .back-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(248, 178, 41, 0.4); } /* ?��??��?縮放?�畫 */ .article-content img { transition: transform 0.3s ease, box-shadow 0.3s ease; } .article-content img:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ?�� ?��??��??��???*/ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); border-top: 3px solid rgba(255, 193, 7, 0.6); padding: 0.75rem 1rem; z-index: 1000; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .mobile-nav::-webkit-scrollbar { display: none; } .mobile-nav a { display: inline-block; padding: 0.6rem 1rem; margin-right: 0.4rem; color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 0.85rem; font-weight: 500; border-radius: 20px; background: rgba(255, 255, 255, 0.15); transition: all 0.2s ease; } .mobile-nav a:hover, .mobile-nav a.active { background: rgba(255, 193, 7, 0.3); color: var(--xmas-gold); } @media (max-width: 992px) { .mobile-nav { display: block; } .back-to-top-btn { bottom: 80px; } } body { background-color: var(--xmas-dark); background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px), radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px), radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px); background-size: 550px 550px, 350px 350px, 250px 250px; background-position: 0 0, 40px 60px, 130px 270px; animation: snow 20s linear infinite; } @keyframes snow { 0% { background-position: 0 0, 40px 60px, 130px 270px; } 100% { background-position: 550px 1000px, 400px 400px, 300px 300px; } } .project-hero { background: linear-gradient(rgba(248, 178, 41, 0.2), rgba(15, 15, 15, 0.8)); padding: 5rem 0; color: white; border-bottom: 2px solid var(--xmas-red); } .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(248, 178, 41, 0.2); border-radius: 16px; transition: transform 0.3s ease; } .glass-card:hover { border-color: var(--xmas-gold); } .article-content h2 { color: var(--xmas-gold); margin-top: 2rem; margin-bottom: 1.5rem; font-weight: 700; } .article-content h3 { color: white; margin-top: 1.5rem; margin-bottom: 1rem; border-left: 4px solid var(--xmas-red); padding-left: 1rem; } .tech-note { background: rgba(248, 178, 41, 0.1); border-left: 4px solid var(--xmas-gold); padding: 1rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); } .feature-section { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(5px); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 2.5rem; } .feature-section:hover { border-color: rgba(255, 193, 7, 0.5); box-shadow: 0 0 20px rgba(255, 193, 7, 0.1); } .feature-section h2 { margin-top: 0; } /* 浮�?導航�?*/ .floating-nav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1000; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 12px; padding: 1rem; max-width: 200px; transition: all 0.3s ease; } .floating-nav:hover { border-color: rgba(255, 193, 7, 0.6); box-shadow: 0 0 20px rgba(255, 193, 7, 0.2); } .floating-nav-title { font-size: 0.75rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 193, 7, 0.4); } .floating-nav ul { list-style: none; padding: 0; margin: 0; } .floating-nav li { margin-bottom: 0.5rem; } .floating-nav a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 0.85rem; display: block; padding: 0.4rem 0.6rem; border-radius: 6px; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .floating-nav a:hover { color: #ffc107; background: rgba(255, 193, 7, 0.15); } .floating-nav a.active { color: #ffc107; background: rgba(255, 193, 7, 0.2); font-weight: 600; } .floating-nav .back-to-top { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 193, 7, 0.3); } .floating-nav .back-to-top a { color: var(--xmas-red); } .floating-nav .back-to-top a:hover { color: #ff6b6b; background: rgba(212, 36, 38, 0.1); } @media (max-width: 992px) { .floating-nav { display: none; } } </style> </head> <body>  <div class="reading-progress" id="readingProgress"></div> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-danger"> <div class="container"> <a class="navbar-brand text-danger fw-bold" href="../index.html">?? Luke Hou 2025 ?��??�輯 ??</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="line-bot-mvp.html">?? ?�系?��???/a></li> </ul> </div> </div> </nav> </header> <main> <section class="project-hero text-center"> <div class="container"> <span class="badge bg-warning text-dark mb-2">Series Ep.3</span> <h1 class="display-5 fw-bold mb-3">AI 守護?��?從被?��??�到主�?治�?</h1> <p class="lead text-white-50">一?�全年無休�? AI 夥伴，幫你監測�?緒、發?��?題、傳?�知識�?/p> </div> </section> <section class="container mt-5"> <div class="row justify-content-center"> <div class="col-lg-9 article-content">  <div class="glass-card p-4 mb-5"> <p class="lead text-white"> ?�「�??�都?��?碌�??�候�?但系統�?題�?客戶?��??�隨?�可?�發?��??��? </p> <p class="text-white-50"> ?�就?�為什麼�??��?引入 AI?�這�?系統不是?��?被�???Chatbot，�??��??��??��?觀察、�??�考�??��?護者」�? ?��??�無?�兼顧�?，�?幫�??��??�?��??��??��?"?��?" ??"風險"?? </p> </div>  <div class="feature-section" id="section-1"> <h2>1. ?��?溫度�?(Sentiment Monitor)</h2> <p class="text-white-50"> ?�是�?AI 跟�??��?起「�?顧」客?��??�能之�??��?天�?管�?多個客?�群組�??�?��?就是?��??��??�個客?�快要�??�」�? ?��?AI ?��?溫度計�??��??��?每個群組�??��?對話氛�?，並給出 0-100 ?�健康�??��? </p> <div class="row"> <div class="col-md-4"> <div class="p-3 border border-danger rounded text-center mb-3"> <h4 class="text-danger">?�� 警�?</h4> <small class="text-white-50">?�測?��??��?緒�??�要�??��??��??��?/small> </div> </div> <div class="col-md-4"> <div class="p-3 border border-warning rounded text-center mb-3"> <h4 class="text-warning">?�� 注�?</h4> <small class="text-white-50">?��?小抱?��??�慮，建議主?��?心�?/small> </div> </div> <div class="col-md-4"> <div class="p-3 border border-success rounded text-center mb-3"> <h4 class="text-success">?�� ?�康</h4> <small class="text-white-50">對話�???�好，客?�滿?�度高�?/small> </div> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/line-bot-sentiment-dashboard.jpg" alt="?�表板?��?：�?示客?�群組�?緒溫度�?" class="img-fluid rounded shadow border border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?�表板一覽�??��?溫度計�?你即?��??��??�客?�群組�??�康?�?��?/small> </div> </div> <div class="tech-note"> <strong>??�??�術細節�?/strong> 系統?��? <strong>AI 模�?</strong> ?��?群�?近�?訊息，考�??��??��?�??上�??��??�出?��?評�??? ?��??�是?��??��??��?比�?，而是?�正?�解對話?�絡??AI ?��??��??�「�??�診?�」�??��??�可?��??�?�健康度?��??? </div> </div>  <div class="feature-section" id="section-2"> <h2>2. AI ?�慧?��?中�?</h2> <p class="text-white-50"> ?�是?�個系統�??�大?�」。只要選?�日?��??��??��?群�?，AI 就能?��?幫�?完�??�種?��?任�??? ?�援多模?��???(Azure OpenAI / Google Gemini / OpenAI)，�?你�??�任?��?求選?��??��??��??��? </p> <div class="row g-3 mb-4"> <div class="col-md-6"> <div class="p-3 border border-primary rounded h-100"> <h5 class="text-primary"><i class="bi bi-journal-text me-2"></i>群�??��?</h5> <p class="text-white-50 small mb-0">?�慧?��?對話?�容，自?�產??Q&A ?��?庫。�???��?��??��??�可?�詢?��??��?/p> </div> </div> <div class="col-md-6"> <div class="p-3 border border-danger rounded h-100"> <h5 class="text-danger"><i class="bi bi-flag-fill me-2"></i>?��??�報</h5> <p class="text-white-50 small mb-0">統整?��??�任?��?快速�??��??��?事�??��?也�??��??�任何�?條�??�任?��?/p> </div> </div> <div class="col-md-6"> <div class="p-3 border border-info rounded h-100"> <h5 class="text-info"><i class="bi bi-search me-2"></i>議�??�測</h5> <p class="text-white-50 small mb-0">AI 主�?識別潛在?��?，自?��?類建?�。�?風險?��??��?段就被發?��?/p> </div> </div> <div class="col-md-6"> <div class="p-3 border border-success rounded h-100"> <h5 class="text-success"><i class="bi bi-layers me-2"></i>?�慧比�?</h5> <p class="text-white-50 small mb-0">?�出?��?轉貼訊息，批次�??��?訊。跨群�?也能?�出?��??�容??/p> </div> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/ai-analysis-center-page.png" alt="AI ?�慧?��?中�?介面：�?大模式�??��??? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?�慧?��?中�?介面：選?�日?�、群組�? AI 引�?，�?大�??�模式即?�即??/small> </div> </div> </div>  <div class="feature-section" id="section-3"> <h2>3. 主�?式議題偵�?(Issue Discovery)</h2> <p class="text-white-50"> AI 不只?�總結�??��??�能幫�??��??�未來」�? 它�??��?????��?被�??�工?��?對話紀?��??��?識別?�「�??��? Bug ?�報?��??��??�值�?建議?��? 系統?��??��?�?<strong>To-Do List</strong>，候選清單?? </p> <p class="text-white-50"> 此�??�可以�??�們批次管?�這�?對話(派工?�設?��?度�?)，�??�可以�??��???<strong>Jira工單</strong>，確保�??�任何�?要�?求被?��??? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/ai-issue-discovery-alert.jpg" alt="AI ?��??�測議�??�觸?��??��??? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��??�測議�??�觸?��??��???/small> </div> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/ai-issue-todo-list.jpg" alt="AI ?��??�測?��?待�??�議題�??��??? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��??�測?��?待�??�議題�??��???/small> </div> </div> </div>  <div class="feature-section" id="section-4"> <h2>4. ?��??�報 (Status Report)</h2> <p class="text-white-50"> PM ?�?��?不是忙�??�是?��??��??�在?��?少�??�在?�」�? <strong>?��??�報</strong> ?�能?�自?��??��??�群組�?統整?�未完�??�任?��?緊急�??��? </p> <ul class="text-white-50"> <li><strong>?�� 緊急任?��?</strong>尚未?��?且�?記為?��??��???/li> <li><strong>?�� 待追蹤�?</strong>已催?��?尚未?��??��???/li> <li><strong>?? 任�??��?�?/strong>依群組、�?責人統�?待辦?��?</li> </ul> <p class="text-white-50"> 一?��??�「�??�戰?�報?�」�??��??�給?��??�報?�是?�己 Daily Review，都?�快?��??�全局?? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/daily-status-report.jpg" alt="?��??�報介面：顯示�??�任?�、�?追蹤?�目?�任?��?�? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?��??�報介面：顯示�??�任?�、�?追蹤?�目?�任?��?�?/small> </div> </div> </div>  <div class="feature-section" id="section-5"> <h2>5. AI ?�慧?��??�覽??(Summary Browser)</h2> <p class="text-white-50"> ?�群組�?要」�??�產?��?不只?��?份報?��??�是一??<strong>?�累積、可?�詢?�知識庫</strong>?? ?�??AI ?��??��???Q&A ?��?被儲存�?來�?形�??��??�「共?��??�」。�??��?實�?了強大�? <strong>?��??��? + ?�鍵字�?�?/strong> ?�能，�??�在海�??��?中快?��?位�?案�? </p> <div class="row g-3 mb-4"> <div class="col-md-4"> <div class="p-3 border border-secondary rounded h-100"> <h5 class="text-warning"><i class="bi bi-search me-2"></i>?��??��?</h5> <p class="text-white-50 small mb-0">輸入?�鍵字即?�篩?��?顯示?��?筆數?�命中�?置�?�?L14, L23）�?/p> </div> </div> <div class="col-md-4"> <div class="p-3 border border-secondary rounded h-100"> <h5 class="text-warning"><i class="bi bi-highlighter me-2"></i>?��?高亮定�?</h5> <p class="text-white-50 small mb-0">?�側?�容?�?��? <strong>高亮顯示</strong> ?��??�鍵字�?快速�?視�?點�?/p> </div> </div> <div class="col-md-4"> <div class="p-3 border border-secondary rounded h-100"> <h5 class="text-warning"><i class="bi bi-folder2-open me-2"></i>?��?樹�??�覽</h5> <p class="text-white-50 small mb-0">左側?�表?�群�??��??��?，�??�「�?要」�??�該?��?完整 Q&A ?�容??/p> </div> </div> </div> <div class="row g-3 mb-4"> <div class="col-md-6"> <div class="p-3 border border-secondary rounded h-100"> <h5 class="text-white"><i class="bi bi-journal-richtext me-2"></i>Master Q&A ?��?�? </h5> <p class="text-white-50 small mb-0">AI ?��?將�?話整?��?結�???Q&A，�?主�??��?（硬體�??�、�?診、急診等�?，方便快?�查?��? </p> </div> </div> <div class="col-md-6"> <div class="p-3 border border-secondary rounded h-100"> <h5 class="text-white"><i class="bi bi-clipboard-check me-2"></i>複製 / ?�除管�? </h5> <p class="text-white-50 small mb-0">一?��?製全?��?享�??��??��??�隨?�刪?��?保�??��?庫精簡可維護?? </p> </div> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/ai-summary-browser.png" alt="AI ?�慧?��??�覽?��??��?高亮?��?類樹?�結�?" class="img-fluid rounded shadow-lg border border-2 border-info mb-2 d-block mx-auto"> <small class="text-white-50">AI ?�慧?��??�覽?��??��?輸入?��??�」�??��?高亮，左?�顯示匹?��??��??�側 Q&A ?�鍵字�?亮�?�?/small> </div> </div> </div>  <div class="feature-section" id="section-6"> <h2>6. 跨群組智?��?�?(Cross-Group Dedup)</h2> <p class="text-white-50"> ?��??�公?�被轉發?��??�群組�??�樣?��?題�??�群組都?��??��? <strong>跨群組智?��?�?/strong> ?�自?��??�這�??��?轉貼?��??��?讓�?一次�??�、批次�??��?訊�? </p> <ul class="text-white-50"> <li><strong>?? ?�似度�??��?</strong>AI 比�??��??�容，找?��?度相似�?訊息</li> <li><strong>?? ?�次?��?�?/strong>依照訊息?��?，直?��??��?記「已?��??��??�忽?��?也可以單筆�??��??��??�示?��?忽略)</li> <li><strong>?�� 來�?追溯�?/strong>顯示訊息來自?��?群�?，方便追蹤�?始出??/li> </ul> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/cross-group-dedup-start.jpg" alt="跨群組智?��?對�?觸發比�??�起始畫?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">跨群組智?��?對�?觸發比�??�起始畫??/small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/cross-group-dedup-options.jpg" alt="跨群組智?��?對�?顯示?�似訊息?�批次�??�選?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">跨群組智?��?對�?顯示?�似訊息?�批次�??�選??/small> </div> </div> </div>  <div class="feature-section" id="section-7"> <h2>7. Jira ?�慧?��?：AI 幫�??��?</h2> <p class="text-white-50"> ?�單?��??��?複。�??��???Jira ?��?很麻?��? ?�實作�? <strong>Jira ?�慧?��?</strong>，AI ?�自?��??��??��??��??��??��??�鍵字並?��?歷史工單?? </p> <h3>?? 尋找類似工單</h3> <p class="text-white-50"> ?��??�選多�?對話紀?��?，�??�「�??��?似工?�」�?系統?�自?��??�以下�?程�? </p> <ul class="text-white-50"> <li><strong>AI ?�鍵字�??��?</strong>從�?話中識別?��?術�?彙�?例�?：網路慢?�中?�電信、施工�?</li> <li><strong>?��??��? JQL�?/strong>?��??�鍵字�??��? Jira Query Language ?��?語�?</li> <li><strong>?��?結�?一覽�?</strong>?�出?��?工單（含?�?��?籤�?In Review / To Do / New�?/li> <li><strong>一?�跳轉�?</strong>點�?任�?工單?�可?��?詳�?，快?�確認是?�已?��?複議�?/li> </ul> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/jira-smart-search-trigger.jpg" alt="尋找類似工單?��???AI ?�慧?��?" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">一?�觸??AI ?�慧?��?，自?��??��??��?</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/jira-smart-search-results.jpg" alt="Jira ?�慧?��?結�??�表" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?��?結�?一?��??��??�找?�相?�工?�可?�接點�??��?，無?�?��??�單??/small> </div> </div> </div>  <div class="feature-section" id="section-8"> <h2>8. AI ?��?度�?定�??�次?�慧?��?</h2> <p class="text-white-50"> ?��?大�??��?類�?訊息，逐�??�斷?��?度是件�??�能?��??? <strong>AI ?��?度�?�?/strong>?�能?�自?��??��??�「未設優?�度?��??��? Done/Ignore?��?訊息�? 一次性給??High / Normal ?�建議�?並�?上�??�說?��??�場也可以判?�是?��?要調?��? </p> <div class="row g-3 mb-4"> <div class="col-md-6"> <div class="glass-card p-3"> <h5 class="text-warning"><i class="bi bi-lightning-charge-fill me-2"></i>一?��??��???/h5> <p class="text-white-50 small mb-0">?��??��?範�??�群組�?，�??�「�?始�??�」�?AI 將快?��?估�??�未?��?訊息?��??��?度�?/p> </div> </div> <div class="col-md-6"> <div class="glass-card p-3"> <h5 class="text-warning"><i class="bi bi-check2-square me-2"></i>?�次套用?��??�目</h5> <p class="text-white-50 small mb-0">AI 建議結�??��?覽、可修改，確認無誤�??��??�選?��??�」�?次性寫?�系統�?大�?節?��?類�??��? </p> </div> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/ai-priority-start.png" alt="AI ?��?度�?定�?一?��??��??��??? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��?度�?定�??��??��?類�??��?一?��???/small> </div> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/ai-priority-result.png" alt="AI ?��?度�?定�??��?顯示 AI 建議?��??? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��?度�?定�??��??�次顯示建議?��??��??�選?�性�???/small> </div> </div> </div>  <div class="feature-section" id="section-9"> <h2>9. ?��?庫�???(群�??��?)</h2> <p class="text-white-50"> 每�?次刻?��?心�??�術�??��??��??�援，都不該?�風?�逝�? AI ?��??��??��??�工，�??�們選?��?多�?對話，自?��??��? SOP ??FAQ ?�稿?��??�只?�要花 10 秒�?審閱，這份?�慧就能永�??�承?? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/knowledge-base-extraction-select.jpg" alt="AI ?��?庫�??��??��?多�??�價?��?對話紀?��?，�??��??�知�? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��?庫�??��??��?多�??�價?��?對話紀?��?，�??��??�知�?/small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/kb-extraction-modal.png" alt="?��?庫�???Modal：左?��?源�?話�?覽�??�側 AI ?��??�容?�編�? class="img-fluid rounded shadow-lg border border-2 border-success mb-2 d-block mx-auto"> <small class="text-white-50">?��?庫�???Modal：左?��?覽�?源�?話�??�側 AI ?��? Q&A ?�編輯�??�援?��?上傳??AI 辨�?</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/knowledge-base-editor.jpg" alt="AI ?��?庫編輯器介面：左?�為?��?對話，右?�為 AI ?��???SOP ?�稿" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��?庫編輯器介面：左?�為?��?對話，右?�為 AI ?��???SOP ?�稿</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/knowledge-base-browser.jpg" alt="AI ?��?庫瀏覽?�編輯器介面：�??��??�知識卡?��?並�??�以?��??�編輯、用類別篩選?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��?庫瀏覽?�編輯器介面：�??��??�知識卡?��?並�??�以?��??�編輯、用類別篩選</small> </div> </div> </div>  <div class="feature-section" id="section-10"> <h2>10. FAQ 沉浸式�??�閱讀 & AI ?��?辨�?</h2> <p class="text-white-50"> ?��?庫�??�是?��?，更?��??��??��?體�??��??��? FAQ ?��??��??�援 <strong>沉浸式閱讀模�?</strong>�? 點�?展�?後就?��?篇�??��??��?說�?，�?複�???SOP 也能輕�??�解?? </p> <div class="row g-3 mb-4"> <div class="col-md-6"> <div class="p-3 border border-info rounded h-100"> <h5 class="text-info"><i class="bi bi-image me-2"></i>AI ?��?辨�? for RAG</h5> <p class="text-white-50 small mb-0"> 上傳?��??��?AI ?�自?�辨識�??�內容並?��??�述?��?�? 讓�??��??�被?��??��???RAG 系統索�?，大幅�??�知識庫?�可?��??��? </p> </div> </div> <div class="col-md-6"> <div class="p-3 border border-success rounded h-100"> <h5 class="text-success"><i class="bi bi-book me-2"></i>沉浸式閱讀體�?</h5> <p class="text-white-50 small mb-0"> ?��??��?展�?後�??��??��??��??��??��?+說�??��?一?��??��? 不�??�枯?��?純�?字�??��??�是精�??�知識�?章�? </p> </div> </div> </div> <div class="tech-note"> <strong>?? ?�術亮點�?</strong> ?�使?�者�??��??�到?��?庫�?，系統�??��??�叫 <strong>AI Vision API</strong> ?��??��??�容辨�?�? ?��??��?述�?字�?�?Markdown ?��?嵌入?��??��?中�? ?��???<code>![?�述?��?](?��?路�?)</code>，�? RAG ?��?也能?�到?��??��??�容?? </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/faq-ai-image-recognition.jpg" alt="AI ?��?辨�??��?：�??��??��?，AI ?��??��??�述?��?並�??�知識庫" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��?辨�??��?：�??��??��?，AI ?��??��??�述?��?並�??�知識庫</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/faq-immersive-reader.jpg" alt="FAQ 沉浸式閱讀：�??�知識卡?��??�現完整?��??��?" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">FAQ 沉浸式閱讀：�??�知識卡?��??�現完整?��??��?，�???AI 辨�?說�?一?��???/small> </div> </div> </div>  <div class="feature-section" id="section-11"> <h2>11. RAG ?��?引�?：�??�是?��?，更?��?�?/h2> <p class="text-white-50"> FAQ ?��?庫已導入 <strong>?��??��?引�? (Vector Search Engine)</strong>�? ?��? LLM 語�??�解?�術�?徹�?�?��?�統?�鍵字�?尋「找不到?�、「找不�??��??��??? </p> <div class="row g-3 mb-4"> <div class="col-md-6"> <div class="glass-card p-3 h-100"> <h5 class="text-info"><i class="bi bi-translate me-2"></i>語�??�解 (Semantic)</h5> <p class="text-white-50 small"> 不�?依賴字面完全?��??�系統能?�解?�無法�???��??�網路斷線」是?��?概念?? ?�援多�?言識別，精準�??��??�細節?? </p> </div> </div> <div class="col-md-6"> <div class="glass-card p-3 h-100"> <h5 class="text-success"><i class="bi bi-arrow-repeat me-2"></i>?�慧?�步 (Smart Sync) </h5> <p class="text-white-50 small"> ?��?資�?庫採?��??��?步�??��??��??��?變�??��??��? ?�援多執行�?平�??��?，相較於?�統依�??�新，�?步速度?��? <strong>5 ??/strong> 以�??? </p> </div> </div> <div class="col-md-6"> <div class="glass-card p-3 h-100"> <h5 class="text-warning"><i class="bi bi-lightning-charge me-2"></i>高�??�檢�?/h5> <p class="text-white-50 small"> 底層?�用 Qdrant ?��?資�?庫�??�援?�萬級�??��?毫�?級檢索�? 結�?餘弦?�似�?(Cosine Similarity) 演�?法�?精確計�??�聯?��??��? </p> </div> </div> <div class="col-md-6"> <div class="glass-card p-3 h-100"> <h5 class="text-danger"><i class="bi bi-piggy-bank me-2"></i>?�本?��??��?</h5> <p class="text-white-50 small"> 使用 AI �?Embedding Token ?�慧精�??�截?��???(Max 8000 tokens)?? ?��??��??�度以避?�極端長?�造�??�無謂�??��?確�?每�??�錢?�花?��?????? </p> </div> </div> </div> <div class="row g-3 mb-4"> <div class="col-12"> <div class="tech-note mb-0"> <strong>??�??�術�??��?</strong> <ul class="mb-0 mt-2 list-unstyled d-flex flex-wrap gap-4"> <li><i class="bi bi-cpu me-1"></i> Model: <code>text-embedding-3-small</code> </li> <li><i class="bi bi-rulers me-1"></i> Dims: 1536</li> <li><i class="bi bi-database me-1"></i> DB: Qdrant (localhost)</li> <li><i class="bi bi-calculator me-1"></i> Algo: Cosine Similarity</li> </ul> </div> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/faq-immersive-reader.png" alt="?�慧?�步機制示�??? class="img-fluid rounded shadow-lg border border-2 border-info mb-2 d-block mx-auto"> <small class="text-white-50">?�慧?�步機制：�??��??�庫增�??�新 + 平�??��?流�?</small> </div> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/faq-vector-search.png" alt="?��?檢索?��??? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?��?檢索?��?：�? Embedding ??Qdrant ?�適?�檢�?後端?��??�面)</small> </div> </div> </div>  <div class="feature-section" id="section-12"> <h2>12. FAQ ?�模?��?引�? (Dual Query Engine)</h2> <p class="text-white-50"> ?��?滿足不�??��??�查詢�?求�??�們設計�??��?模�?尋�??�」�?讓使?�者能?�「�??�」�??�深度」�??�自?��??��? 系統?��??�援 <strong>?? 語�??��? (Semantic Search)</strong> ??<strong>??AI ?��? (RAG)</strong>?? </p> <div class="row g-3 mb-4"> <div class="col-md-6"> <div class="glass-card p-3 h-100"> <h5 class="text-info"><i class="bi bi-search me-2"></i>語�??��? (Semantic Search)</h5> <p class="text-white-50 small"> <strong>快、�??��???/strong><br> ?�接對�?使用?��?題�??�出資�?庫中?�?�似??FAQ 條目?? ?��??��?快速瀏覽?��??��??�自行判?��?案�?使用?��? </p> <div class="d-flex justify-content-between align-items-center mt-3"> <span class="badge bg-dark border border-secondary text-light">???�度�? (~0.5s)</span> <span class="badge bg-dark border border-secondary text-info">?�� ?�本�?/span> </div> </div> </div> <div class="col-md-6"> <div class="glass-card p-3 h-100"> <h5 class="text-warning"><i class="bi bi-stars me-2"></i>AI ?��? (RAG)</h5> <p class="text-white-50 small"> <strong>?�能?��?，�??�貫?��?/strong><br> AI ?��??��??��??��?，�??��??��??��??��?一?��??�、統?��??��?案�? ?��??��?複�??��??�懶得爬?��?使用?��? </p> <div class="d-flex justify-content-between align-items-center mt-3"> <span class="badge bg-dark border border-secondary text-light">?? ?�度稍慢 (~3s)</span> <span class="badge bg-dark border border-secondary text-warning">?�� ?�本較�?</span> </div> </div> </div> </div> <h4 class="text-white mt-4 mb-3">?? 模�?對照�?/h4> <div class="table-responsive"> <table class="table table-dark table-hover border border-secondary"> <thead> <tr> <th scope="col" class="text-white-50">比�??�目</th> <th scope="col" class="text-info">?? 語�??��?</th> <th scope="col" class="text-warning">??AI ?��? (RAG)</th> </tr> </thead> <tbody> <tr> <td class="text-white-50">輸出?�容</td> <td>FAQ ?�表 + ?�似度�???/td> <td>AI 統整後�?完整?��?</td> </tr> <tr> <td class="text-white-50">?��?流�?</td> <td>?�步�?(?��??��?)</td> <td>?�步�?(?��? + ?��?)</td> </tr> <tr> <td class="text-white-50">?�用?��?</td> <td>快速瀏覽?�查?��???/td> <td>複�??��??�直?��?�??</td> </tr> </tbody> </table> </div> <div class="row align-items-center my-4"> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/faq-semantic-search.png" alt="語�??��?介面展示" class="img-fluid rounded shadow-lg border border-2 border-info mb-2 d-block mx-auto"> <small class="text-white-50">語�??��?模�?：快?��??��??��???FAQ 條目，人工�?對�?/small> </div> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/faq-ai-rag-answer.png" alt="AI RAG ?��?介面展示" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��?模�?：由 LLM ?��?統整並�??��??�解答�?/small> </div> </div> </div>  <div class="feature-section" id="section-13"> <h2>13. RAG ?�數設�? (RAG Config)</h2> <p class="text-white-50"> ?��?�?AI ?�貼近�??��??�求�??�們�??��? Embedding ??RAG ?��??�數設�??? 管�??�可以根?�場?��?求�?微調語�??��??�精確度?�AI ?��??�風?��?以�? Embedding ?�相?�設定�? </p> <div class="row g-3 mb-4"> <div class="col-md-4"> <div class="glass-card p-3 h-100"> <h5 class="text-info"><i class="bi bi-sliders me-2"></i>語�??��??�數</h5> <ul class="text-white-50 small mb-0 ps-3"> <li><strong>?�似度�?�?(Threshold)</strong>�?.0~1.0，�?低�?寬�?，�?高�?精�???/li> <li><strong>?�大�??�數 (Top K)</strong>：控??AI ?�考�?資�?源數??(?�設 5 �???/li> </ul> </div> </div> <div class="col-md-4"> <div class="glass-card p-3 h-100"> <h5 class="text-warning"><i class="bi bi-chat-quote-fill me-2"></i>RAG ?��??�數</h5> <ul class="text-white-50 small mb-0 ps-3"> <li><strong>系統?�示�?(System Prompt)</strong>：�?�?AI ?��???(如�?專業客�?) ?��?答�??��?/li> <li><strong>?�設模�?</strong>：Azure OpenAI / Google Gemini ?��???/li> </ul> </div> </div> <div class="col-md-4"> <div class="glass-card p-3 h-100"> <h5 class="text-secondary"><i class="bi bi-gear-fill me-2"></i>系統設�?</h5> <ul class="text-white-50 small mb-0 ps-3"> <li><strong>Embedding 模�?</strong>：text-embedding-3-small (1536�???/li> <li><strong>?�步並發??/strong>：控?��??�庫?�步?��??��??��??�制??/li> </ul> </div> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/rag-settings-window.png" alt="RAG 設�?視�?" class="img-fluid rounded shadow-lg border border-2 border-info mb-2 d-block mx-auto"> <small class="text-white-50">RAG 設�?介面：RAG ?��??�數設�?，進�?使用?�可以自行調?��?/small> </div> <div class="col-md-6 text-center"> <img src="../images/line-ai-bot-mvp/parameter-tuning-effect.png" alt="?�數調校?��?示�?" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">Embedding 設�?介面：進�?使用?�可以調?��??�相?�設定�?/small> </div> </div> </div>  <div class="glass-card p-4 mb-5 border-warning" id="section-8-end"> <div class="text-center mb-4"> <span class="badge bg-warning text-dark mb-2 fs-6">?? Series Finale</span> <h2 class="h3 text-warning">?��?你�??�這裡</h2> </div> <p class="text-white-50 text-center" style="max-width: 700px; margin: 0 auto;"> 三�??��?寫�?，�?誕�?也差不�??��?了�?濃�???Lonely ?��? </p> <p class="text-white-50 text-center" style="max-width: 700px; margin: 0 auto;"> 讓�??��?後�?顧�?下這�?Side Project ?��??��?，�??��?你�??�發?? </p> <div class="row g-4 my-4"> <div class="col-md-4 text-center"> <div class="p-3"> <i class="bi bi-clock-history display-4 text-success mb-3"></i> <h5 class="text-white mb-3">Ep.1 ?�本?�能</h5> <ul class="list-unstyled text-white-50 small text-start ps-4 d-inline-block"> <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>?��??�表板 (KPI Dashboard)</li> <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>訊息?��?案永久�?�? (Auto-Backup)</li> <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>?�鍵字�?亮�?�? (Keyword Highlight)</li> <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>Jira Info ?�步 (Jira Sync)</li> <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>極致?��?體�? (UX)</li> </ul> </div> </div> <div class="col-md-4 text-center"> <div class="p-3"> <i class="bi bi-link-45deg display-4 text-primary mb-3"></i> <h5 class="text-white mb-3">Ep.2 深度?��?</h5> <ul class="list-unstyled text-white-50 small text-start ps-4 d-inline-block"> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>Inline 微派�? (Inline Assignee and Status)</li> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>快速�??�註 (Inline Quick Remark)</li> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>快速�??��??��?忽略 (Important & Ignore)</li> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>一??AI ?��?工單 (AI to Jira)</li> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>購物車�?事件併單 (Event Cart)</li> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>AI 溫�??�單?��? (AI Follow-up)</li> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>Line Push 奪命??��?? (Line Message Push)</li> <li class="mb-2"><i class="bi bi-check2-circle text-primary me-2"></i>?��??�測�? (Auto-Test)</li> </ul> </div> </div> <div class="col-md-4 text-center"> <div class="p-3"> <i class="bi bi-shield-check display-4 text-danger mb-3"></i> <h5 class="text-white mb-3">Ep.3 AI First</h5> <ul class="list-unstyled text-white-50 small text-start ps-4 d-inline-block"> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>群�??��???�� (Sentiment)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>一站�? AI ?�能?�口 (AI Landing Page)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>?�慧議�??�測 (Smart Issue Discovery)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>?�慧?��??�報 (Smart War Room)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>?�慧群�? FAQ ?��? (Smart FAQ)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>?�慧?��?�? (Smart Deduplicate)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>?�慧?��?檢傷 (Smart Triage)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>?��? FAQ AI 輔助?��? (Single FAQ Generation)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>沉浸�?FAQ ?�覽 (Immersive FAQ)</li> <li class="mb-2"><i class="bi bi-check2-circle text-danger me-2"></i>RAG ?�模?��? (Dual Engine)</li> </ul> </div> </div> </div> <div class="border-top border-secondary pt-4 mt-4"> <p class="text-white text-center mb-3"> <strong>?�� ?��?Side Project ?�傳?��?一件�?�?/strong> </p> <blockquote class="blockquote text-center"> <p class="text-warning fst-italic" style="font-size: 1.1rem;"> ?�Vibe Coding ?�價?��??�於 100% 完�?，而在?�快?��?證想法、快?�拿??feedback?�快?�迭�?��? </p> </blockquote> <p class="text-white-50 text-center small"> ?��?系統從零?�能?��?就是一?�週末?��?幾個�?上�??��???br> AI 不�??�代工�?師�?但�??�代?��? </p> </div> <div class="text-center mt-4"> <p class="text-white-50 mb-2">?? Merry Christmas & Happy Coding! ??</p> <p class="text-white-50 small">??Luke Hou, 2025 ?��??�輯</p> <div class="mt-4"> <img src="../images/line-ai-bot-mvp/luke-christmas-coding.png" alt="?��??�輯結尾?? class="img-fluid rounded opacity-75 shadow" style="max-width: 400px;"> </div> </div> </div> <hr class="my-5 border-secondary"> <div class="d-flex justify-content-between align-items-center"> <a href="line-bot-workflow.html" class="btn btn-outline-secondary"> <i class="bi bi-arrow-left me-2"></i>Ep.2 ?��?橋�?�? </a> <a href="line-bot-mvp.html" class="btn btn-warning"> ?�到系�?首�? <i class="bi bi-house-door-fill me-2"></i> </a> </div>  <div class="glass-card p-4 mt-5"> <h4 class="text-warning mb-4"><i class="bi bi-book me-2"></i>?��??��?</h4> <div class="row g-3"> <div class="col-md-6"> <h6 class="text-white-50 small mb-2">?? ?�系?�其他�?�?/h6> <ul class="list-unstyled mb-0"> <li class="mb-2"><a href="line-bot-search.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-success"></i>Ep.1 ?��?機�?對話資產管�?</a></li> <li><a href="line-bot-workflow.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-primary"></i>Ep.2 ?��?橋�?：自?��?工單</a></li> </ul> </div> <div class="col-md-6"> <h6 class="text-white-50 small mb-2">?? ?��??�術�?�?/h6> <ul class="list-unstyled mb-0"> <li class="mb-2"><a href="prd-ai-generation.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-info"></i>PRD AI ?��?</a></li> <li><a href="../tutorials.html#gemini-pm-series" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-info"></i>PM x Gemini CLI ?��?�?/a></li> </ul> </div> </div> </div> </div> </div> </section> </main> <footer class="bg-dark mt-5 py-4 border-top border-secondary-subtle"> <div class="container text-center"> <p class="text-white-50 mb-0">© 2025 Luke Hou. All rights reserved. ?? Merry Christmas!</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>  <div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" style="max-width: 95vw;"> <div class="modal-content bg-dark border-warning border-2"> <div class="modal-header border-0 pb-0"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body text-center p-2"> <img id="lightboxImage" src="" alt="" class="rounded" style="max-width: 100%; max-height: 85vh;"> </div> </div> </div> </div> <script> // Lightbox: 點�??��?顯示大�? document.querySelectorAll('.article-content img').forEach(img => { img.style.cursor = 'pointer'; img.addEventListener('click', () => { document.getElementById('lightboxImage').src = img.src; document.getElementById('lightboxImage').alt = img.alt; new bootstrap.Modal(document.getElementById('lightboxModal')).show(); }); }); </script>  <nav class="floating-nav"> <div class="floating-nav-title">?? ?��?導覽 <span id="progressPercent" style="float:right; font-weight:600;">0%</span></div> <ul> <li><a href="#section-1">1. ?��?溫度�?/a></li> <li><a href="#section-2">2. AI ?��?中�?</a></li> <li><a href="#section-3">3. 議�??�測</a></li> <li><a href="#section-4">4. ?��??�報</a></li> <li><a href="#section-5">5. ?��??�覽??/a></li> <li><a href="#section-6">6. 跨群比�?</a></li> <li><a href="#section-7">7. Jira ?��?</a></li> <li><a href="#section-8">8. ?��?度�?�?/a></li> <li><a href="#section-9">9. ?��?庫�???/a></li> <li><a href="#section-10">10. 沉浸?��?</a></li> <li><a href="#section-11">11. RAG 引�?</a></li> <li><a href="#section-12">12. ?�模?��?</a></li> <li><a href="#section-13">13. RAG 設�?</a></li> <li><a href="#section-8-end">?? 系�?總�?</a></li> </ul> <div class="back-to-top"> <a href="#top">⬆�? ?�到?�端</a> </div> </nav> <script> // 平�?滾�? document.querySelectorAll('.floating-nav a').forEach(link => { link.addEventListener('click', function (e) { const href = this.getAttribute('href'); if (href.startsWith('#')) { e.preventDefault(); const target = href === '#top' ? document.body : document.querySelector(href); if (target) { window.scrollTo({ top: href === '#top' ? 0 : target.offsetTop - 80, behavior: 'smooth' }); } } }); }); // 滾�??��?亮當?��?�? const sections = document.querySelectorAll('.feature-section[id]'); const navLinks = document.querySelectorAll('.floating-nav a[href^="#section"]'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop - 150; if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); </script>  <button class="back-to-top-btn" id="backToTopBtn" title="?�到?�端"> <i class="bi bi-arrow-up"></i> </button>  <nav class="mobile-nav" id="mobileNav"> <a href="#section-1">1. ?��?</a> <a href="#section-2">2. AI?��?</a> <a href="#section-3">3. 議�?</a> <a href="#section-4">4. ?��?</a> <a href="#section-5">5. ?��?</a> <a href="#section-6">6. 跨群</a> <a href="#section-7">7. Jira</a> <a href="#section-8">8. ?��?</a> <a href="#section-9">9. ?��?</a> <a href="#section-10">10. ?��?</a> <a href="#section-11">11. RAG</a> <a href="#section-12">12. ?�模</a> <a href="#section-13">13. 設�?</a> <a href="#section-8-end">?? 總�?</a> </nav> <script> // ?? ?��??�度�? window.addEventListener('scroll', () => { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = (scrollTop / docHeight) * 100; document.getElementById('readingProgress').style.width = progress + '%'; // ?�新浮�?導航?��?�? const percentEl = document.getElementById('progressPercent'); if (percentEl) percentEl.textContent = Math.round(progress) + '%'; }); // ?? 返�??�部?��? const backToTopBtn = document.getElementById('backToTopBtn'); window.addEventListener('scroll', () => { if (window.scrollY > 300) { backToTopBtn.classList.add('visible'); } else { backToTopBtn.classList.remove('visible'); } }); backToTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // ?�� ?��?導航滾�?高亮 const mobileNavLinks = document.querySelectorAll('.mobile-nav a'); window.addEventListener('scroll', () => { let current = ''; document.querySelectorAll('.feature-section[id]').forEach(section => { const sectionTop = section.offsetTop - 150; if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); } }); mobileNavLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); // ?�� ?��?導航平�?滾�? mobileNavLinks.forEach(link => { link.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' }); } }); }); </script> </body> </html>