-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
264 lines (241 loc) · 10.1 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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-Driving Car Simulation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #007BFF;
padding: 20px;
text-align: center;
color: #fff;
}
section {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: darkblue;
}
p {
line-height: 1.6;
}
footer {
background-color: #007BFF;
padding: 10px;
text-align: center;
color: #fff;
}
img {
max-width: 95%;
height: auto;
max-width: 95%;
max-height: 90;
align-self: auto;
}
.parent {
display: flex;
flex-flow: row;
}
.child {
background: #ddd;
}
.child img {
width: 100%;
height: 100%;
}
.video-element {
width: 100%;
height: 100%;
}
/*
body {
background-color: #333;
color: #fff;
}
header {
background-color: #333;
color: #fff;
}
section {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #444;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
*/
</style>
</head>
<body>
<script>function toggleDarkMode() {document.body.classList.toggle('dark-mode');}</script>
<header>
<h1>Self-Driving Car Simulation</h1>
<p>First Step in Building the Future of Autonomous Vehicles</p>
</header>
<section>
<h1><a href="https://tech.alxafrica.com/software-engineering-programme-cairo">ALX Africa </a></h1>
<h3>Alx Full Stack Software Engineering Portfolio Project</h3>
<h2>Welcome to My Project</h2>
<p>
Explore the exciting world of self-driving cars through our simulation project. Witness the integration of neural networks and machine learning to simulate real-life driving scenarios.
</p>
<p>
<strong>Key Features:</strong>
<ul>
<li>Realistic Simulation Environment</li>
<li>Neural Network Integration</li>
<li>User-Friendly Interface</li>
<li>Continuous Learning and Adaptation</li>
</ul>
</p>
<p>
<strong>Get Started:</strong>
<br>
Clone the repository, In the "main project" Folder start the "self_driving_car.html", and experience the future of autonomous driving throw visually seeing how the car learning inside the simulation.
I Have tried to Describe Every "Class" used, Every "Method", Every "Function", and what and why is it used for.
</p>
</section>
<!-- Intro Section -->
<section id="intro">
<header>
<h1>Building the Future of Autonomous Vehicles</h1>
<div align="center">
<h1>Phase 1</h1>
<h1>The Car</h1>
</div>
<div align="center">
<img src="assets/pictures/neural_networ_self_drivin_car.jpg" alt="Self-Driving Car Simulation">
</div>
<div align="center">
<h1>Self-Driving Car Learning Simulation</h1>
<div id="selfDrivingCarContainer">
<iframe src="main_project/self_driving_car.html" width="80%" height="300px" frameborder="0"></iframe>
</div>
</div>
<nav>
<ul align="left">
<li><a href="#features">Features </a></li>
<li><a href="#about">About</a></li>
<li><a href="#references">References</a></li>
</ul>
</nav>
<a href="https://github.com/THEKINGSTAR/self-driving-car-simulation" class="button">Visit Deployed App</a>
</header>
</section>
<!-- Feature Section -->
<section id="features">
<h2>Key Features</h2>
<!-- Feature 1 -->
<div class="feature">
<div align="center">
<img src="assets/pictures/car_case-study.jpg" alt="Realistic">
</div>
<h3>Realistic Simulation Environment</h3>
<p>Experience a simulation environment that closely mirrors real-world driving scenarios, providing a foundation for diverse driving conditions.</p>
</div>
<!-- Feature 2 -->
<div class="feature">
<div align="center">
<img src="assets/pictures/Typical scenario of overtaking.jpg" alt="Simulation">
</div>
<h3>Neural Network Integration</h3>
<p>Witness the integration of a lightweight JavaScript neural network library, enabling the car to make informed driving decisions based on simulated sensor data.</p>
</div>
<!-- Feature 3 -->
<div class="feature">
<div align="center" class="parent">
<div class="child">
<img src="assets/pictures/neural_network.jpg" alt="Neural networks Implementation">
</div>
<div class="child">
<img src="/assets/pictures/rotation_physics.jpg" alt="Physics Implementation">
</div>
</div>
<div align="center" class="parent">
<div class="child">
<video class="video-element" controls>
<source src="assets/demo_vids/Car_ann_testing.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="child">
<video class="video-element" controls>
<source src="assets/demo_vids/visualizing_the_network.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<h3>User-Friendly Interface</h3>
<div align="center">
<img src="assets/pictures/user_interface.png" alt="Realistic">
</div>
<p>Explore a user interface designed for easy monitoring of the simulation. Adjust neural network parameters and observe the car's behavior in real-time.</p>
</div>
</section>
<!-- About Section -->
<section id="about">
<h2>About the Project</h2>
<p>
This self-driving car simulation project was inspired by the vision of creating a hands-on learning experience in the field of autonomous vehicles. The project timeline includes in-depth research, development, and iterative improvements to ensure a comprehensive understanding of neural networks and their application in a simulated driving environment.
</p>
<p>
This project serves as a Portfolio Project for ALX Africa (Holberton School) S.E, showcasing the skills and creativity of the development team.
</p>
<p>
<strong>Team Members:</strong>
<ul>
<li><a href="https://www.linkedin.com/in/khaled-mohamed-fathalla-20975b9b/" target="_blank">KHALED MOHAMED (LinkedIn)</a></li>
<li><a href="https://github.com/THEKINGSTAR" target="_blank">KHALED (GitHub)</a></li>
<li><a href="https://twitter.com/K_H_A_L_E_D___" target="_blank">KHALED (Twitter)</a></li>
<!-- Repeat for other team members -->
</ul>
</p>
<p>
<strong>GitHub Repository:</strong>
<a href="https://github.com/THEKINGSTAR/self-driving-car-simulation" target="_blank">Self-Driving Car Project Repository</a>
</p>
</section>
<!-- References Section -->
<section id="references">
<h2>References used in the Project</h2>
<p>
This self-driving car simulation project was inspired and Created Following "COURSES", "Research Papers", "youtube" playlists.
</p>
<div align="center">
<h1>Virtual World With Self-Driving Cars Simulation</h1>
<div id="virtualworld">
<iframe src="https://radufromfinland.com/projects/virtualworld/" width="800" height="600" frameborder="0"></iframe>
</div>
</div>
<p>
<strong>COURSES and Videos:</strong>
<ul>
<li><a href="https://www.youtube.com/watch?v=Rs_rAxEsAvI/" target="_blank">DR. RADU FULL COURSE</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pi" target="_blank">3Blue1Brown - Neural networks</a></li>
<li><a href="https://www.researchgate.net/publication/353886378_Gaussian_Process_Based_Model_Predictive_Control_for_Overtaking_in_Autonomous_Driving/figures?lo=1" target="_blank">RESEARCH GATE PAPER - CASE STUDY</a></li>
<li><a href="https://www.researchgate.net/publication/335740399_Human_decision-making_biases_in_the_moral_dilemmas_of_autonomous_vehicles/figures?lo=1" target="_blank">RESEARCH GATE PAPER - FUTURE OF SELF-DRIVING CAR</a></li>
<!-- Repeat for other team members -->
</ul>
</p>
<p>
<strong>GitHub Repository:</strong>
<a href="https://github.com/THEKINGSTAR/self-driving-car-simulation" target="_blank">Self-Driving Car Project Repository</a>
</p>
</section>
<footer>
<p>© 2023 Self-Driving Car Simulation Project</p>
</footer>
</body>
</html>