add by me coffee
This commit is contained in:
Qing
parent
e971f6090b
commit
6921a13a83
@ -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",
|
||||
|
||||
@ -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`.
|
||||
-->
|
||||
<title>lama-cleaner - Image inpainting powered by LaMa</title>
|
||||
<title>lama-cleaner - Image inpainting powered by SOTA AI model</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
65
lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx
Normal file
65
lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx
Normal file
@ -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 (
|
||||
<div>
|
||||
<Button
|
||||
onClick={onClick}
|
||||
toolTip="Buy me a coffee"
|
||||
tooltipPosition="bottom"
|
||||
style={{ border: 0 }}
|
||||
icon={<Coffee />}
|
||||
/>
|
||||
<Modal
|
||||
onClose={() => setShow(false)}
|
||||
title="Buy Me a Coffee"
|
||||
className="modal-setting"
|
||||
show={show}
|
||||
showCloseIcon={false}
|
||||
>
|
||||
<h4 style={{ lineHeight: '24px' }}>
|
||||
Hi there, If you found my project is useful, and want to help keep it
|
||||
alive please consider donating! Thank you for your support!
|
||||
</h4>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<Button onClick={() => setShow(false)}> No thanks </Button>
|
||||
<Button border onClick={() => setShow(false)}>
|
||||
<a
|
||||
href="https://ko-fi.com/Z8Z1CZJGY"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
Sure <Coffee />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoffeeIcon
|
||||
@ -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 ? <PromptInput /> : <></>}
|
||||
|
||||
<div className="header-icons-wrapper">
|
||||
<CoffeeIcon />
|
||||
<ThemeChanger />
|
||||
{file && (
|
||||
<div className="header-icons">
|
||||
<Shortcuts />
|
||||
<SettingIcon />
|
||||
</div>
|
||||
)}
|
||||
<div className="header-icons">
|
||||
<Shortcuts />
|
||||
<SettingIcon />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
@ -18,7 +18,7 @@ export enum LDMSampler {
|
||||
|
||||
function HDSettingBlock() {
|
||||
const [hdSettings, setHDSettings] = useRecoilState(hdSettingsState)
|
||||
if (!hdSettings.enabled) {
|
||||
if (!hdSettings?.enabled) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
|
||||
@ -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<typeof DialogPrimitive.Root>,
|
||||
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<
|
||||
>
|
||||
<div className="modal-header">
|
||||
<DialogPrimitive.Title>{title}</DialogPrimitive.Title>
|
||||
<Button icon={<XIcon />} onClick={onClose} />
|
||||
{showCloseIcon ? (
|
||||
<Button icon={<XIcon />} onClick={onClose} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</DialogPrimitive.Content>
|
||||
@ -48,4 +53,8 @@ const Modal = React.forwardRef<
|
||||
)
|
||||
})
|
||||
|
||||
Modal.defaultProps = {
|
||||
showCloseIcon: true,
|
||||
}
|
||||
|
||||
export default Modal
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user