Hugging Face's logo

Spaces:
luck210
/
gemma
Sleeping

App Files Community
luck210 commited on
Commit
fb1e2e0
·
verified ·
1 Parent(s): b5a898a

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +106 -118
app.py CHANGED
@@ -10,7 +10,7 @@ tokenizer = AutoTokenizer.from_pretrained(model_name)
10
  model = AutoModelForCausalLM.from_pretrained(model_name)
11
 
12
  # Function to generate chatbot response
13
- def get_chatbot_response(user_input: str, max_length=1000):
14
  if not user_input:
15
  return "Please say something!"
16
 
@@ -28,7 +28,7 @@ def get_chatbot_response(user_input: str, max_length=1000):
28
  response = tokenizer.decode(chat_history_ids[:, input_ids.shape[-1]:][0], skip_special_tokens=True)
29
  return response.strip()
30
 
31
- # HTML, CSS, and JS with two modes (dark and soft)
32
  HTML_CONTENT = """
33
  <!DOCTYPE html>
34
  <html lang="en">
@@ -50,79 +50,48 @@ HTML_CONTENT = """
50
  --background-color: #000; --error-color: #FF4D4D; --success-color: #4CAF50;
51
  }
52
  .soft_mode {
53
- --primary-color: rgb(220, 230, 240); /* Soft pastel blue */
54
- --secondary-color: rgb(235, 240, 245); /* Lighter pastel */
55
- --secondary-hover-color: rgb(200, 210, 225);
56
- --focus-color: rgb(245, 245, 250); --focus-hover-color: rgb(230, 230, 235);
57
- --button-hover-color: rgb(210, 220, 230);
58
- --text-color: rgb(40, 50, 60); --text-secondary-color: rgb(90, 100, 110);
59
- --heading-secondary-color: rgb(150, 160, 170);
60
- --placeholder-color: rgb(120, 130, 140); --accent-color: rgb(100, 150, 255); /* Softer blue */
61
- --star-color: rgb(180, 190, 200); --background-color: rgb(240, 245, 250); /* Very light pastel */
62
- --error-color: rgb(255, 100, 100); --success-color: rgb(100, 200, 100);
63
  }
64
  body {
65
- min-height: 100vh; display: flex; flex-direction: row; justify-content: space-between;
66
- background: var(--background-color); position: relative; overflow-y: hidden; transition: background 0.3s ease;
67
  }
68
  .stars {
69
- position: fixed; width: 100%; height: 100%;
70
- background: url('https://www.transparenttextures.com/patterns/stardust.png');
71
  animation: starsAnim 100s linear infinite; z-index: -1; transition: opacity 0.3s ease; opacity: 0.8;
72
  }
73
- .soft_mode .stars {
74
- background: url('https://www.transparenttextures.com/patterns/stardust.png') rgba(240, 245, 250, 0.4);
75
- opacity: 0.3;
76
- }
77
  @keyframes starsAnim { from { background-position: 0 0; } to { background-position: 10000px 10000px; } }
78
  @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
79
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
80
- .sidebar {
81
- width: 70px; height: 100vh; background: rgba(26, 27, 30, 0.95); display: flex; flex-direction: column;
82
- align-items: center; padding: 1rem 0; position: fixed; left: 0; top: 0; transition: width 0.3s ease; z-index: 1001;
83
- }
84
- .sidebar:hover { width: 200px; }
85
- .soft_mode .sidebar { background: rgba(235, 240, 245, 0.95); }
86
- .sidebar__item {
87
- width: 100%; padding: 1rem; color: var(--text-secondary-color); text-decoration: none;
88
- display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; position: relative;
89
- }
90
- .sidebar__item:hover, .sidebar__item:focus {
91
- background: var(--secondary-hover-color); color: var(--accent-color); padding-left: 1.5rem; transform: scale(1.05);
92
- }
93
- .sidebar__item i { font-size: 1.5rem; }
94
- .sidebar__item span { display: none; font-size: 1rem; }
95
- .sidebar:hover .sidebar__item span { display: inline; }
96
- .tooltip {
97
- visibility: hidden; background: var(--secondary-color); color: var(--text-color); font-size: 0.8rem;
98
- padding: 0.5rem; border-radius: 0.3rem; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
99
- white-space: nowrap; z-index: 1002; transition: visibility 0.2s, opacity 0.2s; opacity: 0;
100
- }
101
- .sidebar__item:hover .tooltip, .sidebar__item:focus .tooltip { visibility: visible; opacity: 1; }
102
  .main-content {
103
- flex: 1; display: flex; flex-direction: column; padding-bottom: 100px; padding-top: 2rem; margin-left: 70px;
104
- height: 100vh; overflow: hidden;
 
 
 
105
  }
