// ==UserScript==// @name         PixAI UI Helpers// @namespace    http://yourname.tampermonkey.net/// @version      1.4.2// @description  Helpers for PixAI: Toggle between 4x1 and 2x2 layouts for the image grid, toggle the visibility of the right and left sidebars, and enable "Ctrl+Enter" for generating images. Remembers layout and Ctrl+Enter settings across refreshes.// @author       Yada// @match        https://pixai.art/*// @icon         https://pixai.art/favicon.ico// @grant        none// @license      MIT// @supportURL   http://yoursupporturl.com/script.js// ==/UserScript==(function() {'use strict';const LAYOUT_MODES = {FOUR_BY_ONE: '4x1',TWO_BY_TWO: '2x2',};let layoutMode = localStorage.getItem('pixai-layout') || LAYOUT_MODES.FOUR_BY_ONE;let isCtrlEnterEnabled = localStorage.getItem('pixai-ctrl-enter') === 'enabled';let isRightBarCollapsed = false;let isLeftBarCollapsed = false;let buttonsAdded = false;let layoutInterval;// Function to get the target element for grid layoutfunction getGridTargetElement() {return document.querySelector('#workbench-layout main > div > div:nth-child(2) > div > div:nth-child(1)');}// Function to set the layout to 4x1function setLayout4x1() {const imageContainer = getGridTargetElement();if (imageContainer) {imageContainer.style.setProperty('--grid-cols', '4');imageContainer.style.setProperty('--grid-rows', '1');layoutMode = LAYOUT_MODES.FOUR_BY_ONE;localStorage.setItem('pixai-layout', LAYOUT_MODES.FOUR_BY_ONE);}}// Function to set the layout to 2x2function setLayout2x2() {const imageContainer = getGridTargetElement();if (imageContainer) {imageContainer.style.setProperty('--grid-cols', '2');imageContainer.style.setProperty('--grid-rows', '2');layoutMode = LAYOUT_MODES.TWO_BY_TWO;localStorage.setItem('pixai-layout', LAYOUT_MODES.TWO_BY_TWO);}}// Function to reapply the current layoutfunction reapplyLayout() {switch (layoutMode) {case LAYOUT_MODES.FOUR_BY_ONE:setLayout4x1();break;case LAYOUT_MODES.TWO_BY_TWO:setLayout2x2();break;}}// Function to toggle between layoutsfunction toggleLayout() {if (layoutMode === LAYOUT_MODES.FOUR_BY_ONE) {setLayout2x2();} else {setLayout4x1();}updateLayoutButtonText();}// Function to update the layout button text to reflect the current modefunction updateLayoutButtonText() {const toggleLayoutButton = document.querySelector('#pixai-toggle-layout-button');if (toggleLayoutButton) {toggleLayoutButton.textContent = `Layout: ${layoutMode.toUpperCase()}`;}}// Function to set right bar width to zerofunction setRightBarWidthToZero() {const workbenchLayout = document.querySelector('#workbench-layout');if (workbenchLayout) {workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 0px';isRightBarCollapsed = true;}}// Function to restore the original width of the right barfunction restoreRightBarWidth() {const workbenchLayout = document.querySelector('#workbench-layout');if (workbenchLayout) {workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 380px';isRightBarCollapsed = false;}}// Function to toggle the right bar's visibilityfunction toggleRightBar() {if (isRightBarCollapsed) {restoreRightBarWidth();} else {setRightBarWidthToZero();}}// Function to set left bar width to zerofunction setLeftBarWidthToZero() {const leftBar = document.querySelector('#workbench-layout > div:nth-child(2) > div');if (leftBar) {leftBar.style.width = '0px';leftBar.style.minWidth = '0px';isLeftBarCollapsed = true;}}// Function to restore the original width of the left barfunction restoreLeftBarWidth() {const leftBar = document.querySelector('#workbench-layout > div:nth-child(2) > div');if (leftBar) {leftBar.style.width = '7rem';leftBar.style.minWidth = '7rem';isLeftBarCollapsed = false;}}// Function to toggle the left bar's visibilityfunction toggleLeftBar() {if (isLeftBarCollapsed) {restoreLeftBarWidth();} else {setLeftBarWidthToZero();}}// Function to handle Ctrl+Enter key press for generating imagesfunction handleCtrlEnter(event) {if (event.ctrlKey && event.key === 'Enter') {const generateButton = document.querySelector('[data-tutorial-target="generate-button"]');if (generateButton) {generateButton.click();}}}// Function to enable Ctrl+Enter for generating imagesfunction enableCtrlEnter() {if (!isCtrlEnterEnabled) {document.addEventListener('keydown', handleCtrlEnter);isCtrlEnterEnabled = true;localStorage.setItem('pixai-ctrl-enter', 'enabled');}}// Function to disable Ctrl+Enter for generating imagesfunction disableCtrlEnter() {if (isCtrlEnterEnabled) {document.removeEventListener('keydown', handleCtrlEnter);isCtrlEnterEnabled = false;localStorage.setItem('pixai-ctrl-enter', 'disabled');}}// Function to toggle Ctrl+Enter featurefunction toggleCtrlEnter() {if (isCtrlEnterEnabled) {disableCtrlEnter();} else {enableCtrlEnter();}}// Function to add the buttonsfunction addButtons() {if (buttonsAdded) return;// Create button container for right sideconst buttonContainer = document.createElement('div');buttonContainer.id = 'pixai-ui-helpers-buttons';buttonContainer.style.position = 'fixed';buttonContainer.style.top = '0';buttonContainer.style.right = '0';buttonContainer.style.zIndex = '1000';buttonContainer.style.display = 'flex';buttonContainer.style.flexDirection = 'row';buttonContainer.style.gap = '5px';buttonContainer.style.paddingTop = '10px';// Button stylesconst buttonStyle = {display: 'flex',justifyContent: 'center',alignItems: 'center',backgroundColor: 'transparent',color: 'white',fontFamily: 'Inter, sans-serif',fontSize: '0.75rem',fontWeight: '500',textShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',padding: '0.5rem 1rem',border: 'none',borderRadius: '0.25rem',cursor: 'pointer',transition: 'background-color 0.3s',};// Create toggle layout buttonconst toggleLayoutButton = document.createElement('button');toggleLayoutButton.id = 'pixai-toggle-layout-button';toggleLayoutButton.textContent = `Layout: ${layoutMode.toUpperCase()}`;Object.assign(toggleLayoutButton.style, buttonStyle);toggleLayoutButton.onclick = toggleLayout;// Create toggle right bar buttonconst toggleRightBarButton = document.createElement('button');toggleRightBarButton.textContent = 'Toggle Right Bar';Object.assign(toggleRightBarButton.style, buttonStyle);toggleRightBarButton.onclick = toggleRightBar;// Create toggle Ctrl+Enter buttonconst toggleCtrlEnterButton = document.createElement('button');toggleCtrlEnterButton.textContent = isCtrlEnterEnabled ? 'Disable Ctrl+Enter' : 'Enable Ctrl+Enter';Object.assign(toggleCtrlEnterButton.style, buttonStyle);toggleCtrlEnterButton.onclick = function() {toggleCtrlEnter();toggleCtrlEnterButton.textContent = isCtrlEnterEnabled ? 'Disable Ctrl+Enter' : 'Enable Ctrl+Enter';};// Append buttons to right containerbuttonContainer.appendChild(toggleCtrlEnterButton);buttonContainer.appendChild(toggleLayoutButton);buttonContainer.appendChild(toggleRightBarButton);// Append button container to bodydocument.body.appendChild(buttonContainer);// Extend the clickable area of the right buttonsbuttonContainer.style.paddingTop = '0';buttonContainer.style.height = '40px';buttonContainer.style.alignItems = 'center';// Create button container for left sideconst leftButtonContainer = document.createElement('div');leftButtonContainer.id = 'pixai-ui-helpers-left-buttons';leftButtonContainer.style.position = 'fixed';leftButtonContainer.style.top = '0';leftButtonContainer.style.left = '0';leftButtonContainer.style.zIndex = '1000';leftButtonContainer.style.display = 'flex';leftButtonContainer.style.flexDirection = 'column';leftButtonContainer.style.paddingTop = '10px';// Create toggle left bar buttonconst toggleLeftBarButton = document.createElement('button');toggleLeftBarButton.textContent = 'Toggle Left Bar';Object.assign(toggleLeftBarButton.style, buttonStyle);toggleLeftBarButton.onclick = toggleLeftBar;// Append button to left containerleftButtonContainer.appendChild(toggleLeftBarButton);// Extend the clickable area of the left buttonleftButtonContainer.style.paddingTop = '0';leftButtonContainer.style.height = '40px';leftButtonContainer.style.alignItems = 'center';// Append left button container to bodydocument.body.appendChild(leftButtonContainer);buttonsAdded = true;// Start interval to reapply layout every 0.1 secondslayoutInterval = setInterval(reapplyLayout, 100);// Apply initial settings based on saved preferencesreapplyLayout();if (isCtrlEnterEnabled) {enableCtrlEnter();}}// Function to remove the buttons and clear the intervalfunction removeButtons() {const buttonContainer = document.querySelector('#pixai-ui-helpers-buttons');const leftButtonContainer = document.querySelector('#pixai-ui-helpers-left-buttons');if (buttonContainer) {buttonContainer.remove();buttonsAdded = false;}if (leftButtonContainer) {leftButtonContainer.remove();buttonsAdded = false;}if (layoutInterval) {clearInterval(layoutInterval);layoutInterval = null;}}// Function to monitor URL changes and add/remove buttons accordinglyfunction monitorURLChanges() {const currentURL = window.location.href;if (currentURL.includes('/generator/')) {addButtons();} else {removeButtons();disableCtrlEnter();  // Ensure Ctrl+Enter is disabled when leaving the page}}// Monitor for history changes (when navigating between pages using internal links)window.addEventListener('popstate', monitorURLChanges);// Monitor for pushState changes (when navigating between pages using internal links)const originalPushState = history.pushState;history.pushState = function() {originalPushState.apply(this, arguments);monitorURLChanges();};// Initial check to add/remove buttons based on the current pagemonitorURLChanges();})();