[enhancement]: ui mobile design

[berkut1]

Is there an existing issue for this?

• I have searched the existing issues

OS

Windows

GPU

cuda

VRAM

8GB

What version did you experience this issue on?

3.0.1

What happened?

Starting from version 3.0 the web design for mobile devices was broken.
In phone view mode, you can only see the left panel.

Screenshots

No response

Additional context

Launch InvokeAI on the PC/Server and go to the website from the phone.

Contact Details

No response

[psychedelicious]

Hi, this is not a bug - we haven't implemented a mobile version for v3 yet. I've converted this into an enhancement requesting a mobile design.

For context, v3.0 is a near-complete-rewrite of the entire application. Because the design was being constantly changed, it didn't make sense to attempt to implement a mobile version. Now that things are stabilizing, we can put more time into this.

[panicsteve]

Adding a quick +1. For reference, 2.x did a decent job of degrading on mobile, by vertically stacking the three "columns" of the UI (the left sidebar with all the parameters, the image area, and the gallery) when viewed on narrow screens. A lot of scrolling, but you could still get to everything and use it fairly effectively. I'm terrible at CSS but maybe a CSS wizard could tackle this layout fallback fairly quickly.

Beyond the layout, there are a handful of other things, such as the newer pop-up menus (with the keyboard autocompletion functionality) which are fairly hostile to touch interfaces. They tend to disappear when you try to scroll them, etc.

Anyway, just glad to hear it's on the radar! Keep up the awesome work.

[DavidSchobl]

Is it still on radar? I use all web UIs, invoke is very interresting, BUT using it on cellphone is total pain.

[psychedelicious]

Yes, it is on the radar, but there is no timeline yet.

[sammcj]

Super keen for this.

Quite often I’m not at my computer but have an idea/concept I’d like to quickly draft up for later refinement.

[mm2srv]

i also would love an optimized "lite" version for mobile phones.

my current use-case was to get gallery images easily on my phone to share them via some messenger apps, instead of downloading and getting it on the phone somehow just to quickly share it with a friend.

created this ugly and cheap hack to only display the gallery if you browse to your invokeai instance via http://url-or-ip:9090/#mobile-gallery

https://gist.github.com/mm2srv/6ddeb11054b1e3c1b26e78081396af2e

on iphone, with chrome, you can hold down on the image for 1-2 seconds and it says Image Copy, then you can simply paste it into any messenger and whatever. this makes the turnaround from wanting to share or create an image for a friend so much quicker, while still being in control of where i paste this image, instead of some global cloud sharing feature that might get build.

this solved my current case. but it would be perfect to even being able to use the full (or just text to image) on mobile. i do understand how much work it requires and the work is probably better put on the real app.

[randomboygh]

Hello everyone.

I apologize for reviving an old thread, but I have been waiting for the mobile version (since 2.3.5.post2) for a long time, and it still hasn't been released. Therefore, I decided to make a similar modification for the latest version of InvokeAI (5.6.0).

To do this, you need to edit the file /opt/invokeai/invokeai/frontend/web/dist/index.html (your path may vary depending on your installation method): After <script type="module" crossorigin src="./assets/index-**YOUR_ID**.js"></script>, add this code (replacing the style names with your own - use inspector for this):

  <script>
    function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }
            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    observer.disconnect();
                    resolve(document.querySelector(selector));
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });
        });
    }
    document.addEventListener("DOMContentLoaded", function() {
      var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      if (isMobile) {
        waitForElm('#app-panel-group[data-panel-group]').then((appPanelGroup) => {
          appPanelGroup.setAttribute('data-panel-group-direction', 'vertical');
          appPanelGroup.style.flexDirection = 'column';
        });
        waitForElm('#left-main-handle').then((leftMainHandle) => {
          leftMainHandle.setAttribute('data-panel-group-direction', 'vertical');
        });
        waitForElm('#main-right-handle').then((mainRightHandle) => {
          mainRightHandle.setAttribute('data-panel-group-direction', 'vertical');
        });
        Promise.all([
          waitForElm('#app-panel-group'),
          waitForElm('div[data-theme="dark"].css-126fo1u')   // you should replace this to your own css id
        ]).then(([appPanelGroup, elementToMove]) => {
          appPanelGroup.appendChild(elementToMove);
        });
        waitForElm('div[data-theme="dark"].css-126fo1u').then((element) => {   // you should replace this to your own css id
          element.style.flexDirection = 'row';
        });
        waitForElm('div[data-theme="dark"].css-91bg5e').then((element) => {   // you should replace this to your own css id
          element.style.flexDirection = 'row';
          element.style.paddingTop = '0';
        });
      }
    });
  </script>

