changed structure
This commit is contained in:
Patrick_Pluto
parent
0cd3d2e846
commit
4cbb44b9fc
3 changed files with 0 additions and 0 deletions
8
py/static/img/microphone.svg
Normal file
8
py/static/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 |
90
py/static/index.html
Normal file
90
py/static/index.html
Normal 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>
|
||||
216
py/static/styles.css
Normal file
216
py/static/styles.css
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
/* 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);
|
||||
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 {
|
||||
background-color: var(--models-background-color);
|
||||
border-radius: 2em;
|
||||
padding: 1em;
|
||||
height: 40vh; /* Adjusted height to occupy 40% of the viewport height */
|
||||
}
|
||||
|
||||
.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;
|
||||
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);
|
||||
}
|
||||
Reference in a new issue