simple_chat, voice_recognition #22
6 changed files with 281 additions and 3 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1 +1,2 @@
|
|||
venv/
|
||||
__pycache__
|
||||
|
|
|
|||
8
html/img/microphone.svg
Normal file
8
html/img/microphone.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V11C17 13.7614 14.7614 16 12 16C9.23858 16 7 13.7614 7 11V8Z" stroke="#1C274C" stroke-width="1.5"/>
|
||||
<path d="M13 8L17 8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M13 11L17 11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M12 19V22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M20.75 10C20.75 9.58579 20.4142 9.25 20 9.25C19.5858 9.25 19.25 9.58579 19.25 10H20.75ZM4.75 10C4.75 9.58579 4.41421 9.25 4 9.25C3.58579 9.25 3.25 9.58579 3.25 10H4.75ZM15.5121 17.3442C15.1499 17.5452 15.0192 18.0017 15.2202 18.3639C15.4212 18.7261 15.8777 18.8568 16.2399 18.6558L15.5121 17.3442ZM19.25 10V11H20.75V10H19.25ZM4.75 11V10H3.25V11H4.75ZM12 18.25C7.99594 18.25 4.75 15.0041 4.75 11H3.25C3.25 15.8325 7.16751 19.75 12 19.75V18.25ZM19.25 11C19.25 13.7287 17.7429 16.1063 15.5121 17.3442L16.2399 18.6558C18.928 17.1642 20.75 14.2954 20.75 11H19.25Z" fill="#1C274C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,78 @@
|
|||
<!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>
|
||||
190
html/styles.css
Normal file
190
html/styles.css
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
/* Color Variables */
|
||||
:root {
|
||||
--background-color: black;
|
||||
--text-color: white;
|
||||
--font-family: Arial, sans-serif;
|
||||
--history-background-color: rgb(0, 0, 48);
|
||||
--models-background-color: rgb(0, 0, 48);
|
||||
--code-model-color: red;
|
||||
--math-model-color: green;
|
||||
--language-model-color: blue;
|
||||
--default-model-color: yellow;
|
||||
--custom-model-color: purple;
|
||||
--output-background-color: rgb(0, 0, 48);
|
||||
--user-message-color: rgb(0, 128, 255);
|
||||
--ai-message-color: rgb(100, 100, 255);
|
||||
--input-background-color: rgb(0, 0, 48);
|
||||
--input-button-color: rgb(0, 128, 255);
|
||||
--input-button-hover-color: rgb(0, 100, 200);
|
||||
}
|
||||
/* Global Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Disable Scrolling */
|
||||
html, body {
|
||||
height: 100vh;
|
||||
overflow: hidden; /* Prevent scrolling */
|
||||
}
|
||||
/* Body Styling */
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
/* Container Grid Layout */
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-rows: 1fr 1fr 0.5fr;
|
||||
gap: 10px;
|
||||
width: 90vw;
|
||||
height: 90vh;
|
||||
}
|
||||
/* History Section */
|
||||
.history {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
border-radius: 2em;
|
||||
background-color: var(--history-background-color);
|
||||
padding: 1em;
|
||||
overflow-y: auto;
|
||||
height: 50vh; /* Adjusted to occupy 60% of the viewport height */
|
||||
}
|
||||
.history ul {
|
||||
list-style: none;
|
||||
}
|
||||
.history ul li {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--text-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 {
|
||||
padding: 2px;
|
||||
margin: 5px;
|
||||
}
|
||||
.ai-class {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.circle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.circle:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
/* Model Colors */
|
||||
.code-model {
|
||||
background-color: var(--code-model-color);
|
||||
}
|
||||
.math-model {
|
||||
background-color: var(--math-model-color);
|
||||
}
|
||||
.language-model {
|
||||
background-color: var(--language-model-color);
|
||||
}
|
||||
.default-model {
|
||||
background-color: var(--default-model-color);
|
||||
}
|
||||
.custom-model {
|
||||
background-color: var(--custom-model-color);
|
||||
}
|
||||
/* Output Section */
|
||||
.output {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
border-radius: 2em;
|
||||
background-color: var(--output-background-color);
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 1.2em;
|
||||
overflow-y: scroll;
|
||||
height: 80vh;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* Conversation */
|
||||
.conversation {
|
||||
width: 100%;
|
||||
}
|
||||
.md {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.user-message {
|
||||
background-color: var(--user-message-color);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
align-self: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
.ai-message {
|
||||
background-color: var(--ai-message-color);
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
/* Input Section */
|
||||
.input {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
border-radius: 2em;
|
||||
background-color: var(--input-background-color);
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10vh;
|
||||
margin-top: -7em;
|
||||
}
|
||||
.input input {
|
||||
flex-grow: 1;
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.input button {
|
||||
padding: 10px 20px;
|
||||
background-color: var(--input-button-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
height: 3em;
|
||||
margin: 5px;
|
||||
}
|
||||
.input button img {
|
||||
height: 100%;
|
||||
}
|
||||
.input button:hover {
|
||||
background-color: var(--input-button-hover-color);
|
||||
}
|
||||
|
|
@ -29,8 +29,7 @@ class API:
|
|||
response_data.append(line_raw["response"])
|
||||
|
||||
final_response = "".join(response_data)
|
||||
generated_text = final_response.splitlines()[-1]
|
||||
return generated_text
|
||||
return final_response
|
||||
else:
|
||||
return "Error: " + response.text
|
||||
|
||||
|
|
@ -47,4 +46,4 @@ class API:
|
|||
answer = self.process_text_transformers(message, "meta-llama/Meta-Llama-3.1-8B")
|
||||
else:
|
||||
return "Invalid choice"
|
||||
return answer
|
||||
return answer
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
#!/bin/bash
|
||||
|
||||
rm -rf venv/
|
||||
virtualenv venv
|
||||
source venv/bin/activate
|
||||
pip install transformers
|
||||
pip install torch
|
||||
|
|
|
|||
Reference in a new issue