File size: 29,131 Bytes
58444dd 123fa34 58444dd 718c240 123fa34 58444dd 123fa34 58444dd 123fa34 58444dd 123fa34 58444dd 123fa34 4d5f225 123fa34 5b60024 123fa34 718c240 e1254ec 123fa34 718c240 c3c0fcf 123fa34 718c240 5b60024 123fa34 718c240 123fa34 718c240 123fa34 718c240 58444dd 718c240 4d5f225 718c240 e1254ec 4d5f225 718c240 123fa34 e1254ec 4d5f225 123fa34 4d5f225 718c240 4d5f225 718c240 4d5f225 718c240 4d5f225 718c240 4d5f225 718c240 123fa34 4d5f225 123fa34 4d5f225 718c240 4d5f225 c3c0fcf e1254ec 718c240 e1254ec 4d5f225 718c240 d8c65e5 4d5f225 d8c65e5 4d5f225 d8c65e5 4d5f225 d8c65e5 c3c0fcf e1254ec d8c65e5 123fa34 718c240 4d5f225 123fa34 4d5f225 123fa34 718c240 e1254ec 123fa34 e1254ec 123fa34 79bc084 123fa34 4d5f225 718c240 4d5f225 d8c65e5 718c240 d8c65e5 4d5f225 718c240 d8c65e5 123fa34 d8c65e5 718c240 4d5f225 123fa34 4d5f225 123fa34 718c240 4d5f225 718c240 4d5f225 718c240 123fa34 4d5f225 d8c65e5 123fa34 4d5f225 123fa34 718c240 123fa34 d8c65e5 718c240 4d5f225 123fa34 4d5f225 718c240 4d5f225 718c240 4d5f225 718c240 4d5f225 d8c65e5 4d5f225 718c240 4d5f225 718c240 4d5f225 718c240 c3c0fcf 123fa34 58444dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 |
<!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>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Google Generative AI SDK -->
<script type="importmap">
{
"imports": {
"@google/generative-ai": "https://esm.run/@google/generative-ai"
}
}
</script>
<!-- Font: Noto Sans Thai -->
<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 Section -->
<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">
<!-- Intro Stats -->
<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>
<!-- ECT Compliance 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>
<!-- AI Tools 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">
<!-- 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="หัวข้อคอนเทนต์ หรือ นโยบาย...">
<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>
<!-- 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>
<!-- Digital War Room Charts -->
<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"; // API Key will be injected at runtime
const genAI = new GoogleGenerativeAI(apiKey);
const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" });
// --- ENHANCED ECT COMPLIANCE SYSTEM PROMPT ---
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];
}
}
// --- Feature 1: Caption Generator ---
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);
}
});
// --- 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;
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);
}
});
// Initialize Charts
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> |