✨ feat: Add ImageInfo modules

.env

@@ -0,0 +1,4 @@
+OPENAI_API='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'
+OPENAI_API_URL='https://openai.canisminor.cc'
+#SD_HOST='30.183.88.36'
+#SD_PORT=80

.eslintrc.js

@@ -26,7 +26,6 @@ module.exports = {
         'no-undef': 0,
         'object-curly-spacing': 0,
         'unicorn/prefer-add-event-listener': 0,
-        'unused-imports/no-unused-imports': 0,
       },
     },
   ],

.gitignore

@@ -42,6 +42,4 @@ test-output
 # add other ignore file below
 __pycache__
 /lobe_theme_config.json
-/javascript/**/*
-!/javascript/main.js
 bun.lockb

locales/en_US.json

@@ -75,12 +75,23 @@
         "desc": "Enable the extra network sidebar on the right side"
       }
     },
+    "tab": {
+      "appearance": "Appearance",
+      "sidebar": "Sidebar",
+      "layout": "Layout",
+      "experimental": "Experimental"
+    },
     "group": {
       "extraNetworkSidebar": "Extra Network Sidebar",
       "layout": "Layout Settings",
       "promptTextarea": "Prompt Textbox",
       "quickSettingSidebar": "Quick Setting Sidebar",
-      "theme": "Theme Settings"
+      "theme": "Theme Settings",
+      "experimental": "Experimental Features"
+    },
+    "imageInfo": {
+      "title": "Image Info Alternative",
+      "desc": "Display better image information in the generated image"
     },
     "hideFooter": {
       "title": "Hide Footer",

package.json

@@ -70,7 +70,7 @@
     "ahooks": "^3",
     "antd": "^5",
     "antd-style": "latest",
-    "consola": "^3.2.3",
+    "consola": "^3",
     "i18next": "^23",
     "i18next-http-backend": "^2",
     "lodash-es": "^4",
@@ -87,14 +87,13 @@
     "react-rnd": "^10",
     "react-tag-input": "^6",
     "semver": "^7",
-    "shiki-es": "^0.14",
+    "shikiji": "^0.7",
     "swr": "^2",
     "zustand": "^4.4.1",
     "zustand-utils": "^1.3.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^18",
-    "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
     "@types/lodash-es": "^4",
     "@types/node": "^20",
@@ -106,6 +105,7 @@
     "@vitejs/plugin-react-swc": "^3",
     "@vitest/coverage-v8": "latest",
     "commitlint": "^18",
+    "dotenv": "^16",
     "eslint": "^8",
     "fast-deep-equal": "^3",
     "husky": "^8",

src/app/index.tsx

@@ -3,7 +3,8 @@ import isEqual from 'fast-deep-equal';
 import { memo, useEffect } from 'react';
 
 import '@/locales/config';
-import { PromptHighlight } from '@/modules/PromptHighlight';
+import ImageInfo from '@/modules/ImageInfo/page';
+import PromptHighlight from '@/modules/PromptHighlight/page';
 import replaceIcon from '@/scripts/replaceIcon';
 import { selectors, useAppStore } from '@/store';
 import GlobalStyle from '@/styles';
@@ -25,10 +26,8 @@ const Index = memo(() => {
   });
 
   useEffect(() => {
-    if (setting.enableHighlight) {
-      PromptHighlight('#txt2img_prompt', '#lobe_txt2img_prompt');
-      PromptHighlight('#img2img_prompt', '#lobe_img2img_prompt');
-    }
+    if (setting.enableHighlight) PromptHighlight();
+    if (setting.enableImageInfo) ImageInfo();
     if (setting.svgIcon) replaceIcon();
   }, []);
 

src/app/layout.tsx

@@ -1,24 +1,20 @@
 import { consola } from 'consola';
 import { PropsWithChildren, Suspense, memo, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { shallow } from 'zustand/shallow';
 
 import { Loading } from '@/components';
-import Layout from '@/layouts';
+import GlobalLayout from '@/layouts';
 import { useAppStore } from '@/store';
 
 import manifest from './manifest';
 
-export const Layouts = memo<PropsWithChildren>(({ children }) => {
+export const Layout = memo<PropsWithChildren>(({ children }) => {
   const [loading, setLoading] = useState(true);
-  const { setCurrentTab, onInit, storeLoading } = useAppStore(
-    (st) => ({
-      onInit: st.onInit,
-      setCurrentTab: st.setCurrentTab,
-      storeLoading: st.loading,
-    }),
-    shallow,
-  );
+  const { setCurrentTab, onInit, storeLoading } = useAppStore((st) => ({
+    onInit: st.onInit,
+    setCurrentTab: st.setCurrentTab,
+    storeLoading: st.loading,
+  }));
 
   useEffect(() => {
     onInit();
@@ -61,9 +57,11 @@ export const Layouts = memo<PropsWithChildren>(({ children }) => {
         <meta content="#000000" name="theme-color" />
         <link href={manifest} rel="manifest" />
       </Helmet>
-      <Layout>{storeLoading === false && loading === false ? children : <Loading />}</Layout>
+      <GlobalLayout>
+        {storeLoading === false && loading === false ? children : <Loading />}
+      </GlobalLayout>
     </Suspense>
   );
 });
 
-export default Layouts;
+export default Layout;

src/components/VersionTag/index.tsx

@@ -1,16 +1,15 @@
 import { Tag, TagProps } from 'antd';
 import { memo } from 'react';
 import semver from 'semver';
-import { shallow } from 'zustand/shallow';
 
 import { homepage } from '@/../package.json';
 import { useAppStore } from '@/store';
 
 const VersionTag = memo<TagProps>((props) => {
-  const { version, latestVersion } = useAppStore(
-    (st) => ({ latestVersion: st.latestVersion, version: st.version }),
-    shallow,
-  );
+  const { version, latestVersion } = useAppStore((st) => ({
+    latestVersion: st.latestVersion,
+    version: st.version,
+  }));
 
   const isLatest = semver.gte(version, latestVersion);
 

src/features/Content/style.ts

@@ -304,7 +304,7 @@ export const useStyles = createStyles(
         }
 
         #img2img_toprow .interrogate-col {
-          flex-flow: column wrap;
+          flex-direction: row !important;
           min-width: 100% !important;
         }
 
@@ -374,7 +374,8 @@ export const useStyles = createStyles(
 
             padding: 8px !important;
 
-            font-family: var(--font);
+            font-family: ${token.fontFamilyCode} !important;
+            font-size: 13px !important;
             line-height: 1.5 !important;
             word-wrap: break-word !important;
             white-space: pre-wrap !important;

src/features/Header/index.tsx

@@ -1,7 +1,6 @@
 import { Header as H, Tooltip } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { Logo } from '@/components';
 import { useAppStore } from '@/store';
@@ -12,10 +11,10 @@ import Actions from './Actions';
 import Nav from './Nav';
 
 const Header = memo<DivProps>(({ children }) => {
-  const { themeMode, version } = useAppStore(
-    (st) => ({ themeMode: st.themeMode, version: st.version }),
-    shallow,
-  );
+  const { themeMode, version } = useAppStore((st) => ({
+    themeMode: st.themeMode,
+    version: st.version,
+  }));
   const theme = useTheme();
 
   return (

src/features/Setting/Form/Appearance.tsx

@@ -0,0 +1,181 @@
+import { Form, Swatches } from '@lobehub/ui';
+import { Input, Segmented, Select, Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { Palette } from 'lucide-react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CustomLogo } from '@/components';
+import { SettingItemGroup } from '@/features/Setting/Form/types';
+import { type WebuiSetting, selectors, useAppStore } from '@/store';
+
+import Footer from './Footer';
+import {
+  type NeutralColor,
+  type PrimaryColor,
+  findCustomThemeName,
+  neutralColors,
+  neutralColorsSwatches,
+  primaryColors,
+  primaryColorsSwatches,
+} from './data';
+
+const SettingForm = memo(() => {
+  const setting = useAppStore(selectors.currentSetting, isEqual);
+  const { onSetSetting, localeOptions } = useAppStore((st) => ({
+    localeOptions: st.localeOptions,
+    onSetSetting: st.onSetSetting,
+  }));
+  const [rawSetting, setRawSetting] = useState<WebuiSetting>(setting);
+  const [primaryColor, setPrimaryColor] = useState<PrimaryColor | undefined>(
+    setting.primaryColor || undefined,
+  );
+  const [neutralColor, setNeutralColor] = useState<NeutralColor | undefined>(
+    setting.neutralColor || undefined,
+  );
+
+  const { t } = useTranslation();
+
+  const onFinish = useCallback(
+    (value: WebuiSetting) => {
+      onSetSetting({ ...value, neutralColor, primaryColor });
+      location.reload();
+    },
+    [primaryColor, neutralColor],
+  );
+
+  const theme: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Select options={localeOptions} />,
+          desc: t('setting.language.desc'),
+          label: t('setting.language.title'),
+          name: 'i18n',
+        },
+        {
+          children: <Switch />,
+          desc: t('setting.reduceAnimation.desc'),
+          label: t('setting.reduceAnimation.title'),
+          name: 'liteAnimation',
+          valuePropName: 'checked',
+        },
+        {
+          children: (
+            <Swatches
+              activeColor={primaryColor ? primaryColors[primaryColor] : undefined}
+              colors={primaryColorsSwatches}
+              onSelect={(c) => setPrimaryColor(findCustomThemeName('primary', c))}
+            />
+          ),
+          desc: t('setting.primaryColor.desc'),
+          label: t('setting.primaryColor.title'),
+        },
+        {
+          children: (
+            <Swatches
+              activeColor={neutralColor ? neutralColors[neutralColor] : undefined}
+              colors={neutralColorsSwatches}
+              onSelect={(c) => setNeutralColor(findCustomThemeName('neutral', c))}
+            />
+          ),
+          desc: t('setting.neutralColor.desc'),
+          label: t('setting.neutralColor.title'),
+        },
+        {
+          children: (
+            <Segmented
+              options={[
+                {
+                  label: t('brand.lobe'),
+                  value: 'lobe',
+                },
+                {
+                  label: t('brand.kitchen'),
+                  value: 'kitchen',
+                },
+                {
+                  label: t('brand.custom'),
+                  value: 'custom',
+                },
+              ]}
+            />
+          ),
+          desc: t('setting.logoType.desc'),
+          label: t('setting.logoType.title'),
+          name: 'logoType',
+        },
+        {
+          children: <Input />,
+          desc: t('setting.customLogo.desc'),
+          divider: false,
+          hidden: rawSetting.logoType !== 'custom',
+          label: t('setting.customLogo.title'),
+          name: 'logoCustomUrl',
+        },
+        {
+          children: <Input />,
+          desc: t('setting.customTitle.desc'),
+          divider: false,
+          hidden: rawSetting.logoType !== 'custom',
+          label: t('setting.customTitle.title'),
+          name: 'logoCustomTitle',
+        },
+        {
+          children: (
+            <CustomLogo
+              logoCustomTitle={rawSetting.logoCustomTitle}
+              logoCustomUrl={rawSetting.logoCustomUrl}
+            />
+          ),
+          divider: false,
+          hidden: rawSetting.logoType !== 'custom',
+          label: t('setting.logoType.preview'),
+        },
+        {
+          children: <Switch />,
+          desc: t('setting.svgIcons.desc'),
+          label: t('setting.svgIcons.title'),
+          name: 'svgIcon',
+          valuePropName: 'checked',
+        },
+        {
+          children: <Switch />,
+          desc: t('setting.customFont.desc'),
+          label: t('setting.customFont.title'),
+          name: 'enableWebFont',
+          valuePropName: 'checked',
+        },
+        {
+          children: <Switch />,
+          desc: t('setting.confirmPageUnload.desc'),
+          label: t('setting.confirmPageUnload.title'),
+          name: 'confirmPageUnload',
+          valuePropName: 'checked',
+        },
+      ],
+      icon: Palette,
+      title: t('setting.group.theme'),
+    }),
+    [
+      primaryColor,
+      neutralColor,
+      rawSetting.logoType,
+      rawSetting.logoCustomTitle,
+      rawSetting.logoCustomUrl,
+    ],
+  );
+
+  return (
+    <Form
+      footer={<Footer />}
+      initialValues={setting}
+      items={[theme]}
+      onFinish={onFinish}
+      onValuesChange={(_, v) => setRawSetting(v)}
+      style={{ flex: 1 }}
+    />
+  );
+});
+
+export default SettingForm;