diff --git a/lama_cleaner/app/package.json b/lama_cleaner/app/package.json index 17e38ee..47c148e 100644 --- a/lama_cleaner/app/package.json +++ b/lama_cleaner/app/package.json @@ -26,6 +26,7 @@ "npm-run-all": "4.x", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-feather": "^2.0.10", "react-hotkeys-hook": "^3.4.7", "react-scripts": "4.0.3", "react-use": "^17.3.1", diff --git a/lama_cleaner/app/public/index.html b/lama_cleaner/app/public/index.html index 94f2e6f..a48faf7 100644 --- a/lama_cleaner/app/public/index.html +++ b/lama_cleaner/app/public/index.html @@ -17,7 +17,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - lama-cleaner - Image inpainting powered by LaMa + lama-cleaner - Image inpainting powered by SOTA AI model diff --git a/lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx b/lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx new file mode 100644 index 0000000..b4b5e0c --- /dev/null +++ b/lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react' +import { useRecoilState } from 'recoil' +import { Coffee } from 'react-feather' +import { settingState } from '../../store/Atoms' +import Button from '../shared/Button' +import Modal from '../shared/Modal' + +const CoffeeIcon = () => { + const [show, setShow] = useState(false) + const onClick = () => { + setShow(true) + } + + return ( +
+ + +
+ + + ) +} + +export default CoffeeIcon diff --git a/lama_cleaner/app/src/components/Header/Header.tsx b/lama_cleaner/app/src/components/Header/Header.tsx index b2c51c8..1fd0b03 100644 --- a/lama_cleaner/app/src/components/Header/Header.tsx +++ b/lama_cleaner/app/src/components/Header/Header.tsx @@ -8,6 +8,7 @@ import useResolution from '../../hooks/useResolution' import { ThemeChanger } from './ThemeChanger' import SettingIcon from '../Settings/SettingIcon' import PromptInput from './PromptInput' +import CoffeeIcon from '../CoffeeIcon/CoffeeIcon' const Header = () => { const [file, setFile] = useRecoilState(fileState) @@ -42,13 +43,12 @@ const Header = () => { {isSD && file ? : <>}
+ - {file && ( -
- - -
- )} +
+ + +
) diff --git a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx index d3bb401..2d8dc86 100644 --- a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx +++ b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx @@ -18,7 +18,7 @@ export enum LDMSampler { function HDSettingBlock() { const [hdSettings, setHDSettings] = useRecoilState(hdSettingsState) - if (!hdSettings.enabled) { + if (!hdSettings?.enabled) { return <> } diff --git a/lama_cleaner/app/src/components/shared/Modal.tsx b/lama_cleaner/app/src/components/shared/Modal.tsx index 602a7bf..c523b6b 100644 --- a/lama_cleaner/app/src/components/shared/Modal.tsx +++ b/lama_cleaner/app/src/components/shared/Modal.tsx @@ -10,6 +10,7 @@ export interface ModalProps { children?: ReactNode onClose?: () => void title: string + showCloseIcon?: boolean className?: string } @@ -17,7 +18,7 @@ const Modal = React.forwardRef< React.ElementRef, ModalProps >((props, forwardedRef) => { - const { show, children, onClose, className, title } = props + const { show, children, onClose, className, title, showCloseIcon } = props const [_, setAppState] = useRecoilState(appState) const onOpenChange = (open: boolean) => { @@ -39,7 +40,11 @@ const Modal = React.forwardRef< >
{title} -
{children} @@ -48,4 +53,8 @@ const Modal = React.forwardRef< ) }) +Modal.defaultProps = { + showCloseIcon: true, +} + export default Modal diff --git a/lama_cleaner/app/src/components/shared/Tooltip.scss b/lama_cleaner/app/src/components/shared/Tooltip.scss index 0de4deb..f3cc250 100644 --- a/lama_cleaner/app/src/components/shared/Tooltip.scss +++ b/lama_cleaner/app/src/components/shared/Tooltip.scss @@ -14,7 +14,7 @@ $tooltip-margin: 1.5rem; animation-name: opacityReveal; animation-duration: 0.2s; animation-fill-mode: forwards; - animation-delay: 1s; + animation-delay: 0.2s; box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; } diff --git a/lama_cleaner/app/src/styles/App.scss b/lama_cleaner/app/src/styles/App.scss index ecdb81e..c9523ca 100644 --- a/lama_cleaner/app/src/styles/App.scss +++ b/lama_cleaner/app/src/styles/App.scss @@ -9,3 +9,8 @@ transition-duration: 0.2s; transition-timing-function: repeat(2, ease-out); } + +a { + color: inherit; /* blue colors for links too */ + text-decoration: inherit; /* no underline */ +} diff --git a/lama_cleaner/app/yarn.lock b/lama_cleaner/app/yarn.lock index c1a266d..1cba09b 100644 --- a/lama_cleaner/app/yarn.lock +++ b/lama_cleaner/app/yarn.lock @@ -10167,6 +10167,13 @@ react-error-overlay@^6.0.9: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== +react-feather@^2.0.10: + version "2.0.10" + resolved "https://registry.npmmirror.com/react-feather/-/react-feather-2.0.10.tgz#0e9abf05a66754f7b7bb71757ac4da7fb6be3b68" + integrity sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ== + dependencies: + prop-types "^15.7.2" + react-hotkeys-hook@^3.4.7: version "3.4.7" resolved "https://registry.npmmirror.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz#e16a0a85f59feed9f48d12cfaf166d7df4c96b7a"