Hugging Face's logo

Ramakrushna
/
chatbot

Model card Files Community
Ramakrushna commited on
Commit
9ae74e7
·
1 Parent(s): 6a413de

Upload 3 files

Browse files
Files changed (3) hide show
  1. css.css +0 -0
  2. index.html +61 -0
  3. style.css +167 -0
css.css ADDED
The diff for this file is too large to render. See raw diff
 
index.html ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}" />
6
+ <!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css.css')}}" /> -->
7
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8
+ </head>
9
+
10
+ <body>
11
+ <div class="row">
12
+ <div class="col-md-10 mr-auto ml-auto">
13
+ <h1>Ramakrushna Mohapatra-ChatBot</h1>
14
+ <form>
15
+ <div id="chatbox">
16
+ <div class="col-md-8 ml-auto mr-auto text-center">
17
+ <p class="botText"><span>Hi! I'm Your bot.</span></p>
18
+ </div>
19
+ </div>
20
+ <div id="userInput" class="row">
21
+ <div class="col-md-10">
22
+ <input id="text" type="text" name="msg" placeholder="Message" class="form-control">
23
+ <button type="submit" id="send" class="btn btn-warning">Send</button>
24
+ </div>
25
+ </div>
26
+ </form>
27
+ </div>
28
+ </div>
29
+
30
+ <script>
31
+ $(document).ready(function() {
32
+ $("form").on("submit", function(event) {
33
+ var rawText = $("#text").val();
34
+ var userHtml = '<p class="userText"><span>' + rawText + "</span></p>";
35
+ $("#text").val("");
36
+ $("#chatbox").append(userHtml);
37
+ document.getElementById("userInput").scrollIntoView({
38
+ block: "start",
39
+ behavior: "smooth",
40
+ });
41
+ $.ajax({
42
+ data: {
43
+ msg: rawText,
44
+ },
45
+ type: "POST",
46
+ url: "/get",
47
+ }).done(function(data) {
48
+ var botHtml = '<p class="botText"><span>' + data + "</span></p>";
49
+ $("#chatbox").append($.parseHTML(botHtml));
50
+ document.getElementById("userInput").scrollIntoView({
51
+ block: "start",
52
+ behavior: "smooth",
53
+ });
54
+ });
55
+ event.preventDefault();
56
+ });
57
+ });
58
+ </script>
59
+ </body>
60
+
61
+ </html>
style.css ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Garamond;
3
+ }
4
+
5
+ h1 {
6
+ color: black;
7
+ margin-bottom: 0;
8
+ margin-top: 0;
9
+ text-align: center;
10
+ font-size: 40px;
11
+ }
12
+
13
+ h3 {
14
+ color: black;
15
+ font-size: 20px;
16
+ margin-top: 3px;
17
+ text-align: center;
18
+ }
19
+ .row {
20
+ display: flex;
21
+ flex-wrap: wrap;
22
+ margin-right: -15px;
23
+ margin-left: -15px;
24
+ }
25
+
26
+ .ml-auto{
27
+ margin-left:auto !important;
28
+ }
29
+ .mr-auto{
30
+ margin-right:auto !important;
31
+ }
32
+
33
+ .col-md-10,.col-md-8,.col-md-4{
34
+ position: relative;
35
+ width: 100%;
36
+ min-height: 1px;
37
+ padding-right: 15px;
38
+ padding-left: 15px;
39
+ }
40
+ .col-md-8{flex:0 0 66.666667%;max-width:66.666667%}
41
+ .col-md-4{flex:0 0 33.333333%;max-width:33.333333%}
42
+ .col-md-10{flex:0 0 83.333333%;max-width:83.333333%}
43
+
44
+ .form-control {
45
+ background: no-repeat bottom,50% calc(100% - 1px);
46
+ background-image: none, none;
47
+ background-size: auto, auto;
48
+ background-size: 0 100%,100% 100%;
49
+ border: 0;
50
+ height: 36px;
51
+ transition: background 0s ease-out;
52
+ padding-left: 0;
53
+ padding-right: 0;
54
+ border-radius: 0;
55
+ font-size: 14px;
56
+ }
57
+ .form-control {
58
+ display: block;
59
+ width: 100%;
60
+ padding: .4375rem 0;
61
+ padding-right: 0px;
62
+ padding-left: 0px;
63
+ font-size: 1rem;
64
+ line-height: 1.5;
65
+ color: #495057;
66
+ border:none;
67
+ background-color: transparent;
68
+ background-clip: padding-box;
69
+ border-bottom: 1px solid #d2d2d2;
70
+ box-shadow: none;
71
+ transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
72
+ }
73
+ .btn {
74
+ float: left;
75
+ text-align: center;
76
+ white-space: nowrap;
77
+ vertical-align: middle;
78
+ user-select: none;
79
+ border: 1px solid transparent;
80
+ padding: .46875rem 1rem;
81
+ font-size: 1rem;
82
+ line-height: 1.5;
83
+ border-radius: .25rem;
84
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
85
+ }
86
+ .btn-warning {
87
+ color: #fff;
88
+ background-color: #f08f00;
89
+ border-color: #c27400;
90
+ }
91
+ .btn.btn-warning:active, .btn.btn-warning:focus, .btn.btn-warning:hover {
92
+ box-shadow: 0 14px 26px -12px rgba(255,152,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(255,152,0,.2);
93
+ }
94
+
95
+ button, input, optgroup, select, textarea {
96
+ margin: 0;
97
+ font-family: inherit;
98
+ font-size: inherit;
99
+ line-height: inherit;
100
+ overflow:visible;
101
+ }
102
+ #chatbox {
103
+ background-color: cyan;
104
+ margin-left: auto;
105
+ margin-right: auto;
106
+ width: 80%;
107
+ min-height: 70px;
108
+ margin-top: 60px;
109
+ }
110
+
111
+ #userInput {
112
+ margin-left: auto;
113
+ margin-right: auto;
114
+ width: 40%;
115
+ margin-top: 60px;
116
+ }
117
+
118
+ #textInput {
119
+ width: 87%;
120
+ border: none;
121
+ border-bottom: 3px solid #009688;
122
+ font-family: monospace;
123
+ font-size: 17px;
124
+ }
125
+
126
+ #buttonInput {
127
+ padding: 3px;
128
+ font-family: monospace;
129
+ font-size: 17px;
130
+ }
131
+
132
+ .userText {
133
+ color: white;
134
+ font-family: monospace;
135
+ font-size: 17px;
136
+ text-align: right !important;
137
+ line-height: 30px;
138
+ margin: 5px;
139
+ }
140
+
141
+ .userText span {
142
+ background-color: #009688;
143
+ padding: 10px;
144
+ border-radius: 2px;
145
+ }
146
+
147
+ .botText {
148
+ color: white;
149
+ font-family: monospace;
150
+ font-size: 17px;
151
+ text-align: left;
152
+ line-height: 30px;
153
+ margin: 5px;
154
+ }
155
+
156
+ .botText span {
157
+ background-color: #ef5350;
158
+ padding: 10px;
159
+ border-radius: 2px;
160
+ }
161
+
162
+ #tidbit {
163
+ position: absolute;
164
+ bottom: 0;
165
+ right: 0;
166
+ width: 300px;
167
+ }