File size: 4,291 Bytes
fb54f6e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import React, {useState} from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import {Accordion, AccordionSummary, AccordionDetails} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Box from '@mui/material/Box';
import {Button} from "@mui/material";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";
export default function SendToControlNetPanel({options, onValueChange, setRendererImage, sendImage, setPreviewSize}) {
const [selectedValue, setSelectedValue] = useState('');
const [sizeValue, setSizeValue] = useState('1:1');
const sizes = [
{label:"1:1", value:"1:1"},
{label:"2:3", value:"2:3"},
{label:"3:2", value:"3:2"}
];
return (
<div>
<Box mb={1} mt={1}>
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon/>}>
Send To ControlNet
</AccordionSummary>
<AccordionDetails>
<FormControl variant="outlined" fullWidth sx={{margin: '2px'}}>
<InputLabel htmlFor="dropdown-list">Select an option</InputLabel>
<Select
value={selectedValue}
onChange={(event) => {
setSelectedValue(event.target.value);
if (onValueChange) {
onValueChange(event.target.value);
}
}}
label="ControlNet Index"
inputProps={{
name: 'dropdown-list',
id: 'dropdown-list',
}}
>
{options.map((option, index) => (
<MenuItem key={index} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" fullWidth sx={{margin: '2px'}}>
<InputLabel htmlFor="dropdown-list">Size</InputLabel>
<Select
value={sizeValue}
onChange={(event) => {
setSizeValue(event.target.value);
if (setPreviewSize) {
setPreviewSize(event.target.value);
}
}}
label="Size"
inputProps={{
name: 'dropdown-list',
id: 'dropdown-list',
}}
>
{sizes.map((option, index) => (
<MenuItem key={index} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
<Button variant="contained" color="primary" fullWidth sx={{margin: '2px'}} onClick={() => {
setRendererImage(sendImage, selectedValue, 'txt2img');
}}>Send to txt2img</Button>
<Button variant="contained" color="primary" fullWidth sx={{margin: '2px'}} onClick={() => {
setRendererImage(sendImage, selectedValue, 'img2img');
}}>Send to img2img</Button>
</AccordionDetails>
</Accordion>
</Box>
</div>
);
}
|