Hugging Face's logo

Spaces:
leolaish
/
HuggingFaceH4-zephyr-7b-beta
Running

App Files Community
leolaish commited on
Commit
5a1b6f1
·
verified ·
1 Parent(s): 8ea6585

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +181 -18
index.html CHANGED
@@ -1,24 +1,187 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Hugging Face Chatbot</title>
7
- <link rel="stylesheet" href="style.css">
8
- </head>
9
- <body>
10
- <div class="container">
11
- <div class="chat-window">
12
- <div class="messages">
13
- <!-- Chat messages will be displayed here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  </div>
15
- <div class="input-container">
16
- <input type="text" id="user-input" placeholder="Type your message..." autocomplete="off">
17
- <button id="send-button">Send</button>
 
 
 
18
  </div>
19
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  </div>
21
-
22
- <script src="script.js"></script>
23
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>Smart Home Chat Interface</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ height: 100vh;
12
+ margin: 0;
13
+ }
14
+
15
+ #chat-container {
16
+ width: 360px;
17
+ box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
18
+ border-radius: 8px;
19
+ overflow: hidden;
20
+ }
21
+
22
+ #chat-header {
23
+ background-color: #3498db;
24
+ color: #fff;
25
+ padding: 16px;
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ }
30
+
31
+ #chat-header h2 {
32
+ margin: 0;
33
+ }
34
+
35
+ #chat-body {
36
+ height: 400px;
37
+ overflow-y: scroll;
38
+ padding: 16px;
39
+ background-color: #f2f2f2;
40
+ }
41
+
42
+ .message {
43
+ display: flex;
44
+ margin-bottom: 12px;
45
+ }
46
+
47
+ .message.sent {
48
+ justify-content: flex-end;
49
+ }
50
+
51
+ .message-content {
52
+ max-width: 70%;
53
+ padding: 12px;
54
+ border-radius: 8px;
55
+ background-color: #fff;
56
+ }
57
+
58
+ .message.received .message-content {
59
+ margin-right: 8px;
60
+ }
61
+
62
+ .message.sent .message-content {
63
+ margin-left: 8px;
64
+ background-color: #3498db;
65
+ color: #fff;
66
+ }
67
+
68
+ #chat-footer {
69
+ display: flex;
70
+ padding: 16px;
71
+ background-color: #fff;
72
+ }
73
+
74
+ #message-input {
75
+ flex: 1;
76
+ padding: 12px;
77
+ border: 1px solid #ccc;
78
+ border-right: none;
79
+ resize: none;
80
+ }
81
+
82
+ #send-button {
83
+ padding: 12px;
84
+ background-color: #3498db;
85
+ color: #fff;
86
+ border: none;
87
+ cursor: pointer;
88
+ }
89
+
90
+ #controls {
91
+ margin-top: 20px;
92
+ text-align: center;
93
+ }
94
+
95
+ .control-item {
96
+ display: inline-block;
97
+ margin: 0 20px;
98
+ }
99
+
100
+ .control-button {
101
+ padding: 10px 20px;
102
+ background-color: #eee;
103
+ border: none;
104
+ cursor: pointer;
105
+ }
106
+
107
+ .control-button:hover {
108
+ background-color: #ddd;
109
+ }
110
+ </style>
111
+ </head>
112
+ <body>
113
+ <div id="chat-container">
114
+ <div id="chat-header">
115
+ <h2>Smart Home Chat</h2>
116
+ <button id="settings-button">Settings</button>
117
  </div>
118
+ <div id="chat-body" ref="chatBody">
119
+ <div class="message received">
120
+ <div class="message-content">
121
+ Hello! I'm your smart home assistant. How can I help you today?
122
+ </div>
123
+ </div>
124
  </div>
125
+ <div id="chat-footer">
126
+ <textarea id="message-input" placeholder="Type your message..." rows="1"></textarea>
127
+ <button id="send-button">Send</button>
128
+ </div>
129
+ </div>
130
+
131
+ <div id="controls">
132
+ <div class="control-item">
133
+ <button class="control-button" onclick="adjustTemperature(-1)">-</button>
134
+ </div>
135
+ <div class="control-item">
136
+ <p>Temperature: <span id="temperature">22</span>°C</p>
137
+ </div>
138
+ <div class="control-item">
139
+ <button class="control-button" onclick="adjustTemperature(1)">+</button>
140
+ </div>
141
+ <!-- Add more control items here -->
142
  </div>
143
+
144
+ <script>
145
+ const chatBody = document.getElementById('chat-body');
146
+ const messageInput = document.getElementById('message-input');
147
+ const sendButton = document.getElementById('send-button');
148
+ const temperatureDisplay = document.getElementById('temperature');
149
+ let temperature = 22; // Initial temperature
150
+
151
+ sendButton.addEventListener('click', () => {
152
+ const message = messageInput.value.trim();
153
+ if (message) {
154
+ displayMessage('sent', message);
155
+ messageInput.value = '';
156
+ }
157
+ });
158
+
159
+ messageInput.addEventListener('keydown', (event) => {
160
+ if (event.key === 'Enter') {
161
+ sendButton.click();
162
+ }
163
+ });
164
+
165
+ function displayMessage(type, content) {
166
+ const messageElement = document.createElement('div');
167
+ messageElement.classList.add('message', type);
168
+ const messageContent = document.createElement('div');
169
+ messageContent.classList.add('message-content');
170
+ messageContent.innerText = content;
171
+ messageElement.appendChild(messageContent);
172
+ chatBody.appendChild(messageElement);
173
+ chatBody.scrollTop = chatBody.scrollHeight;
174
+ }
175
+
176
+ function adjustTemperature(amount) {
177
+ temperature += amount;
178
+ temperatureDisplay.innerText = temperature;
179
+ }
180
+
181
+ // Simulate receiving a message
182
+ setTimeout(() => {
183
+ displayMessage('received', 'The temperature has been adjusted to ' + temperature + '°C.');
184
+ }, 2000);
185
+ </script>
186
+ </body>
187
  </html>