Hugging Face's logo

Spaces:
manhteky123
/
VN_law_chat
Running

App Files Community
manhteky123 commited on
Commit
22e955c
•
1 Parent(s): a0f39d7

Upload 2 files

Browse files
Files changed (2) hide show
  1. static/css/style.css +14 -0
  2. templates/index.html +113 -0
static/css/style.css ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .chat-container {
2
+ max-width: 600px;
3
+ margin: 50px auto;
4
+ }
5
+
6
+ .chat-box {
7
+ height: 400px;
8
+ overflow-y: scroll;
9
+ border: 1px solid #ccc;
10
+ padding: 10px;
11
+ }
12
+ .chat-input {
13
+ margin-top: 10px;
14
+ }
templates/index.html ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Vietnamese Law Chatbot</title>
8
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
9
+ <style>
10
+ .chat-container {
11
+ max-width: 600px;
12
+ margin: 50px auto;
13
+ }
14
+ .chat-box {
15
+ height: 400px;
16
+ overflow-y: scroll;
17
+ border: 1px solid #ccc;
18
+ padding: 10px;
19
+ }
20
+ .chat-input {
21
+ margin-top: 10px;
22
+ }
23
+ .loading {
24
+ display: inline-block;
25
+ width: 80px;
26
+ height: 20px;
27
+ text-align: center;
28
+ }
29
+ .loading span {
30
+ display: inline-block;
31
+ width: 8px;
32
+ height: 8px;
33
+ margin: 2px;
34
+ background-color: #333;
35
+ border-radius: 100%;
36
+ animation: loading 1.4s infinite ease-in-out both;
37
+ }
38
+ .loading span:nth-child(1) {
39
+ animation-delay: -0.32s;
40
+ }
41
+ .loading span:nth-child(2) {
42
+ animation-delay: -0.16s;
43
+ }
44
+ @keyframes loading {
45
+ 0%, 80%, 100% {
46
+ transform: scale(0);
47
+ }
48
+ 40% {
49
+ transform: scale(1);
50
+ }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <div class="container chat-container">
56
+ <h2 class="text-center">Vietnamese Law Chatbot</h2>
57
+ <div class="chat-box" id="chat-box"></div>
58
+ <div class="input-group chat-input">
59
+ <input type="text" id="user-input" class="form-control" placeholder="Ask a question...">
60
+ <div class="input-group-append">
61
+ <button class="btn btn-primary" id="send-btn">Send</button>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
67
+ <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
68
+ <script>
69
+ $(document).ready(function() {
70
+ var md = window.markdownit();
71
+
72
+ $('#send-btn').click(function() {
73
+ var userInput = $('#user-input').val();
74
+ if (userInput.trim() !== '') {
75
+ $('#chat-box').append('<div><strong>You:</strong> ' + userInput + '</div>');
76
+ $('#user-input').val('');
77
+
78
+ var loadingIndicator = '<div id="loading-indicator" class="loading"><span></span><span></span><span></span></div>';
79
+ $('#chat-box').append('<div><strong>VNLawBot:</strong> ' + loadingIndicator + '</div>');
80
+ $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
81
+
82
+ $.ajax({
83
+ url: '/retrieve',
84
+ method: 'POST',
85
+ contentType: 'application/json',
86
+ data: JSON.stringify({ query: userInput }),
87
+ success: function(retrieveResponse) {
88
+ var retrievedData = retrieveResponse.join('<br>');
89
+ $.ajax({
90
+ url: '/generate',
91
+ method: 'POST',
92
+ contentType: 'application/json',
93
+ data: JSON.stringify({ context: userInput, retrieved_data: retrievedData }),
94
+ success: function(generateResponse) {
95
+ var renderedMarkdown = md.render(generateResponse);
96
+ $('#loading-indicator').parent().html('<strong>VNLawBot:</strong> ' + renderedMarkdown);
97
+ $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
98
+ }
99
+ });
100
+ }
101
+ });
102
+ }
103
+ });
104
+
105
+ $('#user-input').keypress(function(e) {
106
+ if (e.which == 13) {
107
+ $('#send-btn').click();
108
+ }
109
+ });
110
+ });
111
+ </script>
112
+ </body>
113
+ </html>