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/contributing/frontend/WORKFLOWS/index.html

2909 lines
72 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/contributing/frontend/WORKFLOWS/">
<link rel="prev" href="../STATE_MGMT/">
<link rel="next" href="../../contribution_guides/documentation/">
<link rel="icon" href="../../../img/favicon.ico">
<meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.33">
<title>Workflows - 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="#workflows-design-and-implementation" 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">
Workflows
</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">
<a href="../../../features/" class="md-tabs__link">
Features
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../../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--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<div class="md-nav__link md-nav__container">
<a href="../../../features/" class="md-nav__link ">
<span class="md-ellipsis">
Features
</span>
</a>
<label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="0">
<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="false">
<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="../../../features/CONFIGURATION/" class="md-nav__link">
<span class="md-ellipsis">
Configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/DATABASE/" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/CONTROLNET/" class="md-nav__link">
<span class="md-ellipsis">
Control Adapters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/IMG2IMG/" class="md-nav__link">
<span class="md-ellipsis">
Image-to-Image
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/LOGGING/" class="md-nav__link">
<span class="md-ellipsis">
Controlling Logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/LORAS/" class="md-nav__link">
<span class="md-ellipsis">
LoRAs & LCM-LoRAs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/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="../../../features/WATERMARK%2BNSFW/" class="md-nav__link">
<span class="md-ellipsis">
NSFW Checker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/POSTPROCESS/" class="md-nav__link">
<span class="md-ellipsis">
Postprocessing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/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="../../../features/TEXTUAL_INVERSIONS/" class="md-nav__link">
<span class="md-ellipsis">
Textual Inversions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/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="../../../features/UNIFIED_CANVAS/" class="md-nav__link">
<span class="md-ellipsis">
Unified Canvas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/WEB/" class="md-nav__link">
<span class="md-ellipsis">
InvokeAI Web Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/WEBUIHOTKEYS/" class="md-nav__link">
<span class="md-ellipsis">
WebUI Hotkeys
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/UTILITIES/" class="md-nav__link">
<span class="md-ellipsis">
Maintenance Utilities
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../features/OTHER/" class="md-nav__link">
<span class="md-ellipsis">
Other
</span>
</a>
</li>
</ul>
</nav>
</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_6" checked>
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="">
<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="true">
<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/" 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--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" checked>
<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="true">
<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="../../contribution_guides/development/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contribution_guides/newContributorChecklist/" class="md-nav__link">
<span class="md-ellipsis">
New Contributors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../MODEL_MANAGER/" class="md-nav__link">
<span class="md-ellipsis">
Model Manager v2
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contribution_guides/contributingToFrontend.md" class="md-nav__link">
<span class="md-ellipsis">
Frontend Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../LOCAL_DEVELOPMENT/" class="md-nav__link">
<span class="md-ellipsis">
Local Development
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../TESTS/" class="md-nav__link">
<span class="md-ellipsis">
Testing
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3_7" checked>
<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="true">
<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="../OVERVIEW/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../STATE_MGMT/" class="md-nav__link">
<span class="md-ellipsis">
State Management
</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">
Workflows
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Workflows
</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="#design" class="md-nav__link">
<span class="md-ellipsis">
Design
</span>
</a>
<nav class="md-nav" aria-label="Design">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#linear-ui" class="md-nav__link">
<span class="md-ellipsis">
Linear UI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#workflow-editor" class="md-nav__link">
<span class="md-ellipsis">
Workflow Editor
</span>
</a>
<nav class="md-nav" aria-label="Workflow Editor">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#workflows" class="md-nav__link">
<span class="md-ellipsis">
Workflows
</span>
</a>
<nav class="md-nav" aria-label="Workflows">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#workflow-reactflow-state-invokeai-graph" class="md-nav__link">
<span class="md-ellipsis">
Workflow -&gt; reactflow state -&gt; InvokeAI graph
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#nodes-vs-invocations" class="md-nav__link">
<span class="md-ellipsis">
Nodes vs Invocations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#workflow-linear-view" class="md-nav__link">
<span class="md-ellipsis">
Workflow Linear View
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#openapi-schema" class="md-nav__link">
<span class="md-ellipsis">
OpenAPI Schema
</span>
</a>
<nav class="md-nav" aria-label="OpenAPI Schema">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#field-instances-and-templates" class="md-nav__link">
<span class="md-ellipsis">
Field Instances and Templates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#stateful-vs-stateless-fields" class="md-nav__link">
<span class="md-ellipsis">
Stateful vs Stateless Fields
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#single-and-collection-fields" class="md-nav__link">
<span class="md-ellipsis">
Single and Collection Fields
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#implementation" class="md-nav__link">
<span class="md-ellipsis">
Implementation
</span>
</a>
<nav class="md-nav" aria-label="Implementation">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#zod-schemas-and-types" class="md-nav__link">
<span class="md-ellipsis">
zod Schemas and Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#openapi-schema-parsing" class="md-nav__link">
<span class="md-ellipsis">
OpenAPI Schema Parsing
</span>
</a>
<nav class="md-nav" aria-label="OpenAPI Schema Parsing">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#parsing-field-types" class="md-nav__link">
<span class="md-ellipsis">
Parsing Field Types
</span>
</a>
<nav class="md-nav" aria-label="Parsing Field Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#primitive-types" class="md-nav__link">
<span class="md-ellipsis">
Primitive Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#complex-types" class="md-nav__link">
<span class="md-ellipsis">
Complex Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#collection-types" class="md-nav__link">
<span class="md-ellipsis">
Collection Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#single-or-collection-types" class="md-nav__link">
<span class="md-ellipsis">
Single or Collection Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#optional-fields" class="md-nav__link">
<span class="md-ellipsis">
Optional Fields
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#building-field-input-templates" class="md-nav__link">
<span class="md-ellipsis">
Building Field Input Templates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#building-field-output-templates" class="md-nav__link">
<span class="md-ellipsis">
Building Field Output Templates
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#managing-reactflow-state" class="md-nav__link">
<span class="md-ellipsis">
Managing reactflow State
</span>
</a>
<nav class="md-nav" aria-label="Managing reactflow State">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#building-nodes-and-edges" class="md-nav__link">
<span class="md-ellipsis">
Building Nodes and Edges
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#building-a-workflow" class="md-nav__link">
<span class="md-ellipsis">
Building a Workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#loading-a-workflow" class="md-nav__link">
<span class="md-ellipsis">
Loading a Workflow
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#workflow-migrations" class="md-nav__link">
<span class="md-ellipsis">
Workflow Migrations
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../contribution_guides/documentation/" class="md-nav__link">
<span class="md-ellipsis">
Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../INVOCATIONS/" class="md-nav__link">
<span class="md-ellipsis">
Nodes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../MODEL_MANAGER/" class="md-nav__link">
<span class="md-ellipsis">
Model Manager v2
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../DOWNLOAD_QUEUE/" class="md-nav__link">
<span class="md-ellipsis">
Download Queue
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../contribution_guides/translation/" class="md-nav__link">
<span class="md-ellipsis">
Translation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../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="workflows-design-and-implementation">Workflows - Design and Implementation<a class="headerlink" href="#workflows-design-and-implementation" title="Permanent link">#</a></h1>
<blockquote>
<p>This document describes, at a high level, the design and implementation of workflows in the InvokeAI frontend. There are a substantial number of implementation details not included, but which are hopefully clear from the code.</p>
</blockquote>
<p>InvokeAI's backend uses graphs, composed of <strong>nodes</strong> and <strong>edges</strong>, to process data and generate images.</p>
<p>Nodes have any number of <strong>input fields</strong> and <strong>output fields</strong>. Edges connect nodes together via their inputs and outputs. Fields have data types which dictate how they may be connected.</p>
<p>During execution, a nodes' outputs may be passed along to any number of other nodes' inputs.</p>
<p>Workflows are an enriched abstraction over a graph.</p>
<h2 id="design">Design<a class="headerlink" href="#design" title="Permanent link">#</a></h2>
<p>InvokeAI provide two ways to build graphs in the frontend: the <a href="#linear-ui">Linear UI</a> and <a href="#workflow-editor">Workflow Editor</a>.</p>
<p>To better understand the use case and challenges related to workflows, we will review both of these modes.</p>
<h3 id="linear-ui">Linear UI<a class="headerlink" href="#linear-ui" title="Permanent link">#</a></h3>
<p>This includes the <strong>Text to Image</strong>, <strong>Image to Image</strong> and <strong>Unified Canvas</strong> tabs.</p>
<p>The user-managed parameters on these tabs are stored as simple objects in the application state. When the user invokes, adding a generation to the queue, we internally build a graph from these parameters.</p>
<p>This logic can be fairly complex due to the range of features available and their interactions. Depending on the parameters selected, the graph may be very different. Building graphs in code can be challenging - you are trying to construct a non-linear structure in a linear context.</p>
<p>The simplest graph building logic is for <strong>Text to Image</strong> with a SD1.5 model: <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearTextToImageGraph.ts">buildLinearTextToImageGraph.ts</a></p>
<p>There are many other graph builders in the same directory for different tabs or base models (e.g. SDXL). Some are pretty hairy.</p>
<p>In the Linear UI, we go straight from <strong>simple application state</strong> to <strong>graph</strong> via these builders.</p>
<h3 id="workflow-editor">Workflow Editor<a class="headerlink" href="#workflow-editor" title="Permanent link">#</a></h3>
<p>The Workflow Editor is a visual graph editor, allowing users to draw edges from node to node to construct a graph. This <em>far</em> more approachable way to create complex graphs.</p>
<p>InvokeAI uses the <a href="https://github.com/xyflow/xyflow" title="reactflow">reactflow</a> library to power the Workflow Editor. It provides both a graph editor UI and manages its own internal graph state.</p>
<h4 id="workflows">Workflows<a class="headerlink" href="#workflows" title="Permanent link">#</a></h4>
<p>A workflow is a representation of a graph plus additional metadata:</p>
<ul>
<li>Name</li>
<li>Description</li>
<li>Version</li>
<li>Notes</li>
<li><a href="#workflow-linear-view">Exposed fields</a></li>
<li>Author, tags, category, etc.</li>
</ul>
<p>Workflows should have other qualities:</p>
<ul>
<li>Portable: you should be able to load a workflow created by another person.</li>
<li>Resilient: you should be able to "upgrade" a workflow as the application changes.</li>
<li>Abstract: as much as is possible, workflows should not be married to the specific implementation details of the application.</li>
</ul>
<p>To support these qualities, workflows are serializable, have a versioned schemas, and represent graphs as minimally as possible. Fortunately, the reactflow state for nodes and edges works perfectly for this.</p>
<h5 id="workflow-reactflow-state-invokeai-graph">Workflow -&gt; reactflow state -&gt; InvokeAI graph<a class="headerlink" href="#workflow-reactflow-state-invokeai-graph" title="Permanent link">#</a></h5>
<p>Given a workflow, we need to be able to derive reactflow state and/or an InvokeAI graph from it.</p>
<p>The first step - workflow to reactflow state - is very simple. The logic is in <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts">nodesSlice.ts</a>, in the <code>workflowLoaded</code> reducer.</p>
<p>The reactflow state is, however, structurally incompatible with our backend's graph structure. When a user invokes on a Workflow, we need to convert the reactflow state into an InvokeAI graph. This is far simpler than the graph building logic from the Linear UI:
<a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts">buildNodesGraph.ts</a></p>
<h5 id="nodes-vs-invocations">Nodes vs Invocations<a class="headerlink" href="#nodes-vs-invocations" title="Permanent link">#</a></h5>
<p>We often use the terms "node" and "invocation" interchangeably, but they may refer to different things in the frontend.</p>
<p>reactflow <a href="https://reactflow.dev/learn/concepts/terms-and-definitions">has its own definitions</a> of "node", "edge" and "handle" which are closely related to InvokeAI graph concepts.</p>
<ul>
<li>A reactflow node is related to an InvokeAI invocation. It has a "data" property, which holds the InvokeAI-specific invocation data.</li>
<li>A reactflow edge is roughly equivalent to an InvokeAI edge.</li>
<li>A reactflow handle is roughly equivalent to an InvokeAI input or output field.</li>
</ul>
<h5 id="workflow-linear-view">Workflow Linear View<a class="headerlink" href="#workflow-linear-view" title="Permanent link">#</a></h5>
<p>Graphs are very capable data structures, but not everyone wants to work with them all the time.</p>
<p>To allow less technical users - or anyone who wants a less visually noisy workspace - to benefit from the power of nodes, InvokeAI has a workflow feature called the Linear View.</p>
<p>A workflow input field can be added to this Linear View, and its input component can be presented similarly to the Linear UI tabs. Internally, we add the field to the workflow's list of exposed fields.</p>
<h4 id="openapi-schema">OpenAPI Schema<a class="headerlink" href="#openapi-schema" title="Permanent link">#</a></h4>
<p>OpenAPI is a schema specification that can represent complex data structures and relationships. The backend is capable of generating an OpenAPI schema for all invocations.</p>
<p>When the UI connects, it requests this schema and parses each invocation into an <strong>invocation template</strong>. Invocation templates have a number of properties, like title, description and type, but the most important ones are their input and output <strong>field templates</strong>.</p>
<p>Invocation and field templates are the "source of truth" for graphs, because they indicate what the backend is able to process.</p>
<p>When a user adds a new node to their workflow, these templates are used to instantiate a node with fields instantiated from the input and output field templates.</p>
<h5 id="field-instances-and-templates">Field Instances and Templates<a class="headerlink" href="#field-instances-and-templates" title="Permanent link">#</a></h5>
<p>Field templates consist of:</p>
<ul>
<li>Name: the identifier of the field, its variable name in python</li>
<li>Type: derived from the field's type annotation in python (e.g. IntegerField, ImageField, MainModelField)</li>
<li>Constraints: derived from the field's creation args in python (e.g. minimum value for an integer)</li>
<li>Default value: optionally provided in the field's creation args (e.g. 42 for an integer)</li>
</ul>
<p>Field instances are created from the templates and have name, type and optionally a value.</p>
<p>The type of the field determines the UI components that are rendered for it.</p>
<p>A field instance's name associates it with its template.</p>
<h5 id="stateful-vs-stateless-fields">Stateful vs Stateless Fields<a class="headerlink" href="#stateful-vs-stateless-fields" title="Permanent link">#</a></h5>
<p><strong>Stateful</strong> fields store their value in the frontend graph. Think primitives, model identifiers, images, etc. Fields are only stateful if the frontend allows the user to directly input a value for them.</p>
<p>Many field types, however, are <strong>stateless</strong>. An example is a <code>UNetField</code>, which contains some data describing a UNet. Users cannot directly provide this data - it is created and consumed in the backend.</p>
<p>Stateless fields do not store their value in the node, so their field instances do not have values.</p>
<p>"Custom" fields will always be treated as stateless fields.</p>
<h5 id="single-and-collection-fields">Single and Collection Fields<a class="headerlink" href="#single-and-collection-fields" title="Permanent link">#</a></h5>
<p>Field types have a name and cardinality property which may identify it as a <strong>SINGLE</strong>, <strong>COLLECTION</strong> or <strong>SINGLE_OR_COLLECTION</strong> field.</p>
<ul>
<li>If a field is annotated in python as a singular value or class, its field type is parsed as a <strong>SINGLE</strong> type (e.g. <code>int</code>, <code>ImageField</code>, <code>str</code>).</li>
<li>If a field is annotated in python as a list, its field type is parsed as a <strong>COLLECTION</strong> type (e.g. <code>list[int]</code>).</li>
<li>If it is annotated as a union of a type and list, the type will be parsed as a <strong>SINGLE_OR_COLLECTION</strong> type (e.g. <code>Union[int, list[int]]</code>). Fields may not be unions of different types (e.g. <code>Union[int, list[str]]</code> and <code>Union[int, str]</code> are not allowed).</li>
</ul>
<h2 id="implementation">Implementation<a class="headerlink" href="#implementation" title="Permanent link">#</a></h2>
<p>The majority of data structures in the backend are <a href="https://github.com/pydantic/pydantic" title="pydantic">pydantic</a> models. Pydantic provides OpenAPI schemas for all models and we then generate TypeScript types from those.</p>
<p>The OpenAPI schema is parsed at runtime into our invocation templates.</p>
<p>Workflows and all related data are modeled in the frontend using <a href="https://github.com/colinhacks/zod" title="zod">zod</a>. Related types are inferred from the zod schemas.</p>
<blockquote>
<p>In python, invocations are pydantic models with fields. These fields become node inputs. The invocation's <code>invoke()</code> function returns a pydantic model - its output. Like the invocation itself, the output model has any number of fields, which become node outputs.</p>
</blockquote>
<h3 id="zod-schemas-and-types">zod Schemas and Types<a class="headerlink" href="#zod-schemas-and-types" title="Permanent link">#</a></h3>
<p>The zod schemas, inferred types, and type guards are in [types/].</p>
<p>Roughly order from lowest-level to highest:</p>
<ul>
<li><code>common.ts</code>: stateful field data, and couple other misc types</li>
<li><code>field.ts</code>: fields - types, values, instances, templates</li>
<li><code>invocation.ts</code>: invocations and other node types</li>
<li><code>workflow.ts</code>: workflows and constituents</li>
</ul>
<p>We customize the OpenAPI schema to include additional properties on invocation and field schemas. To facilitate parsing this schema into templates, we modify/wrap the types from <a href="https://github.com/kogosoftwarellc/open-api/tree/main/packages/openapi-types" title="openapi-types">openapi-types</a> in <code>openapi.ts</code>.</p>
<h3 id="openapi-schema-parsing">OpenAPI Schema Parsing<a class="headerlink" href="#openapi-schema-parsing" title="Permanent link">#</a></h3>
<p>The entrypoint for OpenAPI schema parsing is <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts">parseSchema.ts</a>.</p>
<p>General logic flow:</p>
<ul>
<li>Iterate over all invocation schema objects</li>
<li>Extract relevant invocation-level attributes (e.g. title, type, version, etc)</li>
<li>Iterate over the invocation's input fields<ul>
<li><a href="#parsing-field-types">Parse each field's type</a></li>
<li><a href="#building-field-input-templates">Build a field input template</a> from the type - either a stateful template or "generic" stateless template</li>
</ul>
</li>
<li>Iterate over the invocation's output fields<ul>
<li>Parse the field's type (same as inputs)</li>
<li><a href="#building-field-output-templates">Build a field output template</a></li>
</ul>
</li>
<li>Assemble the attributes and fields into an invocation template</li>
</ul>
<p>Most of these involve very straightforward <code>reduce</code>s, but the less intuitive steps are detailed below.</p>
<h4 id="parsing-field-types">Parsing Field Types<a class="headerlink" href="#parsing-field-types" title="Permanent link">#</a></h4>
<p>Field types are represented as structured objects:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kr">type</span><span class="w"> </span><span class="nx">FieldType</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="w"> </span><span class="nx">cardinality</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;SINGLE&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;COLLECTION&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;SINGLE_OR_COLLECTION&#39;</span><span class="p">;</span>
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="p">};</span>
</code></pre></div>
<p>The parsing logic is in <code>parseFieldType.ts</code>.</p>
<p>There are 4 general cases for field type parsing.</p>
<h5 id="primitive-types">Primitive Types<a class="headerlink" href="#primitive-types" title="Permanent link">#</a></h5>
<p>When a field is annotated as a primitive values (e.g. <code>int</code>, <code>str</code>, <code>float</code>), the field type parsing is fairly straightforward. The field is represented by a simple OpenAPI <strong>schema object</strong>, which has a <code>type</code> property.</p>
<p>We create a field type name from this <code>type</code> string (e.g. <code>string</code> -&gt; <code>StringField</code>). The cardinality is <code>"SINGLE"</code>.</p>
<h5 id="complex-types">Complex Types<a class="headerlink" href="#complex-types" title="Permanent link">#</a></h5>
<p>When a field is annotated as a pydantic model (e.g. <code>ImageField</code>, <code>MainModelField</code>, <code>ControlField</code>), it is represented as a <strong>reference object</strong>. Reference objects are pointers to another schema or reference object within the schema.</p>
<p>We need to <strong>dereference</strong> the schema to pull these out. Dereferencing may require recursion. We use the reference object's name directly for the field type name.</p>
<blockquote>
<p>Unfortunately, at this time, we've had limited success using external libraries to deference at runtime, so we do this ourselves.</p>
</blockquote>
<h5 id="collection-types">Collection Types<a class="headerlink" href="#collection-types" title="Permanent link">#</a></h5>
<p>When a field is annotated as a list of a single type, the schema object has an <code>items</code> property. They may be a schema object or reference object and must be parsed to determine the item type.</p>
<p>We use the item type for field type name. The cardinality is <code>"COLLECTION"</code>.</p>
<h5 id="single-or-collection-types">Single or Collection Types<a class="headerlink" href="#single-or-collection-types" title="Permanent link">#</a></h5>
<p>When a field is annotated as a union of a type and list of that type, the schema object has an <code>anyOf</code> property, which holds a list of valid types for the union.</p>
<p>After verifying that the union has two members (a type and list of the same type), we use the type for field type name, with cardinality <code>"SINGLE_OR_COLLECTION"</code>.</p>
<h5 id="optional-fields">Optional Fields<a class="headerlink" href="#optional-fields" title="Permanent link">#</a></h5>
<p>In OpenAPI v3.1, when an object is optional, it is put into an <code>anyOf</code> along with a primitive schema object with <code>type: 'null'</code>.</p>
<p>Handling this adds a fair bit of complexity, as we now must filter out the <code>'null'</code> types and work with the remaining types as described above.</p>
<p>If there is a single remaining schema object, we must recursively call to <code>parseFieldType()</code> to get parse it.</p>
<h4 id="building-field-input-templates">Building Field Input Templates<a class="headerlink" href="#building-field-input-templates" title="Permanent link">#</a></h4>
<p>Now that we have a field type, we can build an input template for the field.</p>
<p>Stateful fields all get a function to build their template, while stateless fields are constructed directly. This is possible because stateless fields have no default value or constraints.</p>
<p>See <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldInputTemplate.ts">buildFieldInputTemplate.ts</a>.</p>
<h4 id="building-field-output-templates">Building Field Output Templates<a class="headerlink" href="#building-field-output-templates" title="Permanent link">#</a></h4>
<p>Field outputs are similar to stateless fields - they do not have any value in the frontend. When building their templates, we don't need a special function for each field type.</p>
<p>See <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/schema/buildFieldOutputTemplate.ts">buildFieldOutputTemplate.ts</a>.</p>
<h3 id="managing-reactflow-state">Managing reactflow State<a class="headerlink" href="#managing-reactflow-state" title="Permanent link">#</a></h3>
<p>As described above, the workflow editor state is the essentially the reactflow state, plus some extra metadata.</p>
<p>We provide reactflow with an array of nodes and edges via redux, and a number of <a href="https://reactflow.dev/api-reference/react-flow#event-handlers">event handlers</a>. These handlers dispatch redux actions, managing nodes and edges.</p>
<p>The pieces of redux state relevant to workflows are:</p>
<ul>
<li><code>state.nodes.nodes</code>: the reactflow nodes state</li>
<li><code>state.nodes.edges</code>: the reactflow edges state</li>
<li><code>state.nodes.workflow</code>: the workflow metadata</li>
</ul>
<h4 id="building-nodes-and-edges">Building Nodes and Edges<a class="headerlink" href="#building-nodes-and-edges" title="Permanent link">#</a></h4>
<p>A reactflow node has a few important top-level properties:</p>
<ul>
<li><code>id</code>: unique identifier</li>
<li><code>type</code>: a string that maps to a react component to render the node</li>
<li><code>position</code>: XY coordinates</li>
<li><code>data</code>: arbitrary data</li>
</ul>
<p>When the user adds a node, we build <strong>invocation node data</strong>, storing it in <code>data</code>. Invocation properties (e.g. type, version, label, etc.) are copied from the invocation template. Inputs and outputs are built from the invocation template's field templates.</p>
<p>See <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts">buildInvocationNode.ts</a>.</p>
<p>Edges are managed by reactflow, but briefly, they consist of:</p>
<ul>
<li><code>source</code>: id of the source node</li>
<li><code>sourceHandle</code>: id of the source node handle (output field)</li>
<li><code>target</code>: id of the target node</li>
<li><code>targetHandle</code>: id of the target node handle (input field)</li>
</ul>
<blockquote>
<p>Edge creation is gated behind validation logic. This validation compares the input and output field types and overall graph state.</p>
</blockquote>
<h4 id="building-a-workflow">Building a Workflow<a class="headerlink" href="#building-a-workflow" title="Permanent link">#</a></h4>
<p>Building a workflow entity is as simple as dropping the nodes, edges and metadata into an object.</p>
<p>Each node and edge is parsed with a zod schema, which serves to strip out any unneeded data.</p>
<p>See <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts">buildWorkflow.ts</a>.</p>
<h4 id="loading-a-workflow">Loading a Workflow<a class="headerlink" href="#loading-a-workflow" title="Permanent link">#</a></h4>
<p>Workflows may be loaded from external sources or the user's local instance. In all cases, the workflow needs to be handled with care, as an untrusted object.</p>
<p>Loading has a few stages which may throw or warn if there are problems:</p>
<ul>
<li>Parsing the workflow data structure itself, <a href="#workflow-migrations">migrating</a> it if necessary (throws)</li>
<li>Check for a template for each node (warns)</li>
<li>Check each node's version against its template (warns)</li>
<li>Validate the source and target of each edge (warns)</li>
</ul>
<p>This validation occurs in <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts">validateWorkflow.ts</a>.</p>
<p>If there are no fatal errors, the workflow is then stored in redux state.</p>
<h3 id="workflow-migrations">Workflow Migrations<a class="headerlink" href="#workflow-migrations" title="Permanent link">#</a></h3>
<p>When the workflow schema changes, we may need to perform some data migrations. This occurs as workflows are loaded. zod schemas for each workflow schema version is retained to facilitate migrations.</p>
<p>Previous schemas are in folders in <code>invokeai/frontend/web/src/features/nodes/types/</code>, eg <code>v1/</code>.</p>
<p>Migration logic is in <a href="https://github.com/invoke-ai/InvokeAI/blob/main/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts">migrations.ts</a>.</p>
<!-- links -->
<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