Skip to content

Commit 189534d

Browse files
WangYixuan12WangYixuan12
committed
up
1 parent 76ddd87 commit 189534d

2 files changed

Lines changed: 46 additions & 100 deletions

File tree

‎app.js‎

Lines changed: 40 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
// Precomputed point clouds
2-
const POINT_CLOUDS = {
3-
1: generateSphere(1000),
4-
2: generateCube(1000),
5-
3: generateTorus(1000),
6-
4: generateCylinder(1000),
7-
5: generatePyramid(1000)
8-
};
9-
101
let isProcessing = false; // Track if we're currently processing a request
112

123
// Function to check if Plotly is loaded
@@ -40,6 +31,7 @@ function visualizePointCloud(points) {
4031
const x = points.map(p => p[0]);
4132
const y = points.map(p => p[1]);
4233
const z = points.map(p => p[2]);
34+
const colors = points.map(p => `rgb(${p[3]},${p[4]},${p[5]})`);
4335

4436
const trace = {
4537
type: 'scatter3d',
@@ -48,15 +40,13 @@ function visualizePointCloud(points) {
4840
y: y,
4941
z: z,
5042
marker: {
51-
size: 2,
52-
color: z,
53-
colorscale: 'Viridis',
54-
opacity: 0.8
43+
size: 3,
44+
color: colors,
45+
opacity: 1.0,
5546
}
5647
};
5748

5849
const layout = {
59-
title: '3D Point Cloud Visualization',
6050
scene: {
6151
xaxis: { title: 'X' },
6252
yaxis: { title: 'Y' },
@@ -66,7 +56,7 @@ function visualizePointCloud(points) {
6656
l: 0,
6757
r: 0,
6858
b: 0,
69-
t: 30
59+
t: 0
7060
}
7161
};
7262

@@ -99,10 +89,11 @@ async function processInstruction() {
9989

10090
// Setup request timeout
10191
const controller = new AbortController();
102-
const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
92+
const timeoutId = setTimeout(() => controller.abort(), 3600000); // 1 hour timeout
10393

10494
try {
10595
// Call the server endpoint
96+
// const response = await fetch('http://localhost:8080/generate', {
10697
const response = await fetch('https://yixuanwang.me/generate', {
10798
method: 'POST',
10899
headers: {
@@ -131,7 +122,22 @@ async function processInstruction() {
131122
alert('Error: ' + error.message);
132123
}
133124
// Show a precomputed point cloud as fallback
134-
visualizePointCloud(POINT_CLOUDS[1]);
125+
// fetch('http://localhost:8080/media/pcd/precomputed.json')
126+
fetch('https://yixuanwang.me/media/pcd/precomputed.json')
127+
.then(response => {
128+
if (!response.ok) {
129+
throw new Error('HTTP error ' + response.status);
130+
}
131+
return response.json();
132+
})
133+
.then(data => {
134+
console.log('Loaded data:', data);
135+
visualizePointCloud(data);
136+
})
137+
.catch(err => {
138+
console.error('Failed to load precomputed point cloud:', err);
139+
alert('Failed to load precomputed point cloud: ' + err.message);
140+
});
135141
} finally {
136142
// Re-enable UI elements and hide loading state
137143
isProcessing = false;
@@ -142,91 +148,27 @@ async function processInstruction() {
142148
}
143149
}
144150

145-
// Point cloud generation functions
146-
function generateSphere(numPoints) {
147-
const points = [];
148-
for (let i = 0; i < numPoints; i++) {
149-
const theta = Math.random() * 2 * Math.PI;
150-
const phi = Math.acos(2 * Math.random() - 1);
151-
const r = 1;
152-
153-
const x = r * Math.sin(phi) * Math.cos(theta);
154-
const y = r * Math.sin(phi) * Math.sin(theta);
155-
const z = r * Math.cos(phi);
156-
157-
points.push([x, y, z]);
158-
}
159-
return points;
160-
}
161-
162-
function generateCube(numPoints) {
163-
const points = [];
164-
for (let i = 0; i < numPoints; i++) {
165-
const x = Math.random() * 2 - 1;
166-
const y = Math.random() * 2 - 1;
167-
const z = Math.random() * 2 - 1;
168-
points.push([x, y, z]);
169-
}
170-
return points;
171-
}
172-
173-
function generateTorus(numPoints) {
174-
const points = [];
175-
const R = 1; // major radius
176-
const r = 0.3; // minor radius
177-
for (let i = 0; i < numPoints; i++) {
178-
const theta = Math.random() * 2 * Math.PI;
179-
const phi = Math.random() * 2 * Math.PI;
180-
181-
const x = (R + r * Math.cos(phi)) * Math.cos(theta);
182-
const y = (R + r * Math.cos(phi)) * Math.sin(theta);
183-
const z = r * Math.sin(phi);
184-
185-
points.push([x, y, z]);
186-
}
187-
return points;
188-
}
189-
190-
function generateCylinder(numPoints) {
191-
const points = [];
192-
const height = 2;
193-
const radius = 0.5;
194-
for (let i = 0; i < numPoints; i++) {
195-
const theta = Math.random() * 2 * Math.PI;
196-
const h = Math.random() * height - height/2;
197-
198-
const x = radius * Math.cos(theta);
199-
const y = radius * Math.sin(theta);
200-
const z = h;
201-
202-
points.push([x, y, z]);
203-
}
204-
return points;
205-
}
206-
207-
function generatePyramid(numPoints) {
208-
const points = [];
209-
const size = 2;
210-
for (let i = 0; i < numPoints; i++) {
211-
const x = Math.random() * size - size/2;
212-
const y = Math.random() * size - size/2;
213-
const z = Math.random() * size;
214-
215-
// Create pyramid shape by scaling z based on distance from center
216-
const distFromCenter = Math.sqrt(x*x + y*y);
217-
const scale = 1 - (distFromCenter / (size/2));
218-
const finalZ = z * scale;
219-
220-
points.push([x, y, finalZ]);
221-
}
222-
return points;
223-
}
224-
225151
// Initialize visualization when the page loads
226152
document.addEventListener('DOMContentLoaded', function() {
227153
// Wait for Plotly to load before showing initial visualization
228154
waitForPlotly(() => {
229-
visualizePointCloud(POINT_CLOUDS[1]); // Show initial sphere
155+
console.log('Fetching precomputed point cloud...');
156+
// fetch('http://localhost:8080/media/pcd/precomputed.json')
157+
fetch('https://yixuanwang.me/media/pcd/precomputed.json')
158+
.then(response => {
159+
if (!response.ok) {
160+
throw new Error('HTTP error ' + response.status);
161+
}
162+
return response.json();
163+
})
164+
.then(data => {
165+
console.log('Loaded data:', data);
166+
visualizePointCloud(data);
167+
})
168+
.catch(err => {
169+
console.error('Failed to load precomputed point cloud:', err);
170+
alert('Failed to load precomputed point cloud: ' + err.message);
171+
});
230172
});
231173
});
232174

‎index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,9 +263,14 @@ <h2 class="title is-3">Method</h2>
263263
</div>
264264
<div class="columns">
265265
<!-- first row: instruction -->
266-
<div class="columns" style="margin-bottom: -10rem;">
266+
<div class="columns" style="margin-bottom: -3rem;">
267267
<div class="column is-6 is-offset-5" style="max-width: 100%;">
268268
<div style="width: 60%; min-width: 300px; max-width: 500px;">
269+
<div style="margin-bottom: 0.25rem; text-align: left;">
270+
<span style="font-size: 0.85em; color: #888; white-space: nowrap;">
271+
⏳ It can take up to one minute to get results.
272+
</span>
273+
</div>
269274
<div class="field has-addons" style="position: relative;">
270275
<div class="control has-icons-left is-expanded">
271276
<input type="text"
@@ -303,7 +308,6 @@ <h2 class="title is-3">Method</h2>
303308
<img src="media/images/method.png" alt="Method Overview" style="max-width: 90%; max-height: 90%; object-fit: contain;">
304309
</figure>
305310
</div>
306-
<!-- Right column: Point cloud visualization only -->
307311
<div class="column is-3">
308312
<div id="visualization" style="width: 100%; height: 400px; display: flex; align-items: center; justify-content: center;"></div>
309313
</div>

0 commit comments

Comments
 (0)