Update index.html

index.html

@@ -142,36 +142,83 @@
         <section class="bg-gradient-to-br from-indigo-900 to-purple-800 rounded-2xl p-8 text-white shadow-xl">
             <h3 class="text-3xl font-bold mb-8 border-b border-purple-400 pb-4">🤖 AI Strategic Partner</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <!-- Caption Gen -->
-                <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-red-500">
+                <!-- 1. Caption Gen -->
+                <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-red-500 shadow-lg">
                     <h4 class="text-xl font-bold text-purple-800 mb-1">✍️ ผู้ช่วยเขียนแคปชั่น</h4>
                     <p class="text-xs text-red-500 mb-4 font-bold flex items-center gap-1">
                         <span class="w-2 h-2 bg-red-500 rounded-full animate-ping"></span>
                         ระบบตรวจสอบระเบียบ กกต. ทำงานอยู่
                     </p>
-                    <input type="text" id="captionTopic" class="w-full border p-2 rounded mb-4" placeholder="หัวข้อคอนเทนต์ หรือ นโยบายที่จะสื่อสาร...">
+                    <input type="text" id="captionTopic" class="w-full border p-2 rounded mb-4" placeholder="หัวข้อคอนเทนต์ หรือ นโยบาย...">
                     <select id="captionPlatform" class="w-full border p-2 rounded mb-4">
                         <option value="TikTok">TikTok (เน้นสั้น/ภาษาอีสาน)</option>
                         <option value="Facebook">Facebook (เน้นข้อมูล/ผลงาน)</option>
                         <option value="Line OA">Line OA (เน้นความใกล้ชิด)</option>
                     </select>
-                    <button id="btnGenerateCaption" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg transition-all">
-                        สร้างแคปชั่นแบบปลอดภัย (ECT Safe)
+                    <button id="btnGenerateCaption" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg transition-all shadow-md">
+                        ✨ สร้างแคปชั่น (Safe Mode)
                     </button>
                     <div id="captionOutputArea" class="hidden mt-4">
-                        <div id="captionOutput" class="p-4 bg-gray-50 rounded-lg border border-gray-200 text-sm whitespace-pre-line"></div>
-                        <div class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-[10px] text-red-700 font-bold italic">
-                            ⚠️ คำเตือน: ตรวจสอบบัญชีโซเชียลที่ใช้โพสต์ว่า "แจ้ง กกต. แล้ว" และเก็บภาพหน้าจอไว้รายงานค่าใช้จ่าย
-                        </div>
+                        <div id="captionOutput" class="p-4 bg-gray-50 rounded-lg border border-gray-200 text-sm whitespace-pre-line max-h-40 overflow-y-auto"></div>
                     </div>
                 </div>
 