106
- .header { max-width: 900px; text-align: center; padding: 0 2rem; margin: 0 auto; }
107
  .header__title h1 {
108
- color: var(--text-color); font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem;
109
  text-shadow: 0 0 10px rgba(0, 163, 255, 0.5); animation: fadeIn 1s ease-in;
110
  }
111
  .header__title h2 {
112
- color: var(--text-secondary-color); font-size: 1.5rem; font-weight: 400;
113
- max-width: 600px; margin: 0 auto; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
114
- transition: opacity 0.3s ease, height 0.3s ease;
115
  }
116
  .suggests {
117
- display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
118
- margin: 2rem auto; max-width: 900px; gap: 1rem; padding: 0 2rem; transition: opacity 0.3s ease, height 0.3s ease;
119
- animation: fadeIn 0.5s ease-in;
120
- }
121
- .suggests.hidden, .header__title h2.hidden {
122
- opacity: 0; height: 0; margin: 0; overflow: hidden;
123
  }
 
124
  .suggests__item {
125
- background: rgba(26, 27, 30, 0.9); color: var(--text-secondary-color); padding: 1.5rem;
126
  border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; border: 1px solid var(--focus-color);
127
  position: relative;
128
  }
@@ -131,56 +100,18 @@ HTML_CONTENT = """
131
  background: var(--secondary-hover-color); border-color: var(--accent-color); color: var(--text-color);
132
  transform: translateY(-3px);
133
  }
134
- .suggests__item-icon { margin-top: 1rem; color: var(--accent-color); transition: transform 0.2s ease; }
135
  .suggests__item:hover .suggests__item-icon, .suggests__item:focus .suggests__item-icon { transform: scale(1.2); }
136
- .suggests__item .tooltip { top: -40px; left: 50%; transform: translateX(-50%); }
137
  .suggests__item:hover .tooltip, .suggests__item:focus .tooltip { visibility: visible; opacity: 1; }
138
- .prompt {
139
- position: fixed; background: rgba(10, 10, 11, 0.9); z-index: 1000; width: calc(100% - 70px);
140
- left: 70px; bottom: 0; padding: 1rem; border-top: 1px solid var(--secondary-color); transition: all 0.3s ease;
141
- }
142
- .soft_mode .prompt { background: rgba(235, 240, 245, 0.9); border-top: 1px solid var(--focus-color); }
143
- .prompt__input-wrapper {
144
- max-width: 900px; margin: 0 auto; position: relative; display: flex; align-items: center;
145
- background: var(--secondary-color); border: 1px solid var(--focus-color); border-radius: 0.5rem;
146
- padding: 0.2rem; transition: all 0.3s ease; animation: fadeIn 0.5s ease-in;
147
- }
148
- .prompt__input-wrapper:focus-within {
149
- border-color: var(--accent-color); background: var(--focus-color); transform: scale(1.02);
150
- }
151
- .prompt__input-wrapper.dragover {
152
- border: 2px dashed var(--accent-color); background: var(--focus-hover-color);
153
- }
154
- .prompt__form-input {
155
- flex-grow: 1; border: none; resize: none; font-size: 1.1rem; color: var(--text-color);
156
- padding: 0.3rem 0.5rem; background: transparent; outline: none; transition: all 0.3s ease;
157
- }
158
- .prompt__form-input::placeholder { color: var(--placeholder-color); transition: opacity 0.3s ease; }
159
- .prompt__form-input:focus::placeholder { opacity: 0.5; }
160
- .prompt__action-buttons {
161
- display: flex; align-items: center; gap: 0.3rem; padding-right: 0.3rem; position: relative;
162
- }
163
- .prompt__action-buttons.advanced { display: none; }
164
- .prompt__action-buttons.advanced.active { display: flex; }
165
- .prompt__form-button {
166
- background: none; border: none; color: var(--text-secondary-color); font-size: 1.3rem;
167
- cursor: pointer; padding: 0.3rem; transition: all 0.3s ease; position: relative;
168
- }
169
- .prompt__form-button:hover, .prompt__form-button:focus { color: var(--accent-color); transform: scale(1.1); }
170
- .prompt__form-button.send { font-size: 1.5rem; }
171
- .prompt__form-button .tooltip { top: -35px; left: 50%; transform: translateX(-50%); }
172
- .prompt__form-button:hover .tooltip, .prompt__form-button:focus .tooltip { visibility: visible; opacity: 1; }
173
- .prompt__disclaim {
174
- text-align: center; color: var(--placeholder-color); font-size: 0.8rem; margin-top: 1rem;
175
- max-width: 900px; margin-left: auto; margin-right: auto; transition: opacity 0.3s ease;
176
- }
177
  .chat-bar {
178
- max-width: 900px; margin: 2rem auto; padding: 0 2rem; display: flex; flex-direction: column;
179
- overflow-y: auto; max-height: calc(100vh - 180px); -ms-overflow-style: none; scrollbar-width: none;
 
180
  }
181
  .chat-bar::-webkit-scrollbar { display: none; }
182
  .chat-message {
183
- margin-bottom: 1rem; padding: 1rem; border-radius: 0.5rem; background: rgba(26, 27, 30, 0.9);
184
  color: var(--text-color); word-wrap: break-word; animation: fadeIn 0.3s ease-in; position: relative;
185
  }
186
  .soft_mode .chat-message { background: rgba(235, 240, 245, 0.9); }
@@ -209,43 +140,94 @@ HTML_CONTENT = """
209
  transition: color 0.2s ease;
