2
submitted 4 weeks ago by moxy@lemmy.world to c/perchance@lemmy.world

I'm using the text to image plugin and am new to perchance. I'm still learning things.

https://perchance.org/bfrmauta9w this happens to be what I've been working on. It's not complete but if it helps to see how I'm trying to use things. Basically I want to default most of these optional things to just an empty string and visually group like options together using CSS.

Is there something that specifies all the attributes for the inputs? I've been able to figure out width, height, and visibility. I'm interested in if I can add something like a css class or id so I can target a specific component in CSS. I'm also interested in if there's a container type component that I can group options together with (sort of like a div in html).

This is a sample component I'm talking about.

persona 
      label = Persona
      type = select
      width = 25vw
      height = 5vh
      options
        Default = [{""}]
        Beautiful = (beautiful), (gorgeous), (stunning features), (perfect proportions)
        Cute = (cute), (adorable), (sweet expression), (youthful charm)
top 6 comments
sorted by: hot top new old
[-] qinerous@lemmy.world 1 points 4 weeks ago

https://perchance.org/doc-t2i-framework-plugin-v2

You can use the visible()=> property of components to control their display using conditions. If you set the same display conditions for multiple components, you can group them so that they only appear together.

If you want to access a component through the html code panel, for example, select this persona, then you can use:

document.querySelector('select[data-name="persona "]')

or completely ctn of this component:

document.querySelector('select[data-name="persona "]').closest('.input-ctn')

example of use, hide this component:

const tm = document.querySelector('select[data-name="persona "]').closest('.input-ctn');
tm.style.display = 'none';
[-] moxy@lemmy.world 2 points 3 weeks ago

Thank you so much this helped a lot.

Is there a way to modify the lists dynamically? Let's say based on the value of a checkbox?

For example I have a checkbox to check or uncheck if the user wants to filter shirt options from the clothing dropdown. I've got something like this where I check the value of shirtOptions.checked and try to add an entry to the list if it's true and not if it's false.

  clothes
      label = Clothes?
      type = select
      options
        Default = [{""}]
        [if (shirtOptions.checked) {"T-Shirts = (T-shirt), (Tee-Sirt)"} else {""}]
        Bicycle rider = (bicycle outfit), (cycling jersey), (bike shorts)

in the HTML part of course I have:

<input type="checkbox" id="shirtOptions" checked oninput="update()"/>

However, this is not creating an error in the source but does display "Syntax Error" in the drop down list.

[-] qinerous@lemmy.world 1 points 2 weeks ago

well... It's possible, but it's more complicated than it seems. The problem is that the select elements are static, and in order to change them, you either need to manually interact with the each element or recreate the select by simulating its "update" and giving its options, but since the checkbox has changed, the elements will also change.

I almost got it to work by taking the script for creating these selects from the framework and slightly modifying it to use it to the html of the select element. However, due to issues with Perchance, it reads [ ] as text instead of executing the contents.

Here is the link if you want to see

If you really need it, you can give the codes in the html code panel that I added in to AI chat bot and tell it to evaluate this key that has [brackets] before adding a new option

if you don't want to bother, just split these categories into different Selects (drop down lists)

[-] qinerous@lemmy.world 1 points 2 weeks ago

or.. idk, maybe someone more knowledgeable can correct me

[-] moxy@lemmy.world 2 points 2 weeks ago

Thank you so much. This put me on the right track. Ended up not being too bad. I used javascript on the website to futz with the list directly after it was created. Probably not the most ideal way to do this.

So what this does is shortly after the page loads runs through each option in the settings.userInputs.artStyle.options list and looks to see if nsfw = true. If so it adds a data-nsfw tag to the option entry itself on the html side. It then stores the entire option list in artStyleDropdown.

When the checkbox is clicked the toggleNSFW function runs. If the check box is ticked it displays all the entries that were initially saved when the page was loaded. If it's unticked it'll filter out any of the options with data-nsfw set to true then assigns the resulting list back to the dropdown.

For the newbies like me in the html side below the data-name="artStyle"] is finding the drop down control related to the artStyle list. This should generally match the name of the list.

Here's the javascript I used:

<span>
  <input type="checkbox" checked oninput="toggleNSFW(this);"/> Show NSFW options.
</span>