-                <!-- Crisis Advisor -->
-                <div class="bg-white text-gray-800 rounded-xl p-6">
-                    <h4 class="text-xl font-bold text-purple-800 mb-4">🛡️ ที่ปรึกษาแก้เกมดราม่า</h4>
-                    <textarea id="crisisInput" rows="3" class="w-full border p-2 rounded mb-4" placeholder="ระบุสถานการณ์หรือข้อกล่าวหาจากคู่แข่ง..."></textarea>
-                    <button id="btnGenerateStrategy" class="w-full bg-gray-800 hover:bg-black text-white font-bold py-3 rounded-lg transition-all">วิเคราะห์แนวทางแก้เกม</button>
-                    <div id="strategyOutput" class="mt-4 p-4 bg-gray-50 rounded-lg hidden text-sm border-l-4 border-gray-400"></div>
+                <!-- 2. Comment Reply Assistant -->
+                <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-blue-500 shadow-lg">
+                    <h4 class="text-xl font-bold text-blue-800 mb-1">💬 ผู้ช่วยตอบคอมเมนต์</h4>
+                    <p class="text-xs text-blue-500 mb-4 font-bold">ตอบเร็ว ตรงประเด็น ได้ใจชาวบ้าน</p>
+                    
+                    <textarea id="commentInput" rows="3" class="w-full border p-2 rounded mb-3 text-sm" placeholder="วางคอมเมนต์จากชาวเน็ตที่นี่..."></textarea>
+                    
+                    <select id="replyTone" class="w-full border p-2 rounded mb-4 text-sm">
+                        <option value="Friendly">เป็นกันเอง + ภาษาอีสาน (สำหรับ FC)</option>
+                        <option value="Polite">สุภาพทางการ (สำหรับผู้ใหญ่/ข้าราชการ)</option>
+                        <option value="Clarify">ชี้แจงข้อเท็จจริง (สำหรับคำถามนโยบาย)</option>
+                        <option value="Deescalate">ลดอุณหภูมิ (สำหรับคอมเมนต์ลบ)</option>
+                    </select>
+
+                    <button id="btnGenerateReply" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all shadow-md">
+                        ✨ ร่างคำตอบ
+                    </button>
+                    <div id="replyOutputArea" class="hidden mt-4">
+                        <div id="replyOutput" class="p-4 bg-blue-50 rounded-lg border border-blue-200 text-sm whitespace-pre-line relative group"></div>
+                        <p class="text-[10px] text-gray-400 mt-1 text-right">คลิกที่ข้อความเพื่อคัดลอก</p>
+                    </div>
+                </div>
+
+                <!-- 3. Smart Speech Writer (NEW FEATURE) -->
+                <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-green-500 shadow-lg">
+                    <h4 class="text-xl font-bold text-green-700 mb-1">🎤 ผู้ช่วยร่างคำปราศรัย</h4>
+                    <p class="text-xs text-green-600 mb-4 font-bold">สคริปต์พูดหน้างาน มัดใจคนฟัง</p>
+                    
+                    <div class="grid grid-cols-2 gap-2 mb-3">
+                        <select id="speechOccasion" class="border p-2 rounded text-sm w-full">
+                            <option value="ประชุมหมู่บ้าน">ประชุมหมู่บ้าน</option>
+                            <option value="งานแต่งงาน">งานแต่งงาน</option>
+                            <option value="งานศพ">งานขาวดำ (งานศพ)</option>
+                            <option value="ขึ้นบ้านใหม่">ขึ้นบ้านใหม่</option>
+                            <option value="เวทีปราศรัยใหญ่">เวทีปราศรัยใหญ่</option>
+                        </select>
+                        <input type="text" id="speechLocation" class="border p-2 rounded text-sm w-full" placeholder="สถานที่ (เช่น บ้านหนองกุง)">
+                    </div>
+                    <input type="text" id="speechTheme" class="w-full border p-2 rounded mb-4 text-sm" placeholder="ประเด็นที่จะเน้น (เช่น แก้หนี้, น้ำประปา)">
+
+                    <button id="btnGenerateSpeech" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-all shadow-md">
+                        ✨ ร่างสคริปต์พูด (3 นาที)
+                    </button>
+                    <div id="speechOutputArea" class="hidden mt-4">
+                        <div id="speechOutput" class="p-4 bg-green-50 rounded-lg border border-green-200 text-sm whitespace-pre-line max-h-48 overflow-y-auto"></div>
+                    </div>
+                </div>
+
+                <!-- 4. Crisis Advisor -->
+                <div class="bg-white text-gray-800 rounded-xl p-6 border-t-8 border-gray-800 shadow-lg">
+                    <h4 class="text-xl font-bold text-gray-800 mb-4">🛡️ ที่ปรึกษาแก้เกมดราม่า</h4>
+                    <textarea id="crisisInput" rows="3" class="w-full border p-2 rounded mb-4" placeholder="ระบุสถานการณ์หรือข้อกล่าวหา..."></textarea>
+                    <button id="btnGenerateStrategy" class="w-full bg-gray-800 hover:bg-black text-white font-bold py-3 rounded-lg transition-all shadow-md">
+                        ✨ วิเคราะห์แนวทางแก้เกม
+                    </button>
+                    <div id="strategyOutput" class="mt-4 p-4 bg-gray-50 rounded-lg hidden text-sm border-l-4 border-gray-400 max-h-40 overflow-y-auto"></div>
                 </div>
             </div>
         </section>
@@ -201,7 +248,7 @@
     <script type="module">
         import { GoogleGenerativeAI } from "@google/generative-ai";
 
-        const apiKey = "AIzaSyB8VwyTzgru8TrD13z2HaU1354UBpBKhtw"; // API Key will be injected at runtime
+        const apiKey = "AIzaSyCVtDUAm-wrWWShrblLUqHmd_MVzmGAClc"; // API Key will be injected at runtime
         const genAI = new GoogleGenerativeAI(apiKey);
         const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" });
 
@@ -221,17 +268,24 @@
         function setLoading(btnId, outputAreaId, isLoading) {
             const btn = document.getElementById(btnId);
             const area = document.getElementById(outputAreaId);
+            const defaultText = {
+                'btnGenerateCaption': '✨ สร้างแคปชั่น (Safe Mode)',
+                'btnGenerateReply': '✨ ร่างคำตอบ',
+                'btnGenerateStrategy': '✨ วิเคราะห์แนวทางแก้เกม',
+                'btnGenerateSpeech': '✨ ร่างสคริปต์พูด (3 นาที)'
+            };
+
             if (isLoading) {
                 btn.disabled = true;
-                btn.innerHTML = '<span class="loader"></span> กำลังประมวลผล...';
+                btn.innerHTML = '<span class="loader"></span> กำลังคิด...';
                 if(area) area.classList.remove('hidden');
             } else {
                 btn.disabled = false;
-                btn.innerHTML = btnId === 'btnGenerateCaption' ? 'สร้างแคปชั่นแบบปลอดภัย (ECT Safe)' : 'วิเคราะห์แนวทางแก้เกม';
+                btn.innerHTML = defaultText[btnId];
             }
         }
 
