Hugging Face's logo

Spaces:
Ikyy
/
chatb
Running

App Files Community
Ikyy commited on
Commit
5a3db39
·
verified ·
1 Parent(s): e711f7b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +179 -19
index.html CHANGED
@@ -1,19 +1,179 @@
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>Chatbot Animasi</title>
7
+ <style>
8
+ :root {
9
+ --primary-color: #2196F3;
10
+ --secondary-color: #ffffff;
11
+ }
12
+
13
+ body {
14
+ font-family: Arial, sans-serif;
15
+ margin: 0;
16
+ padding: 0;
17
+ display: flex;
18
+ justify-content: center;
19
+ align-items: center;
20
+ min-height: 100vh;
21
+ background-color: #f0f0f0;
22
+ }
23
+
24
+ .chat-container {
25
+ width: 90%;
26
+ max-width: 400px;
27
+ background: white;
28
+ border-radius: 20px;
29
+ box-shadow: 0 0 20px rgba(0,0,0,0.1);
30
+ overflow: hidden;
31
+ transform: translateY(20px);
32
+ opacity: 0;
33
+ animation: slideUp 0.5s ease forwards;
34
+ }
35
+
36
+ .chat-header {
37
+ background: var(--primary-color);
38
+ color: white;
39
+ padding: 1rem;
40
+ text-align: center;
41
+ }
42
+
43
+ .chat-messages {
44
+ height: 400px;
45
+ overflow-y: auto;
46
+ padding: 1rem;
47
+ display: flex;
48
+ flex-direction: column;
49
+ gap: 10px;
50
+ }
51
+
52
+ .message {
53
+ max-width: 80%;
54
+ padding: 10px 15px;
55
+ border-radius: 15px;
56
+ animation: fadeIn 0.3s ease;
57
+ }
58
+
59
+ .user-message {
60
+ background: var(--primary-color);
61
+ color: white;
62
+ align-self: flex-end;
63
+ }
64
+
65
+ .bot-message {
66
+ background: #e0e0e0;
67
+ align-self: flex-start;
68
+ }
69
+
70
+ .input-container {
71
+ display: flex;
72
+ padding: 1rem;
73
+ background: #f5f5f5;
74
+ }
75
+
76
+ input[type="text"] {
77
+ flex: 1;
78
+ padding: 10px;
79
+ border: 1px solid #ddd;
80
+ border-radius: 25px;
81
+ margin-right: 10px;
82
+ outline: none;
83
+ }
84
+
85
+ button {
86
+ background: var(--primary-color);
87
+ color: white;
88
+ border: none;
89
+ padding: 10px 20px;
90
+ border-radius: 25px;
91
+ cursor: pointer;
92
+ transition: transform 0.2s ease;
93
+ }
94
+
95
+ button:hover {
96
+ transform: scale(1.05);
97
+ }
98
+
99
+ @keyframes slideUp {
100
+ to {
101
+ transform: translateY(0);
102
+ opacity: 1;
103
+ }
104
+ }
105
+
106
+ @keyframes fadeIn {
107
+ from {
108
+ opacity: 0;
109
+ transform: translateY(10px);
110
+ }
111
+ to {
112
+ opacity: 1;
113
+ transform: translateY(0);
114
+ }
115
+ }
116
+
117
+ @media (max-width: 480px) {
118
+ .chat-container {
119
+ width: 100%;
120
+ height: 100vh;
121
+ border-radius: 0;
122
+ }
123
+ }
124
+ </style>
125
+ </head>
126
+ <body>
127
+ <div class="chat-container">
128
+ <div class="chat-header">
129
+ <h2>Chatbot Pintar</h2>
130
+ </div>
131
+ <div class="chat-messages" id="chatMessages"></div>
132
+ <div class="input-container">
133
+ <input type="text" id="userInput" placeholder="Ketik pesan...">
134
+ <button onclick="sendMessage()">Kirim</button>
135
+ </div>
136
+ </div>
137
+
138
+ <script>
139
+ const chatMessages = document.getElementById('chatMessages');
140
+ const userInput = document.getElementById('userInput');
141
+
142
+ // Handle Enter key
143
+ userInput.addEventListener('keypress', (e) => {
144
+ if (e.key === 'Enter') sendMessage();
145
+ });
146
+
147
+ function appendMessage(message, isUser) {
148
+ const messageDiv = document.createElement('div');
149
+ messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
150
+ messageDiv.textContent = message;
151
+ chatMessages.appendChild(messageDiv);
152
+ chatMessages.scrollTop = chatMessages.scrollHeight;
153
+ }
154
+
155
+ async function sendMessage() {
156
+ const message = userInput.value.trim();
157
+ if (!message) return;
158
+
159
+ appendMessage(message, true);
160
+ userInput.value = '';
161
+
162
+ try {
163
+ const response = await fetch('http://localhost:3000/chat', {
164
+ method: 'POST',
165
+ headers: {
166
+ 'Content-Type': 'application/json',
167
+ },
168
+ body: JSON.stringify({ message })
169
+ });
170
+
171
+ const data = await response.json();
172
+ appendMessage(data.reply, false);
173
+ } catch (error) {
174
+ appendMessage('Maaf, terjadi kesalahan koneksi', false);
175
+ }
176
+ }
177
+ </script>
178
+ </body>
179
+ </html>