Skip to content

Commit d35ea02

Browse files
WangYixuan12WangYixuan12
committed
fix
1 parent 20e427e commit d35ea02

8 files changed

Lines changed: 449 additions & 118 deletions

File tree

‎app.js‎

Lines changed: 264 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
let isProcessing = false; // Track if we're currently processing a request
22
let pollingInterval = null; // Track the polling interval
3+
let pollingIntervalBattery = null; // Track the polling interval for battery scenario
34

45
// Function to check if Plotly is loaded
56
function isPlotlyReady() {
@@ -73,24 +74,29 @@ function visualizePointCloud(points) {
7374
async function fetchIntermediateResults() {
7475
try {
7576
// Fetch generated code
76-
const codeResponse = await fetch('http://localhost:8080/media/code/generated_code.py');
77+
// const codeResponse = await fetch('http://localhost:8080/media/code/generated_code.py');
78+
const codeResponse = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/code/generated_code.py');
7779
if (codeResponse.ok) {
7880
const code = await codeResponse.text();
7981
const generatedCode = document.getElementById('generated-code');
8082
generatedCode.textContent = code;
8183
}
8284

8385
// Fetch detection images
84-
const img1Response = await fetch('http://localhost:8080/media/images/detection_img_0.png');
86+
// const img1Response = await fetch('http://localhost:8080/media/images/detection_img_0.png');
87+
const img1Response = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/images/detection_img_0.png');
8588
if (img1Response.ok) {
86-
const rgbImage = document.getElementById('rgb-detection');
87-
rgbImage.src = 'http://localhost:8080/media/images/detection_img_0.png?' + new Date().getTime(); // Add timestamp to prevent caching
89+
const rgbImage = document.getElementById('detection-img-0');
90+
// rgbImage.src = 'http://localhost:8080/media/images/detection_img_0.png?' + new Date().getTime(); // Add timestamp to prevent caching
91+
rgbImage.src = 'https://codediffuser-demo-55622474665.us-central1.run.app/media/images/detection_img_0.png?' + new Date().getTime(); // Add timestamp to prevent caching
8892
}
8993

90-
const img2Response = await fetch('http://localhost:8080/media/images/detection_img_1.png');
94+
// const img2Response = await fetch('http://localhost:8080/media/images/detection_img_1.png');
95+
const img2Response = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/images/detection_img_1.png');
9196
if (img2Response.ok) {
92-
const depthImage = document.getElementById('depth-detection');
93-
depthImage.src = 'http://localhost:8080/media/images/detection_img_1.png?' + new Date().getTime(); // Add timestamp to prevent caching
97+
const depthImage = document.getElementById('detection-img-1');
98+
// depthImage.src = 'http://localhost:8080/media/images/detection_img_1.png?' + new Date().getTime(); // Add timestamp to prevent caching
99+
depthImage.src = 'https://codediffuser-demo-55622474665.us-central1.run.app/media/images/detection_img_1.png?' + new Date().getTime(); // Add timestamp to prevent caching
94100
}
95101
} catch (error) {
96102
console.error('Error fetching intermediate results:', error);
@@ -141,7 +147,8 @@ async function processInstruction() {
141147

142148
try {
143149
// Call the server endpoint
144-
const response = await fetch('http://localhost:8080/generate', {
150+
// const response = await fetch('http://localhost:8080/generate', {
151+
const response = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/generate', {
145152
method: 'POST',
146153
headers: {
147154
'Content-Type': 'application/json',
@@ -170,7 +177,8 @@ async function processInstruction() {
170177
alert('Error: ' + error.message);
171178
}
172179
// Show a precomputed point cloud as fallback
173-
fetch('http://localhost:8080/media/pcd/precomputed.json')
180+
// fetch('http://localhost:8080/media/pcd/precomputed.json')
181+
fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/pcd/precomputed.json')
174182
.then(response => {
175183
if (!response.ok) {
176184
throw new Error('HTTP error ' + response.status);
@@ -200,7 +208,8 @@ document.addEventListener('DOMContentLoaded', function() {
200208
// Wait for Plotly to load before showing initial visualization
201209
waitForPlotly(() => {
202210
console.log('Fetching precomputed point cloud...');
203-
fetch('http://localhost:8080/media/pcd/precomputed.json')
211+
// fetch('http://localhost:8080/media/pcd/precomputed.json')
212+
fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/pcd/precomputed.json')
204213
.then(response => {
205214
if (!response.ok) {
206215
throw new Error('HTTP error ' + response.status);
@@ -236,25 +245,264 @@ function handleInstructionSelect() {
236245
}
237246
}
238247

248+
// Function to fetch intermediate results for battery scenario
249+
async function fetchIntermediateResultsBattery() {
250+
try {
251+
// Fetch generated code
252+
// const codeResponse = await fetch('http://localhost:8080/media/code/battery/generated_code.py');
253+
const codeResponse = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/code/battery/generated_code.py');
254+
if (codeResponse.ok) {
255+
const code = await codeResponse.text();
256+
const generatedCode = document.getElementById('generated-code-battery');
257+
generatedCode.textContent = code;
258+
}
259+
260+
// Fetch detection images
261+
// const img1Response = await fetch('http://localhost:8080/media/images/battery/detection_img_0.png');
262+
const img1Response = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/images/battery/detection_img_0.png');
263+
if (img1Response.ok) {
264+
const rgbImage = document.getElementById('detection-img-0-battery');
265+
// rgbImage.src = 'http://localhost:8080/media/images/battery/detection_img_0.png?' + new Date().getTime();
266+
rgbImage.src = 'https://codediffuser-demo-55622474665.us-central1.run.app/media/images/battery/detection_img_0.png?' + new Date().getTime();
267+
}
268+
269+
// const img2Response = await fetch('http://localhost:8080/media/images/battery/detection_img_1.png');
270+
const img2Response = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/images/battery/detection_img_1.png');
271+
if (img2Response.ok) {
272+
const depthImage = document.getElementById('detection-img-1-battery');
273+
// depthImage.src = 'http://localhost:8080/media/images/battery/detection_img_1.png?' + new Date().getTime();
274+
depthImage.src = 'https://codediffuser-demo-55622474665.us-central1.run.app/media/images/battery/detection_img_1.png?' + new Date().getTime();
275+
}
276+
} catch (error) {
277+
console.error('Error fetching intermediate results for battery scenario:', error);
278+
}
279+
}
280+
281+
// Function to process battery instruction
282+
async function processInstructionBattery() {
283+
if (isProcessing) return;
284+
285+
const instructionInput = document.getElementById('instruction-battery');
286+
const submitButton = document.querySelector('#loading-battery').previousElementSibling;
287+
const loadingSpinner = document.getElementById('loading-battery');
288+
289+
if (!instructionInput.value) {
290+
alert('Please enter an instruction');
291+
return;
292+
}
293+
294+
isProcessing = true;
295+
instructionInput.disabled = true;
296+
submitButton.disabled = true;
297+
loadingSpinner.style.display = 'block';
298+
299+
const controller = new AbortController();
300+
const timeoutId = setTimeout(() => controller.abort(), 3600000);
301+
302+
try {
303+
// const response = await fetch('http://localhost:8080/generate_battery', {
304+
const response = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/generate_battery', {
305+
method: 'POST',
306+
headers: {
307+
'Content-Type': 'application/json',
308+
'Accept': 'application/json'
309+
},
310+
body: JSON.stringify({ instruction: instructionInput.value }),
311+
signal: controller.signal
312+
});
313+
314+
clearTimeout(timeoutId);
315+
316+
if (!response.ok) {
317+
const data = await response.json();
318+
throw new Error(data.error || 'Request failed');
319+
}
320+
321+
const data = await response.json();
322+
visualizePointCloudBattery(data.points);
323+
324+
} catch (error) {
325+
console.error('Error:', error);
326+
if (error.name === 'AbortError') {
327+
alert('Request timed out. Please try again.');
328+
} else {
329+
alert('Error: ' + error.message);
330+
}
331+
// fetch('http://localhost:8080/media/pcd/battery/precomputed.json')
332+
fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/pcd/battery/precomputed.json')
333+
.then(response => {
334+
if (!response.ok) {
335+
throw new Error('HTTP error ' + response.status);
336+
}
337+
return response.json();
338+
})
339+
.then(data => {
340+
console.log('Loaded battery data:', data);
341+
visualizePointCloudBattery(data);
342+
})
343+
.catch(err => {
344+
console.error('Failed to load precomputed battery point cloud:', err);
345+
alert('Failed to load precomputed battery point cloud: ' + err.message);
346+
});
347+
} finally {
348+
isProcessing = false;
349+
instructionInput.disabled = false;
350+
submitButton.disabled = false;
351+
loadingSpinner.style.display = 'none';
352+
clearTimeout(timeoutId);
353+
}
354+
}
355+
356+
// Function to visualize battery point cloud
357+
function visualizePointCloudBattery(points) {
358+
if (!isPlotlyReady()) {
359+
waitForPlotly(() => visualizePointCloudBattery(points));
360+
return;
361+
}
362+
363+
const x = points.map(p => p[0]);
364+
const y = points.map(p => p[1]);
365+
const z = points.map(p => p[2]);
366+
const colors = points.map(p => `rgb(${p[3]},${p[4]},${p[5]})`);
367+
368+
const trace = {
369+
type: 'scatter3d',
370+
mode: 'markers',
371+
x: x,
372+
y: y,
373+
z: z,
374+
marker: {
375+
size: 3,
376+
color: colors,
377+
opacity: 1.0,
378+
}
379+
};
380+
381+
const layout = {
382+
scene: {
383+
xaxis: { title: 'X' },
384+
yaxis: { title: 'Y' },
385+
zaxis: { title: 'Z' }
386+
},
387+
margin: {
388+
l: 0,
389+
r: 0,
390+
b: 0,
391+
t: 0
392+
}
393+
};
394+
395+
try {
396+
Plotly.newPlot('visualization-battery', [trace], layout);
397+
} catch (error) {
398+
console.error('Error plotting battery visualization:', error);
399+
alert('Error creating battery visualization. Please try again.');
400+
}
401+
}
402+
403+
// Function to handle battery instruction selection
404+
function handleInstructionSelectBattery() {
405+
const select = document.getElementById('instruction-select-battery');
406+
const input = document.getElementById('instruction-battery');
407+
408+
if (select.value === 'custom') {
409+
input.value = '';
410+
input.disabled = false;
411+
input.focus();
412+
} else {
413+
input.value = select.value;
414+
input.disabled = true;
415+
processInstructionBattery();
416+
}
417+
}
418+
239419
// Initialize the page
240-
document.addEventListener('DOMContentLoaded', () => {
420+
document.addEventListener('DOMContentLoaded', function() {
421+
// Wait for Plotly to load before showing initial visualization
422+
waitForPlotly(() => {
423+
// Initialize first scenario
424+
console.log('Fetching precomputed point cloud...');
425+
// fetch('http://localhost:8080/media/pcd/precomputed.json')
426+
fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/pcd/precomputed.json')
427+
.then(response => {
428+
if (!response.ok) {
429+
throw new Error('HTTP error ' + response.status);
430+
}
431+
return response.json();
432+
})
433+
.then(data => {
434+
console.log('Loaded data:', data);
435+
visualizePointCloud(data);
436+
})
437+
.catch(err => {
438+
console.error('Failed to load precomputed point cloud:', err);
439+
alert('Failed to load precomputed point cloud: ' + err.message);
440+
});
441+
442+
// Initialize second scenario
443+
console.log('Fetching precomputed battery point cloud...');
444+
// fetch('http://localhost:8080/media/pcd/battery/precomputed.json')
445+
fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/pcd/battery/precomputed.json')
446+
.then(response => {
447+
if (!response.ok) {
448+
throw new Error('HTTP error ' + response.status);
449+
}
450+
return response.json();
451+
})
452+
.then(data => {
453+
console.log('Loaded battery data:', data);
454+
visualizePointCloudBattery(data);
455+
})
456+
.catch(err => {
457+
console.error('Failed to load precomputed battery point cloud:', err);
458+
alert('Failed to load precomputed battery point cloud: ' + err.message);
459+
});
460+
});
461+
462+
// Initialize input handlers
241463
const input = document.getElementById('instruction');
242464
const select = document.getElementById('instruction-select');
465+
const inputBattery = document.getElementById('instruction-battery');
466+
const selectBattery = document.getElementById('instruction-select-battery');
243467

244-
// Add event listener for Enter key
245468
input.addEventListener('keypress', (e) => {
246469
if (e.key === 'Enter') {
247470
processInstruction();
248471
}
249472
});
250473

251-
// Initialize with custom instruction selected
474+
inputBattery.addEventListener('keypress', (e) => {
475+
if (e.key === 'Enter') {
476+
processInstructionBattery();
477+
}
478+
});
479+
252480
select.value = 'custom';
481+
selectBattery.value = 'custom';
253482
input.disabled = false;
483+
inputBattery.disabled = false;
254484

255-
// Load initial media files
485+
// Load initial media files for both scenarios
256486
fetchIntermediateResults();
487+
fetchIntermediateResultsBattery();
257488

258-
// Start polling for intermediate results immediately
489+
// Start polling for both scenarios
259490
startPolling();
260-
});
491+
startPollingBattery();
492+
});
493+
494+
// Function to start polling for battery scenario
495+
function startPollingBattery() {
496+
if (pollingIntervalBattery) {
497+
clearInterval(pollingIntervalBattery);
498+
}
499+
pollingIntervalBattery = setInterval(fetchIntermediateResultsBattery, 5000);
500+
}
501+
502+
// Function to stop polling for battery scenario
503+
function stopPollingBattery() {
504+
if (pollingIntervalBattery) {
505+
clearInterval(pollingIntervalBattery);
506+
pollingIntervalBattery = null;
507+
}
508+
}

0 commit comments

Comments
 (0)