-        // --- Feature: Caption Generator (With Compliance) ---
+        // --- Feature 1: Caption Generator ---
         document.getElementById('btnGenerateCaption').addEventListener('click', async () => {
             const topic = document.getElementById('captionTopic').value;
             const platform = document.getElementById('captionPlatform').value;
@@ -256,13 +310,90 @@
                 const result = await model.generateContent(prompt);
                 output.innerHTML = result.response.text().trim();
             } catch (err) {
-                output.innerHTML = "ขออภัย เกิดข้อผิดพลาดในระบบ AI กรุณาลองใหม่";
+                console.error(err);
+                output.innerHTML = "ขออภัย เกิดข้อผิดพลาดในระบบ AI";
             } finally {
                 setLoading('btnGenerateCaption', null, false);
             }
         });
 
-        // --- Feature: Crisis Advisor ---
+        // --- Feature 2: Comment Reply Assistant ---
+        document.getElementById('btnGenerateReply').addEventListener('click', async () => {
+            const comment = document.getElementById('commentInput').value;
+            const tone = document.getElementById('replyTone').value;
+            if(!comment) return;
+
+            setLoading('btnGenerateReply', 'replyOutputArea', true);
+            const output = document.getElementById('replyOutput');
+            output.innerHTML = "กำลังร่างคำตอบ...";
+
+            try {
+                const prompt = `
+                    ${complianceInstruction}
+                    คอมเมนต์จากประชาชน: "${comment}"
+                    โทนการตอบ: "${tone}"
+                    
+                    TASK: เขียนคำตอบกลับคอมเมนต์ (Reply) ในนาม "คุณธนอนันต์" (ผู้สมัคร) ตอบด้วยตนเอง
+                    - ใช้สรรพนามแทนตัวว่า "ผม" หรือ "อ้าย" (ตามความเหมาะสมกับโทน) เพื่อความจริงใจและใกล้ชิด
+                    - สั้น กระชับ ได้ใจความ เหมือนคุยกับพี่น้อง
+                    - หากเป็นคำถามเชิงลบ ให้ตอบด้วยความสุภาพ พลิกวิกฤตเป็นโอกาสในการชี้แจง
+                    - ใช้ภาษาถิ่นอีสานได้ตามความเหมาะสมกับโทนที่เลือก
+                    - ห้ามสัญญาว่าจะให้ผลตอบแทนเด็ดขาด (Safe 100%)
+                `;
+
+                const result = await model.generateContent(prompt);
+                output.innerHTML = result.response.text().trim();
+                
+                output.onclick = () => {
+                    navigator.clipboard.writeText(output.innerText);
+                    alert("คัดลอกข้อความแล้ว!");
+                };
+            } catch (err) {
+                console.error(err);
+                output.innerHTML = "ไม่สามารถสร้างคำตอบได้ในขณะนี้";
+            } finally {
+                setLoading('btnGenerateReply', null, false);
+            }
+        });
+
+        // --- Feature 3: Smart Speech Writer (NEW) ---
+        document.getElementById('btnGenerateSpeech').addEventListener('click', async () => {
+            const occasion = document.getElementById('speechOccasion').value;
+            const location = document.getElementById('speechLocation').value;
+            const theme = document.getElementById('speechTheme').value;
+            
+            if(!location && !theme) return; // Simple validation
+
+            setLoading('btnGenerateSpeech', 'speechOutputArea', true);
+            const output = document.getElementById('speechOutput');
+            output.innerHTML = "กำลังร่างสคริปต์ปราศรัย...";
+
+            try {
+                const prompt = `
+                    ${complianceInstruction}
+                    โอกาส/งาน: "${occasion}"
+                    สถานที่: "${location}"
+                    ประเด็นหลักที่ต้องการเน้น: "${theme}"
+                    
+                    TASK: ร่างสคริปต์คำพูด (Speech Script) สั้นๆ สำหรับคุณธนอนันต์พูดหน้างาน
+                    - เริ่มต้นด้วยการทักทายพี่น้องชาว "${location}" อย่างเป็นกันเอง (ภาษาอีสาน)
+                    - แสดงความยินดี/เสียใจ ให้เหมาะสมกับ "${occasion}"
+                    - เชื่อมโยงเข้าสู่ประเด็น "${theme}" อย่างแนบเนียน ไม่ดูเป็นการหาเสียงที่แข็งกระด้างเกินไป
+                    - จบด้วยการให้กำลังใจและการฝากเนื้อฝากตัว
+                    - ใช้เวลาพูดประมาณ 2-3 นาที
+                `;
+
+                const result = await model.generateContent(prompt);
+                output.innerHTML = result.response.text().trim();
+            } catch (err) {
+                console.error(err);
+                output.innerHTML = "เกิดข้อผิดพลาดในการร่างสคริปต์";
+            } finally {
+                setLoading('btnGenerateSpeech', null, false);
+            }
+        });
+
+        // --- Feature 4: Crisis Advisor ---
         document.getElementById('btnGenerateStrategy').addEventListener('click', async () => {
             const situation = document.getElementById('crisisInput').value;
             if(!situation) return;
@@ -285,6 +416,7 @@
                 const result = await model.generateContent(prompt);
                 output.innerHTML = result.response.text().replace(/\n/g, '<br>');
             } catch (err) {
+                console.error(err);
                 output.innerHTML = "ไม่สามารถวิเคราะห์ได้ในขณะนี้";
             } finally {
                 setLoading('btnGenerateStrategy', null, false);