Spaces:
Sleeping
Sleeping
| PARENT_BLOCK_CSS = """ | |
| #col-container { | |
| width: 95%; | |
| height: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #chatbot { | |
| height: 800px; | |
| overflow: auto; | |
| } | |
| #chatbot > .wrap { | |
| max-height: 780px; | |
| } | |
| """ | |
| MODEL_SELECTION_CSS = """ | |
| #internet_option_radio { | |
| text-align: center !important; | |
| padding: 0px !important; | |
| background-color: snow; | |
| @media (prefers-color-scheme: dark) { | |
| background-color: #0b0f19; | |
| } | |
| } | |
| #internet_option_radio > .wrap:nth-child(3) { | |
| display: block !important; | |
| } | |
| .template-txt { | |
| text-align: center; | |
| font-size: 15pt !important; | |
| } | |
| .message { | |
| margin: 0px !important; | |
| } | |
| .load-mode-selector:nth-child(3) { | |
| margin: auto !important; | |
| text-align: center !important; | |
| width: fit-content !important; | |
| } | |
| code { | |
| white-space: break-spaces !important; | |
| } | |
| .progress-view { | |
| background: transparent !important; | |
| border-radius: 25px !important; | |
| } | |
| #landing-container { | |
| width: 85%; | |
| margin: auto; | |
| } | |
| .landing-btn { | |
| font-size: 2.3vw !important; | |
| margin-top: 25px !important; | |
| border-radius: 25px !important; | |
| height: 120px !important; | |
| @media screen and (max-width: 1000px) { | |
| font-size: 20px !important; | |
| } | |
| } | |
| #landing-bottom { | |
| margin-top: 20px !important; | |
| } | |
| .custom-btn { | |
| border: none !important; | |
| background: none !important; | |
| box-shadow: none !important; | |
| display: block !important; | |
| text-align: left !important; | |
| } | |
| .custom-btn:hover { | |
| background: rgb(243 244 246) !important; | |
| } | |
| .custom-btn-highlight { | |
| border: none !important; | |
| background: rgb(243 244 246) !important; | |
| box-shadow: none !important; | |
| display: block !important; | |
| text-align: left !important; | |
| @media (prefers-color-scheme: dark) { | |
| background-color: rgba(17,24,39,255) !important; | |
| } | |
| } | |
| #prompt-txt > label > span { | |
| display: none !important; | |
| } | |
| #prompt-txt > label > textarea { | |
| border: transparent; | |
| border-radius: 20px; | |
| } | |
| #chatbot { | |
| height: 800px !important; | |
| overflow: auto; | |
| box-shadow: none !important; | |
| border: none !important; | |
| } | |
| #chatbot > .wrap { | |
| max-height: 780px !important; | |
| } | |
| #chatbot + div { | |
| border-radius: 35px !important; | |
| width: 80% !important; | |
| margin: auto !important; | |
| } | |
| #left-pane { | |
| background-color: transparent; | |
| border-radius: 15px; | |
| padding: 10px; | |
| @media (prefers-color-scheme: dark) { | |
| background-color: rgba(31,41,55,255) !important; | |
| } | |
| } | |
| #left-top { | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: large; | |
| } | |
| #chat-history-accordion { | |
| background: transparent; | |
| border: 0.8px !important; | |
| } | |
| #right-pane { | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| background: transparent; | |
| border-radius: 20px; | |
| @media (prefers-color-scheme: dark) { | |
| background-color: rgba(31,41,55,255) !important; | |
| } | |
| @media screen and (max-width: 1000px) { | |
| margin: 0px !important; | |
| } | |
| } | |
| #initial-popup { | |
| z-index: 100; | |
| position: absolute; | |
| width: 50%; | |
| top: 50%; | |
| height: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| border-radius: 35px; | |
| padding: 15px; | |
| } | |
| #initial-popup-title { | |
| text-align: center; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| #initial-popup-left-pane { | |
| min-width: 150px !important; | |
| } | |
| #initial-popup-right-pane { | |
| text-align: right; | |
| } | |
| .example-btn { | |
| padding-top: 20px !important; | |
| padding-bottom: 20px !important; | |
| padding-left: 5px !important; | |
| padding-right: 5px !important; | |
| background: linear-gradient(to bottom right, #f7faff, #ffffff) !important; | |
| box-shadow: none !important; | |
| border-radius: 20px !important; | |
| @media (prefers-color-scheme: dark) { | |
| background: rgba(70,79,86,255) !important; | |
| } | |
| } | |
| .example-btn:hover { | |
| box-shadow: 0.3px 0.3px 0.3px gray !important; | |
| @media (prefers-color-scheme: dark) { | |
| background: rgba(34,37,42,255) !important; | |
| } | |
| } | |
| .example-btn:active { | |
| @media (prefers-color-scheme: dark) { | |
| background: rgba(70,79,86,255) !important; | |
| } | |
| } | |
| #example-title { | |
| margin-bottom: 15px; | |
| } | |
| #aux-btns-popup { | |
| z-index: 200; | |
| position: absolute !important; | |
| bottom: 75px !important; | |
| right: 40px !important; | |
| } | |
| #aux-btns-popup > div { | |
| flex-wrap: nowrap; | |
| width: fit-content; | |
| margin: auto; | |
| } | |
| .aux-btn { | |
| height: 30px !important; | |
| flex-wrap: initial !important; | |
| flex: none !important; | |
| min-width: min(100px,100%) !important; | |
| font-weight: unset !important; | |
| font-size: 10pt !important; | |
| background: linear-gradient(to bottom right, #f7faff, #ffffff) !important; | |
| box-shadow: none !important; | |
| border-radius: 20px !important; | |
| opacity: 0.5; | |
| border-width: 0.5px; | |
| border-color: grey; | |
| color: red !important; | |
| @media (prefers-color-scheme: dark) { | |
| opacity: 0.2 !important; | |
| color: black !important; | |
| } | |
| } | |
| .aux-btn:hover { | |
| opacity: 1.0; | |
| box-shadow: 0.3px 0.3px 0.3px gray !important; | |
| @media (prefers-color-scheme: dark) { | |
| opacity: 1.0 !important; | |
| box-shadow: 0.3px 0.3px 0.3px gray !important; | |
| } | |
| } | |
| #aux-viewer { | |
| position: absolute !important; | |
| border-style: solid !important; | |
| overflow: visible !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| z-index: 1000 !important; | |
| opacity: 0.0 !important; | |
| width: 75% !important; | |
| right: 1px !important; | |
| transition: all 0.5s; | |
| } | |
| #aux-viewer:hover { | |
| opacity: 1.0 !important; | |
| box-shadow: 0px 0.5px 0px 0px gray !important; | |
| } | |
| #aux-viewer > .label-wrap { | |
| justify-content: end; | |
| } | |
| #aux-viewer > .label-wrap > span { | |
| margin-right: 10px; | |
| } | |
| #aux-viewer-inspector { | |
| padding: 0px; | |
| } | |
| #aux-viewer-inspector > label > span { | |
| display: none !important; | |
| } | |
| #aux-viewer-inspector > label > textarea { | |
| box-shadow: none; | |
| border-color: transparent; | |
| } | |
| #global-context > label > span { | |
| display: none !important; | |
| } | |
| #chat-back-btn { | |
| background: transparent !important; | |
| } | |
| #chat-back-btn:hover { | |
| @media (prefers-color-scheme: dark) { | |
| background: rgb(75,85,99) !important; | |
| } | |
| } | |
| #chat-back-btn:active { | |
| @media (prefers-color-scheme: dark) { | |
| background: transparent !important; | |
| } | |
| } | |
| #col-container { | |
| max-width: 70%; | |
| height: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #container { | |
| max-width: 70%; | |
| margin: auto; | |
| } | |
| #container2 { | |
| max-width: 60%; | |
| margin: auto; | |
| } | |
| #container3 { | |
| max-width: 60%; | |
| margin: auto; | |
| } | |
| .square { | |
| height: 100px; | |
| @media (prefers-color-scheme: dark) { | |
| background-color: rgba(70,79,86,255) !important; | |
| } | |
| } | |
| .square:hover { | |
| @media (prefers-color-scheme: dark) { | |
| background-color: rgba(34,37,42,255) !important; | |
| } | |
| } | |
| .square:active { | |
| @media (prefers-color-scheme: dark) { | |
| background-color: rgba(70,79,86,255) !important; | |
| } | |
| } | |
| .placeholders { | |
| min-width: max-content !important; | |
| } | |
| .placeholders > button { | |
| border-color: transparent !important; | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| cursor: default !important; | |
| } | |
| .center { | |
| text-align: center; | |
| } | |
| .sub-container > div { | |
| min-width: max-content !important; | |
| } | |
| .normal_ | |
| """ | |