☰

Display Image Alt Text on Rank V6

Display the alt text of images on the Rank V6 page of Midjourney

  1. // ==UserScript==
  2. // @name         Display Image Alt Text on Rank V6
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2023-12-16
  5. // @description  Display the alt text of images on the Rank V6 page of Midjourney
  6. // @author       GuiTx - ChatGPT
  7. // @match        https://www.midjourney.com/rank-v6
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=midjourney.com
  9. // @grant        none
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Function to add alt text div to an image
  17.     function addAltTextToImage(image) {
  18.         if (image.parentNode.classList.contains('alt-text-added')) {
  19.             return; // Skip if alt text already added
  20.         }
  21.  
  22.         // Create a new div element to hold the alt text
  23.         var altTextDiv = document.createElement('div');
  24.         altTextDiv.textContent = image.alt;
  25.         altTextDiv.style.cssText = `
  26.             position: absolute;
  27.             top: 0;
  28.             left: 0;
  29.             color: white;
  30.             background-color: rgba(0, 0, 0, 0.7);
  31.             padding: 5px;
  32.             border-radius: 5px;
  33.             font-size: 12px;
  34.             max-width: 100%;
  35.             word-wrap: break-word;
  36.         `;
  37.  
  38.         // Position the div over the image
  39.         var containerDiv = document.createElement('div');
  40.         containerDiv.style.cssText = 'position: relative; display: inline-block;';
  41.         image.parentNode.insertBefore(containerDiv, image);
  42.         containerDiv.appendChild(image);
  43.         containerDiv.appendChild(altTextDiv);
  44.         containerDiv.classList.add('alt-text-added');
  45.     }
  46.  
  47.     // Observer to handle dynamically loaded images
  48.     var observer = new MutationObserver(function(mutations) {
  49.         mutations.forEach(function(mutation) {
  50.             mutation.addedNodes.forEach(function(node) {
  51.                 if (node.nodeName === 'IMG' && node.alt) {
  52.                     addAltTextToImage(node);
  53.                 }
  54.             });
  55.         });
  56.     });
  57.  
  58.     // Start observing the body for added nodes
  59.     observer.observe(document.body, { childList: true, subtree: true });
  60.  
  61.     // Initial run for images already on the page
  62.     document.querySelectorAll('img[alt]').forEach(addAltTextToImage);
  63. })();