|
|
<!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> |
