Giter Site home page Giter Site logo

xyz_plot_script's Introduction

xyz_plot_script

XYZ Plot Script for Stable Diffusion WebUI. Because 3D is better than 2D! ๐Ÿ˜Ž

Adapted and modified from the original X/Y Plot script that's part of AUTOMATIC1111's Stable Diffusion WebUI repo.

Thanks to AUTOMATIC1111 for making such a kick-ass web UI for the community.

See example screenshots below!

โฌ‡๏ธ Installation

Download xyz_grid.py and xyz_grid.template.html and place it in the /scripts/ folder of your SD WebUI install.

Push the "Reload Scripts" button at the bottom of the Settings tab.

๐Ÿ–Œ๏ธ Optional Styling

If you don't like that the Z dropdown is wider than the X and Y dropdowns, edit your style.css file and add this at the bottom:

#z_type {
    max-width: 10em;
}

๐Ÿ–ฑ๏ธ Usage

Emits a folder to your samples output directory containing all of the necessary images, as well as an .html viewer file, and a .js file for metadata.

Example path would be [your samples dir]/xyz/00001/. Inside would be index.html, data.js, and an /images/ directory containing all of your images.

After generation is complete, simply open index.html in your favorite modern browser.

๐ŸŒ Browsing

The displayed grid represents the X/Y plots. Scroll or use the arrow or PgUp/PgDown keys to navigate the Z axis. (The label and the bars in the upper left corner denote the Z value you are viewing. Scrolling will cycle through each Z value.)

๐Ÿ”Ž Image Viewing / Metadata

Left-click on any image to open it in a new tab (for direct viewing, copying, etc).

Right-click on any image to copy the full info prompt to your clipboard (so you can paste it into the WebUI and recreate the image).

โ” FAQ

  • Will this save X/Y grid images like the standard X/Y Plot does?
    • No.
  • Does this also write the default image file using my filename template to the Samples output directory?
    • No, the images are only located in the /xyz/ folder, and they are named specifically so that the web viewer can read and display them properly.
  • What order does the script process the dimensions in?
    • Z, Y, X. (If you have Checkpoint as a dimension, place it on Z or Y, not X.)
  • Can I use this on Colab?
    • I have no idea. Good luck!
  • How come you used background images instead of <img> tags?
    • CSS is hard, okay?
  • Why did you use Vue.js?
    • Because it makes it easier to bind and display a large dataset like a 3-dimensional grid of images.
  • I don't want it loading Vue.js from a CDN. Can I make this script work offline?
  • Is there a limit to how many choices you can display on a given axis?
    • For the Z axis, the pager display (the little green light thing) will start to get messed up if you have more than 6 or 7 plots. For X and Y... how many images can your computer/browser handle? :)
  • Can you make the webpage do [X]?
    • Sure, if you send me a pull request!

๐Ÿ–ผ๏ธ Screenshots

Example 1

Example 2

xyz_plot_script's People

Contributors

zer0tf avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.