488 lines
13 KiB
JavaScript
488 lines
13 KiB
JavaScript
const openpanorama = {
|
|
frame: null
|
|
};
|
|
|
|
let galImageDisp
|
|
|
|
function panorama_here(phtml, mode, buttonId) {
|
|
return async () => {
|
|
try {
|
|
let tabContext = get_uiCurrentTab().innerText
|
|
let containerName
|
|
switch (tabContext) {
|
|
case "txt2img":
|
|
containerName = "#txt2img_gallery_container"
|
|
break;
|
|
case "img2img":
|
|
containerName = "#img2img_gallery_container"
|
|
break;
|
|
case "Extras":
|
|
containerName = "#extras_gallery_container"
|
|
break;
|
|
case "Image Browser": {
|
|
tabContext = "IB_" + gradioApp().querySelector("#image_browser_tabs_container button.bg-white").innerText
|
|
switch (tabContext) {
|
|
case "IB_txt2img": containerName = "#image_browser_tab_txt2img_image_browser_gallery"
|
|
break;
|
|
case "IB_img2img": containerName = "#image_browser_tab_img2img_image_browser_gallery"
|
|
break;
|
|
case "IB_txt2img-grids": containerName = "#image_browser_tab_txt2img-grids_image_browser_gallery"
|
|
break;
|
|
case "IB_img2img-grids": containerName = "#image_browser_tab_img2img-grids_image_browser_gallery"
|
|
break;
|
|
case "IB_Extras": containerName = "#image_browser_tab_extras_image_browser_gallery"
|
|
break;
|
|
case "IB_Favorites": containerName = "#image_browser_tab_favorites_image_browser_gallery"
|
|
break;
|
|
default: {
|
|
console.warn("PanoramaViewer: Unsupported Image Browser gallery: " + tabContext)
|
|
return
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
default: {
|
|
console.warn("PanoramaViewer: Unsupported gallery: " + tabContext)
|
|
return
|
|
}
|
|
}
|
|
|
|
let galviewer = gradioApp().querySelector("#panogalviewer-iframe" + tabContext)
|
|
let galImage = gradioApp().querySelector(containerName + " div > img")
|
|
const galImagesAll = gradioApp().querySelectorAll(containerName + ' .grid-container button img:not([src*="grid-"][src$=".png"])')
|
|
const grids = gradioApp().querySelectorAll(containerName + ' .grid-container button img:is([src*="grid-"][src$=".png"])')
|
|
const numGrids = grids ? grids.length : 0
|
|
|
|
const galImagesAllsrc = []
|
|
|
|
for (var i = 0; i < galImagesAll.length; i++) {
|
|
let p = galImagesAll[i].getAttribute('src')
|
|
galImagesAllsrc.push(p);
|
|
}
|
|
|
|
if (galviewer) {
|
|
galviewer.contentWindow.postMessage({
|
|
type: "panoramaviewer/destroy"
|
|
})
|
|
galviewer.parentElement.removeChild(galviewer)
|
|
|
|
if (galImage) galImage.style.display = galImageDisp
|
|
return
|
|
}
|
|
|
|
/* close mimics to open a none-iframe */
|
|
if (!phtml) return
|
|
|
|
/* if nothing selecte, just display the 1st one, if any */
|
|
if (!galImage && galImagesAll.length > 0) {
|
|
galImagesAll[0].click()
|
|
setTimeout(() => {
|
|
panorama_here(phtml, mode, buttonId)()
|
|
return
|
|
}, 200);
|
|
return
|
|
}
|
|
|
|
// select only single viewed gallery image, not the small icons in the overview
|
|
if (!galImage) return
|
|
|
|
function getIndex() {
|
|
const basename= galImage.src.match(/\/([^\/]+)$/)[1]
|
|
for (var i = 0; i < galImagesAll.length; i++) {
|
|
if (basename === galImagesAll[i].getAttribute('src').replace(/^.*[\\\/]/, '')) {
|
|
return i
|
|
}
|
|
}
|
|
return 0
|
|
}
|
|
|
|
const galImageIndex = getIndex()
|
|
|
|
let parent = galImage.parentElement
|
|
//let parent = gradioApp().querySelector(containerName+" > div") // omg
|
|
|
|
let iframe = document.createElement('iframe')
|
|
iframe.src = phtml
|
|
iframe.id = "panogalviewer-iframe" + tabContext
|
|
iframe.classList += "panogalviewer-iframe"
|
|
iframe.setAttribute("panoimage", galImagesAllsrc[galImageIndex])
|
|
iframe.setAttribute("panoMode", mode)
|
|
iframe.setAttribute("panoGalItems", JSON.stringify(galImagesAllsrc))
|
|
parent.appendChild(iframe)
|
|
galImageDisp = galImage.style.display
|
|
galImage.style.display = "none"
|
|
}
|
|
catch
|
|
{ }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function panorama_send_video(dataURL, name = "Embed Resource") {
|
|
gradioApp().getElementById("panoviewer-iframe").contentWindow.postMessage({
|
|
type: "panoramaviewer/set-video",
|
|
image: {
|
|
dataURL: dataURL,
|
|
resourceName: name,
|
|
},
|
|
});
|
|
|
|
}
|
|
|
|
function panorama_send_image(dataURL, name = "Embed Resource") {
|
|
openpanorama.frame.contentWindow.postMessage({
|
|
type: "panoramaviewer/set-panorama",
|
|
image: {
|
|
dataURL: dataURL,
|
|
resourceName: name,
|
|
},
|
|
});
|
|
}
|
|
|
|
function panorama_change_mode(mode) {
|
|
return () => {
|
|
openpanorama.frame.contentWindow.postMessage({
|
|
type: "panoramaviewer/change-mode",
|
|
mode: mode
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
function panorama_change_container(name) {
|
|
openpanorama.frame.contentWindow.postMessage({
|
|
type: "panoramaviewer/set-container",
|
|
container: {
|
|
name
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
function panorama_gototab(tabname = "Panorama Viewer", tabsId = "tabs") {
|
|
Array.from(
|
|
gradioApp().querySelectorAll(`#${tabsId} > div:first-child button`)
|
|
).forEach((button) => {
|
|
if (button.textContent.trim() === tabname) {
|
|
button.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
async function panorama_get_image_from_gallery(warnOnNoSelect) {
|
|
const curGal = gradioApp().querySelector('#tabs button.selected').innerText // get_uiCurrentTab()
|
|
|
|
const buttons = gradioApp().querySelectorAll("#" + curGal + '_gallery .grid-container button img:not([src*="grid-"][src$=".png"])') // skip grid-img
|
|
let button = gradioApp().querySelector("#" + curGal + "_gallery .grid-container button.selected img")
|
|
|
|
if (!button && warnOnNoSelect && buttons.length > 1) {
|
|
alert("This action requires you have explicitely selected an image from the gallery")
|
|
return null
|
|
}
|
|
if (!button) button = buttons[0];
|
|
|
|
if (!button)
|
|
throw new Error("[panorama_viewer] No image available in the gallery");
|
|
|
|
return button.src
|
|
}
|
|
|
|
function panorama_send_gallery(name = "Embed Resource") {
|
|
panorama_get_image_from_gallery()
|
|
.then((dataURL) => {
|
|
// Send to panorama-viewer
|
|
console.info("[panorama viewer] Using URL: " + dataURL)
|
|
// Change Tab
|
|
panorama_gototab();
|
|
panorama_send_image(dataURL, name);
|
|
|
|
})
|
|
.catch((error) => {
|
|
console.warn("[panoramaviewer] No image selected to send to panorama viewer");
|
|
});
|
|
}
|
|
|
|
function openpanoramajs() {
|
|
const frame = gradioApp().getElementById("panoviewer-iframe");
|
|
openpanorama.frame = frame;
|
|
}
|
|
|
|
function setPanoFromDroppedFile(file) {
|
|
reader = new FileReader();
|
|
console.log(file)
|
|
reader.onload = function (event) {
|
|
if (panoviewer.adapter.hasOwnProperty("video")) {
|
|
panoviewer.setPanorama({ source: event.target.result })
|
|
} else {
|
|
panoviewer.setPanorama(event.target.result)
|
|
}
|
|
}
|
|
|
|
/* comes from upload button */
|
|
if (file.hasOwnProperty("data")) {
|
|
panoviewer.setPanorama({ source: file.data })
|
|
}
|
|
else {
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
|
|
function dropHandler(ev) {
|
|
// File(s) dropped
|
|
// Prevent default behavior (Prevent file from being opened)
|
|
ev.preventDefault();
|
|
|
|
if (ev.dataTransfer.items) {
|
|
// Use DataTransferItemList interface to access the file(s)
|
|
[...ev.dataTransfer.items].forEach((item, i) => {
|
|
|
|
// If dropped items aren't files, reject them
|
|
if (item.kind === "file") {
|
|
const file = item.getAsFile();
|
|
console.log(`… file[${i}].name = ${file.name}`);
|
|
if (i === 0) { setPanoFromDroppedFile(file) }
|
|
|
|
}
|
|
});
|
|
} else {
|
|
// Use DataTransfer interface to access the file(s)
|
|
[...ev.dataTransfer.files].forEach((file, i) => {
|
|
if (i === 0) { setPanoFromDroppedFile(file) }
|
|
console.log(`… file[${i}].name = ${file.name}`);
|
|
});
|
|
}
|
|
}
|
|
|
|
function dragOverHandler(ev) {
|
|
// Prevent default behavior (Prevent file from being opened)
|
|
ev.preventDefault();
|
|
}
|
|
|
|
|
|
function onPanoModeChange(x) {
|
|
console.log("Panorama Viewer: PanMode change to: " + x.target.value)
|
|
}
|
|
|
|
|
|
function onGalleryDrop(ev) {
|
|
|
|
const triggerGradio = (g, file) => {
|
|
reader = new FileReader();
|
|
|
|
if (!file instanceof Blob) {
|
|
const blob = new Blob([file], { type: file.type });
|
|
file = blob
|
|
}
|
|
|
|
reader.onload = function (event) {
|
|
g.value = event.target.result
|
|
g.dispatchEvent(new Event('input'));
|
|
}
|
|
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
ev.preventDefault();
|
|
|
|
let g = gradioApp().querySelector("div[id^='gallery_input_ondrop'] textarea")
|
|
|
|
if (ev.dataTransfer.items && g) {
|
|
// Use DataTransferItemList interface to access the file(s)
|
|
[...ev.dataTransfer.items].forEach((item, i) => {
|
|
|
|
// If dropped items aren't files, reject them
|
|
if (item.kind === "file") {
|
|
const file = item.getAsFile();
|
|
console.log(`… file[${i}].name = ${file.name}`);
|
|
if (i === 0) { triggerGradio(g, file) }
|
|
|
|
}
|
|
});
|
|
} else {
|
|
// Use DataTransfer interface to access the file(s)
|
|
[...ev.dataTransfer.files].forEach((file, i) => {
|
|
if (i === 0) { triggerGradio(g, file) }
|
|
console.log(`… file[${i}].name = ${file.name}`);
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const onload = () => {
|
|
|
|
if (typeof gradioApp === "function") {
|
|
|
|
let target = gradioApp().getElementById("txt2img_results")
|
|
if (!target) {
|
|
setTimeout(onload, 3000);
|
|
return
|
|
}
|
|
target.addEventListener("drop", onGalleryDrop)
|
|
target.addEventListener("dragover", (event) => {
|
|
event.preventDefault();
|
|
});
|
|
|
|
// completely hide the transfer textbox and its container
|
|
let alldrops = gradioApp().querySelectorAll("div[id^='gallery_input_ondrop']")
|
|
alldrops.forEach((e) => {
|
|
e.parentElement.style.display = "none"
|
|
})
|
|
|
|
if (gradioApp().getElementById("panoviewer-iframe")) {
|
|
openpanoramajs();
|
|
} else {
|
|
setTimeout(onload, 3000);
|
|
}
|
|
|
|
/* do the toolbox tango */
|
|
gradioApp().querySelectorAll("#PanoramaViewer_ToolBox div ~ div").forEach((e) => {
|
|
|
|
const options = {
|
|
attributes: true
|
|
}
|
|
|
|
function callback(mutationList, observer) {
|
|
mutationList.forEach(function (mutation) {
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
mutation.target.parentElement.style.flex = target.classList.contains("!hidden") ? "100%" : "auto"
|
|
}
|
|
})
|
|
}
|
|
|
|
const observer = new MutationObserver(callback)
|
|
observer.observe(e, options)
|
|
})
|
|
}
|
|
else {
|
|
setTimeout(onload, 3000);
|
|
}
|
|
};
|
|
onload();
|
|
});
|
|
|
|
|
|
/* routine based on jerx/github, gpl3 */
|
|
function convertto_cubemap() {
|
|
|
|
panorama_get_image_from_gallery(true)
|
|
.then((dataURL) => {
|
|
if (!dataURL) return
|
|
const canvas = document.createElement('canvas')
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
const outCanvas = document.createElement('canvas')
|
|
|
|
const settings = {
|
|
cubeRotation: "180",
|
|
interpolation: "lanczos",
|
|
format: "png"
|
|
};
|
|
|
|
const facePositions = {
|
|
pz: { x: 1, y: 1 },
|
|
nz: { x: 3, y: 1 },
|
|
px: { x: 2, y: 1 },
|
|
nx: { x: 0, y: 1 },
|
|
py: { x: 1, y: 0 },
|
|
ny: { x: 1, y: 2 },
|
|
};
|
|
|
|
const cubeOrgX = 4
|
|
const cubeOrgY = 3
|
|
|
|
function loadImage(dataURL) {
|
|
|
|
const img = new Image();
|
|
img.src = dataURL
|
|
|
|
img.addEventListener('load', () => {
|
|
const { width, height } = img;
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
ctx.drawImage(img, 0, 0);
|
|
const data = ctx.getImageData(0, 0, width, height);
|
|
|
|
outCanvas.width = width
|
|
outCanvas.height = (width / cubeOrgX) * cubeOrgY
|
|
processImage(data);
|
|
});
|
|
}
|
|
|
|
let finished = 0;
|
|
let workers = [];
|
|
|
|
function processImage(data) {
|
|
for (let worker of workers) {
|
|
worker.terminate();
|
|
}
|
|
for (let [faceName, position] of Object.entries(facePositions)) {
|
|
renderFace(data, faceName);
|
|
}
|
|
}
|
|
|
|
function renderFace(data, faceName) {
|
|
const options = {
|
|
type: "panorama/",
|
|
data: data,
|
|
face: faceName,
|
|
rotation: Math.PI * settings.cubeRotation / 180,
|
|
interpolation: settings.interpolation,
|
|
};
|
|
|
|
let worker
|
|
try {
|
|
throw new Error();
|
|
} catch (error) {
|
|
const stack = error.stack;
|
|
const match = stack.match(/file=.*javascript\//)
|
|
if (match) {
|
|
const scriptPath = window.location.href + match;
|
|
const workerPath = new URL('e2c.js', scriptPath).href;
|
|
worker = new Worker(workerPath);
|
|
}
|
|
else {
|
|
throw "no clue where the javascript worker file is hosted."
|
|
}
|
|
}
|
|
|
|
const placeTile = (data) => {
|
|
const ctx = outCanvas.getContext('2d');
|
|
ctx.putImageData(data.data.data,
|
|
facePositions[data.data.faceName].x * outCanvas.width / cubeOrgX,
|
|
facePositions[data.data.faceName].y * outCanvas.height / cubeOrgY)
|
|
|
|
finished++;
|
|
|
|
if (finished === 6) {
|
|
finished = 0;
|
|
workers = [];
|
|
|
|
outCanvas.toBlob(function (blob) {
|
|
if (blob instanceof Blob) {
|
|
data = { files: [blob] };
|
|
|
|
var event = document.createEvent('MouseEvent');
|
|
event.dataTransfer = data;
|
|
onGalleryDrop(event)
|
|
}
|
|
else {
|
|
console.log("no blob from toBlob?!")
|
|
}
|
|
}, 'image/png');
|
|
}
|
|
};
|
|
|
|
worker.onmessage = placeTile
|
|
worker.postMessage(options)
|
|
workers.push(worker)
|
|
}
|
|
|
|
loadImage(dataURL)
|
|
|
|
})
|
|
} |