Hugging Face's logo

Spaces:
WebashalarForML
/
RAG_AI_V2
Running

App Files Community
WebashalarForML commited on
Commit
e209a78
·
verified ·
1 Parent(s): 070a9b0

Update templates/list_dbs.html

Browse files
Files changed (1) hide show
  1. templates/list_dbs.html +130 -130
templates/list_dbs.html CHANGED
@@ -1,130 +1,130 @@
1
- {% extends 'base.html' %}
2
-
3
- {% block content %}
4
- <style>
5
- /* Full-page setup */
6
- html, body {
7
- height: 100%;
8
- margin: 0;
9
- }
10
-
11
- .container {
12
- display: flex;
13
- flex-direction: column;
14
- height: 50vh; /* Full viewport height */
15
- justify-content: center;
16
- align-items: center;
17
- }
18
-
19
- /* Card styling */
20
- .card {
21
- margin: auto;
22
- background-color: #2c2c3e;
23
- color: #f5f5f5;
24
- border: none;
25
- width: 50%;
26
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Refined shadow effect */
27
- max-height: calc(50vh - 50px); /* Adjust to fit within view */
28
- overflow: hidden; /* Ensures no overflow from child elements */
29
- }
30
-
31
- /* Fixed header */
32
- .card-header {
33
- background-color: #181831;
34
- border-bottom: 2px solid #444;
35
- padding: 1rem;
36
- text-align: center;
37
- position: sticky; /* Keeps header fixed */
38
- top: 0;
39
- z-index: 1000; /* Ensures it stays above scrollable content */
40
- }
41
-
42
- .card-body {
43
- max-height: 60vh; /* Limits height of scrollable area */
44
- overflow-y: auto; /* Adds vertical scrolling */
45
- }
46
-
47
- /* Scrollbar customization */
48
- .card-body::-webkit-scrollbar {
49
- width: 8px;
50
- }
51
-
52
- .card-body::-webkit-scrollbar-thumb {
53
- background-color: #444; /* Thumb color */
54
- border-radius: 4px; /* Rounded scrollbar edges */
55
- }
56
-
57
- .card-body::-webkit-scrollbar-thumb:hover {
58
- background-color: #555; /* Thumb hover color */
59
- }
60
-
61
- .card-body::-webkit-scrollbar-track {
62
- background-color: #2c2c3e; /* Track background */
63
- }
64
-
65
- /* List group items */
66
- .list-group-item {
67
- background-color: #2c2c3e;
68
- color: #f5f5f5;
69
- border: 1px solid #444;
70
- transition: background-color 0.3s ease;
71
- }
72
-
73
- .list-group-item:hover {
74
- background-color: #383850;
75
- }
76
-
77
- /* Button styling */
78
- .btn-primary {
79
- background-color: #4c4cff;
80
- border-color: #4c4cff;
81
- }
82
-
83
- .btn-primary:hover {
84
- background-color: #3838e8;
85
- border-color: #3838e8;
86
- }
87
- /* Align buttons side-by-side */
88
- .button-container {
89
- display: flex;
90
- gap: 0.5rem; /* Adds space between buttons */
91
- }
92
-
93
- .btn-primary {
94
- flex: 1; /* Ensures buttons have the same width */
95
- }
96
-
97
- /* Optional: Adjust margin and padding for better spacing */
98
- .list-group-item {
99
- display: flex;
100
- justify-content: space-between;
101
- align-items: center;
102
- }
103
- </style>
104
-
105
- <div class="container">
106
- <div class="card shadow">
107
- <div class="card-header">
108
- <h3>Available Vector Databases</h3>
109
- </div>
110
- <div class="card-body">
111
- <h4 class="text-center mb-4">Select a Vector Database</h4>
112
- <ul class="list-group">
113
- {% for db in vector_dbs %}
114
- <li class="list-group-item">
115
- <span>{{ db }}</span>
116
- <div class="button-container">
117
- <form method="post" action="{{ url_for('update_db', db_name=db) }}" class="mb-0">
118
- <button type="submit" class="btn btn-primary btn-sm">Update</button>
119
- </form>
120
- <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
121
- <button type="submit" class="btn btn-primary btn-sm">Select</button>
122
- </form>
123
- </div>
124
- </li>
125
- {% endfor %}
126
- </ul>
127
- </div>
128
- </div>
129
- </div>
130
- {% endblock %}
 