210
  }
211
  .feedback-options button:hover, .feedback-options button:focus { color: var(--accent-color); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  .error-message {
213
  background: rgba(255, 77, 77, 0.2); border: 1px solid var(--error-color); color: var(--text-color);
214
- padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; animation: fadeIn 0.3s ease-in;
215
  display: flex; justify-content: space-between; align-items: center;
216
  }
217
  .error-message button {
218
- background: var(--error-color); color: var(--text-color); border: none; padding: 0.3rem 0.6rem;
219
  border-radius: 0.3rem; cursor: pointer; transition: background 0.2s ease;
220
  }
221
  .error-message button:hover, .error-message button:focus { background: var(--button-hover-color); }
222
  .back-to-latest {
223
- display: none; position: fixed; bottom: 100px; right: 2rem; background: var(--secondary-color);
224
- color: var(--text-color); padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;
225
  border: 1px solid var(--accent-color); transition: all 0.3s ease; z-index: 1000;
226
  }
227
  .back-to-latest.visible { display: block; }
228
  .back-to-latest:hover, .back-to-latest:focus { background: var(--secondary-hover-color); transform: scale(1.05); }
229
  .processing-dots {
230
- display: none; position: absolute; right: 60px; color: var(--accent-color); font-size: 1.2rem;
231
  }
232
  .processing-dots.active { display: inline; animation: pulse 1.5s infinite; }
233
- @keyframes blink {
234
- 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; }
235
- }
236
- .processing-dots span {
237
- animation: blink 1s infinite; animation-delay: calc(0.2s * var(--i));
238
- }
239
  </style>
240
  </head>
241
  <body>
242
  <div class="stars"></div>
243
- <nav class="sidebar" aria-label="Main navigation">
244
- <a href="#" class="sidebar__item" tabindex="0" aria-label="Home"><i class='bx bx-home'></i><span>Home</span><div class="tooltip">Go to Home</div></a>
245
- <a href="#" class="sidebar__item" tabindex="0" aria-label="Profile"><i class='bx bx-user'></i><span>Profile</span><div class="tooltip">View Profile</div></a>
246
- <a href="#" class="sidebar__item" tabindex="0" aria-label="Settings"><i class='bx bx-cog'></i><span>Settings</span><div class="tooltip">Adjust Settings</div></a>
247
- <a href="#" class="sidebar__item" tabindex="0" aria-label="Help"><i class='bx bx-help-circle'></i><span>Help</span><div class="tooltip">Get Help</div></a>
248
- </nav>
249
  <div class="main-content">
250
  <header class="header">
251
  <div class="header__title">
@@ -261,6 +243,12 @@ HTML_CONTENT = """
261
  <div class="chat-bar" id="chatBar" aria-live="polite"></div>
262
  <button class="back-to-latest" id="backToLatest" tabindex="0">Back to Latest</button>
263
  </div>
 
 
 
 
 
 
264
  <section class="prompt">
265
  <form action="#" class="prompt__form" novalidate>
266
  <div class="prompt__input-wrapper">
@@ -562,7 +550,7 @@ HTML_CONTENT = """
562
  // Responsive adjustments
