diff --git a/css/Inter/Inter-Italic-VariableFont_opsz,wght.ttf b/css/Inter/Inter-Italic-VariableFont_opsz,wght.ttf
new file mode 100644
index 00000000..43ed4f5e
Binary files /dev/null and b/css/Inter/Inter-Italic-VariableFont_opsz,wght.ttf differ
diff --git a/css/Inter/Inter-VariableFont_opsz,wght.ttf b/css/Inter/Inter-VariableFont_opsz,wght.ttf
new file mode 100644
index 00000000..e31b51e3
Binary files /dev/null and b/css/Inter/Inter-VariableFont_opsz,wght.ttf differ
diff --git a/css/chat_style-cai-chat-square.css b/css/chat_style-cai-chat-square.css
index d626dbb1..854fff60 100644
--- a/css/chat_style-cai-chat-square.css
+++ b/css/chat_style-cai-chat-square.css
@@ -16,6 +16,6 @@
}
.message {
- padding-bottom: 30px;
+ padding-bottom: 2em;
grid-template-columns: 70px minmax(0, 1fr);
}
diff --git a/css/chat_style-cai-chat.css b/css/chat_style-cai-chat.css
index 618184cf..d7b1ba88 100644
--- a/css/chat_style-cai-chat.css
+++ b/css/chat_style-cai-chat.css
@@ -1,7 +1,7 @@
.message {
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
- padding-bottom: 15px;
+ padding-bottom: 2em;
font-size: 15px;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
line-height: 22.5px !important;
diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css
index 50b9402f..f1eb2531 100644
--- a/css/html_instruct_style.css
+++ b/css/html_instruct_style.css
@@ -1,21 +1,52 @@
.chat {
background: transparent;
- padding: 24px 19px;
- padding-right: 19px !important;
+ padding: 0;
padding-top: 0;
}
-.chat > .messages {
- padding-top: 18px !important;
+.chat > .messages:first-child {
+ padding-top: 0 !important;
}
-.message {
- display: grid;
- grid-template-columns: 60px 1fr;
- padding-bottom: 25px;
- font-size: 15px;
- font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
- line-height: 24px;
+.chat > .messages > :last-child {
+ margin-bottom: 1.7rem !important;
+}
+
+.chat .message-body p, .chat .message-body li {
+ font-size: 1rem !important;
+ line-height: 28px !important;
+}
+
+.dark .chat .message-body p, .dark .chat .message-body li {
+ color: #d1d5db !important;
+}
+
+.chat .message-body p,
+.chat .message-body ul,
+.chat .message-body ol {
+ margin-top: 1.25em !important;
+ margin-bottom: 1.25em !important;
+}
+
+.chat .message-body p:first-child,
+.chat .message-body ul:first-child,
+.chat .message-body ol:first-child {
+ margin-top: 0 !important;
+}
+
+.chat .message-body p:last-child,
+.chat .message-body ul:last-child,
+.chat .message-body ol:last-child {
+ margin-bottom: 0 !important;
+}
+
+.chat .message-body li {
+ margin-top: 1.25em !important;
+ margin-bottom: 1.25em !important;
+}
+
+.user-message, .assistant-message {
+ font-family: Inter, Helvetica, Arial, sans-serif;
}
.message:first-child {
@@ -26,49 +57,43 @@
display: none;
}
-.message-body p, .message-body li {
- font-size: 15px !important;
- line-height: 24px !important;
-}
-
-.message-body p, .chat .message-body ul, .chat .message-body ol {
- margin-bottom: 16px !important;
-}
-
-.message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child {
- margin-bottom: 0 !important;
-}
-
-.gradio-container .chat .assistant-message {
- padding: 20px;
- background: #f4f4f4;
- margin-top: 9px !important;
- margin-bottom: 12px !important;
- border-radius: 7px;
- border: 1px solid var(--border-color-primary);
-}
-
-.dark .chat .assistant-message {
- background: var(--color-grey-800);
-}
-
-.gradio-container .chat .user-message {
- padding: 20px;
- padding-left: 0;
- padding-right: 0;
- background-color: transparent;
- border-radius: 8px;
+.chat .user-message {
+ padding: 1.5rem 1rem;
+ border-radius: 0;
border-bottom-right-radius: 0;
}
-.gradio-container .chat .assistant-message:last-child, .gradio-container .chat .user-message:last-child {
- margin-bottom: 0 !important;
+.chat .assistant-message {
+ background: #f4f4f4;
+ padding: 1.5rem 1rem;
+ border-radius: 0;
+ border: 0;
}
-code {
+.dark .chat .user-message {
+ background: transparent;
+}
+
+.dark .chat .assistant-message {
+ background: var(--light-gray);
+}
+
+.chat .user-message .text,
+.chat .assistant-message .text {
+ max-width: 40.25rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Create space between two assistant messages in a row */
+.assistant-message + .assistant-message {
+ margin-top: 1.5rem;
+}
+
+pre > code {
background-color: #f3f4f6 !important;
}
-.dark code {
+.dark pre > code {
background-color: #1f2937 !important;
}
diff --git a/css/main.css b/css/main.css
index 26e58b5c..a886bcd9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,7 +1,41 @@
+:root {
+ --darker-gray: #202123;
+ --dark-gray: #343541;
+ --light-gray: #444654;
+ --light-theme-gray: #f4f4f4;
+ --border-color-dark: #525252;
+ --header-width: 112px;
+ --selected-item-color-dark: #32333e;
+}
+
+@font-face {
+ font-family: Inter;
+ src: url('file/css/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
+ font-weight: 100 900;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Inter;
+ src: url('file/css/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
+ font-weight: 100 900;
+ font-style: italic;
+}
+
.tabs.svelte-710i53 {
margin-top: 0
}
+.padded.svelte-12cmxck {
+ padding: 3px 0;
+}
+
+div.svelte-sfqy0y,
+div.svelte-iyf88w {
+ background: transparent;
+ border: 0;
+}
+
.py-6 {
padding-top: 2.5rem
}
@@ -19,7 +53,7 @@
height: 39.594px;
align-self: end;
line-height: 1em;
- border-radius: 0.5em;
+ border-radius: 0.375rem;
flex: none;
}
@@ -46,10 +80,6 @@
min-height: 0
}
-.dark svg {
- fill: white;
-}
-
.dark a {
color: white !important;
}
@@ -62,14 +92,20 @@ ol li p, ul li p {
border: 0;
}
+#default-tab, #notebook-tab, #parameters, #chat-settings, #lora, #training-tab, #model-tab, #session-tab {
+ padding: 1rem;
+}
+
.gradio-container {
max-width: 100% !important;
padding-top: 0 !important;
}
#extensions {
- margin-top: 5px;
- margin-bottom: 35px;
+ margin: 5px auto 35px;
+ max-width: 880px;
+ padding: 1em;
+ padding-left: calc(var(--header-width) + 1em);
}
.extension-tab {
@@ -86,20 +122,29 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
}
gradio-app > :first-child {
- padding-left: var(--size-4) !important;
- padding-right: var(--size-4) !important;
+ padding: 0 !important;
}
.header_bar {
- background-color: #f4f4f4;
box-shadow: 0 0 3px rgba(22 22 22 / 35%);
margin-bottom: 0;
overflow-x: scroll;
- margin-left: calc(-1 * var(--size-4));
- margin-right: calc(-1 * var(--size-4));
- display: block !important;
text-wrap: nowrap;
z-index: 90;
+ position: fixed;
+ display: flex !important;
+ flex-direction: column;
+ height: 100dvh;
+ width: var(--header-width);
+}
+
+.header_bar button {
+ margin: 0;
+ padding: 0.75rem;
+}
+
+.header_bar button.selected {
+ border: 0;
}
.dark .header_bar {
@@ -113,23 +158,23 @@ gradio-app > :first-child {
}
.textbox_default textarea {
- height: calc(100dvh - 271px);
+ height: calc(100dvh - 201px);
}
.textbox_default_output textarea {
- height: calc(100dvh - 185px);
+ height: calc(100dvh - 117px);
}
.textbox textarea {
- height: calc(100dvh - 241px);
+ height: calc(100dvh - 172px);
}
.textbox_logits textarea {
- height: calc(100dvh - 236px);
+ height: calc(100dvh - 205px);
}
.textbox_logits_notebook textarea {
- height: calc(100dvh - 292px);
+ height: calc(100dvh - 221px);
}
.monospace textarea {
@@ -149,24 +194,6 @@ gradio-app > :first-child {
color: #efefef !important;
}
-@media screen and (width <= 711px) {
- .textbox_default textarea {
- height: calc(100dvh - 259px);
- }
-
- div .default-token-counter {
- top: calc( 0.5 * (100dvh - 236px) ) !important;
- }
-
- .transparent-substring {
- display: none;
- }
-
- .hover-menu {
- min-width: 250px !important;
- }
-}
-
/* Hide the gradio footer */
footer {
display: none !important;
@@ -227,11 +254,13 @@ button {
.pretty_scrollbar::-webkit-scrollbar-thumb,
.pretty_scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--neutral-300);
+ border-radius: 30px;
}
.dark .pretty_scrollbar::-webkit-scrollbar-thumb,
.dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover {
- background: var(--neutral-700);
+ background: #ccc;
+ border-radius: 10px;
}
.pretty_scrollbar::-webkit-resizer {
@@ -239,7 +268,8 @@ button {
}
.dark .pretty_scrollbar::-webkit-resizer {
- background: #374151;
+ background: #ccc;
+ border-radius: 10px;
}
.pretty_scrollbar::-webkit-scrollbar-corner {
@@ -251,20 +281,26 @@ audio {
}
/* Copied from https://github.com/AUTOMATIC1111/stable-diffusion-webui */
-.token-counter {
+#default-token-counter, #notebook-token-counter {
position: absolute !important;
- top: calc( 0.5 * (100dvh - 218px) ) !important;
- right: 2px;
z-index: 100;
background: var(--input-background-fill) !important;
min-height: 0 !important;
+ width: 0;
+ text-align: left;
+ direction: rtl;
+ right: 5px;
}
-.default-token-counter {
- top: calc( 0.5 * (100dvh - 248px) ) !important;
+#default-token-counter {
+ top: calc(100dvh - 200px) !important;
}
-.token-counter span {
+#notebook-token-counter {
+ top: calc(100dvh - 171px) !important;
+}
+
+#default-token-counter span, #notebook-token-counter span {
padding: 1px;
box-shadow: 0 0 0 0.3em rgb(192 192 192 / 15%), inset 0 0 0.6em rgb(192 192 192 / 7.5%);
border: 2px solid rgb(192 192 192 / 40%) !important;
@@ -272,15 +308,15 @@ audio {
}
.no-background {
- background: var(--background-fill-primary) !important;
+ background: transparent;
padding: 0 !important;
}
/* ----------------------------------------------
Chat tab
---------------------------------------------- */
-.h-\[40vh\], .wrap.svelte-byatnx.svelte-byatnx.svelte-byatnx {
- height: 66.67vh
+.h-\[40dvh\], .wrap.svelte-byatnx.svelte-byatnx.svelte-byatnx {
+ height: 66.67dvh
}
.gradio-container {
@@ -310,7 +346,13 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat-tab {
- padding-top: 0;
+ padding: 0;
+}
+
+#chat-tab > :nth-child(1) {
+ display: flex;
+ flex-direction: row;
+ gap: 0;
}
#chat-tab button#Generate, #chat-tab button#stop {
@@ -322,7 +364,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat-tab > :first-child, #extensions {
- max-width: 880px;
margin-left: auto;
margin-right: auto;
}
@@ -342,61 +383,49 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.chat {
margin-left: auto;
margin-right: auto;
- max-width: 880px;
min-height: var(--chat-height);
overflow-y: auto;
- padding-right: 15px;
display: flex;
flex-direction: column;
word-break: break-word;
overflow-wrap: anywhere;
border-top: none;
- border-radius: 0 0 0 8px;
+ border-radius: 0;
visibility: visible;
}
.chat-parent {
- height: calc(100dvh - 98px - var(--header-height) - var(--input-delta));
+ height: calc(100dvh - 98px - var(--input-delta));
overflow: auto !important;
border-radius: 0 !important;
margin-bottom: var(--input-delta) !important;
}
-/* On desktop, automatically hide the chat scroll bar
- * when not hovered. */
-@media (hover: hover) and (pointer: fine) {
- .chat-parent {
- visibility: hidden;
- }
-
- .chat-parent:focus, .chat-parent:hover {
- visibility: visible;
- }
-}
-
.chat-parent .prose {
visibility: visible;
}
-.old-ui .chat-parent {
- height: calc(100dvh - 192px - var(--header-height) - var(--input-delta));
- margin-bottom: var(--input-delta) !important;
+.chat .message {
+ width: min(100%, 48rem);
+ margin-left: auto;
+ margin-right: auto;
+ text-align: start;
+ padding-left: 1rem;
+ padding-right: 1rem;
}
.chat-parent.bigchat {
- height: calc(100dvh - 98px - var(--header-height) - var(--input-delta)) !important;
+ height: calc(100dvh - 98px - var(--input-delta)) !important;
margin-bottom: var(--input-delta) !important;
}
.chat > .messages {
display: flex;
flex-direction: column;
- padding-top: 25px;
}
-.chat .message:last-child {
- margin-bottom: 0 !important;
- padding-bottom: 15px !important;
+.chat > .messages > :first-child {
+ padding-top: 20px;
}
.message-body h1,
@@ -423,12 +452,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-inline-start: 2em;
}
-.message-body li:not(:last-child) {
- margin-top: 0 !important;
- margin-bottom: 2px !important;
+.chat .message-body li:not(:last-child) {
+ margin-top: 0;
+ margin-bottom: 2px;
}
-.message-body li:last-child {
+.chat .message-body li:last-child {
margin-bottom: 0 !important;
}
@@ -460,7 +489,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
margin: 0;
}
-.message-body code {
+.message-body pre > code {
white-space: pre-wrap !important;
word-wrap: break-word !important;
border: 1px solid #666;
@@ -471,7 +500,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
color: #1f2328;
}
-.dark .message-body code {
+.dark .message-body pre > code {
background: #0d1117 !important;
color: rgb(201 209 217);
}
@@ -481,8 +510,18 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding: 15px;
}
+.message-body :not(pre) > code::before {
+ content: "`";
+}
+
+.message-body :not(pre) > code::after {
+ content: "`";
+}
+
.message-body :not(pre) > code {
white-space: normal !important;
+ font-weight: bold;
+ font-family: unset;
}
#chat-input {
@@ -492,6 +531,15 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
border: none;
}
+#chat-input textarea {
+ padding: 0.65rem 2.5rem;
+}
+
+#chat-input textarea::placeholder {
+ white-space: nowrap;
+ overflow: hidden;
+}
+
#chat-input textarea:focus {
box-shadow: none !important;
}
@@ -504,6 +552,14 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
display: none;
}
+.chat-input-positioned {
+ position: absolute;
+ bottom: 0;
+ max-width: 54rem;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
@media print {
body {
visibility: hidden;
@@ -539,7 +595,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
#show-controls {
position: absolute;
- height: 100%;
background-color: transparent;
border: 0 !important;
border-radius: 0;
@@ -548,7 +603,8 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
#show-controls label {
z-index: 1000;
position: absolute;
- right: 0;
+ right: 30px;
+ top: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -630,7 +686,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
position: absolute;
bottom: 80%;
left: 0;
- background-color: var(--background-fill-primary);
box-shadow: 0 0 5px rgb(0 0 0 / 25%);
z-index: 10000;
min-width: 330px;
@@ -641,7 +696,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
width: 100%;
background: transparent !important;
border-radius: 0 !important;
- border-color: var(--border-color-primary);
justify-content: space-between;
margin: 0 !important;
height: 36px;
@@ -663,7 +717,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
opacity: 0.333;
}
-#chat-tab:not(.old-ui) #chat-buttons {
+#chat-tab #chat-buttons {
display: none !important;
}
@@ -694,23 +748,37 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat-input-row {
- padding-bottom: 20px;
+ padding-bottom: 1.5em;
+ padding-left: 1rem;
+ padding-right: 1rem;
}
-.old-ui #chat-input-row, #chat-input-row.bigchat {
- padding-bottom: 0 !important;
+#chat-input-row.bigchat {
+ padding-bottom: 1px !important;
}
#chat-col {
padding-bottom: 100px;
}
-.old-ui #chat-col, #chat-col.bigchat {
- padding-bottom: 80px !important;
+@media screen and (width <= 924px) {
+ #chat-col {
+ padding-bottom: 100px;
+ margin-top: 32px;
+ position: relative; /* Ensure positioning for the pseudo-element */
+ }
+
+ .chat-parent {
+ height: calc(100dvh - 98px - var(--input-delta) - 32px);
+ }
+
+ .chat-parent.bigchat {
+ height: calc(100dvh - 98px - var(--input-delta) - 32px) !important;
+ }
}
-.old-ui #chat-buttons #clear-history-confirm {
- order: -1;
+#chat-col.bigchat {
+ padding-bottom: 80px !important;
}
.chat ol, .chat ul {
@@ -725,26 +793,36 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
/* ----------------------------------------------
- Past chat histories in a side bar on desktop
+ Create the sidebars
---------------------------------------------- */
-@media screen and (width >= 1327px) {
- #past-chats-row {
- position: absolute;
- top: 36px;
- left: 0;
- width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2));
- max-width: 300px;
- margin-left: calc(-0.5*(var(--document-width) - 880px - 14px - 16px * 2));
- }
+#chat-controls,
+#past-chats-row {
+ width: 260px;
+ max-width: 80vw;
+ padding: 0.5rem;
+ height: 100dvh;
+ flex-shrink: 0;
+ box-sizing: content-box;
+ z-index: 10;
+}
- #chat-controls {
- position: absolute;
- top: 16px;
- right: 0;
- width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2));
- max-width: 400px;
- margin-right: calc(-0.5*(var(--document-width) - 880px - 14px - 16px * 2));
- }
+#past-chats-row:not(.negative-header) {
+ max-width: calc(85vw - var(--header-width));
+}
+
+#chat-controls {
+ padding: 1rem;
+ padding-bottom: 0;
+}
+
+#chat-controls > :nth-child(1) {
+ padding: 0.5rem;
+}
+
+#past-chats-row + * {
+ width: unset;
+ flex-grow: 1;
+ flex-shrink: 1;
}
/* ----------------------------------------------
@@ -761,12 +839,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
position: fixed;
bottom: 0;
left: 0;
- width: calc((100vw - 880px - 120px) /2);
+ width: calc(100vw / 2 - 600px);
+ z-index: 10000;
}
.pfp_character {
position: relative;
- z-index: 100;
}
.pfp_character:hover {
@@ -780,10 +858,14 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#past-chats {
- max-height: calc(100vh - 195px);
+ max-height: calc(100dvh - 90px);
overflow-y: scroll !important;
border-radius: 0;
- scrollbar-width: none; /* Hide scrollbar in Firefox by default */
+ scrollbar-width: auto;
+}
+
+#past-chats::-webkit-scrollbar {
+ display: block;
}
#past-chats label {
@@ -794,6 +876,24 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
border-radius: 0;
padding-top: 8px;
padding-bottom: 8px;
+ position: relative;
+ min-height: 42px !important;
+}
+
+#past-chats label::before {
+ content: url('data:image/svg+xml;utf8,');
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ margin-right: 8px;
+}
+
+.dark #past-chats label::before {
+ content: url('data:image/svg+xml;utf8,');
+}
+
+#past-chats label span {
+ margin-left: 29px;
}
#past-chats > :nth-child(2) {
@@ -801,23 +901,264 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#past-chats > :nth-child(3) {
- gap: 0;
+ gap: 0.25rem;
}
-#past-chats::-webkit-scrollbar {
+#past-chats input {
display: none;
}
-#past-chats:hover {
- scrollbar-width: auto;
+#past-chats label {
+ padding: 0.75rem;
+ font-size: 12.5px;
+ font-weight: 400;
}
-#past-chats:hover::-webkit-scrollbar {
- display: block;
+#past-chats .selected,
+#past-chats label:hover {
+ border-radius: 0.5rem;
}
-@media screen and (width < 1327px) {
- #past-chats {
- max-height: 300px;
+#past-chats label:hover {
+ cursor: pointer;
+}
+
+#past-chats-buttons,
+#delete-chat-row,
+#rename-row {
+ width: 100%;
+ justify-content: center;
+}
+
+
+#past-chats-row,
+#chat-controls {
+ width: 260px;
+ padding: 0.5rem;
+ height: calc(100dvh - 16px);
+ flex-shrink: 0;
+ box-sizing: content-box;
+}
+
+.sidebar-hidden {
+ width: 0 !important;
+ padding: 0 !important;
+ overflow: hidden;
+}
+
+#past-chats-toggle,
+#chat-controls-toggle,
+#navigation-toggle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ user-select: none;
+ border-radius: 3px;
+ z-index: 1000;
+ position: fixed;
+ width: 2rem;
+ height: 2rem;
+ top: 0;
+}
+
+#past-chats-toggle svg,
+#chat-controls-toggle svg,
+#navigation-toggle svg {
+ pointer-events: none;
+}
+
+#past-chats-row:not(.negative-header, .sidebar-hidden) {
+ margin-left: 112px;
+}
+
+@media screen and (width <= 408px) {
+ #past-chats-toggle.past-chats-open {
+ top: 28px;
+ }
+
+ #chat-controls-toggle.chat-controls-open {
+ top: 28px;
+ right: calc(16px + min(260px, 80vw)) !important;
+ }
+}
+
+#past-chats-toggle.past-chats-open.negative-header {
+ left: calc(min(260px, 85vw) + 16px);
+}
+
+#past-chats-toggle.past-chats-open:not(.negative-header) {
+ left: calc(112px + min(260px, calc(85vw - var(--header-width))) + 16px);
+}
+
+#past-chats-toggle.past-chats-closed:not(.negative-header) {
+ left: 112px;
+}
+
+#past-chats-toggle.past-chats-closed.negative-header {
+ left: 0;
+ top: 28px;
+}
+
+@media screen and (width <= 924px) {
+ #past-chats-toggle.past-chats-closed.negative-header {
+ left: 28px;
+ top: 0;
+ }
+}
+
+.header_bar ~ *:not(#chat-tab) {
+ margin-left: var(--header-width);
+}
+
+/* Positions for chat-controls-toggle */
+#chat-controls-toggle.chat-controls-open {
+ right: calc(min(260px, 80vw) + 23px);
+}
+
+#chat-controls-toggle.chat-controls-closed {
+ right: 7px;
+}
+
+@media screen and (width <= 924px) {
+ #chat-controls.sidebar-shown {
+ position: fixed;
+ right: 0;
+ }
+
+ #past-chats-row.sidebar-shown {
+ position: fixed;
+ }
+}
+
+/* ----------------------------------------------
+ Dark theme
+---------------------------------------------- */
+.dark .header_bar {
+ background-color: var(--darker-gray) !important;
+}
+
+.dark .header_bar button.selected {
+ background: var(--selected-item-color-dark);
+}
+
+.dark #chat-input textarea {
+ background: var(--light-gray);
+ color: white !important;
+ border-color: #292c3b;
+}
+
+.dark #chat-input textarea::placeholder {
+ color: #9ca3af;
+}
+
+.dark .hover-menu {
+ background-color: var(--darker-gray);
+}
+
+.dark .hover-menu button {
+ border-color: var(--border-color-primary);
+}
+
+.dark #chat-controls,
+.dark #past-chats-row {
+ background-color: var(--darker-gray);
+ border: 0 !important;
+}
+
+.dark #past-chats .selected,
+.dark #past-chats label:hover {
+ background-color: var(--selected-item-color-dark) !important;
+}
+
+.dark #past-chats-row,
+.dark #chat-controls {
+ background-color: var(--darker-gray);
+}
+
+.dark #past-chats-toggle,
+.dark #chat-controls-toggle,
+.dark #navigation-toggle {
+ color: white;
+}
+
+.dark svg {
+ fill: white;
+ color: white;
+}
+
+@media screen and (width <= 408px) {
+ .dark #past-chats-toggle.past-chats-open {
+ background: var(--darker-gray);
+ }
+
+ .dark #chat-controls-toggle.chat-controls-open {
+ background: var(--darker-gray);
+ }
+}
+
+/* ----------------------------------------------
+ Light theme
+---------------------------------------------- */
+.header_bar {
+ background-color: var(--light-theme-gray) !important;
+}
+
+.header_bar button.selected {
+ background: white;
+}
+
+#chat-controls,
+#past-chats-row {
+ background-color: var(--light-theme-gray);
+}
+
+#chat-controls {
+ border-left: 1px solid #d9d9d0;
+}
+
+#past-chats-row {
+ border-right: 1px solid #d9d9d0;
+}
+
+#past-chats-toggle,
+#chat-controls-toggle,
+#navigation-toggle {
+ color: gray !important;
+}
+
+.mobile-top-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 32px;
+ z-index: 2;
+ opacity: 0;
+ pointer-events: none;
+}
+
+@media screen and (width <= 924px) {
+ .mobile-top-bar {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .dark .mobile-top-bar {
+ background-color: var(--darker-gray);
+ }
+
+ .mobile-top-bar {
+ background-color: var(--light-theme-gray);
+ }
+}
+
+@media screen and (width <= 408px) {
+ #past-chats-toggle.past-chats-open {
+ background: var(--light-theme-gray);
+ }
+
+ #chat-controls-toggle.chat-controls-open {
+ background: var(--light-theme-gray);
}
}
diff --git a/js/main.js b/js/main.js
index 3028afac..997701f5 100644
--- a/js/main.js
+++ b/js/main.js
@@ -18,16 +18,18 @@ document.querySelector(".header_bar").addEventListener("click", function(event)
if (extensionsVisible) {
if (extensions) {
extensions.style.display = "flex";
- extensions.style.maxWidth = chatVisible ? "880px" : "none";
- extensions.style.padding = chatVisible ? "0px" : "15px";
}
+
this.style.marginBottom = chatVisible ? "0px" : "19px";
if (chatVisible && !showControlsChecked) {
- document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions").forEach(element => {
+ document.querySelectorAll(
+ "#chat-tab > div > :nth-child(1), #chat-tab > div > :nth-child(3), #chat-tab > div > :nth-child(4), #extensions"
+ ).forEach(element => {
element.style.display = "none";
});
}
+
} else {
this.style.marginBottom = "19px";
if (extensions) extensions.style.display = "none";
@@ -132,8 +134,7 @@ targetElement.addEventListener("scroll", function() {
const observer = new MutationObserver(function(mutations) {
updateCssProperties();
- const firstChild = targetElement.children[0];
- if (firstChild.classList.contains("generating")) {
+ if (targetElement.classList.contains("_generating")) {
typing.parentNode.classList.add("visible-dots");
document.getElementById("stop").style.display = "flex";
document.getElementById("Generate").style.display = "none";
@@ -255,7 +256,7 @@ for (i = 0; i < slimDropdownElements.length; i++) {
// The show/hide events were adapted from:
// https://github.com/SillyTavern/SillyTavern/blob/6c8bd06308c69d51e2eb174541792a870a83d2d6/public/script.js
//------------------------------------------------
-var buttonsInChat = document.querySelectorAll("#chat-tab:not(.old-ui) #chat-buttons button");
+var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons button");
var button = document.getElementById("hover-element-button");
var menu = document.getElementById("hover-menu");
var istouchscreen = (navigator.maxTouchPoints > 0) || "ontouchstart" in document.documentElement;
@@ -290,12 +291,6 @@ if (buttonsInChat.length > 0) {
thisButton.innerHTML = newText;
}
}
-} else {
- buttonsInChat = document.querySelectorAll("#chat-tab.old-ui #chat-buttons button");
- for (let i = 0; i < buttonsInChat.length; i++) {
- buttonsInChat[i].textContent = buttonsInChat[i].textContent.replace(/ \(.*?\)/, "");
- }
- document.getElementById("gr-hover-container").style.display = "none";
}
function isMouseOverButtonOrMenu() {
@@ -339,6 +334,8 @@ menu.addEventListener("mouseleave", function () {
// Add event listener for click anywhere in the document
document.addEventListener("click", function (event) {
+ const target = event.target;
+
// Check if the click is outside the button/menu and the menu is visible
if (!isMouseOverButtonOrMenu() && menu.style.display === "flex") {
hideMenu();
@@ -361,10 +358,9 @@ for (var i = 0; i < 2; i++) {
parent.insertBefore(elementToMove, parent.firstChild);
//------------------------------------------------
-// Make the chat input grow upwards instead of downwards
+// Position the chat input
//------------------------------------------------
-document.getElementById("show-controls").parentNode.style.position = "absolute";
-document.getElementById("show-controls").parentNode.style.bottom = "0px";
+document.getElementById("show-controls").parentNode.classList.add("chat-input-positioned");
//------------------------------------------------
// Focus on the chat input
@@ -444,20 +440,10 @@ function updateCssProperties() {
// Check if the chat container is visible
if (chatContainer.clientHeight > 0) {
- var numericHeight = chatContainer.parentNode.clientHeight - chatInputHeight + 40 - 100;
- if (document.getElementById("chat-tab").style.paddingBottom != "") {
- numericHeight += 20;
- }
-
- const newChatHeight = `${numericHeight}px`;
+ const newChatHeight = `${chatContainer.parentNode.clientHeight - chatInputHeight + 40 - 100 - 20}px`;
document.documentElement.style.setProperty("--chat-height", newChatHeight);
document.documentElement.style.setProperty("--input-delta", `${chatInputHeight - 40}px`);
- // Get and set header height
- const header = document.querySelector(".header_bar");
- const headerHeight = `${header.clientHeight}px`;
- document.documentElement.style.setProperty("--header-height", headerHeight);
-
// Adjust scrollTop based on input height change
if (chatInputHeight !== currentChatInputHeight) {
if (!isScrolled && chatInputHeight < currentChatInputHeight) {
@@ -568,6 +554,8 @@ function moveToChatTab() {
grandParent.style.display = "none";
}
+ grandParent.children[0].style.minWidth = "100%";
+
const chatControlsFirstChild = document.querySelector("#chat-controls").firstElementChild;
const newParent = chatControlsFirstChild;
let newPosition = newParent.children.length - 2;
@@ -586,6 +574,7 @@ function restoreOriginalPosition() {
document.getElementById("save-character").style.display = "";
movedElement.style.display = "";
+ movedElement.children[0].style.minWidth = "";
}
}
@@ -612,3 +601,206 @@ window.addEventListener("beforeunload", function (event) {
});
moveToChatTab();
+
+//------------------------------------------------
+// Buttons to toggle the sidebars
+//------------------------------------------------
+
+const leftArrowSVG = `
+`;
+
+const rightArrowSVG = `
+`;
+
+const hamburgerMenuSVG = `
+`;
+
+const closeMenuSVG = `
+`;
+
+const chatTab = document.getElementById("chat-tab");
+const pastChatsRow = document.getElementById("past-chats-row");
+const chatControlsRow = document.getElementById("chat-controls");
+
+if (chatTab) {
+ // Create past-chats-toggle div
+ const pastChatsToggle = document.createElement("div");
+ pastChatsToggle.id = "past-chats-toggle";
+ pastChatsToggle.innerHTML = leftArrowSVG; // Set initial icon to left arrow
+ pastChatsToggle.classList.add("past-chats-open"); // Set initial position
+
+ // Create chat-controls-toggle div
+ const chatControlsToggle = document.createElement("div");
+ chatControlsToggle.id = "chat-controls-toggle";
+ chatControlsToggle.innerHTML = rightArrowSVG; // Set initial icon to right arrow
+ chatControlsToggle.classList.add("chat-controls-open"); // Set initial position
+
+ // Append both elements to the chat-tab
+ chatTab.appendChild(pastChatsToggle);
+ chatTab.appendChild(chatControlsToggle);
+}
+
+// Create navigation toggle div
+const navigationToggle = document.createElement("div");
+navigationToggle.id = "navigation-toggle";
+navigationToggle.innerHTML = leftArrowSVG; // Set initial icon to right arrow
+navigationToggle.classList.add("navigation-left"); // Set initial position
+headerBar.appendChild(navigationToggle);
+
+// Retrieve the dynamically created toggle buttons
+const pastChatsToggle = document.getElementById("past-chats-toggle");
+const chatControlsToggle = document.getElementById("chat-controls-toggle");
+
+function toggleSidebar(sidebar, toggle) {
+ const isCurrentlyHidden = sidebar.classList.contains("sidebar-hidden");
+ const shouldClose = !isCurrentlyHidden;
+
+ // Apply visibility classes
+ sidebar.classList.toggle("sidebar-hidden", shouldClose);
+ sidebar.classList.toggle("sidebar-shown", !shouldClose);
+
+ if (sidebar === headerBar) {
+ // Special handling for header bar
+ document.documentElement.style.setProperty("--header-width", shouldClose ? "0px" : "112px");
+ pastChatsRow.classList.toggle("negative-header", shouldClose);
+ pastChatsToggle.classList.toggle("negative-header", shouldClose);
+ toggle.innerHTML = shouldClose ? hamburgerMenuSVG : closeMenuSVG;
+ } else if (sidebar === pastChatsRow) {
+ // Past chats sidebar
+ toggle.classList.toggle("past-chats-closed", shouldClose);
+ toggle.classList.toggle("past-chats-open", !shouldClose);
+ toggle.innerHTML = shouldClose ? rightArrowSVG : leftArrowSVG;
+ } else if (sidebar === chatControlsRow) {
+ // Chat controls sidebar
+ toggle.classList.toggle("chat-controls-closed", shouldClose);
+ toggle.classList.toggle("chat-controls-open", !shouldClose);
+ toggle.innerHTML = shouldClose ? leftArrowSVG : rightArrowSVG;
+ }
+
+ // Mobile handling
+ if (isMobile()) {
+ sidebar.classList.toggle("sidebar-shown", !shouldClose);
+ }
+}
+
+// Function to check if the device is mobile
+function isMobile() {
+ return window.innerWidth <= 924;
+}
+
+// Function to initialize sidebars
+function initializeSidebars() {
+ const isOnMobile = isMobile();
+
+ if (isOnMobile) {
+ // Mobile state: Hide sidebars and set closed states
+ [pastChatsRow, chatControlsRow, headerBar].forEach(el => {
+ el.classList.add("sidebar-hidden");
+ el.classList.remove("sidebar-shown");
+ });
+
+ document.documentElement.style.setProperty("--header-width", "0px");
+ pastChatsRow.classList.add("negative-header");
+ pastChatsToggle.classList.add("negative-header", "past-chats-closed");
+ pastChatsToggle.classList.remove("past-chats-open");
+
+ [chatControlsToggle, navigationToggle].forEach(el => {
+ el.classList.add("chat-controls-closed");
+ el.classList.remove("chat-controls-open");
+ });
+
+ pastChatsToggle.innerHTML = rightArrowSVG;
+ chatControlsToggle.innerHTML = leftArrowSVG;
+ navigationToggle.innerHTML = hamburgerMenuSVG;
+ } else {
+ // Desktop state: Show sidebars and set open states
+ [pastChatsRow, chatControlsRow].forEach(el => {
+ el.classList.remove("sidebar-hidden", "sidebar-shown");
+ });
+
+ pastChatsToggle.classList.add("past-chats-open");
+ pastChatsToggle.classList.remove("past-chats-closed");
+
+ [chatControlsToggle, navigationToggle].forEach(el => {
+ el.classList.add("chat-controls-open");
+ el.classList.remove("chat-controls-closed");
+ });
+
+ pastChatsToggle.innerHTML = leftArrowSVG;
+ chatControlsToggle.innerHTML = rightArrowSVG;
+ navigationToggle.innerHTML = closeMenuSVG;
+ }
+}
+
+// Run the initializer when the page loads
+initializeSidebars();
+
+// Add an event listener to handle screen resizing
+window.addEventListener("resize", initializeSidebars);
+
+// Add click event listeners to toggle buttons
+pastChatsToggle.addEventListener("click", () => {
+ toggleSidebar(pastChatsRow, pastChatsToggle);
+});
+
+chatControlsToggle.addEventListener("click", () => {
+ toggleSidebar(chatControlsRow, chatControlsToggle);
+});
+
+navigationToggle.addEventListener("click", () => {
+ toggleSidebar(headerBar, navigationToggle);
+});
+
+//------------------------------------------------
+// Fixes #chat-input textarea height issue
+// for devices with width <= 924px
+//------------------------------------------------
+
+if (isMobile()) {
+ // Target the textarea
+ const textarea = document.querySelector("#chat-input textarea");
+
+ if (textarea) {
+ // Simulate adding and removing a newline
+ textarea.value += "\n";
+ textarea.dispatchEvent(new Event("input", { bubbles: true }));
+ textarea.value = textarea.value.slice(0, -1);
+ textarea.dispatchEvent(new Event("input", { bubbles: true }));
+ }
+}
+
+//------------------------------------------------
+// Create a top navigation bar on mobile
+//------------------------------------------------
+
+function createMobileTopBar() {
+ const chatTab = document.getElementById("chat-tab");
+
+ // Only create the top bar if it doesn't already exist
+ if (chatTab && !chatTab.querySelector(".mobile-top-bar")) {
+ const topBar = document.createElement("div");
+ topBar.classList.add("mobile-top-bar");
+
+ // Insert the top bar as the first child of chat-tab
+ chatTab.appendChild(topBar);
+ }
+}
+
+createMobileTopBar();
diff --git a/js/show_controls.js b/js/show_controls.js
index 1ff88e52..1a87b52d 100644
--- a/js/show_controls.js
+++ b/js/show_controls.js
@@ -1,4 +1,6 @@
-const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions");
+const belowChatInput = document.querySelectorAll(
+ "#chat-tab > div > :nth-child(1), #chat-tab > div > :nth-child(3), #chat-tab > div > :nth-child(4), #extensions"
+);
const chatParent = document.querySelector(".chat-parent");
function toggle_controls(value) {
diff --git a/modules/chat.py b/modules/chat.py
index 787277b9..92808fb7 100644
--- a/modules/chat.py
+++ b/modules/chat.py
@@ -352,13 +352,17 @@ def chatbot_wrapper(text, state, regenerate=False, _continue=False, loading_mess
for j, reply in enumerate(generate_reply(prompt, state, stopping_strings=stopping_strings, is_chat=True, for_ui=for_ui)):
# Extract the reply
- visible_reply = reply
if state['mode'] in ['chat', 'chat-instruct']:
- visible_reply = re.sub("(||{{user}})", state['name1'], reply)
+ visible_reply = re.sub("(||{{user}})", state['name1'], reply + '❚')
+ else:
+ visible_reply = reply + '❚'
visible_reply = html.escape(visible_reply)
if shared.stop_everything:
+ if output['visible'][-1][1].endswith('❚'):
+ output['visible'][-1][1] = output['visible'][-1][1][:-1]
+
output['visible'][-1][1] = apply_extensions('output', output['visible'][-1][1], state, is_chat=True)
yield output
return
@@ -374,6 +378,9 @@ def chatbot_wrapper(text, state, regenerate=False, _continue=False, loading_mess
if is_stream:
yield output
+ if output['visible'][-1][1].endswith('❚'):
+ output['visible'][-1][1] = output['visible'][-1][1][:-1]
+
output['visible'][-1][1] = apply_extensions('output', output['visible'][-1][1], state, is_chat=True)
yield output
@@ -606,9 +613,9 @@ def find_all_histories_with_first_prompts(state):
first_prompt = first_prompt.strip()
- # Truncate the first prompt if it's longer than 32 characters
- if len(first_prompt) > 32:
- first_prompt = first_prompt[:29] + '...'
+ # Truncate the first prompt if it's longer than 30 characters
+ if len(first_prompt) > 30:
+ first_prompt = first_prompt[:30-3] + '...'
result.append((first_prompt, filename))
@@ -1087,9 +1094,8 @@ def handle_delete_chat_confirm_click(state):
def handle_rename_chat_click():
return [
- gr.update(visible=True, value="My New Chat"),
+ gr.update(value="My New Chat"),
gr.update(visible=True),
- gr.update(visible=True)
]
@@ -1100,8 +1106,6 @@ def handle_rename_chat_confirm(rename_to, state):
return [
gr.update(choices=histories, value=rename_to),
gr.update(visible=False),
- gr.update(visible=False),
- gr.update(visible=False)
]
@@ -1209,7 +1213,7 @@ def handle_delete_template_click(template):
return [
f"{template}.yaml",
"instruction-templates/",
- gr.update(visible=True)
+ gr.update(visible=False)
]
diff --git a/modules/shared.py b/modules/shared.py
index 894ed6fe..599d6492 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -81,7 +81,6 @@ group.add_argument('--model-menu', action='store_true', help='Show a model menu
group.add_argument('--settings', type=str, help='Load the default interface settings from this yaml file. See settings-template.yaml for an example. If you create a file called settings.yaml, this file will be loaded by default without the need to use the --settings flag.')
group.add_argument('--extensions', type=str, nargs='+', help='The list of extensions to load. If you want to load more than one extension, write the names separated by spaces.')
group.add_argument('--verbose', action='store_true', help='Print the prompts to the terminal.')
-group.add_argument('--chat-buttons', action='store_true', help='Show buttons on the chat tab instead of a hover menu.')
group.add_argument('--idle-timeout', type=int, default=0, help='Unload model after this many minutes of inactivity. It will be automatically reloaded when you try to use it again.')
# Model loader
@@ -191,6 +190,7 @@ group.add_argument('--gradio-auth-path', type=str, help='Set the Gradio authenti
group.add_argument('--ssl-keyfile', type=str, help='The path to the SSL certificate key file.', default=None)
group.add_argument('--ssl-certfile', type=str, help='The path to the SSL certificate cert file.', default=None)
group.add_argument('--subpath', type=str, help='Customize the subpath for gradio, use with reverse proxy')
+group.add_argument('--old-colors', action='store_true', help='Use the legacy Gradio colors, before the December/2024 update.')
# API
group = parser.add_argument_group('API')
@@ -213,6 +213,7 @@ group.add_argument('--pre_layer', type=int, nargs='+', help='DEPRECATED')
group.add_argument('--checkpoint', type=str, help='DEPRECATED')
group.add_argument('--monkey-patch', action='store_true', help='DEPRECATED')
group.add_argument('--no_inject_fused_attention', action='store_true', help='DEPRECATED')
+group.add_argument('--chat-buttons', action='store_true', help='DEPRECATED')
args = parser.parse_args()
args_defaults = parser.parse_args([])
diff --git a/modules/ui.py b/modules/ui.py
index c07beeb4..f8a2d8ab 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -50,6 +50,49 @@ theme = gr.themes.Default(
button_secondary_border_color="var(--border-color-primary)"
)
+if not shared.args.old_colors:
+ theme = theme.set(
+ # General Colors
+ border_color_primary='#c5c5d2',
+ body_text_color_subdued='#484848',
+ background_fill_secondary='#eaeaea',
+ background_fill_secondary_dark='var(--dark-gray)',
+ background_fill_primary='var(--neutral-50)',
+ background_fill_primary_dark='var(--darker-gray)',
+ body_background_fill="white",
+ block_background_fill="transparent",
+ body_text_color="#333",
+ button_secondary_background_fill="#f4f4f4",
+ button_secondary_border_color="var(--border-color-primary)",
+
+ # Dark Mode Colors
+ input_background_fill_dark='var(--darker-gray)',
+ checkbox_background_color_dark='var(--darker-gray)',
+ block_background_fill_dark='transparent',
+ block_border_color_dark='transparent',
+ input_border_color_dark='var(--border-color-dark)',
+ checkbox_border_color_dark='var(--border-color-dark)',
+ border_color_primary_dark='var(--border-color-dark)',
+ button_secondary_border_color_dark='var(--border-color-dark)',
+ body_background_fill_dark='var(--dark-gray)',
+ button_primary_background_fill_dark='transparent',
+ button_secondary_background_fill_dark='transparent',
+ checkbox_label_background_fill_dark='transparent',
+ button_cancel_background_fill_dark='transparent',
+ button_secondary_background_fill_hover_dark='var(--selected-item-color-dark)',
+ checkbox_label_background_fill_hover_dark='var(--selected-item-color-dark)',
+ table_even_background_fill_dark='var(--darker-gray)',
+ table_odd_background_fill_dark='var(--dark-gray)',
+
+ # Shadows and Radius
+ checkbox_label_shadow='none',
+ block_shadow='none',
+ block_shadow_dark='none',
+ button_large_radius='0.375rem',
+ button_large_padding='6px 12px',
+ input_radius='0.375rem',
+ )
+
if Path("notification.mp3").exists():
audio_notification_js = "document.querySelector('#audio_notification audio')?.play();"
else:
@@ -232,10 +275,10 @@ def gather_interface_values(*args):
def apply_interface_values(state, use_persistent=False):
if use_persistent:
state = shared.persistent_interface_state
- if 'textbox-default' in state:
+ if 'textbox-default' in state and 'prompt_menu-default' in state:
state.pop('prompt_menu-default')
- if 'textbox-notebook' in state:
+ if 'textbox-notebook' and 'prompt_menu-notebook' in state:
state.pop('prompt_menu-notebook')
elements = list_interface_input_elements()
diff --git a/modules/ui_chat.py b/modules/ui_chat.py
index 57143cd8..e372f5c2 100644
--- a/modules/ui_chat.py
+++ b/modules/ui_chat.py
@@ -12,7 +12,6 @@ from modules.utils import gradio
inputs = ('Chat input', 'interface_state')
reload_arr = ('history', 'name1', 'name2', 'mode', 'chat_style', 'character_menu')
-clear_arr = ('delete_chat-confirm', 'delete_chat', 'delete_chat-cancel')
def create_ui():
@@ -21,7 +20,27 @@ def create_ui():
shared.gradio['Chat input'] = gr.State()
shared.gradio['history'] = gr.JSON({'internal': [], 'visible': []}, visible=False)
- with gr.Tab('Chat', elem_id='chat-tab', elem_classes=("old-ui" if shared.args.chat_buttons else None)):
+ with gr.Tab('Chat', elem_id='chat-tab'):
+ with gr.Row(elem_id='past-chats-row', elem_classes=['pretty_scrollbar']):
+ with gr.Column():
+ with gr.Row(elem_id='past-chats-buttons'):
+ shared.gradio['rename_chat'] = gr.Button('Rename', elem_classes='refresh-button', interactive=not mu)
+ shared.gradio['delete_chat'] = gr.Button('🗑️', elem_classes='refresh-button', interactive=not mu)
+ shared.gradio['Start new chat'] = gr.Button('New chat', elem_classes=['refresh-button', 'focus-on-chat-input'])
+
+ with gr.Row(elem_id='delete-chat-row', visible=False) as shared.gradio['delete-chat-row']:
+ shared.gradio['delete_chat-cancel'] = gr.Button('Cancel', elem_classes=['refresh-button', 'focus-on-chat-input'])
+ shared.gradio['delete_chat-confirm'] = gr.Button('Confirm', variant='stop', elem_classes=['refresh-button', 'focus-on-chat-input'])
+
+ with gr.Row(elem_id='rename-row', visible=False) as shared.gradio['rename-row']:
+ shared.gradio['rename_to'] = gr.Textbox(label='Rename to:', placeholder='New name', elem_classes=['no-background'])
+ with gr.Row():
+ shared.gradio['rename_to-cancel'] = gr.Button('Cancel', elem_classes=['refresh-button', 'focus-on-chat-input'])
+ shared.gradio['rename_to-confirm'] = gr.Button('Confirm', elem_classes=['refresh-button', 'focus-on-chat-input'], variant='primary')
+
+ with gr.Row():
+ shared.gradio['unique_id'] = gr.Radio(label="", elem_classes=['slim-dropdown', 'pretty_scrollbar'], interactive=not mu, elem_id='past-chats')
+
with gr.Row():
with gr.Column(elem_id='chat-col'):
shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, '', '', 'chat', 'cai-chat', ''))
@@ -60,25 +79,6 @@ def create_ui():
shared.gradio['send-chat-to-default'] = gr.Button('Send to default')
shared.gradio['send-chat-to-notebook'] = gr.Button('Send to notebook')
- with gr.Row(elem_id='past-chats-row', elem_classes=['pretty_scrollbar']):
- with gr.Column():
- with gr.Row():
- shared.gradio['rename_chat'] = gr.Button('Rename', elem_classes='refresh-button', interactive=not mu)
- shared.gradio['delete_chat'] = gr.Button('🗑️', elem_classes='refresh-button', interactive=not mu)
- shared.gradio['delete_chat-confirm'] = gr.Button('Confirm', variant='stop', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input'])
- shared.gradio['delete_chat-cancel'] = gr.Button('Cancel', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input'])
- shared.gradio['Start new chat'] = gr.Button('New chat', elem_classes=['refresh-button', 'focus-on-chat-input'])
-
- with gr.Row(elem_id='rename-row'):
- shared.gradio['rename_to'] = gr.Textbox(label='Rename to:', placeholder='New name', visible=False, elem_classes=['no-background'])
- with gr.Row():
- shared.gradio['rename_to-confirm'] = gr.Button('Confirm', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input'])
- shared.gradio['rename_to-cancel'] = gr.Button('Cancel', visible=False, elem_classes=['refresh-button', 'focus-on-chat-input'])
-
- gr.Markdown("Past chats")
- with gr.Row():
- shared.gradio['unique_id'] = gr.Radio(label="", elem_classes=['slim-dropdown', 'pretty_scrollbar'], interactive=not mu, elem_id='past-chats')
-
with gr.Row(elem_id='chat-controls', elem_classes=['pretty_scrollbar']):
with gr.Column():
with gr.Row():
@@ -180,29 +180,39 @@ def create_event_handlers():
shared.gradio['Generate'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
lambda x: (x, ''), gradio('textbox'), gradio('Chat input', 'textbox'), show_progress=False).then(
+ lambda: None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.add("_generating")').then(
chat.generate_chat_reply_wrapper, gradio(inputs), gradio('display', 'history'), show_progress=False).then(
+ None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.remove("_generating")').then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['textbox'].submit(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
lambda x: (x, ''), gradio('textbox'), gradio('Chat input', 'textbox'), show_progress=False).then(
+ lambda: None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.add("_generating")').then(
chat.generate_chat_reply_wrapper, gradio(inputs), gradio('display', 'history'), show_progress=False).then(
+ None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.remove("_generating")').then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Regenerate'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda: None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.add("_generating")').then(
partial(chat.generate_chat_reply_wrapper, regenerate=True), gradio(inputs), gradio('display', 'history'), show_progress=False).then(
+ None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.remove("_generating")').then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Continue'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda: None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.add("_generating")').then(
partial(chat.generate_chat_reply_wrapper, _continue=True), gradio(inputs), gradio('display', 'history'), show_progress=False).then(
+ None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.remove("_generating")').then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Impersonate'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
lambda x: x, gradio('textbox'), gradio('Chat input'), show_progress=False).then(
+ lambda: None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.add("_generating")').then(
chat.impersonate_wrapper, gradio(inputs), gradio('textbox', 'display'), show_progress=False).then(
+ None, None, None, js='() => document.getElementById("chat").parentNode.parentNode.parentNode.classList.remove("_generating")').then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Replace last reply'].click(
@@ -234,21 +244,21 @@ def create_event_handlers():
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
chat.handle_start_new_chat_click, gradio('interface_state'), gradio('history', 'display', 'unique_id'), show_progress=False)
- shared.gradio['delete_chat'].click(lambda: [gr.update(visible=True), gr.update(visible=False), gr.update(visible=True)], None, gradio(clear_arr))
- shared.gradio['delete_chat-cancel'].click(lambda: [gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)], None, gradio(clear_arr))
+ shared.gradio['delete_chat'].click(lambda: gr.update(visible=True), None, gradio('delete-chat-row'))
+ shared.gradio['delete_chat-cancel'].click(lambda: gr.update(visible=False), None, gradio('delete-chat-row'))
shared.gradio['delete_chat-confirm'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
- chat.handle_delete_chat_confirm_click, gradio('interface_state'), gradio('history', 'display', 'unique_id') + gradio(clear_arr), show_progress=False)
+ chat.handle_delete_chat_confirm_click, gradio('interface_state'), gradio('history', 'display', 'unique_id', 'delete-chat-row'), show_progress=False)
- shared.gradio['rename_chat'].click(chat.handle_rename_chat_click, None, gradio('rename_to', 'rename_to-confirm', 'rename_to-cancel'), show_progress=False)
- shared.gradio['rename_to-cancel'].click(lambda: [gr.update(visible=False)] * 3, None, gradio('rename_to', 'rename_to-confirm', 'rename_to-cancel'), show_progress=False)
+ shared.gradio['rename_chat'].click(chat.handle_rename_chat_click, None, gradio('rename_to', 'rename-row'), show_progress=False)
+ shared.gradio['rename_to-cancel'].click(lambda: gr.update(visible=False), None, gradio('rename-row'), show_progress=False)
shared.gradio['rename_to-confirm'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
- chat.handle_rename_chat_confirm, gradio('rename_to', 'interface_state'), gradio('unique_id', 'rename_to', 'rename_to-confirm', 'rename_to-cancel'), show_progress=False)
+ chat.handle_rename_chat_confirm, gradio('rename_to', 'interface_state'), gradio('unique_id', 'rename-row'))
shared.gradio['rename_to'].submit(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
- chat.handle_rename_chat_confirm, gradio('rename_to', 'interface_state'), gradio('unique_id', 'rename_to', 'rename_to-confirm', 'rename_to-cancel'), show_progress=False)
+ chat.handle_rename_chat_confirm, gradio('rename_to', 'interface_state'), gradio('unique_id', 'rename-row'), show_progress=False)
shared.gradio['load_chat_history'].upload(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
diff --git a/modules/ui_default.py b/modules/ui_default.py
index 112acd23..af418ed7 100644
--- a/modules/ui_default.py
+++ b/modules/ui_default.py
@@ -20,12 +20,12 @@ def create_ui():
with gr.Column():
with gr.Row():
shared.gradio['textbox-default'] = gr.Textbox(value='', lines=27, label='Input', elem_classes=['textbox_default', 'add_scrollbar'])
- shared.gradio['token-counter-default'] = gr.HTML(value="0", elem_classes=["token-counter", "default-token-counter"])
+ shared.gradio['token-counter-default'] = gr.HTML(value="0", elem_id="default-token-counter")
with gr.Row():
- shared.gradio['Generate-default'] = gr.Button('Generate', variant='primary')
- shared.gradio['Stop-default'] = gr.Button('Stop', elem_id='stop')
shared.gradio['Continue-default'] = gr.Button('Continue')
+ shared.gradio['Stop-default'] = gr.Button('Stop', elem_id='stop', visible=False)
+ shared.gradio['Generate-default'] = gr.Button('Generate', variant='primary')
with gr.Row():
shared.gradio['prompt_menu-default'] = gr.Dropdown(choices=utils.get_available_prompts(), value='None', label='Prompt', elem_classes='slim-dropdown')
@@ -63,20 +63,26 @@ def create_ui():
def create_event_handlers():
shared.gradio['Generate-default'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda : [gr.update(visible=True), gr.update(visible=False)], None, gradio('Stop-default', 'Generate-default')).then(
generate_reply_wrapper, gradio(inputs), gradio(outputs), show_progress=False).then(
lambda state, left, right: state.update({'textbox-default': left, 'output_textbox': right}), gradio('interface_state', 'textbox-default', 'output_textbox'), None).then(
+ lambda : [gr.update(visible=False), gr.update(visible=True)], None, gradio('Stop-default', 'Generate-default')).then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['textbox-default'].submit(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda : [gr.update(visible=True), gr.update(visible=False)], None, gradio('Stop-default', 'Generate-default')).then(
generate_reply_wrapper, gradio(inputs), gradio(outputs), show_progress=False).then(
lambda state, left, right: state.update({'textbox-default': left, 'output_textbox': right}), gradio('interface_state', 'textbox-default', 'output_textbox'), None).then(
+ lambda : [gr.update(visible=False), gr.update(visible=True)], None, gradio('Stop-default', 'Generate-default')).then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Continue-default'].click(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda : [gr.update(visible=True), gr.update(visible=False)], None, gradio('Stop-default', 'Generate-default')).then(
generate_reply_wrapper, [shared.gradio['output_textbox']] + gradio(inputs)[1:], gradio(outputs), show_progress=False).then(
lambda state, left, right: state.update({'textbox-default': left, 'output_textbox': right}), gradio('interface_state', 'textbox-default', 'output_textbox'), None).then(
+ lambda : [gr.update(visible=False), gr.update(visible=True)], None, gradio('Stop-default', 'Generate-default')).then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Stop-default'].click(stop_everything_event, None, None, queue=False)
diff --git a/modules/ui_notebook.py b/modules/ui_notebook.py
index 79932844..fccb1c98 100644
--- a/modules/ui_notebook.py
+++ b/modules/ui_notebook.py
@@ -23,7 +23,7 @@ def create_ui():
with gr.Tab('Raw'):
with gr.Row():
shared.gradio['textbox-notebook'] = gr.Textbox(value='', lines=27, elem_id='textbox-notebook', elem_classes=['textbox', 'add_scrollbar'])
- shared.gradio['token-counter-notebook'] = gr.HTML(value="0", elem_classes=["token-counter"])
+ shared.gradio['token-counter-notebook'] = gr.HTML(value="0", elem_id="notebook-token-counter")
with gr.Tab('Markdown'):
shared.gradio['markdown_render-notebook'] = gr.Button('Render')
@@ -48,10 +48,10 @@ def create_ui():
shared.gradio['tokens-notebook'] = gr.Textbox(lines=23, label='Tokens', elem_classes=['textbox_logits_notebook', 'add_scrollbar', 'monospace'])
with gr.Row():
- shared.gradio['Generate-notebook'] = gr.Button('Generate', variant='primary', elem_classes='small-button')
- shared.gradio['Stop-notebook'] = gr.Button('Stop', elem_classes='small-button', elem_id='stop')
shared.gradio['Undo'] = gr.Button('Undo', elem_classes='small-button')
shared.gradio['Regenerate-notebook'] = gr.Button('Regenerate', elem_classes='small-button')
+ shared.gradio['Stop-notebook'] = gr.Button('Stop', visible=False, elem_classes='small-button', elem_id='stop')
+ shared.gradio['Generate-notebook'] = gr.Button('Generate', variant='primary', elem_classes='small-button')
with gr.Column(scale=1):
gr.HTML('')
@@ -66,22 +66,28 @@ def create_event_handlers():
shared.gradio['Generate-notebook'].click(
lambda x: x, gradio('textbox-notebook'), gradio('last_input-notebook')).then(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda : [gr.update(visible=True), gr.update(visible=False)], None, gradio('Stop-notebook', 'Generate-notebook')).then(
generate_reply_wrapper, gradio(inputs), gradio(outputs), show_progress=False).then(
lambda state, text: state.update({'textbox-notebook': text}), gradio('interface_state', 'textbox-notebook'), None).then(
+ lambda : [gr.update(visible=False), gr.update(visible=True)], None, gradio('Stop-notebook', 'Generate-notebook')).then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['textbox-notebook'].submit(
lambda x: x, gradio('textbox-notebook'), gradio('last_input-notebook')).then(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda : [gr.update(visible=True), gr.update(visible=False)], None, gradio('Stop-notebook', 'Generate-notebook')).then(
generate_reply_wrapper, gradio(inputs), gradio(outputs), show_progress=False).then(
lambda state, text: state.update({'textbox-notebook': text}), gradio('interface_state', 'textbox-notebook'), None).then(
+ lambda : [gr.update(visible=False), gr.update(visible=True)], None, gradio('Stop-notebook', 'Generate-notebook')).then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Regenerate-notebook'].click(
lambda x: x, gradio('last_input-notebook'), gradio('textbox-notebook'), show_progress=False).then(
ui.gather_interface_values, gradio(shared.input_elements), gradio('interface_state')).then(
+ lambda : [gr.update(visible=True), gr.update(visible=False)], None, gradio('Stop-notebook', 'Generate-notebook')).then(
generate_reply_wrapper, gradio(inputs), gradio(outputs), show_progress=False).then(
lambda state, text: state.update({'textbox-notebook': text}), gradio('interface_state', 'textbox-notebook'), None).then(
+ lambda : [gr.update(visible=False), gr.update(visible=True)], None, gradio('Stop-notebook', 'Generate-notebook')).then(
None, None, None, js=f'() => {{{ui.audio_notification_js}}}')
shared.gradio['Undo'].click(
diff --git a/requirements.txt b/requirements.txt
index 4e976d8e..24c92391 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,7 +4,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_amd.txt b/requirements_amd.txt
index dd537a66..b7093d50 100644
--- a/requirements_amd.txt
+++ b/requirements_amd.txt
@@ -3,7 +3,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_amd_noavx2.txt b/requirements_amd_noavx2.txt
index 275bbb22..88682aea 100644
--- a/requirements_amd_noavx2.txt
+++ b/requirements_amd_noavx2.txt
@@ -3,7 +3,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_apple_intel.txt b/requirements_apple_intel.txt
index daeab92a..6588278d 100644
--- a/requirements_apple_intel.txt
+++ b/requirements_apple_intel.txt
@@ -3,7 +3,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_apple_silicon.txt b/requirements_apple_silicon.txt
index 99b5f3c2..1fc9795b 100644
--- a/requirements_apple_silicon.txt
+++ b/requirements_apple_silicon.txt
@@ -3,7 +3,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_cpu_only.txt b/requirements_cpu_only.txt
index 446a47ce..53fedd7e 100644
--- a/requirements_cpu_only.txt
+++ b/requirements_cpu_only.txt
@@ -3,7 +3,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_cpu_only_noavx2.txt b/requirements_cpu_only_noavx2.txt
index 73b9f764..9f52b172 100644
--- a/requirements_cpu_only_noavx2.txt
+++ b/requirements_cpu_only_noavx2.txt
@@ -3,7 +3,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_noavx2.txt b/requirements_noavx2.txt
index 5ea4f654..9ad138d8 100644
--- a/requirements_noavx2.txt
+++ b/requirements_noavx2.txt
@@ -4,7 +4,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*
diff --git a/requirements_nowheels.txt b/requirements_nowheels.txt
index f6ba93bd..e2daebd9 100644
--- a/requirements_nowheels.txt
+++ b/requirements_nowheels.txt
@@ -3,7 +3,7 @@ colorama
datasets
einops
fastapi==0.112.4
-gradio==4.26.*
+gradio==4.37.*
jinja2==3.1.4
markdown
numba==0.59.*