From da2fb2ebe24c990e92e21c13157e2295b1baf39d Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 16 Sep 2024 12:17:53 +0200 Subject: [PATCH] First GUI prototype --- html/img/microphone.svg | 8 ++ html/index.html | 78 +++++++++++++++++ html/styles.css | 190 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 276 insertions(+) create mode 100644 html/img/microphone.svg create mode 100644 html/styles.css diff --git a/html/img/microphone.svg b/html/img/microphone.svg new file mode 100644 index 0000000..e189c34 --- /dev/null +++ b/html/img/microphone.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/html/index.html b/html/index.html index e69de29..1cf1fdf 100644 --- a/html/index.html +++ b/html/index.html @@ -0,0 +1,78 @@ + + + + + + + + AI Assistant + + + + +
+ + +
+
    +
  • history1
    • +
  • history2
    • +
  • history3
    • +
  • history4
    • +
  • history5
    • +
  • history6
    • +
  • history7
    • +
  • history8
    • +
  • history9
    • +
  • history10
    • +
+
+ + +
+
+

Different AI models

+
+ +
+

Code

+
+
+
+

Math

+
+
+
+

Language

+
+
+
+

Default

+
+
+
+

Custom

+
+
+
+ + +
+
+
User: What is the weather today?
+
AI: It's sunny with a slight breeze.
+
User: Great! Thank you!
+
AI: You're welcome!
+
+
+ + +
+ + + +
+
+ + + diff --git a/html/styles.css b/html/styles.css new file mode 100644 index 0000000..1c62c93 --- /dev/null +++ b/html/styles.css @@ -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); +}