Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
InvokeAI/features/WEB/index.html

2814 lines
64 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="mauwii">
<link rel="canonical" href="https://invoke-ai.github.io/InvokeAI/features/WEB/">
<link rel="prev" href="../UNIFIED_CANVAS/">
<link rel="next" href="../WEBUIHOTKEYS/">
<link rel="icon" href="../../img/favicon.ico">
<meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.33">
<title>InvokeAI Web Server - InvokeAI Documentation</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.3cba04c6.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../assets/_mkdocstrings.css">
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-2X4JR4S4FB"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-2X4JR4S4FB",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-2X4JR4S4FB",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
</head>
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#invokeai-web-server" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="InvokeAI Documentation" class="md-header__button md-logo" aria-label="InvokeAI Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
InvokeAI Documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
InvokeAI Web Server
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/invoke-ai/InvokeAI" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
invoke-ai/InvokeAI
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../installation/INSTALLATION/" class="md-tabs__link">
Installation
</a>
</li>
<li class="md-tabs__item">
<a href="../../nodes/overview/" class="md-tabs__link">
Workflows & Nodes
</a>
</li>
<li class="md-tabs__item">
<a href="../../nodes/communityNodes/" class="md-tabs__link">
Community Nodes
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../" class="md-tabs__link">
Features
</a>
</li>
<li class="md-tabs__item">
<a href="../../contributing/CONTRIBUTING/" class="md-tabs__link">
Contributing
</a>
</li>
<li class="md-tabs__item">
<a href="../../help/gettingStartedWithAI/" class="md-tabs__link">
Help
</a>
</li>
<li class="md-tabs__item">
<a href="../../other/CONTRIBUTORS/" class="md-tabs__link">
Other
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="InvokeAI Documentation" class="md-nav__button md-logo" aria-label="InvokeAI Documentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
InvokeAI Documentation
</label>
<div class="md-nav__source">
<a href="https://github.com/invoke-ai/InvokeAI" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
invoke-ai/InvokeAI
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Installation
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Installation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../installation/INSTALLATION/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/INSTALL_REQUIREMENTS/" class="md-nav__link">
<span class="md-ellipsis">
Requirements
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/010_INSTALL_AUTOMATED/" class="md-nav__link">
<span class="md-ellipsis">
Automatic Install
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/020_INSTALL_MANUAL/" class="md-nav__link">
<span class="md-ellipsis">
Manual Install
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/INSTALL_DEVELOPMENT/" class="md-nav__link">
<span class="md-ellipsis">
Developer Install
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/040_INSTALL_DOCKER/" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/050_INSTALLING_MODELS/" class="md-nav__link">
<span class="md-ellipsis">
Installing Models
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../installation/060_INSTALL_PATCHMATCH/" class="md-nav__link">
<span class="md-ellipsis">
Installing PyPatchMatch
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Workflows & Nodes
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Workflows & Nodes
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../nodes/overview/" class="md-nav__link">
<span class="md-ellipsis">
Nodes Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/NODES/" class="md-nav__link">
<span class="md-ellipsis">
Workflow Editor Basics
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/defaultNodes/" class="md-nav__link">
<span class="md-ellipsis">
List of Default Nodes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/exampleWorkflows/" class="md-nav__link">
<span class="md-ellipsis">
Example Workflows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/comfyToInvoke/" class="md-nav__link">
<span class="md-ellipsis">
ComfyUI to InvokeAI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/detailedNodes/faceTools/" class="md-nav__link">
<span class="md-ellipsis">
Facetool Node
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/contributingNodes/" class="md-nav__link">
<span class="md-ellipsis">
Contributing Nodes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/NODES_MIGRATION_V3_V4/" class="md-nav__link">
<span class="md-ellipsis">
Migrating from v3 to v4
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/INVOCATION_API/" class="md-nav__link">
<span class="md-ellipsis">
Invocation API
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../nodes/communityNodes/" class="md-nav__link">
<span class="md-ellipsis">
Community Nodes
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
Features
</span>
</a>
<label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Features
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../help/gettingStartedWithAI/" class="md-nav__link">
<span class="md-ellipsis">
New to InvokeAI?
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../CONFIGURATION/" class="md-nav__link">
<span class="md-ellipsis">
Configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DATABASE/" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../CONTROLNET/" class="md-nav__link">
<span class="md-ellipsis">
Control Adapters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../IMG2IMG/" class="md-nav__link">
<span class="md-ellipsis">
Image-to-Image
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../LOGGING/" class="md-nav__link">
<span class="md-ellipsis">
Controlling Logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../LORAS/" class="md-nav__link">
<span class="md-ellipsis">
LoRAs & LCM-LoRAs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../MODEL_MERGING/" class="md-nav__link">
<span class="md-ellipsis">
Model Merging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../nodes/overview" class="md-nav__link">
<span class="md-ellipsis">
Workflows & Nodes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../WATERMARK%2BNSFW/" class="md-nav__link">
<span class="md-ellipsis">
NSFW Checker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../POSTPROCESS/" class="md-nav__link">
<span class="md-ellipsis">
Postprocessing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PROMPTS/" class="md-nav__link">
<span class="md-ellipsis">
Prompting Features
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_14" >
<label class="md-nav__link" for="__nav_5_14" id="__nav_5_14_label" tabindex="0">
<span class="md-ellipsis">
Textual Inversions
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_14">
<span class="md-nav__icon md-icon"></span>
Textual Inversions
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../TEXTUAL_INVERSIONS/" class="md-nav__link">
<span class="md-ellipsis">
Textual Inversions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../TRAINING/" class="md-nav__link">
<span class="md-ellipsis">
Textual Inversion Training
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../UNIFIED_CANVAS/" class="md-nav__link">
<span class="md-ellipsis">
Unified Canvas
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
InvokeAI Web Server
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
InvokeAI Web Server
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#quick-guided-walkthrough-of-the-webuis-features" class="md-nav__link">
<span class="md-ellipsis">
Quick guided walkthrough of the WebUI's features
</span>
</a>
<nav class="md-nav" aria-label="Quick guided walkthrough of the WebUI's features">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#launching-the-webui" class="md-nav__link">
<span class="md-ellipsis">
Launching the WebUI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#the-invokeai-web-interface" class="md-nav__link">
<span class="md-ellipsis">
The InvokeAI Web Interface
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#walkthrough" class="md-nav__link">
<span class="md-ellipsis">
Walkthrough
</span>
</a>
<nav class="md-nav" aria-label="Walkthrough">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#text-to-image" class="md-nav__link">
<span class="md-ellipsis">
Text to Image
</span>
</a>
<nav class="md-nav" aria-label="Text to Image">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#basics" class="md-nav__link">
<span class="md-ellipsis">
Basics
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#upscaling" class="md-nav__link">
<span class="md-ellipsis">
Upscaling
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#image-to-image" class="md-nav__link">
<span class="md-ellipsis">
Image to Image
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#textual-inversion-lora-and-controlnet" class="md-nav__link">
<span class="md-ellipsis">
Textual Inversion, LoRA and ControlNet
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#summary" class="md-nav__link">
<span class="md-ellipsis">
Summary
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#acknowledgements" class="md-nav__link">
<span class="md-ellipsis">
Acknowledgements
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../WEBUIHOTKEYS/" class="md-nav__link">
<span class="md-ellipsis">
WebUI Hotkeys
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../UTILITIES/" class="md-nav__link">
<span class="md-ellipsis">
Maintenance Utilities
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../OTHER/" class="md-nav__link">
<span class="md-ellipsis">
Other
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Contributing
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Contributing
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../contributing/CONTRIBUTING/" class="md-nav__link">
<span class="md-ellipsis">
How to Contribute
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../CODE_OF_CONDUCT/" class="md-nav__link">
<span class="md-ellipsis">
InvokeAI Code of Conduct
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" >
<label class="md-nav__link" for="__nav_6_3" id="__nav_6_3_label" tabindex="0">
<span class="md-ellipsis">
Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_3">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../contributing/contribution_guides/development/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/contribution_guides/newContributorChecklist/" class="md-nav__link">
<span class="md-ellipsis">
New Contributors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/MODEL_MANAGER/" class="md-nav__link">
<span class="md-ellipsis">
Model Manager v2
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/contribution_guides/contributingToFrontend.md" class="md-nav__link">
<span class="md-ellipsis">
Frontend Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/LOCAL_DEVELOPMENT/" class="md-nav__link">
<span class="md-ellipsis">
Local Development
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/TESTS/" class="md-nav__link">
<span class="md-ellipsis">
Testing
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3_7" >
<label class="md-nav__link" for="__nav_6_3_7" id="__nav_6_3_7_label" tabindex="0">
<span class="md-ellipsis">
Frontend
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_6_3_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_3_7">
<span class="md-nav__icon md-icon"></span>
Frontend
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../contributing/frontend/OVERVIEW/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/frontend/STATE_MGMT/" class="md-nav__link">
<span class="md-ellipsis">
State Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/frontend/WORKFLOWS/" class="md-nav__link">
<span class="md-ellipsis">
Workflows
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../contributing/contribution_guides/documentation/" class="md-nav__link">
<span class="md-ellipsis">
Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/INVOCATIONS/" class="md-nav__link">
<span class="md-ellipsis">
Nodes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/MODEL_MANAGER/" class="md-nav__link">
<span class="md-ellipsis">
Model Manager v2
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/DOWNLOAD_QUEUE/" class="md-nav__link">
<span class="md-ellipsis">
Download Queue
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/contribution_guides/translation/" class="md-nav__link">
<span class="md-ellipsis">
Translation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contributing/contribution_guides/tutorials/" class="md-nav__link">
<span class="md-ellipsis">
Tutorials
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-ellipsis">
Help
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Help
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../help/gettingStartedWithAI/" class="md-nav__link">
<span class="md-ellipsis">
New to InvokeAI?
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../help/FAQ/" class="md-nav__link">
<span class="md-ellipsis">
FAQ
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../help/diffusion/" class="md-nav__link">
<span class="md-ellipsis">
Diffusion Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../help/SAMPLER_CONVERGENCE/" class="md-nav__link">
<span class="md-ellipsis">
Sampler Convergence
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" >
<label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0">
<span class="md-ellipsis">
Other
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_8">
<span class="md-nav__icon md-icon"></span>
Other
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../other/CONTRIBUTORS/" class="md-nav__link">
<span class="md-ellipsis">
Contributors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../other/README-CompViz/" class="md-nav__link">
<span class="md-ellipsis">
CompViz-README
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="invokeai-web-server"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2 0-.68.06-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.923 7.923 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8.008 8.008 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.65 15.65 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg></span> InvokeAI Web Server<a class="headerlink" href="#invokeai-web-server" title="Permanent link">#</a></h1>
<h2 id="quick-guided-walkthrough-of-the-webuis-features">Quick guided walkthrough of the WebUI's features<a class="headerlink" href="#quick-guided-walkthrough-of-the-webuis-features" title="Permanent link">#</a></h2>
<p>While most of the WebUI's features are intuitive, here is a guided walkthrough
through its various components.</p>
<h3 id="launching-the-webui">Launching the WebUI<a class="headerlink" href="#launching-the-webui" title="Permanent link">#</a></h3>
<p>To run the InvokeAI web server, start the <code>invoke.sh</code>/<code>invoke.bat</code>
script and select option (1). Alternatively, with the InvokeAI
environment active, run <code>invokeai-web</code>:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>invokeai-web
</code></pre></div>
<p>You can then connect to the server by pointing your web browser at
<a href="http://localhost:9090">http://localhost:9090</a>. To reach the server from a different machine on your LAN,
you may launch the web server with the <code>--host</code> argument and either the IP
address of the host you are running it on, or the wildcard <code>0.0.0.0</code>. For
example:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>invoke.sh<span class="w"> </span>--host<span class="w"> </span><span class="m">0</span>.0.0.0
</code></pre></div>
<p>or</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a>invokeai-web<span class="w"> </span>--host<span class="w"> </span><span class="m">0</span>.0.0.0
</code></pre></div>
<h3 id="the-invokeai-web-interface">The InvokeAI Web Interface<a class="headerlink" href="#the-invokeai-web-interface" title="Permanent link">#</a></h3>
<p><img alt="Invoke Web Server - Major Components" src="../../assets/invoke-web-server-1.png" width="640px" /></p>
<p>The screenshot above shows the Text to Image tab of the WebUI. There are three
main sections:</p>
<ol>
<li>
<p>A <strong>control panel</strong> on the left, which contains various settings
for text to image generation. The most important part is the text
field (currently showing <code>fantasy painting, horned demon</code>) for
entering the positive text prompt, another text field right below it for an
optional negative text prompt (concepts to exclude), and a <em>Invoke</em> button
to begin the image rendering process.</p>
</li>
<li>
<p>The <strong>current image</strong> section in the middle, which shows a large
format version of the image you are currently working on. A series
of buttons at the top lets you modify and manipulate the image in
various ways.</p>
</li>
<li>
<p>A <strong>gallery</strong> section on the right that contains a history of the images you
have generated. These images are read and written to the directory specified
in the <code>INVOKEAIROOT/invokeai.yaml</code> initialization file, usually a directory
named <code>outputs</code> in <code>INVOKEAIROOT</code>.</p>
</li>
</ol>
<p>In addition to these three elements, there are a series of icons for changing
global settings, reporting bugs, and changing the theme on the upper right.</p>
<p>There are also a series of icons to the left of the control panel (see
highlighted area in the screenshot below) which select among a series of tabs
for performing different types of operations.</p>
<figure>
<p><img alt="Invoke Web Server - Control Panel" src="../../assets/invoke-web-server-2.png" width="512px" /></p>
</figure>
<p>From top to bottom, these are:</p>
<ol>
<li>Text to Image - generate images from text</li>
<li>Image to Image - from an uploaded starting image (drawing or photograph)
generate a new one, modified by the text prompt</li>
<li>Unified Canvas - Interactively combine multiple images, extend them
with outpainting,and modify interior portions of the image with
inpainting, erase portions of a starting image and have the AI fill in
the erased region from a text prompt.</li>
<li>Node Editor - (experimental) this panel allows you to create
pipelines of common operations and combine them into workflows.</li>
<li>Model Manager - this panel allows you to import and configure new
models using URLs, local paths, or HuggingFace diffusers repo_ids.</li>
</ol>
<h2 id="walkthrough">Walkthrough<a class="headerlink" href="#walkthrough" title="Permanent link">#</a></h2>
<p>The following walkthrough will exercise most (but not all) of the WebUI's
feature set.</p>
<h3 id="text-to-image">Text to Image<a class="headerlink" href="#text-to-image" title="Permanent link">#</a></h3>
<ol>
<li>
<p>Launch the WebUI using launcher option [1] and connect to it with
your browser by accessing <code>http://localhost:9090</code>. If the browser
and server are running on different machines on your LAN, add the
option <code>--host 0.0.0.0</code> to the <code>invoke.sh</code> launch command line and connect to
the machine hosting the web server using its IP address or domain
name.</p>
</li>
<li>
<p>If all goes well, the WebUI should come up and you'll see a green dot
meaning <code>connected</code> on the upper right.</p>
</li>
</ol>
<p><img align="right" alt="Invoke Web Server - Control Panel" src="../../assets/invoke-control-panel-1.png" width="300px" /></p>
<h4 id="basics">Basics<a class="headerlink" href="#basics" title="Permanent link">#</a></h4>
<ol>
<li>
<p>Generate an image by typing <em>bluebird</em> into the large prompt field
on the upper left and then clicking on the Invoke button or pressing
the return button.
After a short wait, you'll see a large image of a bluebird in the
image panel, and a new thumbnail in the gallery on the right.</p>
<p>If you need more room on the screen, you can turn the gallery off
by typing the <strong>g</strong> hotkey. You can turn it back on later by clicking the
image icon that appears in the gallery's place. The list of hotkeys can
be found by clicking on the keyboard icon above the image gallery.</p>
</li>
<li>
<p>Generate a bunch of bluebird images by increasing the number of
requested images by adjusting the Images counter just below the Invoke
button. As each is generated, it will be added to the gallery. You can
switch the active image by clicking on the gallery thumbnails.</p>
<p>If you'd like to watch the image generation progress, click the hourglass
icon above the main image area. As generation progresses, you'll see
increasingly detailed versions of the ultimate image.</p>
</li>
<li>
<p>Try playing with different settings, including changing the main
model, the image width and height, the Scheduler, the Steps and
the CFG scale.</p>
<p>The <em>Model</em> changes the main model. Thousands of custom models are
now available, which generate a variety of image styles and
subjects. While InvokeAI comes with a few starter models, it is
easy to import new models into the application. See <a href="../../installation/050_INSTALLING_MODELS/">Installing
Models</a> for more details.</p>
<p>Image <em>Width</em> and <em>Height</em> do what you'd expect. However, be aware that
larger images consume more VRAM memory and take longer to generate.</p>
<p>The <em>Scheduler</em> controls how the AI selects the image to display. Some
samplers are more "creative" than others and will produce a wider range of
variations (see next section). Some samplers run faster than others.</p>
<p><em>Steps</em> controls how many noising/denoising/sampling steps the AI will take.
The higher this value, the more refined the image will be, but the longer
the image will take to generate. A typical strategy is to generate images
with a low number of steps in order to select one to work on further, and
then regenerate it using a higher number of steps.</p>
<p>The <em>CFG Scale</em> controls how hard the AI tries to match the generated image
to the input prompt. You can go as high or low as you like, but generally
values greater than 20 won't improve things much, and values lower than 5
will produce unexpected images. There are complex interactions between
<em>Steps</em>, <em>CFG Scale</em> and the <em>Scheduler</em>, so experiment to find out what works
for you.</p>
<p>The <em>Seed</em> controls the series of values returned by InvokeAI's
random number generator. Each unique seed value will generate a different
image. To regenerate a previous image, simply use the original image's
seed value. A slider to the right of the <em>Seed</em> field will change the
seed each time an image is generated.</p>
</li>
</ol>
<p><img align="right" alt="Invoke Web Server - Control Panel 2" src="../../assets/control-panel-2.png" width="400px" /></p>
<ol>
<li>
<p>To regenerate a previously-generated image, select the image you
want and click the asterisk ("*") button at the top of the
image. This loads the text prompt and other original settings into
the control panel. If you then press <em>Invoke</em> it will regenerate
the image exactly. You can also selectively modify the prompt or
other settings to tweak the image.</p>
<p>Alternatively, you may click on the "sprouting plant icon" to load
just the image's seed, and leave other settings unchanged or the
quote icon to load just the positive and negative prompts.</p>
</li>
<li>
<p>To regenerate a Stable Diffusion image that was generated by another SD
package, you need to know its text prompt and its <em>Seed</em>. Copy-paste the
prompt into the prompt box, unset the <em>Randomize Seed</em> control in the
control panel, and copy-paste the desired <em>Seed</em> into its text field. When
you Invoke, you will get something similar to the original image. It will
not be exact unless you also set the correct values for the original
sampler, CFG, steps and dimensions, but it will (usually) be close.</p>
</li>
<li>
<p>To save an image, right click on it to bring up a menu that will
let you download the image, save it to a named image gallery, and
copy it to the clipboard, among other things.</p>
</li>
</ol>
<h4 id="upscaling">Upscaling<a class="headerlink" href="#upscaling" title="Permanent link">#</a></h4>
<p><img align="right" alt="Invoke Web Server - Upscaling" src="../../assets/upscaling.png" width="400px" /></p>
<p>"Upscaling" is the process of increasing the size of an image while
retaining the sharpness. InvokeAI uses an external library called
"ESRGAN" to do this. To invoke upscaling, simply select an image
and press the "expanding arrows" button above it. You can select
between 2X and 4X upscaling, and adjust the upscaling strength,
which has much the same meaning as in facial reconstruction. Try
running this on one of your previously-generated images.</p>
<h3 id="image-to-image">Image to Image<a class="headerlink" href="#image-to-image" title="Permanent link">#</a></h3>
<p>InvokeAI lets you take an existing image and use it as the basis for a new
creation. You can use any sort of image, including a photograph, a scanned
sketch, or a digital drawing, as long as it is in PNG or JPEG format.</p>
<p>For this tutorial, we'll use the file named
<a href="../../assets/Lincoln-and-Parrot-512.png">Lincoln-and-Parrot-512.png</a>.</p>
<ol>
<li>
<p>Click on the <em>Image to Image</em> tab icon, which is the second icon
from the top on the left-hand side of the screen. This will bring
you to a screen similar to the one shown here:</p>
<p><img alt="Invoke Web Server - Image to Image Tab" src="../../assets/invoke-web-server-6.png" width="640px" /></p>
</li>
<li>
<p>Drag-and-drop the Lincoln-and-Parrot image into the Image panel, or click
the blank area to get an upload dialog. The image will load into an area
marked <em>Initial Image</em>. (The WebUI will also load the most
recently-generated image from the gallery into a section on the left, but
this image will be replaced in the next step.)</p>
</li>
<li>
<p>Go to the prompt box and type <em>old sea captain with raven on shoulder</em> and
press Invoke. A derived image will appear to the right of the original one:</p>
<p><img alt="Invoke Web Server - Image to Image example" src="../../assets/invoke-web-server-7.png" width="640px" /></p>
</li>
<li>
<p>Experiment with the different settings. The most influential one in Image to
Image is <em>Denoising Strength</em> located about midway down the control
panel. By default it is set to 0.75, but can range from 0.0 to 0.99. The
higher the value, the more of the original image the AI will replace. A
value of 0 will leave the initial image completely unchanged, while 0.99
will replace it completely. However, the <em>Scheduler</em> and <em>CFG Scale</em> also
influence the final result. You can also generate variations in the same way
as described in Text to Image.</p>
</li>
<li>
<p>What if we only want to change certain part(s) of the image and
leave the rest intact? This is called Inpainting, and you can do
it in the <a href="../UNIFIED_CANVAS/">Unified Canvas</a>. The Unified Canvas
also allows you to extend borders of the image and fill in the
blank areas, a process called outpainting.</p>
</li>
<li>
<p>Would you like to modify a previously-generated image using the Image to
Image facility? Easy! While in the Image to Image panel, drag and drop any
image in the gallery into the Initial Image area, and it will be ready for
use. You can do the same thing with the main image display. Click on the
<em>Send to</em> icon to get a menu of
commands and choose "Send to Image to Image".</p>
<p><img alt="Send To Icon" src="../../assets/send-to-icon.png" /> </p>
</li>
</ol>
<h3 id="textual-inversion-lora-and-controlnet">Textual Inversion, LoRA and ControlNet<a class="headerlink" href="#textual-inversion-lora-and-controlnet" title="Permanent link">#</a></h3>
<p>InvokeAI supports several different types of model files that
extending the capabilities of the main model by adding artistic
styles, special effects, or subjects. By mixing and matching textual
inversion, LoRA and ControlNet models, you can achieve many
interesting and beautiful effects.</p>
<p>We will give an example using a LoRA model named "Ink Scenery". This
LoRA, which can be downloaded from Civitai (civitai.com), is
specialized to paint landscapes that look like they were made with
dripping india ink. To install this LoRA, we first download it and
put it into the <code>autoimport/lora</code> folder located inside the
<code>invokeai</code> root directory. After restarting the web server, the
LoRA will now become available for use.</p>
<p>To see this LoRA at work, we'll first generate an image without it
using the standard <code>stable-diffusion-v1-5</code> model. Choose this
model and enter the prompt "mountains, ink". Here is a typical
generated image, a mountain range rendered in ink and watercolor
wash:</p>
<p><img alt="Ink Scenery without LoRA" src="../../assets/lora-example-0.png" width="512px" /></p>
<p>Now let's install and activate the Ink Scenery LoRA. Go to
<a href="https://civitai.com/models/78605/ink-scenery-or">https://civitai.com/models/78605/ink-scenery-or</a> and download the LoRA
model file to <code>invokeai/autoimport/lora</code> and restart the web
server. (Alternatively, you can use <a href="../../installation/050_INSTALLING_MODELS/">InvokeAI's Web Model
Manager</a> to download and
install the LoRA directly by typing its URL into the <em>Import
Models</em>-&gt;<em>Location</em> field).</p>
<p>Scroll down the control panel until you get to the LoRA accordion
section, and open it:</p>
<p><img alt="LoRA Section" src="../../assets/lora-example-1.png" width="512px" /></p>
<p>Click the popup menu and select "Ink scenery". (If it isn't there, then
the model wasn't installed to the right place, or perhaps you forgot
to restart the web server.) The LoRA section will change to look like this:</p>
<p><img alt="LoRA Section Loaded" src="../../assets/lora-example-2.png" width="512px" /></p>
<p>Note that there is now a slider control for <em>Ink scenery</em>. The slider
controls how much influence the LoRA model will have on the generated
image.</p>
<p>Run the "mountains, ink" prompt again and observe the change in style:</p>
<p><img alt="Ink Scenery" src="../../assets/lora-example-3.png" width="512px" /></p>
<p>Try adjusting the weight slider for larger and smaller weights and
generate the image after each adjustment. The higher the weight, the
more influence the LoRA will have.</p>
<p>To remove the LoRA completely, just click on its trash can icon.</p>
<p>Multiple LoRAs can be added simultaneously and combined with textual
inversions and ControlNet models. Please see <a href="CONCEPTS.md">Textual Inversions and
LoRAs</a> and <a href="../CONTROLNET/">Using ControlNet</a> for details.</p>
<h2 id="summary">Summary<a class="headerlink" href="#summary" title="Permanent link">#</a></h2>
<p>This walkthrough just skims the surface of the many things InvokeAI
can do. Please see <a href="../">Features</a> for more detailed reference
guides.</p>
<h2 id="acknowledgements">Acknowledgements<a class="headerlink" href="#acknowledgements" title="Permanent link">#</a></h2>
<p>A huge shout-out to the core team working to make the Web GUI a reality,
including <a href="https://github.com/psychedelicious">psychedelicious</a>,
<a href="https://github.com/Kyle0654">Kyle0654</a> and
<a href="https://github.com/blessedcoolant">blessedcoolant</a>.
<a href="https://github.com/hipsterusername">hipsterusername</a> was the team's unofficial
cheerleader and added tooltips/docs.</p>
<aside class="md-source-file">
<span class="md-source-file__fact">
<span class="md-icon" title="Last update">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"/></svg>
</span>
<span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">August 29, 2024</span>
</span>
<span class="md-source-file__fact">
<span class="md-icon" title="Created">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.47 15.08 11 13V7h1.5v5.25l3.08 1.83c-.41.28-.79.62-1.11 1m-1.39 4.84c-.36.05-.71.08-1.08.08-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8c0 .37-.03.72-.08 1.08.69.1 1.33.32 1.92.64.1-.56.16-1.13.16-1.72 0-5.5-4.5-10-10-10S2 6.5 2 12s4.47 10 10 10c.59 0 1.16-.06 1.72-.16-.32-.59-.54-1.23-.64-1.92M18 15v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"/></svg>
</span>
<span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">August 29, 2024</span>
</span>
</aside>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2023 InvokeAI Team
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.tracking", "navigation.indexes", "navigation.path", "search.highlight", "search.suggest", "toc.integrate"], "search": "../../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.af256bd8.min.js"></script>
<script src="https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js"></script>
<script src="../../javascripts/tablesort.js"></script>
<script src="../../javascript/init_kapa_widget.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink