Hugging Face's logo

Spaces:
msn-enginenova21
/
custombot_demo
Runtime error

App Files Community
msn-enginenova21 commited on
Commit
8ef541c
·
1 Parent(s): 11e4610

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +153 -117
templates/index.html CHANGED
@@ -1,125 +1,161 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <style>
5
- form {
6
- background-image: url("img_tree.png");
7
- background-repeat: no-repeat;
8
- background-position: 90% 40%;
9
- margin-right: 10px;
10
- }
11
-
12
- fieldset {
13
- font-size: 12px;
14
- padding: 100px;
15
- max-width: 900px; /* Set max width to control the form width */
16
- margin: auto; /* Center the form */
17
- }
18
-
19
- legend {
20
- background-color: #fff;
21
- color: #000;
22
- padding: 0.5px;
23
- }
24
-
25
- select {
26
- padding: 1px;
27
- font-size: 16px;
28
- border-radius: 5px;
29
- border: 1px solid #ccc;
30
- width: 10%; /* Make the select box full width */
31
- }
32
-
33
- input[type="submit"] {
34
- padding: 10px 20px;
35
- font-size: 16px;
36
- border-radius: 5px;
37
- border: none;
38
- background-color: #76D7C8;
39
- color: black;
40
- cursor: pointer;
41
- transition: background-color 0.3s;
42
- }
43
-
44
- input[type="submit"]:hover {
45
- background-color: #808081; /* Darken the background on hover */
46
- }
47
-
48
- textarea {
49
- font-size: 1rem;
50
- letter-spacing: 1px;
51
- padding: 10px;
52
- max-width: 80%;
53
-
54
- width: 100%; /* Make the textarea full width */
55
-
56
- min-height: 10px;
57
-
58
- line-height: 1.5;
59
- border-radius: 20px;
60
- border: 5px solid #ccc;
61
- box-shadow: 10px 10px 10px #999;
62
- margin-bottom: 10px; /* Add some space between textarea and button */
63
- }
64
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  </head>
66
 
67
  <body>
68
- <form action="{{url_for('predict')}}" method="Post" onsubmit="clearTextArea(event)">
69
- <fieldset>
70
- <legend><h2 style="font-size: 20px;">Custom Chatbot Demo </h2></legend>
71
-
72
- <strong><p style="font-family: 'Fantasy', monospace; font-size: 20px; color: grey;">demo NLP chatbot models trained for few conversation </p></strong>
73
- <strong><b>let's start with "hello" or "help"<b></strong>
74
- <br>
75
- <br>
76
- <textarea id="textarea" name="textarea" required='required'></textarea>
77
- <br>
78
- <input type="submit" value="Enter" id="submit-button"> <br><br>
79
-
80
- <div id="messages"></div>
81
- </fieldset>
82
- </form>
83
-
84
- <script>
85
- document.getElementById("textarea").addEventListener("keydown", function(event) {
86
- if (event.key === "Enter" && !event.shiftKey) {
87
- event.preventDefault(); // Prevent the default "Enter" behavior (new line)
88
- document.getElementById("submit-button").click(); // Trigger the submit button click
89
- }
90
- });
91
-
92
- function clearTextArea(event) {
93
- event.preventDefault(); // Prevent the form from submitting the traditional way
94
-
95
- var textarea = document.getElementById("textarea");
96
- var userMessage = "user: " + textarea.value;
97
-
98
- // Make a request to your server to get the bot's response
99
- fetch("{{url_for('predict')}}", {
100
- method: "POST",
101
- body: new FormData(event.target)
102
- })
103
- .then(response => response.text())
104
- .then(data => {
105
- var botMessage = "bot: " + data;
106
- displayMessages(userMessage, botMessage);
107
- textarea.value = ""; // Clear the textarea
108
- })
109
- .catch(error => console.error("Error:", error));
110
- }
111
-
112
- function displayMessages(userMessage, botMessage) {
113
- var messagesDiv = document.getElementById("messages");
114
-
115
- var userDiv = document.createElement("div");
116
- userDiv.innerHTML = "<h3>" + userMessage + "</h3>";
117
- messagesDiv.appendChild(userDiv);
118
-
119
- var botDiv = document.createElement("div");
120
- botDiv.innerHTML = "<h3>" + botMessage + "</h3>";
121
- messagesDiv.appendChild(botDiv);
122
- }
123
- </script>
 
 
 
 
124
  </body>
