313 lines
66 KiB
HTML
313 lines
66 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Generated using the ComfyUI Prompt Combinator nodes (https://github.com/lquesada/ComfyUI-Prompt-Combinator) -->
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Image Gallery</title>
|
|
<style>
|
|
html {
|
|
overflow-y: scroll;
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.header {
|
|
font-size: 70%;
|
|
text-align: right;
|
|
}
|
|
.buttons {
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
.button {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.button.selected {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.button.disabled {
|
|
background-color: #e0e0e0;
|
|
color: #a0a0a0;
|
|
}
|
|
.button.selected-disabled {
|
|
background-color: #ff6666;
|
|
color: white;
|
|
}
|
|
.image-container {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
.image-container img {
|
|
display: block;
|
|
}
|
|
.prompt {
|
|
margin-top: 20px;
|
|
}
|
|
.filename {
|
|
margin-top: 20px;
|
|
font-size: 80%;
|
|
}
|
|
.zoom-controls {
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
.zoom-controls input[type=range] {
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">Generated using the <a href="https://github.com/lquesada/ComfyUI-Prompt-Combinator">ComfyUI Prompt Combinator</a> nodes</div>
|
|
<div class="zoom-controls">
|
|
Zoom <input type="range" id="zoom-slider" min="10" max="300" value="100">
|
|
<button id="reset-zoom">Set to 100%</button>
|
|
<button id="auto-zoom-device">Fit device screen</button>
|
|
<button id="auto-zoom-window">Fit window</button>
|
|
</div>
|
|
<div id="button-container"></div>
|
|
<div class="image-container" id="image-container">
|
|
<img id="selected-image" src="">
|
|
<div class="prompt" id="image-prompt"></div>
|
|
<div class="filename" id="image-filename-container">(<a id="image-filename" href="" target="_blank"></a>)</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Fill these in from the node
|
|
const ids1 = ['colorful', 'black and white', 'psychedelic'];
|
|
const ids2 = ['picture', 'pencil', 'watercolor', 'cartoon', 'blueprint', '3d render'];
|
|
const ids3 = ['dog', 'man', 'monster', 'airplane'];
|
|
const ids4 = ['umbrella', 'icecream', 'book', 'flying'];
|
|
const ids5 = null;
|
|
const ids6 = null;
|
|
const ids7 = null;
|
|
const ids8 = null;
|
|
const fileprefix = "example_files/img-";
|
|
const filesuffix = ".webp";
|
|
const images = [{ id: "colorful-picture-dog-umbrella----", filename: "example_files/img-colorful-picture-dog-umbrella----.webp", prompt: "colorful picture of a dog holding an umbrella"},{ id: "colorful-picture-dog-icecream----", filename: "example_files/img-colorful-picture-dog-icecream----.webp", prompt: "colorful picture of a dog eating icecream"},{ id: "colorful-picture-dog-book----", filename: "example_files/img-colorful-picture-dog-book----.webp", prompt: "colorful picture of a dog reading a book"},{ id: "colorful-picture-dog-flying----", filename: "example_files/img-colorful-picture-dog-flying----.webp", prompt: "colorful picture of a dog flying through the sky"},{ id: "colorful-picture-man-umbrella----", filename: "example_files/img-colorful-picture-man-umbrella----.webp", prompt: "colorful picture of a man holding an umbrella"},{ id: "colorful-picture-man-icecream----", filename: "example_files/img-colorful-picture-man-icecream----.webp", prompt: "colorful picture of a man eating icecream"},{ id: "colorful-picture-man-book----", filename: "example_files/img-colorful-picture-man-book----.webp", prompt: "colorful picture of a man reading a book"},{ id: "colorful-picture-man-flying----", filename: "example_files/img-colorful-picture-man-flying----.webp", prompt: "colorful picture of a man flying through the sky"},{ id: "colorful-picture-monster-umbrella----", filename: "example_files/img-colorful-picture-monster-umbrella----.webp", prompt: "colorful picture of a monster holding an umbrella"},{ id: "colorful-picture-monster-icecream----", filename: "example_files/img-colorful-picture-monster-icecream----.webp", prompt: "colorful picture of a monster eating icecream"},{ id: "colorful-picture-monster-book----", filename: "example_files/img-colorful-picture-monster-book----.webp", prompt: "colorful picture of a monster reading a book"},{ id: "colorful-picture-monster-flying----", filename: "example_files/img-colorful-picture-monster-flying----.webp", prompt: "colorful picture of a monster flying through the sky"},{ id: "colorful-picture-airplane-umbrella----", filename: "example_files/img-colorful-picture-airplane-umbrella----.webp", prompt: "colorful picture of an airplane holding an umbrella"},{ id: "colorful-picture-airplane-icecream----", filename: "example_files/img-colorful-picture-airplane-icecream----.webp", prompt: "colorful picture of an airplane eating icecream"},{ id: "colorful-picture-airplane-book----", filename: "example_files/img-colorful-picture-airplane-book----.webp", prompt: "colorful picture of an airplane reading a book"},{ id: "colorful-picture-airplane-flying----", filename: "example_files/img-colorful-picture-airplane-flying----.webp", prompt: "colorful picture of an airplane flying through the sky"},{ id: "colorful-pencil-dog-umbrella----", filename: "example_files/img-colorful-pencil-dog-umbrella----.webp", prompt: "colorful simple pencil sketch of a dog holding an umbrella"},{ id: "colorful-pencil-dog-icecream----", filename: "example_files/img-colorful-pencil-dog-icecream----.webp", prompt: "colorful simple pencil sketch of a dog eating icecream"},{ id: "colorful-pencil-dog-book----", filename: "example_files/img-colorful-pencil-dog-book----.webp", prompt: "colorful simple pencil sketch of a dog reading a book"},{ id: "colorful-pencil-dog-flying----", filename: "example_files/img-colorful-pencil-dog-flying----.webp", prompt: "colorful simple pencil sketch of a dog flying through the sky"},{ id: "colorful-pencil-man-umbrella----", filename: "example_files/img-colorful-pencil-man-umbrella----.webp", prompt: "colorful simple pencil sketch of a man holding an umbrella"},{ id: "colorful-pencil-man-icecream----", filename: "example_files/img-colorful-pencil-man-icecream----.webp", prompt: "colorful simple pencil sketch of a man eating icecream"},{ id: "colorful-pencil-man-book----", filename: "example_files/img-colorful-pencil-man-book----.webp", prompt: "colorful simple pencil sketch of a man reading a book"},{ id: "colorful-pencil-man-flying----", filename: "example_files/img-colorful-pencil-man-flying----.webp", prompt: "colorful simple pencil sketch of a man flying through the sky"},{ id: "colorful-pencil-monster-umbrella----", filename: "example_files/img-colorful-pencil-monster-umbrella----.webp", prompt: "colorful simple pencil sketch of a monster holding an umbrella"},{ id: "colorful-pencil-monster-icecream----", filename: "example_files/img-colorful-pencil-monster-icecream----.webp", prompt: "colorful simple pencil sketch of a monster eating icecream"},{ id: "colorful-pencil-monster-book----", filename: "example_files/img-colorful-pencil-monster-book----.webp", prompt: "colorful simple pencil sketch of a monster reading a book"},{ id: "colorful-pencil-monster-flying----", filename: "example_files/img-colorful-pencil-monster-flying----.webp", prompt: "colorful simple pencil sketch of a monster flying through the sky"},{ id: "colorful-pencil-airplane-umbrella----", filename: "example_files/img-colorful-pencil-airplane-umbrella----.webp", prompt: "colorful simple pencil sketch of an airplane holding an umbrella"},{ id: "colorful-pencil-airplane-icecream----", filename: "example_files/img-colorful-pencil-airplane-icecream----.webp", prompt: "colorful simple pencil sketch of an airplane eating icecream"},{ id: "colorful-pencil-airplane-book----", filename: "example_files/img-colorful-pencil-airplane-book----.webp", prompt: "colorful simple pencil sketch of an airplane reading a book"},{ id: "colorful-pencil-airplane-flying----", filename: "example_files/img-colorful-pencil-airplane-flying----.webp", prompt: "colorful simple pencil sketch of an airplane flying through the sky"},{ id: "colorful-watercolor-dog-umbrella----", filename: "example_files/img-colorful-watercolor-dog-umbrella----.webp", prompt: "colorful watercolor painting of a dog holding an umbrella"},{ id: "colorful-watercolor-dog-icecream----", filename: "example_files/img-colorful-watercolor-dog-icecream----.webp", prompt: "colorful watercolor painting of a dog eating icecream"},{ id: "colorful-watercolor-dog-book----", filename: "example_files/img-colorful-watercolor-dog-book----.webp", prompt: "colorful watercolor painting of a dog reading a book"},{ id: "colorful-watercolor-dog-flying----", filename: "example_files/img-colorful-watercolor-dog-flying----.webp", prompt: "colorful watercolor painting of a dog flying through the sky"},{ id: "colorful-watercolor-man-umbrella----", filename: "example_files/img-colorful-watercolor-man-umbrella----.webp", prompt: "colorful watercolor painting of a man holding an umbrella"},{ id: "colorful-watercolor-man-icecream----", filename: "example_files/img-colorful-watercolor-man-icecream----.webp", prompt: "colorful watercolor painting of a man eating icecream"},{ id: "colorful-watercolor-man-book----", filename: "example_files/img-colorful-watercolor-man-book----.webp", prompt: "colorful watercolor painting of a man reading a book"},{ id: "colorful-watercolor-man-flying----", filename: "example_files/img-colorful-watercolor-man-flying----.webp", prompt: "colorful watercolor painting of a man flying through the sky"},{ id: "colorful-watercolor-monster-umbrella----", filename: "example_files/img-colorful-watercolor-monster-umbrella----.webp", prompt: "colorful watercolor painting of a monster holding an umbrella"},{ id: "colorful-watercolor-monster-icecream----", filename: "example_files/img-colorful-watercolor-monster-icecream----.webp", prompt: "colorful watercolor painting of a monster eating icecream"},{ id: "colorful-watercolor-monster-book----", filename: "example_files/img-colorful-watercolor-monster-book----.webp", prompt: "colorful watercolor painting of a monster reading a book"},{ id: "colorful-watercolor-monster-flying----", filename: "example_files/img-colorful-watercolor-monster-flying----.webp", prompt: "colorful watercolor painting of a monster flying through the sky"},{ id: "colorful-watercolor-airplane-umbrella----", filename: "example_files/img-colorful-watercolor-airplane-umbrella----.webp", prompt: "colorful watercolor painting of an airplane holding an umbrella"},{ id: "colorful-watercolor-airplane-icecream----", filename: "example_files/img-colorful-watercolor-airplane-icecream----.webp", prompt: "colorful watercolor painting of an airplane eating icecream"},{ id: "colorful-watercolor-airplane-book----", filename: "example_files/img-colorful-watercolor-airplane-book----.webp", prompt: "colorful watercolor painting of an airplane reading a book"},{ id: "colorful-watercolor-airplane-flying----", filename: "example_files/img-colorful-watercolor-airplane-flying----.webp", prompt: "colorful watercolor painting of an airplane flying through the sky"},{ id: "colorful-cartoon-dog-umbrella----", filename: "example_files/img-colorful-cartoon-dog-umbrella----.webp", prompt: "colorful animated cartoon still of a dog holding an umbrella"},{ id: "colorful-cartoon-dog-icecream----", filename: "example_files/img-colorful-cartoon-dog-icecream----.webp", prompt: "colorful animated cartoon still of a dog eating icecream"},{ id: "colorful-cartoon-dog-book----", filename: "example_files/img-colorful-cartoon-dog-book----.webp", prompt: "colorful animated cartoon still of a dog reading a book"},{ id: "colorful-cartoon-dog-flying----", filename: "example_files/img-colorful-cartoon-dog-flying----.webp", prompt: "colorful animated cartoon still of a dog flying through the sky"},{ id: "colorful-cartoon-man-umbrella----", filename: "example_files/img-colorful-cartoon-man-umbrella----.webp", prompt: "colorful animated cartoon still of a man holding an umbrella"},{ id: "colorful-cartoon-man-icecream----", filename: "example_files/img-colorful-cartoon-man-icecream----.webp", prompt: "colorful animated cartoon still of a man eating icecream"},{ id: "colorful-cartoon-man-book----", filename: "example_files/img-colorful-cartoon-man-book----.webp", prompt: "colorful animated cartoon still of a man reading a book"},{ id: "colorful-cartoon-man-flying----", filename: "example_files/img-colorful-cartoon-man-flying----.webp", prompt: "colorful animated cartoon still of a man flying through the sky"},{ id: "colorful-cartoon-monster-umbrella----", filename: "example_files/img-colorful-cartoon-monster-umbrella----.webp", prompt: "colorful animated cartoon still of a monster holding an umbrella"},{ id: "colorful-cartoon-monster-icecream----", filename: "example_files/img-colorful-cartoon-monster-icecream----.webp", prompt: "colorful animated cartoon still of a monster eating icecream"},{ id: "colorful-cartoon-monster-book----", filename: "example_files/img-colorful-cartoon-monster-book----.webp", prompt: "colorful animated cartoon still of a monster reading a book"},{ id: "colorful-cartoon-monster-flying----", filename: "example_files/img-colorful-cartoon-monster-flying----.webp", prompt: "colorful animated cartoon still of a monster flying through the sky"},{ id: "colorful-cartoon-airplane-umbrella----", filename: "example_files/img-colorful-cartoon-airplane-umbrella----.webp", prompt: "colorful animated cartoon still of an airplane holding an umbrella"},{ id: "colorful-cartoon-airplane-icecream----", filename: "example_files/img-colorful-cartoon-airplane-icecream----.webp", prompt: "colorful animated cartoon still of an airplane eating icecream"},{ id: "colorful-cartoon-airplane-book----", filename: "example_files/img-colorful-cartoon-airplane-book----.webp", prompt: "colorful animated cartoon still of an airplane reading a book"},{ id: "colorful-cartoon-airplane-flying----", filename: "example_files/img-colorful-cartoon-airplane-flying----.webp", prompt: "colorful animated cartoon still of an airplane flying through the sky"},{ id: "colorful-blueprint-dog-umbrella----", filename: "example_files/img-colorful-blueprint-dog-umbrella----.webp", prompt: "colorful blueprint in orthographic projection of a dog holding an umbrella"},{ id: "colorful-blueprint-dog-icecream----", filename: "example_files/img-colorful-blueprint-dog-icecream----.webp", prompt: "colorful blueprint in orthographic projection of a dog eating icecream"},{ id: "colorful-blueprint-dog-book----", filename: "example_files/img-colorful-blueprint-dog-book----.webp", prompt: "colorful blueprint in orthographic projection of a dog reading a book"},{ id: "colorful-blueprint-dog-flying----", filename: "example_files/img-colorful-blueprint-dog-flying----.webp", prompt: "colorful blueprint in orthographic projection of a dog flying through the sky"},{ id: "colorful-blueprint-man-umbrella----", filename: "example_files/img-colorful-blueprint-man-umbrella----.webp", prompt: "colorful blueprint in orthographic projection of a man holding an umbrella"},{ id: "colorful-blueprint-man-icecream----", filename: "example_files/img-colorful-blueprint-man-icecream----.webp", prompt: "colorful blueprint in orthographic projection of a man eating icecream"},{ id: "colorful-blueprint-man-book----", filename: "example_files/img-colorful-blueprint-man-book----.webp", prompt: "colorful blueprint in orthographic projection of a man reading a book"},{ id: "colorful-blueprint-man-flying----", filename: "example_files/img-colorful-blueprint-man-flying----.webp", prompt: "colorful blueprint in orthographic projection of a man flying through the sky"},{ id: "colorful-blueprint-monster-umbrella----", filename: "example_files/img-colorful-blueprint-monster-umbrella----.webp", prompt: "colorful blueprint in orthographic projection of a monster holding an umbrella"},{ id: "colorful-blueprint-monster-icecream----", filename: "example_files/img-colorful-blueprint-monster-icecream----.webp", prompt: "colorful blueprint in orthographic projection of a monster eating icecream"},{ id: "colorful-blueprint-monster-book----", filename: "example_files/img-colorful-blueprint-monster-book----.webp", prompt: "colorful blueprint in orthographic projection of a monster reading a book"},{ id: "colorful-blueprint-monster-flying----", filename: "example_files/img-colorful-blueprint-monster-flying----.webp", prompt: "colorful blueprint in orthographic projection of a monster flying through the sky"},{ id: "colorful-blueprint-airplane-umbrella----", filename: "example_files/img-colorful-blueprint-airplane-umbrella----.webp", prompt: "colorful blueprint in orthographic projection of an airplane holding an umbrella"},{ id: "colorful-blueprint-airplane-icecream----", filename: "example_files/img-colorful-blueprint-airplane-icecream----.webp", prompt: "colorful blueprint in orthographic projection of an airplane eating icecream"},{ id: "colorful-blueprint-airplane-book----", filename: "example_files/img-colorful-blueprint-airplane-book----.webp", prompt: "colorful blueprint in orthographic projection of an airplane reading a book"},{ id: "colorful-blueprint-airplane-flying----", filename: "example_files/img-colorful-blueprint-airplane-flying----.webp", prompt: "colorful blueprint in orthographic projection of an airplane flying through the sky"},{ id: "colorful-3d render-dog-umbrella----", filename: "example_files/img-colorful-3d render-dog-umbrella----.webp", prompt: "colorful 3d render of a dog holding an umbrella"},{ id: "colorful-3d render-dog-icecream----", filename: "example_files/img-colorful-3d render-dog-icecream----.webp", prompt: "colorful 3d render of a dog eating icecream"},{ id: "colorful-3d render-dog-book----", filename: "example_files/img-colorful-3d render-dog-book----.webp", prompt: "colorful 3d render of a dog reading a book"},{ id: "colorful-3d render-dog-flying----", filename: "example_files/img-colorful-3d render-dog-flying----.webp", prompt: "colorful 3d render of a dog flying through the sky"},{ id: "colorful-3d render-man-umbrella----", filename: "example_files/img-colorful-3d render-man-umbrella----.webp", prompt: "colorful 3d render of a man holding an umbrella"},{ id: "colorful-3d render-man-icecream----", filename: "example_files/img-colorful-3d render-man-icecream----.webp", prompt: "colorful 3d render of a man eating icecream"},{ id: "colorful-3d render-man-book----", filename: "example_files/img-colorful-3d render-man-book----.webp", prompt: "colorful 3d render of a man reading a book"},{ id: "colorful-3d render-man-flying----", filename: "example_files/img-colorful-3d render-man-flying----.webp", prompt: "colorful 3d render of a man flying through the sky"},{ id: "colorful-3d render-monster-umbrella----", filename: "example_files/img-colorful-3d render-monster-umbrella----.webp", prompt: "colorful 3d render of a monster holding an umbrella"},{ id: "colorful-3d render-monster-icecream----", filename: "example_files/img-colorful-3d render-monster-icecream----.webp", prompt: "colorful 3d render of a monster eating icecream"},{ id: "colorful-3d render-monster-book----", filename: "example_files/img-colorful-3d render-monster-book----.webp", prompt: "colorful 3d render of a monster reading a book"},{ id: "colorful-3d render-monster-flying----", filename: "example_files/img-colorful-3d render-monster-flying----.webp", prompt: "colorful 3d render of a monster flying through the sky"},{ id: "colorful-3d render-airplane-umbrella----", filename: "example_files/img-colorful-3d render-airplane-umbrella----.webp", prompt: "colorful 3d render of an airplane holding an umbrella"},{ id: "colorful-3d render-airplane-icecream----", filename: "example_files/img-colorful-3d render-airplane-icecream----.webp", prompt: "colorful 3d render of an airplane eating icecream"},{ id: "colorful-3d render-airplane-book----", filename: "example_files/img-colorful-3d render-airplane-book----.webp", prompt: "colorful 3d render of an airplane reading a book"},{ id: "colorful-3d render-airplane-flying----", filename: "example_files/img-colorful-3d render-airplane-flying----.webp", prompt: "colorful 3d render of an airplane flying through the sky"},{ id: "black and white-picture-dog-umbrella----", filename: "example_files/img-black and white-picture-dog-umbrella----.webp", prompt: "black and white picture of a dog holding an umbrella"},{ id: "black and white-picture-dog-icecream----", filename: "example_files/img-black and white-picture-dog-icecream----.webp", prompt: "black and white picture of a dog eating icecream"},{ id: "black and white-picture-dog-book----", filename: "example_files/img-black and white-picture-dog-book----.webp", prompt: "black and white picture of a dog reading a book"},{ id: "black and white-picture-dog-flying----", filename: "example_files/img-black and white-picture-dog-flying----.webp", prompt: "black and white picture of a dog flying through the sky"},{ id: "black and white-picture-man-umbrella----", filename: "example_files/img-black and white-picture-man-umbrella----.webp", prompt: "black and white picture of a man holding an umbrella"},{ id: "black and white-picture-man-icecream----", filename: "example_files/img-black and white-picture-man-icecream----.webp", prompt: "black and white picture of a man eating icecream"},{ id: "black and white-picture-man-book----", filename: "example_files/img-black and white-picture-man-book----.webp", prompt: "black and white picture of a man reading a book"},{ id: "black and white-picture-man-flying----", filename: "example_files/img-black and white-picture-man-flying----.webp", prompt: "black and white picture of a man flying through the sky"},{ id: "black and white-picture-monster-umbrella----", filename: "example_files/img-black and white-picture-monster-umbrella----.webp", prompt: "black and white picture of a monster holding an umbrella"},{ id: "black and white-picture-monster-icecream----", filename: "example_files/img-black and white-picture-monster-icecream----.webp", prompt: "black and white picture of a monster eating icecream"},{ id: "black and white-picture-monster-book----", filename: "example_files/img-black and white-picture-monster-book----.webp", prompt: "black and white picture of a monster reading a book"},{ id: "black and white-picture-monster-flying----", filename: "example_files/img-black and white-picture-monster-flying----.webp", prompt: "black and white picture of a monster flying through the sky"},{ id: "black and white-picture-airplane-umbrella----", filename: "example_files/img-black and white-picture-airplane-umbrella----.webp", prompt: "black and white picture of an airplane holding an umbrella"},{ id: "black and white-picture-airplane-icecream----", filename: "example_files/img-black and white-picture-airplane-icecream----.webp", prompt: "black and white picture of an airplane eating icecream"},{ id: "black and white-picture-airplane-book----", filename: "example_files/img-black and white-picture-airplane-book----.webp", prompt: "black and white picture of an airplane reading a book"},{ id: "black and white-picture-airplane-flying----", filename: "example_files/img-black and white-picture-airplane-flying----.webp", prompt: "black and white picture of an airplane flying through the sky"},{ id: "black and white-pencil-dog-umbrella----", filename: "example_files/img-black and white-pencil-dog-umbrella----.webp", prompt: "black and white simple pencil sketch of a dog holding an umbrella"},{ id: "black and white-pencil-dog-icecream----", filename: "example_files/img-black and white-pencil-dog-icecream----.webp", prompt: "black and white simple pencil sketch of a dog eating icecream"},{ id: "black and white-pencil-dog-book----", filename: "example_files/img-black and white-pencil-dog-book----.webp", prompt: "black and white simple pencil sketch of a dog reading a book"},{ id: "black and white-pencil-dog-flying----", filename: "example_files/img-black and white-pencil-dog-flying----.webp", prompt: "black and white simple pencil sketch of a dog flying through the sky"},{ id: "black and white-pencil-man-umbrella----", filename: "example_files/img-black and white-pencil-man-umbrella----.webp", prompt: "black and white simple pencil sketch of a man holding an umbrella"},{ id: "black and white-pencil-man-icecream----", filename: "example_files/img-black and white-pencil-man-icecream----.webp", prompt: "black and white simple pencil sketch of a man eating icecream"},{ id: "black and white-pencil-man-book----", filename: "example_files/img-black and white-pencil-man-book----.webp", prompt: "black and white simple pencil sketch of a man reading a book"},{ id: "black and white-pencil-man-flying----", filename: "example_files/img-black and white-pencil-man-flying----.webp", prompt: "black and white simple pencil sketch of a man flying through the sky"},{ id: "black and white-pencil-monster-umbrella----", filename: "example_files/img-black and white-pencil-monster-umbrella----.webp", prompt: "black and white simple pencil sketch of a monster holding an umbrella"},{ id: "black and white-pencil-monster-icecream----", filename: "example_files/img-black and white-pencil-monster-icecream----.webp", prompt: "black and white simple pencil sketch of a monster eating icecream"},{ id: "black and white-pencil-monster-book----", filename: "example_files/img-black and white-pencil-monster-book----.webp", prompt: "black and white simple pencil sketch of a monster reading a book"},{ id: "black and white-pencil-monster-flying----", filename: "example_files/img-black and white-pencil-monster-flying----.webp", prompt: "black and white simple pencil sketch of a monster flying through the sky"},{ id: "black and white-pencil-airplane-umbrella----", filename: "example_files/img-black and white-pencil-airplane-umbrella----.webp", prompt: "black and white simple pencil sketch of an airplane holding an umbrella"},{ id: "black and white-pencil-airplane-icecream----", filename: "example_files/img-black and white-pencil-airplane-icecream----.webp", prompt: "black and white simple pencil sketch of an airplane eating icecream"},{ id: "black and white-pencil-airplane-book----", filename: "example_files/img-black and white-pencil-airplane-book----.webp", prompt: "black and white simple pencil sketch of an airplane reading a book"},{ id: "black and white-pencil-airplane-flying----", filename: "example_files/img-black and white-pencil-airplane-flying----.webp", prompt: "black and white simple pencil sketch of an airplane flying through the sky"},{ id: "black and white-watercolor-dog-umbrella----", filename: "example_files/img-black and white-watercolor-dog-umbrella----.webp", prompt: "black and white watercolor painting of a dog holding an umbrella"},{ id: "black and white-watercolor-dog-icecream----", filename: "example_files/img-black and white-watercolor-dog-icecream----.webp", prompt: "black and white watercolor painting of a dog eating icecream"},{ id: "black and white-watercolor-dog-book----", filename: "example_files/img-black and white-watercolor-dog-book----.webp", prompt: "black and white watercolor painting of a dog reading a book"},{ id: "black and white-watercolor-dog-flying----", filename: "example_files/img-black and white-watercolor-dog-flying----.webp", prompt: "black and white watercolor painting of a dog flying through the sky"},{ id: "black and white-watercolor-man-umbrella----", filename: "example_files/img-black and white-watercolor-man-umbrella----.webp", prompt: "black and white watercolor painting of a man holding an umbrella"},{ id: "black and white-watercolor-man-icecream----", filename: "example_files/img-black and white-watercolor-man-icecream----.webp", prompt: "black and white watercolor painting of a man eating icecream"},{ id: "black and white-watercolor-man-book----", filename: "example_files/img-black and white-watercolor-man-book----.webp", prompt: "black and white watercolor painting of a man reading a book"},{ id: "black and white-watercolor-man-flying----", filename: "example_files/img-black and white-watercolor-man-flying----.webp", prompt: "black and white watercolor painting of a man flying through the sky"},{ id: "black and white-watercolor-monster-umbrella----", filename: "example_files/img-black and white-watercolor-monster-umbrella----.webp", prompt: "black and white watercolor painting of a monster holding an umbrella"},{ id: "black and white-watercolor-monster-icecream----", filename: "example_files/img-black and white-watercolor-monster-icecream----.webp", prompt: "black and white watercolor painting of a monster eating icecream"},{ id: "black and white-watercolor-monster-book----", filename: "example_files/img-black and white-watercolor-monster-book----.webp", prompt: "black and white watercolor painting of a monster reading a book"},{ id: "black and white-watercolor-monster-flying----", filename: "example_files/img-black and white-watercolor-monster-flying----.webp", prompt: "black and white watercolor painting of a monster flying through the sky"},{ id: "black and white-watercolor-airplane-umbrella----", filename: "example_files/img-black and white-watercolor-airplane-umbrella----.webp", prompt: "black and white watercolor painting of an airplane holding an umbrella"},{ id: "black and white-watercolor-airplane-icecream----", filename: "example_files/img-black and white-watercolor-airplane-icecream----.webp", prompt: "black and white watercolor painting of an airplane eating icecream"},{ id: "black and white-watercolor-airplane-book----", filename: "example_files/img-black and white-watercolor-airplane-book----.webp", prompt: "black and white watercolor painting of an airplane reading a book"},{ id: "black and white-watercolor-airplane-flying----", filename: "example_files/img-black and white-watercolor-airplane-flying----.webp", prompt: "black and white watercolor painting of an airplane flying through the sky"},{ id: "black and white-cartoon-dog-umbrella----", filename: "example_files/img-black and white-cartoon-dog-umbrella----.webp", prompt: "black and white animated cartoon still of a dog holding an umbrella"},{ id: "black and white-cartoon-dog-icecream----", filename: "example_files/img-black and white-cartoon-dog-icecream----.webp", prompt: "black and white animated cartoon still of a dog eating icecream"},{ id: "black and white-cartoon-dog-book----", filename: "example_files/img-black and white-cartoon-dog-book----.webp", prompt: "black and white animated cartoon still of a dog reading a book"},{ id: "black and white-cartoon-dog-flying----", filename: "example_files/img-black and white-cartoon-dog-flying----.webp", prompt: "black and white animated cartoon still of a dog flying through the sky"},{ id: "black and white-cartoon-man-umbrella----", filename: "example_files/img-black and white-cartoon-man-umbrella----.webp", prompt: "black and white animated cartoon still of a man holding an umbrella"},{ id: "black and white-cartoon-man-icecream----", filename: "example_files/img-black and white-cartoon-man-icecream----.webp", prompt: "black and white animated cartoon still of a man eating icecream"},{ id: "black and white-cartoon-man-book----", filename: "example_files/img-black and white-cartoon-man-book----.webp", prompt: "black and white animated cartoon still of a man reading a book"},{ id: "black and white-cartoon-man-flying----", filename: "example_files/img-black and white-cartoon-man-flying----.webp", prompt: "black and white animated cartoon still of a man flying through the sky"},{ id: "black and white-cartoon-monster-umbrella----", filename: "example_files/img-black and white-cartoon-monster-umbrella----.webp", prompt: "black and white animated cartoon still of a monster holding an umbrella"},{ id: "black and white-cartoon-monster-icecream----", filename: "example_files/img-black and white-cartoon-monster-icecream----.webp", prompt: "black and white animated cartoon still of a monster eating icecream"},{ id: "black and white-cartoon-monster-book----", filename: "example_files/img-black and white-cartoon-monster-book----.webp", prompt: "black and white animated cartoon still of a monster reading a book"},{ id: "black and white-cartoon-monster-flying----", filename: "example_files/img-black and white-cartoon-monster-flying----.webp", prompt: "black and white animated cartoon still of a monster flying through the sky"},{ id: "black and white-cartoon-airplane-umbrella----", filename: "example_files/img-black and white-cartoon-airplane-umbrella----.webp", prompt: "black and white animated cartoon still of an airplane holding an umbrella"},{ id: "black and white-cartoon-airplane-icecream----", filename: "example_files/img-black and white-cartoon-airplane-icecream----.webp", prompt: "black and white animated cartoon still of an airplane eating icecream"},{ id: "black and white-cartoon-airplane-book----", filename: "example_files/img-black and white-cartoon-airplane-book----.webp", prompt: "black and white animated cartoon still of an airplane reading a book"},{ id: "black and white-cartoon-airplane-flying----", filename: "example_files/img-black and white-cartoon-airplane-flying----.webp", prompt: "black and white animated cartoon still of an airplane flying through the sky"},{ id: "black and white-blueprint-dog-umbrella----", filename: "example_files/img-black and white-blueprint-dog-umbrella----.webp", prompt: "black and white blueprint in orthographic projection of a dog holding an umbrella"},{ id: "black and white-blueprint-dog-icecream----", filename: "example_files/img-black and white-blueprint-dog-icecream----.webp", prompt: "black and white blueprint in orthographic projection of a dog eating icecream"},{ id: "black and white-blueprint-dog-book----", filename: "example_files/img-black and white-blueprint-dog-book----.webp", prompt: "black and white blueprint in orthographic projection of a dog reading a book"},{ id: "black and white-blueprint-dog-flying----", filename: "example_files/img-black and white-blueprint-dog-flying----.webp", prompt: "black and white blueprint in orthographic projection of a dog flying through the sky"},{ id: "black and white-blueprint-man-umbrella----", filename: "example_files/img-black and white-blueprint-man-umbrella----.webp", prompt: "black and white blueprint in orthographic projection of a man holding an umbrella"},{ id: "black and white-blueprint-man-icecream----", filename: "example_files/img-black and white-blueprint-man-icecream----.webp", prompt: "black and white blueprint in orthographic projection of a man eating icecream"},{ id: "black and white-blueprint-man-book----", filename: "example_files/img-black and white-blueprint-man-book----.webp", prompt: "black and white blueprint in orthographic projection of a man reading a book"},{ id: "black and white-blueprint-man-flying----", filename: "example_files/img-black and white-blueprint-man-flying----.webp", prompt: "black and white blueprint in orthographic projection of a man flying through the sky"},{ id: "black and white-blueprint-monster-umbrella----", filename: "example_files/img-black and white-blueprint-monster-umbrella----.webp", prompt: "black and white blueprint in orthographic projection of a monster holding an umbrella"},{ id: "black and white-blueprint-monster-icecream----", filename: "example_files/img-black and white-blueprint-monster-icecream----.webp", prompt: "black and white blueprint in orthographic projection of a monster eating icecream"},{ id: "black and white-blueprint-monster-book----", filename: "example_files/img-black and white-blueprint-monster-book----.webp", prompt: "black and white blueprint in orthographic projection of a monster reading a book"},{ id: "black and white-blueprint-monster-flying----", filename: "example_files/img-black and white-blueprint-monster-flying----.webp", prompt: "black and white blueprint in orthographic projection of a monster flying through the sky"},{ id: "black and white-blueprint-airplane-umbrella----", filename: "example_files/img-black and white-blueprint-airplane-umbrella----.webp", prompt: "black and white blueprint in orthographic projection of an airplane holding an umbrella"},{ id: "black and white-blueprint-airplane-icecream----", filename: "example_files/img-black and white-blueprint-airplane-icecream----.webp", prompt: "black and white blueprint in orthographic projection of an airplane eating icecream"},{ id: "black and white-blueprint-airplane-book----", filename: "example_files/img-black and white-blueprint-airplane-book----.webp", prompt: "black and white blueprint in orthographic projection of an airplane reading a book"},{ id: "black and white-blueprint-airplane-flying----", filename: "example_files/img-black and white-blueprint-airplane-flying----.webp", prompt: "black and white blueprint in orthographic projection of an airplane flying through the sky"},{ id: "black and white-3d render-dog-umbrella----", filename: "example_files/img-black and white-3d render-dog-umbrella----.webp", prompt: "black and white 3d render of a dog holding an umbrella"},{ id: "black and white-3d render-dog-icecream----", filename: "example_files/img-black and white-3d render-dog-icecream----.webp", prompt: "black and white 3d render of a dog eating icecream"},{ id: "black and white-3d render-dog-book----", filename: "example_files/img-black and white-3d render-dog-book----.webp", prompt: "black and white 3d render of a dog reading a book"},{ id: "black and white-3d render-dog-flying----", filename: "example_files/img-black and white-3d render-dog-flying----.webp", prompt: "black and white 3d render of a dog flying through the sky"},{ id: "black and white-3d render-man-umbrella----", filename: "example_files/img-black and white-3d render-man-umbrella----.webp", prompt: "black and white 3d render of a man holding an umbrella"},{ id: "black and white-3d render-man-icecream----", filename: "example_files/img-black and white-3d render-man-icecream----.webp", prompt: "black and white 3d render of a man eating icecream"},{ id: "black and white-3d render-man-book----", filename: "example_files/img-black and white-3d render-man-book----.webp", prompt: "black and white 3d render of a man reading a book"},{ id: "black and white-3d render-man-flying----", filename: "example_files/img-black and white-3d render-man-flying----.webp", prompt: "black and white 3d render of a man flying through the sky"},{ id: "black and white-3d render-monster-umbrella----", filename: "example_files/img-black and white-3d render-monster-umbrella----.webp", prompt: "black and white 3d render of a monster holding an umbrella"},{ id: "black and white-3d render-monster-icecream----", filename: "example_files/img-black and white-3d render-monster-icecream----.webp", prompt: "black and white 3d render of a monster eating icecream"},{ id: "black and white-3d render-monster-book----", filename: "example_files/img-black and white-3d render-monster-book----.webp", prompt: "black and white 3d render of a monster reading a book"},{ id: "black and white-3d render-monster-flying----", filename: "example_files/img-black and white-3d render-monster-flying----.webp", prompt: "black and white 3d render of a monster flying through the sky"},{ id: "black and white-3d render-airplane-umbrella----", filename: "example_files/img-black and white-3d render-airplane-umbrella----.webp", prompt: "black and white 3d render of an airplane holding an umbrella"},{ id: "black and white-3d render-airplane-icecream----", filename: "example_files/img-black and white-3d render-airplane-icecream----.webp", prompt: "black and white 3d render of an airplane eating icecream"},{ id: "black and white-3d render-airplane-book----", filename: "example_files/img-black and white-3d render-airplane-book----.webp", prompt: "black and white 3d render of an airplane reading a book"},{ id: "black and white-3d render-airplane-flying----", filename: "example_files/img-black and white-3d render-airplane-flying----.webp", prompt: "black and white 3d render of an airplane flying through the sky"},{ id: "psychedelic-picture-dog-umbrella----", filename: "example_files/img-psychedelic-picture-dog-umbrella----.webp", prompt: "psychedelic picture of a dog holding an umbrella"},{ id: "psychedelic-picture-dog-icecream----", filename: "example_files/img-psychedelic-picture-dog-icecream----.webp", prompt: "psychedelic picture of a dog eating icecream"},{ id: "psychedelic-picture-dog-book----", filename: "example_files/img-psychedelic-picture-dog-book----.webp", prompt: "psychedelic picture of a dog reading a book"},{ id: "psychedelic-picture-dog-flying----", filename: "example_files/img-psychedelic-picture-dog-flying----.webp", prompt: "psychedelic picture of a dog flying through the sky"},{ id: "psychedelic-picture-man-umbrella----", filename: "example_files/img-psychedelic-picture-man-umbrella----.webp", prompt: "psychedelic picture of a man holding an umbrella"},{ id: "psychedelic-picture-man-icecream----", filename: "example_files/img-psychedelic-picture-man-icecream----.webp", prompt: "psychedelic picture of a man eating icecream"},{ id: "psychedelic-picture-man-book----", filename: "example_files/img-psychedelic-picture-man-book----.webp", prompt: "psychedelic picture of a man reading a book"},{ id: "psychedelic-picture-man-flying----", filename: "example_files/img-psychedelic-picture-man-flying----.webp", prompt: "psychedelic picture of a man flying through the sky"},{ id: "psychedelic-picture-monster-umbrella----", filename: "example_files/img-psychedelic-picture-monster-umbrella----.webp", prompt: "psychedelic picture of a monster holding an umbrella"},{ id: "psychedelic-picture-monster-icecream----", filename: "example_files/img-psychedelic-picture-monster-icecream----.webp", prompt: "psychedelic picture of a monster eating icecream"},{ id: "psychedelic-picture-monster-book----", filename: "example_files/img-psychedelic-picture-monster-book----.webp", prompt: "psychedelic picture of a monster reading a book"},{ id: "psychedelic-picture-monster-flying----", filename: "example_files/img-psychedelic-picture-monster-flying----.webp", prompt: "psychedelic picture of a monster flying through the sky"},{ id: "psychedelic-picture-airplane-umbrella----", filename: "example_files/img-psychedelic-picture-airplane-umbrella----.webp", prompt: "psychedelic picture of an airplane holding an umbrella"},{ id: "psychedelic-picture-airplane-icecream----", filename: "example_files/img-psychedelic-picture-airplane-icecream----.webp", prompt: "psychedelic picture of an airplane eating icecream"},{ id: "psychedelic-picture-airplane-book----", filename: "example_files/img-psychedelic-picture-airplane-book----.webp", prompt: "psychedelic picture of an airplane reading a book"},{ id: "psychedelic-picture-airplane-flying----", filename: "example_files/img-psychedelic-picture-airplane-flying----.webp", prompt: "psychedelic picture of an airplane flying through the sky"},{ id: "psychedelic-pencil-dog-umbrella----", filename: "example_files/img-psychedelic-pencil-dog-umbrella----.webp", prompt: "psychedelic simple pencil sketch of a dog holding an umbrella"},{ id: "psychedelic-pencil-dog-icecream----", filename: "example_files/img-psychedelic-pencil-dog-icecream----.webp", prompt: "psychedelic simple pencil sketch of a dog eating icecream"},{ id: "psychedelic-pencil-dog-book----", filename: "example_files/img-psychedelic-pencil-dog-book----.webp", prompt: "psychedelic simple pencil sketch of a dog reading a book"},{ id: "psychedelic-pencil-dog-flying----", filename: "example_files/img-psychedelic-pencil-dog-flying----.webp", prompt: "psychedelic simple pencil sketch of a dog flying through the sky"},{ id: "psychedelic-pencil-man-umbrella----", filename: "example_files/img-psychedelic-pencil-man-umbrella----.webp", prompt: "psychedelic simple pencil sketch of a man holding an umbrella"},{ id: "psychedelic-pencil-man-icecream----", filename: "example_files/img-psychedelic-pencil-man-icecream----.webp", prompt: "psychedelic simple pencil sketch of a man eating icecream"},{ id: "psychedelic-pencil-man-book----", filename: "example_files/img-psychedelic-pencil-man-book----.webp", prompt: "psychedelic simple pencil sketch of a man reading a book"},{ id: "psychedelic-pencil-man-flying----", filename: "example_files/img-psychedelic-pencil-man-flying----.webp", prompt: "psychedelic simple pencil sketch of a man flying through the sky"},{ id: "psychedelic-pencil-monster-umbrella----", filename: "example_files/img-psychedelic-pencil-monster-umbrella----.webp", prompt: "psychedelic simple pencil sketch of a monster holding an umbrella"},{ id: "psychedelic-pencil-monster-icecream----", filename: "example_files/img-psychedelic-pencil-monster-icecream----.webp", prompt: "psychedelic simple pencil sketch of a monster eating icecream"},{ id: "psychedelic-pencil-monster-book----", filename: "example_files/img-psychedelic-pencil-monster-book----.webp", prompt: "psychedelic simple pencil sketch of a monster reading a book"},{ id: "psychedelic-pencil-monster-flying----", filename: "example_files/img-psychedelic-pencil-monster-flying----.webp", prompt: "psychedelic simple pencil sketch of a monster flying through the sky"},{ id: "psychedelic-pencil-airplane-umbrella----", filename: "example_files/img-psychedelic-pencil-airplane-umbrella----.webp", prompt: "psychedelic simple pencil sketch of an airplane holding an umbrella"},{ id: "psychedelic-pencil-airplane-icecream----", filename: "example_files/img-psychedelic-pencil-airplane-icecream----.webp", prompt: "psychedelic simple pencil sketch of an airplane eating icecream"},{ id: "psychedelic-pencil-airplane-book----", filename: "example_files/img-psychedelic-pencil-airplane-book----.webp", prompt: "psychedelic simple pencil sketch of an airplane reading a book"},{ id: "psychedelic-pencil-airplane-flying----", filename: "example_files/img-psychedelic-pencil-airplane-flying----.webp", prompt: "psychedelic simple pencil sketch of an airplane flying through the sky"},{ id: "psychedelic-watercolor-dog-umbrella----", filename: "example_files/img-psychedelic-watercolor-dog-umbrella----.webp", prompt: "psychedelic watercolor painting of a dog holding an umbrella"},{ id: "psychedelic-watercolor-dog-icecream----", filename: "example_files/img-psychedelic-watercolor-dog-icecream----.webp", prompt: "psychedelic watercolor painting of a dog eating icecream"},{ id: "psychedelic-watercolor-dog-book----", filename: "example_files/img-psychedelic-watercolor-dog-book----.webp", prompt: "psychedelic watercolor painting of a dog reading a book"},{ id: "psychedelic-watercolor-dog-flying----", filename: "example_files/img-psychedelic-watercolor-dog-flying----.webp", prompt: "psychedelic watercolor painting of a dog flying through the sky"},{ id: "psychedelic-watercolor-man-umbrella----", filename: "example_files/img-psychedelic-watercolor-man-umbrella----.webp", prompt: "psychedelic watercolor painting of a man holding an umbrella"},{ id: "psychedelic-watercolor-man-icecream----", filename: "example_files/img-psychedelic-watercolor-man-icecream----.webp", prompt: "psychedelic watercolor painting of a man eating icecream"},{ id: "psychedelic-watercolor-man-book----", filename: "example_files/img-psychedelic-watercolor-man-book----.webp", prompt: "psychedelic watercolor painting of a man reading a book"},{ id: "psychedelic-watercolor-man-flying----", filename: "example_files/img-psychedelic-watercolor-man-flying----.webp", prompt: "psychedelic watercolor painting of a man flying through the sky"},{ id: "psychedelic-watercolor-monster-umbrella----", filename: "example_files/img-psychedelic-watercolor-monster-umbrella----.webp", prompt: "psychedelic watercolor painting of a monster holding an umbrella"},{ id: "psychedelic-watercolor-monster-icecream----", filename: "example_files/img-psychedelic-watercolor-monster-icecream----.webp", prompt: "psychedelic watercolor painting of a monster eating icecream"},{ id: "psychedelic-watercolor-monster-book----", filename: "example_files/img-psychedelic-watercolor-monster-book----.webp", prompt: "psychedelic watercolor painting of a monster reading a book"},{ id: "psychedelic-watercolor-monster-flying----", filename: "example_files/img-psychedelic-watercolor-monster-flying----.webp", prompt: "psychedelic watercolor painting of a monster flying through the sky"},{ id: "psychedelic-watercolor-airplane-umbrella----", filename: "example_files/img-psychedelic-watercolor-airplane-umbrella----.webp", prompt: "psychedelic watercolor painting of an airplane holding an umbrella"},{ id: "psychedelic-watercolor-airplane-icecream----", filename: "example_files/img-psychedelic-watercolor-airplane-icecream----.webp", prompt: "psychedelic watercolor painting of an airplane eating icecream"},{ id: "psychedelic-watercolor-airplane-book----", filename: "example_files/img-psychedelic-watercolor-airplane-book----.webp", prompt: "psychedelic watercolor painting of an airplane reading a book"},{ id: "psychedelic-watercolor-airplane-flying----", filename: "example_files/img-psychedelic-watercolor-airplane-flying----.webp", prompt: "psychedelic watercolor painting of an airplane flying through the sky"},{ id: "psychedelic-cartoon-dog-umbrella----", filename: "example_files/img-psychedelic-cartoon-dog-umbrella----.webp", prompt: "psychedelic animated cartoon still of a dog holding an umbrella"},{ id: "psychedelic-cartoon-dog-icecream----", filename: "example_files/img-psychedelic-cartoon-dog-icecream----.webp", prompt: "psychedelic animated cartoon still of a dog eating icecream"},{ id: "psychedelic-cartoon-dog-book----", filename: "example_files/img-psychedelic-cartoon-dog-book----.webp", prompt: "psychedelic animated cartoon still of a dog reading a book"},{ id: "psychedelic-cartoon-dog-flying----", filename: "example_files/img-psychedelic-cartoon-dog-flying----.webp", prompt: "psychedelic animated cartoon still of a dog flying through the sky"},{ id: "psychedelic-cartoon-man-umbrella----", filename: "example_files/img-psychedelic-cartoon-man-umbrella----.webp", prompt: "psychedelic animated cartoon still of a man holding an umbrella"},{ id: "psychedelic-cartoon-man-icecream----", filename: "example_files/img-psychedelic-cartoon-man-icecream----.webp", prompt: "psychedelic animated cartoon still of a man eating icecream"},{ id: "psychedelic-cartoon-man-book----", filename: "example_files/img-psychedelic-cartoon-man-book----.webp", prompt: "psychedelic animated cartoon still of a man reading a book"},{ id: "psychedelic-cartoon-man-flying----", filename: "example_files/img-psychedelic-cartoon-man-flying----.webp", prompt: "psychedelic animated cartoon still of a man flying through the sky"},{ id: "psychedelic-cartoon-monster-umbrella----", filename: "example_files/img-psychedelic-cartoon-monster-umbrella----.webp", prompt: "psychedelic animated cartoon still of a monster holding an umbrella"},{ id: "psychedelic-cartoon-monster-icecream----", filename: "example_files/img-psychedelic-cartoon-monster-icecream----.webp", prompt: "psychedelic animated cartoon still of a monster eating icecream"},{ id: "psychedelic-cartoon-monster-book----", filename: "example_files/img-psychedelic-cartoon-monster-book----.webp", prompt: "psychedelic animated cartoon still of a monster reading a book"},{ id: "psychedelic-cartoon-monster-flying----", filename: "example_files/img-psychedelic-cartoon-monster-flying----.webp", prompt: "psychedelic animated cartoon still of a monster flying through the sky"},{ id: "psychedelic-cartoon-airplane-umbrella----", filename: "example_files/img-psychedelic-cartoon-airplane-umbrella----.webp", prompt: "psychedelic animated cartoon still of an airplane holding an umbrella"},{ id: "psychedelic-cartoon-airplane-icecream----", filename: "example_files/img-psychedelic-cartoon-airplane-icecream----.webp", prompt: "psychedelic animated cartoon still of an airplane eating icecream"},{ id: "psychedelic-cartoon-airplane-book----", filename: "example_files/img-psychedelic-cartoon-airplane-book----.webp", prompt: "psychedelic animated cartoon still of an airplane reading a book"},{ id: "psychedelic-cartoon-airplane-flying----", filename: "example_files/img-psychedelic-cartoon-airplane-flying----.webp", prompt: "psychedelic animated cartoon still of an airplane flying through the sky"},{ id: "psychedelic-blueprint-dog-umbrella----", filename: "example_files/img-psychedelic-blueprint-dog-umbrella----.webp", prompt: "psychedelic blueprint in orthographic projection of a dog holding an umbrella"},{ id: "psychedelic-blueprint-dog-icecream----", filename: "example_files/img-psychedelic-blueprint-dog-icecream----.webp", prompt: "psychedelic blueprint in orthographic projection of a dog eating icecream"},{ id: "psychedelic-blueprint-dog-book----", filename: "example_files/img-psychedelic-blueprint-dog-book----.webp", prompt: "psychedelic blueprint in orthographic projection of a dog reading a book"},{ id: "psychedelic-blueprint-dog-flying----", filename: "example_files/img-psychedelic-blueprint-dog-flying----.webp", prompt: "psychedelic blueprint in orthographic projection of a dog flying through the sky"},{ id: "psychedelic-blueprint-man-umbrella----", filename: "example_files/img-psychedelic-blueprint-man-umbrella----.webp", prompt: "psychedelic blueprint in orthographic projection of a man holding an umbrella"},{ id: "psychedelic-blueprint-man-icecream----", filename: "example_files/img-psychedelic-blueprint-man-icecream----.webp", prompt: "psychedelic blueprint in orthographic projection of a man eating icecream"},{ id: "psychedelic-blueprint-man-book----", filename: "example_files/img-psychedelic-blueprint-man-book----.webp", prompt: "psychedelic blueprint in orthographic projection of a man reading a book"},{ id: "psychedelic-blueprint-man-flying----", filename: "example_files/img-psychedelic-blueprint-man-flying----.webp", prompt: "psychedelic blueprint in orthographic projection of a man flying through the sky"},{ id: "psychedelic-blueprint-monster-umbrella----", filename: "example_files/img-psychedelic-blueprint-monster-umbrella----.webp", prompt: "psychedelic blueprint in orthographic projection of a monster holding an umbrella"},{ id: "psychedelic-blueprint-monster-icecream----", filename: "example_files/img-psychedelic-blueprint-monster-icecream----.webp", prompt: "psychedelic blueprint in orthographic projection of a monster eating icecream"},{ id: "psychedelic-blueprint-monster-book----", filename: "example_files/img-psychedelic-blueprint-monster-book----.webp", prompt: "psychedelic blueprint in orthographic projection of a monster reading a book"},{ id: "psychedelic-blueprint-monster-flying----", filename: "example_files/img-psychedelic-blueprint-monster-flying----.webp", prompt: "psychedelic blueprint in orthographic projection of a monster flying through the sky"},{ id: "psychedelic-blueprint-airplane-umbrella----", filename: "example_files/img-psychedelic-blueprint-airplane-umbrella----.webp", prompt: "psychedelic blueprint in orthographic projection of an airplane holding an umbrella"},{ id: "psychedelic-blueprint-airplane-icecream----", filename: "example_files/img-psychedelic-blueprint-airplane-icecream----.webp", prompt: "psychedelic blueprint in orthographic projection of an airplane eating icecream"},{ id: "psychedelic-blueprint-airplane-book----", filename: "example_files/img-psychedelic-blueprint-airplane-book----.webp", prompt: "psychedelic blueprint in orthographic projection of an airplane reading a book"},{ id: "psychedelic-blueprint-airplane-flying----", filename: "example_files/img-psychedelic-blueprint-airplane-flying----.webp", prompt: "psychedelic blueprint in orthographic projection of an airplane flying through the sky"},{ id: "psychedelic-3d render-dog-umbrella----", filename: "example_files/img-psychedelic-3d render-dog-umbrella----.webp", prompt: "psychedelic 3d render of a dog holding an umbrella"},{ id: "psychedelic-3d render-dog-icecream----", filename: "example_files/img-psychedelic-3d render-dog-icecream----.webp", prompt: "psychedelic 3d render of a dog eating icecream"},{ id: "psychedelic-3d render-dog-book----", filename: "example_files/img-psychedelic-3d render-dog-book----.webp", prompt: "psychedelic 3d render of a dog reading a book"},{ id: "psychedelic-3d render-dog-flying----", filename: "example_files/img-psychedelic-3d render-dog-flying----.webp", prompt: "psychedelic 3d render of a dog flying through the sky"},{ id: "psychedelic-3d render-man-umbrella----", filename: "example_files/img-psychedelic-3d render-man-umbrella----.webp", prompt: "psychedelic 3d render of a man holding an umbrella"},{ id: "psychedelic-3d render-man-icecream----", filename: "example_files/img-psychedelic-3d render-man-icecream----.webp", prompt: "psychedelic 3d render of a man eating icecream"},{ id: "psychedelic-3d render-man-book----", filename: "example_files/img-psychedelic-3d render-man-book----.webp", prompt: "psychedelic 3d render of a man reading a book"},{ id: "psychedelic-3d render-man-flying----", filename: "example_files/img-psychedelic-3d render-man-flying----.webp", prompt: "psychedelic 3d render of a man flying through the sky"},{ id: "psychedelic-3d render-monster-umbrella----", filename: "example_files/img-psychedelic-3d render-monster-umbrella----.webp", prompt: "psychedelic 3d render of a monster holding an umbrella"},{ id: "psychedelic-3d render-monster-icecream----", filename: "example_files/img-psychedelic-3d render-monster-icecream----.webp", prompt: "psychedelic 3d render of a monster eating icecream"},{ id: "psychedelic-3d render-monster-book----", filename: "example_files/img-psychedelic-3d render-monster-book----.webp", prompt: "psychedelic 3d render of a monster reading a book"},{ id: "psychedelic-3d render-monster-flying----", filename: "example_files/img-psychedelic-3d render-monster-flying----.webp", prompt: "psychedelic 3d render of a monster flying through the sky"},{ id: "psychedelic-3d render-airplane-umbrella----", filename: "example_files/img-psychedelic-3d render-airplane-umbrella----.webp", prompt: "psychedelic 3d render of an airplane holding an umbrella"},{ id: "psychedelic-3d render-airplane-icecream----", filename: "example_files/img-psychedelic-3d render-airplane-icecream----.webp", prompt: "psychedelic 3d render of an airplane eating icecream"},{ id: "psychedelic-3d render-airplane-book----", filename: "example_files/img-psychedelic-3d render-airplane-book----.webp", prompt: "psychedelic 3d render of an airplane reading a book"},{ id: "psychedelic-3d render-airplane-flying----", filename: "example_files/img-psychedelic-3d render-airplane-flying----.webp", prompt: "psychedelic 3d render of an airplane flying through the sky"},];
|
|
const width = 512;
|
|
const height = 512;
|
|
const format = "webp";
|
|
|
|
const defaultImage = images[0].filename;
|
|
const idLists = [ids1, ids2, ids3, ids4, ids5, ids6, ids7, ids8];
|
|
const selectedIds = idLists.map(list => list ? list[0] : null);
|
|
|
|
const initialSelections = defaultImage.replace(fileprefix, '').replace(filesuffix, '').split('-');
|
|
idLists.forEach((list, index) => {
|
|
if (list && initialSelections[index]) {
|
|
selectedIds[index] = initialSelections[index];
|
|
}
|
|
});
|
|
|
|
const selectedClass = 'selected';
|
|
|
|
function isValidCombination() {
|
|
const selectedPath = selectedIds.map(id => id || '').join('-');
|
|
const imagePath = `${fileprefix}${selectedPath}${filesuffix}`;
|
|
return images.some(image => image.filename === imagePath);
|
|
}
|
|
|
|
function getImageData() {
|
|
const selectedPath = selectedIds.map(id => id || '').join('-');
|
|
const imagePath = `${fileprefix}${selectedPath}${filesuffix}`;
|
|
return images.find(image => image.filename === imagePath);
|
|
}
|
|
|
|
function updateImage() {
|
|
const imageContainer = document.getElementById('image-container');
|
|
const selectedImage = document.getElementById('selected-image');
|
|
const promptDiv = document.getElementById('image-prompt');
|
|
const filenameLink = document.getElementById('image-filename');
|
|
const filenameLinkContainer = document.getElementById('image-filename-container');
|
|
const zoomSlider = document.getElementById('zoom-slider');
|
|
|
|
const imageData = getImageData();
|
|
|
|
if (!imageData) {
|
|
// No valid combination selected, hide all elements and return
|
|
selectedImage.style.display = 'none';
|
|
promptDiv.style.display = 'none';
|
|
filenameLink.style.display = 'none';
|
|
filenameLinkContainer.style.display = 'none';
|
|
} else {
|
|
// Valid combination selected, show all elements
|
|
selectedImage.style.display = 'block';
|
|
promptDiv.style.display = 'block';
|
|
filenameLink.style.display = 'inline';
|
|
filenameLinkContainer.style.display = 'block';
|
|
|
|
// Update the elements
|
|
selectedImage.src = imageData.filename;
|
|
selectedImage.style.width = `${width}px`;
|
|
selectedImage.style.height = `${height}px`;
|
|
promptDiv.textContent = imageData.prompt;
|
|
filenameLink.textContent = `${imageData.id}.${format}`;
|
|
filenameLink.href = imageData.filename;
|
|
filenameLink.download = `${imageData.id}.${format}`;
|
|
|
|
// Update zoom level
|
|
setZoomLevel(zoomSlider.value);
|
|
}
|
|
|
|
preloadNearbyImages();
|
|
}
|
|
|
|
function createButtons(list, index) {
|
|
if (!list) return;
|
|
|
|
const container = document.createElement('div');
|
|
container.className = 'buttons';
|
|
|
|
list.forEach(id => {
|
|
const button = document.createElement('div');
|
|
button.className = 'button';
|
|
if (id) {
|
|
button.textContent = id;
|
|
} else {
|
|
button.innerHTML = ' ';
|
|
}
|
|
|
|
button.addEventListener('click', () => {
|
|
document.querySelectorAll(`.buttons:nth-child(${index + 1}) .button`).forEach(btn => {
|
|
btn.classList.remove('selected', 'selected-disabled');
|
|
});
|
|
selectedIds[index] = id;
|
|
updateButtonStates();
|
|
updateImage();
|
|
});
|
|
|
|
container.appendChild(button);
|
|
});
|
|
|
|
document.getElementById('button-container').appendChild(container);
|
|
}
|
|
|
|
function updateButtonStates() {
|
|
idLists.forEach((list, index) => {
|
|
if (list) {
|
|
const buttonsContainer = document.querySelector(`.buttons:nth-child(${index + 1})`);
|
|
if (buttonsContainer) {
|
|
const buttons = buttonsContainer.querySelectorAll('.button');
|
|
list.forEach((id, idIndex) => {
|
|
const tempSelectedIds = [...selectedIds];
|
|
tempSelectedIds[index] = id;
|
|
const isValid = images.some(image => image.filename === `${fileprefix}${tempSelectedIds.map(id => id || '').join('-')}${filesuffix}`);
|
|
const button = buttons[idIndex];
|
|
if (button) {
|
|
button.classList.remove('disabled', 'selected', 'selected-disabled');
|
|
if (!isValid) {
|
|
button.classList.add('disabled');
|
|
if (id === selectedIds[index]) {
|
|
button.classList.add('selected-disabled');
|
|
}
|
|
} else {
|
|
if (id === selectedIds[index]) {
|
|
button.classList.add('selected');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function preloadImage(src) {
|
|
if (images.some(image => image.filename === src)) {
|
|
const img = new Image();
|
|
img.src = src;
|
|
}
|
|
}
|
|
|
|
function preloadNearbyImages() {
|
|
idLists.forEach((list, index) => {
|
|
if (list) {
|
|
list.forEach(id => {
|
|
const tempSelectedIds = [...selectedIds];
|
|
tempSelectedIds[index] = id;
|
|
const selectedPath = tempSelectedIds.map(id => id || '').join('-');
|
|
const imagePath = `${fileprefix}${selectedPath}${filesuffix}`;
|
|
preloadImage(imagePath);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function setZoomLevel(zoom) {
|
|
const selectedImage = document.getElementById('selected-image');
|
|
selectedImage.style.width = `${width * (zoom / 100)}px`;
|
|
selectedImage.style.height = `${height * (zoom / 100)}px`;
|
|
}
|
|
|
|
function setAutoZoomWindow() {
|
|
const windowHeight = window.innerHeight;
|
|
const headerHeight = 190; // Adjust as necessary for header height
|
|
const footerHeight = 110; // Adjust as necessary for footer height
|
|
const margin = 20; // Adjust as necessary for margins
|
|
|
|
const availableHeight = windowHeight - headerHeight - footerHeight - margin;
|
|
|
|
const imageAspectRatio = width / height;
|
|
const windowAspectRatio = window.innerWidth / availableHeight;
|
|
|
|
let zoomLevel;
|
|
|
|
if (imageAspectRatio > windowAspectRatio) {
|
|
zoomLevel = Math.min(200, Math.max(10, (window.innerWidth / width) * 100));
|
|
} else {
|
|
zoomLevel = Math.min(200, Math.max(10, (availableHeight / height) * 100));
|
|
}
|
|
|
|
document.getElementById('zoom-slider').value = zoomLevel;
|
|
setZoomLevel(zoomLevel);
|
|
}
|
|
|
|
function setAutoZoomDevice() {
|
|
const windowHeight = window.innerHeight;
|
|
const margin = 100; // Adjust as necessary for margins
|
|
const zoomLevel = Math.min(200, Math.max(10, (windowHeight - margin) / height * 100));
|
|
document.getElementById('zoom-slider').value = zoomLevel;
|
|
setZoomLevel(zoomLevel);
|
|
}
|
|
|
|
document.getElementById('zoom-slider').addEventListener('input', (event) => {
|
|
setZoomLevel(event.target.value);
|
|
});
|
|
|
|
document.getElementById('reset-zoom').addEventListener('click', function() {
|
|
document.getElementById('zoom-slider').value = 100;
|
|
setZoomLevel(100);
|
|
});
|
|
|
|
document.getElementById('auto-zoom-window').addEventListener('click', setAutoZoomWindow);
|
|
|
|
document.getElementById('auto-zoom-device').addEventListener('click', setAutoZoomDevice);
|
|
|
|
idLists.forEach((list, index) => {
|
|
if (list) {
|
|
createButtons(list, index);
|
|
}
|
|
});
|
|
|
|
updateButtonStates();
|
|
updateImage();
|
|
preloadNearbyImages(); // Preload images on initial load
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|