Hugging Face's logo

Spaces:
kritsanan
/
chat1
Running

App Files Community
kritsanan commited on
Commit
0704938
·
verified ·
1 Parent(s): b6031c2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +268 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chat1
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: chat1
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,268 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tour Der Wang - AI Assistant</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Sarabun', sans-serif;
14
+ background-color: #FFF8F0;
15
+ }
16
+
17
+ .chat-container {
18
+ background-color: #FFDEAD;
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+
22
+ .message-bubble {
23
+ max-width: 80%;
24
+ border-radius: 1.5rem;
25
+ }
26
+
27
+ .user-message {
28
+ background-color: #FFFFFF;
29
+ border-top-right-radius: 0.5rem;
30
+ }
31
+
32
+ .bot-message {
33
+ background-color: #FFE8CC;
34
+ border-top-left-radius: 0.5rem;
35
+ }
36
+
37
+ .typing-indicator span {
38
+ display: inline-block;
39
+ width: 8px;
40
+ height: 8px;
41
+ border-radius: 50%;
42
+ background-color: #8B4513;
43
+ margin: 0 2px;
44
+ }
45
+
46
+ .typing-indicator span:nth-child(1) {
47
+ animation: bounce 1s infinite;
48
+ }
49
+
50
+ .typing-indicator span:nth-child(2) {
51
+ animation: bounce 1s infinite 0.2s;
52
+ }
53
+
54
+ .typing-indicator span:nth-child(3) {
55
+ animation: bounce 1s infinite 0.4s;
56
+ }
57
+
58
+ @keyframes bounce {
59
+ 0%, 100% { transform: translateY(0); }
60
+ 50% { transform: translateY(-5px); }
61
+ }
62
+
63
+ .gallery-item {
64
+ transition: all 0.3s ease;
65
+ }
66
+
67
+ .gallery-item:hover {
68
+ transform: scale(1.03);
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="min-h-screen flex flex-col items-center justify-center p-4">
73
+ <div class="w-full max-w-2xl mb-4 flex items-center justify-center">
74
+ <img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="Tour Der Wang Logo" class="h-20 mr-4">
75
+ <div>
76
+ <h1 class="text-2xl font-bold text-amber-900">Tour Der Wang</h1>
77
+ <p class="text-amber-800">ที่นี่ วังสามหมอ - Your Travel Companion</p>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="chat-container w-full max-w-2xl h-[500px] rounded-2xl overflow-hidden flex flex-col">
82
+ <!-- Header -->
83
+ <div class="bg-amber-700 text-white p-4 flex items-center">
84
+ <div class="w-10 h-10 rounded-full bg-amber-600 flex items-center justify-center mr-3">
85
+ <i class="fas fa-robot text-xl"></i>
86
+ </div>
87
+ <div>
88
+ <h2 class="font-semibold">AI Travel Assistant</h2>
89
+ <p class="text-xs opacity-80">Connecting to APIs...</p>
90
+ </div>
91
+ <div class="ml-auto flex space-x-2">
92
+ <button class="w-8 h-8 rounded-full bg-amber-600 flex items-center justify-center hover:bg-amber-500 transition">
93
+ <i class="fas fa-phone-alt text-sm"></i>
94
+ </button>
95
+ <button class="w-8 h-8 rounded-full bg-amber-600 flex items-center justify-center hover:bg-amber-500 transition">
96
+ <i class="fas fa-ellipsis-v text-sm"></i>
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Chat Messages -->
102
+ <div class="flex-1 p-4 overflow-y-auto bg-amber-50">
103
+ <!-- Welcome message -->
104
+ <div class="flex mb-4">
105
+ <div class="message-bubble bot-message p-4 relative">
106
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
107
+ <p class="text-amber-900">สวัสดีค่ะ! ยินดีต้อนรับสู่ Tour Der Wang AI Assistant</p>
108
+ <p class="text-amber-800 mt-2">ฉันพร้อมที่จะช่วยคุณวางแผนทริปที่น่าจดจำที่วังสามหมอ!</p>
109
+
110
+ <!-- Gallery of images -->
111
+ <div class="mt-3 grid grid-cols-2 gap-2">
112
+ <div class="gallery-item rounded-lg overflow-hidden">
113
+ <img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="Tour Der Wang" class="w-full h-24 object-cover">
114
+ </div>
115
+ <div class="gallery-item rounded-lg overflow-hidden">
116
+ <img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="Tour Der Wang" class="w-full h-24 object-cover">
117
+ </div>
118
+ </div>
119
+
120
+ <div class="mt-3 pt-3 border-t border-amber-200">
121
+ <p class="text-sm text-amber-700">คุณต้องการความช่วยเหลือเรื่องอะไรคะ?</p>
122
+ <div class="flex flex-wrap gap-2 mt-2">
123
+ <button class="quick-reply-btn px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm hover:bg-amber-200 transition">
124
+ แพ็คเกจทัวร์
125
+ </button>
126
+ <button class="quick-reply-btn px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm hover:bg-amber-200 transition">
127
+ ที่พักแนะนำ
128
+ </button>
129
+ <button class="quick-reply-btn px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm hover:bg-amber-200 transition">
130
+ กิจกรรมน่าสนใจ
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Connection status -->
138
+ <div class="flex justify-center mb-4">
139
+ <div class="bg-amber-100 text-amber-800 px-4 py-2 rounded-full text-sm flex items-center">
140
+ <i class="fas fa-plug mr-2"></i>
141
+ <span>กำลังเชื่อมต่อกับระบบ... กรุณารอสักครู่</span>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Typing indicator -->
146
+ <div class="flex mb-4">
147
+ <div class="message-bubble bot-message p-4 relative w-auto">
148
+ <div class="typing-indicator flex items-center px-4 py-2">
149
+ <span></span>
150
+ <span></span>
151
+ <span></span>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Input area -->
158
+ <div class="bg-amber-100 p-4 border-t border-amber-200">
159
+ <div class="flex items-center">
160
+ <button class="w-10 h-10 rounded-full bg-amber-200 text-amber-700 flex items-center justify-center mr-2 hover:bg-amber-300 transition">
161
+ <i class="fas fa-plus"></i>
162
+ </button>
163
+ <div class="flex-1 relative">
164
+ <input type="text" placeholder="พิมพ์ข้อความที่นี่..." class="w-full bg-white rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-amber-300 text-amber-900">
165
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-amber-500 hover:text-amber-700">
166
+ <i class="far fa-smile text-xl"></i>
167
+ </button>
168
+ </div>
169
+ <button class="w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center ml-2 hover:bg-amber-700 transition">
170
+ <i class="fas fa-paper-plane"></i>
171
+ </button>
172
+ </div>
173
+
174
+ <div class="mt-2 flex justify-between text-xs text-amber-600">
175
+ <div>
176
+ <i class="fas fa-shield-alt mr-1"></i>
177
+ <span>การคุยของคุณปลอดภัย</span>
178
+ </div>
179
+ <div>
180
+ <span>Tour Der Wang AI Assistant</span>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="mt-6 text-center text-sm text-amber-700">
187
+ <p>© 2023 Tour Der Wang. All rights reserved.</p>
188
+ </div>
189
+
190
+ <script>
191
+ // Simulate API connection
192
+ setTimeout(() => {
193
+ const typingIndicator = document.querySelector('.typing-indicator').parentNode.parentNode;
194
+ const connectionStatus = document.querySelector('.bg-amber-100.text-amber-800');
195
+
196
+ // Remove typing indicator
197
+ typingIndicator.remove();
198
+
199
+ // Update connection status
200
+ if (connectionStatus) {
201
+ connectionStatus.innerHTML = '<i class="fas fa-check-circle mr-2 text-green-500"></i><span>เชื่อมต่อกับระบบเรียบร้อยแล้ว!</span>';
202
+ connectionStatus.classList.remove('bg-amber-100', 'text-amber-800');
203
+ connectionStatus.classList.add('bg-green-100', 'text-green-800');
204
+ }
205
+
206
+ // Add connected message
207
+ const chatArea = document.querySelector('.overflow-y-auto');
208
+ const connectedMessage = document.createElement('div');
209
+ connectedMessage.className = 'flex mb-4';
210
+ connectedMessage.innerHTML = `
211
+ <div class="message-bubble bot-message p-4 relative">
212
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
213
+ <p class="text-amber-900">ตอนนี้ฉันพร้อมให้บริการแล้วค่ะ! มีอะไรให้ช่วยเหลือไหมคะ?</p>
214
+ </div>
215
+ `;
216
+ chatArea.appendChild(connectedMessage);
217
+ chatArea.scrollTop = chatArea.scrollHeight;
218
+
219
+ // Add quick reply buttons functionality
220
+ document.querySelectorAll('.quick-reply-btn').forEach(button => {
221
+ button.addEventListener('click', function() {
222
+ const userMessage = document.createElement('div');
223
+ userMessage.className = 'flex mb-4 justify-end';
224
+ userMessage.innerHTML = `
225
+ <div class="message-bubble user-message p-4 relative">
226
+ <div class="absolute -right-2 top-0 w-4 h-4 bg-white transform -skew-x-12"></div>
227
+ <p>${this.textContent}</p>
228
+ </div>
229
+ `;
230
+ chatArea.appendChild(userMessage);
231
+ chatArea.scrollTop = chatArea.scrollHeight;
232
+
233
+ // Show typing indicator
234
+ const typing = document.createElement('div');
235
+ typing.className = 'flex mb-4';
236
+ typing.innerHTML = `
237
+ <div class="message-bubble bot-message p-4 relative w-auto">
238
+ <div class="typing-indicator flex items-center px-4 py-2">
239
+ <span></span>
240
+ <span></span>
241
+ <span></span>
242
+ </div>
243
+ </div>
244
+ `;
245
+ chatArea.appendChild(typing);
246
+ chatArea.scrollTop = chatArea.scrollHeight;
247
+
248
+ // Simulate bot response after delay
249
+ setTimeout(() => {
250
+ typing.remove();
251
+
252
+ const botResponse = document.createElement('div');
253
+ botResponse.className = 'flex mb-4';
254
+ botResponse.innerHTML = `
255
+ <div class="message-bubble bot-message p-4 relative">
256
+ <div class="absolute -left-2 top-0 w-4 h-4 bg-amber-200 transform -skew-x-12"></div>
257
+ <p class="text-amber-900">ฉันกำลังค้นหาข้อมูลเกี่ยวกับ "${this.textContent}" ให้คุณค่ะ...</p>
258
+ </div>
259
+ `;
260
+ chatArea.appendChild(botResponse);
261
+ chatArea.scrollTop = chatArea.scrollHeight;
262
+ }, 1500);
263
+ });
264
+ });
265
+ }, 3000);
266
+ </script>
267
+ <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/chat1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
268
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ai chhatbots assistant interface #FFDEAD, ที่นี่ วังสามหมอ - Tour Der Wang (ทัวร์ เดอ วังฯ), <img src="https://img5.pic.in.th/file/secure-sv1/307460108_387435583599238_6386334495691428178_n-removebg-preview.png" alt="307460108 387435583599238 6386334495691428178 n removebg preview" border="0"> <img src="https://img5.pic.in.th/file/secure-sv1/image-154ab127eb3dcc1779.jpg" alt="image (15)" border="0"> <img src="https://img2.pic.in.th/pic/image-19f4bb7a9e083dc11a.jpg" alt="image (19)" border="0">, wait connect APIs