Hugging Face's logo

Spaces:
WebashalarForML
/
RAG_AI_V2
Running

App Files Community
WebashalarForML commited on
Commit
afb53c6
·
verified ·
1 Parent(s): 593673c

Update templates/update_db.html

Browse files
Files changed (1) hide show
  1. templates/update_db.html +148 -107
templates/update_db.html CHANGED
@@ -1,107 +1,148 @@
1
- {% extends 'base.html' %}
2
-
3
- {% block content %}
4
- <style>
5
- html, body {
6
- height: 100%;
7
- margin: 0;
8
- }
9
-
10
- .container {
11
- display: flex;
12
- flex-direction: column;
13
- height: 50vh;
14
- overflow: hidden;
15
- }
16
-
17
- .card {
18
- margin: auto;
19
- background-color: #2c2c3e;
20
- color: #f5f5f5;
21
- border: none;
22
- width: 50%;
23
- max-height: calc(50vh - 50px);
24
- overflow-y: auto;
25
- }
26
-
27
- .card-header {
28
- background-color: #181831;
29
- border-bottom: 2px solid #444;
30
- padding: 1rem;
31
- text-align: center;
32
- position: sticky;
33
- top: 0;
34
- z-index: 1000;
35
- }
36
-
37
- .text-muted {
38
- color: rgb(121 136 151 / 75%) !important;
39
- }
40
-
41
- .form-label {
42
- font-weight: bold;
43
- color: #cfcfcf;
44
- }
45
-
46
- .form-control {
47
- background-color: #1e1e2f;
48
- color: #f5f5f5;
49
- border: 1px solid #444;
50
- }
51
-
52
- .form-control:focus {
53
- background-color: #1e1e2f;
54
- color: #f5f5f5;
55
- border-color: #4c4cff;
56
- box-shadow: 0 0 4px #4c4cff;
57
- }
58
-
59
- .btn-primary {
60
- background-color: #4c4cff;
61
- border-color: #4c4cff;
62
- }
63
-
64
- .btn-primary:hover {
65
- background-color: #3838e8;
66
- border-color: #3838e8;
67
- }
68
-
69
- .card::-webkit-scrollbar {
70
- width: 8px;
71
- }
72
-
73
- .card::-webkit-scrollbar-thumb {
74
- background-color: #444;
75
- border-radius: 4px;
76
- }
77
- </style>
78
-
79
- <div class="container mt-5">
80
- <div class="card shadow">
81
- <div class="card-header">
82
- <h3>Update the Vector Database</h3>
83
- </div>
84
- <div class="card-body">
85
- <form method="post" enctype="multipart/form-data">
86
- <!-- Database Name Display -->
87
- <div class="form-group">
88
- <label for="db_name" class="form-label">Database Name</label>
89
- <input type="text" id="db_name" name="db_name" class="form-control" value="{{ db_name }}" readonly>
90
- </div>
91
-
92
- <!-- File or Folder Upload -->
93
- <div class="form-group mt-3">
94
- <label for="files" class="form-label">Upload Files or Folder</label>
95
- <input type="file" id="files" name="files" class="form-control" webkitdirectory directory multiple>
96
- <small class="text-muted">Note: You can upload multiple files, a folder, or a single file.</small>
97
- </div>
98
-
99
- <!-- Submit Button -->
100
- <div class="mt-4 text-center">
101
- <button type="submit" class="btn btn-primary px-5">Update</button>
102
- </div>
103
- </form>
104
- </div>
105
- </div>
106
- </div>
107
- {% endblock %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {% extends 'base.html' %}
2
+
3
+ {% block content %}
4
+ <style>
5
+ /* Ensure the body takes full height for proper layout */
6
+ html, body {
7
+ height: 100%;
8
+ margin: 0;
9
+ }
10
+
11
+ .container {
12
+ display: flex;
13
+ flex-direction: column;
14
+ height: 50vh; /* Full height of the viewport */
15
+ overflow: hidden; /* Prevent extra scrollbars */
16
+ }
17
+
18
+ .card {
19
+ margin: auto;
20
+ background-color: #2c2c3e;
21
+ color: #f5f5f5;
22
+ border: none;
23
+ width: 50%; /* Centered and appropriately sized */
24
+ max-height: calc(50vh - 50px); /* Adjust to fit within view */
25
+ overflow-y: auto; /* Add scrolling if content overflows */
26
+ }
27
+
28
+ .card-header {
29
+ background-color: #181831;
30
+ border-bottom: 2px solid #444;
31
+ padding: 1rem;
32
+ text-align: center;
33
+ position: sticky; /* Keeps header fixed */
34
+ top: 0;
35
+ z-index: 1000; /* Ensures it stays above scrollable content */
36
+ }
37
+
38
+ .text-muted {
39
+ --bs-text-opacity: 1;
40
+ color: rgb(121 136 151 / 75%) !important;
41
+ }
42
+
43
+ .form-label {
44
+ font-weight: bold;
45
+ color: #cfcfcf;
46
+ }
47
+
48
+ .form-control {
49
+ background-color: #1e1e2f;
50
+ color: #f5f5f5;
51
+ border: 1px solid #444;
52
+ }
53
+
54
+ .form-control:focus {
55
+ background-color: #1e1e2f;
56
+ color: #f5f5f5;
57
+ border-color: #4c4cff;
58
+ box-shadow: 0 0 4px #4c4cff;
59
+ }
60
+
61
+ .btn-primary {
62
+ background-color: #4c4cff;
63
+ border-color: #4c4cff;
64
+ display: flex;
65
+ justify-content: center;
66
+ align-items: center;
67
+ position: relative;
68
+ }
69
+
70
+ .btn-primary:hover {
71
+ background-color: #3838e8;
72
+ border-color: #3838e8;
73
+ }
74
+
75
+ /* Loader on the button */
76
+ .button-spinner {
77
+ display: none; /* Hidden by default */
78
+ width: 20px;
79
+ height: 20px;
80
+ border: 3px solid #f3f3f3;
81
+ border-top: 3px solid #ffffff;
82
+ border-radius: 50%;
83
+ animation: spin 1s linear infinite;
84
+ margin-left: 10px; /* Space between button text and loader */
85
+ }
86
+
87
+ .btn-loading .button-spinner {
88
+ display: inline-block; /* Show spinner when loading */
89
+ }
90
+
91
+ @keyframes spin {
92
+ 0% {
93
+ transform: rotate(0deg);
94
+ }
95
+ 100% {
96
+ transform: rotate(360deg);
97
+ }
98
+ }
99
+
100
+ .btn-loading .btn-text {
101
+ opacity: 0.5; /* Dim button text when loading */
102
+ }
103
+ </style>
104
+
105
+ <div class="container mt-5">
106
+ <div class="card shadow">
107
+ <div class="card-header">
108
+ <h3>Create a New Vector Database</h3>
109
+ </div>
110
+ <div class="card-body">
111
+ <form id="db-form" method="post" enctype="multipart/form-data">
112
+ <!-- Database Name Input -->
113
+ <div class="form-group">
114
+ <label for="db_name" class="form-label">Database Name</label>
115
+ <input type="text" id="db_name" name="db_name" class="form-control" placeholder="Enter database name" required>
116
+ </div>
117
+
118
+ <!-- Folder Upload Input -->
119
+ <div class="form-group mt-3">
120
+ <label for="folder" class="form-label">Upload Folder</label>
121
+ <input type="file" id="folder" name="folder" class="form-control" webkitdirectory directory multiple required>
122
+ <small class="text-muted">Note: You can upload folder having your documents.</small>
123
+ </div>
124
+
125
+ <!-- Submit Button -->
126
+ <div class="mt-4 text-center">
127
+ <button type="submit" class="btn btn-primary px-5">
128
+ <span class="btn-text">Create</span>
129
+ <div class="button-spinner"></div>
130
+ </button>
131
+ </div>
132
+ </form>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <script>
138
+ // Show loader on button click
139
+ const form = document.getElementById('db-form');
140
+ const submitButton = document.querySelector('.btn-primary');
141
+
142
+ form.addEventListener('submit', function (event) {
143
+ submitButton.classList.add('btn-loading'); // Add loading class
144
+ submitButton.disabled = true; // Disable button to prevent multiple clicks
145
+ });
146
+ </script>
147
+
148
+ {% endblock %}