Hugging Face's logo

Spaces:
rm-lht
/
lightrag
Configuration error

App Files Community
ParisNeo commited on
Commit
bae13af
·
unverified ·
1 Parent(s): d69ed60

Update index.html

Browse files
Files changed (1) hide show
  1. lightrag/api/static/index.html +47 -22
lightrag/api/static/index.html CHANGED
@@ -3,8 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LightRAG WebUI</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  </head>
9
  <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
10
  <div class="w-full max-w-4xl bg-white shadow-md rounded-lg p-6 relative">
@@ -39,6 +40,12 @@
39
  <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Upload</button>
40
  </form>
41
  <div id="uploadStatus" class="mt-2 text-sm text-gray-600"></div>
 
 
 
 
 
 
42
  </div>
43
 
44
  <!-- Query Section -->
@@ -93,6 +100,9 @@
93
  const uploadForm = document.getElementById('uploadForm');
94
  const fileInput = document.getElementById('fileInput');
95
  const uploadStatus = document.getElementById('uploadStatus');
 
 
 
96
 
97
  uploadForm.addEventListener('submit', async (e) => {
98
  e.preventDefault();
@@ -102,31 +112,46 @@
102
  return;
103
  }
104
 
105
- const formData = new FormData();
106
- for (const file of files) {
 
 
 
 
107
  formData.append('file', file);
108
- }
109
 
110
- uploadStatus.textContent = "Uploading...";
111
- try {
112
- const response = await fetch('/documents/upload', {
113
- method: 'POST',
114
- body: formData,
115
- headers: {
116
- 'Authorization': `Bearer ${localStorage.getItem('bearerKey') || ''}`
 
 
 
 
 
 
 
 
 
 
 
117
  }
118
- });
119
-
120
- if (response.ok) {
121
- const data = await response.json();
122
- uploadStatus.textContent = `Upload successful! Indexed ${data.total_documents} documents.`;
123
- } else {
124
- const error = await response.json();
125
- uploadStatus.textContent = `Error: ${error.detail}`;
126
  }
127
- } catch (err) {
128
- uploadStatus.textContent = `Error: ${err.message}`;
129
  }
 
 
 
 
 
 
 
 
130
  });
131
 
132
  // Query Handler
@@ -155,7 +180,7 @@
155
 
156
  if (response.ok) {
157
  const data = await response.json();
158
- queryResponse.textContent = `Response: ${data.response}`;
159
  } else {
160
  const error = await response.json();
161
  queryResponse.textContent = `Error: ${error.detail}`;
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RAG WebUI</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <!-- Include Marked.js -->
9
  </head>
10
  <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
11
  <div class="w-full max-w-4xl bg-white shadow-md rounded-lg p-6 relative">
 
40
  <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Upload</button>
41
  </form>
42
  <div id="uploadStatus" class="mt-2 text-sm text-gray-600"></div>
43
+ <div id="progressContainer" class="mt-4 hidden">
44
+ <div id="progressBar" class="w-full bg-gray-200 rounded h-4">
45
+ <div class="bg-blue-500 h-4 rounded" style="width: 0%;"></div>
46
+ </div>
47
+ <p id="progressText" class="text-sm text-gray-600 mt-2"></p>
48
+ </div>
49
  </div>
50
 
51
  <!-- Query Section -->
 
100
  const uploadForm = document.getElementById('uploadForm');
101
  const fileInput = document.getElementById('fileInput');
102
  const uploadStatus = document.getElementById('uploadStatus');
103
+ const progressContainer = document.getElementById('progressContainer');
104
+ const progressBar = document.getElementById('progressBar').firstElementChild;
105
+ const progressText = document.getElementById('progressText');
106
 
107
  uploadForm.addEventListener('submit', async (e) => {
108
  e.preventDefault();
 
112
  return;
113
  }
114
 
115
+ progressContainer.classList.remove('hidden');
116
+ uploadStatus.textContent = "Uploading files...";
117
+ let uploadedCount = 0;
118
+
119
+ for (const [index, file] of Array.from(files).entries()) {
120
+ const formData = new FormData();
121
  formData.append('file', file);
 
122
 
123
+ try {
124
+ const response = await fetch('/documents/upload', {
125
+ method: 'POST',
126
+ body: formData,
127
+ headers: {
128
+ 'Authorization': `Bearer ${localStorage.getItem('bearerKey') || ''}`
129
+ }
130
+ });
131
+
132
+ if (response.ok) {
133
+ uploadedCount++;
134
+ const progress = Math.round((uploadedCount / files.length) * 100);
135
+ progressBar.style.width = `${progress}%`;
136
+ progressText.textContent = `Uploading file ${index + 1} of ${files.length} (${progress}%)`;
137
+ } else {
138
+ const error = await response.json();
139
+ uploadStatus.textContent = `Error uploading file ${file.name}: ${error.detail}`;
140
+ break;
141
  }
142
+ } catch (err) {
143
+ uploadStatus.textContent = `Error uploading file ${file.name}: ${err.message}`;
144
+ break;
 
 
 
 
 
145
  }
 
 
146
  }
147
+
148
+ if (uploadedCount === files.length) {
149
+ uploadStatus.textContent = "All files uploaded successfully!";
150
+ } else {
151
+ uploadStatus.textContent = "File upload interrupted.";
152
+ }
153
+
154
+ progressContainer.classList.add('hidden');
155
  });
156
 
157
  // Query Handler
 
180
 
181
  if (response.ok) {
182
  const data = await response.json();
183
+ queryResponse.innerHTML = marked(data.response); // Render Markdown as HTML
184
  } else {
185
  const error = await response.json();
186
  queryResponse.textContent = `Error: ${error.detail}`;