inline comfy output display

Stability-AI · Jul 25, 2023 · d842066 · d842066
1 parent e9657bb
commit d842066
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 37 deletions.
diff --git a/packages/stablestudio-ui/src/App/Sidebar/Section.tsx b/packages/stablestudio-ui/src/App/Sidebar/Section.tsx
@@ -47,7 +47,7 @@ export function Section(props: Section.Props) {
       )}
     >
       {title && (
-        <div className="flex items-center py-2 px-2">
+        <div className="flex items-center px-2 py-2">
           <Theme.Button
             {...buttonProps}
             className={classes(

diff --git a/packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx b/packages/stablestudio-ui/src/App/Sidebar/Tab/index.tsx
@@ -71,12 +71,12 @@ export namespace Tab {
       GlobalState.shallow
     );
 
-    useLayoutEffect(() => {
+    useEffect(() => {
       setTab(props.name, { enabled: true, ...props });
       return () => setTab(props.name);
     }, [props, setTab]);
 
-    useLayoutEffect(() => {
+    useEffect(() => {
       (window.location.pathname === props.route ||
         (window.location.pathname === "/" && props.defaultActive)) &&
         setSidebar((sidebar) => ({ ...sidebar, tab: props.name }));

diff --git a/packages/stablestudio-ui/src/Comfy/index.tsx b/packages/stablestudio-ui/src/Comfy/index.tsx
@@ -1,6 +1,5 @@
 import { useLocation } from "react-router-dom";
 import { create } from "zustand";
-import { shallow } from "zustand/shallow";
 import { Generation } from "~/Generation";
 
 export type ComfyApp = {
@@ -122,6 +121,9 @@ type State = {
 
   lastOuput: ComfyOutput | null;
   setLastOutput: (output: ComfyOutput | null) => void;
+
+  inlineExpanded: boolean;
+  setInlineExpanded: (expanded: boolean) => void;
 };
 
 export namespace Comfy {
@@ -154,6 +156,9 @@ export namespace Comfy {
 
     lastOuput: null,
     setLastOutput: (lastOuput) => set({ lastOuput }),
+
+    inlineExpanded: false,
+    setInlineExpanded: (inlineExpanded) => set({ inlineExpanded }),
   }));
 
   export const registerListeners = async () => {
@@ -274,12 +279,34 @@ export namespace Comfy {
     use.getState().setRunning(true);
   };
 
-  export const Output = () => {
-    const output = Comfy.use(({ output }) => output, shallow);
+  export const Output = ({
+    className,
+    small,
+  }: Styleable & {
+    small?: boolean;
+  }) => {
+    const { output, inlineExpanded, setInlineExpanded } = Comfy.use(
+      (state) => ({
+        output: state.output,
+        inlineExpanded: state.inlineExpanded,
+        setInlineExpanded: state.setInlineExpanded,
+      })
+    );
 
     return (
-      <div className="flex max-h-[25rem] flex-col-reverse overflow-y-auto whitespace-pre-wrap rounded bg-black/25 p-2 font-mono text-sm">
-        {[...output].reverse().map((line, index) => (
+      <div
+        className={classes(
+          "flex max-h-[25rem] flex-col-reverse overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded bg-black/25 p-2 font-mono text-sm leading-4",
+          small && !inlineExpanded && "overflow-y-hidden",
+          small && "cursor-pointer",
+          className
+        )}
+        onClick={() => setInlineExpanded(!inlineExpanded)}
+      >
+        {(small && !inlineExpanded
+          ? output.slice(-1)
+          : [...output].reverse()
+        ).map((line, index) => (
           <p
             key={`${index}-${line}`}
             className={classes(

diff --git a/packages/stablestudio-ui/src/Editor/Sidebar/index.tsx b/packages/stablestudio-ui/src/Editor/Sidebar/index.tsx
@@ -1,4 +1,5 @@
 import { App } from "~/App";
+import { Comfy } from "~/Comfy";
 import { Editor } from "~/Editor";
 import { Generation } from "~/Generation";
 import { Router } from "~/Router";
@@ -39,17 +40,20 @@ export function Sidebar() {
 
   const bottom = selectedID && (
     <App.Sidebar.Tab.Bottom>
-      <Generation.Image.Create.Button
-        id={inputID}
-        onIdleClick={() => createDream()}
-        fullWidth
-        disabled={
-          !inputID ||
-          generating ||
-          !(dreams.filter((d) => d.id === selectedID).length > 0)
-        }
-        loading={generating}
-      />
+      <div className="flex flex-col gap-2">
+        <Comfy.Output small />
+        <Generation.Image.Create.Button
+          id={inputID}
+          onIdleClick={() => createDream()}
+          fullWidth
+          disabled={
+            !inputID ||
+            generating ||
+            !(dreams.filter((d) => d.id === selectedID).length > 0)
+          }
+          loading={generating}
+        />
+      </div>
     </App.Sidebar.Tab.Bottom>
   );
 

diff --git a/packages/stablestudio-ui/src/Generation/Image/Sidebar/index.tsx b/packages/stablestudio-ui/src/Generation/Image/Sidebar/index.tsx
@@ -1,5 +1,6 @@
 import { useLocation } from "react-router-dom";
 import { App } from "~/App";
+import { Comfy } from "~/Comfy";
 import { Generation } from "~/Generation";
 import { Theme } from "~/Theme";
 
@@ -11,6 +12,20 @@ export function Sidebar() {
   const location = useLocation();
 
   if (!input?.id) return null;
+
+  const bottom = (
+    <App.Sidebar.Tab.Bottom>
+      <div className="flex flex-col gap-2">
+        <Comfy.Output small />
+        <Generation.Image.Create.Button
+          id={input.id}
+          onIdleClick={() => createDream()}
+          fullWidth
+        />
+      </div>
+    </App.Sidebar.Tab.Bottom>
+  );
+
   return (
     <>
       <App.Sidebar.Tab.Set
@@ -25,15 +40,7 @@ export function Sidebar() {
           location.pathname.startsWith("/edit") ||
           location.pathname.startsWith("/nodes")
         }
-        bottom={
-          <App.Sidebar.Tab.Bottom>
-            <Generation.Image.Create.Button
-              id={input.id}
-              onIdleClick={() => createDream()}
-              fullWidth
-            />
-          </App.Sidebar.Tab.Bottom>
-        }
+        bottom={bottom}
       >
         <Sidebar.Tab id={input.id} />
       </App.Sidebar.Tab.Set>
@@ -49,15 +56,7 @@ export function Sidebar() {
           location.pathname.startsWith("/edit") ||
           location.pathname.startsWith("/nodes")
         }
-        bottom={
-          <App.Sidebar.Tab.Bottom>
-            <Generation.Image.Create.Button
-              id={input.id}
-              onIdleClick={() => createDream()}
-              fullWidth
-            />
-          </App.Sidebar.Tab.Bottom>
-        }
+        bottom={bottom}
       >
         <Sidebar.Tab id={input.id} />
       </App.Sidebar.Tab.Set>