The block

      var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      if (isMobile) {
        ...
      }

is optional — it is used to check which device you are using InvokeAI from.

Then your interface will look something like this:



It's not easy, but you can even use nodes.

[JamesClarke7283]

/invokeai/frontend/web/dist/index.html

This is very cool!

How do i get those CSS selector ids for my instance? I found a more dynamic way to do the selectors, but would like to know your approach.

Some of yours don't apply on my instance and am getting errors. I might tweak it later once it works fully as i cant yet fully adapt it to how the screenshots look.

I am adapting your script to make a Greasemonkey script for it for myself but may publish once it works, i will cite you in the copyright notice of course as original author of code, could you DM me your email+name so i can attribute you? also is MIT/Apache2.0 fine?

my email is james@jamesdavidclarke.com

Many thanks.

[JamesClarke7283]

I made a Greasemokey Userscript, based on your implementation. It doesn't work fully yet to how i want but think its worth posting here.
I haven't put a license yet because its based on yours, and i dont know what your license is on that code yet.
I would recommend MIT or Apache2.0.

// ==UserScript==
// @name         InvokeAI Mobile Optimization PoC
// @version      0.1.0
// @description  Mobile optimization for InvokeAI based on March 2025 PoC
// @author       James Clarke, based on randomboygh's work: (https://github.com/invoke-ai/InvokeAI/issues/4111#issuecomment-2650473566)
// @match        https://my-invokeai-instance.tld/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
  "use strict";

  function waitForElm(selector) {
    return new Promise((resolve) => {
      if (document.querySelector(selector)) {
        return resolve(document.querySelector(selector));
      }
      const observer = new MutationObserver((mutations) => {
        if (document.querySelector(selector)) {
          observer.disconnect();
          resolve(document.querySelector(selector));
        }
      });
      observer.observe(document.body, { childList: true, subtree: true });
    });
  }

  // Helper function to find elements by their visual characteristics
  function findElementByCharacteristics(characteristics) {
    // Log all theme divs to console to help identify them
    console.log("Theme divs:", document.querySelectorAll("div[data-theme]"));

    // This is where you'd implement logic to find the element
    // For now, we'll return null and rely on manual identification
    return null;
  }

  document.addEventListener("DOMContentLoaded", function () {
    var isMobile =
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      );
    if (isMobile) {
      waitForElm("#app-panel-group[data-panel-group]").then((appPanelGroup) => {
        appPanelGroup.setAttribute("data-panel-group-direction", "vertical");
        appPanelGroup.style.flexDirection = "column";
      });
      waitForElm("#left-main-handle").then((leftMainHandle) => {
        leftMainHandle.setAttribute("data-panel-group-direction", "vertical");
      });
      waitForElm("#main-right-handle").then((mainRightHandle) => {
        mainRightHandle.setAttribute("data-panel-group-direction", "vertical");
      });

      Promise.all([
        waitForElm("#app-panel-group"),
        waitForElm('#invoke-app-tabs > div[data-theme="dark"]'),
      ]).then(([appPanelGroup, elementToMove]) => {
        if (elementToMove) {
          appPanelGroup.appendChild(elementToMove);
        } else {
          console.error("Could not find the element to move");
        }
      });

      waitForElm('button[aria-label="Toggle Right Panel (G)"]').then(
        (toggleButton) => {
          if (toggleButton) {
            toggleButton.click();
            console.log("Toggled right panel");
          } else {
            console.error("Toggle button not found");
          }
        }
      );

      waitForElm('.chakra-image[alt="invoke-logo"]').then((logoImage) => {
        const outerDiv = logoImage
          ? logoImage.closest('div[data-theme="dark"]')
          : null;
        if (outerDiv) {
          outerDiv.style.flexDirection = "row";
        }
      });

      waitForElm('.chakra-button[data-testid="Canvas"]').then(
        (canvasButton) => {
          const innerDiv = canvasButton
            ? canvasButton.closest('div[data-theme="dark"]')
            : null;
          if (innerDiv) {
            innerDiv.style.flexDirection = "row";
            innerDiv.style.paddingTop = "0";
          }
        }
      );
    }
  });
})();

ScreenShots:

Gallery: