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)
  • moxy@lemmy.worldOPEnglish
    2·
    6 months 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.worldEnglish
      1·
      6 months 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 <script> </script> 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)

        • moxy@lemmy.worldOPEnglish
          2·
          6 months 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