Merge pull request #19 from caranicas/beta-react-app-config

new config route and tighter header

ui/frontend/build_src/src/api/index.ts

@@ -31,6 +31,15 @@ export const getSaveDirectory = async () => {
   return data[0];
 };
 
+
+export const getConfig = async () => {
+  const response = await fetch(`${API_URL}/app_config`);
+  console.log('getConfig response', response);
+  const data = await response.json();
+  return data;
+};
+
+
 /**
  * post a new request for an image
  */

ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css

@@ -1,10 +0,0 @@
-.header-display {
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.status-display {
-  margin-left: 10px;
-}

ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts

@@ -0,0 +1,15 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+
+export const HeaderDisplayMain = style({
+  color: "#ffffff",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+globalStyle(`${HeaderDisplayMain} > h1`, {
+  fontSize: "1.5em",
+  fontWeight: "bold",
+  marginRight: "10px",
+});
+

ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx

@@ -1,13 +1,47 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+
+import { useQuery } from "@tanstack/react-query";
+import { getConfig } from "../../../api";
 
 import StatusDisplay from "./statusDisplay";
 
-import "./headerDisplay.css";
+import {
+  HeaderDisplayMain
+} from //@ts-ignore
+  './headerDisplay.css.ts'
+
 
 export default function HeaderDisplay() {
+
+  // but this will be moved to the status display when it is created
+  const { status, data } = useQuery(["config"], getConfig)
+
+  const [version, setVersion] = useState("2.1.0");
+  const [release, setRelease] = useState('');
+
+  useEffect(() => {
+
+    if (status === 'success') {
+      // TODO also pass down the actual version
+      const { update_branch } = data;
+
+      // just hard coded for now
+      setVersion('v2.1');
+
+      if (update_branch === 'main') {
+        setRelease('(stable)')
+      }
+      else {
+        setRelease('(beta)')
+      }
+    }
+
+  }, [status, data, setVersion, setVersion])
+
+
   return (
-    <div className="header-display">
+    <div className={HeaderDisplayMain}>
-      <h1>Stable Diffusion UI v2.1.0</h1>
+      <h1>Stable Diffusion UI {version} {release} </h1>
       <StatusDisplay className="status-display"></StatusDisplay>
     </div>
   );

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx

@@ -7,11 +7,15 @@ const startingMessage = "Stable Diffusion is starting...";
 const successMessage = "Stable Diffusion is ready to use!";
 const errorMessage = "Stable Diffusion is not running!";
 
-import "./statusDisplay.css";
+import {
+  StartingStatus,
+  ErrorStatus,
+  SuccessStatus,
+} from "./statusDisplay.css";
 
 export default function StatusDisplay({ className }: { className?: string }) {
   const [statusMessage, setStatusMessage] = useState(startingMessage);
-  const [statusClass, setStatusClass] = useState("starting");
+  const [statusClass, setStatusClass] = useState(StartingStatus);
 
   // but this will be moved to the status display when it is created
   const { status, data } = useQuery(["health"], healthPing, {
@@ -21,17 +25,17 @@ export default function StatusDisplay({ className }: { className?: string }) {
   useEffect(() => {
     if (status === "loading") {
       setStatusMessage(startingMessage);
-      setStatusClass("starting");
+      setStatusClass(StartingStatus);
     } else if (status === "error") {
       setStatusMessage(errorMessage);
-      setStatusClass("error");
+      setStatusClass(ErrorStatus);
     } else if (status === "success") {
       if (data[0] === "OK") {
         setStatusMessage(successMessage);
-        setStatusClass("success");
+        setStatusClass(SuccessStatus);
       } else {
         setStatusMessage(errorMessage);
-        setStatusClass("error");
+        setStatusClass(ErrorStatus);
       }
     }
   }, [status, data]);

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css

@@ -1,11 +0,0 @@
-.starting {
-  color: #f0ad4e;
-}
-
-.error {
-  color: #d9534f;
-}
-
-.success {
-  color: #5cb85c;
-}

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css.ts

@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+
+
+// TODO  MOVE TO GLOBAL CSS
+export const StartingStatus = style({
+  color: "#f0ad4e",
+});
+
+export const ErrorStatus = style({
+  color: "#d9534f",
+});
+
+export const SuccessStatus = style({
+  color: "#5cb85c",
+});