add changelog to ui

javascript/style.css

@@ -281,6 +281,12 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri
 .log-monitor { display: none; justify-content: unset !important; overflow: hidden; padding: 0; margin-top: auto; font-family: monospace; font-size: 0.85em; }
 .log-monitor td, .log-monitor th { padding-left: 1em; }
 
+/* changelog */
+.md h2 { background-color: var(--background-fill-primary); padding: 0.5em; }
+.md ul { list-style-type: square !important; text-indent: 1em; margin-left: 4em; }
+.md li { list-style-position: outside !important; text-indent: 0; }
+.md p { margin-left: 2em; }
+
 /* custom component */
 .folder-selector textarea { height: 2em !important; padding: 6px !important; }
 
@@ -295,6 +301,7 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri
 .loader::before { border-top-color: var(--primary-900); animation: 3s spin linear infinite; }
 .loader::after { border-top-color: var(--primary-300); animation: spin 1.5s linear infinite; }
 
+
 @keyframes move {
   from { background-position-x: 0, -40px; }
   to { background-position-x: 0, 40px; }

modules/ui.py

@@ -1076,6 +1076,11 @@ def create_ui(startup_timer = None):
                 loadsave.create_ui()
                 create_dirty_indicator("tab_defaults", [], interactive=False)
 
+            with gr.TabItem("Change log", id="change_log", elem_id="system_tab_changelog"):
+                with open('CHANGELOG.md', 'r', encoding='utf-8') as f:
+                    md = f.read()
+                gr.Markdown(md)
+
             with gr.TabItem("Licenses", id="system_licenses", elem_id="system_tab_licenses"):
                 gr.HTML(modules.shared.html("licenses.html"), elem_id="licenses", elem_classes="licenses")
                 create_dirty_indicator("tab_licenses", [], interactive=False)