Skip to content

Commit a68c9a9

Browse files
Chenxi-JiChenxi-Ji
committed
update visualization
1 parent e31d7ed commit a68c9a9

9 files changed

Lines changed: 346 additions & 0 deletions

File tree

‎assets/Interact/airplane_grey/x/interactive_plot.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/Interact/airplane_grey/y/interactive_plot.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/Interact/airplane_grey/z/interactive_plot.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/Interact/chair/y/interactive_plot.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/Interact/dozer/y/interactive_plot.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎render_static.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Interactive Plot Viewer</title>
7+
<link rel="icon" href="data:," type="image/x-icon"> <!-- Suppress favicon.ico request -->
8+
<link rel="stylesheet" href="style_static.css"> <!-- Link to external CSS -->
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
10+
</head>
11+
<body>
12+
<div class="grid-container">
13+
<!-- Interactive JSON 1 -->
14+
<div class="interactive-container" id="container-1">
15+
<div class="image-container">
16+
<div>
17+
<h3>Lower Bound</h3>
18+
<img id="img-lower-1" src="" alt="Lower Bound">
19+
</div>
20+
<div>
21+
<h3>Ref Image</h3>
22+
<img id="img-ref-1" src="" alt="Ref Image">
23+
</div>
24+
<div>
25+
<h3>Upper Bound</h3>
26+
<img id="img-upper-1" src="" alt="Upper Bound">
27+
</div>
28+
</div>
29+
<div class="slider-container">
30+
<label class="slider-label" for="slider-pose-1">Camera Pose:</label>
31+
<input type="range" id="slider-pose-1" class="slider" min="0" max="9" step="1" value="5">
32+
<span id="pose-value-1">0.50</span>
33+
</div>
34+
<div class="slider-container">
35+
<label class="slider-label" for="slider-range-1">Perturbation Range:</label>
36+
<input type="range" id="slider-range-1" class="slider" min="0" max="9" step="1" value="0">
37+
<span id="range-value-1">0.00</span>
38+
</div>
39+
</div>
40+
41+
<!-- Interactive JSON 2 -->
42+
<div class="interactive-container" id="container-2">
43+
<div class="image-container">
44+
<div>
45+
<h3>Lower Bound</h3>
46+
<img id="img-lower-2" src="" alt="Lower Bound">
47+
</div>
48+
<div>
49+
<h3>Ref Image</h3>
50+
<img id="img-ref-2" src="" alt="Ref Image">
51+
</div>
52+
<div>
53+
<h3>Upper Bound</h3>
54+
<img id="img-upper-2" src="" alt="Upper Bound">
55+
</div>
56+
</div>
57+
<div class="slider-container">
58+
<label class="slider-label" for="slider-pose-2">Camera Pose:</label>
59+
<input type="range" id="slider-pose-2" class="slider" min="0" max="9" step="1" value="5">
60+
<span id="pose-value-2">0.50</span>
61+
</div>
62+
<div class="slider-container">
63+
<label class="slider-label" for="slider-range-2">Perturbation Range:</label>
64+
<input type="range" id="slider-range-2" class="slider" min="0" max="9" step="1" value="0">
65+
<span id="range-value-2">0.00</span>
66+
</div>
67+
</div>
68+
69+
<!-- Interactive JSON 3 -->
70+
<div class="interactive-container" id="container-3">
71+
<div class="image-container">
72+
<div>
73+
<h3>Lower Bound</h3>
74+
<img id="img-lower-3" src="" alt="Lower Bound">
75+
</div>
76+
<div>
77+
<h3>Ref Image</h3>
78+
<img id="img-ref-3" src="" alt="Ref Image">
79+
</div>
80+
<div>
81+
<h3>Upper Bound</h3>
82+
<img id="img-upper-3" src="" alt="Upper Bound">
83+
</div>
84+
</div>
85+
<div class="slider-container">
86+
<label class="slider-label" for="slider-pose-3">Camera Pose:</label>
87+
<input type="range" id="slider-pose-3" class="slider" min="0" max="9" step="1" value="5">
88+
<span id="pose-value-3">0.50</span>
89+
</div>
90+
<div class="slider-container">
91+
<label class="slider-label" for="slider-range-3">Perturbation Range:</label>
92+
<input type="range" id="slider-range-3" class="slider" min="0" max="9" step="1" value="0">
93+
<span id="range-value-3">0.00</span>
94+
</div>
95+
</div>
96+
97+
<!-- Interactive JSON 4 -->
98+
<div class="interactive-container" id="container-4">
99+
<div class="image-container">
100+
<div>
101+
<h3>Lower Bound</h3>
102+
<img id="img-lower-4" src="" alt="Lower Bound">
103+
</div>
104+
<div>
105+
<h3>Ref Image</h3>
106+
<img id="img-ref-4" src="" alt="Ref Image">
107+
</div>
108+
<div>
109+
<h3>Upper Bound</h3>
110+
<img id="img-upper-4" src="" alt="Upper Bound">
111+
</div>
112+
</div>
113+
<div class="slider-container">
114+
<label class="slider-label" for="slider-pose-4">Camera Pose:</label>
115+
<input type="range" id="slider-pose-4" class="slider" min="0" max="9" step="1" value="5">
116+
<span id="pose-value-4">0.50</span>
117+
</div>
118+
<div class="slider-container">
119+
<label class="slider-label" for="slider-range-4">Perturbation Range:</label>
120+
<input type="range" id="slider-range-4" class="slider" min="0" max="9" step="1" value="0">
121+
<span id="range-value-4">0.00</span>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<script>
127+
const jsonUrls = [
128+
"assets/Interact/airplane_grey/z/interactive_plot.json",
129+
"assets/Interact/airplane_grey/x/interactive_plot.json",
130+
"assets/Interact/chair/y/interactive_plot.json",
131+
"assets/Interact/dozer/y/interactive_plot.json"
132+
];
133+
134+
jsonUrls.forEach((jsonUrl, index) => {
135+
fetch(jsonUrl)
136+
.then(response => response.json())
137+
.then(data => {
138+
const sliderPose = document.getElementById(`slider-pose-${index + 1}`);
139+
const sliderRange = document.getElementById(`slider-range-${index + 1}`);
140+
const poseValue = document.getElementById(`pose-value-${index + 1}`);
141+
const rangeValue = document.getElementById(`range-value-${index + 1}`);
142+
const imgLower = document.getElementById(`img-lower-${index + 1}`);
143+
const imgRef = document.getElementById(`img-ref-${index + 1}`);
144+
const imgUpper = document.getElementById(`img-upper-${index + 1}`);
145+
146+
const poseValues = data.pose_values;
147+
const rangeValues = data.range_values;
148+
149+
function updateImages() {
150+
const poseIdx = parseInt(sliderPose.value);
151+
const rangeIdx = parseInt(sliderRange.value);
152+
153+
const mappedPose = poseValues[poseIdx];
154+
const mappedRange = rangeValues[rangeIdx];
155+
156+
poseValue.textContent = (poseIdx / 9).toFixed(2);
157+
rangeValue.textContent = (rangeIdx / 9).toFixed(2);
158+
159+
const imgIndex = poseIdx * data.num_ranges + rangeIdx;
160+
161+
imgLower.src = `data:image/png;base64,${data.images.lower[imgIndex]}`;
162+
imgRef.src = `data:image/png;base64,${data.images.ref[imgIndex]}`;
163+
imgUpper.src = `data:image/png;base64,${data.images.upper[imgIndex]}`;
164+
}
165+
166+
sliderPose.addEventListener("input", updateImages);
167+
sliderRange.addEventListener("input", updateImages);
168+
169+
updateImages();
170+
})
171+
.catch(error => console.error(`Error loading JSON file ${jsonUrl}:`, error));
172+
});
173+
</script>
174+
</body>
175+
</html>

