Spaces:
Runtime error
Runtime error
Commit
•
b20a611
1
Parent(s):
c2d8dc4
Upload 10 files
Browse files- css/chat.js +4 -0
- css/chat_style-TheEncrypted777.css +107 -0
- css/chat_style-cai-chat.css +58 -0
- css/chat_style-messenger.css +99 -0
- css/chat_style-wpp.css +55 -0
- css/html_4chan_style.css +104 -0
- css/html_instruct_style.css +62 -0
- css/html_readable_style.css +29 -0
- css/main.css +157 -0
- css/main.js +18 -0
css/chat.js
ADDED
@@ -0,0 +1,4 @@
|
|
|
|
|
|
|
|
|
|
|
1 |
+
document.getElementById("main").childNodes[0].style = "max-width: 800px; margin-left: auto; margin-right: auto";
|
2 |
+
document.getElementById("extensions").style.setProperty("max-width", "800px");
|
3 |
+
document.getElementById("extensions").style.setProperty("margin-left", "auto");
|
4 |
+
document.getElementById("extensions").style.setProperty("margin-right", "auto");
|
css/chat_style-TheEncrypted777.css
ADDED
@@ -0,0 +1,107 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/* All credits to TheEncrypted777: https://www.reddit.com/r/Oobabooga/comments/12xe6vq/updated_css_styling_with_color_customization_for/ */
|
2 |
+
|
3 |
+
.message {
|
4 |
+
display: grid;
|
5 |
+
grid-template-columns: 60px minmax(0, 1fr);
|
6 |
+
padding-bottom: 28px;
|
7 |
+
font-size: 18px;
|
8 |
+
/*Change 'Quicksand' to a font you like or leave it*/
|
9 |
+
font-family: Quicksand, Arial, sans-serif;
|
10 |
+
line-height: 1.428571429;
|
11 |
+
}
|
12 |
+
|
13 |
+
.circle-you {
|
14 |
+
background-color: gray;
|
15 |
+
border-radius: 1rem;
|
16 |
+
/*Change color to any you like to be the border of your image*/
|
17 |
+
border: 2px solid white;
|
18 |
+
}
|
19 |
+
|
20 |
+
.circle-bot {
|
21 |
+
background-color: gray;
|
22 |
+
border-radius: 1rem;
|
23 |
+
/*Change color to any you like to be the border of the bot's image*/
|
24 |
+
border: 2px solid white;
|
25 |
+
}
|
26 |
+
|
27 |
+
.circle-bot img,
|
28 |
+
.circle-you img {
|
29 |
+
border-radius: 10%;
|
30 |
+
width: 100%;
|
31 |
+
height: 100%;
|
32 |
+
object-fit: cover;
|
33 |
+
}
|
34 |
+
|
35 |
+
.circle-you, .circle-bot {
|
36 |
+
/*You can set the size of the profile images here, but if you do, you have to also adjust the .text{padding-left: 90px} to a different number according to the width of the image which is right below here*/
|
37 |
+
width: 135px;
|
38 |
+
height: 175px;
|
39 |
+
}
|
40 |
+
|
41 |
+
.text {
|
42 |
+
/*Change this to move the message box further left or right depending on the size of your profile pic*/
|
43 |
+
padding-left: 90px;
|
44 |
+
text-shadow: 2px 2px 2px rgb(0, 0, 0);
|
45 |
+
}
|
46 |
+
|
47 |
+
.text p {
|
48 |
+
margin-top: 2px;
|
49 |
+
}
|
50 |
+
|
51 |
+
.username {
|
52 |
+
padding-left: 10px;
|
53 |
+
font-size: 22px;
|
54 |
+
font-weight: bold;
|
55 |
+
border-top: 1px solid rgb(51, 64, 90);
|
56 |
+
padding: 3px;
|
57 |
+
}
|
58 |
+
|
59 |
+
.message-body {
|
60 |
+
position: relative;
|
61 |
+
border-radius: 1rem;
|
62 |
+
border: 1px solid rgba(255, 255, 255, 0.459);
|
63 |
+
border-radius: 10px;
|
64 |
+
padding: 10px;
|
65 |
+
padding-top: 5px;
|
66 |
+
/*Message gradient background color - remove the line bellow if you don't want a background color or gradient*/
|
67 |
+
background: linear-gradient(to bottom, #171730, #1b263f);
|
68 |
+
}
|
69 |
+
|
70 |
+
/*Adds 2 extra lines at the top and bottom of the message*/
|
71 |
+
.message-body:before,
|
72 |
+
.message-body:after {
|
73 |
+
content: "";
|
74 |
+
position: absolute;
|
75 |
+
left: 10px;
|
76 |
+
right: 10px;
|
77 |
+
height: 1px;
|
78 |
+
background-color: rgba(255, 255, 255, 0.13);
|
79 |
+
}
|
80 |
+
|
81 |
+
.message-body:before {
|
82 |
+
top: 6px;
|
83 |
+
}
|
84 |
+
|
85 |
+
.message-body:after {
|
86 |
+
bottom: 6px;
|
87 |
+
}
|
88 |
+
|
89 |
+
.message-body img {
|
90 |
+
max-width: 300px;
|
91 |
+
max-height: 300px;
|
92 |
+
border-radius: 20px;
|
93 |
+
}
|
94 |
+
|
95 |
+
.message-body p {
|
96 |
+
margin-bottom: 0 !important;
|
97 |
+
font-size: 18px !important;
|
98 |
+
line-height: 1.428571429 !important;
|
99 |
+
}
|
100 |
+
|
101 |
+
.dark .message-body p em {
|
102 |
+
color: rgb(138, 138, 138) !important;
|
103 |
+
}
|
104 |
+
|
105 |
+
.message-body p em {
|
106 |
+
color: rgb(110, 110, 110) !important;
|
107 |
+
}
|
css/chat_style-cai-chat.css
ADDED
@@ -0,0 +1,58 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.message {
|
2 |
+
display: grid;
|
3 |
+
grid-template-columns: 60px minmax(0, 1fr);
|
4 |
+
padding-bottom: 25px;
|
5 |
+
font-size: 15px;
|
6 |
+
font-family: Helvetica, Arial, sans-serif;
|
7 |
+
line-height: 1.428571429;
|
8 |
+
}
|
9 |
+
|
10 |
+
.circle-you {
|
11 |
+
width: 50px;
|
12 |
+
height: 50px;
|
13 |
+
background-color: rgb(238, 78, 59);
|
14 |
+
border-radius: 50%;
|
15 |
+
}
|
16 |
+
|
17 |
+
.circle-bot {
|
18 |
+
width: 50px;
|
19 |
+
height: 50px;
|
20 |
+
background-color: rgb(59, 78, 244);
|
21 |
+
border-radius: 50%;
|
22 |
+
}
|
23 |
+
|
24 |
+
.circle-bot img,
|
25 |
+
.circle-you img {
|
26 |
+
border-radius: 50%;
|
27 |
+
width: 100%;
|
28 |
+
height: 100%;
|
29 |
+
object-fit: cover;
|
30 |
+
}
|
31 |
+
|
32 |
+
.text p {
|
33 |
+
margin-top: 5px;
|
34 |
+
}
|
35 |
+
|
36 |
+
.username {
|
37 |
+
font-weight: bold;
|
38 |
+
}
|
39 |
+
|
40 |
+
.message-body img {
|
41 |
+
max-width: 300px;
|
42 |
+
max-height: 300px;
|
43 |
+
border-radius: 20px;
|
44 |
+
}
|
45 |
+
|
46 |
+
.message-body p {
|
47 |
+
margin-bottom: 0 !important;
|
48 |
+
font-size: 15px !important;
|
49 |
+
line-height: 1.428571429 !important;
|
50 |
+
}
|
51 |
+
|
52 |
+
.dark .message-body p em {
|
53 |
+
color: rgb(138, 138, 138) !important;
|
54 |
+
}
|
55 |
+
|
56 |
+
.message-body p em {
|
57 |
+
color: rgb(110, 110, 110) !important;
|
58 |
+
}
|
css/chat_style-messenger.css
ADDED
@@ -0,0 +1,99 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.message {
|
2 |
+
padding-bottom: 25px;
|
3 |
+
font-size: 15px;
|
4 |
+
font-family: Helvetica, Arial, sans-serif;
|
5 |
+
line-height: 1.428571429;
|
6 |
+
}
|
7 |
+
|
8 |
+
.circle-you {
|
9 |
+
width: 50px;
|
10 |
+
height: 50px;
|
11 |
+
background-color: rgb(238, 78, 59);
|
12 |
+
border-radius: 50%;
|
13 |
+
}
|
14 |
+
|
15 |
+
.circle-bot {
|
16 |
+
width: 50px;
|
17 |
+
height: 50px;
|
18 |
+
background-color: rgb(59, 78, 244);
|
19 |
+
border-radius: 50%;
|
20 |
+
float: left;
|
21 |
+
margin-right: 10px;
|
22 |
+
margin-top: 5px;
|
23 |
+
}
|
24 |
+
|
25 |
+
.circle-bot img,
|
26 |
+
.circle-you img {
|
27 |
+
border-radius: 50%;
|
28 |
+
width: 100%;
|
29 |
+
height: 100%;
|
30 |
+
object-fit: cover;
|
31 |
+
}
|
32 |
+
|
33 |
+
.circle-you {
|
34 |
+
margin-top: 5px;
|
35 |
+
float: right;
|
36 |
+
}
|
37 |
+
|
38 |
+
.circle-bot + .text, .circle-you + .text {
|
39 |
+
border-radius: 18px;
|
40 |
+
padding: 8px 12px;
|
41 |
+
}
|
42 |
+
|
43 |
+
.circle-bot + .text {
|
44 |
+
background-color: #E4E6EB;
|
45 |
+
float: left;
|
46 |
+
}
|
47 |
+
|
48 |
+
.circle-you + .text {
|
49 |
+
float: right;
|
50 |
+
background-color: rgb(0, 132, 255);
|
51 |
+
margin-right: 10px;
|
52 |
+
}
|
53 |
+
|
54 |
+
.circle-you + .text div, .circle-you + .text *, .dark .circle-you + .text div, .dark .circle-you + .text * {
|
55 |
+
color: #FFF !important;
|
56 |
+
}
|
57 |
+
|
58 |
+
.circle-you + .text .username {
|
59 |
+
text-align: right;
|
60 |
+
}
|
61 |
+
|
62 |
+
.dark .circle-bot + .text div, .dark .circle-bot + .text * {
|
63 |
+
color: #000;
|
64 |
+
}
|
65 |
+
|
66 |
+
.text {
|
67 |
+
max-width: 80%;
|
68 |
+
}
|
69 |
+
|
70 |
+
.text p {
|
71 |
+
margin-top: 5px;
|
72 |
+
}
|
73 |
+
|
74 |
+
.username {
|
75 |
+
font-weight: bold;
|
76 |
+
}
|
77 |
+
|
78 |
+
.message-body {
|
79 |
+
}
|
80 |
+
|
81 |
+
.message-body img {
|
82 |
+
max-width: 300px;
|
83 |
+
max-height: 300px;
|
84 |
+
border-radius: 20px;
|
85 |
+
}
|
86 |
+
|
87 |
+
.message-body p {
|
88 |
+
margin-bottom: 0 !important;
|
89 |
+
font-size: 15px !important;
|
90 |
+
line-height: 1.428571429 !important;
|
91 |
+
}
|
92 |
+
|
93 |
+
.dark .message-body p em {
|
94 |
+
color: rgb(138, 138, 138) !important;
|
95 |
+
}
|
96 |
+
|
97 |
+
.message-body p em {
|
98 |
+
color: rgb(110, 110, 110) !important;
|
99 |
+
}
|
css/chat_style-wpp.css
ADDED
@@ -0,0 +1,55 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.message {
|
2 |
+
padding-bottom: 25px;
|
3 |
+
font-size: 15px;
|
4 |
+
font-family: Helvetica, Arial, sans-serif;
|
5 |
+
line-height: 1.428571429;
|
6 |
+
}
|
7 |
+
|
8 |
+
.text-you {
|
9 |
+
background-color: #d9fdd3;
|
10 |
+
border-radius: 15px;
|
11 |
+
padding: 10px;
|
12 |
+
padding-top: 5px;
|
13 |
+
float: right;
|
14 |
+
}
|
15 |
+
|
16 |
+
.text-bot {
|
17 |
+
background-color: #f2f2f2;
|
18 |
+
border-radius: 15px;
|
19 |
+
padding: 10px;
|
20 |
+
padding-top: 5px;
|
21 |
+
}
|
22 |
+
|
23 |
+
.dark .text-you {
|
24 |
+
background-color: #005c4b;
|
25 |
+
color: #111b21;
|
26 |
+
}
|
27 |
+
|
28 |
+
.dark .text-bot {
|
29 |
+
background-color: #1f2937;
|
30 |
+
color: #111b21;
|
31 |
+
}
|
32 |
+
|
33 |
+
.text-bot p, .text-you p {
|
34 |
+
margin-top: 5px;
|
35 |
+
}
|
36 |
+
|
37 |
+
.message-body img {
|
38 |
+
max-width: 300px;
|
39 |
+
max-height: 300px;
|
40 |
+
border-radius: 20px;
|
41 |
+
}
|
42 |
+
|
43 |
+
.message-body p {
|
44 |
+
margin-bottom: 0 !important;
|
45 |
+
font-size: 15px !important;
|
46 |
+
line-height: 1.428571429 !important;
|
47 |
+
}
|
48 |
+
|
49 |
+
.dark .message-body p em {
|
50 |
+
color: rgb(138, 138, 138) !important;
|
51 |
+
}
|
52 |
+
|
53 |
+
.message-body p em {
|
54 |
+
color: rgb(110, 110, 110) !important;
|
55 |
+
}
|
css/html_4chan_style.css
ADDED
@@ -0,0 +1,104 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
#parent #container {
|
2 |
+
background-color: #eef2ff;
|
3 |
+
padding: 17px;
|
4 |
+
}
|
5 |
+
|
6 |
+
#parent #container .reply {
|
7 |
+
background-color: rgb(214, 218, 240);
|
8 |
+
border-bottom-color: rgb(183, 197, 217);
|
9 |
+
border-bottom-style: solid;
|
10 |
+
border-bottom-width: 1px;
|
11 |
+
border-image-outset: 0;
|
12 |
+
border-image-repeat: stretch;
|
13 |
+
border-image-slice: 100%;
|
14 |
+
border-image-source: none;
|
15 |
+
border-image-width: 1;
|
16 |
+
border-left-color: rgb(0, 0, 0);
|
17 |
+
border-left-style: none;
|
18 |
+
border-left-width: 0px;
|
19 |
+
border-right-color: rgb(183, 197, 217);
|
20 |
+
border-right-style: solid;
|
21 |
+
border-right-width: 1px;
|
22 |
+
border-top-color: rgb(0, 0, 0);
|
23 |
+
border-top-style: none;
|
24 |
+
border-top-width: 0px;
|
25 |
+
color: rgb(0, 0, 0);
|
26 |
+
display: table;
|
27 |
+
font-family: arial, helvetica, sans-serif;
|
28 |
+
font-size: 13.3333px;
|
29 |
+
margin-bottom: 4px;
|
30 |
+
margin-left: 0px;
|
31 |
+
margin-right: 0px;
|
32 |
+
margin-top: 4px;
|
33 |
+
overflow-x: hidden;
|
34 |
+
overflow-y: hidden;
|
35 |
+
padding-bottom: 4px;
|
36 |
+
padding-left: 2px;
|
37 |
+
padding-right: 2px;
|
38 |
+
padding-top: 4px;
|
39 |
+
}
|
40 |
+
|
41 |
+
#parent #container .number {
|
42 |
+
color: rgb(0, 0, 0);
|
43 |
+
font-family: arial, helvetica, sans-serif;
|
44 |
+
font-size: 13.3333px;
|
45 |
+
width: 342.65px;
|
46 |
+
margin-right: 7px;
|
47 |
+
}
|
48 |
+
|
49 |
+
#parent #container .op {
|
50 |
+
color: rgb(0, 0, 0);
|
51 |
+
font-family: arial, helvetica, sans-serif;
|
52 |
+
font-size: 13.3333px;
|
53 |
+
margin-bottom: 8px;
|
54 |
+
margin-left: 0px;
|
55 |
+
margin-right: 0px;
|
56 |
+
margin-top: 4px;
|
57 |
+
overflow-x: hidden;
|
58 |
+
overflow-y: hidden;
|
59 |
+
}
|
60 |
+
|
61 |
+
#parent #container .op blockquote {
|
62 |
+
margin-left: 0px !important;
|
63 |
+
}
|
64 |
+
|
65 |
+
#parent #container .name {
|
66 |
+
color: rgb(17, 119, 67);
|
67 |
+
font-family: arial, helvetica, sans-serif;
|
68 |
+
font-size: 13.3333px;
|
69 |
+
font-weight: 700;
|
70 |
+
margin-left: 7px;
|
71 |
+
}
|
72 |
+
|
73 |
+
#parent #container .quote {
|
74 |
+
color: rgb(221, 0, 0);
|
75 |
+
font-family: arial, helvetica, sans-serif;
|
76 |
+
font-size: 13.3333px;
|
77 |
+
text-decoration-color: rgb(221, 0, 0);
|
78 |
+
text-decoration-line: underline;
|
79 |
+
text-decoration-style: solid;
|
80 |
+
text-decoration-thickness: auto;
|
81 |
+
}
|
82 |
+
|
83 |
+
#parent #container .greentext {
|
84 |
+
color: rgb(120, 153, 34);
|
85 |
+
font-family: arial, helvetica, sans-serif;
|
86 |
+
font-size: 13.3333px;
|
87 |
+
}
|
88 |
+
|
89 |
+
#parent #container blockquote {
|
90 |
+
margin: 0px !important;
|
91 |
+
margin-block-start: 1em;
|
92 |
+
margin-block-end: 1em;
|
93 |
+
margin-inline-start: 40px;
|
94 |
+
margin-inline-end: 40px;
|
95 |
+
margin-top: 13.33px !important;
|
96 |
+
margin-bottom: 13.33px !important;
|
97 |
+
margin-left: 40px !important;
|
98 |
+
margin-right: 40px !important;
|
99 |
+
}
|
100 |
+
|
101 |
+
#parent #container .message {
|
102 |
+
color: black;
|
103 |
+
border: none;
|
104 |
+
}
|
css/html_instruct_style.css
ADDED
@@ -0,0 +1,62 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.message {
|
2 |
+
display: grid;
|
3 |
+
grid-template-columns: 60px 1fr;
|
4 |
+
padding-bottom: 25px;
|
5 |
+
font-size: 15px;
|
6 |
+
font-family: Helvetica, Arial, sans-serif;
|
7 |
+
line-height: 1.428571429;
|
8 |
+
}
|
9 |
+
|
10 |
+
.username {
|
11 |
+
display: none;
|
12 |
+
}
|
13 |
+
|
14 |
+
.message-body p {
|
15 |
+
font-size: 15px !important;
|
16 |
+
line-height: 1.75 !important;
|
17 |
+
margin-bottom: 1.25em !important;
|
18 |
+
}
|
19 |
+
|
20 |
+
.message-body ul, .message-body ol {
|
21 |
+
margin-bottom: 1.25em !important;
|
22 |
+
}
|
23 |
+
|
24 |
+
.dark .message-body p em {
|
25 |
+
color: rgb(198, 202, 214) !important;
|
26 |
+
}
|
27 |
+
|
28 |
+
.message-body p em {
|
29 |
+
color: rgb(110, 110, 110) !important;
|
30 |
+
}
|
31 |
+
|
32 |
+
.gradio-container .chat .assistant-message {
|
33 |
+
padding: 15px;
|
34 |
+
border-radius: 20px;
|
35 |
+
background-color: #0000000f;
|
36 |
+
margin-top: 9px !important;
|
37 |
+
margin-bottom: 18px !important;
|
38 |
+
}
|
39 |
+
|
40 |
+
.gradio-container .chat .user-message {
|
41 |
+
padding: 15px;
|
42 |
+
border-radius: 20px;
|
43 |
+
margin-bottom: 9px !important;
|
44 |
+
}
|
45 |
+
|
46 |
+
.dark .chat .assistant-message {
|
47 |
+
background-color: #3741519e;
|
48 |
+
border: 1px solid #4b5563;
|
49 |
+
}
|
50 |
+
|
51 |
+
.dark .chat .user-message {
|
52 |
+
background-color: #111827;
|
53 |
+
border: 1px solid #4b5563;
|
54 |
+
}
|
55 |
+
|
56 |
+
code {
|
57 |
+
background-color: white !important;
|
58 |
+
}
|
59 |
+
|
60 |
+
.dark code {
|
61 |
+
background-color: #1a212f !important;
|
62 |
+
}
|
css/html_readable_style.css
ADDED
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.container {
|
2 |
+
max-width: 600px;
|
3 |
+
margin-left: auto;
|
4 |
+
margin-right: auto;
|
5 |
+
background-color: rgb(31, 41, 55);
|
6 |
+
padding: 3em;
|
7 |
+
word-break: break-word;
|
8 |
+
overflow-wrap: anywhere;
|
9 |
+
color: #efefef !important;
|
10 |
+
}
|
11 |
+
|
12 |
+
.container p, .container li {
|
13 |
+
font-size: 16px !important;
|
14 |
+
color: #efefef !important;
|
15 |
+
margin-bottom: 22px;
|
16 |
+
line-height: 1.4 !important;
|
17 |
+
}
|
18 |
+
|
19 |
+
.container li > p {
|
20 |
+
display: inline !important;
|
21 |
+
}
|
22 |
+
|
23 |
+
.container code {
|
24 |
+
overflow-x: auto;
|
25 |
+
}
|
26 |
+
|
27 |
+
.container :not(pre) > code {
|
28 |
+
white-space: normal !important;
|
29 |
+
}
|
css/main.css
ADDED
@@ -0,0 +1,157 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.tabs.svelte-710i53 {
|
2 |
+
margin-top: 0
|
3 |
+
}
|
4 |
+
|
5 |
+
.py-6 {
|
6 |
+
padding-top: 2.5rem
|
7 |
+
}
|
8 |
+
|
9 |
+
.small-button {
|
10 |
+
max-width: 171px;
|
11 |
+
height: 39.594px;
|
12 |
+
align-self: end;
|
13 |
+
}
|
14 |
+
|
15 |
+
.refresh-button {
|
16 |
+
max-width: 4.4em;
|
17 |
+
min-width: 2.2em !important;
|
18 |
+
height: 39.594px;
|
19 |
+
align-self: end;
|
20 |
+
line-height: 1em;
|
21 |
+
border-radius: 0.5em;
|
22 |
+
flex: none;
|
23 |
+
}
|
24 |
+
|
25 |
+
.refresh-button-small {
|
26 |
+
max-width: 2.2em;
|
27 |
+
}
|
28 |
+
|
29 |
+
#slim-column {
|
30 |
+
flex: none !important;
|
31 |
+
min-width: 0 !important;
|
32 |
+
}
|
33 |
+
|
34 |
+
.slim-dropdown {
|
35 |
+
background-color: transparent !important;
|
36 |
+
border: none !important;
|
37 |
+
padding: 0 !important;
|
38 |
+
}
|
39 |
+
|
40 |
+
#download-label, #upload-label {
|
41 |
+
min-height: 0
|
42 |
+
}
|
43 |
+
|
44 |
+
#accordion {
|
45 |
+
}
|
46 |
+
|
47 |
+
.dark svg {
|
48 |
+
fill: white;
|
49 |
+
}
|
50 |
+
|
51 |
+
.dark a {
|
52 |
+
color: white !important;
|
53 |
+
}
|
54 |
+
|
55 |
+
ol li p, ul li p {
|
56 |
+
display: inline-block;
|
57 |
+
}
|
58 |
+
|
59 |
+
#main, #parameters, #chat-settings, #lora, #training-tab, #model-tab, #session-tab {
|
60 |
+
border: 0;
|
61 |
+
}
|
62 |
+
|
63 |
+
.gradio-container-3-18-0 .prose * h1, h2, h3, h4 {
|
64 |
+
color: white;
|
65 |
+
}
|
66 |
+
|
67 |
+
.gradio-container {
|
68 |
+
max-width: 100% !important;
|
69 |
+
padding-top: 0 !important;
|
70 |
+
}
|
71 |
+
|
72 |
+
#extensions {
|
73 |
+
padding: 15px;
|
74 |
+
margin-bottom: 35px;
|
75 |
+
}
|
76 |
+
|
77 |
+
.extension-tab {
|
78 |
+
border: 0 !important;
|
79 |
+
}
|
80 |
+
|
81 |
+
span.math.inline {
|
82 |
+
font-size: 27px;
|
83 |
+
vertical-align: baseline !important;
|
84 |
+
}
|
85 |
+
|
86 |
+
div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
|
87 |
+
flex-wrap: nowrap;
|
88 |
+
}
|
89 |
+
|
90 |
+
.header_bar {
|
91 |
+
background-color: #f7f7f7;
|
92 |
+
margin-bottom: 20px;
|
93 |
+
}
|
94 |
+
|
95 |
+
.dark .header_bar {
|
96 |
+
border: none !important;
|
97 |
+
background-color: #8080802b;
|
98 |
+
}
|
99 |
+
|
100 |
+
.textbox_default textarea {
|
101 |
+
height: calc(100vh - 380px);
|
102 |
+
}
|
103 |
+
|
104 |
+
.textbox_default_output textarea {
|
105 |
+
height: calc(100vh - 190px);
|
106 |
+
}
|
107 |
+
|
108 |
+
.textbox textarea {
|
109 |
+
height: calc(100vh - 241px);
|
110 |
+
}
|
111 |
+
|
112 |
+
.textbox_default textarea, .textbox_default_output textarea, .textbox textarea {
|
113 |
+
font-size: 16px !important;
|
114 |
+
color: #46464A !important;
|
115 |
+
}
|
116 |
+
|
117 |
+
.dark textarea {
|
118 |
+
color: #efefef !important;
|
119 |
+
}
|
120 |
+
|
121 |
+
/* Hide the gradio footer*/
|
122 |
+
footer {
|
123 |
+
display: none !important;
|
124 |
+
}
|
125 |
+
|
126 |
+
button {
|
127 |
+
font-size: 14px !important;
|
128 |
+
}
|
129 |
+
|
130 |
+
.file-saver {
|
131 |
+
position: fixed !important;
|
132 |
+
top: 50%;
|
133 |
+
left: 50%;
|
134 |
+
transform: translate(-50%, -50%); /* center horizontally */
|
135 |
+
max-width: 500px;
|
136 |
+
background-color: var(--input-background-fill);
|
137 |
+
border: 2px solid black !important;
|
138 |
+
z-index: 1000;
|
139 |
+
}
|
140 |
+
|
141 |
+
.dark .file-saver {
|
142 |
+
border: 2px solid white !important;
|
143 |
+
}
|
144 |
+
|
145 |
+
.checkboxgroup-table label {
|
146 |
+
background: none !important;
|
147 |
+
padding: 0 !important;
|
148 |
+
border: 0 !important;
|
149 |
+
}
|
150 |
+
|
151 |
+
.checkboxgroup-table div {
|
152 |
+
display: grid !important;
|
153 |
+
}
|
154 |
+
|
155 |
+
.markdown ul ol {
|
156 |
+
font-size: 100% !important;
|
157 |
+
}
|
css/main.js
ADDED
@@ -0,0 +1,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
document.getElementById("main").parentNode.childNodes[0].classList.add("header_bar");
|
2 |
+
document.getElementById("main").parentNode.style = "padding: 0; margin: 0";
|
3 |
+
document.getElementById("main").parentNode.parentNode.parentNode.style = "padding: 0";
|
4 |
+
|
5 |
+
// Get references to the elements
|
6 |
+
let main = document.getElementById('main');
|
7 |
+
let main_parent = main.parentNode;
|
8 |
+
let extensions = document.getElementById('extensions');
|
9 |
+
|
10 |
+
// Add an event listener to the main element
|
11 |
+
main_parent.addEventListener('click', function(e) {
|
12 |
+
// Check if the main element is visible
|
13 |
+
if (main.offsetHeight > 0 && main.offsetWidth > 0) {
|
14 |
+
extensions.style.display = 'flex';
|
15 |
+
} else {
|
16 |
+
extensions.style.display = 'none';
|
17 |
+
}
|
18 |
+
});
|