563
  window.addEventListener('resize', () => {
564
  const width = window.innerWidth;
565
- chatBar.style.maxHeight = width < 768 ? 'calc(100vh - 200px)' : 'calc(100vh - 180px)';
566
  });
567
 
568
  // Starry background effects
 
10
  model = AutoModelForCausalLM.from_pretrained(model_name)
11
 
12
  # Function to generate chatbot response
13
+ def get_chatbot_response(user_input: str, max_length=100):
14
  if not user_input:
15
  return "Please say something!"
16
 
 
28
  response = tokenizer.decode(chat_history_ids[:, input_ids.shape[-1]:][0], skip_special_tokens=True)
29
  return response.strip()
30
 
31
+ # HTML, CSS, and JS with main-content at the top and more space
32
  HTML_CONTENT = """
33
  <!DOCTYPE html>
34
  <html lang="en">
 
50
  --background-color: #000; --error-color: #FF4D4D; --success-color: #4CAF50;
51
  }
52
  .soft_mode {
53
+ --primary-color: rgb(220, 230, 240); --secondary-color: rgb(235, 240, 245); --secondary-hover-color: rgb(200, 210, 225);
54
+ --focus-color: rgb(245, 245, 250); --focus-hover-color: rgb(230, 230, 235); --button-hover-color: rgb(210, 220, 230);
55
+ --text-color: rgb(40, 50, 60); --text-secondary-color: rgb(90, 100, 110); --heading-secondary-color: rgb(150, 160, 170);
56
+ --placeholder-color: rgb(120, 130, 140); --accent-color: rgb(100, 150, 255); --star-color: rgb(180, 190, 200);
57
+ --background-color: rgb(240, 245, 250); --error-color: rgb(255, 100, 100); --success-color: rgb(100, 200, 100);
 
 
 
 
 
58
  }
59
  body {
60
+ min-height: 100vh; display: flex; flex-direction: column; background: var(--background-color);
61
+ position: relative; overflow-y: auto; transition: background 0.3s ease;
62
  }
63
  .stars {
64
+ position: fixed; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/stardust.png');
 
65
  animation: starsAnim 100s linear infinite; z-index: -1; transition: opacity 0.3s ease; opacity: 0.8;
66
  }
67
+ .soft_mode .stars { background: url('https://www.transparenttextures.com/patterns/stardust.png') rgba(240, 245, 250, 0.4); opacity: 0.3; }
 
 
 
68
  @keyframes starsAnim { from { background-position: 0 0; } to { background-position: 10000px 10000px; } }
69
  @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
70
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  .main-content {
72
+ flex: 1; display: flex; flex-direction: column; padding: 3rem 2rem 2rem; /* Increased top padding */
73
+ max-width: 1200px; /* Wider display */
74
+ margin: 0 auto; /* Centered */
75
+ min-height: 70vh; /* More vertical space */
76
+ overflow-y: auto;
77
  }
78
+ .header { text-align: center; padding-bottom: 2rem; }
79
  .header__title h1 {
80
+ color: var(--text-color); font-size: 4rem; font-weight: 800; margin-bottom: 1.5rem;
81
  text-shadow: 0 0 10px rgba(0, 163, 255, 0.5); animation: fadeIn 1s ease-in;
82
  }
83
  .header__title h2 {
84
+ color: var(--text-secondary-color); font-size: 1.8rem; font-weight: 400; max-width: 800px;
85
+ margin: 0 auto; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: opacity 0.3s ease, height 0.3s ease;
 
86
  }
87
  .suggests {
88
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Wider items */
89
+ margin: 3rem 0; gap: 1.5rem; /* More spacing */
90
+ transition: opacity 0.3s ease, height 0.3s ease; animation: fadeIn 0.5s ease-in;
 
 
 
91
  }
92
+ .suggests.hidden, .header__title h2.hidden { opacity: 0; height: 0; margin: 0; overflow: hidden; }
93
  .suggests__item {
94
+ background: rgba(26, 27, 30, 0.9); color: var(--text-secondary-color); padding: 2rem;
95
  border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; border: 1px solid var(--focus-color);
96
  position: relative;
97
  }
 
100
  background: var(--secondary-hover-color); border-color: var(--accent-color); color: var(--text-color);
101
  transform: translateY(-3px);
102
  }
103
+ .suggests__item-icon { margin-top: 1.5rem; color: var(--accent-color); transition: transform 0.2s ease; }
104
  .suggests__item:hover .suggests__item-icon, .suggests__item:focus .suggests__item-icon { transform: scale(1.2); }
105
+ .suggests__item .tooltip { top: -45px; left: 50%; transform: translateX(-50%); }
106
  .suggests__item:hover .tooltip, .suggests__item:focus .tooltip { visibility: visible; opacity: 1; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  .chat-bar {
108
+ margin: 3rem 0; display: flex; flex-direction: column; overflow-y: auto;
109
+ max-height: 60vh; /* Larger chat area */
110
+ -ms-overflow-style: none; scrollbar-width: none;
111
  }
112
  .chat-bar::-webkit-scrollbar { display: none; }
113
  .chat-message {
114
+ margin-bottom: 1.5rem; padding: 1.5rem; border-radius: 0.5rem; background: rgba(26, 27, 30, 0.9);
115
  color: var(--text-color); word-wrap: break-word; animation: fadeIn 0.3s ease-in; position: relative;
116
  }
117
  .soft_mode .chat-message { background: rgba(235, 240, 245, 0.9); }
 
140
  transition: color 0.2s ease;
141
  }
142
  .feedback-options button:hover, .feedback-options button:focus { color: var(--accent-color); }
143
+ .sidebar {
144
+ width: 70px; height: 100vh; background: rgba(26, 27, 30, 0.95); display: flex; flex-direction: column;
145
+ align-items: center; padding: 1rem 0; position: fixed; left: 0; top: 0; transition: width 0.3s ease; z-index: 1001;
146
+ }
147
+ .sidebar:hover { width: 200px; }
148
+ .soft_mode .sidebar { background: rgba(235, 240, 245, 0.95); }
149
+ .sidebar__item {
150
+ width: 100%; padding: 1rem; color: var(--text-secondary-color); text-decoration: none;
151
+ display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; position: relative;
152
+ }
153
+ .sidebar__item:hover, .sidebar__item:focus {
154
+ background: var(--secondary-hover-color); color: var(--accent-color); padding-left: 1.5rem; transform: scale(1.05);
155
+ }
156
+ .sidebar__item i { font-size: 1.5rem; }
157
+ .sidebar__item span { display: none; font-size: 1rem; }
158
+ .sidebar:hover .sidebar__item span { display: inline; }
159
+ .tooltip {
160
+ visibility: hidden; background: var(--secondary-color); color: var(--text-color); font-size: 0.8rem;
161
+ padding: 0.5rem; border-radius: 0.3rem; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
162
+ white-space: nowrap; z-index: 1002; transition: visibility 0.2s, opacity 0.2s; opacity: 0;
163
+ }
164
+ .sidebar__item:hover .tooltip, .sidebar__item:focus .tooltip { visibility: visible; opacity: 1; }
165
+ .prompt {
166
+ background: rgba(10, 10, 11, 0.9); z-index: 1000; width: 100%; padding: 2rem;
167
+ border-top: 1px solid var(--secondary-color); transition: all 0.3s ease;
168
+ }
169
+ .soft_mode .prompt { background: rgba(235, 240, 245, 0.9); border-top: 1px solid var(--focus-color); }
170
+ .prompt__input-wrapper {
171
+ max-width: 1200px; margin: 0 auto; position: relative; display: flex; align-items: center;
172
+ background: var(--secondary-color); border: 1px solid var(--focus-color); border-radius: 0.5rem;
173
+ padding: 0.5rem; transition: all 0.3s ease; animation: fadeIn 0.5s ease-in;
174
+ }
175
+ .prompt__input-wrapper:focus-within {
176
+ border-color: var(--accent-color); background: var(--focus-color); transform: scale(1.02);
177
+ }
178
+ .prompt__input-wrapper.dragover {
179
+ border: 2px dashed var(--accent-color); background: var(--focus-hover-color);
180
+ }
181
+ .prompt__form-input {
182
+ flex-grow: 1; border: none; resize: none; font-size: 1.2rem; color: var(--text-color);
183
+ padding: 0.5rem 1rem; background: transparent; outline: none; transition: all 0.3s ease;
184
+ }
185
+ .prompt__form-input::placeholder { color: var(--placeholder-color); transition: opacity 0.3s ease; }
186
+ .prompt__form-input:focus::placeholder { opacity: 0.5; }
187
+ .prompt__action-buttons {
188
+ display: flex; align-items: center; gap: 0.5rem; padding-right: 0.5rem; position: relative;
189
+ }
190
+ .prompt__action-buttons.advanced { display: none; }
191
+ .prompt__action-buttons.advanced.active { display: flex; }
192
+ .prompt__form-button {
193
+ background: none; border: none; color: var(--text-secondary-color); font-size: 1.5rem;
194
+ cursor: pointer; padding: 0.5rem; transition: all 0.3s ease; position: relative;
195
+ }
196
+ .prompt__form-button:hover, .prompt__form-button:focus { color: var(--accent-color); transform: scale(1.1); }
197
+ .prompt__form-button.send { font-size: 1.8rem; }
198
+ .prompt__form-button .tooltip { top: -40px; left: 50%; transform: translateX(-50%); }
199
+ .prompt__form-button:hover .tooltip, .prompt__form-button:focus .tooltip { visibility: visible; opacity: 1; }
200
+ .prompt__disclaim {
201
+ text-align: center; color: var(--placeholder-color); font-size: 0.9rem; margin-top: 1.5rem;
202
+ max-width: 1200px; margin-left: auto; margin-right: auto; transition: opacity 0.3s ease;
203
+ }
204
  .error-message {
205
  background: rgba(255, 77, 77, 0.2); border: 1px solid var(--error-color); color: var(--text-color);
206
+ padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1.5rem; animation: fadeIn 0.3s ease-in;
207
  display: flex; justify-content: space-between; align-items: center;
208
  }
209
  .error-message button {
210
+ background: var(--error-color); color: var(--text-color); border: none; padding: 0.5rem 1rem;
211
  border-radius: 0.3rem; cursor: pointer; transition: background 0.2s ease;
212
  }
213
  .error-message button:hover, .error-message button:focus { background: var(--button-hover-color); }
214
  .back-to-latest {
215
+ display: none; position: fixed; bottom: 120px; right: 3rem; background: var(--secondary-color);
216
+ color: var(--text-color); padding: 0.8rem 1.5rem; border-radius: 0.5rem; cursor: pointer;
217
  border: 1px solid var(--accent-color); transition: all 0.3s ease; z-index: 1000;
218
  }
219
  .back-to-latest.visible { display: block; }
220
  .back-to-latest:hover, .back-to-latest:focus { background: var(--secondary-hover-color); transform: scale(1.05); }
221
  .processing-dots {
222
+ display: none; position: absolute; right: 70px; color: var(--accent-color); font-size: 1.5rem;
223
  }
224
  .processing-dots.active { display: inline; animation: pulse 1.5s infinite; }
225
+ @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
226
+ .processing-dots span { animation: blink 1s infinite; animation-delay: calc(0.2s * var(--i)); }
 
 
 
 
227
  </style>
228
  </head>
229
  <body>
230
  <div class="stars"></div>
 
 
 
 
 
 
231
  <div class="main-content">
232
  <header class="header">
233
  <div class="header__title">
 
243
  <div class="chat-bar" id="chatBar" aria-live="polite"></div>
244
  <button class="back-to-latest" id="backToLatest" tabindex="0">Back to Latest</button>
245
  </div>
246
+ <nav class="sidebar" aria-label="Main navigation">
247
+ <a href="#" class="sidebar__item" tabindex="0" aria-label="Home"><i class='bx bx-home'></i><span>Home</span><div class="tooltip">Go to Home</div></a>
248
+ <a href="#" class="sidebar__item" tabindex="0" aria-label="Profile"><i class='bx bx-user'></i><span>Profile</span><div class="tooltip">View Profile</div></a>
249
+ <a href="#" class="sidebar__item" tabindex="0" aria-label="Settings"><i class='bx bx-cog'></i><span>Settings</span><div class="tooltip">Adjust Settings</div></a>
250
+ <a href="#" class="sidebar__item" tabindex="0" aria-label="Help"><i class='bx bx-help-circle'></i><span>Help</span><div class="tooltip">Get Help</div></a>
251
+ </nav>
252
  <section class="prompt">
253
  <form action="#" class="prompt__form" novalidate>
254
  <div class="prompt__input-wrapper">
 
550
  // Responsive adjustments
551
  window.addEventListener('resize', () => {
552
  const width = window.innerWidth;
553
+ chatBar.style.maxHeight = width < 768 ? '50vh' : '60vh';
554
  });
555
 
556
  // Starry background effects