125
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <style>
5
+ form {
6
+ background-image: url("img_tree.png");
7
+ background-repeat: no-repeat;
8
+ background-position: 90% 40%;
9
+ margin-right: 10px;
10
+ }
11
+
12
+ fieldset {
13
+ font-size: 12px;
14
+ max-width: 900px; /* Set max width to control the form width */
15
+ margin: auto; /* Center the form */
16
+ }
17
+
18
+ legend {
19
+ background-color: #fff;
20
+ color: #000;
21
+ padding: 0.5px;
22
+ }
23
+
24
+ select {
25
+ padding: 1px;
26
+ font-size: 16px;
27
+ border-radius: 5px;
28
+ border: 1px solid #ccc;
29
+ width: 10%; /* Make the select box full width */
30
+ }
31
+
32
+ input[type="submit"] {
33
+ padding: 10px 20px;
34
+ font-size: 16px;
35
+ border-radius: 5px;
36
+ border: none;
37
+ background-color: #76D7C8;
38
+ color: black;
39
+ cursor: pointer;
40
+ transition: background-color 0.3s;
41
+ }
42
+
43
+ input[type="submit"]:hover {
44
+ background-color: #808081; /* Darken the background on hover */
45
+ }
46
+
47
+ textarea {
48
+ font-size: 1rem;
49
+ letter-spacing: 1px;
50
+ padding: 10px;
51
+ max-width: 80%;
52
+
53
+ width: 100%; /* Make the textarea full width */
54
+
55
+ min-height: 10px;
56
+
57
+ line-height: 1.5;
58
+ border-radius: 20px;
59
+ border: 5px solid #ccc;
60
+ box-shadow: 10px 10px 10px #999;
61
+ margin-bottom: 10px; /* Add some space between textarea and button */
62
+ }
63
+
64
+ /* Add new CSS for message display */
65
+ .messages {
66
+ max-height: 200px;
67
+ overflow-y: auto;
68
+ border: 1px solid #ccc;
69
+ padding: 10px;
70
+ background-color: #f9f9f9;
71
+ margin-bottom: 10px;
72
+ }
73
+
74
+ .message {
75
+ margin-bottom: 10px;
76
+ }
77
+
78
+ .user-message {
79
+ background-color: #fff;
80
+ padding: 5px 10px;
81
+ border-radius: 10px;
82
+ border: 1px solid #ccc;
83
+ margin-right: 50%;
84
+ word-wrap: break-word;
85
+ }
86
+
87
+ .bot-message {
88
+ background-color: #76D7C8;
89
+ color: black;
90
+ padding: 5px 10px;
91
+ border-radius: 10px;
92
+ border: 1px solid #ccc;
93
+ margin-left: 50%;
94
+ word-wrap: break-word;
95
+ }
96
+ </style>
97
  </head>
98
 
99
  <body>
100
+ <form action="{{url_for('predict')}}" method="Post" onsubmit="clearTextArea(event)">
101
+ <fieldset>
102
+ <legend><h2 style="font-size: 20px;">Custom Chatbot Demo </h2></legend>
103
+
104
+ <strong><p style="font-family: 'Fantasy', monospace; font-size: 20px; color: grey;">demo NLP chatbot models trained for few conversation </p></strong>
105
+ <strong><b>let's start with "hello" or "help"<b></strong>
106
+ <br>
107
+ <br>
108
+ <div class="messages" id="messages"></div>
109
+ <textarea id="textarea" name="textarea" required='required'></textarea>
110
+ <br>
111
+ <input type="submit" value="Enter" id="submit-button"> <br><br>
112
+ </fieldset>
113
+ </form>
114
+
115
+ <script>
116
+ document.getElementById("textarea").addEventListener("keydown", function(event) {
117
+ if (event.key === "Enter" && !event.shiftKey) {
118
+ event.preventDefault(); // Prevent the default "Enter" behavior (new line)
119
+ document.getElementById("submit-button").click(); // Trigger the submit button click
120
+ }
121
+ });
122
+
123
+ function clearTextArea(event) {
124
+ event.preventDefault(); // Prevent the form from submitting the traditional way
125
+
126
+ var textarea = document.getElementById("textarea");
127
+ var userMessage = "user: " + textarea.value;
128
+
129
+ // Make a request to your server to get the bot's response
130
+ fetch("{{url_for('predict')}}", {
131
+ method: "POST",
132
+ body: new FormData(event.target)
133
+ })
134
+ .then(response => response.text())
135
+ .then(data => {
136
+ var botMessage = "bot: " + data;
137
+ displayMessages(userMessage, botMessage);
138
+ textarea.value = ""; // Clear the textarea
139
+ })
140
+ .catch(error => console.error("Error:", error));
141
+ }
142
+
143
+ function displayMessages(userMessage, botMessage) {
144
+ var messagesDiv = document.getElementById("messages");
145
+
146
+ var userDiv = document.createElement("div");
147
+ userDiv.classList.add("message");
148
+ userDiv.innerHTML = "<div class='user-message'>" + userMessage + "</div>";
149
+ messagesDiv.appendChild(userDiv);
150
+
151
+ var botDiv = document.createElement("div");
152
+ botDiv.classList.add("message");
153
+ botDiv.innerHTML = "<div class='bot-message'>" + botMessage + "</div>";
154
+ messagesDiv.appendChild(botDiv);
155
+
156
+ // Scroll to the bottom of the messages div
157
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
158
+ }
159
+ </script>
160
  </body>
161
  </html>