kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

add by me coffee

Browse Source
This commit is contained in:
Qing 2022-10-26 22:07:06 +08:00
parent e971f6090b
commit 6921a13a83
9 changed files with 98 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lama_cleaner/app/package.json
View File

@ -26,6 +26,7 @@
"npm-run-all": "4.x", "npm-run-all": "4.x",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-feather": "^2.0.10",
"react-hotkeys-hook": "^3.4.7", "react-hotkeys-hook": "^3.4.7",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-use": "^17.3.1", "react-use": "^17.3.1",

2
lama_cleaner/app/public/index.html
View File

@ -17,7 +17,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. 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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

65
lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx Normal file
View 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

12
lama_cleaner/app/src/components/Header/Header.tsx
View File

@ -8,6 +8,7 @@ import useResolution from '../../hooks/useResolution'
import { ThemeChanger } from './ThemeChanger' import { ThemeChanger } from './ThemeChanger'
import SettingIcon from '../Settings/SettingIcon' import SettingIcon from '../Settings/SettingIcon'
import PromptInput from './PromptInput' import PromptInput from './PromptInput'
import CoffeeIcon from '../CoffeeIcon/CoffeeIcon'
const Header = () => { const Header = () => {
const [file, setFile] = useRecoilState(fileState) const [file, setFile] = useRecoilState(fileState)
@ -42,13 +43,12 @@ const Header = () => {
{isSD && file ? <PromptInput /> : <></>} {isSD && file ? <PromptInput /> : <></>}
<div className="header-icons-wrapper"> <div className="header-icons-wrapper">
<CoffeeIcon />
<ThemeChanger /> <ThemeChanger />
{file && ( <div className="header-icons">
<div className="header-icons"> <Shortcuts />
<Shortcuts /> <SettingIcon />
<SettingIcon /> </div>
</div>
)}
</div> </div>
</header> </header>
) )

2
lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
View File

@ -18,7 +18,7 @@ export enum LDMSampler {
function HDSettingBlock() { function HDSettingBlock() {
const [hdSettings, setHDSettings] = useRecoilState(hdSettingsState) const [hdSettings, setHDSettings] = useRecoilState(hdSettingsState)
if (!hdSettings.enabled) { if (!hdSettings?.enabled) {
return <></> return <></>
} }

13
lama_cleaner/app/src/components/shared/Modal.tsx
View File

@ -10,6 +10,7 @@ export interface ModalProps {
children?: ReactNode children?: ReactNode
onClose?: () => void onClose?: () => void
title: string title: string
showCloseIcon?: boolean
className?: string className?: string
} }
@ -17,7 +18,7 @@ const Modal = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Root>, React.ElementRef<typeof DialogPrimitive.Root>,
ModalProps ModalProps
>((props, forwardedRef) => { >((props, forwardedRef) => {
const { show, children, onClose, className, title } = props const { show, children, onClose, className, title, showCloseIcon } = props
const [_, setAppState] = useRecoilState(appState) const [_, setAppState] = useRecoilState(appState)
const onOpenChange = (open: boolean) => { const onOpenChange = (open: boolean) => {
@ -39,7 +40,11 @@ const Modal = React.forwardRef<
> >
<div className="modal-header"> <div className="modal-header">
<DialogPrimitive.Title>{title}</DialogPrimitive.Title> <DialogPrimitive.Title>{title}</DialogPrimitive.Title>
<Button icon={<XIcon />} onClick={onClose} /> {showCloseIcon ? (
<Button icon={<XIcon />} onClick={onClose} />
) : (
<></>
)}
</div> </div>
{children} {children}
</DialogPrimitive.Content> </DialogPrimitive.Content>
@ -48,4 +53,8 @@ const Modal = React.forwardRef<
) )
}) })
Modal.defaultProps = {
showCloseIcon: true,
}
export default Modal export default Modal

2
lama_cleaner/app/src/components/shared/Tooltip.scss
View File

@ -14,7 +14,7 @@ $tooltip-margin: 1.5rem;
animation-name: opacityReveal; animation-name: opacityReveal;
animation-duration: 0.2s; animation-duration: 0.2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-delay: 1s; animation-delay: 0.2s;
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
hsl(206 22% 7% / 20%) 0px 10px 20px -15px; hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
} }

5
lama_cleaner/app/src/styles/App.scss
View File

@ -9,3 +9,8 @@
transition-duration: 0.2s; transition-duration: 0.2s;
transition-timing-function: repeat(2, ease-out); transition-timing-function: repeat(2, ease-out);
} }
a {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
}

7
lama_cleaner/app/yarn.lock
View File

@ -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" resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== 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: react-hotkeys-hook@^3.4.7:
version "3.4.7" version "3.4.7"
resolved "https://registry.npmmirror.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz#e16a0a85f59feed9f48d12cfaf166d7df4c96b7a" resolved "https://registry.npmmirror.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz#e16a0a85f59feed9f48d12cfaf166d7df4c96b7a"