Merge pull request #7 from Cyberhan123/new-layout

README.md

@@ -19,6 +19,7 @@ Download the latest release from [here](https://github.com/Cyberhan123/stable-di
 - Auto-detect CPU and GPU and cross-platform support
 - Full Nvidia ( CUDA12 ) GPU backend for GPU acceleration (Windows Only) and AMD GPU (Windows Only) come soon.
 - Can load ckpt, safetensors, gguf and diffusers models/checkpoints. 
+- Auto detect dark mode/ light mode
 - Sampling method
     - `Euler A`
     - `Euler`
@@ -30,26 +31,24 @@ Download the latest release from [here](https://github.com/Cyberhan123/stable-di
     - [`LCM`](https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/13952)
 
 ## TODO
-
 - [ ] UI improvements
 - [ ] More acceleration platform support 
 - [ ] Image to Image support
-- [ ] Random seed support
-- [ ] Lora support
 - [ ] Upscaling support
 - [ ] Remote server support
-- [ ] Full Screen support
 - [ ] terminal show full progress bar
-- [ ] LCM/LCM-LoRA support
 - [ ] TAESD support
 - [ ] auto download model/checkpoint/lora
 - [ ] auto update
 - [ ] plugin support
 - [ ] i18n support
 
-## UI ShowCase
+## UI Preview
+<p align="center">
+  <img src="./assets/sd_desktop_light.png" width="768x">
+</p>
 <p align="center">
-  <img src="./assets/sd-desktop.png" width="768x">
+  <img src="./assets/sd_desktop_dark.png" width="768x">
 </p>
 
 ## Development

app.go

@@ -34,7 +34,7 @@ func NewApp() *App {
 		options.GpuEnable = false
 	}
 	options.FreeParamsImmediately = true
-
+	options.Threads = goruntime.NumCPU()
 	return &App{
 		options: &options,
 	}
@@ -146,6 +146,10 @@ func (a *App) PredictImage(initImage, prompt string, params sd.FullParams) []str
 	return result
 }
 
+func (a *App) GetOptions() sd.Options {
+	return *a.options
+}
+
 func (a *App) SetOptions(option sd.Options) {
 	runtime.LogDebug(a.ctx, fmt.Sprintf("%+v", *a.options))
 	a.options = &option
@@ -227,3 +231,21 @@ func (a *App) SaveImage(imageBase64 string) bool {
 
 	return true
 }
+
+func (a *App) GetFilePath(title string) string {
+	dialog, err := runtime.OpenFileDialog(a.ctx, runtime.OpenDialogOptions{})
+	if err != nil {
+		runtime.LogError(a.ctx, err.Error())
+		return ""
+	}
+	return dialog
+}
+
+func (a *App) GetDirPath(title string) string {
+	dialog, err := runtime.OpenDirectoryDialog(a.ctx, runtime.OpenDialogOptions{})
+	if err != nil {
+		runtime.LogError(a.ctx, err.Error())
+		return ""
+	}
+	return dialog
+}

frontend/src/App.css

@@ -533,7 +533,7 @@ body {
 
 .image-gallery {
     min-width: 300px;
-    min-height: 450px;
+    min-height: 400px;
     padding: 5px;
 }
 

frontend/src/App.tsx

@@ -1,21 +1,77 @@
-import {useLayoutEffect, useState} from 'react';
-import {useMount} from "ahooks";
-import {ConfigProvider, Layout, theme} from "antd";
+import {useState} from 'react';
+import {App as AntdApp, Button, ConfigProvider, Flex, Layout, Segmented, Space, theme} from "antd";
+import {FileImageOutlined, FileOutlined, FontColorsOutlined, SettingOutlined} from "@ant-design/icons";
 import Predict from "./pages/Predict";
+import {useRequest} from "ahooks";
+import {LoadFromFile} from "../wailsjs/go/main/App";
 
-import './App.css';
+import './App.css'
+import Settings from "./components/Settings";
 
 const {darkAlgorithm, defaultAlgorithm} = theme;
 
 function App() {
+    const [model, setModel] = useState<string | number>(1)
+    const [hasLoadModel, setHasLoadModel] = useState(false)
+    const [open, setOpen] = useState(false);
     const [isDark, setIsDark] = useState<boolean>(window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false);
-
+    const {runAsync: loadModel, loading: loadModelLoading} = useRequest(async () => {
+        return await LoadFromFile()
+    }, {
+        manual: true
+    })
     return <ConfigProvider theme={{algorithm: isDark ? darkAlgorithm : defaultAlgorithm}}>
-        <Layout>
-            <Layout.Content style={{height: "100vh"}}>
-                <Predict/>
-            </Layout.Content>
-        </Layout>
+        <AntdApp>
+            <Layout>
+                <Layout.Content style={{height: "100vh", padding: 12}}>
+                    <Flex justify={"space-between"}>
+                        <Segmented
+                            value={model}
+                            onChange={(value) => {
+                                setModel(value)
+                            }}
+                            options={[
+                                {label: 'Text Predict Image', value: 1, icon: <FontColorsOutlined/>},
+                                // {label: 'Image Predict Image', value: 2, icon: <FileImageOutlined/>},
+                            ]}
+                        />
+                        <Space size={12}>
+                            <Button
+                                icon={<FileOutlined />}
+                                loading={loadModelLoading}
+                                onClick={async () => {
+                                    const result = await loadModel()
+                                    if (result) {
+                                        setHasLoadModel(true)
+                                    }
+                                }}
+                            >
+                                Select Model
+                            </Button>
+                            <Button
+                                icon={<SettingOutlined />}
+                                onClick={() => {
+                                setOpen(true)
+                            }}>
+                                Settings
+                            </Button>
+                            <Button onClick={() => setIsDark((prevState) => !prevState)}>
+                                {isDark ? "Light Theme" : "Dark Theme"}
+                            </Button>
+                        </Space>
+                    </Flex>
+                    {
+                        model === 1 && <Predict hasLoadModel={hasLoadModel}/>
+                    }
+                    <Settings
+                        open={open}
+                        onClose={() => {
+                            setOpen(false)
+                        }}
+                    />
+                </Layout.Content>
+            </Layout>
+        </AntdApp>
     </ConfigProvider>
 }