-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
333 lines (299 loc) · 21.8 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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<title>Virtual Persona</title>
<link rel="icon" href="./images/logo.png" type="image/x-icon">
</head>
<body>
<div class="hero-section text-center text-white">
<div class="container py-5">
<a href="https://virtualpersona.vercel.app/">
<img class="d-block mx-auto mb-4" src="images/logo.png" alt="Logo" width="72" height="72">
</a>
<h1 class="display-5 fw-bold">Virtual Persona</h1>
<p class="lead">Its time to give identity to AI programs. Find someone who can help you with your daily tasks 24/7, someone you can trust to keep track of your progress. Share your milestones and failures. Let Virtual Persona help you become more efficient, provide mental support, boost your productivity, and ultimately make you more successful. This is not just an AI companion; it is something beyond that. Let's explore how.</p>
</div>
</div>
<main class="main-section">
<!--Intro section-->
<section class="py-3 text-center container intro-section">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-bold">Practical Usage Examples</h1>
<p class="lead">Below are six pictures demonstrating how Virtual Persona will work</p>
</div>
</div>
</section>
<!--Album card section-->
<div class="album py-5 bg-body-tertiary album-section" >
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<img src="images/VP1.jpg" class="card-img-top" alt="Card image cap">
<div class="card-body">
<p class="card-text">As you start your PC or laptop in the morning, the app will run in the background like other applications, and your character will wake up at that time. You can also request news updates. After some greetings and chit-chat, you can move on with your day.</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="images/VP2.jpg" class="card-img-top" alt="Card image cap">
<div class="card-body">
<p class="card-text">After that, you can tell the app about everything you want to do today. It will create a detailed plan with proper timings and reminders, and it will automatically update the plan if there are any changes on your part throughout the day.</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="images/VP3.jpg" class="card-img-top" alt="Card image cap">
<div class="card-body">
<p class="card-text">Imagine you're a programmer and need help adding 3D models to your website. You can instantly tell the app your requirements, and it can provide you with the code if possible. If not, it will guide you on how to do it and where to find more information.</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="images/VP4.png" class="card-img-top" alt="Card image cap">
<div class="card-body">
<p class="card-text">If you want to study for a specific period but also need breaks without setting multiple timers and alarms, the app can help you stay organized. Just focus on studying while it efficiently manages your study and break times.</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="images/VP5.png" class="card-img-top" alt="Card image cap">
<div class="card-body">
<p class="card-text">During your breaks or after finishing your study session, you can specify what you’d like to do—whether it's playing your favorite music, a chess match, a small conversation, or a nap. The app can accommodate your preferences.</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img src="images/VP6.jpg" class="card-img-top" alt="Card image cap">
<div class="card-body">
<p class="card-text">At night, after completing your tasks for the day, you don't need to journal or manually track your progress. Simply give the app some time to update your progress, get your stats, and save them on the dashboard before you go to sleep.</p>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap Carousel -->
<section class="unique-section text-center d-flex align-items-center justify-content-center">
<div class="container">
<h1 class="display-6mb-4">They Show Growth</h1>
<p class="lead">The duty of giving an identity to a virtual model doesn't end here. To show real-life traits, they will also grow with the passage of time. They might get new artifacts as your bonds get stronger, and they will have their lifespan too.</p>
</div>
</section>
<div class=" carousel-container">
<div class="container">
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/C1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/C2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/C3.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/C4.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/C5.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!--Misconception-->
<!--Misconception Section-->
<section id="misconceptions" class="misconceptions-section py-5">
<div class="container px-4">
<h2 class="pb-2 border-bottom">Misconceptions/Truth</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/cut.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Misconception 1</h3>
<p>Its purpose is to just give personas to AI programs. Nothing innovative or unique.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/cut.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Misconception 2</h3>
<p>These models are just for anime fans. I don't like to watch anime, so I don't want AI models similar to anime.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/cut.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Misconception 3</h3>
<p>Why should I use this when I already have virtual assistants like Siri, Alexa, Google Assistant, and chatbots?</p>
</div>
</div>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/tick.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Truth 1</h3>
<p>It's not just about giving virtual personalities to AI models. It's about making them more human-like. Just as humans have 16 personalities, Virtual Persona also offers 16 personalities for AI models. The reason behind giving them an identity is to make AI more interactive, strengthening the bond between humans and AI and making it friendlier.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/tick.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Truth 2</h3>
<p>The reason for using AI anime models is that nobody likes the 3D models presented in the metaverse. These days, 3D models are neither completely realistic nor visually appealing. However, 2D models are easier to create, more visually appealing, and easier to animate and add effects to. So, it is a much better idea to use these types of models instead of realistic ones.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/tick.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Truth 3</h3>
<p>The answer is that they are not designed this way. Virtual Persona's main use is to make you more time-efficient, set reminders, timers, create daily plans, chat with you, and track your progress at the end of the day. These assistants don't do that for you. Maybe other tools can, but I don't think manually managing everything is an efficient way. This can save your precious time.
</p>
</div>
</div>
</div>
</section>
<!--Use Section-->
<section id="use" class="use-section py-5">
<div class="container px-4">
<h2 class="pb-2 border-bottom">Thoughts/Explanations</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/idea.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Thought 1</h3>
<p>I can create a To-Do list by myself.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/idea.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Thought 2</h3>
<p>I don't have a laptop or PC, or I don't have a computer-related job. I have my mobile and I use it most of the time.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/idea.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Thought 3</h3>
<p>Its nonsense to make virtual relationships.</p>
</div>
</div>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/tick.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Explanation 1</h3>
<p>Of course, you can, but how efficient is it? You can create a To-Do list on a sticky note. What if something unexpected happens and you need to change it completely? Then you have to create a new one. Next, you have to tick off tasks whenever you finish them. What if you forget? Not everyone is full of consistency and discipline. At the end of the day, after finishing all of your tasks, you don't have a dashboard to keep track of your progress and analyze your successes and failures. Also, you won't spend your time doing all of this manually on different websites!</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/tick.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Explanation 2</h3>
<p>Fine, then it's not for you. However, almost everyone uses a computer these days, whether you are a student, professor, programmer, content creator, and so on. We use computers, and if there is a virtual assistant to make your life easier, why not use it? It will only benefit you. In the future, AI will be very useful and influence every department of work, so this can be a great way to stay updated with innovative advancements. This AI assistant is mainly for computer users because these AI models are not going to fit on your mobile screen, and it can create screen hindrance. Also, mobile phones are full of distractions. Nobody uses a mobile phone to study or work for long periods.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/tick.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Explanation 3</h3>
<p>Here you made the mistake of misunderstanding the purpose of Virtual Persona. It's not about creating virtual feelings or some kind of virtual partner. It's an assistant. Its purpose is to make you more time-efficient, disciplined, and much more, as discussed in the AIM section. Ultimately, it's about giving you more personal time so that you can go out, make new friends, talk to your friends, create real-world relationships, and get extra hours just for your family without worrying about your daily tasks and To-Do's. Alleviate that stress of work and spend some quality time with your loved ones.</p>
</div>
</div>
</div>
</section>
<!--Goal Section-->
<section id="goal" class="goal-section py-5">
<div class="container px-4">
<h2 class="pb-2 border-bottom">Aim</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/aim.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">Less Distraction</h3>
<p>In the modern world, there are so many social media apps to keep you continuously busy. They can shorten our attention span. There are many fake people who fake happiness and their identity, which mentally affects others. We get dozens of notifications every hour, urging us to reply immediately, no matter what we are doing. There is so much distraction out there that it feels normal, and even though everyone knows it affects our attention spans and thinking capabilities, it continues. This constant distraction fades our ability to work deeply, ultimately decreasing productivity. Without deep, focused work, it's very hard to concentrate all of our energy on one task and achieve the best results. It feels like a little external push to work will be good enough to keep ourselves motivated and beat procrastination. Nobody is free enough to manage our daily personal tasks. Virtual Persona gives you that push, keeping you on track and beating all these distractions because you and your tasks are its priority.</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/aim.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">More Personal Time</h3>
<p>A Japanese company called Gatebox developed a 3D AI holographic character in a glass jar to provide virtual companionship. Some people felt less lonely, while others criticized it, saying society has become weak for preferring virtual entities over real partners. They have a point. Currently, about 20% of all teens experience depression before adulthood, and 10-15% suffer from symptoms at any given time. Virtual Persona aims to address this issue by helping people with their work. By making progress, those who feel depressed due to procrastination or lack of focus can find some relief. It may not solve the problem entirely, but it can help to some extent. With more time for family and friends, their mental health can improve. Virtual models will regularly encourage you to spend your free time with others and make real friends. They can create a positive aura around you, and you can discuss problems with them or share anything because they are not humans.
</p>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
<img src="./images/aim.jpg" alt="Icon" style="width: 1em; height: 1em;">
</div>
<h3 class="fs-2">A Path To Success</h3>
<p>EThese days, social media feeds negatively influence youth, and industries are making it worse. The addictive nature of platforms like Instagram, combined with their constant stream of content, can impact mental health, particularly for teenagers. Spending excessive time on these platforms can lead to feelings of inadequacy, comparison, and reduced self-esteem. Virtual Persona, on the other hand, aims to help the world's youth get virtual support to prioritize their work, finish their daily tasks, and stay consistent and disciplined. It provides a virtual presence to ensure you do something valuable for yourself and your society. To make it as interactive as those social media apps, it works more like a live game designed to use your time efficiently instead of wasting it. The time you invest here is as valuable as the time you invest in yourself. It's not designed for industries to run ads or make money but to help ordinary people become extraordinary.</p>
</div>
</div>
</div>
</section>
<!-- Final Section -->
<section class="final-section text-center d-flex align-items-center justify-content-center">
<div class="container">
<h1 class="display-6 mb-4">Support</h1>
<p class="lead mb-4">I have explained it as simply as I could and answered many questions I received from feedback. As an artist or a programmer, you can really contribute a lot to this project. Why not start by giving feedback?</p>
<a href="https://virtualpersona.vercel.app/#feedback" class="btn btn-feedback">Feedback</a>
</div>
</section>
<!-- Footer Section -->
<footer class="footer d-flex justify-content-between align-items-center p-3">
<span class="footer-text">© 2024 Virtual Persona</span>
<div class="footer-icons">
<a href="https://www.linkedin.com/in/tarun-singh-60671329a" class="social-link">
<img src="./images/linked.png" alt="LinkedIn" class="social-icon">
</a>
<a href="https://www.instagram.com/i_am__storm__" class="social-link">
<img src="./images/insta.png" alt="Instagram" class="social-icon">
</a>
<a href="https://x.com/Lightning_bytes?mx=2" class="social-link">
<img src="./images/twitter.png" alt="Twitter" class="social-icon">
</a>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>