‎style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,11 @@
146146
font-size: 1.0rem; /* Increase font size */
147147
line-height: 1.8; /* Adjust line height for better readability */
148148
}
149+
150+
/* Update or add the following styles for the interactive-frame class */
151+
.interactive-frame {
152+
width: 100%; /* Full width of the webpage */
153+
height: 800px; /* Height increased to 5 times (300px * 5) */
154+
border: none;
155+
margin: 20px 0; /* Optional spacing above and below the iframe */
156+
}

‎style_static.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
}
5+
6+
.grid-container {
7+
display: grid;
8+
grid-template-columns: repeat(2, 1fr); /* Two columns */
9+
gap: 25px; /* Larger gap between setups */
10+
padding: 10px;
11+
}
12+
13+
.interactive-container {
14+
width: 75%; /* Full width of the webpage */
15+
max-width: none; /* Remove the max-width constraint */
16+
margin: 0 auto; /* Center the container */
17+
height: 300px; /* Increased height for better visibility */
18+
}
19+
20+
.image-container {
21+
display: flex;
22+
justify-content: center;
23+
gap: 10px; /* Smaller gap between images of the same setup */
24+
margin-top: 10px; /* Reduced vertical spacing */
25+
}
26+
27+
.image-container img {
28+
border: 1px solid #ccc;
29+
width: 192px; /* Reduced display size */
30+
height: 192px; /* Reduced display size */
31+
object-fit: contain; /* Ensure the full image is visible */
32+
}
33+
34+
.slider-container {
35+
margin-top: 10px; /* Reduced vertical spacing */
36+
}
37+
38+
.slider-label {
39+
font-size: 14px; /* Slightly smaller font for slider labels */
40+
}
41+
42+
.slider {
43+
width: 300px;
44+
}

