From ec972b85d1be8b4d756e5416bfee90449cf57381 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Wed, 15 Mar 2023 12:33:26 -0300
Subject: [PATCH] Move all css/js into separate files
---
css/chat.css | 22 +++++++++++
css/html_readable_style.css | 14 +++++++
css/main.css | 39 +++++++++++++++++++
css/main.js | 3 ++
modules/html_generator.py | 24 +++---------
modules/ui.py | 78 ++++---------------------------------
6 files changed, 92 insertions(+), 88 deletions(-)
create mode 100644 css/chat.css
create mode 100644 css/html_readable_style.css
create mode 100644 css/main.css
create mode 100644 css/main.js
diff --git a/css/chat.css b/css/chat.css
new file mode 100644
index 00000000..b1229830
--- /dev/null
+++ b/css/chat.css
@@ -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;
+}
+
diff --git a/css/html_readable_style.css b/css/html_readable_style.css
new file mode 100644
index 00000000..d3f580a5
--- /dev/null
+++ b/css/html_readable_style.css
@@ -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;
+}
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..8519f1c9
--- /dev/null
+++ b/css/main.css
@@ -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;
+}
+
diff --git a/css/main.js b/css/main.js
new file mode 100644
index 00000000..7d9cf9a2
--- /dev/null
+++ b/css/main.js
@@ -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"
diff --git a/modules/html_generator.py b/modules/html_generator.py
index d8aadf43..71a638cb 100644
--- a/modules/html_generator.py
+++ b/modules/html_generator.py
@@ -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'{line}
' for line in s.split('\n')])
s = f'{s}
'
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''
diff --git a/modules/ui.py b/modules/ui.py
index 27233153..98942559 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -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"""