React-Group/ai-virtual-assistant
Archived
3
2
Fork 2
Code Issues 24 Pull requests Projects Releases Packages Wiki Activity Actions

Added a header to index

Browse source
This commit is contained in:
sageTheDM 2024-09-16 16:08:00 +02:00
parent 8849b80d84
commit d0af4a5eeb
6 changed files with 153 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
py/static/img/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

42
py/static/styles.css
View file

@ -1,6 +1,6 @@
/* Color Variables */
:root {
--background-color: black;
--background-color: white;
--text-color: white;
--font-family: Arial, sans-serif;
--history-background-color: rgb(0, 0, 48);
@ -23,13 +23,14 @@
padding: 0;
box-sizing: border-box;
}
/* Disable Scrolling */
html, body {
height: 100vh;
overflow: hidden; /* Prevent scrolling */
}
/* Body Styling */
body {
margin-top: 1em;
display: flex;
justify-content: center;
align-items: center;
@ -37,6 +38,41 @@ body {
color: var(--text-color);
font-family: var(--font-family);
}
header {
background-color: var(--background-color); /* Use the background color variable */
color: black; /* Use the text color variable */
width: 100%;
text-decoration: none;
position: fixed;
top: 0;
left: 0;
padding: 10px 20px; /* Add some padding for spacing */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
z-index: 1000; /* Ensure the header is above other content */
font-family: var(--font-family); /* Use the font family variable */
}
header li {
display: inline-block;
margin: 0 15px; /* Add spacing between list items */
}
header img {
height: 2em;
vertical-align: middle; /* Align image with text */
}
header a {
color: black; /* Ensure links are white */
text-decoration: none; /* Remove underline from links */
transition: color 0.3s; /* Smooth transition for hover effect */
}
header a:hover {
color: var(--input-button-color); /* Change color on hover for better interaction */
}
/* Container Grid Layout */
.container {
display: grid;
@ -70,7 +106,7 @@ body {
text-decoration: none;
color: white;
width: 100%;
padding: 5px;
padding: 5px;
}
.history ul li a:hover{

13
py/templates/contact.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/styles.css">
<title>AI Assistant</title>
</head>
<body>
</body>
</html>

0
py/templates/faq.html Normal file
View file

187
py/templates/index.html
View file

@ -1,93 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/styles.css">
<title>AI Assistant</title>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/styles.css">
<title>AI Assistant</title>
</head>
<body>
<!-- Main container for the layout -->
<div class="container">
<!-- History section: A scrollable list of interactions or messages -->
<div class="history">
<body>
<header>
<ul>
<li><a href="#">history1</a></li>
<li><a href="#">history2</a></li>
<li><a href="#">history3</a></li>
<li><a href="#">history4</a></li>
<li><a href="#">history5</a></li>
<li><a href="#">history6</a></li>
<li><a href="#">history7</a></li>
<li><a href="#">history8</a></li>
<li><a href="#">history9</a></li>
<li><a href="#">history10</a></li>
<li><a href="#">history11</a></li>
<li><a href="#">history12</a></li>
<li><a href="#">history13</a></li>
<li><a href="#">history14</a></li>
<li><a href="#">history15</a></li>
<li><a href="#">history16</a></li>
<li><a href="#">history17</a></li>
<li><a href="#">history18</a></li>
<li><a href="#">history19</a></li>
<li><a href="#">history20</a></li>
<li>
<a href="/static/templates/index.html">
<img src="/static/img/logo.png" alt="logo.png">
</a>
</li>
<li>
<a href="/static/template/contact.html">Contact</a>
</li>
<li>
<a href="/static/template/faq.html">FAQ</a>
</li>
</ul>
</div>
<!-- Models section: Contains buttons to switch between AI models -->
<div class="models">
<div class="titel">
<h1>Different AI models</h1>
</div>
<div class="grid">
<!-- Each AI model is represented as a colored circular button -->
<div class="ai-class">
<h3>Code</h3>
<div class="circle code-model"></div>
</div>
<div class="ai-class">
<h3>Math</h3>
<div class="circle math-model"></div>
</div>
<div class="ai-class">
<h3>Language</h3>
<div class="circle language-model"></div>
</div>
<div class="ai-class">
<h3>Default</h3>
<div class="circle default-model"></div>
</div>
<div class="ai-class">
<h3>Custom</h3>
<div class="circle custom-model"></div>
</div>
</div>
</div>
</header>
<!-- Main container for the layout -->
<div class="container">
<!-- Output section: Simulating a conversation with AI -->
<div class="output">
<div class="conversation">
{% for message in messages %}
{% if message.startswith('User:') %}
<div class="user-message">{{ message }}</div>
{% else %}
<div class="ai-message">{{ message }}</div>
{% endif %}
{% endfor %}
<!-- History section: A scrollable list of interactions or messages -->
<div class="history">
<ul>
<li><a href="#">history1</a></li>
<li><a href="#">history2</a></li>
<li><a href="#">history3</a></li>
<li><a href="#">history4</a></li>
<li><a href="#">history5</a></li>
<li><a href="#">history6</a></li>
<li><a href="#">history7</a></li>
<li><a href="#">history8</a></li>
<li><a href="#">history9</a></li>
<li><a href="#">history10</a></li>
<li><a href="#">history11</a></li>
<li><a href="#">history12</a></li>
<li><a href="#">history13</a></li>
<li><a href="#">history14</a></li>
<li><a href="#">history15</a></li>
<li><a href="#">history16</a></li>
<li><a href="#">history17</a></li>
<li><a href="#">history18</a></li>
<li><a href="#">history19</a></li>
<li><a href="#">history20</a></li>
</ul>
</div>
</div>
<!-- Input section: Where user input is provided -->
<form class="input" method="POST" action="">
<input type="text" name="user_message" placeholder="Type your message here..." />
<button type="submit" name="option" value="voice"><img src="/static/img/microphone.svg" alt="microphone"></button>
<button type="submit" name="option" value="chat">Send</button>
</form>
</div>
</body>
</html>
<!-- Models section: Contains buttons to switch between AI models -->
<div class="models">
<div class="titel">
<h1>Different AI models</h1>
</div>
<div class="grid">
<!-- Each AI model is represented as a colored circular button -->
<div class="ai-class">
<h3>Code</h3>
<div class="circle code-model"></div>
</div>
<div class="ai-class">
<h3>Math</h3>
<div class="circle math-model"></div>
</div>
<div class="ai-class">
<h3>Language</h3>
<div class="circle language-model"></div>
</div>
<div class="ai-class">
<h3>Default</h3>
<div class="circle default-model"></div>
</div>
<div class="ai-class">
<h3>Custom</h3>
<div class="circle custom-model"></div>
</div>
</div>
</div>
<!-- Output section: Simulating a conversation with AI -->
<div class="output">
<div class="conversation">
{% for message in messages %}
{% if message.startswith('User:') %}
<div class="user-message">{{ message }}</div>
{% else %}
<div class="ai-message">{{ message }}</div>
{% endif %}
{% endfor %}
</div>
</div>
<!-- Input section: Where user input is provided -->
<form class="input" method="POST" action="">
<input type="text" name="user_message" placeholder="Type your message here..." />
<button type="submit" name="option" value="voice"><img src="/static/img/microphone.svg" alt="microphone"></button>
<button type="submit" name="option" value="chat">Send</button>
</form>
</div>
</body>
</html>

1
py/voice_recognition.py
View file

@ -28,6 +28,5 @@ class Voice:
except Exception as e:
text = "ERROR"
return text
print(listen())