Mirrors/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2025-01-09 03:59:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI: further improve the style of lists and headings

Browse Source
This commit is contained in:
oobabooga 2024-12-19 13:42:17 -08:00
parent c8ddb86c22
commit e2fb86e5df
3 changed files with 62 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/html_instruct_style.css
View File

@ -33,11 +33,6 @@
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;
}

30
css/main.css
View File

@ -460,7 +460,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.message-body h3 {
font-weight: 600;
font-size: 1.25em;
margin-top: 0;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
@ -468,7 +468,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.message-body h4 {
font-weight: 600;
font-size: 1em;
margin-top: 0;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
@ -495,6 +495,14 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
.message-body li {
list-style-position: outside;
margin-top: 0.5em !important;
margin-bottom: 0.5em !important;
}
.message-body ul.long-list li,
.message-body ol.long-list li {
margin-top: 1.25em !important;
margin-bottom: 1.25em !important;
}
.message-body a {
@ -505,23 +513,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-inline-start: 2em;
}
.chat .message-body li:not(:last-child) {
margin-top: 0;
margin-bottom: 2px;
}
.chat .message-body li:last-child {
margin-bottom: 0 !important;
}
.message-body li > p {
display: inline !important;
}
.message-body ul, .message-body ol {
font-size: 15px !important;
}
.message-body ul {
list-style-type: disc !important;
}
@ -834,8 +829,9 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-bottom: 80px !important;
}
.chat ol, .chat ul {
margin-top: 6px !important;
.message-body ol, .message-body ul {
margin-top: 0 !important;
margin-bottom: 1.25em !important;
}
/* ----------------------------------------------

49
modules/html_generator.py
View File

@ -69,6 +69,52 @@ def replace_blockquote(m):
return m.group().replace('\n', '\n> ').replace('\\begin{blockquote}', '').replace('\\end{blockquote}', '')
def add_long_list_class(html):
'''
Adds a long-list class to <ul> or <ol> containing long <li> items.
These will receive a smaller margin/padding in the CSS.
'''
# Helper function to check if a tag is within <pre> or <code>
def is_within_block(start_idx, end_idx, block_matches):
return any(start < start_idx < end or start < end_idx < end for start, end in block_matches)
# Find all <pre>...</pre> and <code>...</code> blocks
pre_blocks = [(m.start(), m.end()) for m in re.finditer(r'<pre.*?>.*?</pre>', html, re.DOTALL)]
code_blocks = [(m.start(), m.end()) for m in re.finditer(r'<code.*?>.*?</code>', html, re.DOTALL)]
all_blocks = pre_blocks + code_blocks
# Pattern to find <ul>...</ul> and <ol>...</ol> blocks and their contents
list_pattern = re.compile(r'(<[uo]l.*?>)(.*?)(</[uo]l>)', re.DOTALL)
li_pattern = re.compile(r'<li.*?>(.*?)</li>', re.DOTALL)
def process_list(match):
start_idx, end_idx = match.span()
if is_within_block(start_idx, end_idx, all_blocks):
return match.group(0) # Leave the block unchanged if within <pre> or <code>
opening_tag = match.group(1)
list_content = match.group(2)
closing_tag = match.group(3)
# Find all list items within this list
li_matches = li_pattern.finditer(list_content)
has_long_item = any(len(li_match.group(1).strip()) > 128 for li_match in li_matches)
if has_long_item:
# Add class="long-list" to the opening tag if it doesn't already have a class
if 'class=' not in opening_tag:
opening_tag = opening_tag[:-1] + ' class="long-list">'
else:
# If there's already a class, append long-list to it
opening_tag = re.sub(r'class="([^"]*)"', r'class="\1 long-list"', opening_tag)
return opening_tag + list_content + closing_tag
# Process HTML and replace list blocks
return list_pattern.sub(process_list, html)
@functools.lru_cache(maxsize=None)
def convert_to_markdown(string):
@ -168,6 +214,9 @@ def convert_to_markdown(string):
pattern = re.compile(r'<code[^>]*>(.*?)</code>', re.DOTALL)
html_output = pattern.sub(lambda x: html.unescape(x.group()), html_output)
# Add "long-list" class to <ul> or <ol> containing a long <li> item
html_output = add_long_list_class(html_output)
return html_output