-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
246 lines (227 loc) · 13.5 KB
/
index.html
File metadata and controls
246 lines (227 loc) · 13.5 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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INFS4205/7205 Course Hub</title>
<link rel="stylesheet" href="styles.css">
<!-- Optional: Inter font for that premium feel if we want to load it -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body>
<nav class="navbar">
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
<!-- Sun Icon (hidden in dark mode) -->
<svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
style="display: none;">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<!-- Moon Icon (hidden in light mode) -->
<svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
style="display: none;">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
</nav>
<main class="flex-col items-center justify-center py-12 px-4">
<div class="container text-center">
<div style="margin-bottom: 4rem;">
<p class="university-brand">The University of Queensland</p>
<h1>Advanced Techniques for High Dimensional Data <span class="course-code">(INFS4205/7205)</span></h1>
<p
style="font-size: 1.0rem; max-width: 52rem; margin: 1.5rem auto 0; line-height: 1.7; text-align: justify;">
<!-- Selected advanced topics from spatial and multimedia databases: multidimensional data management
concepts, theories and technologies, focusing on data access methods and similarity query
processing for spatial, multimedia and Web-based databases, with particular emphasis on
video indexing and search. -->
This course explores how modern AI systems represent, align, retrieve, and reason over
high-dimensional multimodal data. Contemporary AI systems, including multimodal foundation models,
retrieval-augmented generation
(RAG), and agents, rely on representing text, images, and other modalities as high-dimensional
embeddings. Understanding how these representations are learned, aligned, indexed, and used for
reasoning is essential for building reliable AI applications.
<br>
<br>
The course takes a systems view of multimodal AI: from representation learning and alignment to
vector databases and scalable multimodal RAG, followed by efficiency techniques and agent
architectures that enable interactive AI systems. It concludes with frontier applications and
personalization methods such as parameter-efficient fine-tuning.
A central theme is vibe coding: designing AI-assisted systems by reasoning about intent, structure,
and evaluation rather than syntax alone. Through reflective inquiry and a hands-on multimodal
chatbot project, students learn to build, analyze, and critically evaluate modern AI pipelines.
<!-- By the end of the course, students will understand how high-dimensional representations underpin
multimodal AI and gain practical experience constructing retrieval-augmented and agent-based
systems. -->
</p>
</div>
<div class="card-grid">
<!-- Card 1: LangGraph Agent Demo -->
<article class="card">
<div style="text-align: left;">
<h2 class="card-title">LangGraph Agent Demo</h2>
<p class="card-desc">
Explore the interactive LangGraph personalised agent demonstration. See how agents reason
and execute tasks with local models.
</p>
<div class="button-group">
<a href="https://infs4205-7205.github.io/LangGraph_Agent_Demo/" class="btn btn-primary"
target="_blank" rel="noopener noreferrer">
View Demo
</a>
<a href="https://github.com/INFS4205-7205/LangGraph_Agent_Demo" class="btn btn-outline"
target="_blank" rel="noopener noreferrer">
<span style="margin-right: 0.5rem;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
</path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</span>
View Code
</a>
</div>
</div>
</article>
<!-- Card 2: VibeCoding Tutorial -->
<article class="card">
<div style="text-align: left;">
<h2 class="card-title">VibeCoding Tutorial</h2>
<p class="card-desc">
Learn how to build software faster with Coding Agents. A comprehensive guide from first
prompts to detailed configurations.
</p>
<div class="button-group">
<a href="https://infs4205-7205.github.io/VibeCoding_Tutorial/" class="btn btn-primary"
target="_blank" rel="noopener noreferrer">
Start Tutorial
</a>
</div>
</div>
</article>
<!-- Card 3: A3: Personalised Agent -->
<article class="card">
<div style="text-align: left;">
<h2 class="card-title">A3: Personalised Agent</h2>
<p class="card-desc">
Build an intelligent agent backed by your own multimodal knowledge base. Utilise LangGraph
and Large Language Models (LLMs) to produce reliable, grounded, and domain-specific answers.
</p>
<div class="button-group">
<a href="https://infs4205-7205.github.io/A3-Personalised-Multimodal-Chatbot/"
class="btn btn-primary" target="_blank" rel="noopener noreferrer">
View Task Sheet
</a>
</div>
</div>
</article>
<!-- Card 4: Week 4 Demo -->
<article class="card">
<div style="text-align: left;">
<h2 class="card-title">Week 4 LLaVA Demo</h2>
<p class="card-desc">
An interactive web demo that showcases LLaVA (Large Language and Vision Assistant) — a
multimodal large language model that can understand both images and natural language
instructions. The model runs locally via Ollama, so no API keys or cloud services are
required.
</p>
<div class="button-group">
<a href="https://github.com/INFS4205-7205/2026_Week4_LLaVA_Demo" class="btn btn-outline"
target="_blank" rel="noopener noreferrer">
<span style="margin-right: 0.5rem;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
</path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</span>
View Code
</a>
</div>
</div>
</article>
</div>
<!-- Team Section -->
<section class="team-section">
<h2 class="section-title">Meet the Team</h2>
<div class="team-grid">
<!-- Key Members -->
<div class="team-member">
<img src="./imgs/coordinator.png" alt="Yadan Luo" class="team-avatar">
<h3 class="team-name">Yadan Luo</h3>
<p class="team-role">Coordinator</p>
</div>
<!-- Contributors -->
<div class="team-member">
<img src="./imgs/guest1.png" alt="Zhuoxiao Chen" class="team-avatar">
<h3 class="team-name">Zhuoxiao Chen</h3>
<p class="team-role">Guest Lecturer</p>
</div>
<div class="team-member">
<img src="./imgs/guest2.png" alt="Xuwei Xu" class="team-avatar">
<h3 class="team-name">Xuwei Xu</h3>
<p class="team-role">Guest Lecturer</p>
</div>
<div class="team-member">
<img src="./imgs/tutor1.png" alt="Danny Wang" class="team-avatar">
<h3 class="team-name">Danny Wang</h3>
<p class="team-role">Head Teaching Assistant</p>
</div>
<div class="team-member">
<img src="./imgs/tutor2.png" alt="Yan Jiang" class="team-avatar">
<h3 class="team-name">Yan Jiang</h3>
<p class="team-role">Teaching Assistant</p>
</div>
<div class="team-member">
<img src="./imgs/tutor3.png" alt="Zhizhen Zhang" class="team-avatar">
<h3 class="team-name">Zhizhen Zhang</h3>
<p class="team-role">Teaching Assistant</p>
</div>
<div class="team-member">
<img src="./imgs/tutor4.png" alt="Fengyi Zhang" class="team-avatar">
<h3 class="team-name">Fengyi Zhang</h3>
<p class="team-role">Teaching Assistant</p>
</div>
<div class="team-member">
<img src="./imgs/tutor5.png" alt="Xiangyu Sun" class="team-avatar">
<h3 class="team-name">Xiangyu Sun</h3>
<p class="team-role">Teaching Assistant</p>
</div>
</div>
</section>
</div>
</main>
<footer class="py-6" style="margin-top: auto;">
<div class="container text-center">
<p style="font-size: 0.875rem; color: var(--muted-foreground);">
This content is created by Danny Wang based on
publicly available sources. All original copyrights remain with their respective
owners.
<br>
© 2026 INFS4205/7205. The University of Queensland.
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>