Spaces:
Running
Running
| <html lang="th"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ผู้ช่วย อปท. | Local Government Assistant</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Sarabun', sans-serif; | |
| background-color: #F5F9FF; | |
| } | |
| .chat-container { | |
| width: 360px; | |
| height: 640px; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); | |
| } | |
| .bot-bubble { | |
| background-color: #E6F0FF; | |
| border-radius: 16px 16px 16px 0; | |
| max-width: 80%; | |
| } | |
| .user-bubble { | |
| background-color: #0078FF; | |
| color: white; | |
| border-radius: 16px 16px 0 16px; | |
| max-width: 80%; | |
| } | |
| .quick-reply { | |
| background-color: #E6F0FF; | |
| border-radius: 20px; | |
| width: 80px; | |
| height: 40px; | |
| font-size: 14px; | |
| transition: all 0.2s; | |
| } | |
| .quick-reply:hover { | |
| background-color: #D0E2FF; | |
| } | |
| .pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .header-shadow { | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .font-size-selector { | |
| width: 120px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 flex items-center justify-center p-4"> | |
| <!-- Chat App Container (360x640px) --> | |
| <div class="chat-container bg-white flex flex-col"> | |
| <!-- Header Section --> | |
| <header class="bg-blue-700 text-white header-shadow z-10"> | |
| <div class="flex items-center justify-between px-4 py-3"> | |
| <!-- Logo and App Name --> | |
| <div class="flex items-center"> | |
| <img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" | |
| alt="ผู้ช่วย อปท. Logo" | |
| class="h-8"> | |
| <h1 class="ml-2 text-lg font-bold">ผู้ช่วย อปท.</h1> | |
| </div> | |
| <!-- Header Controls --> | |
| <div class="flex items-center space-x-2"> | |
| <!-- Font Size Adjuster --> | |
| <div class="relative font-size-selector"> | |
| <select aria-label="ปรับขนาดตัวอักษร" | |
| class="bg-blue-600 text-white text-sm rounded px-2 py-1"> | |
| <option value="small">ตัวเล็ก</option> | |
| <option value="medium" selected>ตัวกลาง</option> | |
| <option value="large">ตัวใหญ่</option> | |
| </select> | |
| </div> | |
| <!-- Close Button --> | |
| <button aria-label="ปิดแอปพลิเคชัน" | |
| class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Chat Area --> | |
| <main class="flex-1 overflow-y-auto p-3 bg-white"> | |
| <!-- Welcome Message --> | |
| <div class="mb-4"> | |
| <div class="bot-bubble px-4 py-3"> | |
| <p>สวัสดีค่ะ! ยินดีต้อนรับสู่บริการผู้ช่วย อปท.</p> | |
| <p class="mt-1">ฉันสามารถช่วยเหลือคุณในเรื่อง:</p> | |
| <ul class="list-disc pl-5 mt-1"> | |
| <li>ข้อมูลบริการท้องถิ่น</li> | |
| <li>แบบฟอร์มออนไลน์</li> | |
| <li>นัดหมายบริการ</li> | |
| <li>ปัญหาสาธารณูปโภค</li> | |
| </ul> | |
| <p class="text-xs text-gray-500 mt-2">10:30 น.</p> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="mb-4 flex justify-end"> | |
| <div class="user-bubble px-4 py-3"> | |
| <p>ต้องการยื่นแบบฟอร์มภาษีที่ดิน</p> | |
| <p class="text-xs text-blue-100 mt-2">10:32 น.</p> | |
| </div> | |
| </div> | |
| <!-- Bot Response with Quick Replies --> | |
| <div class="mb-4"> | |
| <div class="bot-bubble px-4 py-3"> | |
| <p>คุณต้องการยื่นแบบฟอร์มภาษีที่ดินสำหรับ:</p> | |
| <!-- Quick Replies --> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <button class="quick-reply flex items-center justify-center"> | |
| ที่อยู่อาศัย | |
| </button> | |
| <button class="quick-reply flex items-center justify-center"> | |
| ที่ดินว่างเปล่า | |
| </button> | |
| <button class="quick-reply flex items-center justify-center"> | |
| เกษตรกรรม | |
| </button> | |
| <button class="quick-reply flex items-center justify-center"> | |
| อื่นๆ | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">10:33 น.</p> | |
| </div> | |
| </div> | |
| <!-- API Loading State --> | |
| <div class="mb-4"> | |
| <div class="bot-bubble px-4 py-3 flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-gray-600 pulse"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-600 pulse" style="animation-delay: 0.2s"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-600 pulse" style="animation-delay: 0.4s"></div> | |
| </div> | |
| </div> | |
| <!-- API Error State --> | |
| <div class="mb-4 hidden" id="error-message"> | |
| <div class="bot-bubble px-4 py-3 bg-red-100 border border-red-300"> | |
| <p class="text-red-700">ขออภัยในความไม่สะดวก ระบบไม่สามารถเชื่อมต่อกับฐานข้อมูลได้ในขณะนี้</p> | |
| <button class="mt-2 text-sm text-blue-600 font-medium">ลองอีกครั้ง</button> | |
| <p class="text-xs text-gray-500 mt-2">10:35 น.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Input Section --> | |
| <footer class="bg-gray-50 border-t border-gray-200"> | |
| <!-- Quick Action Buttons --> | |
| <div class="px-3 py-2 flex justify-around bg-blue-50"> | |
| <button class="flex flex-col items-center text-xs text-blue-700"> | |
| <i class="fas fa-file-alt text-lg mb-1"></i> | |
| <span>แบบฟอร์ม</span> | |
| </button> | |
| <button class="flex flex-col items-center text-xs text-blue-700"> | |
| <i class="fas fa-calendar-check text-lg mb-1"></i> | |
| <span>นัดหมาย</span> | |
| </button> | |
| <button class="flex flex-col items-center text-xs text-blue-700"> | |
| <i class="fas fa-map-marked-alt text-lg mb-1"></i> | |
| <span>แผนที่</span> | |
| </button> | |
| <button class="flex flex-col items-center text-xs text-blue-700"> | |
| <i class="fas fa-question-circle text-lg mb-1"></i> | |
| <span>ช่วยเหลือ</span> | |
| </button> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="flex items-center p-2"> | |
| <!-- Attachment Button --> | |
| <button aria-label="แนบไฟล์" | |
| class="w-10 h-10 flex items-center justify-center rounded-full text-gray-600 mr-1"> | |
| <i class="fas fa-paperclip text-xl"></i> | |
| </button> | |
| <!-- Text Input --> | |
| <div class="flex-1 mx-1"> | |
| <input type="text" | |
| placeholder="พิมพ์ข้อความ..." | |
| class="w-full px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-transparent" | |
| style="min-height: 44px; font-size: 16px;"> | |
| </div> | |
| <!-- Voice Input --> | |
| <button aria-label="ป้อนด้วยเสียง" | |
| class="w-10 h-10 flex items-center justify-center rounded-full text-gray-600 mr-1"> | |
| <i class="fas fa-microphone text-xl"></i> | |
| </button> | |
| <!-- Send Button --> | |
| <button aria-label="ส่งข้อความ" | |
| class="w-10 h-10 flex items-center justify-center rounded-full bg-blue-600 text-white"> | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- API Integration Documentation (Hidden in UI) --> | |
| <div class="hidden"> | |
| <h2>API Integration Requirements</h2> | |
| <h3>1. LINE Messaging API</h3> | |
| <ul> | |
| <li>Endpoint: https://api.line.me/v2/bot/message/reply</li> | |
| <li>Authentication: Bearer token (Channel Access Token)</li> | |
| <li>Message types supported: Text, Image, Quick Reply, Template</li> | |
| <li>Rate limit: 1000 messages/second</li> | |
| </ul> | |
| <h3>2. Local Government Database API</h3> | |
| <ul> | |
| <li>Endpoint: https://api.localgov.go.th/services</li> | |
| <li>Authentication: OAuth 2.0 with client credentials</li> | |
| <li>Required headers: X-API-Key, Content-Type: application/json</li> | |
| <li>Data format: JSON with UTF-8 encoding</li> | |
| </ul> | |
| <h3>3. Google Cloud APIs</h3> | |
| <ul> | |
| <li>Speech-to-Text: Thai language model</li> | |
| <li>Vision API: For document/image processing</li> | |
| <li>Authentication: Service account JSON key</li> | |
| </ul> | |
| <h3>Error Handling Procedures</h3> | |
| <ol> | |
| <li>Display user-friendly error message in Thai</li> | |
| <li>Log technical details to server</li> | |
| <li>Retry failed requests (max 3 attempts)</li> | |
| <li>Fallback to cached data when available</li> | |
| <li>Provide alternative contact methods when API fails</li> | |
| </ol> | |
| <h3>PDPA Compliance</h3> | |
| <ul> | |
| <li>All personal data encrypted in transit and at rest</li> | |
| <li>User consent obtained before data collection</li> | |
| <li>Data retention policy: 90 days for chat logs</li> | |
| <li>Right to erasure implemented</li> | |
| </ul> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulate API error after 5 seconds | |
| setTimeout(() => { | |
| document.getElementById('error-message').classList.remove('hidden'); | |
| }, 5000); | |
| // Handle quick reply clicks | |
| const quickReplies = document.querySelectorAll('.quick-reply'); | |
| quickReplies.forEach(reply => { | |
| reply.addEventListener('click', function() { | |
| const text = this.textContent.trim(); | |
| console.log('Quick reply selected:', text); | |
| // In real app, this would trigger API call to local government services | |
| }); | |
| }); | |
| // Handle font size adjustment | |
| const fontSizeSelect = document.querySelector('select'); | |
| fontSizeSelect.addEventListener('change', function() { | |
| const size = this.value; | |
| let newSize = '16px'; | |
| if(size === 'small') newSize = '14px'; | |
| if(size === 'large') newSize = '18px'; | |
| document.body.style.fontSize = newSize; | |
| document.querySelector('input[type="text"]').style.fontSize = newSize; | |
| }); | |
| // Handle voice input | |
| const voiceButton = document.querySelector('[aria-label="ป้อนด้วยเสียง"]'); | |
| voiceButton.addEventListener('click', function() { | |
| console.log('Voice input activated'); | |
| // Would integrate with Web Speech API or Google Cloud Speech-to-Text | |
| }); | |
| // Handle attachment | |
| const attachButton = document.querySelector('[aria-label="แนบไฟล์"]'); | |
| attachButton.addEventListener('click', function() { | |
| console.log('Attachment dialog opened'); | |
| // Would trigger file input for document/image upload | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kritsanan/chatbot-55" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |