import React, { ReactNode } from 'react' import { useRecoilState } from 'recoil' import { settingState } from '../../store/Atoms' import Selector from '../shared/Selector' import NumberInputSetting from './NumberInputSetting' import SettingBlock from './SettingBlock' export enum HDStrategy { ORIGINAL = 'Original', RESIZE = 'Resize', CROP = 'Crop', } export enum LDMSampler { ddim = 'ddim', plms = 'plms', } function HDSettingBlock() { const [setting, setSettingState] = useRecoilState(settingState) const onStrategyChange = (value: HDStrategy) => { setSettingState(old => { return { ...old, hdStrategy: value } }) } const onResizeLimitChange = (value: string) => { const val = value.length === 0 ? 0 : parseInt(value, 10) setSettingState(old => { return { ...old, hdStrategyResizeLimit: val } }) } const onCropTriggerSizeChange = (value: string) => { const val = value.length === 0 ? 0 : parseInt(value, 10) setSettingState(old => { return { ...old, hdStrategyCropTrigerSize: val } }) } const onCropMarginChange = (value: string) => { const val = value.length === 0 ? 0 : parseInt(value, 10) setSettingState(old => { return { ...old, hdStrategyCropMargin: val } }) } const renderOriginalOptionDesc = () => { return (