Image generation: fix small image on mobile, novelai.net

11/6/2022, 8:33:38 PM
当前为 2022-11-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Image generation: fix small image on mobile, novelai.net
// @namespace   Violentmonkey Scripts
// @match       https://novelai.net/image
// @grant       none
// @version     1.0
// @author      -
// @description 11/6/2022, 8:33:38 PM
// @license MIT
// ==/UserScript==

console.log('NAI image generation size fix loaded');

function setNativeValue(element, value) {
    const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
    const prototype = Object.getPrototypeOf(element);
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

    if (valueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value);
    } else {
        valueSetter.call(element, value);
    }

    element.dispatchEvent(new Event('input', {bubbles: true}));
}

function setSaveButtonsPositionFixed(originalImage) {
    const seedButton = originalImage.nextElementSibling.nextElementSibling;
    seedButton.style.position = 'fixed';
    const saveButtons = seedButton.nextElementSibling;
    saveButtons.style.position = 'fixed';
}

function createNewInput() {
    const input = document.getElementById('prompt-input-0');
    const inputCopy = input.cloneNode(true);
    // On change of input copy, copy value to original input via change event
    inputCopy.onchange = function () {
        setNativeValue(input, inputCopy.value);
    }
    return inputCopy;
}

function createNewGenerateButton() {
    const generateButton = Array.from(document.getElementsByTagName('button')).filter((button) => button.innerText.includes('Generate'))[0];
    const generateButtonCopy = generateButton.cloneNode(true);
    // On click trigger click on generate button
    generateButtonCopy.addEventListener('click', () => {
        generateButton.click();
    });
    // Center horizontally
    generateButtonCopy.style.margin = '0 auto';
    return generateButtonCopy;
}

function insertNewElements(originalImage) {
    // Find div with flex direction 'column-reverse'
    const divs = Array.from(document.getElementsByTagName('div')).filter((div) => {
        const styles = getComputedStyle(div);
        return styles.flexDirection === 'column-reverse' && styles.paddingTop === '40px';
    });
    const container = divs.length > 0 ? divs[0] : null;

    if (container) {
        // Check if there is no element with id 'copied-image'
        if (!document.getElementById('copied-image')) {
            const newImg = document.createElement('img');
            newImg.id = 'copied-image';
            newImg.src = originalImage.src;
            newImg.alt = originalImage.alt;
            newImg.style.width = '100vw';
            document.getElementById('__next').before(newImg);
            originalImage.style.display = 'none';

            setSaveButtonsPositionFixed(originalImage);

            const inputCopy = createNewInput();
            newImg.after(inputCopy);
            const generateButtonCopy = createNewGenerateButton();
            inputCopy.after(generateButtonCopy);
        }
    }
}

function findOriginalImage() {
    // Find img with src starting with 'blob'
    const imgs = Array.from(document.getElementsByTagName('img')).filter((img) => img.src.startsWith('blob') && img.alt.length > 0);
    if (imgs.length > 0) {
        return imgs.length > 1 ? imgs[1] : imgs[0];
    }
}

const interval = setInterval(function () {
    const img = findOriginalImage();
    if(img) {
        if (!document.getElementById('copied-image')) {
            insertNewElements(img);
        } else {
            // Update new image with latest original image source
            if (document.getElementById('copied-image').src !== img.src) {
                document.getElementById('copied-image').src = img.src;
            }
        }
    }
}, 500);
欢迎访问Greasy Fork镜像
