Skip to content

Commit aa30ecb

Browse files
pareenavermapareenaverma
authored
Merge pull request #1234 from zachlasiuk/demo-functionality
Adding LLM demo functionality
2 parents 5ef11a2 + a013c5e commit aa30ecb

File tree

25 files changed

+2405
-13
lines changed

25 files changed

+2405
-13
lines changed

‎assets/css/demo.css‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
#demo-container {
2+
background-color: #516170;
3+
border: 5px solid #6B747D;
4+
5+
margin-top: 16px;
6+
7+
min-width: 200px;
8+
min-height: 200px;
9+
text-align: center;
10+
}
11+
12+
#modal-diagram-expansion {
13+
--ads-modal-content-height: 3000px;
14+
--ads-modal-content-max-height: 2000px;
15+
}
16+
17+
18+
19+
/******************************************************/
20+
/* Configuration section */
21+
22+
23+
.eq-width-cols {
24+
max-width: calc(100% / var(--column-count)); /* Calculate the max-width based on the number of columns */
25+
}
26+
@media (min-width: 992px) { /* lg */
27+
.eq-width-cols {
28+
max-width: calc(100% / var(--column-count)); /* Calculate the max-width based on the number of columns */
29+
}
30+
}
31+
32+
@media (max-width: 576px) { /* xs */
33+
.eq-width-cols {
34+
max-width: 100%;
35+
flex-basis: 100%; /* Stacks the columns vertically on smaller screens */
36+
}
37+
}
38+
39+
40+
.spcs-div {
41+
min-height: 50px;
42+
}
43+
.config-specs {
44+
margin-left: 8px;
45+
margin-top: 8px;
46+
}
47+
48+
49+
50+
51+
/******************************************************/
52+
/* Config - File & Param section */
53+
.config-param-div, .config-file-div {
54+
flex: 1; /* Make both columns take equal width */
55+
display: flex;
56+
flex-direction: column;
57+
}
58+
.config-file-div {
59+
margin-top: 16px;
60+
}
61+
.config-file-display {
62+
border-radius: 5px;
63+
background-color: #C6C6C6;
64+
border: 1px solid #ffffff;
65+
66+
overflow: hidden;
67+
font-family: monospace;
68+
}
69+
70+
.config-file-header {
71+
background-color: #C6C6C6;
72+
padding: 10px;
73+
font-weight: bold;
74+
border-bottom: 1px solid #ffffff;
75+
text-align: left;
76+
color: black;
77+
}
78+
79+
.config-file-content {
80+
flex-grow: 1;
81+
overflow-y: auto;
82+
padding: 10px;
83+
background-color: #C6C6C6;
84+
}
85+
.config-file-content.small {
86+
max-height: 250px; /* Match the length of content about */
87+
}
88+
.config-file-content.large {
89+
max-height: 80vh; /* Match the length of content about */
90+
}
91+
92+
.config-file-content pre {
93+
margin: 0;
94+
white-space: pre-wrap; /* Wrap long lines */
95+
word-wrap: break-word;
96+
97+
/* Text style */
98+
color: black;
99+
}
100+
101+
/******************************************************/
102+
103+
104+
105+
106+
107+
108+
109+
110+
111+
112+
113+
/******************************************************/
114+
/* Demo section */
115+
116+
#all-messages-div {
117+
height: 300px;
118+
display: flex;
119+
flex-direction: column-reverse;
120+
overflow-y: auto;
121+
padding-top: 16px;
122+
}
123+
124+
125+
#input-and-submit {
126+
display: flex;
127+
position: relative;
128+
align-items: center;
129+
width: 100%;
130+
margin-top: 24px;
131+
}
132+
133+
134+
135+
#user-input-for-demo {
136+
width: 100%;
137+
flex-grow: 1;
138+
padding: 10px;
139+
140+
color: black;
141+
background-color: white;
142+
border: 1px solid #ccc;
143+
border-radius: 4px;
144+
resize: none;
145+
overflow: hidden;
146+
147+
font-family: (--ads-font-family);
148+
}
149+
#user-input-for-demo::placeholder {
150+
color: darkgrey;
151+
152+
font-family: (--ads-font-family);
153+
}
154+
155+
156+
#submit-button {
157+
margin-left: 10px;
158+
flex-shrink: 0;
159+
}
160+
161+
162+
163+
#reset-demo-txt {
164+
margin-top: 8px;
165+
float: left;
166+
color: var(--arm-light-blue);
167+
text-decoration: underline;
168+
cursor: pointer;
169+
}
170+
#reset-demo-txt:hover {
171+
color: var(--arm-green);
172+
}
173+
#ping-info {
174+
margin-top: 8px;
175+
margin-left: 24px;
176+
text-align: center;
177+
float: left;
178+
color: var(--arm-light-grey);
179+
font-style: italic;
180+
181+
}
182+
183+
.user-message {
184+
background-color: #545454;
185+
border-radius: 20px;
186+
width: fit-content;
187+
max-width: 70%;
188+
align-self: flex-end; /* float right */
189+
190+
margin-right: 16px;
191+
margin-bottom: 16px;
192+
193+
194+
padding: 8px;
195+
padding-left: 24px;
196+
padding-right: 24px;
197+
198+
/* text alignment */
199+
text-align: left;
200+
font-size: 18px!important;
201+
overflow-wrap: break-word; /* First attempt to break the word naturally */
202+
word-break: break-word; /* Then break at any character if needed */
203+
204+
/* Enable fade in */
205+
opacity: 0;
206+
animation: fadeIn 1s forwards;
207+
}
208+
@keyframes fadeIn {
209+
to {
210+
opacity: 1;
211+
}
212+
}
213+
214+
215+
.chatbot-message {
216+
background-color: transparent;
217+
border-radius: 20px;
218+
width: 90%;
219+
/*align-self: flex-end; */
220+
221+
display: flex;
222+
align-items: flex-start;
223+
224+
margin-left: 16px;
225+
margin-bottom: 16px;
226+
227+
padding: 8px;
228+
padding-left: 16px;
229+
230+
/* text alignment */
231+
text-align: left;
232+
font-size: 18px!important;
233+
overflow-wrap: break-word; /* First attempt to break the word naturally */
234+
word-break: break-word; /* Then break at any character if needed */
235+
}
236+
237+
238+
239+
#notification-popup {
240+
position: absolute;
241+
top: -34px; /* Adjust this value to position the message as needed */
242+
left: 0;
243+
width: calc(100% - 32px); /* Subtract gutter space from width */
244+
margin-left: 16px;
245+
246+
padding: 4px;
247+
border-radius: 4px;
248+
font-size: 14px;
249+
text-align: center;
250+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
251+
z-index: 1000;
252+
253+
254+
background-color: black;
255+
color: white;
256+
257+
white-space: nowrap; /* Prevent the message from wrapping */
258+
box-sizing: border-box; /* Ensure padding doesn't affect the width */
259+
260+
opacity: 0;
261+
transition: opacity 1s ease-in-out; /* Fade-in effect */
262+
visibility: hidden;
263+
}
264+
#notification-popup.hide-popup {
265+
opacity: 0;
266+
visibility: hidden;
267+
transition: opacity 1s ease-in-out, visibility 0s 1s;
268+
}
269+
#notification-popup.show-popup {
270+
opacity: 1;
271+
visibility: visible;
272+
}
273+
274+
275+
276+
277+
278+
279+
280+
281+
282+
283+
284+
285+
286+
287+
288+
289+
290+
291+
292+
293+
294+
/**************************************************/
295+
/* Graphing */
296+
.chart-container {
297+
position: relative;
298+
width: 100%;
299+
max-width: 500px;
300+
height: 30px;
301+
background-color: #f0f0f0;
302+
border: 1px solid #ccc;
303+
}
304+
305+
.bar {
306+
height: 100%;
307+
background-color: var(--arm-green);
308+
width: 0;
309+
text-align: right;
310+
padding-right: 5px;
311+
box-sizing: border-box;
312+
color: black;
313+
line-height: 30px;
314+
font-weight: bold;
315+
}
316+
317+
.context-line {
318+
position: absolute;
319+
top: 0;
320+
bottom: 0;
321+
width: 1px;
322+
background-color: var(--arm-color-footing);
323+
text-align: center;
324+
font-size: 12px;
325+
color: blue;
326+
transform: translateX(-30%);
327+
}
328+
329+
330+
331+
332+
.pie-chart {
333+
width: 125px;
334+
height: 125px;
335+
border-radius: 50%;
336+
background: conic-gradient(
337+
var(--arm-green) 0% 81.81%, /* 9/11 segments in green */
338+
var(--arm-yellow) 81.81% 90.91%, /* 1/11 segment in yellow */
339+
var(--arm-orange) 90.91% 100% /* 1/11 segment in red */
340+
);
341+
}
342+
343+
344+
345+
346+
.clickable-blowup {
347+
cursor: pointer;
348+
}
349+
350+
.content-blowup {
351+
display: none;
352+
position: fixed;
353+
top: 0;
354+
left: 0;
355+
width: 100%;
356+
height: 100%;
357+
background: rgba(0, 0, 0, 0.8);
358+
justify-content: center;
359+
align-items: center;
360+
z-index: 1000;
361+
}
362+
363+
.blown-up-image {
364+
max-width: 90%;
365+
max-height: 90%;
366+
}

0 commit comments

Comments
 (0)