Spaces:
Runtime error
Runtime error
Delete templates/prompt_template.html
Browse files- templates/prompt_template.html +0 -435
templates/prompt_template.html
DELETED
@@ -1,435 +0,0 @@
|
|
1 |
-
<!DOCTYPE html>
|
2 |
-
<html>
|
3 |
-
|
4 |
-
<head>
|
5 |
-
<title>Prompt Template</title>
|
6 |
-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
7 |
-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
8 |
-
<!-- Include AdminLTE CSS -->
|
9 |
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
|
10 |
-
<!-- Include DataTables CSS -->
|
11 |
-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
|
12 |
-
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
|
13 |
-
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
|
14 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
|
15 |
-
<style>
|
16 |
-
.header-row {
|
17 |
-
display: flex;
|
18 |
-
justify-content: space-between;
|
19 |
-
align-items: center;
|
20 |
-
}
|
21 |
-
|
22 |
-
.table-container {
|
23 |
-
width: 100%;
|
24 |
-
overflow-x: auto;
|
25 |
-
}
|
26 |
-
|
27 |
-
.wrapper {
|
28 |
-
display: flex;
|
29 |
-
flex-direction: column;
|
30 |
-
height: 100vh;
|
31 |
-
}
|
32 |
-
|
33 |
-
.content-wrapper {
|
34 |
-
flex: 1;
|
35 |
-
overflow-y: auto;
|
36 |
-
}
|
37 |
-
|
38 |
-
.content-header {
|
39 |
-
padding: 5px;
|
40 |
-
|
41 |
-
}
|
42 |
-
|
43 |
-
.footer {
|
44 |
-
text-align: right;
|
45 |
-
padding: 10px;
|
46 |
-
}
|
47 |
-
.center-align {
|
48 |
-
padding-top: 20px;
|
49 |
-
display: flex;
|
50 |
-
justify-content: center;
|
51 |
-
align-items: center;
|
52 |
-
width: 100%;
|
53 |
-
}
|
54 |
-
th,
|
55 |
-
td {
|
56 |
-
white-space: nowrap;
|
57 |
-
}
|
58 |
-
|
59 |
-
th:nth-child(1),
|
60 |
-
td:nth-child(1) {
|
61 |
-
/* Sno column */
|
62 |
-
width: 1%;
|
63 |
-
}
|
64 |
-
|
65 |
-
th:nth-child(2),
|
66 |
-
td:nth-child(2) {
|
67 |
-
/* API Name column */
|
68 |
-
width: 20%;
|
69 |
-
}
|
70 |
-
|
71 |
-
th:nth-child(3),
|
72 |
-
td:nth-child(3) {
|
73 |
-
/* API Endpoint column */
|
74 |
-
width: 35%;
|
75 |
-
}
|
76 |
-
|
77 |
-
th:nth-child(4),
|
78 |
-
td:nth-child(4) {
|
79 |
-
/* view column*/
|
80 |
-
width: 15%;
|
81 |
-
}
|
82 |
-
.reduced-width{
|
83 |
-
width:25%;
|
84 |
-
}
|
85 |
-
|
86 |
-
.viewButton{
|
87 |
-
size:2px;
|
88 |
-
}
|
89 |
-
</style>
|
90 |
-
</head>
|
91 |
-
|
92 |
-
<body>
|
93 |
-
{% include 'sidepane.html' %}
|
94 |
-
|
95 |
-
<div class="wrapper">
|
96 |
-
<div class="content-wrapper">
|
97 |
-
<!-- Content Header (Page header) -->
|
98 |
-
<div class="content-header">
|
99 |
-
<div class="container-fluid">
|
100 |
-
<div class="container mt-2">
|
101 |
-
<div class="form-group center-align">
|
102 |
-
<label for="company" class="mr-2">Company Name <span class="text-danger">*</span></label>
|
103 |
-
<select type="text" id="company" name="company" class="form-control reduced-width" required>
|
104 |
-
<option value="" selected>Select</option>
|
105 |
-
</select>
|
106 |
-
<div class="col-8 d-flex justify-content-end mb-3">
|
107 |
-
<button class="btn btn-primary" style="margin-top: 20px;" id="add">Add</button>
|
108 |
-
|
109 |
-
<!-- <button class="btn btn-primary" style="margin-top: 20px;" id="add">Add</button> -->
|
110 |
-
</div>
|
111 |
-
</div>
|
112 |
-
<div class="row">
|
113 |
-
<div id="message-container" style="margin-left: 200px;"></div>
|
114 |
-
</div>
|
115 |
-
</div>
|
116 |
-
</div>
|
117 |
-
</div>
|
118 |
-
<section class="content" id="contentSection" style="display: none;">
|
119 |
-
<div class="container-fluid">
|
120 |
-
<div class="form-group">
|
121 |
-
<!-- <label for="company_id">company_id</label>--->
|
122 |
-
<input type="hidden" id="company_id" name="company_id" class="form-control" required>
|
123 |
-
</div>
|
124 |
-
</div>
|
125 |
-
<!-- Main content-->
|
126 |
-
<section class="content">
|
127 |
-
<div class="container-fluid">
|
128 |
-
<div class="row">
|
129 |
-
<div class="col-12">
|
130 |
-
<div class="card">
|
131 |
-
<div class="card-body table-container">
|
132 |
-
<table id="promptTable" class="table table-bordered table-striped">
|
133 |
-
<thead>
|
134 |
-
<tr>
|
135 |
-
<th>Sno</th>
|
136 |
-
<th>Datasource</th>
|
137 |
-
<th>Sample Prompt</th>
|
138 |
-
<th>View</th>
|
139 |
-
</tr>
|
140 |
-
</thead>
|
141 |
-
<tbody>
|
142 |
-
<!-- <tr>
|
143 |
-
<td>1</td>
|
144 |
-
<td>API</td>
|
145 |
-
<td>What are the details of ASN24080200002?</td>
|
146 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
147 |
-
</tr>
|
148 |
-
<tr>
|
149 |
-
<td>2</td>
|
150 |
-
<td>API</td>
|
151 |
-
<td>What is the expected receiving date of ASN24080200002</td>
|
152 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
153 |
-
</tr>
|
154 |
-
<tr>
|
155 |
-
<td>3</td>
|
156 |
-
<td>Document</td>
|
157 |
-
<td>Explain Pre-Receiving Yard Management</td>
|
158 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
159 |
-
</tr>
|
160 |
-
<tr>
|
161 |
-
<td>4</td>
|
162 |
-
<td>Document</td>
|
163 |
-
<td>Can you explain the process of unloading a vehicle in more detail?</td>
|
164 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
165 |
-
</tr>
|
166 |
-
<tr>
|
167 |
-
<td>5</td>
|
168 |
-
<td>Visual Analysis</td>
|
169 |
-
<td>I want to analyze item name and quantity in a bar chart in warehouse Allcargo Logistics</td>
|
170 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
171 |
-
</tr>
|
172 |
-
<tr>
|
173 |
-
<td>6</td>
|
174 |
-
<td>Visual Analysis</td>
|
175 |
-
<td>Can you generate a pie chart with item names and quantities in warehouse Allcargo Logistics</td>
|
176 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
177 |
-
</tr>
|
178 |
-
<tr>
|
179 |
-
<td>7</td>
|
180 |
-
<td>Database</td>
|
181 |
-
<td>What are the active warehouses available</td>
|
182 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
183 |
-
</tr>
|
184 |
-
<tr>
|
185 |
-
<td>8</td>
|
186 |
-
<td>Database</td>
|
187 |
-
<td>What are the warehouses available</td>
|
188 |
-
<td><button class="btn btn-primary viewButton">View</button></td>
|
189 |
-
</tr>
|
190 |
-
-->
|
191 |
-
</tbody>
|
192 |
-
</table>
|
193 |
-
</div>
|
194 |
-
</div>
|
195 |
-
</div>
|
196 |
-
</div>
|
197 |
-
</div>
|
198 |
-
</section>
|
199 |
-
</section>
|
200 |
-
</div>
|
201 |
-
|
202 |
-
</div>
|
203 |
-
|
204 |
-
</div>
|
205 |
-
|
206 |
-
<!-- Modal -->
|
207 |
-
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
|
208 |
-
aria-hidden="true">
|
209 |
-
<div class="modal-dialog" role="document">
|
210 |
-
<div class="modal-content">
|
211 |
-
<div class="modal-header">
|
212 |
-
<h5 class="modal-title" id="addModalLabel">Add Prompt</h5>
|
213 |
-
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
|
214 |
-
<span aria-hidden="true" data-backdrop="static" data-keyboard="false">×</span>
|
215 |
-
</div>
|
216 |
-
<div class="modal-body">
|
217 |
-
<div class="form-group">
|
218 |
-
<!-- <label for="company_id">company_id</label>--->
|
219 |
-
<input type="hidden" id="company_id" name="company_id" class="form-control" required>
|
220 |
-
</div>
|
221 |
-
<form id="addPromptForm">
|
222 |
-
<div class="form-group">
|
223 |
-
<label for="scenario">Scenario <span class="text-danger">*</span></label>
|
224 |
-
<input type="text" class="form-control" id="scenario" name="scenario" required>
|
225 |
-
</div>
|
226 |
-
<div class="form-group">
|
227 |
-
<label for="prompt">Sample Prompt <span class="text-danger">*</span></label>
|
228 |
-
<input type="text" class="form-control" id="prompt" name="sampleprompt" required>
|
229 |
-
</div>
|
230 |
-
<div class="form-group">
|
231 |
-
<label for="comments">Comments <span class="text-danger">*</span></label>
|
232 |
-
<input type="text" class="form-control" id="comments" name="comments" required>
|
233 |
-
</div>
|
234 |
-
</form>
|
235 |
-
</div>
|
236 |
-
<div class="modal-footer">
|
237 |
-
<!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
|
238 |
-
<button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
|
239 |
-
</div>
|
240 |
-
</div>
|
241 |
-
</div>
|
242 |
-
</div>
|
243 |
-
|
244 |
-
<!-- Include DataTables JS and your custom script -->
|
245 |
-
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
|
246 |
-
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
|
247 |
-
<script>
|
248 |
-
$(document).ready(function () {
|
249 |
-
$('#add').on('click', function () {
|
250 |
-
clearFormFields();
|
251 |
-
$('#message-container').empty(); // Clear the message container
|
252 |
-
$('#addModal').modal('show');
|
253 |
-
});
|
254 |
-
$('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
|
255 |
-
$('#addModal').modal('hide');
|
256 |
-
});
|
257 |
-
|
258 |
-
});
|
259 |
-
document.addEventListener("DOMContentLoaded", function () {
|
260 |
-
|
261 |
-
// clearFormFields();
|
262 |
-
fetchCompanies();
|
263 |
-
|
264 |
-
const companySelect = document.getElementById('company');
|
265 |
-
const addPromptForm = document.getElementById('addPromptForm');
|
266 |
-
const table = $('#promptTable').DataTable();
|
267 |
-
// Initialize DataTable at the start
|
268 |
-
companySelect.addEventListener('change', async function () {
|
269 |
-
$("#message-container").empty();
|
270 |
-
const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
|
271 |
-
console.log(`Selected Company Name: ${selectedCompanyName}`);
|
272 |
-
|
273 |
-
if (selectedCompanyName !== "Select") {
|
274 |
-
|
275 |
-
try {
|
276 |
-
const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
|
277 |
-
if (!response.ok) {
|
278 |
-
contentSection.style.display = 'none';
|
279 |
-
("Document details does not exist for name does not exist. Please fill in the details.");
|
280 |
-
const messageContainer = document.getElementById('message-container');
|
281 |
-
if (messageContainer) {
|
282 |
-
messageContainer.innerHTML = "<div class='alert alert-danger'>Document details do not exist for this company. Please fill in the details.</div>";
|
283 |
-
}
|
284 |
-
throw new Error('Network response was not ok');
|
285 |
-
}
|
286 |
-
const data = await response.json();
|
287 |
-
console.log('data returned', data);
|
288 |
-
console.log(`Company ID: ${data.company_id}`);
|
289 |
-
const companyId = data.company_id;
|
290 |
-
document.getElementById('company_id').value = companyId;
|
291 |
-
|
292 |
-
if (companyId) {
|
293 |
-
try {
|
294 |
-
const Response = await fetch(`/api/get_prompt_templates?company_id=${companyId}&company_name=${selectedCompanyName}`);
|
295 |
-
const connectorsResponse = await Response.json();
|
296 |
-
console.log("prompt template data table after connecting to table", connectorsResponse);
|
297 |
-
table.clear();
|
298 |
-
if (!Array.isArray(connectorsResponse)) {
|
299 |
-
throw new TypeError('Expected an array of companies');
|
300 |
-
|
301 |
-
displayErrorMessage("template details do not exist for this company. Please fill in the details.");
|
302 |
-
contentSection.style.display = 'none';
|
303 |
-
} else {
|
304 |
-
|
305 |
-
connectorsResponse.forEach((company, index) => {
|
306 |
-
table.row.add([
|
307 |
-
index+1,
|
308 |
-
company.scenario,
|
309 |
-
company.prompt,
|
310 |
-
"<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
|
311 |
-
]).draw(false);
|
312 |
-
});
|
313 |
-
contentSection.style.display = 'block';
|
314 |
-
}
|
315 |
-
|
316 |
-
} catch (error) {
|
317 |
-
console.error('Error fetching company documents:', error);
|
318 |
-
//displayEmptyTable();
|
319 |
-
|
320 |
-
displayErrorMessage("Document details1 do not exist for this company. Please fill in the details.");
|
321 |
-
contentSection.style.display = 'none';
|
322 |
-
}
|
323 |
-
}
|
324 |
-
else {
|
325 |
-
// displayEmptyTable();
|
326 |
-
|
327 |
-
displayErrorMessage("Document details2 for knowledge do not exist for this company. Please fill in the details.");
|
328 |
-
}
|
329 |
-
} catch (error) {
|
330 |
-
console.error('No details for this company ID or data documents:', error);
|
331 |
-
// displayEmptyTable();
|
332 |
-
|
333 |
-
displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
|
334 |
-
contentSection.style.display = 'none';
|
335 |
-
}
|
336 |
-
} else {
|
337 |
-
|
338 |
-
table.clear().draw();
|
339 |
-
document.getElementById('contentSection').style.display = 'none';
|
340 |
-
// Optionally, you might want to clear the form fields as well
|
341 |
-
clearFormFields();
|
342 |
-
|
343 |
-
}
|
344 |
-
});
|
345 |
-
function displayErrorMessage(message) {
|
346 |
-
const messageContainer = document.getElementById('message-container');
|
347 |
-
if (messageContainer) {
|
348 |
-
messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
|
349 |
-
}
|
350 |
-
}
|
351 |
-
|
352 |
-
});
|
353 |
-
function save_file() {
|
354 |
-
const form = document.getElementById('addPromptForm');
|
355 |
-
|
356 |
-
// Check if the form is valid
|
357 |
-
if (!form.checkValidity()) {
|
358 |
-
// If the form is invalid, show validation messages and stop the submission
|
359 |
-
form.reportValidity();
|
360 |
-
return;
|
361 |
-
}
|
362 |
-
const company_id=$('#company_id').val();
|
363 |
-
const scenario= $('#scenario').val();
|
364 |
-
const prompt = $('#prompt').val();
|
365 |
-
const comments=$('#comments').val();
|
366 |
-
const view= "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
|
367 |
-
var formData = new FormData($('#addPromptForm')[0]);
|
368 |
-
|
369 |
-
formData.append("company_id",company_id),
|
370 |
-
formData.append("scenario", scenario),
|
371 |
-
formData.append("prompt", prompt),
|
372 |
-
formData.append("comments",comments),
|
373 |
-
|
374 |
-
//const formData = new FormData();
|
375 |
-
fetch('/api/save_prompt_details', {
|
376 |
-
method: 'POST',
|
377 |
-
body: formData
|
378 |
-
})
|
379 |
-
.then(response => {
|
380 |
-
if (!response.ok) {
|
381 |
-
throw new Error('Network response was not ok');
|
382 |
-
}
|
383 |
-
return response.text();
|
384 |
-
})
|
385 |
-
.then(data => {
|
386 |
-
var table = $('#promptTable').DataTable();
|
387 |
-
var rowCount = table.rows().count();
|
388 |
-
table.row.add([
|
389 |
-
rowCount + 1,
|
390 |
-
scenario,
|
391 |
-
prompt,
|
392 |
-
view
|
393 |
-
]).draw(false);
|
394 |
-
|
395 |
-
alert('Document saved successfully');
|
396 |
-
$('#addModal').modal('hide');
|
397 |
-
document.getElementById('contentSection').style.display = 'block'; // Show the table section
|
398 |
-
})
|
399 |
-
.catch(error => console.error('Error:', error));
|
400 |
-
}
|
401 |
-
async function fetchCompanies() {
|
402 |
-
try {
|
403 |
-
const response = await fetch('/api/companies');
|
404 |
-
if (!response.ok) {
|
405 |
-
throw new Error('Network response was not ok');
|
406 |
-
}
|
407 |
-
const data = await response.json();
|
408 |
-
displayCompanies(data.companies);
|
409 |
-
} catch (error) {
|
410 |
-
console.error('Error fetching companies:', error);
|
411 |
-
}
|
412 |
-
}
|
413 |
-
|
414 |
-
function displayCompanies(companies) {
|
415 |
-
const companySelect = document.getElementById('company');
|
416 |
-
companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
|
417 |
-
companies.forEach(company => {
|
418 |
-
const option = document.createElement('option');
|
419 |
-
option.value = company.name;
|
420 |
-
option.textContent = company.name;
|
421 |
-
companySelect.appendChild(option);
|
422 |
-
});
|
423 |
-
}
|
424 |
-
function clearFormFields() {
|
425 |
-
document.getElementById('scenario').value = "";
|
426 |
-
document.getElementById('prompt').value = "";
|
427 |
-
document.getElementById('comments').value = "";
|
428 |
-
|
429 |
-
}
|
430 |
-
|
431 |
-
|
432 |
-
</script>
|
433 |
-
</body>
|
434 |
-
|
435 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|