feat: add paintaing page
This commit is contained in:
kangfenmao
parent
241dcddfed
commit
7401d85825
@ -14,6 +14,7 @@ import AppsPage from './pages/apps/AppsPage'
|
||||
import FilesPage from './pages/files/FilesPage'
|
||||
import HistoryPage from './pages/history/HistoryPage'
|
||||
import HomePage from './pages/home/HomePage'
|
||||
import PaintingsPage from './pages/paintings/PaintingsPage'
|
||||
import SettingsPage from './pages/settings/SettingsPage'
|
||||
import TranslatePage from './pages/translate/TranslatePage'
|
||||
|
||||
@ -30,6 +31,7 @@ function App(): JSX.Element {
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/files" element={<FilesPage />} />
|
||||
<Route path="/agents" element={<AgentsPage />} />
|
||||
<Route path="/paintings" element={<PaintingsPage />} />
|
||||
<Route path="/translate" element={<TranslatePage />} />
|
||||
<Route path="/apps" element={<AppsPage />} />
|
||||
<Route path="/messages/*" element={<HistoryPage />} />
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.06667 4.73333C2.06667 3.26057 3.26057 2.06667 4.73333 2.06667H9V1H4.73333C2.67147 1 1 2.67147 1 4.73333V9H2.06667V4.73333ZM2.06667 15.2667C2.06667 16.7394 3.26057 17.9333 4.73333 17.9333H9V19H4.73333C2.67147 19 1 17.3285 1 15.2667V11H2.06667V15.2667ZM15.2667 2.06667C16.7394 2.06667 17.9333 3.26057 17.9333 4.73333V9H19V4.73333C19 2.67147 17.3285 1 15.2667 1H11V2.06667H15.2667ZM17.9333 15.2667C17.9333 16.7394 16.7394 17.9333 15.2667 17.9333H11V19H15.2667C17.3285 19 19 17.3285 19 15.2667V11H17.9333V15.2667Z" fill="#030712"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 683 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.93333 3.73333C4.93333 2.26057 5.978 1.06667 7.26667 1.06667H9V0H7.26667C5.46254 0 4 1.67147 4 3.73333V8H4.93333V3.73333ZM4.93333 16.2667C4.93333 17.7394 5.978 18.9333 7.26667 18.9333H9V20H7.26667C5.46254 20 4 18.3285 4 16.2667V12H4.93333V16.2667ZM13.7333 1.06667C15.022 1.06667 16.0667 2.26057 16.0667 3.73333V8H17V3.73333C17 1.67147 15.5375 0 13.7333 0H12V1.06667H13.7333ZM16.0667 16.2667C16.0667 17.7394 15.022 18.9333 13.7333 18.9333H12V20H13.7333C15.5375 20 17 18.3285 17 16.2667V12H16.0667V16.2667Z" fill="#030712"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.06667 7.26667C1.06667 5.978 2.26057 4.93333 3.73333 4.93333H8V4H3.73333C1.67147 4 0 5.46254 0 7.26667V9H1.06667V7.26667ZM1.06667 11.2667C1.06667 12.7394 2.26057 13.9333 3.73333 13.9333H8V15H3.73333C1.67147 15 0 13.3285 0 11.2667V10H1.06667V11.2667ZM16.2667 4.93333C17.7394 4.93333 18.9333 5.978 18.9333 7.26667V9H20V7.26667C20 5.46254 18.3285 4 16.2667 4H12V4.93333H16.2667ZM18.9333 11.2667C18.9333 12.7394 17.7394 13.9333 16.2667 13.9333H12V15H16.2667C18.3285 15 20 13.3285 20 11.2667V10H18.9333V11.2667Z" fill="#030712"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 679 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.06667 5.26667C1.06667 3.978 2.26057 2.93333 3.73333 2.93333H8V2H3.73333C1.67147 2 0 3.46254 0 5.26667V9H1.06667V5.26667ZM1.06667 14.7333C1.06667 16.022 2.26057 17.0667 3.73333 17.0667H8V18H3.73333C1.67147 18 0 16.5375 0 14.7333V11H1.06667V14.7333ZM16.2667 2.93333C17.7394 2.93333 18.9333 3.978 18.9333 5.26667V9H20V5.26667C20 3.46254 18.3285 2 16.2667 2H12V2.93333H16.2667ZM18.9333 14.7333C18.9333 16.022 17.7394 17.0667 16.2667 17.0667H12V18H16.2667C18.3285 18 20 16.5375 20 14.7333V11H18.9333V14.7333Z" fill="#030712"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.93333 3.73333C2.93333 2.26057 3.978 1.06667 5.26667 1.06667H9V0H5.26667C3.46254 0 2 1.67147 2 3.73333V8H2.93333V3.73333ZM2.93333 16.2667C2.93333 17.7394 3.978 18.9333 5.26667 18.9333H9V20H5.26667C3.46254 20 2 18.3285 2 16.2667V12H2.93333V16.2667ZM14.7333 1.06667C16.022 1.06667 17.0667 2.26057 17.0667 3.73333V8H18V3.73333C18 1.67147 16.5375 0 14.7333 0H11V1.06667H14.7333ZM17.0667 16.2667C17.0667 17.7394 16.022 18.9333 14.7333 18.9333H11V20H14.7333C16.5375 20 18 18.3285 18 16.2667V12H17.0667V16.2667Z" fill="#030712"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.93333 3.73333C5.93333 2.26057 6.978 1.06667 8.26667 1.06667H10V0H8.26667C6.46254 0 5 1.67147 5 3.73333V8H5.93333V3.73333ZM5.93333 16.2667C5.93333 17.7394 6.978 18.9333 8.26667 18.9333H10V20H8.26667C6.46254 20 5 18.3285 5 16.2667V12H5.93333V16.2667ZM12.7333 1.06667C14.022 1.06667 15.0667 2.26057 15.0667 3.73333V8H16V3.73333C16 1.67147 14.5375 0 12.7333 0H11V1.06667H12.7333ZM15.0667 16.2667C15.0667 17.7394 14.022 18.9333 12.7333 18.9333H11V20H12.7333C14.5375 20 16 18.3285 16 16.2667V12H15.0667V16.2667Z" fill="#030712"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 679 B |
@ -1,4 +1,4 @@
|
||||
#inputbar .ant-input {
|
||||
#inputbar {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FileSearchOutlined, FolderOutlined, TranslationOutlined } from '@ant-design/icons'
|
||||
import { FileSearchOutlined, FolderOutlined, PictureOutlined, TranslationOutlined } from '@ant-design/icons'
|
||||
import { isMac } from '@renderer/config/constant'
|
||||
import { isLocalAi, UserAvatar } from '@renderer/config/env'
|
||||
import useAvatar from '@renderer/hooks/useAvatar'
|
||||
@ -58,6 +58,11 @@ const Sidebar: FC = () => {
|
||||
<i className="iconfont icon-business-smart-assistant" />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
<StyledLink onClick={() => to('/paintings')}>
|
||||
<Icon className={isRoute('/paintings')}>
|
||||
<PictureOutlined style={{ fontSize: 16 }} />
|
||||
</Icon>
|
||||
</StyledLink>
|
||||
<StyledLink onClick={() => to('/translate')}>
|
||||
<Icon className={isRoute('/translate')}>
|
||||
<TranslationOutlined />
|
||||
|
||||
@ -930,6 +930,51 @@ export const SYSTEM_MODELS: Record<string, Model[]> = {
|
||||
]
|
||||
}
|
||||
|
||||
export const TEXT_TO_IMAGES_MODELS = [
|
||||
{
|
||||
id: 'black-forest-labs/FLUX.1-dev',
|
||||
provider: 'silicon',
|
||||
name: 'FLUX.1-dev',
|
||||
group: 'FLUX'
|
||||
},
|
||||
{
|
||||
id: 'black-forest-labs/FLUX.1-schnell',
|
||||
provider: 'silicon',
|
||||
name: 'FLUX.1-schnell',
|
||||
group: 'FLUX'
|
||||
},
|
||||
{
|
||||
id: 'Pro/black-forest-labs/FLUX.1-schnell',
|
||||
provider: 'silicon',
|
||||
name: 'FLUX.1-schnell Pro',
|
||||
group: 'FLUX'
|
||||
},
|
||||
{
|
||||
id: 'stabilityai/stable-diffusion-3-5-large',
|
||||
provider: 'silicon',
|
||||
name: 'Stable Diffusion 3.5 Large',
|
||||
group: 'Stable Diffusion'
|
||||
},
|
||||
{
|
||||
id: 'stabilityai/stable-diffusion-3-medium',
|
||||
provider: 'silicon',
|
||||
name: 'Stable Diffusion 3 Medium',
|
||||
group: 'Stable Diffusion'
|
||||
},
|
||||
{
|
||||
id: 'stabilityai/stable-diffusion-2-1',
|
||||
provider: 'silicon',
|
||||
name: 'Stable Diffusion 2.1',
|
||||
group: 'Stable Diffusion'
|
||||
},
|
||||
{
|
||||
id: 'stabilityai/stable-diffusion-xl-base-1.0',
|
||||
provider: 'silicon',
|
||||
name: 'Stable Diffusion XL Base 1.0',
|
||||
group: 'Stable Diffusion'
|
||||
}
|
||||
]
|
||||
|
||||
export function isTextToImageModel(model: Model): boolean {
|
||||
return TEXT_TO_IMAGE_REGEX.test(model.id)
|
||||
}
|
||||
|
||||
40
src/renderer/src/hooks/usePaintings.ts
Normal file
40
src/renderer/src/hooks/usePaintings.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import { TEXT_TO_IMAGES_MODELS } from '@renderer/config/models'
|
||||
import { useAppDispatch, useAppSelector } from '@renderer/store'
|
||||
import { addPainting, removePainting, updatePainting, updatePaintings } from '@renderer/store/paintings'
|
||||
import { Painting } from '@renderer/types'
|
||||
import { uuid } from '@renderer/utils'
|
||||
|
||||
export function usePaintings() {
|
||||
const paintings = useAppSelector((state) => state.paintings.paintings)
|
||||
const dispatch = useAppDispatch()
|
||||
|
||||
return {
|
||||
paintings,
|
||||
addPainting: () => {
|
||||
const newPainting: Painting = {
|
||||
id: uuid(),
|
||||
urls: [],
|
||||
files: [],
|
||||
prompt: '',
|
||||
negativePrompt: '',
|
||||
imageSize: '1024x1024',
|
||||
numImages: 1,
|
||||
seed: '',
|
||||
steps: 25,
|
||||
guidanceScale: 4.5,
|
||||
model: TEXT_TO_IMAGES_MODELS[0].id
|
||||
}
|
||||
dispatch(addPainting(newPainting))
|
||||
return newPainting
|
||||
},
|
||||
removePainting: (painting: Painting) => {
|
||||
dispatch(removePainting(painting))
|
||||
},
|
||||
updatePainting: (painting: Painting) => {
|
||||
dispatch(updatePainting(painting))
|
||||
},
|
||||
updatePaintings: (paintings: Painting[]) => {
|
||||
dispatch(updatePaintings(paintings))
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -137,6 +137,25 @@
|
||||
"stream_output": "Stream Output",
|
||||
"search": "Search models..."
|
||||
},
|
||||
"images": {
|
||||
"title": "Images",
|
||||
"image.size": "Image Size",
|
||||
"button.new.image": "New Image",
|
||||
"button.delete.image": "Delete Image",
|
||||
"button.delete.image.confirm": "Are you sure you want to delete this image?",
|
||||
"number_images": "Number Images",
|
||||
"number_images_tip": "Number of images to generate (1-4)",
|
||||
"seed": "Seed",
|
||||
"seed_tip": "The same seed and prompt can produce similar images",
|
||||
"inference_steps": "Inference Steps",
|
||||
"inference_steps_tip": "The number of inference steps to perform. More steps produce higher quality but take longer",
|
||||
"guidance_scale": "Guidance Scale",
|
||||
"guidance_scale_tip": "Classifier Free Guidance. How close you want the model to stick to your prompt when looking for a related image to show you",
|
||||
"negative_prompt": "Negative Prompt",
|
||||
"negative_prompt_tip": "Describe what you don't want included in the image",
|
||||
"prompt_placeholder": "Describe the image you want to create, e.g. 'A serene lake at sunset with mountains in the background'",
|
||||
"regenerate.confirm": "This will replace your existing generated images. Do you want to continue?"
|
||||
},
|
||||
"files": {
|
||||
"title": "Files",
|
||||
"file": "File",
|
||||
|
||||
1
src/renderer/src/i18n/locales/en.json
Normal file
1
src/renderer/src/i18n/locales/en.json
Normal file
@ -0,0 +1 @@
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
"reset.double.confirm.title": "数据丢失！！！",
|
||||
"reset.double.confirm.content": "你的全部数据都会丢失，如果没有备份数据，将无法恢复，确定要继续吗？",
|
||||
"upgrade.success.title": "升级成功",
|
||||
"upgrade.success.content": "重启应用以完成升级",
|
||||
"upgrade.success.content": "重启用以完成升级",
|
||||
"upgrade.success.button": "重启",
|
||||
"topic.added": "话题添加成功",
|
||||
"save.success.title": "保存成功"
|
||||
@ -137,6 +137,25 @@
|
||||
"stream_output": "流式输出",
|
||||
"search": "搜索模型..."
|
||||
},
|
||||
"images": {
|
||||
"title": "图片",
|
||||
"image.size": "图片尺寸",
|
||||
"button.new.image": "新建图片",
|
||||
"button.delete.image": "删除图片",
|
||||
"button.delete.image.confirm": "确定要删除此图片吗?",
|
||||
"number_images": "生成数量",
|
||||
"number_images_tip": "一次生成的图片数量 (1-4)",
|
||||
"seed": "随机种子",
|
||||
"seed_tip": "相同的种子和提示词可以生成相似的图片",
|
||||
"inference_steps": "推理步数",
|
||||
"inference_steps_tip": "要执行的推理步数。步数越多，质量越高但耗时越长",
|
||||
"guidance_scale": "引导比例",
|
||||
"guidance_scale_tip": "无分类器指导。控制模型在寻找相关图像时对提示词的遵循程度",
|
||||
"negative_prompt": "反向提示词",
|
||||
"negative_prompt_tip": "描述你不想在图片中出现的内容",
|
||||
"prompt_placeholder": "描述你想创建的图片，例如：'一个宁静的湖泊，夕阳西下，远处是群山'",
|
||||
"regenerate.confirm": "这将覆盖已生成的图片，是否继续？"
|
||||
},
|
||||
"files": {
|
||||
"title": "文件",
|
||||
"file": "文件",
|
||||
@ -317,7 +336,7 @@
|
||||
"new_topic": "新建话题",
|
||||
"zoom_in": "放大界面",
|
||||
"zoom_out": "缩小界面",
|
||||
"zoom_reset": "重置缩放"
|
||||
"zoom_reset": "<EFBFBD><EFBFBD><EFBFBD>置缩放"
|
||||
}
|
||||
},
|
||||
"translate": {
|
||||
|
||||
@ -137,6 +137,25 @@
|
||||
"stream_output": "串流輸出",
|
||||
"search": "搜尋模型..."
|
||||
},
|
||||
"images": {
|
||||
"title": "繪圖",
|
||||
"image.size": "影像尺寸",
|
||||
"button.new.image": "新繪圖",
|
||||
"button.delete.image": "刪除繪圖",
|
||||
"button.delete.image.confirm": "確定要刪除此繪圖嗎?",
|
||||
"number_images": "生成數量",
|
||||
"number_images_tip": "一次生成的圖片數量 (1-4)",
|
||||
"seed": "隨機種子",
|
||||
"seed_tip": "相同的種子和提示詞可以生成相似的圖片",
|
||||
"inference_steps": "推理步數",
|
||||
"inference_steps_tip": "要執行的推理步數。步數越多，質量越高但耗時越長",
|
||||
"guidance_scale": "引導比例",
|
||||
"guidance_scale_tip": "無分類器指導。控制模型在尋找相關圖像時對提示詞的遵循程度",
|
||||
"negative_prompt": "反向提示詞",
|
||||
"negative_prompt_tip": "描述你不想在圖片中出現的內容",
|
||||
"prompt_placeholder": "描述你想創建的圖片，例如：'一個寧靜的湖泊，夕陽西下，遠處是群山'",
|
||||
"regenerate.confirm": "這將覆蓋已生成的圖片，是否繼續？"
|
||||
},
|
||||
"files": {
|
||||
"title": "檔案",
|
||||
"file": "檔案",
|
||||
|
||||
@ -394,7 +394,7 @@ const Textarea = styled(TextArea)`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-family: Ubuntu;
|
||||
resize: vertical;
|
||||
resize: none !important;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -8,19 +8,21 @@ import {
|
||||
ZoomOutOutlined
|
||||
} from '@ant-design/icons'
|
||||
import { download } from '@renderer/utils/download'
|
||||
import { Image, Space } from 'antd'
|
||||
import { Image as AntImage, ImageProps as AntImageProps, Space } from 'antd'
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
interface ImagePreviewProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
||||
interface ImagePreviewProps extends AntImageProps {
|
||||
src: string
|
||||
}
|
||||
|
||||
const ImagePreview: React.FC<ImagePreviewProps> = ({ src }) => {
|
||||
const ImagePreview: React.FC<ImagePreviewProps> = ({ src, ...props }) => {
|
||||
return (
|
||||
<Image
|
||||
<AntImage
|
||||
src={src}
|
||||
{...props}
|
||||
preview={{
|
||||
mask: typeof props.preview === 'object' ? props.preview.mask : false,
|
||||
toolbarRender: (
|
||||
_,
|
||||
{
|
||||
|
||||
112
src/renderer/src/pages/paintings/PaintingsList.tsx
Normal file
112
src/renderer/src/pages/paintings/PaintingsList.tsx
Normal file
@ -0,0 +1,112 @@
|
||||
import { DeleteOutlined } from '@ant-design/icons'
|
||||
import DragableList from '@renderer/components/DragableList'
|
||||
import { usePaintings } from '@renderer/hooks/usePaintings'
|
||||
import { Painting } from '@renderer/types'
|
||||
import { classNames } from '@renderer/utils'
|
||||
import { Popconfirm } from 'antd'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import styled from 'styled-components'
|
||||
|
||||
interface PaintingsListProps {
|
||||
paintings: Painting[]
|
||||
selectedPainting: Painting
|
||||
onSelectPainting: (painting: Painting) => void
|
||||
onDeletePainting: (painting: Painting) => void
|
||||
}
|
||||
|
||||
const PaintingsList: FC<PaintingsListProps> = ({ paintings, selectedPainting, onSelectPainting, onDeletePainting }) => {
|
||||
const { t } = useTranslation()
|
||||
const [dragging, setDragging] = useState(false)
|
||||
const { updatePaintings } = usePaintings()
|
||||
|
||||
return (
|
||||
<Container style={{ paddingBottom: dragging ? 30 : 0 }}>
|
||||
<DragableList
|
||||
list={paintings}
|
||||
onUpdate={updatePaintings}
|
||||
onDragStart={() => setDragging(true)}
|
||||
onDragEnd={() => setDragging(false)}>
|
||||
{(item: Painting) => (
|
||||
<CanvasWrapper key={item.id}>
|
||||
<Canvas
|
||||
className={classNames(selectedPainting.id === item.id && 'selected')}
|
||||
onClick={() => onSelectPainting(item)}
|
||||
thumbnail={item.urls[0]}
|
||||
/>
|
||||
<DeleteButton>
|
||||
<Popconfirm
|
||||
title={t('images.button.delete.image.confirm')}
|
||||
onConfirm={() => onDeletePainting(item)}
|
||||
okButtonProps={{ danger: true }}
|
||||
placement="left">
|
||||
<DeleteOutlined />
|
||||
</Popconfirm>
|
||||
</DeleteButton>
|
||||
</CanvasWrapper>
|
||||
)}
|
||||
</DragableList>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
background-color: var(--color-background);
|
||||
max-width: 100px;
|
||||
border-left: 0.5px solid var(--color-border);
|
||||
`
|
||||
|
||||
const CanvasWrapper = styled.div`
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.delete-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Canvas = styled.div<{ thumbnail?: string }>`
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--color-background-soft);
|
||||
background-image: ${(props) => (props.thumbnail ? `url(${props.thumbnail})` : 'none')};
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
border: 1px solid var(--color-background-soft);
|
||||
|
||||
&.selected {
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-mute);
|
||||
}
|
||||
`
|
||||
|
||||
const DeleteButton = styled.div.attrs({ className: 'delete-button' })`
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
border-radius: 50%;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--color-error);
|
||||
background-color: var(--color-background-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
export default PaintingsList
|
||||
559
src/renderer/src/pages/paintings/PaintingsPage.tsx
Normal file
559
src/renderer/src/pages/paintings/PaintingsPage.tsx
Normal file
@ -0,0 +1,559 @@
|
||||
import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
|
||||
import ImageSize1_1 from '@renderer/assets/images/paintings/image-size-1-1.svg'
|
||||
import ImageSize1_2 from '@renderer/assets/images/paintings/image-size-1-2.svg'
|
||||
import ImageSize3_2 from '@renderer/assets/images/paintings/image-size-3-2.svg'
|
||||
import ImageSize3_4 from '@renderer/assets/images/paintings/image-size-3-4.svg'
|
||||
import ImageSize9_16 from '@renderer/assets/images/paintings/image-size-9-16.svg'
|
||||
import ImageSize16_9 from '@renderer/assets/images/paintings/image-size-16-9.svg'
|
||||
import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
|
||||
import { VStack } from '@renderer/components/Layout'
|
||||
import Scrollbar from '@renderer/components/Scrollbar'
|
||||
import { TEXT_TO_IMAGES_MODELS } from '@renderer/config/models'
|
||||
import { useTheme } from '@renderer/context/ThemeProvider'
|
||||
import { usePaintings } from '@renderer/hooks/usePaintings'
|
||||
import { useProviders } from '@renderer/hooks/useProvider'
|
||||
import AiProvider from '@renderer/providers/AiProvider'
|
||||
import { getProviderByModel } from '@renderer/services/assistant'
|
||||
import { DEFAULT_PAINTING } from '@renderer/store/paintings'
|
||||
import { Painting } from '@renderer/types'
|
||||
import { getErrorMessage } from '@renderer/utils'
|
||||
import { Button, Input, InputNumber, Radio, Select, Slider, Spin, Tooltip } from 'antd'
|
||||
import TextArea from 'antd/es/input/TextArea'
|
||||
import { FC, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import SendMessageButton from '../home/Inputbar/SendMessageButton'
|
||||
import ImagePreview from '../home/Markdown/ImagePreview'
|
||||
import { SettingTitle } from '../settings'
|
||||
import PaintingsList from './PaintingsList'
|
||||
|
||||
const IMAGE_SIZES = [
|
||||
{
|
||||
label: '1:1',
|
||||
value: '1024x1024',
|
||||
icon: ImageSize1_1
|
||||
},
|
||||
{
|
||||
label: '1:2',
|
||||
value: '512x1024',
|
||||
icon: ImageSize1_2
|
||||
},
|
||||
{
|
||||
label: '3:2',
|
||||
value: '768x512',
|
||||
icon: ImageSize3_2
|
||||
},
|
||||
{
|
||||
label: '3:4',
|
||||
value: '768x1024',
|
||||
icon: ImageSize3_4
|
||||
},
|
||||
{
|
||||
label: '16:9',
|
||||
value: '1024x576',
|
||||
icon: ImageSize16_9
|
||||
},
|
||||
{
|
||||
label: '9:16',
|
||||
value: '576x1024',
|
||||
icon: ImageSize9_16
|
||||
}
|
||||
]
|
||||
|
||||
let _painting: Painting
|
||||
|
||||
const PaintingsPage: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const { paintings, addPainting, removePainting, updatePainting } = usePaintings()
|
||||
const [painting, setPainting] = useState<Painting>(_painting || paintings[0])
|
||||
const { theme } = useTheme()
|
||||
const { providers } = useProviders()
|
||||
const siliconProvider = providers.find((p) => p.id === 'silicon')!
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0)
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [abortController, setAbortController] = useState<AbortController | null>(null)
|
||||
|
||||
const modelOptions = TEXT_TO_IMAGES_MODELS.map((model) => ({
|
||||
label: model.name,
|
||||
value: model.id
|
||||
}))
|
||||
|
||||
const textareaRef = useRef<any>(null)
|
||||
_painting = painting
|
||||
|
||||
const updatePaintingState = (updates: Partial<Painting>) => {
|
||||
const updatedPainting = { ...painting, ...updates }
|
||||
setPainting(updatedPainting)
|
||||
updatePainting(updatedPainting)
|
||||
}
|
||||
|
||||
const onSelectModel = (modelId: string) => {
|
||||
const model = TEXT_TO_IMAGES_MODELS.find((m) => m.id === modelId)
|
||||
if (model) {
|
||||
updatePaintingState({ model: modelId })
|
||||
}
|
||||
}
|
||||
|
||||
const onGenerate = async () => {
|
||||
if (painting.urls.length > 0) {
|
||||
const confirmed = await window.modal.confirm({
|
||||
content: t('images.regenerate.confirm'),
|
||||
centered: true
|
||||
})
|
||||
|
||||
if (!confirmed) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const prompt = textareaRef.current?.resizableTextArea?.textArea?.value || ''
|
||||
updatePaintingState({ prompt })
|
||||
|
||||
const model = TEXT_TO_IMAGES_MODELS.find((m) => m.id === painting.model)
|
||||
const provider = getProviderByModel(model)
|
||||
|
||||
if (!provider.apiKey) {
|
||||
window.message.error(t('error.no_api_key'))
|
||||
return
|
||||
}
|
||||
|
||||
const controller = new AbortController()
|
||||
setAbortController(controller)
|
||||
setIsLoading(true)
|
||||
const AI = new AiProvider(provider)
|
||||
|
||||
try {
|
||||
const urls = await AI.generateImage({
|
||||
prompt,
|
||||
negativePrompt: painting.negativePrompt || '',
|
||||
imageSize: painting.imageSize || '1024x1024',
|
||||
batchSize: painting.numImages || 1,
|
||||
seed: painting.seed || undefined,
|
||||
numInferenceSteps: painting.steps || 25,
|
||||
guidanceScale: painting.guidanceScale || 4.5,
|
||||
signal: controller.signal
|
||||
})
|
||||
|
||||
if (urls.length > 0) {
|
||||
updatePaintingState({ urls })
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof Error && error.name !== 'AbortError') {
|
||||
window.message.error(getErrorMessage(error))
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
setAbortController(null)
|
||||
}
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
abortController?.abort()
|
||||
}
|
||||
|
||||
const onSelectImageSize = (v: string) => {
|
||||
const size = IMAGE_SIZES.find((i) => i.value === v)
|
||||
size && updatePaintingState({ imageSize: size.value })
|
||||
}
|
||||
|
||||
const nextImage = () => {
|
||||
setCurrentImageIndex((prev) => (prev + 1) % painting.urls.length)
|
||||
}
|
||||
|
||||
const prevImage = () => {
|
||||
setCurrentImageIndex((prev) => (prev - 1 + painting.urls.length) % painting.urls.length)
|
||||
}
|
||||
|
||||
const onDeletePainting = (paintingToDelete: Painting) => {
|
||||
if (paintingToDelete.id === painting.id) {
|
||||
const currentIndex = paintings.findIndex((p) => p.id === paintingToDelete.id)
|
||||
|
||||
if (currentIndex > 0) {
|
||||
setPainting(paintings[currentIndex - 1])
|
||||
} else if (paintings.length > 1) {
|
||||
setPainting(paintings[1])
|
||||
}
|
||||
}
|
||||
|
||||
removePainting(paintingToDelete)
|
||||
|
||||
if (paintings.length === 1) {
|
||||
setPainting(DEFAULT_PAINTING)
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectPainting = (newPainting: Painting) => {
|
||||
setPainting(newPainting)
|
||||
setCurrentImageIndex(0)
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Navbar>
|
||||
<NavbarCenter style={{ borderRight: 'none' }}>{t('images.title')}</NavbarCenter>
|
||||
<NavbarRight style={{ justifyContent: 'flex-end' }}>
|
||||
<Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={() => setPainting(addPainting())}>
|
||||
{t('images.button.new.image')}
|
||||
</Button>
|
||||
</NavbarRight>
|
||||
</Navbar>
|
||||
<ContentContainer id="content-container">
|
||||
<LeftContainer>
|
||||
<SettingTitle style={{ marginBottom: 5 }}>{t('common.provider')}</SettingTitle>
|
||||
<Select
|
||||
value={siliconProvider.id}
|
||||
disabled={true}
|
||||
options={[{ label: siliconProvider.name, value: siliconProvider.id }]}
|
||||
/>
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('common.model')}</SettingTitle>
|
||||
<Select value={painting.model} options={modelOptions} onChange={onSelectModel} />
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>{t('images.image.size')}</SettingTitle>
|
||||
<Radio.Group
|
||||
value={painting.imageSize}
|
||||
onChange={(e) => onSelectImageSize(e.target.value)}
|
||||
style={{ display: 'flex' }}>
|
||||
{IMAGE_SIZES.map((size) => (
|
||||
<RadioButton value={size.value} key={size.value}>
|
||||
<VStack alignItems="center">
|
||||
<ImageSizeImage src={size.icon} theme={theme} />
|
||||
<span>{size.label}</span>
|
||||
</VStack>
|
||||
</RadioButton>
|
||||
))}
|
||||
</Radio.Group>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.number_images')}
|
||||
<Tooltip title={t('images.number_images_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
<InputNumber
|
||||
min={1}
|
||||
max={4}
|
||||
value={painting.numImages}
|
||||
onChange={(v) => updatePaintingState({ numImages: v || 1 })}
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.seed')}
|
||||
<Tooltip title={t('images.seed_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
<Input
|
||||
value={painting.seed}
|
||||
onChange={(e) => updatePaintingState({ seed: e.target.value })}
|
||||
suffix={<RefreshIcon onClick={() => updatePaintingState({ seed: '' })} />}
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.inference_steps')}
|
||||
<Tooltip title={t('images.inference_steps_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
<Slider min={1} max={50} value={painting.steps} onChange={(v) => updatePaintingState({ steps: v })} />
|
||||
<InputNumber
|
||||
min={1}
|
||||
max={50}
|
||||
value={painting.steps}
|
||||
onChange={(v) => updatePaintingState({ steps: v || 25 })}
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.guidance_scale')}
|
||||
<Tooltip title={t('images.guidance_scale_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
<Slider
|
||||
min={1}
|
||||
max={20}
|
||||
step={0.1}
|
||||
value={painting.guidanceScale}
|
||||
onChange={(v) => updatePaintingState({ guidanceScale: v })}
|
||||
/>
|
||||
<InputNumber
|
||||
min={1}
|
||||
max={20}
|
||||
step={0.1}
|
||||
value={painting.guidanceScale}
|
||||
onChange={(v) => updatePaintingState({ guidanceScale: v || 4.5 })}
|
||||
/>
|
||||
|
||||
<SettingTitle style={{ marginBottom: 5, marginTop: 15 }}>
|
||||
{t('images.negative_prompt')}
|
||||
<Tooltip title={t('images.negative_prompt_tip')}>
|
||||
<InfoIcon />
|
||||
</Tooltip>
|
||||
</SettingTitle>
|
||||
<TextArea
|
||||
value={painting.negativePrompt}
|
||||
onChange={(e) => updatePaintingState({ negativePrompt: e.target.value })}
|
||||
rows={4}
|
||||
/>
|
||||
</LeftContainer>
|
||||
<MainContainer>
|
||||
<Artboard>
|
||||
<LoadingContainer spinning={isLoading}>
|
||||
{painting.urls.length > 0 ? (
|
||||
<ImageContainer>
|
||||
{painting.urls.length > 1 && (
|
||||
<NavigationButton onClick={prevImage} style={{ left: 10 }}>
|
||||
←
|
||||
</NavigationButton>
|
||||
)}
|
||||
<ImagePreview
|
||||
src={painting.urls[currentImageIndex]}
|
||||
preview={{ mask: false }}
|
||||
style={{
|
||||
width: '70vh',
|
||||
height: '70vh',
|
||||
objectFit: 'contain',
|
||||
backgroundColor: 'var(--color-background-soft)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
/>
|
||||
{painting.urls.length > 1 && (
|
||||
<NavigationButton onClick={nextImage} style={{ right: 10 }}>
|
||||
→
|
||||
</NavigationButton>
|
||||
)}
|
||||
<ImageCounter>
|
||||
{currentImageIndex + 1} / {painting.urls.length}
|
||||
</ImageCounter>
|
||||
</ImageContainer>
|
||||
) : (
|
||||
<ImagePlaceholder />
|
||||
)}
|
||||
{isLoading && (
|
||||
<LoadingOverlay>
|
||||
<Spin size="large" />
|
||||
<CancelButton onClick={onCancel}>{t('common.cancel')}</CancelButton>
|
||||
</LoadingOverlay>
|
||||
)}
|
||||
</LoadingContainer>
|
||||
</Artboard>
|
||||
<InputContainer>
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
variant="borderless"
|
||||
disabled={isLoading}
|
||||
value={painting.prompt}
|
||||
onChange={(e) => updatePaintingState({ prompt: e.target.value })}
|
||||
placeholder={t('images.prompt_placeholder')}
|
||||
/>
|
||||
<Toolbar>
|
||||
<ToolbarMenu>
|
||||
<SendMessageButton sendMessage={onGenerate} disabled={isLoading} />
|
||||
</ToolbarMenu>
|
||||
</Toolbar>
|
||||
</InputContainer>
|
||||
</MainContainer>
|
||||
<PaintingsList
|
||||
paintings={paintings}
|
||||
selectedPainting={painting}
|
||||
onSelectPainting={onSelectPainting}
|
||||
onDeletePainting={onDeletePainting}
|
||||
/>
|
||||
</ContentContainer>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
const ContentContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
overflow: hidden;
|
||||
`
|
||||
|
||||
const LeftContainer = styled(Scrollbar)`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background-color: var(--color-background);
|
||||
max-width: var(--assistants-width);
|
||||
border-right: 0.5px solid var(--color-border);
|
||||
`
|
||||
|
||||
const MainContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
`
|
||||
|
||||
const Artboard = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
const InputContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
position: relative;
|
||||
border: 1px solid var(--color-border-soft);
|
||||
transition: all 0.3s ease;
|
||||
margin: 0 20px 15px 20px;
|
||||
border-radius: 10px;
|
||||
`
|
||||
|
||||
const Textarea = styled(TextArea)`
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-family: Ubuntu;
|
||||
resize: none !important;
|
||||
overflow: auto;
|
||||
width: auto;
|
||||
`
|
||||
|
||||
const Toolbar = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
padding: 0 8px;
|
||||
padding-bottom: 0;
|
||||
height: 36px;
|
||||
`
|
||||
|
||||
const ToolbarMenu = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
`
|
||||
|
||||
const ImagePlaceholder = styled.div`
|
||||
display: flex;
|
||||
width: 70vh;
|
||||
height: 70vh;
|
||||
background-color: var(--color-background-soft);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
const ImageSizeImage = styled.img<{ theme: string }>`
|
||||
filter: ${({ theme }) => (theme === 'dark' ? 'invert(100%)' : 'none')};
|
||||
margin-top: 8px;
|
||||
`
|
||||
|
||||
const RadioButton = styled(Radio.Button)`
|
||||
width: 30px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
const InfoIcon = styled(QuestionCircleOutlined)`
|
||||
margin-left: 5px;
|
||||
cursor: help;
|
||||
color: var(--color-text-2);
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
|
||||
const RefreshIcon = styled.span`
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
const ImageContainer = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ant-spin {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.ant-spin-spinning {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 3;
|
||||
}
|
||||
`
|
||||
|
||||
const NavigationButton = styled(Button)`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
opacity: 0.7;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
|
||||
const ImageCounter = styled.div`
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
`
|
||||
|
||||
const LoadingContainer = styled.div<{ spinning: boolean }>`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: ${(props) => (props.spinning ? 0.5 : 1)};
|
||||
transition: opacity 0.3s;
|
||||
`
|
||||
|
||||
const LoadingOverlay = styled.div`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
`
|
||||
|
||||
const CancelButton = styled(Button)`
|
||||
margin-top: 10px;
|
||||
z-index: 1001;
|
||||
`
|
||||
|
||||
export default PaintingsPage
|
||||
@ -41,4 +41,17 @@ export default class AiProvider {
|
||||
public async models(): Promise<OpenAI.Models.Model[]> {
|
||||
return this.sdk.models()
|
||||
}
|
||||
|
||||
public async generateImage(params: {
|
||||
prompt: string
|
||||
negativePrompt: string
|
||||
imageSize: string
|
||||
batchSize: number
|
||||
seed?: string
|
||||
numInferenceSteps: number
|
||||
guidanceScale: number
|
||||
signal?: AbortSignal
|
||||
}): Promise<string[]> {
|
||||
return this.sdk.generateImage(params)
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,4 +41,14 @@ export default abstract class BaseProvider {
|
||||
abstract generateText({ prompt, content }: { prompt: string; content: string }): Promise<string>
|
||||
abstract check(): Promise<{ valid: boolean; error: Error | null }>
|
||||
abstract models(): Promise<OpenAI.Models.Model[]>
|
||||
abstract generateImage(_params: {
|
||||
prompt: string
|
||||
negativePrompt: string
|
||||
imageSize: string
|
||||
batchSize: number
|
||||
seed?: string
|
||||
numInferenceSteps: number
|
||||
guidanceScale: number
|
||||
signal?: AbortSignal
|
||||
}): Promise<string[]>
|
||||
}
|
||||
|
||||
@ -350,4 +350,48 @@ export default class OpenAIProvider extends BaseProvider {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
public async generateImage({
|
||||
prompt,
|
||||
negativePrompt,
|
||||
imageSize,
|
||||
batchSize,
|
||||
seed,
|
||||
numInferenceSteps,
|
||||
guidanceScale,
|
||||
signal
|
||||
}: {
|
||||
prompt: string
|
||||
negativePrompt?: string
|
||||
imageSize: string
|
||||
batchSize: number
|
||||
seed?: string
|
||||
numInferenceSteps: number
|
||||
guidanceScale: number
|
||||
signal?: AbortSignal
|
||||
}): Promise<string[]> {
|
||||
try {
|
||||
const response = (await this.sdk.request({
|
||||
method: 'post',
|
||||
path: '/images/generations',
|
||||
headers: this.getHeaders(),
|
||||
signal,
|
||||
body: {
|
||||
model: 'stabilityai/stable-diffusion-3-5-large',
|
||||
prompt,
|
||||
negative_prompt: negativePrompt,
|
||||
image_size: imageSize,
|
||||
batch_size: batchSize,
|
||||
seed: seed ? parseInt(seed) : undefined,
|
||||
num_inference_steps: numInferenceSteps,
|
||||
guidance_scale: guidanceScale
|
||||
}
|
||||
})) as { data: Array<{ url: string }> }
|
||||
|
||||
return response.data.map((item) => item.url)
|
||||
} catch (error) {
|
||||
console.error('Image generation error:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,14 +7,16 @@ import agents from './agents'
|
||||
import assistants from './assistants'
|
||||
import llm from './llm'
|
||||
import migrate from './migrate'
|
||||
import paintings from './paintings'
|
||||
import runtime from './runtime'
|
||||
import settings from './settings'
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
assistants,
|
||||
settings,
|
||||
llm,
|
||||
agents,
|
||||
paintings,
|
||||
llm,
|
||||
settings,
|
||||
runtime
|
||||
})
|
||||
|
||||
|
||||
53
src/renderer/src/store/paintings.ts
Normal file
53
src/renderer/src/store/paintings.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
|
||||
import { TEXT_TO_IMAGES_MODELS } from '@renderer/config/models'
|
||||
import { Painting } from '@renderer/types'
|
||||
import { uuid } from '@renderer/utils'
|
||||
|
||||
export interface PaintingsState {
|
||||
paintings: Painting[]
|
||||
}
|
||||
|
||||
export const DEFAULT_PAINTING: Painting = {
|
||||
id: uuid(),
|
||||
urls: [],
|
||||
files: [],
|
||||
prompt: '',
|
||||
negativePrompt: '',
|
||||
imageSize: '1024x1024',
|
||||
numImages: 1,
|
||||
seed: '',
|
||||
steps: 25,
|
||||
guidanceScale: 4.5,
|
||||
model: TEXT_TO_IMAGES_MODELS[0].id
|
||||
}
|
||||
|
||||
const initialState: PaintingsState = {
|
||||
paintings: [DEFAULT_PAINTING]
|
||||
}
|
||||
|
||||
const paintingsSlice = createSlice({
|
||||
name: 'paintings',
|
||||
initialState,
|
||||
reducers: {
|
||||
updatePaintings: (state, action: PayloadAction<Painting[]>) => {
|
||||
state.paintings = action.payload
|
||||
},
|
||||
addPainting: (state, action: PayloadAction<Painting>) => {
|
||||
state.paintings.push(action.payload)
|
||||
},
|
||||
removePainting: (state, action: PayloadAction<Painting>) => {
|
||||
if (state.paintings.length === 1) {
|
||||
state.paintings = [DEFAULT_PAINTING]
|
||||
} else {
|
||||
state.paintings = state.paintings.filter((c) => c.id !== action.payload.id)
|
||||
}
|
||||
},
|
||||
updatePainting: (state, action: PayloadAction<Painting>) => {
|
||||
state.paintings = state.paintings.map((c) => (c.id === action.payload.id ? action.payload : c))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const { updatePaintings, addPainting, removePainting, updatePainting } = paintingsSlice.actions
|
||||
|
||||
export default paintingsSlice.reducer
|
||||
@ -87,6 +87,20 @@ export type Suggestion = {
|
||||
content: string
|
||||
}
|
||||
|
||||
export interface Painting {
|
||||
id: string
|
||||
urls: string[]
|
||||
files: FileType[]
|
||||
prompt?: string
|
||||
negativePrompt?: string
|
||||
imageSize?: string
|
||||
numImages?: number
|
||||
seed?: string
|
||||
steps?: number
|
||||
guidanceScale?: number
|
||||
model?: string
|
||||
}
|
||||
|
||||
export type MinAppType = {
|
||||
id?: string | number
|
||||
name: string
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user