mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2024-12-24 13:28:59 +01:00
Improved UI (#6575)
This commit is contained in:
oobabooga
GitHub
parent
dc56fcff12
commit
d769618591
BIN
css/Inter/Inter-Italic-VariableFont_opsz,wght.ttf
Normal file
BIN
css/Inter/Inter-Italic-VariableFont_opsz,wght.ttf
Normal file
Binary file not shown.
BIN
css/Inter/Inter-VariableFont_opsz,wght.ttf
Normal file
BIN
css/Inter/Inter-VariableFont_opsz,wght.ttf
Normal file
Binary file not shown.
@ -16,6 +16,6 @@
|
||||
}
|
||||
|
||||
.message {
|
||||
padding-bottom: 30px;
|
||||
padding-bottom: 2em;
|
||||
grid-template-columns: 70px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
585
css/main.css
585
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,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"></path></svg>');
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.dark #past-chats label::before {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 9h8"></path><path d="M8 13h6"></path><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"></path></svg>');
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
}
|
||||
|
||||
244
js/main.js
244
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 = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-bar-left">
|
||||
<path d="M4 12l10 0"></path>
|
||||
<path d="M4 12l4 4"></path>
|
||||
<path d="M4 12l4 -4"></path>
|
||||
<path d="M20 4l0 16"></path>
|
||||
</svg>`;
|
||||
|
||||
const rightArrowSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-arrow-bar-right">
|
||||
<path d="M20 12l-10 0"></path>
|
||||
<path d="M20 12l-4 4"></path>
|
||||
<path d="M20 12l-4 -4"></path>
|
||||
<path d="M4 4l0 16"></path>
|
||||
</svg>`;
|
||||
|
||||
const hamburgerMenuSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-hamburger-menu">
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>`;
|
||||
|
||||
const closeMenuSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-close-menu">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>`;
|
||||
|
||||
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();
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>|<user>|{{user}})", state['name1'], reply)
|
||||
visible_reply = re.sub("(<USER>|<user>|{{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)
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -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([])
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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="<span>0</span>", elem_classes=["token-counter", "default-token-counter"])
|
||||
shared.gradio['token-counter-default'] = gr.HTML(value="<span>0</span>", 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)
|
||||
|
||||
@ -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="<span>0</span>", elem_classes=["token-counter"])
|
||||
shared.gradio['token-counter-notebook'] = gr.HTML(value="<span>0</span>", 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('<div style="padding-bottom: 13px"></div>')
|
||||
@ -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(
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
@ -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.*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user