|
|
|
@ -8,7 +8,7 @@ import { useRouter } from 'next/router'
|
|
|
|
import { AnimatePresence, motion } from 'framer-motion'
|
|
|
|
import { AnimatePresence, motion } from 'framer-motion'
|
|
|
|
import { HexAlphaColorPicker, HexColorInput } from 'react-colorful'
|
|
|
|
import { HexAlphaColorPicker, HexColorInput } from 'react-colorful'
|
|
|
|
import { MdFileUpload, MdHelpOutline } from 'react-icons/md'
|
|
|
|
import { MdFileUpload, MdHelpOutline } from 'react-icons/md'
|
|
|
|
import { FaQuestion } from 'react-icons/fa'
|
|
|
|
import { FaCoffee, FaQuestion } from 'react-icons/fa'
|
|
|
|
import TextareaAutosize from 'react-textarea-autosize'
|
|
|
|
import TextareaAutosize from 'react-textarea-autosize'
|
|
|
|
import JSZip from 'jszip'
|
|
|
|
import JSZip from 'jszip'
|
|
|
|
import { saveAs } from 'file-saver'
|
|
|
|
import { saveAs } from 'file-saver'
|
|
|
|
@ -64,7 +64,7 @@ import Checkbox from '../components/controls/checkbox'
|
|
|
|
import { getStorage } from '../data/storage/storage'
|
|
|
|
import { getStorage } from '../data/storage/storage'
|
|
|
|
import { getUserSetting } from '../data/user/settings'
|
|
|
|
import { getUserSetting } from '../data/user/settings'
|
|
|
|
import { useReload } from '../hooks/useReload'
|
|
|
|
import { useReload } from '../hooks/useReload'
|
|
|
|
import { BackendURLTagSearch } from '../globals/constants'
|
|
|
|
import { BackendURLTagSearch, IsIsekai } from '../globals/constants'
|
|
|
|
import Tooltip from '../components/tooltip'
|
|
|
|
import Tooltip from '../components/tooltip'
|
|
|
|
import { WorkerInterface } from '../tokenizer/interface'
|
|
|
|
import { WorkerInterface } from '../tokenizer/interface'
|
|
|
|
import { EncoderType } from '../tokenizer/encoder'
|
|
|
|
import { EncoderType } from '../tokenizer/encoder'
|
|
|
|
@ -561,7 +561,7 @@ function ImageGenContent(): JSX.Element {
|
|
|
|
|
|
|
|
|
|
|
|
const [purchaseModalOpen, setPurchaseModalOpen] = useState(false)
|
|
|
|
const [purchaseModalOpen, setPurchaseModalOpen] = useState(false)
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {}, [
|
|
|
|
useEffect(() => { }, [
|
|
|
|
params,
|
|
|
|
params,
|
|
|
|
selectedModel,
|
|
|
|
selectedModel,
|
|
|
|
session,
|
|
|
|
session,
|
|
|
|
@ -2004,6 +2004,30 @@ function ImageGenContent(): JSX.Element {
|
|
|
|
<HistoryIcon />
|
|
|
|
<HistoryIcon />
|
|
|
|
</OpenHistoryButton>
|
|
|
|
</OpenHistoryButton>
|
|
|
|
<FlexSpaceFull />
|
|
|
|
<FlexSpaceFull />
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
display: 'flex',
|
|
|
|
|
|
|
|
gap: '10px',
|
|
|
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
|
|
justifyContent: 'space-between'
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{IsIsekai && (
|
|
|
|
|
|
|
|
<ImportImageLink
|
|
|
|
|
|
|
|
href="https://www.isekai.cn"
|
|
|
|
|
|
|
|
target="_blank"
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
fontSize: '0.875rem',
|
|
|
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
|
|
|
width: 'max-content',
|
|
|
|
|
|
|
|
padding: '0 0 0 10px',
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<FaCoffee />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
异世界百科
|
|
|
|
|
|
|
|
</ImportImageLink>
|
|
|
|
|
|
|
|
)}
|
|
|
|
<ImportImageLink
|
|
|
|
<ImportImageLink
|
|
|
|
href="//docs.novelai.net"
|
|
|
|
href="//docs.novelai.net"
|
|
|
|
target="_blank"
|
|
|
|
target="_blank"
|
|
|
|
@ -2016,6 +2040,7 @@ function ImageGenContent(): JSX.Element {
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<FaQuestion />
|
|
|
|
<FaQuestion />
|
|
|
|
</ImportImageLink>
|
|
|
|
</ImportImageLink>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</HideMobileInline>
|
|
|
|
</HideMobileInline>
|
|
|
|
</MainTopperInnerRight>
|
|
|
|
</MainTopperInnerRight>
|
|
|
|
</MainTopper>
|
|
|
|
</MainTopper>
|
|
|
|
@ -2322,8 +2347,7 @@ function ImageGenContent(): JSX.Element {
|
|
|
|
SD_TOKEN_LIMIT
|
|
|
|
SD_TOKEN_LIMIT
|
|
|
|
}
|
|
|
|
}
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
height: `${
|
|
|
|
height: `${((promptTokens[promptid] ?? 0) /
|
|
|
|
((promptTokens[promptid] ?? 0) /
|
|
|
|
|
|
|
|
SD_TOKEN_LIMIT) *
|
|
|
|
SD_TOKEN_LIMIT) *
|
|
|
|
100
|
|
|
|
100
|
|
|
|
}%`,
|
|
|
|
}%`,
|
|
|
|
@ -3051,7 +3075,7 @@ const ExpandedImageContainer = styled(motion.div)`
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
`
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
|
|
const HistoryButton = styled(SubtleButton)<{ selected: boolean; img: string }>`
|
|
|
|
const HistoryButton = styled(SubtleButton) <{ selected: boolean; img: string }>`
|
|
|
|
border: ${(props) =>
|
|
|
|
border: ${(props) =>
|
|
|
|
props.selected ? `2px solid ${props.theme.colors.textHeadings}` : `2px solid transparent`};
|
|
|
|
props.selected ? `2px solid ${props.theme.colors.textHeadings}` : `2px solid transparent`};
|
|
|
|
border-radius: 3px;
|
|
|
|
border-radius: 3px;
|
|
|
|
@ -3323,7 +3347,7 @@ function GenerationOptions(props: {
|
|
|
|
onMouseDown: (e: any) => {
|
|
|
|
onMouseDown: (e: any) => {
|
|
|
|
if (e.target !== document.activeElement) {
|
|
|
|
if (e.target !== document.activeElement) {
|
|
|
|
e.preventDefault()
|
|
|
|
e.preventDefault()
|
|
|
|
;(e.target as HTMLInputElement).select()
|
|
|
|
; (e.target as HTMLInputElement).select()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -3692,7 +3716,6 @@ function GenerationOptions(props: {
|
|
|
|
maxRows={6}
|
|
|
|
maxRows={6}
|
|
|
|
placeholder="Anything in here is added to the preset selected above."
|
|
|
|
placeholder="Anything in here is added to the preset selected above."
|
|
|
|
value={props.negPrompt ?? ''}
|
|
|
|
value={props.negPrompt ?? ''}
|
|
|
|
warn={props.negPromptTokens > SD_TOKEN_LIMIT}
|
|
|
|
|
|
|
|
onChange={(e) => {
|
|
|
|
onChange={(e) => {
|
|
|
|
props.setNegPrompt((e.target.value || '').replace(/(\n|\r)/g, ''))
|
|
|
|
props.setNegPrompt((e.target.value || '').replace(/(\n|\r)/g, ''))
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
@ -3888,7 +3911,7 @@ const Input = styled.input<{ warn?: boolean }>`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
|
|
const LargeInput = styled(TextareaAutosize)<{ warn?: boolean }>`
|
|
|
|
const LargeInput = styled(TextareaAutosize) <{ warn?: boolean }>`
|
|
|
|
padding: 12px 20px;
|
|
|
|
padding: 12px 20px;
|
|
|
|
border: 1px solid ${(props) => (props.warn ? props.theme.colors.warning : props.theme.colors.bg3)};
|
|
|
|
border: 1px solid ${(props) => (props.warn ? props.theme.colors.warning : props.theme.colors.bg3)};
|
|
|
|
border-radius: 3px;
|
|
|
|
border-radius: 3px;
|
|
|
|
@ -4907,7 +4930,7 @@ function Canvas(props: {
|
|
|
|
onMouseDown: (e: any) => {
|
|
|
|
onMouseDown: (e: any) => {
|
|
|
|
if (e.target !== document.activeElement) {
|
|
|
|
if (e.target !== document.activeElement) {
|
|
|
|
e.preventDefault()
|
|
|
|
e.preventDefault()
|
|
|
|
;(e.target as HTMLInputElement).select()
|
|
|
|
; (e.target as HTMLInputElement).select()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -5882,7 +5905,7 @@ const Filler = styled.div`
|
|
|
|
height: 30px;
|
|
|
|
height: 30px;
|
|
|
|
`
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
|
|
const CanvasControlButton = styled(SubtleButton)<{ selected?: boolean }>`
|
|
|
|
const CanvasControlButton = styled(SubtleButton) <{ selected?: boolean }>`
|
|
|
|
padding: 8px;
|
|
|
|
padding: 8px;
|
|
|
|
height: 44px;
|
|
|
|
height: 44px;
|
|
|
|
min-width: 58px;
|
|
|
|
min-width: 58px;
|
|
|
|
|
