Helpers for PixAI: Toggle between 4x1 and 2x2 layouts for the image grid and toggle the visibility of the right sidebar.
目前為
// ==UserScript==
// @name PixAI UI Helpers
// @namespace http://yourname.tampermonkey.net/
// @version 1.3
// @description Helpers for PixAI: Toggle between 4x1 and 2x2 layouts for the image grid and toggle the visibility of the right sidebar.
// @author Yada
// @match https://pixai.art/generator/*
// @icon https://pixai.art/favicon.ico
// @grant none
// @license MIT
// @supportURL http://yoursupporturl.com
// ==/UserScript==
(function() {
'use strict';
let is2x2Layout = false;
let isRightBarCollapsed = false;
// Function to get the target element for grid layout
function getGridTargetElement() {
return document.querySelector('#workbench-layout main > div > div:nth-child(2) > div > div:nth-child(1)');
}
// Function to set the layout to 4x1
function setLayout4x1() {
const imageContainer = getGridTargetElement();
if (imageContainer) {
imageContainer.style.setProperty('--grid-cols', '4');
imageContainer.style.setProperty('--grid-rows', '1');
is2x2Layout = false;
}
}
// Function to set the layout to 2x2
function setLayout2x2() {
const imageContainer = getGridTargetElement();
if (imageContainer) {
imageContainer.style.setProperty('--grid-cols', '2');
imageContainer.style.setProperty('--grid-rows', '2');
is2x2Layout = true;
}
}
// Function to toggle between layouts
function toggleLayout() {
if (is2x2Layout) {
setLayout4x1();
} else {
setLayout2x2();
}
}
// Function to set right bar width to zero
function 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 bar
function 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 visibility
function toggleRightBar() {
if (isRightBarCollapsed) {
restoreRightBarWidth();
} else {
setRightBarWidthToZero();
}
}
// Create button container
const buttonContainer = document.createElement('div');
buttonContainer.style.position = 'fixed';
buttonContainer.style.top = '10px';
buttonContainer.style.right = '10px';
buttonContainer.style.zIndex = '1000';
buttonContainer.style.display = 'flex';
buttonContainer.style.flexDirection = 'row';
buttonContainer.style.gap = '5px';
// Button styles
const 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.25rem 0.5rem',
border: 'none',
borderRadius: '0.25rem',
cursor: 'pointer',
transition: 'background-color 0.3s',
};
// Create toggle layout button
const toggleLayoutButton = document.createElement('button');
toggleLayoutButton.textContent = 'Toggle Image Layout';
Object.assign(toggleLayoutButton.style, buttonStyle);
toggleLayoutButton.onclick = toggleLayout;
// Create toggle right bar button
const toggleRightBarButton = document.createElement('button');
toggleRightBarButton.textContent = 'Toggle Right Bar';
Object.assign(toggleRightBarButton.style, buttonStyle);
toggleRightBarButton.onclick = toggleRightBar;
// Append buttons to container
buttonContainer.appendChild(toggleLayoutButton);
buttonContainer.appendChild(toggleRightBarButton);
// Append button container to body
document.body.appendChild(buttonContainer);
// Set initial layout based on current grid settings
const initialGridContainer = getGridTargetElement();
if (initialGridContainer && initialGridContainer.style.getPropertyValue('--grid-cols') === '4') {
is2x2Layout = false;
} else {
is2x2Layout = true;
}
// Set initial state for the right bar
const workbenchLayout = document.querySelector('#workbench-layout');
if (workbenchLayout && workbenchLayout.style.gridTemplateColumns.includes('0px')) {
isRightBarCollapsed = true;
} else {
isRightBarCollapsed = false;
}
})();