forked from OpenDriveLab/DriveLM
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (200 loc) · 9.11 KB
/
index.html
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
<!doctype html>
<html lang="en">
<style>
.author-list {
margin-top: 1rem;
margin-bottom: 0.5rem;
font-size: 1.4rem;
}
.institution-list {
margin-bottom: 1rem;
margin-top: 1rem;
font-size: 1.2rem;
}
.larger-text {
font-size: 1.4rem;
}
</style>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Favicon -->
<!-- <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon" /> -->
<!-- Libs CSS -->
<link rel="stylesheet" href="./assets/css/libs.bundle.css"/>
<link rel="stylesheet" href="./assets/css/all.css">
<!-- Main CSS -->
<link rel="stylesheet" href="./assets/css/index.bundle.css"/>
<!-- Title -->
<title>DriveLM</title>
<style>
.bg-picture {
background-image: url('./assets/images/page/front_page_dark.png');
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
color: white;
max-width: 100%;
height: auto;
display: flex;
}
.image-container {
display: flex; /* 使用弹性布局 */
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
}
.image-container img {
max-width: 40%; /* 图片最大宽度为父容器的50% */
height: auto; /* 保持纵横比，自动计算高度 */
margin: 10px; /* 图片之间的间距 */
}
pre {
padding: 10px;
border: 0px solid #ccc;
width: 65%;;
margin: 0 auto; /* 居中对齐 */
white-space: pre-wrap;
word-wrap: break-word;
}
code {
display: block; /* 使 <code> 元素成为块级元素 */
background-color: #f4f4f4; /* 设置背景颜色 */
border: 1px solid #ddd; /* 设置边框 */
padding: 0px; /* 设置内边距 */
font-family: monospace;
}
</style>
</head>
<body>
<div class="offcanvas-wrap">
<!-- header -->
<section class="bg-picture">
<div class="container foreground mt-lg-5">
<div class="row justify-content-center">
<div class="col-xl-8 text-center">
<h1 class="display-1 fw-bold">
<b>DriveLM</b>
</h1>
<!--links-->
<div class="row justify-content-center g-1">
<div class="col-auto">
<a href="https://github.com/OpenDriveLab/DriveLM" class="btn btn-outline-white rounded-pill" target="_blank">
<i class="fa-brands fa-github"></i>
GitHub
</a>
</div>
<div class="col-auto">
<a href="https://huggingface.co/datasets/OpenDrive/DriveLM" class="btn btn-outline-white rounded-pill" target="_blank">
<i class="fa-solid fa-face-smiling-hands"></i>
HuggingFace
</a>
</div>
<div class="col-auto">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeX6CR3u-15IV-TKx2uPv1wiKjydjZ__NNW98H4nR5JZtQa2Q/viewform" class="btn btn-outline-white rounded-pill" target="_blank">
<i class="fa-regular fa-sheet-plastic"></i>
Sign up for the dataset
</a>
</div>
</div>
<!--end-->
<h4 class="fw-bold mt-4 mb-5">
<em>Unlocking the future where autonomous driving meets <br> the unlimited potential of language</em>
</h4>
</div>
</div>
<!-- video -->
<div class="row justify-content-center">
<div class="text-center">
<div class="bottom-overlap" data-aos="fade-up" data-aos-delay="100">
<iframe src="https://www.youtube.com/embed/ItDGAmXlH6k?si=Me41q0J3uC6hj75A&vq=hd1080" allowfullscreen="true" width="90%" height="675"></iframe>
</div>
</div>
</div>
<!--video end-->
</div>
</section>
<!--header end-->
<!-- features -->
<section class="py-15 py-xl-5">
<div class="container mt-10">
<div class="row justify-content-center mb-6">
<div class="col-lg-8 text-center">
<h2 class="fw-bold">
Introduction
</h2>
</div>
</div>
<div class="row justify-content-center">
<p class="larger-text">
DriveLM is an autonomous driving (AD) dataset incorporating linguistic information, which is based on the prevailing nuScenes dataset. Through DriveLM, we want to connect large language models and autonomous driving systems.
<br><br>
Specifically, in the dataset, we facilitate Perception, Prediction, and Planning (P3) with human-written reasoning logic as a connection. To take it a step further, we leverage the idea of Graph-of-Thought (GoT) to connect the QA pairs in a graph-style structure and use "What if"-style questions to reason about future events.
<br><br>
You can visit our GitHub repository for more details.
</p>
</div>
</div>
<div class="row justify-content-center">
<iframe src="./sample.html" width="800" height="700"></iframe>
<div>
<div class="container mt-1">
<div class="row g-5">
<div class="col-md-6 col-lg-4 text-center aos-init aos-animate" data-aos="fade-up">
<i class="fa-regular fa-share-nodes fs-1 text-blue"></i>
<h4 class="fs-5 mt-4">Graph-of-Thought</h4>
<p class="text-secondary mx-2">
In the DriveLM dataset, QAs are connected in a graph-style structure, with QA pairs as every node, and objects' relationships as the edges.
</p>
<!-- <a href="" class="underline">Learn More</a>-->
</div>
<div class="col-md-6 col-lg-4 text-center aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
<i class="fa-duotone fa-cars fs-1 text-blue"></i>
<h4 class="fs-5 mt-4">
Perception, Prediction, Planning
</h4>
<p class="text-secondary mx-2">
The most central element of DriveLM is frame-wise P3 QA, where P3 stands for Perception, Prediction, and Planning. This allows us to achieve complete functionality in full-stack autonomous driving.
</p>
<!-- <a href="" class="underline">Learn More</a>-->
</div>
<div class="col-md-6 col-lg-4 text-center aos-init aos-animate" data-aos="fade-up">
<i class="fa-regular fa-thought-bubble fs-1 text-blue"></i>
<h4 class="fs-5 mt-4">What if</h4>
<p class="text-secondary mx-2">
We try to reason about future events that have not yet happened. The way we do this is to ask many "What if"-style questions, which is a common way for humans to imagine the future by language.
</p>
<!-- <a href="" class="underline">Learn More</a>-->
</div>
</div>
</div>
</section>
<div class="row justify-content-center mb-0">
<div class="col-lg-8 text-center">
<h6 class="fw-bold">
<em>Please consider citing our project if it helps your research.</em>
</h6>
</div>
</div>
<pre>
<code>
@misc{drivelm2023,
title={DriveLM: Drive on Language},
author={DriveLM Contributors},
howpublished={\url{https://github.com/OpenDriveLab/DriveLM}},
year={2023}
}
</code>
</pre>
<div class="text-center">
<script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?cl=ffffff&w=800&t=tt&d=oS7XlTJXeSPPTQscBmrk7SOht7txhuFkEphf64VLtkc'></script>
</div>
<div class="image-container">
<img src="assets/images/logo/opendrivelab.jpeg"></img>
<img src="assets/images/logo/tubingen.jpeg"></img>
</div>
</div>
<!-- javascript -->
<script src="./assets/js/vendor.bundle.js" height="300" width="500"></script>
<script src="./assets/js/index.bundle.js" height="300" width="500"></script>
</body>
</html>