Hugging Face's logo

Spaces:
WebashalarForML
/
RAG_AI_V2
Running

App Files Community
WebashalarForML commited on
Commit
299b861
·
verified ·
1 Parent(s): 887218e

Update templates/chat.html

Browse files
Files changed (1) hide show
  1. templates/chat.html +151 -151
templates/chat.html CHANGED
@@ -1,152 +1,152 @@
1
- {% extends 'base.html' %}
2
-
3
- {% block content %}
4
-
5
- <style>
6
- /* Ensure full-page setup */
7
- html, body {
8
- height: 100%;
9
- margin: 0;
10
- padding: 0;
11
- }
12
-
13
- .container {
14
- display: flex;
15
- height: 50vh; /* Locks the height of the containers */
16
- margin-top: 50px;
17
- }
18
-
19
- /* Styling for left and right panes */
20
- .card {
21
- height: 100%; /* Ensures cards fill the container height */
22
- overflow: hidden; /* Prevents overflow of content */
23
- }
24
-
25
- .row {
26
- height: 100%; /* Ensures the row fills the container */
27
- margin: auto;
28
- }
29
-
30
- .col-md-5 {
31
- display: flex;
32
- flex-direction: column;
33
- gap: 20px; /* Adds space between left and right containers */
34
- max-height: 100%;
35
- }
36
-
37
- .card-body {
38
- display: flex;
39
- flex-direction: column;
40
- height: auto; /* Occupies full height of the card */
41
- }
42
-
43
- /* Scrollable left pane's history section */
44
- .history-section {
45
- overflow-y: auto; /* Adds vertical scrolling */
46
- flex: 1; /* Ensures this section takes up remaining space */
47
- overflow-x: hidden;
48
- }
49
-
50
- /* Scrollbar customization */
51
- .history-section::-webkit-scrollbar {
52
- width: 8px;
53
- }
54
-
55
- .history-section::-webkit-scrollbar-thumb {
56
- background-color: #888;
57
- border-radius: 4px;
58
- }
59
-
60
- .history-section::-webkit-scrollbar-thumb:hover {
61
- background-color: #555;
62
- }
63
-
64
- .history-section::-webkit-scrollbar-track {
65
- background-color: #f1f1f1;
66
- }
67
-
68
- /* Space between left and right columns */
69
- .row > .col-md-5:not(:last-child) {
70
- margin-right: 20px; /* Adds space between left and right pane */
71
- }
72
-
73
- /* Form input and button adjustments */
74
- .form-group input {
75
- border-radius: 4px;
76
- }
77
-
78
- .btn-primary {
79
- background-color: #007bff;
80
- border-color: #007bff;
81
- }
82
-
83
- .btn-primary:hover {
84
- background-color: #0056b3;
85
- border-color: #0056b3;
86
- }
87
-
88
- /* Scrollable left section for queries */
89
- .answer-section {
90
- background: #2c2c3e;
91
- padding: 10px;
92
- border-radius: 4px;
93
- border: 1px solid #2c2c3e;
94
- }
95
- </style>
96
-
97
- <div class="container">
98
- <div class="row justify-content-center">
99
- <!-- Left Pane -->
100
- <div class="col-md-5">
101
- <div class="card">
102
- <div class="card-body">
103
- <h5 class="card-title">Document AI</h5>
104
- <p class="card-text">Enter a query and get an answer based on the stored context.</p>
105
-
106
- <form method="POST" action="{{ url_for('chat') }}">
107
- <div class="form-group">
108
- <input type="text" name="query_text" placeholder="Enter your query" value="{{ query_text }}"
109
- required class="form-control">
110
- </div>
111
- <div class="form-group mt-2">
112
- <button type="submit" class="btn btn-primary">Submit</button>
113
- </div>
114
- </form>
115
-
116
- {% if answer %}
117
- <div class="answer-section mt-3">
118
- <h6>Answer:</h6>
119
- <div class="answer">{{ answer }}</div>
120
- </div>
121
- {% endif %}
122
- </div>
123
- </div>
124
- </div>
125
-
126
- <!-- Right Pane -->
127
- <div class="col-md-5">
128
- <div class="card">
129
- <div class="card-body">
130
- <h5 class="card-title">Previous Queries</h5>
131
- <div class="history-section">
132
- {% for question, answer in history %}
133
- <div class="card mb-3">
134
- <div class="card-body">
135
- <div class="question">
136
- <strong>Query:</strong> {{ question }}
137
- </div>
138
- <hr>
139
- <div class="answer mt-2">
140
- <strong>Answer:</strong> {{ answer }}
141
- </div>
142
- </div>
143
- </div>
144
- {% endfor %}
145
- </div>
146
- </div>
147
- </div>
148
- </div>
149
- </div>
150
- </div>
151
-
152
  {% endblock %}
 
