feat: add motd to server config, show in web UI

api/onnx_web/worker/command.py

@@ -36,9 +36,6 @@ class Progress:
         self.current = current
         self.total = total
 
-    def __repr__(self) -> str:
-        return "Progress(%d, %d)" % (self.current, self.total)
-
     def __str__(self) -> str:
         return "%s/%s" % (self.current, self.total)
 

api/params.json

@@ -1,5 +1,11 @@
 {
   "version": "0.12.0",
+  "motd": {
+    "de": "Willkommen bei onnx-web!",
+    "en": "Welcome to onnx-web!",
+    "es": "Bienvenido a onnx-web!",
+    "fr": "Bienvenue sur onnx-web!"
+  },
   "batch": {
     "default": 1,
     "min": 1,

gui/src/Motd.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Alert, Collapse, IconButton } from '@mui/material';
+import { Close } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+export function Motd() {
+  const [open, setOpen] = useState(true);
+  const { t } = useTranslation();
+
+  return <Collapse in={open}>
+    <Alert
+      action={
+        <IconButton
+          aria-label="close"
+          color="inherit"
+          size="small"
+          onClick={() => {
+            setOpen(false);
+          }}
+        >
+          <Close fontSize="inherit" />
+        </IconButton>
+      }
+      severity='info'
+      sx={{ mb: 2 }}
+    >
+      {t('motd')}
+    </Alert>
+  </Collapse>;
+}

gui/src/components/OnnxWeb.tsx

@@ -1,7 +1,7 @@
 import { mustExist } from '@apextoaster/js-utils';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { Box, Container, CssBaseline, Divider, Tab, useMediaQuery } from '@mui/material';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
 import { useHash } from 'react-use/lib/useHash';
@@ -17,9 +17,14 @@ import { Models } from './tab/Models.js';
 import { Settings } from './tab/Settings.js';
 import { Txt2Img } from './tab/Txt2Img.js';
 import { Upscale } from './tab/Upscale.js';
-import { getTab, getTheme, TAB_LABELS } from './utils.js';
+import { TAB_LABELS, getTab, getTheme } from './utils.js';
+import { Motd } from '../Motd.js';
 
-export function OnnxWeb() {
+export interface OnnxWebProps {
+  motd: boolean;
+}
+
+export function OnnxWeb(props: OnnxWebProps) {
   /* checks for system light/dark mode preference */
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const store = mustExist(useContext(StateContext));
@@ -43,6 +48,7 @@ export function OnnxWeb() {
         <Box sx={{ my: 4 }}>
           <Logo />
         </Box>
+        {props.motd && <Motd />}
         <TabContext value={getTab(hash)}>
           <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
             <TabList onChange={(_e, idx) => {

gui/src/config.json

@@ -4,6 +4,12 @@
   },
   "params": {
     "version": "0.12.0",
+    "motd": {
+      "de": "Willkommen bei onnx-web!",
+      "en": "Welcome to onnx-web!",
+      "es": "Bienvenido a onnx-web!",
+      "fr": "Bienvenue sur onnx-web!"
+    },
     "batch": {
       "default": 1,
       "min": 1,

gui/src/config.ts

@@ -71,6 +71,7 @@ export type ServerParams = ConfigRanges<Required<
   UpscaleParams &
   HighresParams
 >> & {
+  motd?: Record<string, string>;
   version: string;
 };
 /* eslint-enable */

gui/src/main.tsx

@@ -1,4 +1,4 @@
-import { mustDefault, mustExist, timeout, TimeoutError } from '@apextoaster/js-utils';
+import { doesExist, mustDefault, mustExist, timeout, TimeoutError } from '@apextoaster/js-utils';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createLogger, Logger } from 'browser-bunyan';
 import i18n from 'i18next';
@@ -46,6 +46,13 @@ export async function renderApp(config: Config, params: ServerParams, logger: Lo
     }
   }
 
+  if (doesExist(params.motd)) {
+    logger.debug({ motd: params.motd }, 'adding server motd strings');
+    for (const [lang, message] of Object.entries(params.motd)) {
+      i18n.addResource(lang, 'translation', 'motd', message);
+    }
+  }
+
   // prep zustand with a slice for each tab, using local storage
   const {
     createDefaultSlice,
@@ -116,7 +123,7 @@ export async function renderApp(config: Config, params: ServerParams, logger: Lo
         <LoggerContext.Provider value={reactLogger}>
           <I18nextProvider i18n={i18n}>
             <StateContext.Provider value={state}>
-              <OnnxWeb />
+              <OnnxWeb motd={doesExist(params.motd)} />
             </StateContext.Provider>
           </I18nextProvider>
         </LoggerContext.Provider>