Skip to content

Commit 20e427e

Browse files
WangYixuan12WangYixuan12
committed
multi-choice
1 parent 667095d commit 20e427e

6 files changed

Lines changed: 245 additions & 80 deletions

File tree

‎app.js‎

Lines changed: 89 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
let isProcessing = false; // Track if we're currently processing a request
2+
let pollingInterval = null; // Track the polling interval
23

34
// Function to check if Plotly is loaded
45
function isPlotlyReady() {
@@ -68,6 +69,53 @@ function visualizePointCloud(points) {
6869
}
6970
}
7071

72+
// Function to fetch intermediate results
73+
async function fetchIntermediateResults() {
74+
try {
75+
// Fetch generated code
76+
const codeResponse = await fetch('http://localhost:8080/media/code/generated_code.py');
77+
if (codeResponse.ok) {
78+
const code = await codeResponse.text();
79+
const generatedCode = document.getElementById('generated-code');
80+
generatedCode.textContent = code;
81+
}
82+
83+
// Fetch detection images
84+
const img1Response = await fetch('http://localhost:8080/media/images/detection_img_0.png');
85+
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
88+
}
89+
90+
const img2Response = await fetch('http://localhost:8080/media/images/detection_img_1.png');
91+
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
94+
}
95+
} catch (error) {
96+
console.error('Error fetching intermediate results:', error);
97+
}
98+
}
99+
100+
// Function to start polling for intermediate results
101+
function startPolling() {
102+
// Clear any existing polling
103+
if (pollingInterval) {
104+
clearInterval(pollingInterval);
105+
}
106+
107+
// Start new polling
108+
pollingInterval = setInterval(fetchIntermediateResults, 5000); // Poll every 5 seconds
109+
}
110+
111+
// Function to stop polling
112+
function stopPolling() {
113+
if (pollingInterval) {
114+
clearInterval(pollingInterval);
115+
pollingInterval = null;
116+
}
117+
}
118+
71119
// Function to generate point cloud based on instruction
72120
async function processInstruction() {
73121
if (isProcessing) return; // Prevent multiple simultaneous submissions
@@ -93,9 +141,7 @@ async function processInstruction() {
93141

94142
try {
95143
// Call the server endpoint
96-
// const response = await fetch('http://localhost:8080/generate', {
97-
// const response = await fetch('https://yixuanwang.me/generate', {
98-
const response = await fetch('https://codediffuser-demo-55622474665.us-central1.run.app/generate', {
144+
const response = await fetch('http://localhost:8080/generate', {
99145
method: 'POST',
100146
headers: {
101147
'Content-Type': 'application/json',
@@ -115,6 +161,7 @@ async function processInstruction() {
115161
const data = await response.json();
116162
// Visualize the point cloud
117163
visualizePointCloud(data.points);
164+
118165
} catch (error) {
119166
console.error('Error:', error);
120167
if (error.name === 'AbortError') {
@@ -123,9 +170,7 @@ async function processInstruction() {
123170
alert('Error: ' + error.message);
124171
}
125172
// Show a precomputed point cloud as fallback
126-
// fetch('http://localhost:8080/media/pcd/precomputed.json')
127-
// fetch('https://yixuanwang.me/media/pcd/precomputed.json')
128-
fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/pcd/precomputed.json')
173+
fetch('http://localhost:8080/media/pcd/precomputed.json')
129174
.then(response => {
130175
if (!response.ok) {
131176
throw new Error('HTTP error ' + response.status);
@@ -155,9 +200,7 @@ document.addEventListener('DOMContentLoaded', function() {
155200
// Wait for Plotly to load before showing initial visualization
156201
waitForPlotly(() => {
157202
console.log('Fetching precomputed point cloud...');
158-
// fetch('http://localhost:8080/media/pcd/precomputed.json')
159-
// fetch('https://yixuanwang.me/media/pcd/precomputed.json')
160-
fetch('https://codediffuser-demo-55622474665.us-central1.run.app/media/pcd/precomputed.json')
203+
fetch('http://localhost:8080/media/pcd/precomputed.json')
161204
.then(response => {
162205
if (!response.ok) {
163206
throw new Error('HTTP error ' + response.status);
@@ -175,9 +218,43 @@ document.addEventListener('DOMContentLoaded', function() {
175218
});
176219
});
177220

178-
// Add event listener for Enter key
179-
document.getElementById('instruction').addEventListener('keypress', function(e) {
180-
if (e.key === 'Enter') {
221+
// Function to handle instruction selection from dropdown
222+
function handleInstructionSelect() {
223+
const select = document.getElementById('instruction-select');
224+
const input = document.getElementById('instruction');
225+
226+
if (select.value === 'custom') {
227+
// Enable input for custom instruction
228+
input.value = '';
229+
input.disabled = false;
230+
input.focus();
231+
} else {
232+
// Set the selected example
233+
input.value = select.value;
234+
input.disabled = true;
181235
processInstruction();
182236
}
237+
}
238+
239+
// Initialize the page
240+
document.addEventListener('DOMContentLoaded', () => {
241+
const input = document.getElementById('instruction');
242+
const select = document.getElementById('instruction-select');
243+
244+
// Add event listener for Enter key
245+
input.addEventListener('keypress', (e) => {
246+
if (e.key === 'Enter') {
247+
processInstruction();
248+
}
249+
});
250+
251+
// Initialize with custom instruction selected
252+
select.value = 'custom';
253+
input.disabled = false;
254+
255+
// Load initial media files
256+
fetchIntermediateResults();
257+
258+
// Start polling for intermediate results immediately
259+
startPolling();
183260
});

‎index.html‎

Lines changed: 117 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -156,12 +156,12 @@ <h1 class="title is-1 publication-title">CodeDiffuser: Attention-Enhanced Diffus
156156
<div class="container is-fullhd">
157157
<div class="hero-body">
158158
<div class="container">
159-
<!-- <div class="columns is-vcentered is-centered">
159+
<div class="columns is-vcentered is-centered">
160160
<video id="teaser" autoplay muted loop height="60%" width="60%">
161161
<source src="media/video/teaser.mp4" type="video/mp4">
162-
</video> -->
163-
<div class="publication-video">
164-
<iframe src="https://www.youtube.com/embed/cC81EqspCok" width="60%" height="60%" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
162+
</video>
163+
<!-- <div class="publication-video">
164+
<iframe src="https://www.youtube.com/embed/cC81EqspCok" width="60%" height="60%" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
165165
</div>
166166
<br>
167167
<br>
@@ -173,7 +173,118 @@ <h2 class="subtitle has-text-centered">
173173
</div>
174174
</section>
175175

176-
<!-- <section class="hero is-light is-small">
176+
177+
<section class="section">
178+
<div class="container">
179+
<div class="columns is-centered has-text-centered">
180+
<div class="column is-12">
181+
<h2 class="title is-3">Interactive Method Visualization</h2>
182+
</div>
183+
</div>
184+
<div class="columns">
185+
<!-- first row: instruction -->
186+
<div class="columns" style="margin-bottom: -1rem;">
187+
<div class="column is-6 is-offset-5" style="max-width: 100%;">
188+
<div style="width: 60%; min-width: 300px; max-width: 500px;">
189+
<div style="margin-bottom: 0.25rem; text-align: left;">
190+
<span style="font-size: 0.85em; color: #888; white-space: nowrap;">
191+
⏳ It can take up to one minute to get results.
192+
</span>
193+
</div>
194+
<div class="field has-addons" style="position: relative;">
195+
<div class="control has-icons-left is-expanded">
196+
<input type="text"
197+
id="instruction"
198+
class="input is-small"
199+
style="font-size: 0.875rem;"
200+
placeholder="Hang the blue mug on the left branch."
201+
autocomplete="off"
202+
spellcheck="false">
203+
<span class="icon is-left is-small">
204+
<i class="fas fa-terminal"></i>
205+
</span>
206+
</div>
207+
<div class="control">
208+
<button class="button is-primary is-small"
209+
onclick="processInstruction()"
210+
style="font-size: 0.875rem; min-width: 70px;">
211+
<span>Enter</span>
212+
</button>
213+
</div>
214+
<div class="control" id="loading" style="display: none; position: absolute; right: -30px; top: 50%; transform: translateY(-50%);">
215+
<span class="icon is-small">
216+
<i class="fas fa-circle-notch fa-spin"></i>
217+
</span>
218+
</div>
219+
</div>
220+
<!-- Example instructions -->
221+
<div style="margin-top: 1rem; text-align: left;">
222+
<p style="font-size: 0.85em; color: #666; margin-bottom: 0.5rem;">Select an example or enter custom instruction:</p>
223+
<div class="field">
224+
<div class="control">
225+
<div class="select is-small is-fullwidth">
226+
<select id="instruction-select" onchange="handleInstructionSelect()">
227+
<option value="custom">Custom instruction</option>
228+
<option value="Hang the blue mug on the left branch">Hang the blue mug on the left branch</option>
229+
<option value="HHang the red mug on the branch furthest to it">Hang the red mug on the branch furthest to it</option>
230+
<option value="Hang the red mug on one branch, sorry, the blue one.">Hang the red mug on one branch, sorry, the blue one.</option>
231+
<option value="I want to use the blue mug. Hang the red mug on one branch.">I want to use the blue mug. Hang the red mug on one branch.</option>
232+
</select>
233+
</div>
234+
</div>
235+
</div>
236+
</div>
237+
</div>
238+
</div>
239+
</div>
240+
</div>
241+
<!-- second row: method and point cloud visualization -->
242+
<div class="columns is-centered">
243+
<div class="column is-8">
244+
<figure class="image" style="width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; ">
245+
<img src="media/images/method.png" alt="Method Overview" style="max-width: 90%; max-height: 90%; object-fit: contain;">
246+
</figure>
247+
</div>
248+
<div class="column is-3">
249+
<div id="visualization" style="width: 100%; height: 400px; display: flex; align-items: center; justify-content: center;"></div>
250+
</div>
251+
</div>
252+
<!-- Intermediate results section -->
253+
<div class="columns is-centered" style="margin-top: 2rem;">
254+
<div class="column is-8">
255+
<div class="box">
256+
<h3 class="title is-5">Intermediate Results</h3>
257+
<div class="columns">
258+
<div class="column is-6">
259+
<h4 class="title is-6">Generated Code</h4>
260+
<pre id="generated-code" style="background-color: #f5f5f5; padding: 1rem; border-radius: 4px; max-height: 200px; overflow-y: auto;">
261+
// Code will appear here
262+
</pre>
263+
</div>
264+
<div class="column is-6">
265+
<h4 class="title is-6">Object Detection</h4>
266+
<div id="detection-results" style="background-color: #f5f5f5; padding: 1rem; border-radius: 4px; max-height: 200px; overflow-y: auto;">
267+
<div class="columns is-multiline">
268+
<div class="column is-6">
269+
<p class="has-text-centered mb-2">Detection 1</p>
270+
<img id="rgb-detection" src="" alt="RGB Detection" style="max-width: 100%; height: auto;">
271+
</div>
272+
<div class="column is-6">
273+
<p class="has-text-centered mb-2">Detection 2</p>
274+
<img id="depth-detection" src="" alt="Depth Detection" style="max-width: 100%; height: auto;">
275+
</div>
276+
</div>
277+
</div>
278+
</div>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
283+
</div>
284+
</section>
285+
286+
287+
<section class="hero is-light is-small">
177288
<div class="hero-body">
178289
<div class="container">
179290
<div id="results-carousel" class="carousel results-carousel">
@@ -210,8 +321,7 @@ <h2 class="subtitle has-text-centered">
210321
</div>
211322
</div>
212323
</div>
213-
</section> -->
214-
324+
</section>
215325

216326
<section class="section">
217327
<!-- Abstract. -->
@@ -254,67 +364,6 @@ <h2 class="title is-3">Video</h2>
254364

255365
</section>
256366

257-
<section class="section">
258-
<div class="container">
259-
<div class="columns is-centered has-text-centered">
260-
<div class="column is-12">
261-
<h2 class="title is-3">Method</h2>
262-
</div>
263-
</div>
264-
<div class="columns">
265-
<!-- first row: instruction -->
266-
<div class="columns" style="margin-bottom: -3rem;">
267-
<div class="column is-6 is-offset-5" style="max-width: 100%;">
268-
<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>
274-
<div class="field has-addons" style="position: relative;">
275-
<div class="control has-icons-left is-expanded">
276-
<input type="text"
277-
id="instruction"
278-
class="input is-small"
279-
style="font-size: 0.875rem;"
280-
placeholder="Hang the blue mug on the left branch."
281-
autocomplete="off"
282-
spellcheck="false">
283-
<span class="icon is-left is-small">
284-
<i class="fas fa-terminal"></i>
285-
</span>
286-
</div>
287-
<div class="control">
288-
<button class="button is-primary is-small"
289-
onclick="processInstruction()"
290-
style="font-size: 0.875rem; min-width: 70px;">
291-
<span>Enter</span>
292-
</button>
293-
</div>
294-
<div class="control" id="loading" style="display: none; position: absolute; right: -30px; top: 50%; transform: translateY(-50%);">
295-
<span class="icon is-small">
296-
<i class="fas fa-circle-notch fa-spin"></i>
297-
</span>
298-
</div>
299-
</div>
300-
</div>
301-
</div>
302-
</div>
303-
</div>
304-
<!-- second row: method and point cloud visualization -->
305-
<div class="columns is-centered">
306-
<div class="column is-8">
307-
<figure class="image" style="width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; ">
308-
<img src="media/images/method.png" alt="Method Overview" style="max-width: 90%; max-height: 90%; object-fit: contain;">
309-
</figure>
310-
</div>
311-
<div class="column is-3">
312-
<div id="visualization" style="width: 100%; height: 400px; display: flex; align-items: center; justify-content: center;"></div>
313-
</div>
314-
</div>
315-
</div>
316-
</section>
317-
318367
<section class="section">
319368
<div class="container">
320369
<div class="columns is-centered has-text-centered">

0 commit comments

Comments
 (0)