fix: 🎨 improve a bit the HTML response of endpoints

melMass · Jul 23, 2023 · 50d51c7 · 50d51c7 · melMass · Jul 23, 2023
1 parent 55c9736
commit 50d51c7
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 5 deletions.
diff --git a/__init__.py b/__init__.py
@@ -163,13 +163,31 @@ def load_nodes():
 from importlib import reload
 import logging
 
-endlog = mklog("endpoint")
+endlog = mklog("mtb endpoint")
 
 
 @PromptServer.instance.routes.get("/mtb/status")
 async def get_full_library(request):
-    files = []
-    endlog.debug("Getting status")
+    from . import endpoint
+
+    reload(endpoint)
+
+    endlog.debug("Getting node registration status")
+    # Check if the request prefers HTML content
+    if "text/html" in request.headers.get("Accept", ""):
+        # # Return an HTML page
+        html_response = endpoint.render_table(
+            NODE_CLASS_MAPPINGS_DEBUG, title="Registered"
+        )
+        html_response += endpoint.render_table(
+            {k: "-" for k in failed}, title="Failed to load"
+        )
+
+        return web.Response(
+            text=endpoint.render_base_template("MTB", html_response),
+            content_type="text/html",
+        )
+
     return web.json_response(
         {
             "registered": NODE_CLASS_MAPPINGS_DEBUG,

diff --git a/endpoint.py b/endpoint.py
@@ -1,6 +1,34 @@
 from .utils import here
 
 
+def render_table(table_dict, sort=True, title=None):
+    table_rows = ""
+    table_dict = sorted(
+        table_dict.items(), key=lambda item: item[0]
+    )  # Sort the dictionary by keys
+
+    for name, description in table_dict:
+        table_rows += f"<tr><td>{name}</td><td>{description}</td></tr>"
+
+    html_response = f"""
+        <div class="table-container">
+        {"" if title is None else f"<h1>{title}</h1>"}
+        <table>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                {table_rows}
+            </tbody>
+        </table>      
+        </div>
+        """
+    return html_response
+
+
 def render_base_template(title, content):
     css_content = ""
     css_path = here / "html" / "style.css"
@@ -20,8 +48,10 @@ def render_base_template(title, content):
     </head>
     <body>
         <header>
+        <a href="/">Back to Comfy</a>
+        <div class="mtb_logo">
             <img src="https://repository-images.githubusercontent.com/649047066/a3eef9a7-20dd-4ef9-b839-884502d4e873" alt="Comfy MTB Logo" height="70" width="128">
-            <span class="title">Comfy MTB</span>
+            <span class="title">Comfy MTB</span></div>
             <a style="width:128px;text-align:center" href="https://www.github.com/melmass/comfy_mtb">
                 {github_icon_svg}
             </a>

diff --git a/html/style.css b/html/style.css
@@ -6,6 +6,87 @@ html {
     color: whitesmoke;
 }
 
+a {
+    color: whitesmoke;
+
+}
+
+.table-container {
+    width: 70%;
+    height: 100%;
+    overflow: auto;
+}
+
+table {
+
+    border-collapse: collapse;
+}
+
+th,
+td {
+    padding: 10px;
+    text-align: left;
+}
+
+th {
+    background-color: rgb(45, 45, 45);
+    /* Light gray background for header row */
+    font-weight: bold;
+}
+
+tr:nth-child(even) {
+    background-color: rgb(45, 45, 45);
+    /* Alternate row background color */
+}
+
+tr:hover {
+    background-color: #797979;
+    /* Highlight color on hover */
+}
+
+td:nth-child(2) {
+    /* Applies to the second column (Description) */
+    width: 80%;
+    /* Adjust the width as needed */
+    word-wrap: break-word;
+    /* Allow long words to be broken and wrapped to the next line */
+}
+
+.mtb_logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Styling for WebKit-based browsers (Chrome, Edge) */
+.table-container::-webkit-scrollbar {
+    width: 10px;
+    /* Set the width of the scrollbar */
+}
+
+.table-container::-webkit-scrollbar-thumb {
+    background-color: #797979;
+    /* Color of the scrollbar thumb */
+}
+
+/* Styling for Firefox */
+.table-container {
+    scrollbar-width: thin;
+    /* Set the width of the scrollbar */
+}
+
+.table-container::-webkit-scrollbar-thumb {
+    background-color: #797979;
+    /* Color of the scrollbar thumb */
+}
+
+/* Optionally, you can also style the scrollbar track (background) */
+.table-container::-webkit-scrollbar-track {
+    background-color: #f2f2f2;
+}
+
+
+
 body {
     margin: 0;
     padding: 0;
@@ -18,7 +99,7 @@ body {
 .title {
     font-size: 2.5em;
     font-weight: 700;
-    margin: 1em;
+
 }
 
 header {