On how you have your data, you can probably just add a url property for each instance of the source e.g.:

   {
      name: "original",
      label: "Original",
      placeholder: "Click the button below to generate an original quote.",
      data: [
        {
          quote: "Happiness beckons you once you forget you were looking for it.",
          source: "Eleanor Trent, 'Where's Joy?'",
          url: "link here"
        },
        {
          quote: "Memory is just the past asking for a permanent residence permit.",
          source: "Dr. Selim Farouk, 'The Mind's Archive'",
          url: "another link here"
        },
        {
          quote: "No one knows how Sentience is born, but we sure know how to kill it.",
          source: "Dr. Marcus Webb, 'The Philosophy of Consciousness'",
          url: "link here"
        },
        ...

Then you can access it with .url (quoteEntry.url) and set it as the href of the quoteSourceEl.

The Automatic1111 link should have installation procedures on how to install it (and automatic installations) for your device. Here is for NVidia GPUs: https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-NVidia-GPUs

As for the other one, here is the steps on how to install it: https://github.com/Raxephion/Old-Perchance-Revival-WebUI/tree/main?tab=readme-ov-file#-easy-setup-windows---download--run

You need to make the quoteSourceEl to be an <a> tag e.g. <a id="quoteSourceEl" class="source" href="#"></a> , then after you add a href value, it would be a hyperlink.

There should be no problem with linking the defaultCommentOptions on JavaScript, it would be on this part of your code on the HTML:

    ...
    let othersChatDiv = document.createElement('div');
    othersChatDiv.id = 'others-chat-container';
    othersChatDiv.style.display = 'none'; // Hide others chat by default
    
    let mainChatOptions = defaultCommentOptions.createClone;
    mainChatOptions.channel = "qine-main-chat";
    mainChatOptions.commentPlaceholderText = "Casual talk, memes, fun — all here!";
    mainChatOptions.onComment = function (comment) {
      // Handle new comments in Main Chat
      console.log("New comment in Main Chat:", comment);
    }
    let mainChatPlugin = commentsPlugin(mainChatOptions);
    ...

The problem is bannedUsersList is not in the generator, so it gives errors. Removing that from the defaultCommentOptions makes it work.

Consecutive ~ will do that e.g. ~~Test~~, you can maybe just add a space or reduce the number of ~.

If you want ~ you can just use it as is e.g. ~Testing~ no need for escape.

Best way I would think is use the default comment options that you have on the Perchance lists:

defaultCommentOptions // for comments plugin: https://perchance.org/comments-plugin
  width = 100%
  height = 350
  commentPlaceholderText = Leave friendly comments..
  submitButtonText = submit comment
  bannedUsers = [bannedUsersList]
  customEmojis = {import:huge-emoji-list}
  adminFlair = 👑 Creator
  adminPasswordHash = 4b7a8a671d949baf24756f731091d13018de5c2ab4dd2cc1c1612a6643986933

As the base options like so:

let mainChatOptions = defaultCommentOptions.createClone;
mainChatOptions.channel = "qine-main-chat";
mainChatOptions.commentPlaceholderText = "Casual talk, memes, fun — all here!";
mainChatOptions.onComment = function (comment) {
  // Handle new comments in Main Chat
  console.log("New comment in Main Chat:", comment);
}
let mainChatPlugin = commentsPlugin(mainChatOptions);

Can you link the page you are working with?

See this related thread for importing through JS.

Instead of manipulating the iframe src, I just re-instantiated the galleries with updated options: https://perchance.org/gwn80163bc

Used createPerchanceTree to create a new perchance list for the banned prompt phrases.

So, on your:

<div class="flex">[output]</div>

You need to enclose the [output] in a div for the Update Rows to work since it looks for the number of div on the .flex container like so:

<div class="flex"><div>[output]</div></div>

Also, you changed the start of the 'for loop' on the update rows with let i = numRows - 1 which would mean it can only update one row since the loop terminates if it exceeds the numRows. Just use the let i = 0.

If you want to only update the 'last' row, you can do:

function updateLast() {
  let lastRow = [...document.querySelector(".flex").querySelectorAll('div')].at(-1)
  lastRow.innerHTML = output
}

So, on the .flex container, every time you add the output on the innerHTML, it would essentially re-run the 'evaluation' of the square brackets, which would also update the container - which updates the previous images. Best way is to not alter the InnerHTML by concatenating and use .appendChild instead. Ex:

  function addImageRow() {
    let con = document.createElement('div');
    con.innerHTML = output
    document.querySelector(".flex").appendChild(con);
  }

But since this wouldn't have any square brackets, you cannot use the regular update() function to reload them. Here's a function to update them:

function updateRows() {
    let numRows = document.querySelector(".flex").querySelectorAll('div').length
    document.querySelector(".flex").innerHTML = ''
    for (let i = 0; i < numRows; i++) {
      let con = document.createElement('div');
      con.innerHTML = output
      document.querySelector(".flex").appendChild(con);
    }
  }