Skip to content

Commit

Permalink
✨ feat: Add ImageInfo modules
Browse files Browse the repository at this point in the history
  • Loading branch information
canisminor1990 committed Nov 28, 2023
1 parent c701c9f commit d1d079b
Show file tree
Hide file tree
Showing 45 changed files with 1,451 additions and 397 deletions.
4 changes: 4 additions & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -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
1 change: 0 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
],
Expand Down
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,4 @@ test-output
# add other ignore file below
__pycache__
/lobe_theme_config.json
/javascript/**/*
!/javascript/main.js
bun.lockb
241 changes: 159 additions & 82 deletions javascript/main.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions javascript/onig.js

Large diffs are not rendered by default.

13 changes: 12 additions & 1 deletion locales/en_US.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
9 changes: 4 additions & 5 deletions src/app/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
}, []);

Expand Down
24 changes: 11 additions & 13 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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;
9 changes: 4 additions & 5 deletions src/components/VersionTag/index.tsx
Original file line number Diff line number Diff line change
@@ -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);

Expand Down
5 changes: 3 additions & 2 deletions src/features/Content/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ export const useStyles = createStyles(
}
#img2img_toprow .interrogate-col {
flex-flow: column wrap;
flex-direction: row !important;
min-width: 100% !important;
}
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 4 additions & 5 deletions src/features/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 (
Expand Down
181 changes: 181 additions & 0 deletions src/features/Setting/Form/Appearance.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit d1d079b

Please sign in to comment.