Adding markdown support and slight refactoring.

This commit is contained in:
HideLord 2023-03-12 21:34:09 +02:00
parent fda376d9c3
commit 683556f411
4 changed files with 198 additions and 217 deletions

103
css/html_4chan_style.css Normal file
View File

@ -0,0 +1,103 @@
#parent #container {
background-color: #eef2ff;
padding: 17px;
}
#parent #container .reply {
background-color: rgb(214, 218, 240);
border-bottom-color: rgb(183, 197, 217);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(183, 197, 217);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(0, 0, 0);
border-top-style: none;
border-top-width: 0px;
color: rgb(0, 0, 0);
display: table;
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 0px;
margin-top: 4px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 4px;
padding-left: 2px;
padding-right: 2px;
padding-top: 4px;
}
#parent #container .number {
color: rgb(0, 0, 0);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
width: 342.65px;
margin-right: 7px;
}
#parent #container .op {
color: rgb(0, 0, 0);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
margin-bottom: 8px;
margin-left: 0px;
margin-right: 0px;
margin-top: 4px;
overflow-x: hidden;
overflow-y: hidden;
}
#parent #container .op blockquote {
margin-left: 0px !important;
}
#parent #container .name {
color: rgb(17, 119, 67);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
font-weight: 700;
margin-left: 7px;
}
#parent #container .quote {
color: rgb(221, 0, 0);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
text-decoration-color: rgb(221, 0, 0);
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: auto;
}
#parent #container .greentext {
color: rgb(120, 153, 34);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
}
#parent #container blockquote {
margin: 0px !important;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
margin-top: 13.33px !important;
margin-bottom: 13.33px !important;
margin-left: 40px !important;
margin-right: 40px !important;
}
#parent #container .message {
color: black;
border: none;
}

73
css/html_chat_style.css Normal file
View File

@ -0,0 +1,73 @@
.chat {
margin-left: auto;
margin-right: auto;
max-width: 800px;
height: 66.67vh;
overflow-y: auto;
padding-right: 20px;
display: flex;
flex-direction: column-reverse;
}
.message {
display: grid;
grid-template-columns: 60px 1fr;
padding-bottom: 25px;
font-size: 15px;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.428571429;
}
.circle-you {
width: 50px;
height: 50px;
background-color: rgb(238, 78, 59);
border-radius: 50%;
}
.circle-bot {
width: 50px;
height: 50px;
background-color: rgb(59, 78, 244);
border-radius: 50%;
}
.circle-bot img,
.circle-you img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
.text {}
.text p {
margin-top: 5px;
}
.username {
font-weight: bold;
}
.message-body {}
.message-body img {
max-width: 300px;
max-height: 300px;
border-radius: 20px;
}
.message-body p {
margin-bottom: 0 !important;
font-size: 15px !important;
line-height: 1.428571429 !important;
}
.dark .message-body p em {
color: rgb(138, 138, 138) !important;
}
.message-body p em {
color: rgb(110, 110, 110) !important;
}

View File