‎webpage_static.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Project Title</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body>
11+
12+
<div class="container" style="text-align: center;">
13+
<h1>Abstract Rendering: Certified Rendering Under 3D
14+
Semantic Uncertainty</h1>
15+
<p class="spotlight">NeurIPS 2025 spotlight</p>
16+
<h3 class="author">Chenxi Ji<sup>*</sup>, Yangge Li<sup>*</sup>, Xiangru Zhong<sup>*</sup>, Huan Zhang, Sayan Mitra</h3>
17+
<h4 class="institute">University of Illinois, Urbana-Champaign</h4>
18+
19+
20+
<p>
21+
<a href="assets/pdf/AbstractRendering_Neurips2025.pdf" class="button">Paper</a>
22+
<a href="https://github.com/IllinoisReliableAutonomyGroup/Abstract-Rendering.git" class="button">Code</a>
23+
</p>
24+
<br>
25+
26+
<img src="assets/images/pipeline.png" class="teaser" alt="Teaser Image" style="width: 100%;">
27+
<br><br>
28+
29+
<h2>Abstract</h2>
30+
31+
<p style="text-align: left;">
32+
Rendering produces 2D images from 3D scene representations, yet how continuous variations in camera pose and scenes influence these images—and, consequently, downstream visual models—remains underexplored. We introduce <strong>Abstract Rendering</strong>, a framework that computes provable bounds on all images rendered under continuously varying camera poses and scenes. The resulting abstract image, expressed as a set of constraints over the image matrix, enables rigorous uncertainty propagation through downstream neural networks and thereby supports certification of model behavior under realistic 3D semantic perturbations, far beyond traditional pixel-level noise models.
33+
</p><br>
34+
35+
<p style="text-align: left;">
36+
Our approach propagates camera pose uncertainty through each rendering step using efficient piecewise linear bounds, including custom abstractions for three rendering-specific operations—matrix inversion, sorting-based aggregation, and cumulative product summation—not supported by standard tools. Our implementation, <strong>ABSTRACTRENDER</strong>, targets two state-of-the-art photorealistic scene representations—3D Gaussian Splats and Neural Radiance Fields (NeRF)—and scales to complex scenes with up to 1M Gaussians.
37+
</p><br>
38+
39+
<p style="text-align: left;">
40+
Our computed abstract images achieve up to <strong>3% over-approximation error</strong> compared to sampling results (baseline). Through experiments on classification (ResNet), object detection (YOLO), and pose estimation (GATENet) tasks, we demonstrate that abstract rendering enables formal certification of downstream models under realistic 3D variations—an essential step toward safety-critical vision systems.
41+
</p><br><br>
42+
43+
<h2>SlideVideo</h2>
44+
<br>
45+
<div class="slidevideo-container">
46+
<video class="wide-video" controls>
47+
<source src="assets/videos/output_small.mp4" type="video/mp4">
48+
Your browser does not support the video tag.
49+
</video>
50+
</div>
51+
<br><br>
52+
53+
<h2>Abstract Images</h2>
54+
55+
<p style="text-align: left;">Lower bound and upper bound images are supposed to contain all images that can be rendered from given range of camera (scene) movement, such as the reference images.</p>
56+
</div>
57+
<div class="interactive-windows">
58+
<iframe src="render_static.html" class="interactive-frame"></iframe>
59+
</div>
60+
<div class="container" style="text-align: center;">
61+
<!-- <video class="wide-video" controls>
62+
<source src="assets/videos/AR_vis_airplane_grey.mp4" type="video/mp4">
63+
</video><br>
64+
<img src="assets/images/abs_result.png" class="teaser" alt="Teaser Image" style="width: 100%;"><br>
65+
<br>-->
66+
67+
<h2>Downstream NN Verification</h2>
68+
69+
<p style="text-align: left;">Verify the range of camera movement for which the downstream NN (ResNet classifer or GateNet pose estimator) is certified to work (color in green), and identify the ranges where it may fail (color in red).</p>
70+
71+
<img src="assets/images/classification result.png" class="teaser" alt="Teaser Image" style="width: 100%;">
72+
<img src="assets/images/pose estimator result.png" class="teaser" alt="Teaser Image" style="width: 100%;">
73+
<br><br>
74+
75+
<h2>BibTeX</h2>
76+
77+
<pre style="text-align: left;">
78+
@inproceedings{jiabstract,
79+
title={Abstract Rendering: Certified Rendering Under 3D Semantic Uncertainty},
80+
author={Ji, Chenxi and Li, Yangge and Zhong, Xiangru and Zhang, Huan and Mitra, Sayan},
81+
booktitle={The Thirty-ninth Annual Conference on Neural Information Processing Systems}
82+
}
83+
</pre>
84+
<br><br>
85+
86+
<h2>Acknowledgments and Funding</h2>
87+
88+
<p style="text-align: left;">
89+
Chenxi Ji, Yangge Li, and Sayan Mitra are supported by a research grant from The Boeing Company and NSF (FMITF-2525287). Huan Zhang and Xiangru Zhong are supported in part by the AI2050 program at Schmidt Sciences (AI2050 Early Career Fellowship) and NSF (IIS SLES-2331967, CCF FMITF-2525287).
90+
</p>
91+
<br>
92+
93+
<p style="text-align: left">
94+
We thank Douglas Belgorod and Maya Cheshire for researching and developing applications of Abstract Rendering.</p>
95+
<br><br>
96+
97+
<h2>Reference</h2>
98+
99+
<p style="text-align: left;">
100+
[1] Bernhard Kerbl, Georgios Kopanas, Thomas Leimkühler, and George Drettakis. 3d gaussian splatting for real-time radiance field rendering. <i>ACM Trans. Graph.</i>, 42(4):139–1, 2023.
101+
</p><br>
102+
<p style="text-align: left;">
103+
[2] Ben Mildenhall, Pratul P Srinivasan, Matthew Tancik, Jonathan T Barron, Ravi Ramamoorthi, and Ren Ng. Nerf: Representing scenes as neural radiance fields for view synthesis. <i>Communications of the ACM</i>, 65(1):99–106, 2021.
104+
</p><br>
105+
<p style="text-align: left;">
106+
[3] Huan Zhang, Tsui-Wei Weng, Pin-Yu Chen, Cho-Jui Hsieh, and Luca Daniel. Efficient neural network robustness certification with general activation functions. <i>Advances in neural information processing systems</i>, 31, 2018.
107+
</p><br>
108+
109+
</div>
110+
111+
112+
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)