Merge pull request 'main' (#7) from React-Group/ai-virtual-assistant:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/ai-virtual-assistant/pulls/7
This commit is contained in:
Patrick 2024-09-16 13:24:34 +02:00
commit 574377cc55
13 changed files with 137 additions and 124 deletions

2
.gitignore vendored
View file

@ -1,2 +1,4 @@
venv/
__pycache__
.idea/
.vscode/

View file

@ -1,78 +0,0 @@
<!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="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">
<ul>
<li>history1</li>
<li>history2</li>
<li>history3</li>
<li>history4</li>
<li>history5</li>
<li>history6</li>
<li>history7</li>
<li>history8</li>
<li>history9</li>
<li>history10</li>
</ul>
</div>
<!-- Models section: Contains buttons to switch between AI models -->
<div class="models">
<div class="titel">
<h1>Different AI models</h1>
</div>
<!-- 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>
<!-- Output section: Simulating a conversation with AI -->
<div class="output">
<div class="conversation">
<div class="user-message">User: What is the weather today?</div>
<div class="ai-message">AI: It's sunny with a slight breeze.</div>
<div class="user-message">User: Great! Thank you!</div>
<div class="ai-message">AI: You're welcome!</div>
</div>
</div>
<!-- Input section: Where user input is provided -->
<div class="input">
<input type="text" placeholder="Type your message here..." />
<button><img src="img/microphone.svg" alt="microphone"></button>
<button>Send</button>
</div>
</div>
</body>
</html>

3
py/.idea/.gitignore vendored
View file

@ -1,3 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml

View file

@ -1,6 +0,0 @@
<component name="InspectionProjectProfileManager">
<settings>
<option name="USE_PROJECT_PROFILE" value="false" />
<version value="1.0" />
</settings>
</component>

View file

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Black">
<option name="sdkName" value="Python 3.12" />
</component>
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12 (py)" project-jdk-type="Python SDK" />
</project>

View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/py.iml" filepath="$PROJECT_DIR$/.idea/py.iml" />
</modules>
</component>
</project>

View file

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="PYTHON_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="jdk" jdkName="Python 3.12 (py)" jdkType="Python SDK" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

View file

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>

View file

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

90
py/static/index.html Normal file
View file

@ -0,0 +1,90 @@
<!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="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">
<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>
<!-- 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">
<div class="user-message">User: What is the weather today?</div>
<div class="ai-message">AI: It's sunny with a slight breeze.</div>
<div class="user-message">User: Great! Thank you!</div>
<div class="ai-message">AI: You're welcome!</div>
</div>
</div>
<!-- Input section: Where user input is provided -->
<div class="input">
<input type="text" placeholder="Type your message here..." />
<button><img src="img/microphone.svg" alt="microphone"></button>
<button>Send</button>
</div>
</div>
</body>
</html>

View file

@ -62,23 +62,49 @@ body {
.history ul li {
padding: 10px 0;
border-bottom: 1px solid var(--text-color);
width: 100%;
}
.history ul li a{
display: block;
text-decoration: none;
color: white;
width: 100%;
padding: 5px;
}
.history ul li a:hover{
background-color: var(--input-button-hover-color);
}
/* Models Section */
.models {
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--models-background-color);
border-radius: 2em;
padding: 1em;
height: 40vh; /* Adjusted height to occupy 40% of the viewport height */
}
.models .title h3 {
.models h3 {
padding: 2px;
margin: 5px;
}
.models .title h3 {
padding: 2px;
margin: 5px;
padding-bottom: 1em;
}
.grid{
grid-column: 1;
grid-row: 2;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1em;
}
.ai-class {
text-align: center;
display: flex;
@ -187,4 +213,4 @@ body {
}
.input button:hover {
background-color: var(--input-button-hover-color);
}
}

2
py/venv.sh Normal file → Executable file
View file

@ -1,7 +1,7 @@
#!/bin/bash
rm -rf venv/
virtualenv venv
source venv/bin/activate
pip install transformers
pip install torch
pip install flask

11
py/web_flask.py Normal file
View file

@ -0,0 +1,11 @@
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return app.send_static_file('index.html')
if __name__ == '__main__':
app.run()