Spaces:

kritsanan
/

chatbot-6

Running

App Files Files Community

kritsanan commited on May 1, 2025

Commit

d783d5c

verified ·

1 Parent(s): a9f466e

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +732 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Chatbot 6
-emoji: 🌍
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: chatbot-6
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,732 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="th">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ThaiGov AI Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;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>
+        :root {
+            --primary-color: #2c7be5;
+            --secondary-color: #00d97e;
+            --danger-color: #e63757;
+            --warning-color: #f6c343;
+            --dark-color: #12263f;
+            --light-color: #f9fafd;
+        }
+        body {
+            font-family: 'Noto Sans Thai', sans-serif;
+            background-color: #f5f7fa;
+        }
+        .chat-bubble {
+            border-radius: 18px;
+            max-width: 80%;
+        }
+        .user-bubble {
+            border-bottom-right-radius: 4px;
+            background-color: var(--primary-color);
+            color: white;
+        }
+        .bot-bubble {
+            border-bottom-left-radius: 4px;
+            background-color: white;
+            color: var(--dark-color);
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        .quick-reply {
+            transition: all 0.2s ease;
+        }
+        .quick-reply:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .high-contrast {
+            background-color: black !important;
+            color: white !important;
+        }
+        .high-contrast .bot-bubble {
+            background-color: black !important;
+            color: yellow !important;
+            border: 2px solid yellow !important;
+        }
+        .high-contrast .user-bubble {
+            background-color: yellow !important;
+            color: black !important;
+        }
+        .text-xxs {
+            font-size: 0.65rem;
+        }
+        /* Animation for typing indicator */
+        @keyframes typing {
+            0% { opacity: 0.5; }
+            50% { opacity: 1; }
+            100% { opacity: 0.5; }
+        }
+        .typing-indicator span {
+            animation: typing 1.5s infinite;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        /* LINE style elements */
+        .line-button {
+            background-color: #06c755;
+            color: white;
+        }
+        /* Accessibility focus styles */
+        button:focus, input:focus {
+            outline: 2px solid var(--primary-color);
+            outline-offset: 2px;
+        }
+        /* Document status indicators */
+        .status-pending {
+            background-color: #fff4e5;
+            color: #f79009;
+        }
+        .status-approved {
+            background-color: #ecfdf3;
+            color: #12b76a;
+        }
+        .status-rejected {
+            background-color: #fef3f2;
+            color: #f04438;
+        }
+    </style>
+</head>
+<body class="relative h-screen overflow-hidden bg-gray-50" style="max-width: 360px; margin: 0 auto;">
+    <!-- App Header with LINE integration -->
+    <header class="bg-blue-600 text-white p-4 shadow-md">
+        <div class="flex items-center justify-between">
+            <button id="backBtn" class="text-white" aria-label="Back">
+                <i class="fas fa-chevron-left"></i>
+            </button>
+            <div class="flex items-center space-x-2">
+                <img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="ThaiGov Logo" class="h-8">
+                <h1 class="font-bold text-lg">ThaiGov AI</h1>
+            </div>
+            <div class="flex items-center space-x-3">
+                <button id="languageToggle" class="text-white text-sm" aria-label="Toggle language">EN</button>
+                <button id="settingsBtn" class="text-white" aria-label="Settings">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Chat Container -->
+    <main class="h-[calc(100vh-120px)] overflow-y-auto pb-4 px-3 pt-2" id="chatContainer">
+        <!-- Welcome Message with LINE login option -->
+        <div class="flex mb-4">
+            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                <i class="fas fa-robot text-blue-600"></i>
+            </div>
+            <div class="bot-bubble chat-bubble px-4 py-3">
+                <p class="font-medium">สวัสดีค่ะ! ยินดีต้อนรับสู่ ThaiGov AI Assistant</p>
+                <p class="text-sm mt-1">เพื่อความสะดวกในการใช้งาน คุณสามารถเข้าสู่ระบบผ่าน LINE</p>
+                <button class="line-button w-full mt-3 rounded-lg px-4 py-2 text-sm font-medium flex items-center justify-center">
+                    <i class="fab fa-line mr-2 text-xl"></i> เข้าสู่ระบบด้วย LINE
+                </button>
+                <div class="mt-3 grid grid-cols-2 gap-2">
+                    <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
+                        <i class="fas fa-file-alt mr-1"></i> ยื่นเอกสาร
+                    </button>
+                    <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
+                        <i class="fas fa-calendar-alt mr-1"></i> นัดหมาย
+                    </button>
+                    <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
+                        <i class="fas fa-money-bill-wave mr-1"></i> ชำระเงิน
+                    </button>
+                    <button class="quick-reply bg-blue-50 text-blue-600 rounded-full px-3 py-1 text-xs font-medium">
+                        <i class="fas fa-question-circle mr-1"></i> คำถามทั่วไป
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Emergency Shortcut -->
+        <div class="flex justify-center mb-4">
+            <button id="emergencyBtn" class="bg-red-100 text-red-600 rounded-full px-4 py-2 text-sm font-medium flex items-center">
+                <i class="fas fa-phone-alt mr-2"></i> เบอร์ฉุกเฉิน
+            </button>
+        </div>
+        <!-- Sample Document Status Update -->
+        <div class="flex mb-4">
+            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                <i class="fas fa-robot text-blue-600"></i>
+            </div>
+            <div class="bot-bubble chat-bubble px-4 py-3">
+                <div class="flex items-start">
+                    <div class="bg-green-100 p-2 rounded-full mr-3">
+                        <i class="fas fa-check-circle text-green-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">สถานะเอกสารของคุณ</p>
+                        <p class="text-sm mt-1">ใบคำร้องขออนุญาตก่อสร้าง</p>
+                        <div class="mt-2 status-approved px-3 py-1 rounded-full text-xs inline-flex items-center">
+                            <i class="fas fa-check-circle mr-1"></i> อนุมัติแล้ว
+                        </div>
+                        <p class="text-xs text-gray-500 mt-2">อัปเดตล่าสุด: 15/06/2566 14:30</p>
+                    </div>
+                </div>
+                <button class="w-full mt-3 bg-blue-50 text-blue-600 rounded-lg px-3 py-2 text-sm font-medium">
+                    <i class="fas fa-download mr-2"></i> ดาวน์โหลดเอกสารอนุมัติ
+                </button>
+            </div>
+        </div>
+        <!-- Appointment Reminder -->
+        <div class="flex mb-4">
+            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                <i class="fas fa-robot text-blue-600"></i>
+            </div>
+            <div class="bot-bubble chat-bubble px-4 py-3">
+                <div class="flex items-start">
+                    <div class="bg-yellow-100 p-2 rounded-full mr-3">
+                        <i class="fas fa-bell text-yellow-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">การแจ้งเตือนนัดหมาย</p>
+                        <p class="text-sm mt-1">คุณมีนัดหมายกับสำนักงานเขตในวันพรุ่งนี้</p>
+                        <p class="text-sm font-medium mt-1">16/06/2566 เวลา 09:30 น.</p>
+                        <p class="text-xs text-gray-500 mt-1">สถานที่: สำนักงานเขตบางนา ชั้น 3</p>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-2 mt-3">
+                    <button class="quick-reply bg-blue-50 text-blue-600 rounded-lg px-3 py-2 text-sm font-medium">
+                        <i class="fas fa-calendar-check mr-1"></i> ยืนยัน
+                    </button>
+                    <button class="quick-reply bg-gray-100 text-gray-600 rounded-lg px-3 py-2 text-sm font-medium">
+                        <i class="fas fa-calendar-times mr-1"></i> ยกเลิก
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Payment Notification -->
+        <div class="flex mb-4">
+            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                <i class="fas fa-robot text-blue-600"></i>
+            </div>
+            <div class="bot-bubble chat-bubble px-4 py-3">
+                <div class="flex items-start">
+                    <div class="bg-purple-100 p-2 rounded-full mr-3">
+                        <i class="fas fa-money-bill-wave text-purple-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">แจ้งเตือนการชำระเงิน</p>
+                        <p class="text-sm mt-1">ค่าธรรมเนียมใบอนุญาตขับขี่</p>
+                        <p class="text-sm font-medium mt-1">จำนวน 300 บาท</p>
+                        <p class="text-xs text-gray-500 mt-1">ครบกำหนดชำระ: 20/06/2566</p>
+                    </div>
+                </div>
+                <button class="w-full mt-3 bg-green-600 text-white rounded-lg px-3 py-2 text-sm font-medium">
+                    <i class="fas fa-credit-card mr-2"></i> ชำระเงินตอนนี้
+                </button>
+            </div>
+        </div>
+        <!-- Typing Indicator -->
+        <div class="flex mb-4 typing-indicator" id="typingIndicator" style="display: none;">
+            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                <i class="fas fa-robot text-blue-600"></i>
+            </div>
+            <div class="bg-gray-100 rounded-full px-4 py-3 flex space-x-1">
+                <span>•</span>
+                <span>•</span>
+                <span>•</span>
+            </div>
+        </div>
+    </main>
+    <!-- Input Area with voice and attachment options -->
+    <footer class="absolute bottom-0 w-full bg-white border-t border-gray-200 p-3">
+        <div class="flex items-center space-x-2">
+            <button id="attachBtn" class="text-blue-600 p-2 rounded-full hover:bg-blue-50" aria-label="Attach file">
+                <i class="fas fa-paperclip"></i>
+            </button>
+            <button id="voiceBtn" class="text-blue-600 p-2 rounded-full hover:bg-blue-50" aria-label="Voice input">
+                <i class="fas fa-microphone"></i>
+            </button>
+            <div class="flex-1 relative">
+                <input type="text" placeholder="พิมพ์ข้อความ..." class="w-full bg-gray-100 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" id="messageInput">
+                <button id="sendBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-blue-600" aria-label="Send message">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Quick Action Buttons -->
+        <div class="mt-2 flex justify-between text-xs text-center">
+            <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
+                <i class="fas fa-home block mx-auto mb-1"></i>
+                หน้าหลัก
+            </button>
+            <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
+                <i class="fas fa-file-alt block mx-auto mb-1"></i>
+                เอกสาร
+            </button>
+            <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
+                <i class="fas fa-calendar block mx-auto mb-1"></i>
+                นัดหมาย
+            </button>
+            <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
+                <i class="fas fa-wallet block mx-auto mb-1"></i>
+                ชำระเงิน
+            </button>
+            <button class="text-gray-600 px-2 py-1 rounded hover:bg-gray-100">
+                <i class="fas fa-user block mx-auto mb-1"></i>
+                บัญชี
+            </button>
+        </div>
+    </footer>
+    <!-- Settings Modal with accessibility options -->
+    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
+        <div class="bg-white rounded-lg w-full max-w-xs mx-4">
+            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+                <h3 class="font-bold text-lg">การตั้งค่า</h3>
+                <button id="closeSettings" class="text-gray-500" aria-label="Close settings">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-4 space-y-4">
+                <div>
+                    <label class="block text-sm font-medium mb-1">ภาษา</label>
+                    <div class="flex space-x-2">
+                        <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">ไทย</button>
+                        <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-sm">English</button>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">ขนาดตัวอักษร</label>
+                    <div class="flex items-center space-x-2">
+                        <button class="text-gray-500" id="decreaseFont">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <div class="flex-1 bg-gray-100 rounded-full h-2">
+                            <div class="bg-blue-600 h-2 rounded-full w-3/4" id="fontSizeBar"></div>
+                        </div>
+                        <button class="text-gray-500" id="increaseFont">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="flex items-center justify-between">
+                    <label class="text-sm font-medium">โหมดความคมชัดสูง</label>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="sr-only peer" id="highContrastToggle">
+                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                </div>
+                <div class="flex items-center justify-between">
+                    <label class="text-sm font-medium">การตอบสนองสัมผัส</label>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="sr-only peer" checked id="hapticToggle">
+                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                </div>
+                <div class="flex items-center justify-between">
+                    <label class="text-sm font-medium">ป้อนข้อมูลด้วยเสียง</label>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="sr-only peer" checked id="voiceInputToggle">
+                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                </div>
+                <div class="pt-4 border-t border-gray-200">
+                    <button class="w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-medium" id="saveSettings">
+                        บันทึกการตั้งค่า
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Emergency Contacts Modal -->
+    <div id="emergencyModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
+        <div class="bg-white rounded-lg w-full max-w-xs mx-4">
+            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+                <h3 class="font-bold text-lg">เบอร์ฉุกเฉิน</h3>
+                <button id="closeEmergency" class="text-gray-500" aria-label="Close emergency contacts">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-4 space-y-3">
+                <div class="flex items-center p-3 bg-red-50 rounded-lg">
+                    <div class="bg-red-100 p-2 rounded-full mr-3">
+                        <i class="fas fa-ambulance text-red-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">รถพยาบาล</p>
+                        <p class="text-sm text-gray-600">1669</p>
+                    </div>
+                </div>
+                <div class="flex items-center p-3 bg-blue-50 rounded-lg">
+                    <div class="bg-blue-100 p-2 rounded-full mr-3">
+                        <i class="fas fa-shield-alt text-blue-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">ตำรวจ</p>
+                        <p class="text-sm text-gray-600">191</p>
+                    </div>
+                </div>
+                <div class="flex items-center p-3 bg-orange-50 rounded-lg">
+                    <div class="bg-orange-100 p-2 rounded-full mr-3">
+                        <i class="fas fa-fire-extinguisher text-orange-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">ดับเพลิง</p>
+                        <p class="text-sm text-gray-600">199</p>
+                    </div>
+                </div>
+                <div class="flex items-center p-3 bg-purple-50 rounded-lg">
+                    <div class="bg-purple-100 p-2 rounded-full mr-3">
+                        <i class="fas fa-life-ring text-purple-600"></i>
+                    </div>
+                    <div>
+                        <p class="font-medium">ภัยพิบัติ</p>
+                        <p class="text-sm text-gray-600">1784</p>
+                    </div>
+                </div>
+                <div class="pt-4">
+                    <button class="w-full border border-blue-600 text-blue-600 py-2 rounded-lg text-sm font-medium">
+                        โทรออก
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Attachment Options Modal -->
+    <div id="attachmentModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
+        <div class="bg-white rounded-lg w-full max-w-xs mx-4">
+            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+                <h3 class="font-bold text-lg">แนบไฟล์</h3>
+                <button id="closeAttachment" class="text-gray-500" aria-label="Close attachment options">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-4 grid grid-cols-2 gap-3">
+                <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
+                    <i class="fas fa-camera text-blue-600 text-xl mb-2"></i>
+                    <span class="text-sm">กล้อง</span>
+                </button>
+                <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
+                    <i class="fas fa-images text-green-600 text-xl mb-2"></i>
+                    <span class="text-sm">แกลเลอรี่</span>
+                </button>
+                <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
+                    <i class="fas fa-file-pdf text-red-600 text-xl mb-2"></i>
+                    <span class="text-sm">เอกสาร</span>
+                </button>
+                <button class="flex flex-col items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
+                    <i class="fas fa-map-marker-alt text-yellow-600 text-xl mb-2"></i>
+                    <span class="text-sm">ตำแหน่ง</span>
+                </button>
+            </div>
+            <div class="p-4 border-t border-gray-200 text-xs text-gray-500">
+                <i class="fas fa-lock"></i> ไฟล์ทั้งหมดจะถูกเก็บเป็นความลับตาม พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล
+            </div>
+        </div>
+    </div>
+    <!-- Voice Input Modal -->
+    <div id="voiceModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
+        <div class="bg-white rounded-lg w-full max-w-xs mx-4">
+            <div class="p-6 flex flex-col items-center">
+                <div class="relative mb-4">
+                    <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center">
+                        <i class="fas fa-microphone text-blue-600 text-3xl" id="voiceIcon"></i>
+                    </div>
+                    <div class="absolute -bottom-2 -right-2 bg-red-500 rounded-full w-8 h-8 flex items-center justify-center">
+                        <i class="fas fa-stop text-white"></i>
+                    </div>
+                </div>
+                <h3 class="font-bold text-lg mb-1">กำลังฟัง...</h3>
+                <p class="text-sm text-gray-600 mb-4">พูดตอนนี้</p>
+                <div class="w-full bg-gray-100 rounded-full h-2 mb-4">
+                    <div class="bg-blue-600 h-2 rounded-full w-1/2" id="voiceLevel"></div>
+                </div>
+                <p class="text-sm text-gray-500">ระบบจะประมวลผลหลังจากคุณหยุดพูด</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // DOM Elements
+        const settingsBtn = document.getElementById('settingsBtn');
+        const closeSettings = document.getElementById('closeSettings');
+        const settingsModal = document.getElementById('settingsModal');
+        const emergencyModal = document.getElementById('emergencyModal');
+        const closeEmergency = document.getElementById('closeEmergency');
+        const emergencyBtn = document.getElementById('emergencyBtn');
+        const languageToggle = document.getElementById('languageToggle');
+        const highContrastToggle = document.getElementById('highContrastToggle');
+        const hapticToggle = document.getElementById('hapticToggle');
+        const voiceInputToggle = document.getElementById('voiceInputToggle');
+        const chatContainer = document.getElementById('chatContainer');
+        const messageInput = document.getElementById('messageInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const attachBtn = document.getElementById('attachBtn');
+        const voiceBtn = document.getElementById('voiceBtn');
+        const attachmentModal = document.getElementById('attachmentModal');
+        const closeAttachment = document.getElementById('closeAttachment');
+        const voiceModal = document.getElementById('voiceModal');
+        const typingIndicator = document.getElementById('typingIndicator');
+        const increaseFont = document.getElementById('increaseFont');
+        const decreaseFont = document.getElementById('decreaseFont');
+        const fontSizeBar = document.getElementById('fontSizeBar');
+        const saveSettings = document.getElementById('saveSettings');
+        // Current settings state
+        let currentSettings = {
+            language: 'th',
+            fontSize: 3, // 1-5 scale
+            highContrast: false,
+            hapticFeedback: true,
+            voiceInput: true
+        };
+        // Event Listeners
+        settingsBtn.addEventListener('click', () => {
+            settingsModal.classList.remove('hidden');
+            triggerHapticFeedback();
+        });
+        closeSettings.addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+            triggerHapticFeedback();
+        });
+        emergencyBtn.addEventListener('click', () => {
+            emergencyModal.classList.remove('hidden');
+            triggerHapticFeedback();
+        });
+        closeEmergency.addEventListener('click', () => {
+            emergencyModal.classList.add('hidden');
+            triggerHapticFeedback();
+        });
+        attachBtn.addEventListener('click', () => {
+            attachmentModal.classList.remove('hidden');
+            triggerHapticFeedback();
+        });
+        closeAttachment.addEventListener('click', () => {
+            attachmentModal.classList.add('hidden');
+            triggerHapticFeedback();
+        });
+        voiceBtn.addEventListener('click', () => {
+            if (currentSettings.voiceInput) {
+                voiceModal.classList.remove('hidden');
+                triggerHapticFeedback();
+                // Simulate voice input animation
+                const voiceLevel = document.getElementById('voiceLevel');
+                let width = 10;
+                const interval = setInterval(() => {
+                    width = 10 + Math.random() * 90;
+                    voiceLevel.style.width = `${width}%`;
+                }, 100);
+                // Stop after 3 seconds
+                setTimeout(() => {
+                    clearInterval(interval);
+                    voiceModal.classList.add('hidden');
+                    // Show typing indicator
+                    typingIndicator.style.display = 'flex';
+                    // Simulate bot response after delay
+                    setTimeout(() => {
+                        typingIndicator.style.display = 'none';
+                        addBotMessage("ฉันได้ยินคุณพูดว่า 'ฉันต้องการยื่นเอกสารสำหรับการแจ้งเกิด' ถูกต้องหรือไม่?");
+                    }, 2000);
+                }, 3000);
+            }
+        });
+        languageToggle.addEventListener('click', () => {
+            const currentLang = languageToggle.textContent;
+            languageToggle.textContent = currentLang === 'EN' ? 'TH' : 'EN';
+            currentSettings.language = currentLang === 'EN' ? 'th' : 'en';
+            triggerHapticFeedback();
+        });
+        highContrastToggle.addEventListener('change', (e) => {
+            currentSettings.highContrast = e.target.checked;
+            updateHighContrastMode();
+        });
+        hapticToggle.addEventListener('change', (e) => {
+            currentSettings.hapticFeedback = e.target.checked;
+        });
+        voiceInputToggle.addEventListener('change', (e) => {
+            currentSettings.voiceInput = e.target.checked;
+        });
+        increaseFont.addEventListener('click', () => {
+            if (currentSettings.fontSize < 5) {
+                currentSettings.fontSize++;
+                updateFontSize();
+                triggerHapticFeedback();
+            }
+        });
+        decreaseFont.addEventListener('click', () => {
+            if (currentSettings.fontSize > 1) {
+                currentSettings.fontSize--;
+                updateFontSize();
+                triggerHapticFeedback();
+            }
+        });
+        saveSettings.addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+            triggerHapticFeedback();
+            // In a real app, you would save these settings to localStorage or backend
+        });
+        // Message sending functionality
+        sendBtn.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        // Functions
+        function sendMessage() {
+            const message = messageInput.value.trim();
+            if (message) {
+                addUserMessage(message);
+                messageInput.value = '';
+                // Show typing indicator
+                typingIndicator.style.display = 'flex';
+                // Simulate bot response after delay
+                setTimeout(() => {
+                    typingIndicator.style.display = 'none';
+                    // Simple chatbot responses
+                    if (message.includes('สวัสดี') || message.includes('hello')) {
+                        addBotMessage("สวัสดีค่ะ! มีอะไรให้ช่วยเหลือหรือไม่?");
+                    } else if (message.includes('ขอบคุณ') || message.includes('thank')) {
+                        addBotMessage("ยินดีให้บริการค่ะ 😊");
+                    } else if (message.includes('เอกสาร') || message.includes('document')) {
+                        addBotMessage("คุณต้องการดำเนินการเกี่ยวกับเอกสารประเภทใดคะ?");
+                    } else {
+                        addBotMessage("ฉันเข้าใจคำถามของคุณแล้ว กำลังค้นหาข้อมูลให้ค่ะ...");
+                    }
+                }, 1500);
+                triggerHapticFeedback();
+            }
+        }
+        function addUserMessage(text) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'flex mb-4 justify-end';
+            messageDiv.innerHTML = `
+                <div class="user-bubble chat-bubble px-4 py-2">
+                    <p>${text}</p>
+                </div>
+            `;
+            chatContainer.appendChild(messageDiv);
+            scrollToBottom();
+        }
+        function addBotMessage(text) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'flex mb-4';
+            messageDiv.innerHTML = `
+                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                    <i class="fas fa-robot text-blue-600"></i>
+                </div>
+                <div class="bot-bubble chat-bubble px-4 py-3">
+                    <p>${text}</p>
+                </div>
+            `;
+            chatContainer.appendChild(messageDiv);
+            scrollToBottom();
+        }
+        function updateHighContrastMode() {
+            if (currentSettings.highContrast) {
+                document.body.classList.add('high-contrast');
+            } else {
+                document.body.classList.remove('high-contrast');
+            }
+        }
+        function updateFontSize() {
+            const sizes = ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl'];
+            const percentage = [20, 40, 60, 80, 100];
+            // Update all text elements (simplified for demo)
+            document.body.className = document.body.className.replace(/\btext-(xs|sm|base|lg|xl)\b/g, '');
+            document.body.classList.add(sizes[currentSettings.fontSize - 1]);
+            // Update font size bar
+            fontSizeBar.style.width = `${percentage[currentSettings.fontSize - 1]}%`;
+        }
+        function scrollToBottom() {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        function triggerHapticFeedback() {
+            if (currentSettings.hapticFeedback) {
+                // In a real app, we would use navigator.vibrate()
+                console.log("Haptic feedback triggered");
+            }
+        }
+        // Initialize
+        scrollToBottom();
+    </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-6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes