Hugging Face's logo

Spaces:
luck210
/
gemma
Sleeping

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

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +118 -106
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=100):
14
  if not user_input:
15
  return "Please say something!"
16
 
@@ -28,7 +28,7 @@ def get_chatbot_response(user_input: str, max_length=100):
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,48 +50,79 @@ HTML_CONTENT = """
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,18 +131,56 @@ HTML_CONTENT = """
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,94 +209,43 @@ HTML_CONTENT = """
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,12 +261,6 @@ HTML_CONTENT = """
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,7 +562,7 @@ HTML_CONTENT = """
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
 
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
  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
  --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: 50vh; 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
  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
  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
  <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
  // 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