🐛 fix(split-view): Fix split view style

src/components/VersionTag/index.tsx

@@ -22,7 +22,7 @@ const VersionTag = memo<TagProps>((props) => {
         </Tag>
       ) : (
         <Tag color="warning" {...props}>
-          v{version} / latest v${latestVersion}
+          v{version} / latest v{latestVersion}
         </Tag>
       )}
     </a>

src/pages/Content/SplitView.tsx

@@ -6,7 +6,7 @@ const Preview = memo(() => {
     // tab_txt2img
     const txt2imgToprow = gradioApp().querySelector('#txt2img_toprow') as HTMLDivElement;
     const txt2imgSettings = gradioApp().querySelector('#txt2img_settings') as HTMLDivElement;
-    const txt2imgGenerate = gradioApp().querySelector('#txt2img_generate') as HTMLButtonElement;
+    const txt2imgGenerate = gradioApp().querySelector('#txt2img_generate_box') as HTMLDivElement;
     const txt2imgPreview = gradioApp().querySelector(
       '#txt2img_gallery_container',
     ) as HTMLDivElement;
@@ -17,7 +17,7 @@ const Preview = memo(() => {
     // tab_img2img
     const img2imgToprow = gradioApp().querySelector('#img2img_toprow') as HTMLDivElement;
     const img2imgSettings = gradioApp().querySelector('#img2img_settings') as HTMLDivElement;
-    const img2imgGenerate = gradioApp().querySelector('#img2img_generate') as HTMLButtonElement;
+    const img2imgGenerate = gradioApp().querySelector('#img2img_generate_box') as HTMLDivElement;
     const img2imgPreview = gradioApp().querySelector(
       '#img2img_gallery_container',
     ) as HTMLDivElement;
@@ -25,6 +25,15 @@ const Preview = memo(() => {
       img2imgSettings.prepend(img2imgToprow);
       img2imgPreview.prepend(img2imgGenerate);
     }
+
+    // extras_img2img
+    const extrasGenerate = gradioApp().querySelector('#extras_generate') as HTMLDivElement;
+    const extrasPreview = gradioApp().querySelector('#extras_results') as HTMLDivElement;
+    if (extrasGenerate && extrasPreview) {
+      (extrasPreview?.parentNode as HTMLDivElement).id = '#extras_gallery_container';
+      extrasPreview.prepend(extrasGenerate);
+    }
+
     console.timeEnd('🤯 [layout] inject - Split Previewer');
   }, []);
 

src/pages/Content/style.ts

@@ -27,8 +27,33 @@ export const useStyles = createStyles(
           border-bottom-left-radius: 0;
         }
 
+        [id^='html_info_']:has(div.prose) {
+          p {
+            padding: 8px;
+
+            font-family: ${token.fontFamilyCode};
+            font-size: 13px !important;
+            color: ${token.colorInfo} !important;
+
+            background: ${token.colorInfoBg};
+            border: 1px solid ${token.colorInfoBorder};
+            border-radius: ${token.borderRadius}px;
+          }
+        }
+
+        #txt2img_styles_edit_button， #img2img_styles_edit_button {
+          max-width: 36px !important;
+        }
+
+        #txt2img_generate,
+        #img2img_generate,
+        #extras_generate {
+          border-radius: ${token.borderRadius}px !important;
+        }
+
         #txt2img_results,
-        #img2img_results {
+        #img2img_results,
+        #extras_results {
           padding: 0 !important;
           background: transparent !important;
         }
@@ -68,16 +93,16 @@ export const useStyles = createStyles(
         }
       `,
       splitView: css`
-        #txt2img_generate,
-        #img2img_generate {
-          border-radius: ${token.borderRadius}px !important;
-        }
-
         #txt2img_toprow,
         #img2img_toprow {
           padding: 0 !important;
           background: transparent !important;
         }
+
+        #txt2img_toprow,
+        #ing2img_toprow {
+          flex-direction: column !important;
+        }
       `,
       text2img: css`
         button[id$='_generate'] {
@@ -203,10 +228,6 @@ export const useStyles = createStyles(
             border-radius: var(--border-radius) !important;
           }
 
-          .image-buttons button {
-            min-width: min(160px, 100%) !important;
-          }
-
           [id$='2img_tools'] > div {
             display: flex;
             justify-content: center;

src/pages/Header/Actions.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Space } from 'antd';
 import { useResponsive } from 'antd-style';
-import { Github, LucideIcon, Moon, Settings, Sun } from 'lucide-react';
+import { Github, LayoutGrid, LucideIcon, Moon, Settings, Sun } from 'lucide-react';
 import qs from 'query-string';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -42,6 +42,13 @@ const Actions = memo<ActionsProps>(() => {
             <a href="https://civitai.com/" rel="noreferrer" target="_blank">
               <ActionIcon icon={CivitaiLogo} title="Civitai" />
             </a>
+            <a
+              href="https://supagruen.github.io/StableDiffusion-CheatSheet/"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <ActionIcon icon={LayoutGrid} title="Cheat Sheet" />
+            </a>
             <ActionIcon icon={Github} onClick={() => setIsModalOpen(true)} title={t('feedback')} />
           </>
         )}

src/styles/components/container.ts

@@ -44,7 +44,8 @@ export default (token: Theme) => {
 
     #img2img_results,
     #txt2img_results,
-    #extras_results {
+    #extras_gallery_container {
+      position: sticky;
       top: 80px !important;
     }
   `;