AI/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-10-01 01:26:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

Move all css/js into separate files

Browse Source
This commit is contained in:
oobabooga 2023-03-15 12:33:26 -03:00
parent 693b53d957
commit ec972b85d1
6 changed files with 92 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/chat.css Normal file
View File

@ -0,0 +1,22 @@
.h-\[40vh\], .wrap.svelte-byatnx.svelte-byatnx.svelte-byatnx {
height: 66.67vh
}
.gradio-container {
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.w-screen {
width: unset
}
div.svelte-362y77>*, div.svelte-362y77>.form>* {
flex-wrap: nowrap
}
/* fixes the API documentation in chat mode */
.api-docs.svelte-1iguv9h.svelte-1iguv9h.svelte-1iguv9h {
display: grid;
}
.pending.svelte-1ed2p3z {
opacity: 1;
}

14
css/html_readable_style.css Normal file
View File

@ -0,0 +1,14 @@
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
background-color: rgb(31, 41, 55);
padding:3em;
}
.container p {
font-size: 16px !important;
color: white !important;
margin-bottom: 22px;
line-height: 1.4 !important;
}

39
css/main.css Normal file
View File

@ -0,0 +1,39 @@
.tabs.svelte-710i53 {
margin-top: 0
}
.py-6 {
padding-top: 2.5rem
}
.dark #refresh-button {
background-color: #ffffff1f;
}
#refresh-button {
flex: none;
margin: 0;
padding: 0;
min-width: 50px;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #0000000d;
}
#download-label, #upload-label {
min-height: 0
}
#accordion {
}
.dark svg {
fill: white;
}
svg {
display: unset !important;
vertical-align: middle !important;
margin: 5px;
}
ol li p, ul li p {
display: inline-block;
}
#main, #settings, #extensions, #chat-settings {
border: 0;
}

3
css/main.js Normal file
View File

@ -0,0 +1,3 @@
document.getElementById("main").parentNode.childNodes[0].style = "border: none; background-color: #8080802b; margin-bottom: 40px"
document.getElementById("main").parentNode.style = "padding: 0; margin: 0"
document.getElementById("main").parentNode.parentNode.parentNode.style = "padding: 0"

24
modules/html_generator.py
View File

@ -6,30 +6,18 @@ This is a library for formatting GPT-4chan and chat outputs as nice HTML.
import os
import re
import markdown
from pathlib import Path
import markdown
from PIL import Image
# This is to store the paths to the thumbnails of the profile pictures
image_cache = {}
def generate_basic_html(s):
css = """
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
background-color: rgb(31, 41, 55);
padding:3em;
}
.container p {
font-size: 16px !important;
color: white !important;
margin-bottom: 22px;
line-height: 1.4 !important;
}
"""
with open(Path(__file__).resolve().parent / '../css/html_readable_style.css', 'r') as f:
css = f.read()
s = '\n'.join([f'<p>{line}</p>' for line in s.split('\n')])
s = f'<style>{css}</style><div class="container">{s}</div>'
return s
@ -49,7 +37,7 @@ def process_post(post, c):
return src
def generate_4chan_html(f):
with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), '../css/html_4chan_style.css'), 'r') as f:
with open(Path(__file__).resolve().parent / '../css/html_4chan_style.css', 'r') as f:
css = f.read()
posts = []
@ -113,7 +101,7 @@ def load_html_image(paths):
return ''
def generate_chat_html(history, name1, name2, character):
with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), '../css/html_chat_style.css'), 'r') as f:
with open(Path(__file__).resolve().parent / '../css/html_chat_style.css', 'r') as f:
css = f.read()
output = f'<style>{css}</style><div class="chat" id="chat">'

78
modules/ui.py
View File

@ -1,77 +1,15 @@
from pathlib import Path
import gradio as gr
refresh_symbol = '\U0001f504' # 🔄
css = """
.tabs.svelte-710i53 {
margin-top: 0
}
.py-6 {
padding-top: 2.5rem
}
.dark #refresh-button {
background-color: #ffffff1f;
}
#refresh-button {
flex: none;
margin: 0;
padding: 0;
min-width: 50px;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #0000000d;
}
#download-label, #upload-label {
min-height: 0
}
#accordion {
}
.dark svg {
fill: white;
}
svg {
display: unset !important;
vertical-align: middle !important;
margin: 5px;
}
ol li p, ul li p {
display: inline-block;
}
#main, #settings, #extensions, #chat-settings {
border: 0;
}
"""
chat_css = """
.h-\[40vh\], .wrap.svelte-byatnx.svelte-byatnx.svelte-byatnx {
height: 66.67vh
}
.gradio-container {
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.w-screen {
width: unset
}
div.svelte-362y77>*, div.svelte-362y77>.form>* {
flex-wrap: nowrap
}
/* fixes the API documentation in chat mode */
.api-docs.svelte-1iguv9h.svelte-1iguv9h.svelte-1iguv9h {
display: grid;
}
.pending.svelte-1ed2p3z {
opacity: 1;
}
"""
page_js = """
document.getElementById("main").parentNode.childNodes[0].style = "border: none; background-color: #8080802b; margin-bottom: 40px"
document.getElementById("main").parentNode.style = "padding: 0; margin: 0"
document.getElementById("main").parentNode.parentNode.parentNode.style = "padding: 0"
"""
with open(Path(__file__).resolve().parent / '../css/main.css', 'r') as f:
css = f.read()
with open(Path(__file__).resolve().parent / '../css/chat.css', 'r') as f:
chat_css = f.read()
with open(Path(__file__).resolve().parent / '../css/main.js', 'r') as f:
page_js = f.read()
class ToolButton(gr.Button, gr.components.FormComponent):
"""Small button with single emoji as text, fits inside gradio forms"""