Copy 6 mini images to clipboard
// ==UserScript==
// @name Dall-e-2 Copy Button Userscript
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Copy 6 mini images to clipboard
// @author Jonathan, shoutout to will
// @match https://labs.openai.com/e/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// @licence CC
// ==/UserScript==
(function() {
'use strict';
const addBtn = function() {
const node = document.getElementsByClassName('task-page-generations')[0];
const makeImage = function() {
console.log('copy button clicked');
const canvas = document.createElement('canvas');
canvas.id = "copy-canvas";
const imSize = 400;
const margin = 8
canvas.width = 3*imSize + (4*margin);
canvas.height =2*imSize + (2*margin) + 50;
const body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
const images = document.getElementsByClassName('generated-image');
const sig = document.getElementsByClassName('image-signature')[0];
for(var i = 0; i < 6; i++) {
const img = images.item(i).firstChild;
const x = (imSize * i + (i%3*margin)) % (3*imSize) + margin;
const y = margin+ (i<3?0:imSize + margin);
ctx.drawImage(img, x, y, imSize, imSize);
ctx.translate(x+imSize-80, y+imSize-16);
for(var p=0;p<sig.children.length;p++) {
const pp = sig.children[p]
const path = new Path2D(pp.getAttribute('d'));
ctx.fillStyle = pp.getAttribute('fill');
ctx.fill(path);
}
ctx.setTransform(1,0,0,1,0,0);
}
ctx.fillStyle = "black";
ctx.font = "12px Charter, Georgia";
ctx.fillText("DALL·E - " + document.getElementsByClassName('image-prompt-input')[0].value, 16, canvas.height-42+12);
canvas.toBlob(function(blob) {
const item = new ClipboardItem({'image/png': blob });
navigator.clipboard.write([item]);
})
document.getElementById("copy-canvas").outerHTML = "";
};
const saveAll = function() {
for(let i = 0; i < 6; i++) {
document.getElementsByClassName("task-page-quick-actions-button")[i].click();
document.getElementsByClassName("menu-item menu-item-selectable")[3].click();
}
};
const rowDiv = document.createElement('div');
rowDiv.style.cssText = 'align-items: horizontal; align-self: center; flex: auto; align-items: center; padding-bottom: 10px; display: flex; flex-direction: row;'
node.prepend(rowDiv);
const mkBtn = function(txt, id) {
const btn = document.createElement('div');
btn.innerHTML = `<button id="${id}" class="btn btn-medium btn-filled btn-secondary" type="button" aria-haspopup="true" aria-expanded="false"><span class="btn-label-wrap"><span class="btn-label-inner">${txt}</span></span></button>`;
rowDiv.prepend(btn);
return btn;
}
const btnCopy = mkBtn('Copy', 'btn-copy')
const btnSave = mkBtn('Save', 'btn-save')
btnSave.style['padding-right'] = '10px';
btnSave.addEventListener('click', saveAll);
btnCopy.addEventListener('click', makeImage);
}
setInterval(function() {
// if task-page-generations-grid is on the page, and the buttons are not, add them
if(document.getElementsByClassName("task-page-quick-actions-button").length == 6) {
if(!document.getElementById('btn-copy')) {
addBtn();
}
}
},500);
})();