| <!DOCTYPE html> |
| <html lang="th"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ยุทธศาสตร์เลือกตั้ง 2569: ธนอนันต์ เมนะสวัสดิ์ (อุดรฯ เขต 6)</title> |
| |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
| |
| <script type="importmap"> |
| { |
| "imports": { |
| "@google/generative-ai": "https://esm.run/@google/generative-ai" |
| } |
| } |
| </script> |
|
|
| |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;600;800&display=swap" rel="stylesheet"> |
|
|
| <style> |
| body { |
| font-family: 'Noto Sans Thai', sans-serif; |
| background-color: #F8F7FF; |
| color: #1F2937; |
| } |
| |
| .chart-container { |
| position: relative; |
| width: 100%; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| height: 350px; |
| max-height: 400px; |
| } |
| |
| .info-card { |
| background-color: white; |
| border-radius: 0.75rem; |
| box-shadow: 0 4px 6px -1px rgba(106, 13, 173, 0.1), 0 2px 4px -1px rgba(106, 13, 173, 0.06); |
| padding: 1.5rem; |
| transition: transform 0.2s; |
| border-top: 4px solid transparent; |
| } |
| |
| .info-card:hover { |
| transform: translateY(-2px); |
| border-top-color: #6A0DAD; |
| } |
| |
| .loader { |
| border: 4px solid #f3f3f3; |
| border-top: 4px solid #6A0DAD; |
| border-radius: 50%; |
| width: 24px; |
| height: 24px; |
| animation: spin 1s linear infinite; |
| display: inline-block; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
|
|
| |
| <header class="bg-gradient-to-r from-purple-800 via-purple-700 to-indigo-900 text-white py-12 px-4 shadow-xl text-center"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="inline-block bg-white text-purple-900 px-4 py-1 rounded-full text-sm font-bold mb-4 shadow-md"> |
| ROADMAP TO VICTORY 2026 (2569) |
| </div> |
| <h1 class="text-4xl md:text-6xl font-extrabold mb-2">ธนอนันต์ เมนะสวัสดิ์</h1> |
| <h2 class="text-2xl md:text-3xl font-light opacity-90">พรรคกล้าธรรม | อุดรธานี เขต 6</h2> |
| </div> |
| </header> |
|
|
| <main class="max-w-7xl mx-auto p-4 md:p-8 space-y-8"> |
|
|
| |
| <section class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
| <div class="info-card border-l-8 border-purple-600 text-center"> |
| <div class="text-gray-500 font-bold uppercase text-xs">เป้าหมายคะแนน</div> |
| <div class="text-4xl font-extrabold text-purple-700 mt-2">42,000+</div> |
| </div> |
| <div class="info-card border-l-8 border-yellow-500 text-center"> |
| <div class="text-gray-500 font-bold uppercase text-xs">กลุ่มเป้าหมายหลัก</div> |
| <div class="text-4xl font-extrabold text-yellow-600 mt-2">New Gen</div> |
| </div> |
| <div class="info-card border-l-8 border-indigo-500 text-center"> |
| <div class="text-gray-500 font-bold uppercase text-xs">ฐานเสียงเดิม</div> |
| <div class="text-4xl font-extrabold text-indigo-600 mt-2">Family</div> |
| </div> |
| <div class="info-card border-l-8 border-pink-500 text-center"> |
| <div class="text-gray-500 font-bold uppercase text-xs">งบดิจิทัล</div> |
| <div class="text-4xl font-extrabold text-pink-600 mt-2">40%</div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-red-50 border-2 border-red-200 rounded-2xl p-6 shadow-sm"> |
| <h3 class="text-xl font-bold text-red-700 flex items-center gap-2 mb-4"> |
| ⚖️ ศูนย์เฝ้าระวังระเบียบ กกต. (ECT Compliance Monitor) |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm"> |
| <div class="bg-white p-3 rounded-lg border border-red-100"> |
| <h4 class="font-bold text-red-600 mb-1">🚫 มาตรา 73 (ข้อห้ามหาเสียง)</h4> |
| <ul class="list-disc list-inside text-gray-600 space-y-1"> |
| <li>ห้ามสัญญาว่าจะให้เงิน/ทรัพย์สิน</li> |
| <li>ห้ามจัดเลี้ยงหรือรับจัดเลี้ยง</li> |
| <li>ห้ามใส่ร้ายด้วยความเท็จ</li> |
| </ul> |
| </div> |
| <div class="bg-white p-3 rounded-lg border border-red-100"> |
| <h4 class="font-bold text-red-600 mb-1">📱 ระเบียบโซเชียลมิเดีย</h4> |
| <ul class="list-disc list-inside text-gray-600 space-y-1"> |
| <li>แจ้งบัญชีโซเชียลต่อ กกต. ก่อนโพสต์</li> |
| <li>บันทึกค่า Ads เป็นงบเลือกตั้ง</li> |
| <li>ห้ามใช้ AI บิดเบือนภาพเพื่อโจมตี</li> |
| </ul> |
| </div> |
| <div class="bg-white p-3 rounded-lg border border-red-100"> |
| <h4 class="font-bold text-red-600 mb-1">🛡️ การป้องกันส่วนบุคคล</h4> |
| <ul class="list-disc list-inside text-gray-600 space-y-1"> |
| <li>ห้ามพาดพิงสถาบันพระมหากษัตริย์</li> |
| <li>ห้ามโพสต์หาเสียงหลัง 18:00 น. ก่อนวันเลือกตั้ง</li> |
| <li>ห้ามเผยแพร่ผล Poll 7 วันสุดท้าย</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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"> |
| |
| <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="หัวข้อคอนเทนต์ หรือ นโยบาย..."> |
| <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 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 max-h-40 overflow-y-auto"></div> |
| </div> |
| </div> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <section class="bg-white rounded-2xl shadow-xl p-8 border border-purple-100"> |
| <h3 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">📊 Digital Landscape: อุดรฯ เขต 6</h3> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> |
| <div class="chart-container"> |
| <canvas id="socialChart"></canvas> |
| </div> |
| <div class="space-y-4"> |
| <div class="p-4 bg-purple-50 rounded-xl border border-purple-100"> |
| <h5 class="font-bold text-purple-800">🎯 First Voters & New Gen</h5> |
| <p class="text-sm text-gray-600 mt-1">กลุ่ม TikTok อายุ 18-35 ปี คือกุญแจสำคัญในการทำลายฐานเสียงเดิม</p> |
| </div> |
| <div class="p-4 bg-blue-50 rounded-xl border border-blue-100"> |
| <h5 class="font-bold text-blue-800">💬 Local Communities</h5> |
| <p class="text-sm text-gray-600 mt-1">เน้นการทำคอนเทนต์ "บ้านเฮา" โดยใช้ภาษาอีสานและวิถีชีวิตจริง</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| </main> |
|
|
| <script type="module"> |
| import { GoogleGenerativeAI } from "@google/generative-ai"; |
| |
| const apiKey = "AIzaSyBZl-6U8PaTWAVOd-sd1E9TxYOpUG4okZQ"; |
| const genAI = new GoogleGenerativeAI(apiKey); |
| const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" }); |
| |
| |
| const complianceInstruction = ` |
| [SYSTEM ROLE]: คุณคือ "ผู้เชี่ยวชาญด้านยุทธศาสตร์ดิจิทัล" ประจำทีมคุณธนอนันต์ เมนะสวัสดิ์ (พรรคกล้าธรรม อุดรธานี เขต 6) |
| |
| [ECT COMPLIANCE GUARDRAILS - กฎเหล็ก กกต.]: |
| 1. (มาตรา 73) ห้ามเขียนข้อความเชิงสัญญาว่าจะให้เงิน ทรัพย์สิน หรือประโยชน์อื่นใดทั้งทางตรงและทางอ้อม |
| 2. (นโยบาย) หากพูดถึงนโยบาย ให้ใช้คำว่า "นโยบายที่เราจะทำจริง" หรือ "วิสัยทัศน์เพื่อชาวเขต 6" แทนการรับปากส่วนตัว |
| 3. (ความเท็จ) ห้ามโจมตีบุคคลอื่นด้วยข้อมูลที่อาจเป็นเท็จ หรือใช้ภาษาที่รุนแรงใส่ร้าย |
| 4. (สถาบันฯ) ห้ามพาดพิงสถาบันพระมหากษัตริย์ไม่ว่ากรณีใดๆ |
| 5. (ภาษา) ใช้ภาษาอีสานผสมผสานอย่างลงตัว ดูจริงใจ เป็นกันเอง แต่สุภาพและมีความเป็นมืออาชีพ |
| 6. (ระเบียบโซเชียล) หากเป็นโพสต์ที่มีค่าใช้จ่าย ให้เน้นว่าเป็นการนำเสนอนโยบายเพื่อประโยชน์ส่วนรวม |
| `; |
| |
| 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> กำลังคิด...'; |
| if(area) area.classList.remove('hidden'); |
| } else { |
| btn.disabled = false; |
| btn.innerHTML = defaultText[btnId]; |
| } |
| } |
| |
| |
| document.getElementById('btnGenerateCaption').addEventListener('click', async () => { |
| const topic = document.getElementById('captionTopic').value; |
| const platform = document.getElementById('captionPlatform').value; |
| if(!topic) return; |
| |
| setLoading('btnGenerateCaption', 'captionOutputArea', true); |
| const output = document.getElementById('captionOutput'); |
| output.innerHTML = "กำลังตรวจสอบกฎ กกต. และสร้างเนื้อหา..."; |
| |
| try { |
| const prompt = ` |
| ${complianceInstruction} |
| หัวข้อคอนเทนต์: "${topic}" |
| แพลตฟอร์ม: "${platform}" |
| |
| TASK: เขียนแคปชั่นที่น่าสนใจ ดึงดูดชาวอุดรธานี เขต 6 ให้เข้าถึงนโยบายและวิสัยทัศน์ของคุณธนอนันต์ |
| - หากเป็น TikTok ให้เน้น Hook 3 วินาทีแรก และคำคมอีสาน |
| - หากเป็น Facebook ให้เน้นรายละเอียดที่จับต้องได้ |
| - ทุกคำต้องผ่านกฎการหาเสียง กกต. 100% |
| `; |
| |
| const result = await model.generateContent(prompt); |
| output.innerHTML = result.response.text().trim(); |
| } catch (err) { |
| console.error(err); |
| output.innerHTML = "ขออภัย เกิดข้อผิดพลาดในระบบ AI"; |
| } finally { |
| setLoading('btnGenerateCaption', null, false); |
| } |
| }); |
| |
| |
| 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); |
| } |
| }); |
| |
| |
| 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; |
| |
| 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); |
| } |
| }); |
| |
| |
| document.getElementById('btnGenerateStrategy').addEventListener('click', async () => { |
| const situation = document.getElementById('crisisInput').value; |
| if(!situation) return; |
| |
| setLoading('btnGenerateStrategy', 'strategyOutput', true); |
| const output = document.getElementById('strategyOutput'); |
| output.innerHTML = "กำลังวิเคราะห์สถานการณ์..."; |
| |
| try { |
| const prompt = ` |
| ${complianceInstruction} |
| สถานการณ์: "${situation}" |
| |
| TASK: แนะนำวิธีรับมือในเชิงยุทธศาสตร์การสื่อสาร (Crisis Management) |
| - ต้องไม่ใช่วิธีที่ผิดกฎหมายเลือกตั้ง |
| - เน้นการชี้แจงด้วยข้อเท็จจริง |
| - รักษาภาพลักษณ์ความ "กล้าธรรม" ของคุณธนอนันต์ |
| `; |
| |
| 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); |
| } |
| }); |
| |
| |
| window.onload = () => { |
| const ctxSocial = document.getElementById('socialChart').getContext('2d'); |
| new Chart(ctxSocial, { |
| type: 'doughnut', |
| data: { |
| labels: ['TikTok (New Gen)', 'Facebook (Mass)', 'Line OA (Direct)', 'อื่นๆ'], |
| datasets: [{ |
| data: [50, 25, 20, 5], |
| backgroundColor: ['#000000', '#1877F2', '#00B900', '#9333EA'], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { position: 'bottom' }, |
| title: { display: true, text: 'สัดส่วนเป้าหมายช่องทางดิจิทัล' } |
| } |
| } |
| }); |
| }; |
| </script> |
| </body> |
| </html> |
