oscarwang2 commited on
Commit
b92daf5
1 Parent(s): 8543485

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +99 -17
index.html CHANGED
@@ -1,19 +1,101 @@
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>
3
+ <head>
4
+ <title>Chatbot</title>
5
+ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
7
+ <style>
8
+ #chatbot {
9
+ position: fixed;
10
+ bottom: 0;
11
+ right: 0;
12
+ width: 300px;
13
+ height: 400px;
14
+ background-color: white;
15
+ border: 1px solid black;
16
+ border-radius: 10px 0 0 0;
17
+ overflow: hidden;
18
+ }
19
+ #chatbot .header {
20
+ background-color: #007bff;
21
+ color: white;
22
+ padding: 10px;
23
+ font-size: 20px;
24
+ font-weight: bold;
25
+ text-align: center;
26
+ }
27
+ #chatbot .messages {
28
+ height: 300px;
29
+ overflow-y: scroll;
30
+ padding: 10px;
31
+ }
32
+ #chatbot .input {
33
+ display: flex;
34
+ justify-content: space-between;
35
+ align-items: center;
36
+ padding: 10px;
37
+ }
38
+ #chatbot .input input {
39
+ flex: 1;
40
+ margin-right: 10px;
41
+ }
42
+ #chatbot .input button {
43
+ background-color: #007bff;
44
+ color: white;
45
+ border: none;
46
+ border-radius: 5px;
47
+ padding: 5px 10px;
48
+ cursor: pointer;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body>
53
+ <div id="chatbot">
54
+ <div class="header">Chatbot</div>
55
+ <div class="messages">
56
+ <div v-for="message in messages" :key="message.id">
57
+ <div v-if="message.type === 'bot'" style="font-weight: bold;">{{ message.text }}</div>
58
+ <div v-else>{{ message.text }}</div>
59
+ </div>
60
+ </div>
61
+ <div class="input">
62
+ <input type="text" v-model="input" @keyup.enter="sendMessage" />
63
+ <button @click="sendMessage">Send</button>
64
+ </div>
65
+ </div>
66
+ <script>
67
+ new Vue({
68
+ el: '#chatbot',
69
+ data: {
70
+ messages: [],
71
+ input: '',
72
+ },
73
+ methods: {
74
+ sendMessage() {
75
+ if (this.input.trim() === '') {
76
+ return;
77
+ }
78
+ this.messages.push({
79
+ id: Date.now(),
80
+ type: 'user',
81
+ text: this.input,
82
+ });
83
+ axios
84
+ .post('/api/chatbot', { message: this.input })
85
+ .then((response) => {
86
+ this.messages.push({
87
+ id: Date.now(),
88
+ type: 'bot',
89
+ text: response.data.message,
90
+ });
91
+ })
92
+ .catch((error) => {
93
+ console.error(error);
94
+ });
95
+ this.input = '';
96
+ },
97
+ },
98
+ });
99
+ </script>
100
+ </body>
101
+ </html>