@ -6,6 +6,7 @@ This is a library for formatting GPT-4chan and chat outputs as nice HTML.
import os
import re
import markdown
from pathlib import Path
from PIL import Image
@ -48,112 +49,8 @@ def process_post(post, c):
return src
def generate_4chan_html(f):
css = """
#parent #container {
background-color: #eef2ff;
padding: 17px;
}
#parent #container .reply {
background-color: rgb(214, 218, 240);
border-bottom-color: rgb(183, 197, 217);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(183, 197, 217);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(0, 0, 0);
border-top-style: none;
border-top-width: 0px;
color: rgb(0, 0, 0);
display: table;
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
margin-bottom: 4px;
margin-left: 0px;
margin-right: 0px;
margin-top: 4px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 4px;
padding-left: 2px;
padding-right: 2px;
padding-top: 4px;
}
#parent #container .number {
color: rgb(0, 0, 0);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
width: 342.65px;
margin-right: 7px;
}
#parent #container .op {
color: rgb(0, 0, 0);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
margin-bottom: 8px;
margin-left: 0px;
margin-right: 0px;
margin-top: 4px;
overflow-x: hidden;
overflow-y: hidden;
}
#parent #container .op blockquote {
margin-left: 0px !important;
}
#parent #container .name {
color: rgb(17, 119, 67);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
font-weight: 700;
margin-left: 7px;
}
#parent #container .quote {
color: rgb(221, 0, 0);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
text-decoration-color: rgb(221, 0, 0);
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: auto;
}
#parent #container .greentext {
color: rgb(120, 153, 34);
font-family: arial, helvetica, sans-serif;
font-size: 13.3333px;
}
#parent #container blockquote {
margin: 0px !important;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
margin-top: 13.33px !important;
margin-bottom: 13.33px !important;
margin-left: 40px !important;
margin-right: 40px !important;
}
#parent #container .message {
color: black;
border: none;
}
"""
with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), '../css/html_4chan_style.css'), 'r') as f:
css = f.read()
posts = []
post = ''
@ -208,135 +105,42 @@ def get_image_cache(path):
return image_cache[path][1]
def load_html_image(paths):
for str_path in paths:
path = Path(str_path)
if path.exists():
return f'<img src="file/{get_image_cache(path)}">'
return ''
def generate_chat_html(history, name1, name2, character):
css = """
.chat {
margin-left: auto;
margin-right: auto;
max-width: 800px;
height: 66.67vh;
overflow-y: auto;
padding-right: 20px;
display: flex;
flex-direction: column-reverse;
}
with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), '../css/html_chat_style.css'), 'r') as f:
css = f.read()
.message {
display: grid;
grid-template-columns: 60px 1fr;
padding-bottom: 25px;
font-size: 15px;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.428571429;
}
output = f'<style>{css}</style><div class="chat" id="chat">'
.circle-you {
width: 50px;
height: 50px;
background-color: rgb(238, 78, 59);
border-radius: 50%;
}
.circle-bot {
width: 50px;
height: 50px;
background-color: rgb(59, 78, 244);
border-radius: 50%;
}
.circle-bot img, .circle-you img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
}
.text p {
margin-top: 5px;
}
.username {
font-weight: bold;
}
.message-body {
}
.message-body img {
max-width: 300px;
max-height: 300px;
border-radius: 20px;
}
.message-body p {
margin-bottom: 0 !important;
font-size: 15px !important;
line-height: 1.428571429 !important;
}
.dark .message-body p em {
color: rgb(138, 138, 138) !important;
}
.message-body p em {
color: rgb(110, 110, 110) !important;
}
"""
output = ''
output += f'<style>{css}</style><div class="chat" id="chat">'
img = ''
for i in [
f"characters/{character}.png",
f"characters/{character}.jpg",
f"characters/{character}.jpeg",
"img_bot.png",
"img_bot.jpg",
"img_bot.jpeg"
]:
path = Path(i)
if path.exists():
img = f'<img src="file/{get_image_cache(path)}">'
break
img_me = ''
for i in ["img_me.png", "img_me.jpg", "img_me.jpeg"]:
path = Path(i)
if path.exists():
img_me = f'<img src="file/{get_image_cache(path)}">'
break
img_bot = load_html_image([f"characters/{character}.{ext}" for ext in ['png', 'jpg', 'jpeg']] + ["img_bot.png","img_bot.jpg","img_bot.jpeg"])
img_me = load_html_image(["img_me.png", "img_me.jpg", "img_me.jpeg"])
for i,_row in enumerate(history[::-1]):
row = _row.copy()
row[0] = re.sub(r"(\*\*)([^\*\n]*)(\*\*)", r"<b>\2</b>", row[0])
row[1] = re.sub(r"(\*\*)([^\*\n]*)(\*\*)", r"<b>\2</b>", row[1])
row[0] = re.sub(r"(\*)([^\*\n]*)(\*)", r"<em>\2</em>", row[0])
row[1] = re.sub(r"(\*)([^\*\n]*)(\*)", r"<em>\2</em>", row[1])
p = '\n'.join([f"<p>{x}</p>" for x in row[1].split('\n')])
row = [markdown.markdown(re.sub(r"(.)```", r"\1\n```", entry), extensions=['fenced_code']) for entry in _row]
output += f"""
<div class="message">
<div class="circle-bot">
{img}
{img_bot}
</div>
<div class="text">
<div class="username">
{name2}
</div>
<div class="message-body">
{p}
{row[1]}
</div>
</div>
</div>
"""
if not (i == len(history)-1 and len(row[0]) == 0):
p = '\n'.join([f"<p>{x}</p>" for x in row[0].split('\n')])
output += f"""
<div class="message">
<div class="circle-you">
@ -347,7 +151,7 @@ def generate_chat_html(history, name1, name2, character):
{name1}
</div>
<div class="message-body">
{p}
{row[0]}
</div>
</div>
</div>

View File

@ -8,4 +8,5 @@ rwkv==0.1.0
safetensors==0.2.8
sentencepiece
tqdm
markdown
git+https://github.com/zphang/transformers@llama_push