<script>
let allArtStyles = [];
function toggleNSFW(checkbox) {
  const artStyleDropdown = document.querySelector('select[data-name="artStyle"]');
  if (!artStyleDropdown) return;

  // Save current selection so we don't lose it if it's safe
  const currentVal = artStyleDropdown.value;

  // Clear the dropdown completely
  artStyleDropdown.innerHTML = "";

  // Re-add only the allowed options
  allArtStyles.forEach(option => {
    const isNSFW = option.getAttribute('data-nsfw') === 'true';
    if (checkbox.checked || !isNSFW) {
      artStyleDropdown.add(option);
    }
  });

  //Try to restore the previous selection
  artStyleDropdown.value = currentVal;
  
  // If the previous selection was NSFW and is now gone, default to index 0
  if (artStyleDropdown.selectedIndex === -1) {
    artStyleDropdown.selectedIndex = 0;
  }
}

setTimeout(() => {

  var artStyleDropdown = document.querySelector('select[data-name="artStyle"]');

  if (artStyleDropdown) {
    const styles = settings.userInputs.artStyle.options;
    Array.from(artStyleDropdown).forEach(option => {
      const styleName = option.textContent.trim();
      const isNSFW = styles[styleName]?.nsfw === true;
      // Set the attribute based on the boolean check
      option.setAttribute('data-nsfw', isNSFW);
    });
    // Save a copy of all options before we start removing them
    allArtStyles = Array.from(artStyleDropdown.options);
  } 
}, 100);

I added an entry in the list to tag which entries to show and hide. Here it's the nsfw = true/false. In this example I'm labeling anime as nsfw.

    artStyle
      label = 🎨Art Style
      type = select
      width = 25vw
      height = 5vh
      remember = true
      options
        //https://perchance.org/t2i-styles#edit
        Default
          prompt = [if (input.description != "" || null) {input.description} else {""}]
          negative = [if (input.negative != "" || null) {input.negative} else {""}]
        No style
          prompt = [input.description]
          negative =[input.negative]
        Cartoon
          prompt = [input.description], cartoon-style art, superb bold linework, nice colors and composition
          negative = [input.negative], bad art, boring art, hilariously bad drawings, bad 3D render, 
        Anime   
          nsfw = true
          prompt = [input.description], intricate detail, hyper-anime, (anime), (masterpiece)
          negative = [input.negative], photography, low-quality, deformed, (text), blurry
[-] qinerous@lemmy.world 1 points 2 weeks ago
this post was submitted on 11 Apr 2026
2 points (100.0% liked)

Perchance - Create a Random Text Generator

1844 readers
5 users here now

⚄︎ Perchance

This is a Lemmy Community for perchance.org, a platform for sharing and creating random text generators.

Feel free to ask for help, share your generators, and start friendly discussions at your leisure :)

This community is mainly for discussions between those who are building generators. For discussions about using generators, especially the popular AI ones, the community-led Casual Perchance forum is likely a more appropriate venue.

See this post for the Complete Guide to Posting Here on the Community!

Rules

1. Please follow the Lemmy.World instance rules.

2. Be kind and friendly.

  • Please be kind to others on this community (and also in general), and remember that for many people Perchance is their first experience with coding. We have members for whom English is not their first language, so please be take that into account too :)

3. Be thankful to those who try to help you.

  • If you ask a question and someone has made a effort to help you out, please remember to be thankful! Even if they don't manage to help you solve your problem - remember that they're spending time out of their day to try to help a stranger :)

4. Only post about stuff related to perchance.

  • Please only post about perchance related stuff like generators on it, bugs, and the site.

5. Refrain from requesting Prompts for the AI Tools.

  • We would like to ask to refrain from posting here needing help specifically with prompting/achieving certain results with the AI plugins (text-to-image-plugin and ai-text-plugin) e.g. "What is the good prompt for X?", "How to achieve X with Y generator?"
  • See Perchance AI FAQ for FAQ about the AI tools.
  • You can ask for help with prompting at the 'sister' community Casual Perchance, which is for more casual discussions.
  • We will still be helping/answering questions about the plugins as long as it is related to building generators with them.

6. Search through the Community Before Posting.

  • Please Search through the Community Posts here (and on Reddit) before posting to see if what you will post has similar post/already been posted.

founded 2 years ago
MODERATORS