|
|
@@ -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 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;
|
|
|
- }
|
|
|
+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 ''
|
|
|
|
|
|
- .message {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 60px 1fr;
|
|
|
- padding-bottom: 25px;
|
|
|
- font-size: 15px;
|
|
|
- font-family: Helvetica, Arial, sans-serif;
|
|
|
- line-height: 1.428571429;
|
|
|
- }
|
|
|
+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:
|
|
|
+ css = f.read()
|
|
|
|
|
|
- .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
|
|
|
+ output = f'<style>{css}</style><div class="chat" id="chat">'
|
|
|
+
|
|
|
+ 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>
|
HideLord