style refine
This commit is contained in:
Sanster
parent
855fd1f006
commit
10b35a3f0a
@ -55,7 +55,7 @@ Frontend code are modified from [cleanup.pictures](https://github.com/initml/cle
|
||||
great online services [here](https://cleanup.pictures/).
|
||||
|
||||
- Install dependencies:`cd lama_cleaner/app/ && yarn`
|
||||
- Start development server: `yarn dev`
|
||||
- Start development server: `yarn start`
|
||||
- Build: `yarn build`
|
||||
|
||||
## Docker
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "/static/css/main.1e5aabda.chunk.css",
|
||||
"main.js": "/static/js/main.bc8bc9eb.chunk.js",
|
||||
"main.css": "/static/css/main.ba23cb34.chunk.css",
|
||||
"main.js": "/static/js/main.03e0a3ad.chunk.js",
|
||||
"runtime-main.js": "/static/js/runtime-main.5e86ac81.js",
|
||||
"static/js/2.9608d3ec.chunk.js": "/static/js/2.9608d3ec.chunk.js",
|
||||
"static/js/2.8c938027.chunk.js": "/static/js/2.8c938027.chunk.js",
|
||||
"index.html": "/index.html",
|
||||
"static/js/2.9608d3ec.chunk.js.LICENSE.txt": "/static/js/2.9608d3ec.chunk.js.LICENSE.txt",
|
||||
"static/js/2.8c938027.chunk.js.LICENSE.txt": "/static/js/2.8c938027.chunk.js.LICENSE.txt",
|
||||
"static/media/_index.scss": "/static/media/WorkSans-SemiBold.1e98db4e.ttf"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/js/runtime-main.5e86ac81.js",
|
||||
"static/js/2.9608d3ec.chunk.js",
|
||||
"static/css/main.1e5aabda.chunk.css",
|
||||
"static/js/main.bc8bc9eb.chunk.js"
|
||||
"static/js/2.8c938027.chunk.js",
|
||||
"static/css/main.ba23cb34.chunk.css",
|
||||
"static/js/main.03e0a3ad.chunk.js"
|
||||
]
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#ffffff"/><title>lama-cleaner - Image inpainting powered by LaMa</title><link href="/static/css/main.1e5aabda.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>"localhost"===location.hostname&&(self.FIREBASE_APPCHECK_DEBUG_TOKEN=!0)</script><script>!function(e){function r(r){for(var n,l,a=r[0],f=r[1],i=r[2],p=0,s=[];p<a.length;p++)l=a[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var i=0;i<a.length;i++)r(a[i]);var c=f;t()}([])</script><script src="/static/js/2.9608d3ec.chunk.js"></script><script src="/static/js/main.bc8bc9eb.chunk.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#ffffff"/><title>lama-cleaner - Image inpainting powered by LaMa</title><link href="/static/css/main.ba23cb34.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>"localhost"===location.hostname&&(self.FIREBASE_APPCHECK_DEBUG_TOKEN=!0)</script><script>!function(e){function r(r){for(var n,l,a=r[0],f=r[1],i=r[2],p=0,s=[];p<a.length;p++)l=a[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var i=0;i<a.length;i++)r(a[i]);var c=f;t()}([])</script><script src="/static/js/2.8c938027.chunk.js"></script><script src="/static/js/main.03e0a3ad.chunk.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
lama_cleaner/app/build/static/js/2.8c938027.chunk.js
Normal file
2
lama_cleaner/app/build/static/js/2.8c938027.chunk.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
lama_cleaner/app/build/static/js/main.03e0a3ad.chunk.js
Normal file
1
lama_cleaner/app/build/static/js/main.03e0a3ad.chunk.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -3,10 +3,11 @@ import { useKeyPressEvent } from 'react-use'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import useInputImage from './hooks/useInputImage'
|
||||
import LandingPage from './components/LandingPage/LandingPage'
|
||||
import { ThemeChanger, themeState } from './components/shared/ThemeChanger'
|
||||
import { themeState } from './components/Header/ThemeChanger'
|
||||
import Workspace from './components/Workspace'
|
||||
import { fileState } from './store/Atoms'
|
||||
import { keepGUIAlive } from './utils'
|
||||
import Header from './components/Header/Header'
|
||||
|
||||
// Keeping GUI Window Open
|
||||
keepGUIAlive()
|
||||
@ -30,7 +31,7 @@ function App() {
|
||||
|
||||
return (
|
||||
<div className="lama-cleaner" data-theme={theme}>
|
||||
<ThemeChanger />
|
||||
<Header />
|
||||
{file ? <Workspace file={file} /> : <LandingPage />}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -38,10 +38,10 @@
|
||||
.editor-slider {
|
||||
grid-area: original-image-content;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
width: 6px;
|
||||
justify-self: end;
|
||||
background-color: var(--yellow-accent);
|
||||
transition: all 350ms ease-in-out;
|
||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@ -52,17 +52,21 @@
|
||||
}
|
||||
|
||||
.editor-toolkit-panel {
|
||||
// width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 1rem 4rem;
|
||||
bottom: 0.5rem;
|
||||
// border: 1px solid rgb(100, 100, 120, 0.5);
|
||||
border-radius: 3rem;
|
||||
padding: 1rem 3rem;
|
||||
display: grid;
|
||||
grid-template-areas: 'toolkit-size-selector toolkit-brush-slider toolkit-btns';
|
||||
column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--editor-toolkit-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
backdrop-filter: blur(12px);
|
||||
animation: slideUp 0.2s ease-out;
|
||||
border: 1px solid rgb(100, 100, 120, 0.4);
|
||||
|
||||
@include mobile {
|
||||
padding: 1rem 2rem;
|
||||
@ -73,6 +77,11 @@
|
||||
row-gap: 2rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.eyeicon-active {
|
||||
background-color: var(--yellow-accent);
|
||||
color: var(--btn-text-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.editor-brush-slider {
|
||||
@ -97,8 +106,8 @@
|
||||
.brush-shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 190, 0, 0.75);
|
||||
border: 1px dashed var(--border-color);
|
||||
background-color: #ffcc00bb;
|
||||
border: 1px solid var(--yellow-accent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -112,17 +121,21 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
align-items: center;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.editor-size-selector-main {
|
||||
@include accented-display(var(--yellow-accent));
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
column-gap: 0.25rem;
|
||||
@include accented-display(var(white));
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
gap: 8px;
|
||||
width: 128px;
|
||||
|
||||
border: 1px solid var(--editor-size-border-color);
|
||||
color: var(--options-text-color);
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
@ -133,29 +146,45 @@
|
||||
|
||||
.editor-size-options {
|
||||
@include accented-display(var(--btn-primary-bg));
|
||||
width: 128px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
justify-self: center;
|
||||
margin-left: 2.7rem;
|
||||
position: fixed;
|
||||
bottom: 4rem;
|
||||
cursor: pointer;
|
||||
|
||||
color: var(--options-text-color);
|
||||
background-color: var(--page-bg);
|
||||
border: 1px solid var(--editor-size-border-color);
|
||||
|
||||
border-radius: 0.6rem;
|
||||
|
||||
@include mobile {
|
||||
bottom: 11.5rem;
|
||||
margin-left: 2.9rem;
|
||||
}
|
||||
|
||||
.editor-size-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
user-select: none;
|
||||
padding: 0.2rem 0.8rem;
|
||||
border-bottom: 1px dashed var(--border-color);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
|
||||
&:first-of-type {
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--yellow-accent);
|
||||
color: var(--btn-text-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,8 +23,7 @@ import SizeSelector from './SizeSelector'
|
||||
import { downloadImage, loadImage, useImage } from '../../utils'
|
||||
|
||||
const TOOLBAR_SIZE = 200
|
||||
const BRUSH_COLOR = 'rgba(255, 190, 0, 0.65)'
|
||||
// const NO_COLOR = 'rgba(255,255,255,0)'
|
||||
const BRUSH_COLOR = '#ffcc00bb'
|
||||
|
||||
interface EditorProps {
|
||||
file: File
|
||||
@ -654,7 +653,7 @@ export default function Editor(props: EditorProps) {
|
||||
/>
|
||||
<Button
|
||||
icon={<EyeIcon />}
|
||||
style={showOriginal ? { backgroundColor: 'rgb(255, 190, 0)' } : {}}
|
||||
className={showOriginal ? 'eyeicon-active' : ''}
|
||||
onDown={ev => {
|
||||
ev.preventDefault()
|
||||
setShowOriginal(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import ChevronDoubleDownIcon from '@heroicons/react/solid/ChevronDoubleDownIcon'
|
||||
import { useClickAway } from 'react-use'
|
||||
import { ChevronUpIcon } from '@heroicons/react/outline'
|
||||
|
||||
const sizes = ['720', '1080', '2000', 'Original']
|
||||
|
||||
@ -68,7 +68,6 @@ export default function SizeSelector(props: SizeSelectorProps) {
|
||||
|
||||
return (
|
||||
<div className="editor-size-selector" ref={sizeSelectorRef}>
|
||||
<p>Size:</p>
|
||||
<div
|
||||
className="editor-size-selector-main"
|
||||
role="button"
|
||||
@ -77,8 +76,8 @@ export default function SizeSelector(props: SizeSelectorProps) {
|
||||
aria-hidden="true"
|
||||
>
|
||||
<p>{getSizeShowName(activeSize.toString())}</p>
|
||||
<div className="editor-size-selector-chevron">
|
||||
<ChevronDoubleDownIcon />
|
||||
<div className="editor-size-selector-icon">
|
||||
<ChevronUpIcon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -30,6 +30,6 @@
|
||||
}
|
||||
|
||||
.file-select-message {
|
||||
font-family: 'WorkSans-Bold';
|
||||
font-family: 'WorkSans';
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -1,16 +1,25 @@
|
||||
header {
|
||||
grid-area: main-content;
|
||||
height: 60px;
|
||||
padding: 1rem 2rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
z-index: 20;
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgb(100, 100, 120, 0.2);
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
justify-self: end;
|
||||
margin-right: 4rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-icons-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
@ -1,27 +1,36 @@
|
||||
import { ArrowLeftIcon } from '@heroicons/react/outline'
|
||||
import React from 'react'
|
||||
import { useSetRecoilState } from 'recoil'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { fileState } from '../../store/Atoms'
|
||||
import Button from '../shared/Button'
|
||||
import Shortcuts from '../Shortcuts/Shortcuts'
|
||||
import useResolution from '../../hooks/useResolution'
|
||||
import { ThemeChanger } from './ThemeChanger'
|
||||
|
||||
const Header = () => {
|
||||
const setFile = useSetRecoilState(fileState)
|
||||
const [file, setFile] = useRecoilState(fileState)
|
||||
const resolution = useResolution()
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
<header>
|
||||
<div style={{ visibility: file ? 'visible' : 'hidden' }}>
|
||||
<Button
|
||||
icon={<ArrowLeftIcon />}
|
||||
onClick={() => {
|
||||
setFile(undefined)
|
||||
}}
|
||||
style={{ border: 0 }}
|
||||
>
|
||||
{resolution === 'desktop' ? 'Start New' : undefined}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="header-icons-wrapper">
|
||||
<div style={{ visibility: file ? 'visible' : 'hidden' }}>
|
||||
<Shortcuts />
|
||||
</div>
|
||||
<ThemeChanger />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
.theme-toggle-ui {
|
||||
position: absolute;
|
||||
right: 2.5rem;
|
||||
top: 1rem;
|
||||
z-index: 10;
|
||||
transition: all 0.2s ease-in;
|
||||
user-select: none;
|
||||
|
||||
.theme-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,24 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { atom, useRecoilState } from 'recoil'
|
||||
import { SunIcon, MoonIcon } from '@heroicons/react/outline'
|
||||
|
||||
export const themeState = atom({
|
||||
key: 'themeState',
|
||||
default: 'dark',
|
||||
default: 'light',
|
||||
})
|
||||
|
||||
export const ThemeChanger = () => {
|
||||
const [theme, setTheme] = useRecoilState(themeState)
|
||||
|
||||
useEffect(() => {
|
||||
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
if (darkThemeMq.matches) {
|
||||
setTheme('dark')
|
||||
} else {
|
||||
setTheme('light')
|
||||
}
|
||||
}, [])
|
||||
|
||||
const themeSwitchHandler = () => {
|
||||
const newTheme = theme === 'light' ? 'dark' : 'light'
|
||||
setTheme(newTheme)
|
||||
@ -27,7 +36,7 @@ export const ThemeChanger = () => {
|
||||
{theme === 'light' ? (
|
||||
<MoonIcon />
|
||||
) : (
|
||||
<SunIcon style={{ color: 'rgb(255, 190, 0)' }} />
|
||||
<SunIcon style={{ color: '#ffcc00' }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -33,8 +33,9 @@
|
||||
}
|
||||
|
||||
.shortcut-key {
|
||||
justify-self: end;
|
||||
font-family: 'WorkSans-Bold';
|
||||
background-color: var(--modal-hotkey-bg);
|
||||
border: 1px solid var(--modal-hotkey-border-color);
|
||||
padding: 0.4rem 1rem;
|
||||
width: max-content;
|
||||
border-radius: 0.4rem;
|
||||
@ -45,9 +46,9 @@
|
||||
}
|
||||
|
||||
.shortcut-description {
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
width: 15rem;
|
||||
justify-self: start;
|
||||
text-align: left;
|
||||
width: 18rem;
|
||||
|
||||
@include mobile {
|
||||
text-align: left;
|
||||
|
||||
@ -23,6 +23,7 @@ const Shortcuts = () => {
|
||||
<Button
|
||||
onClick={shortcutStateHandler}
|
||||
disabled={shortcutVisibility}
|
||||
style={{ border: 0 }}
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -13,8 +13,8 @@ function ShortCut(props: Shortcut) {
|
||||
|
||||
return (
|
||||
<div className="shortcut-option">
|
||||
<div className="shortcut-key">{children}</div>
|
||||
<div className="shortcut-description">{content}</div>
|
||||
<div className="shortcut-key">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -45,7 +45,10 @@ export default function ShortcutsModal() {
|
||||
<ShortCut content="View original image">
|
||||
<p>Hold Tab</p>
|
||||
</ShortCut>
|
||||
<ShortCut content="Reset zoom/pan & Cancel mask drawing">
|
||||
<ShortCut content="Reset zoom/pan">
|
||||
<p>Esc</p>
|
||||
</ShortCut>
|
||||
<ShortCut content="Cancel mask drawing">
|
||||
<p>Esc</p>
|
||||
</ShortCut>
|
||||
<ShortCut content="Decrease Brush Size">
|
||||
|
||||
@ -2,7 +2,6 @@ import React from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import Editor from './Editor/Editor'
|
||||
import { shortcutsState } from '../store/Atoms'
|
||||
import Header from './Header/Header'
|
||||
import ShortcutsModal from './Shortcuts/ShortcutsModal'
|
||||
|
||||
interface WorkspaceProps {
|
||||
@ -13,7 +12,6 @@ const Workspace = ({ file }: WorkspaceProps) => {
|
||||
const shortcutVisbility = useRecoilValue(shortcutsState)
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Editor file={file} />
|
||||
{shortcutVisbility ? <ShortcutsModal /> : null}
|
||||
</>
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
column-gap: 1rem;
|
||||
background-color: var(--btn-primary-bg);
|
||||
color: black;
|
||||
font-family: 'WorkSans-Bold', sans-serif;
|
||||
border: 1px solid var(--btn-border-color);
|
||||
color: var(--btn-text-color);
|
||||
font-family: 'WorkSans', sans-serif;
|
||||
width: max-content;
|
||||
padding: 0.5rem;
|
||||
place-items: center;
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: var(--btn-primary-hover-bg);
|
||||
color: var(--btn-text-hover-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function MadeWidthBadge() {
|
||||
return (
|
||||
<svg
|
||||
width="101"
|
||||
height="43"
|
||||
viewBox="0 0 101 43"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0.158081 28.5402C0.158081 26.12 2.07738 24.1581 4.44495 24.1581H5.62173C6.08596 24.1581 6.46229 24.5428 6.46229 25.0173V25.7907C6.46229 26.2652 6.08596 26.6499 5.62173 26.6499H4.44495C3.47006 26.6499 2.4276 27.5437 2.4276 28.5402V29.7432C2.4276 30.2177 2.05127 30.6024 1.58704 30.6024H0.998643C0.534413 30.6024 0.158081 30.2177 0.158081 29.7432L0.158081 28.5402Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M15.6244 35.2423C15.6244 37.6625 13.7051 39.6244 11.3376 39.6244H10.1608C9.69654 39.6244 9.3202 39.2397 9.3202 38.7652V37.9919C9.3202 37.5173 9.69654 37.1326 10.1608 37.1326H11.3376C12.3124 37.1326 13.3549 36.2388 13.3549 35.2423V34.0394C13.3549 33.5648 13.7312 33.1801 14.1955 33.1801H14.7839C15.2481 33.1801 15.6244 33.5648 15.6244 34.0394V35.2423Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.3376 24.1581C13.7051 24.1581 15.6244 26.12 15.6244 28.5402V29.7432C15.6244 30.2177 15.2481 30.6024 14.7839 30.6024H14.0274C13.5631 30.6024 13.1868 30.2177 13.1868 29.7432V28.5402C13.1868 27.5437 12.3124 26.478 11.3376 26.478H10.1608C9.69654 26.478 9.3202 26.0934 9.3202 25.6188V25.0173C9.3202 24.5428 9.69654 24.1581 10.1608 24.1581L11.3376 24.1581Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.44495 39.6244C2.07738 39.6244 0.158081 37.6625 0.158081 35.2423L0.158082 34.0394C0.158082 33.5648 0.534414 33.1801 0.998643 33.1801H1.75515C2.21938 33.1801 2.59571 33.5648 2.59571 34.0394L2.59571 35.2423C2.59571 36.2388 3.47006 37.3045 4.44495 37.3045L5.62173 37.3045C6.08596 37.3045 6.46229 37.6892 6.46229 38.1637V38.7652C6.46229 39.2397 6.08596 39.6244 5.62173 39.6244L4.44495 39.6244Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M36.6965 29.5082C36.289 26.5653 34.0253 24.8578 31.0888 24.8578C27.6285 24.8578 25.0219 27.3802 25.0219 31.662C25.0219 35.9373 27.5961 38.4663 31.0888 38.4663C34.2387 38.4663 36.3279 36.4289 36.6965 33.8999L34.2775 33.887C33.9735 35.4393 32.7058 36.3125 31.1212 36.3125C28.9738 36.3125 27.4345 34.7019 27.4345 31.662C27.4345 28.6738 28.9609 27.0116 31.1276 27.0116C32.7382 27.0116 33.9994 27.9236 34.2775 29.5082H36.6965Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M41.1319 25.0389H38.7905V38.2852H41.1319V25.0389Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M43.5396 38.2852H45.881V28.3504H43.5396V38.2852ZM44.7168 26.9404C45.4606 26.9404 46.0686 26.3712 46.0686 25.6727C46.0686 24.9677 45.4606 24.3985 44.7168 24.3985C43.9665 24.3985 43.3585 24.9677 43.3585 25.6727C43.3585 26.3712 43.9665 26.9404 44.7168 26.9404Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M48.2887 42.0107H50.6301V36.7199H50.7271C51.0958 37.4443 51.8654 38.4598 53.573 38.4598C55.9144 38.4598 57.6672 36.6035 57.6672 33.3307C57.6672 30.0192 55.8626 28.2211 53.5665 28.2211C51.8137 28.2211 51.0828 29.2754 50.7271 29.9933H50.5913V28.3504H48.2887V42.0107ZM50.5848 33.3178C50.5848 31.3904 51.4127 30.1421 52.9197 30.1421C54.4785 30.1421 55.2805 31.468 55.2805 33.3178C55.2805 35.1806 54.4656 36.5388 52.9197 36.5388C51.4256 36.5388 50.5848 35.2453 50.5848 33.3178Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M64.2645 38.2852C68.3005 38.2852 70.6936 35.7886 70.6936 31.6491C70.6936 27.5225 68.3005 25.0389 64.355 25.0389H59.7757V38.2852H64.2645ZM62.1753 36.209V27.1151H64.2192C66.9099 27.1151 68.3134 28.6156 68.3134 31.6491C68.3134 34.6955 66.9099 36.209 64.1481 36.209H62.1753Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M72.8701 38.2852H75.2115V32.4446C75.2115 31.1834 76.1622 30.2908 77.4494 30.2908C77.8439 30.2908 78.3355 30.362 78.536 30.4266V28.2728C78.3225 28.234 77.9539 28.2081 77.6951 28.2081C76.5568 28.2081 75.606 28.8549 75.2438 30.0062H75.1403V28.3504H72.8701V38.2852Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M84.0159 38.4792C86.9265 38.4792 88.7763 36.4289 88.7763 33.3566C88.7763 30.2779 86.9265 28.2211 84.0159 28.2211C81.1054 28.2211 79.2555 30.2779 79.2555 33.3566C79.2555 36.4289 81.1054 38.4792 84.0159 38.4792ZM84.0289 36.6035C82.4183 36.6035 81.6293 35.1676 81.6293 33.3501C81.6293 31.5327 82.4183 30.0774 84.0289 30.0774C85.6135 30.0774 86.4026 31.5327 86.4026 33.3501C86.4026 35.1676 85.6135 36.6035 84.0289 36.6035Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M90.7636 42.0107H93.105V36.7199H93.202C93.5707 37.4443 94.3404 38.4598 96.0479 38.4598C98.3893 38.4598 100.142 36.6035 100.142 33.3307C100.142 30.0192 98.3375 28.2211 96.0414 28.2211C94.2886 28.2211 93.5577 29.2754 93.202 29.9933H93.0662V28.3504H90.7636V42.0107ZM93.0597 33.3178C93.0597 31.3904 93.8876 30.1421 95.3946 30.1421C96.9534 30.1421 97.7554 31.468 97.7554 33.3178C97.7554 35.1806 96.9405 36.5388 95.3946 36.5388C93.9005 36.5388 93.0597 35.2453 93.0597 33.3178Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M1.03871 3.54545V13H2.39595V6.15376H2.48366L5.27202 12.9862H6.39844L9.18679 6.15838H9.2745V13H10.6317V3.54545H8.90057L5.89062 10.8949H5.77983L2.76989 3.54545H1.03871ZM14.6585 13.157C15.8311 13.157 16.4912 12.5614 16.7544 12.0305H16.8097V13H18.1578V8.29119C18.1578 6.22763 16.5328 5.81676 15.4063 5.81676C14.123 5.81676 12.9411 6.33381 12.4795 7.62642L13.7767 7.92188C13.9798 7.41868 14.4969 6.93395 15.4248 6.93395C16.3158 6.93395 16.7728 7.40021 16.7728 8.20348V8.2358C16.7728 8.73899 16.2558 8.72976 14.9816 8.87749C13.6382 9.03445 12.2625 9.3853 12.2625 10.9964C12.2625 12.3906 13.3105 13.157 14.6585 13.157ZM14.9585 12.049C14.1784 12.049 13.6151 11.6982 13.6151 11.0149C13.6151 10.2763 14.2707 10.0131 15.0693 9.90696C15.5171 9.84695 16.5789 9.72692 16.7774 9.52841V10.4425C16.7774 11.2827 16.108 12.049 14.9585 12.049ZM22.6507 13.1385C23.9434 13.1385 24.4512 12.3491 24.7005 11.8967H24.8159V13H26.1639V3.54545H24.7836V7.05859H24.7005C24.4512 6.62003 23.9803 5.81676 22.66 5.81676C20.9473 5.81676 19.687 7.16939 19.687 9.46839C19.687 11.7628 20.9288 13.1385 22.6507 13.1385ZM22.9554 11.9613C21.7228 11.9613 21.0811 10.8764 21.0811 9.45455C21.0811 8.04652 21.709 6.98935 22.9554 6.98935C24.1603 6.98935 24.8066 7.97266 24.8066 9.45455C24.8066 10.9457 24.1465 11.9613 22.9554 11.9613ZM31.1901 13.1431C32.7366 13.1431 33.8307 12.3814 34.1446 11.2273L32.8382 10.9918C32.5889 11.6612 31.9887 12.0028 31.2039 12.0028C30.0221 12.0028 29.2281 11.2365 29.1911 9.87003H34.2323V9.38068C34.2323 6.81854 32.6997 5.81676 31.0931 5.81676C29.1173 5.81676 27.8154 7.32173 27.8154 9.50071C27.8154 11.7028 29.0988 13.1431 31.1901 13.1431ZM29.1958 8.83594C29.2512 7.82955 29.9806 6.95703 31.1024 6.95703C32.1734 6.95703 32.8751 7.75107 32.8797 8.83594H29.1958ZM40.7416 13H42.145L43.5853 7.88033H43.6915L45.1318 13H46.5399L48.6219 5.90909H47.1954L45.8151 11.0934H45.7458L44.3609 5.90909H42.9344L41.5402 11.1165H41.471L40.0814 5.90909H38.6549L40.7416 13ZM49.9318 13H51.3121V5.90909H49.9318V13ZM50.6289 4.81499C51.1044 4.81499 51.5014 4.44567 51.5014 3.99325C51.5014 3.54084 51.1044 3.1669 50.6289 3.1669C50.1488 3.1669 49.7564 3.54084 49.7564 3.99325C49.7564 4.44567 50.1488 4.81499 50.6289 4.81499ZM56.4791 5.90909H55.0249V4.21023H53.6446V5.90909H52.6059V7.01705H53.6446V11.2042C53.64 12.4922 54.6233 13.1154 55.7128 13.0923C56.1514 13.0877 56.4468 13.0046 56.6084 12.9446L56.3591 11.8043C56.2668 11.8228 56.096 11.8643 55.8744 11.8643C55.4266 11.8643 55.0249 11.7166 55.0249 10.918V7.01705H56.4791V5.90909ZM59.5387 8.78977C59.5387 7.65874 60.2543 7.01243 61.2376 7.01243C62.1886 7.01243 62.7564 7.61719 62.7564 8.65589V13H64.1367V8.4897C64.1367 6.72159 63.1673 5.81676 61.7085 5.81676C60.6051 5.81676 59.9403 6.29688 59.608 7.06321H59.5202V3.54545H58.1584V13H59.5387V8.78977ZM75.1389 13.1477L79.8847 8.40199C81.0203 7.26633 81.0111 5.39204 79.8847 4.28409C78.7306 3.14844 76.9255 3.15767 75.7668 4.28409L75.1389 4.89347L74.5111 4.28409C73.3524 3.15767 71.5473 3.14844 70.3932 4.28409C69.2668 5.39204 69.2575 7.26633 70.3932 8.40199L75.1389 13.1477ZM86.2623 13H87.6104V11.8967H87.7258C87.9751 12.3491 88.4829 13.1385 89.7755 13.1385C91.4928 13.1385 92.7393 11.7628 92.7393 9.46839C92.7393 7.16939 91.4743 5.81676 89.7616 5.81676C88.4459 5.81676 87.9704 6.62003 87.7258 7.05859H87.6427V3.54545H86.2623V13ZM87.615 9.45455C87.615 7.97266 88.2613 6.98935 89.4662 6.98935C90.7172 6.98935 91.3451 8.04652 91.3451 9.45455C91.3451 10.8764 90.6988 11.9613 89.4662 11.9613C88.2797 11.9613 87.615 10.9457 87.615 9.45455ZM94.9078 15.6591C96.0481 15.6591 96.7683 15.0636 97.1792 13.9464L100.111 5.92294L98.6195 5.90909L96.8237 11.4119H96.7498L94.954 5.90909H93.4767L96.0712 13.0923L95.9004 13.5632C95.5495 14.505 95.0556 14.5835 94.2985 14.3757L93.9661 15.5067C94.1323 15.5806 94.4924 15.6591 94.9078 15.6591Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -1,3 +1,16 @@
|
||||
.modal-mask {
|
||||
z-index: 9999;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
background-color: var(--model-mask-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: grid;
|
||||
grid-auto-rows: max-content;
|
||||
@ -5,7 +18,6 @@
|
||||
place-self: center;
|
||||
padding: 2rem;
|
||||
border-radius: 0.95rem;
|
||||
z-index: 9999;
|
||||
|
||||
.modal-header {
|
||||
display: grid;
|
||||
|
||||
@ -23,6 +23,7 @@ export default function Modal(props: ModalProps) {
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="modal-mask">
|
||||
<div ref={ref} className={`modal ${className}`}>
|
||||
<div className="modal-header">
|
||||
<h3>{title}</h3>
|
||||
@ -30,5 +31,6 @@ export default function Modal(props: ModalProps) {
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@mixin accented-display($bg-color) {
|
||||
background: $bg-color;
|
||||
color: rgb(0, 0, 0);
|
||||
font-family: 'WorkSans-Bold';
|
||||
font-family: 'WorkSans';
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
@ -30,7 +30,7 @@
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgb(0, 0, 0);
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
z-index: 2;
|
||||
background: var(--yellow-accent);
|
||||
margin-top: -0.5rem;
|
||||
@ -47,10 +47,6 @@
|
||||
background: var(--btn-primary-bg);
|
||||
}
|
||||
|
||||
input[type='range']::-ms-fill-lower {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-progress {
|
||||
background: var(--yellow-accent);
|
||||
}
|
||||
|
||||
@ -2,22 +2,28 @@
|
||||
// General
|
||||
|
||||
// Theme
|
||||
--page-bg: rgb(240, 240, 250);
|
||||
--page-text-color: rgb(0, 0, 0);
|
||||
--page-bg: rgb(255, 255, 255);
|
||||
--page-text-color: #040404;
|
||||
--yellow-accent: #ffcc00;
|
||||
--link-color: rgb(0, 0, 0);
|
||||
--yellow-accent: rgb(255, 190, 0);
|
||||
--border-color: rgb(100, 100, 120);
|
||||
|
||||
// Editor
|
||||
--editor-toolkit-bg: rgb(240, 240, 250, 0.5);
|
||||
--editor-toolkit-bg: rgba(255, 255, 255, 0.5);
|
||||
--options-text-color: var(--page-text-color);
|
||||
--editor-size-border-color: var(--border-color);
|
||||
|
||||
// Modal
|
||||
--modal-bg: var(--page-bg);
|
||||
--modal-text-color: rgb(0, 0, 0);
|
||||
--modal-hotkey-bg: rgb(240, 240, 240);
|
||||
--modal-hotkey-border-color: rgb(0, 0, 0);
|
||||
--model-mask-bg: rgba(209,213,219,0.4);
|
||||
|
||||
// Shared
|
||||
--btn-primary-bg: rgb(210, 210, 220);
|
||||
--btn-text-color: black;
|
||||
--btn-text-hover-color: black;
|
||||
--btn-border-color: rgb(100, 100, 120);
|
||||
--btn-primary-hover-bg: var(--yellow-accent);
|
||||
--animation-pulsing-bg: rgb(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@ -2,22 +2,29 @@
|
||||
// General
|
||||
|
||||
// Theme
|
||||
--page-bg: rgb(20, 20, 30);
|
||||
--page-text-color: rgb(200, 200, 210);
|
||||
--link-color: rgb(255, 190, 0);
|
||||
--yellow-accent: rgb(255, 190, 0);
|
||||
--page-bg: #040404;
|
||||
--page-text-color: #F9F9F9;
|
||||
--yellow-accent: #ffcc00;
|
||||
--link-color: var(--yellow-accent);
|
||||
--border-color: rgb(100, 100, 120);
|
||||
|
||||
// Editor
|
||||
--editor-toolkit-bg: rgb(20, 20, 30, 0.5);
|
||||
--editor-toolkit-bg: rgba(0, 0, 0, 0.5);
|
||||
--options-text-color: var(--page-text-color);
|
||||
--editor-size-border-color: var(--yellow-accent);
|
||||
|
||||
// Modal
|
||||
--modal-bg: var(--page-bg);
|
||||
--modal-text-color: var(--page-text-color);
|
||||
--modal-hotkey-bg: rgb(60, 60, 90);
|
||||
// --modal-hotkey-bg: rgb(60, 60, 90);
|
||||
--modal-hotkey-border-color: var(--page-text-color);;
|
||||
--model-mask-bg: rgba(76, 76, 87, 0.4);
|
||||
|
||||
// Shared
|
||||
--btn-primary-bg: rgb(140, 140, 180);
|
||||
--btn-text-color: white;
|
||||
--btn-text-hover-color: var(--page-bg);
|
||||
--btn-border-color: var(--yellow-accent);
|
||||
--btn-primary-hover-bg: var(--yellow-accent);
|
||||
--animation-pulsing-bg: rgb(240, 240, 255);
|
||||
}
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
@use '../components/Editor/Editor';
|
||||
@use '../components/LandingPage/LandingPage';
|
||||
@use '../components/Header/Header';
|
||||
@use '../components/Header/ThemeChanger';
|
||||
@use '../components/Shortcuts/Shortcuts';
|
||||
|
||||
// Shared
|
||||
@use '../components/shared/ThemeChanger';
|
||||
@use '../components/FileSelect/FileSelect';
|
||||
@use '../components/shared/Button';
|
||||
@use '../components/shared/Modal';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -35,6 +35,7 @@ class LaMa:
|
||||
else:
|
||||
model_path = download_model(LAMA_MODEL_URL)
|
||||
|
||||
print(f"Load LaMa model from: {model_path}")
|
||||
model = torch.jit.load(model_path, map_location="cpu")
|
||||
model = model.to(device)
|
||||
model.eval()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user