1
+ {% extends 'base.html' %}
2
+
3
+ {% block content %}
4
+
5
+ <style>
6
+ /* Ensure full-page setup */
7
+ html, body {
8
+ height: 100%;
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ .container {
14
+ display: flex;
15
+ height: 75vh; /* Increased height from 50vh to 75vh */
16
+ margin-top: 50px;
17
+ }
18
+
19
+ /* Styling for left and right panes */
20
+ .card {
21
+ height: 100%; /* Ensures cards fill the container height */
22
+ overflow: hidden; /* Prevents overflow of content */
23
+ }
24
+
25
+ .row {
26
+ height: 100%; /* Ensures the row fills the container */
27
+ margin: auto;
28
+ }
29
+
30
+ .col-md-5 {
31
+ display: flex;
32
+ flex-direction: column;
33
+ gap: 20px; /* Adds space between left and right containers */
34
+ max-height: 100%;
35
+ }
36
+
37
+ .card-body {
38
+ display: flex;
39
+ flex-direction: column;
40
+ height: auto; /* Occupies full height of the card */
41
+ }
42
+
43
+ /* Scrollable left pane's history section */
44
+ .history-section {
45
+ overflow-y: auto; /* Adds vertical scrolling */
46
+ flex: 1; /* Ensures this section takes up remaining space */
47
+ overflow-x: hidden;
48
+ }
49
+
50
+ /* Scrollbar customization */
51
+ .history-section::-webkit-scrollbar {
52
+ width: 8px;
53
+ }
54
+
55
+ .history-section::-webkit-scrollbar-thumb {
56
+ background-color: #888;
57
+ border-radius: 4px;
58
+ }
59
+
60
+ .history-section::-webkit-scrollbar-thumb:hover {
61
+ background-color: #555;
62
+ }
63
+
64
+ .history-section::-webkit-scrollbar-track {
65
+ background-color: #f1f1f1;
66
+ }
67
+
68
+ /* Space between left and right columns */
69
+ .row > .col-md-5:not(:last-child) {
70
+ margin-right: 20px; /* Adds space between left and right pane */
71
+ }
72
+
73
+ /* Form input and button adjustments */
74
+ .form-group input {
75
+ border-radius: 4px;
76
+ }
77
+
78
+ .btn-primary {
79
+ background-color: #007bff;
80
+ border-color: #007bff;
81
+ }
82
+
83
+ .btn-primary:hover {
84
+ background-color: #0056b3;
85
+ border-color: #0056b3;
86
+ }
87
+
88
+ /* Scrollable left section for queries */
89
+ .answer-section {
90
+ background: #2c2c3e;
91
+ padding: 10px;
92
+ border-radius: 4px;
93
+ border: 1px solid #2c2c3e;
94
+ }
95
+ </style>
96
+
97
+ <div class="container">
98
+ <div class="row justify-content-center">
99
+ <!-- Left Pane -->
100
+ <div class="col-md-5">
101
+ <div class="card">
102
+ <div class="card-body">
103
+ <h5 class="card-title">Document AI</h5>
104
+ <p class="card-text">Enter a query and get an answer based on the stored context.</p>
105
+
106
+ <form method="POST" action="{{ url_for('chat') }}">
107
+ <div class="form-group">
108
+ <input type="text" name="query_text" placeholder="Enter your query" value="{{ query_text }}"
109
+ required class="form-control">
110
+ </div>
111
+ <div class="form-group mt-2">
112
+ <button type="submit" class="btn btn-primary">Submit</button>
113
+ </div>
114
+ </form>
115
+
116
+ {% if answer %}
117
+ <div class="answer-section mt-3">
118
+ <h6>Answer:</h6>
119
+ <div class="answer">{{ answer }}</div>
120
+ </div>
121
+ {% endif %}
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Right Pane -->
127
+ <div class="col-md-5">
128
+ <div class="card">
129
+ <div class="card-body">
130
+ <h5 class="card-title">Previous Queries</h5>
131
+ <div class="history-section">
132
+ {% for question, answer in history %}
133
+ <div class="card mb-3">
134
+ <div class="card-body">
135
+ <div class="question">
136
+ <strong>Query:</strong> {{ question }}
137
+ </div>
138
+ <hr>
139
+ <div class="answer mt-2">
140
+ <strong>Answer:</strong> {{ answer }}
141
+ </div>
142
+ </div>
143
+ </div>
144
+ {% endfor %}
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
  {% endblock %}