├── .gitignore ├── README.md ├── ext_bar.css ├── ext_bar.js ├── ext_bar_hide.js ├── script.py └── sticky_tabs.css /.gitignore: -------------------------------------------------------------------------------- 1 | *pycache* 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ui_tweaks 2 | An extension for [text-generation-webui by oobabooga](https://github.com/oobabooga/text-generation-webui). 3 | 4 | Adds options to keep tabs on page (sticky tabs) and to move extensions into a hidden sidebar. 5 | 6 | ![image](https://github.com/xanthousm/text-gen-webui-ui_tweaks/assets/70198941/c5998420-9607-43d1-865f-65ec0f449ec2) 7 | 8 | ### Installation: 9 | 1. Make sure you're in the `text-generation-webui` directory and clone this repository directly into the `extensions` directory 10 | ```bash 11 | git clone https://github.com/xanthousm/text-gen-webui-ui_tweaks.git extensions/ui_tweaks 12 | ``` 13 | 2. Activate it in the UI's **Interface mode** tab, or by using the ```--extension``` flag on launch (e.g. `--extension ui_tweaks`). 14 | 15 | ### Sidebar settings: 16 | - Open sidebar on startup 17 | - Hide sidebar by clicking anywhere 18 | - Dynamic height (shrink to fit) 19 | - Custom width 20 | 21 | ### Save default settings by editing ```params``` in ```script.py``` or by using oobabooga's ```settings.yaml``` file: 22 | - Eg: Add ```ui_tweaks-bar_init_show: true``` to a new line in ```settings.yaml``` 23 | -------------------------------------------------------------------------------- /ext_bar.css: -------------------------------------------------------------------------------- 1 | 2 | #extensions{ 3 | position: fixed; 4 | bottom: 1em; 5 | margin-right: 0 !important; 6 | padding: 10px 10px 10px 10px !important; 7 | max-height: calc(100% - 5em); 8 | overflow-y: auto; 9 | z-index: 1001; 10 | background-color: var(--panel-background-fill); 11 | border-radius: var(--radius-lg); 12 | border-style: solid; 13 | border-width: 1px; 14 | border-color: var(--border-color-primary); 15 | transition: 0.25s ; 16 | } 17 | 18 | 19 | #ext_toggle { 20 | position: fixed !important; 21 | bottom: 5px; 22 | right: 5px; 23 | z-index: 1002; 24 | width: min-content; 25 | } -------------------------------------------------------------------------------- /ext_bar.js: -------------------------------------------------------------------------------- 1 | // Get references to the elements 2 | //extensions defined in main.js 3 | let ext_btn = document.getElementById('ext_toggle'); 4 | //bar_w_str defined in script.py 5 | 6 | //visibility check for ext_button 7 | main_parent.addEventListener('click', function(e) { 8 | let chat_visible = (chat_tab.offsetHeight > 0 && chat_tab.offsetWidth > 0); 9 | let notebook_visible = (notebook_tab.offsetHeight > 0 && notebook_tab.offsetWidth > 0); 10 | let default_visible = (default_tab.offsetHeight > 0 && default_tab.offsetWidth > 0); 11 | if (chat_visible || notebook_visible || default_visible) { 12 | ext_btn.style.display = 'block'; 13 | } else { 14 | ext_btn.style.display = 'none'; 15 | } 16 | }); 17 | 18 | // Add an event listener to the extensions toggle button 19 | ext_btn.addEventListener('click', function(e) { 20 | // Toggle extensions offset to show/hide 21 | if (extensions.style.right != '5px') { 22 | extensions.style.setProperty("right", "5px"); 23 | } else { 24 | extensions.style.setProperty("right", bar_w_str); 25 | } 26 | }); 27 | 28 | -------------------------------------------------------------------------------- /ext_bar_hide.js: -------------------------------------------------------------------------------- 1 | // Get references to the elements 2 | //main defined in main.js 3 | //extensions defined in main.js 4 | //bar_w_str defined in script.py 5 | 6 | // Add an event listener to the main element 7 | main_parent.addEventListener('click', function(e) { 8 | // Check if extensions bar open and was not the target (or the target's ancestor), hide 9 | if (extensions.style.right == '5px') { 10 | extensions.style.setProperty("right", bar_w_str); 11 | } 12 | }); -------------------------------------------------------------------------------- /script.py: -------------------------------------------------------------------------------- 1 | import os 2 | 3 | import gradio as gr 4 | 5 | current_dir = os.path.dirname(os.path.abspath(__file__)) 6 | sticky_tabs_css = os.path.join(current_dir, "sticky_tabs.css") 7 | ext_bar_css = os.path.join(current_dir, "ext_bar.css") 8 | ext_bar_js = os.path.join(current_dir, "ext_bar.js") 9 | ext_bar_hide_js = os.path.join(current_dir, "ext_bar_hide.js") 10 | 11 | params = { 12 | "display_name": "UI Tweaks (Restart interface to apply)", 13 | "is_tab": False, 14 | "sticky_tabs": True, 15 | "ext_bar": True, 16 | "bar_init_show":False, 17 | "bar_easy_hide":False, 18 | "bar_dyna_height":False, 19 | "bar_width": 500, 20 | } 21 | 22 | def custom_js(): 23 | full_js='' 24 | #use new scrollbars on main body 25 | full_js+='\ndocument.body.classList.add("pretty_scrollbar");' 26 | 27 | if params['ext_bar']: 28 | 29 | #set bar width 30 | full_js+=f'\nconst bar_w_str = "-{params["bar_width"]+5}px";' 31 | full_js+=f'\ndocument.getElementById("extensions").style.setProperty("max-width", "{params["bar_width"]}px");' 32 | full_js+='\ndocument.getElementById("extensions").classList.add("pretty_scrollbar");' 33 | #load bar toggle 34 | full_js+=open(ext_bar_js, 'r').read() 35 | 36 | #initially show extensions bar if set in params 37 | if params['bar_init_show']: 38 | full_js+='\ndocument.getElementById("extensions").style.setProperty("right", "5px");' 39 | 40 | #allow bar easy hide if set in params 41 | if params['bar_easy_hide']: 42 | full_js+=open(ext_bar_hide_js, 'r').read() 43 | 44 | 45 | #lock bar height to max if not dynamic 46 | if not params['bar_dyna_height']: 47 | full_js+='\ndocument.getElementById("extensions").style.setProperty("height", "calc(100% - 5em)");' 48 | 49 | return full_js 50 | 51 | def custom_css(): 52 | full_css='' 53 | if params['ext_bar']: 54 | full_css+=open(ext_bar_css, 'r').read() 55 | #set width and hide 56 | full_css+=f'\n#extensions{{width: {params["bar_width"]}px; right: -{params["bar_width"]+5}px;}}' 57 | 58 | if params['sticky_tabs']: 59 | full_css+=open(sticky_tabs_css, 'r').read() 60 | 61 | return full_css 62 | 63 | def ui(): 64 | with gr.Row(): 65 | sticky = gr.Checkbox(value=params['sticky_tabs'], label='Use sticky tabs') 66 | ext = gr.Checkbox(value=params['ext_bar'], label='Use extension sidebar') 67 | with gr.Accordion("Extension sidebar settings", open=False): 68 | show = gr.Checkbox(value=params['bar_init_show'], label='Open sidebar on startup') 69 | hide = gr.Checkbox(value=params['bar_easy_hide'], label='Click anywhere to hide sidebar') 70 | dyna_h = gr.Checkbox(value=params['bar_dyna_height'], label='Dynamic sidebar height') 71 | #set_w = gr.Number(value=params['bar_width'], label='sidebar width (pixels)', interactive=True, precision=0) 72 | set_w = gr.Slider(200, 2000,step=50,value=params['bar_width'], label='sidebar width (pixels)') 73 | 74 | # Event functions to update the parameters in the backend 75 | sticky.change(lambda x: params.update({"sticky_tabs": x}), sticky, None) 76 | ext.change(lambda x: params.update({"ext_bar": x}), ext, None) 77 | show.change(lambda x: params.update({"bar_init_show": x}), show, None) 78 | hide.change(lambda x: params.update({"bar_easy_hide": x}), hide, None) 79 | dyna_h.change(lambda x: params.update({"bar_dyna_height": x}), dyna_h, None) 80 | set_w.change(lambda x: params.update({"bar_width": x}), set_w, None) 81 | 82 | #ext button 83 | btn = gr.Button("Extensions", elem_id = "ext_toggle", visible=params['ext_bar']) 84 | btn.click(None, None, None) -------------------------------------------------------------------------------- /sticky_tabs.css: -------------------------------------------------------------------------------- 1 | .header_bar { 2 | position: fixed !important; 3 | width: 100%; 4 | z-index: 50; /*some gradio labels have a high z-index, couldnn't bother finding its exact value*/ 5 | } 6 | 7 | .dark .header_bar { 8 | background-color: #1F222B; /*#8080802b blended with default bg color*/ 9 | } 10 | #chat-tab, #default-tab, #notebook-tab, #parameters, #chat-settings, #lora, #training-tab, #model-tab, #session-tab, .extension-tab{ 11 | margin-top: 50px; 12 | } --------------------------------------------------------------------------------