-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutorials.html
More file actions
214 lines (203 loc) · 12 KB
/
Copy pathtutorials.html
File metadata and controls
214 lines (203 loc) · 12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
<title>Tutorials — VIDAL Lab</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/css/subpages.css" />
<script defer src="assets/js/nav.js"></script>
</head>
<body data-page="tutorials">
<header class="nav" id="nav">
<a class="brand" href="index.html"><span class="brand-mark"><svg viewBox="0 0 40 40" width="28" height="28" aria-hidden="true"><g fill="#011F5B" opacity="0.18"><rect x="9" y="1" width="7" height="7"/><rect x="17" y="1" width="7" height="7"/><rect x="25" y="1" width="7" height="7"/><rect x="33" y="1" width="7" height="7"/><rect x="1" y="9" width="7" height="7"/><rect x="17" y="9" width="7" height="7"/><rect x="25" y="9" width="7" height="7"/><rect x="33" y="9" width="7" height="7"/><rect x="1" y="17" width="7" height="7"/><rect x="9" y="17" width="7" height="7"/><rect x="25" y="17" width="7" height="7"/><rect x="33" y="17" width="7" height="7"/><rect x="1" y="25" width="7" height="7"/><rect x="9" y="25" width="7" height="7"/><rect x="17" y="25" width="7" height="7"/><rect x="33" y="25" width="7" height="7"/><rect x="1" y="33" width="7" height="7"/><rect x="9" y="33" width="7" height="7"/><rect x="17" y="33" width="7" height="7"/><rect x="25" y="33" width="7" height="7"/></g><g fill="#990000"><rect x="1" y="1" width="7" height="7"/><rect x="9" y="9" width="7" height="7"/><rect x="17" y="17" width="7" height="7"/><rect x="25" y="25" width="7" height="7"/><rect x="33" y="33" width="7" height="7"/></g></svg></span><span class="brand-word"><em>Vidal</em>Lab<sup>↗</sup></span></a>
<nav class="nav-links" aria-label="Primary">
<a href="index.html" data-key="home"><span>01</span> Home</a>
<a href="people.html" data-key="people"><span>02</span> People</a>
<a href="research.html" data-key="research"><span>03</span> Research</a>
<div class="nav-more">
<button class="nav-more-btn"><span>04</span> More <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 9l6 6 6-6"/></svg></button>
<div class="nav-more-menu">
<a href="teaching.html" data-key="teaching"><span>a</span> Teaching</a>
<a href="talks.html" data-key="talks"><span>b</span> Talks</a>
<a href="tutorials.html" data-key="tutorials" class="active"><span>c</span> Tutorials</a>
<a href="data-code.html" data-key="data"><span>d</span> Data & Code</a>
</div>
</div>
</nav>
</header>
<section class="page-hero">
<div class="page-hero-meta">
<span><span class="tick"></span> § 06 — Tutorials</span>
<span class="mono">Conference tutorials & workshops organized</span>
</div>
<h1 class="page-display">
Long-form<br/>
<em>tutorials</em><br/>
on the foundations.
</h1>
<p class="page-lede">
Multi-hour tutorials, summer-school lectures, and short-course materials covering interpretable AI, deep learning theory, generalized PCA, subspace clustering, and dynamical-systems methods for vision.
</p>
</section>
<section>
<header class="section-head">
<div class="section-num">§ 06·1</div>
<h2>Featured <em>tutorial</em></h2>
<p class="section-note">Most recent tutorial materials.</p>
</header>
<div class="featured-callout">
<div class="fc-art">
<span class="fc-tag">ICCV 2025</span>
<canvas id="tut-canvas"></canvas>
<div class="fc-mega">Foundations<br/>of Interpretable<br/>AI</div>
</div>
<div class="fc-text">
<span class="fc-eyebrow">Tutorial · with A. Chattopadhyay & J. Sulam</span>
<h3 class="fc-title">Foundations of <em>Interpretable AI</em></h3>
<p class="fc-desc">A tutorial on the principles and methods behind modern interpretable AI — covering post-hoc explainability (Shapley values, attribution methods) and explainable-by-design approaches (information pursuit, concept-based models). Presented at ICCV 2025, CVPR 2025, and CPAL 2025.</p>
<div class="fc-actions">
<a class="btn btn-primary" href="https://achatto1.github.io/Foundations-of-Interpretable-AI/" target="_blank" rel="noopener">Tutorial site <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M7 17L17 7M9 7h8v8"/></svg></a>
<a class="btn btn-ghost" href="https://iccv.thecvf.com/virtual/2025/tutorial/2853" target="_blank" rel="noopener">ICCV 2025 page</a>
</div>
</div>
</div>
</section>
<section style="margin-top:80px;">
<header class="section-head">
<div class="section-num">§ 06·2</div>
<h2>All <em>tutorials</em></h2>
<p class="section-note">By year, newest first.</p>
</header>
<div class="timeline" id="tut-timeline"></div>
</section>
<section style="margin-top:80px;">
<header class="section-head">
<div class="section-num">§ 06·3</div>
<h2>Workshops <em>organized</em></h2>
<p class="section-note">Workshops co-organized by Prof. Vidal at major venues.</p>
</header>
<div class="timeline" id="ws-timeline"></div>
</section>
<section class="cta" style="margin-top:120px;">
<div class="cta-inner">
<h2 class="cta-title">Looking for tutorial<br/><em>materials</em>?</h2>
<p class="cta-note">Slides, recordings, and reading lists for past tutorials are available on the linked pages.</p>
<div class="cta-actions">
<a class="btn btn-primary btn-lg" href="mailto:vidalr@seas.upenn.edu">Request materials <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</section>
<footer class="foot">
<div class="foot-mega" aria-hidden="true">VIDAL</div>
<div class="foot-grid">
<div class="foot-col">
<div class="foot-h">Vidal Lab</div>
<p>Vision, Dynamics & Learning<br/>University of Pennsylvania</p>
</div>
<div class="foot-col">
<div class="foot-h">Sitemap</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="people.html">People</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="teaching.html">Teaching</a></li>
<li><a href="talks.html">Talks</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="data-code.html">Data & Code</a></li>
</ul>
</div>
<div class="foot-col">
<div class="foot-h">Contact</div>
<p>Prof. René Vidal<br/><a href="mailto:vidalr@seas.upenn.edu">vidalr@seas.upenn.edu</a></p>
</div>
<div class="foot-col">
<div class="foot-h">Join the Lab</div>
<p>We seek students at the boundary of mathematical foundations and impactful AI. PhD applications go through Penn ESE; postdoc and visitor inquiries direct to Prof. Vidal.</p>
<p><a href="mailto:vidalr@seas.upenn.edu">Email Prof. Vidal →</a></p>
<p class="mono dim">© 2026 Vidal Lab</p>
</div>
</div>
</footer>
<script>
window.TUTORIALS = [
{ year:"2025", venue:"ICCV 2025", title:"Foundations of Interpretable AI", url:"https://iccv.thecvf.com/virtual/2025/tutorial/2853" },
{ year:"2025", venue:"CVPR 2025", title:"Foundations of Interpretable AI", url:"https://cvpr.thecvf.com/virtual/2025/tutorial/35900" },
{ year:"2025", venue:"CPAL 2025", title:"Foundations of Interpretable AI", url:"https://2025.cpal.cc/tutorial_info/" },
{ year:"2025", venue:"Tutorial site", title:"Foundations of Interpretable AI", url:"https://achatto1.github.io/Foundations-of-Interpretable-AI/" },
{ year:"2017", venue:"CDC 2017", title:"Mathematics of Deep Learning", url:"http://www.vision.jhu.edu/tutorials/CDC17-Tutorial-Math-Deep-Learning.htm" },
{ year:"2017", venue:"ICCV 2017", title:"Mathematics of Deep Learning", url:"http://www.vision.jhu.edu/tutorials/ICCV17-Tutorial-Math-Deep-Learning.htm" },
{ year:"2017", venue:"CVPR 2017", title:"Mathematics of Deep Learning", url:"http://www.vision.jhu.edu/tutorials/CVPR17-Tutorial-Math-Deep-Learning.htm" },
{ year:"2016", venue:"CVPR 2016", title:"Low-Rank and Sparse Modeling for Visual Analytics", url:"http://www.cis.pku.edu.cn/faculty/vision/zlin/CVPR_2016_Tutorial.htm" },
{ year:"2016", venue:"CVPR 2016", title:"Mathematics of Deep Learning", url:"http://www.vision.jhu.edu/tutorials/CVPR16-Tutorial-Math-Deep-Learning.htm" },
{ year:"2015", venue:"ICCV 2015", title:"Mathematics of Deep Learning", url:"http://www.vision.jhu.edu/tutorials/ICCV15-Tutorial-Math-Deep-Learning.htm" },
{ year:"2015", venue:"CVPR 2015", title:"Sparse and Low-Rank Modeling for High-Dimensional Data Analysis", url:"http://www.ccs.neu.edu/home/eelhami/tutorial_cvpr2015.htm" },
{ year:"2010", venue:"CVPR 2010", title:"Learning Multi-Subspaces in Computer Vision", url:"http://www.vision.jhu.edu/tutorials/cvpr10-tutorial-multi-subspace.htm" },
{ year:"2008", venue:"CVPR 2008", title:"Generalized Principal Component Analysis", url:"http://www.vision.jhu.edu/tutorials/cvpr08-tutorial-gpca.htm" },
{ year:"2007", venue:"CVPR 2007", title:"Generalized Principal Component Analysis", url:"http://www.vision.jhu.edu/tutorials/cvpr07-tutorial-gpca.htm" }
];
window.WORKSHOPS = [
{ year:"2016", venue:"ICML 2016", title:"Theory of Deep Learning", url:"https://sites.google.com/site/deeplearningtheory/" },
{ year:"2009", venue:"ICCV 2009", title:"Dynamical Vision", url:"http://vision.jhu.edu/iccv2009-wdv/" },
{ year:"2007", venue:"ICCV 2007", title:"Dynamical Vision", url:"http://vision.jhu.edu/iccv2007-wdv/" },
{ year:"2006", venue:"ECCV 2006", title:"Dynamical Vision", url:"http://vision.jhu.edu/eccv2006-wdv/" },
{ year:"2005", venue:"ICCV 2005", title:"Dynamical Vision", url:"http://vision.jhu.edu/iccv2005-wdv/" },
{ year:"2005", venue:"CDC 2005", title:"Workshop on Identification of Hybrid Systems", url:"" }
];
function renderTl(id, list){
const root = document.getElementById(id);
list.forEach(t => {
const node = document.createElement(t.url ? 'a' : 'div');
node.className = 'tl-row';
if(t.url){ node.href = t.url; node.target = '_blank'; node.rel = 'noopener'; }
node.innerHTML = `
<span class="tl-when">${t.year}</span>
<span class="tl-code">${t.venue}<span class="tl-sub">tutorial</span></span>
<span class="tl-title">${t.title}</span>
<span class="tl-arrow">${t.url ? '↗' : ''}</span>
`;
root.appendChild(node);
});
}
renderTl('tut-timeline', window.TUTORIALS);
renderTl('ws-timeline', window.WORKSHOPS);
(function(){
const cv = document.getElementById('tut-canvas');
if(!cv) return;
const ctx = cv.getContext('2d');
const dpr = Math.min(2, window.devicePixelRatio || 1);
function draw(){
const w = cv.clientWidth, h = cv.clientHeight;
cv.width = w*dpr; cv.height = h*dpr;
ctx.setTransform(dpr,0,0,dpr,0,0);
const step = 30;
for(let y=step/2;y<h;y+=step){
for(let x=w*0.45;x<w;x+=step){
const v = Math.sin(x*0.04 + y*0.03) + Math.cos(y*0.05 - x*0.02);
const col = v > 0 ? 'rgba(255,255,255,0.7)' : 'rgba(1,31,91,0.7)';
ctx.strokeStyle = col;
ctx.lineWidth = 1;
ctx.beginPath();
if(v > 0.3){
ctx.arc(x, y, 5, 0, Math.PI*2);
} else if(v < -0.3){
ctx.moveTo(x-6, y-6); ctx.lineTo(x+6, y+6);
ctx.moveTo(x+6, y-6); ctx.lineTo(x-6, y+6);
} else {
ctx.moveTo(x-6, y); ctx.lineTo(x+6, y);
ctx.moveTo(x, y-6); ctx.lineTo(x, y+6);
}
ctx.stroke();
}
}
}
draw(); window.addEventListener('resize', draw);
})();
</script>
<script src="assets/js/page-shell.js"></script>
</body>
</html>