1
+ {% extends 'base.html' %}
2
+
3
+ {% block content %}
4
+ <style>
5
+ /* Full-page setup */
6
+ html, body {
7
+ height: 100%;
8
+ margin: 0;
9
+ }
10
+
11
+ .container {
12
+ display: flex;
13
+ flex-direction: column;
14
+ height: 50vh; /* Full viewport height */
15
+ justify-content: center;
16
+ align-items: center;
17
+ }
18
+
19
+ /* Card styling */
20
+ .card {
21
+ margin: auto;
22
+ background-color: #2c2c3e;
23
+ color: #f5f5f5;
24
+ border: none;
25
+ width: 50%;
26
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Refined shadow effect */
27
+ max-height: calc(50vh - 50px); /* Adjust to fit within view */
28
+ overflow: hidden; /* Ensures no overflow from child elements */
29
+ }
30
+
31
+ /* Fixed header */
32
+ .card-header {
33
+ background-color: #181831;
34
+ border-bottom: 2px solid #444;
35
+ padding: 1rem;
36
+ text-align: center;
37
+ position: sticky; /* Keeps header fixed */
38
+ top: 0;
39
+ z-index: 1000; /* Ensures it stays above scrollable content */
40
+ }
41
+
42
+ .card-body {
43
+ max-height: 60vh; /* Limits height of scrollable area */
44
+ overflow-y: auto; /* Adds vertical scrolling */
45
+ }
46
+
47
+ /* Scrollbar customization */
48
+ .card-body::-webkit-scrollbar {
49
+ width: 8px;
50
+ }
51
+
52
+ .card-body::-webkit-scrollbar-thumb {
53
+ background-color: #444; /* Thumb color */
54
+ border-radius: 4px; /* Rounded scrollbar edges */
55
+ }
56
+
57
+ .card-body::-webkit-scrollbar-thumb:hover {
58
+ background-color: #555; /* Thumb hover color */
59
+ }
60
+
61
+ .card-body::-webkit-scrollbar-track {
62
+ background-color: #2c2c3e; /* Track background */
63
+ }
64
+
65
+ /* List group items */
66
+ .list-group-item {
67
+ background-color: #2c2c3e;
68
+ color: #f5f5f5;
69
+ border: 1px solid #444;
70
+ transition: background-color 0.3s ease;
71
+ }
72
+
73
+ .list-group-item:hover {
74
+ background-color: #383850;
75
+ }
76
+
77
+ /* Button styling */
78
+ .btn-primary {
79
+ background-color: #4c4cff;
80
+ border-color: #4c4cff;
81
+ }
82
+
83
+ .btn-primary:hover {
84
+ background-color: #3838e8;
85
+ border-color: #3838e8;
86
+ }
87
+ /* Align buttons side-by-side */
88
+ .button-container {
89
+ display: flex;
90
+ gap: 0.5rem; /* Adds space between buttons */
91
+ }
92
+
93
+ .btn-primary {
94
+ flex: 1; /* Ensures buttons have the same width */
95
+ }
96
+
97
+ /* Optional: Adjust margin and padding for better spacing */
98
+ .list-group-item {
99
+ display: flex;
100
+ justify-content: space-between;
101
+ align-items: center;
102
+ }
103
+ </style>
104
+
105
+ <div class="container">
106
+ <div class="card shadow">
107
+ <div class="card-header">
108
+ <h3>Available Vector Databases</h3>
109
+ </div>
110
+ <div class="card-body">
111
+ <h4 class="text-center mb-4">Select a Vector Database</h4>
112
+ <ul class="list-group">
113
+ {% for db in vector_dbs %}
114
+ <li class="list-group-item">
115
+ <span>{{ db }}</span>
116
+ <div class="button-container">
117
+ <!--form method="post" action="{{ url_for('update_db', db_name=db) }}" class="mb-0">
118
+ <button type="submit" class="btn btn-primary btn-sm">Update</button>
119
+ </form-->
120
+ <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
121
+ <button type="submit" class="btn btn-primary btn-sm">Select</button>
122
+ </form>
123
+ </div>
124
+ </li>
125
+ {% endfor %}
126
+ </ul>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ {% endblock %}