🐛 fix(split-view): Fix split view

.github/workflows/release.yml

@@ -47,6 +47,12 @@ jobs:
       - name: Install deps
         run: pnpm install
 
+      - name: Build
+        run: pnpm run build
+
+      - name: Git add
+        run: git add -f javascript/main.js
+
       - name: Release
         id: release
         run: pnpm run release

.gitignore

@@ -43,4 +43,3 @@ test-output
 __pycache__
 /lobe_theme_config.json
 /javascript/*.js
-!/javascript/main.js

.prettierignore

@@ -55,6 +55,7 @@ Dockerfile*
 
 # misc
 # add other ignore file below
+*.py
 style.css
 javascript/
 .stylelintignore

src/pages/Content/SplitView.tsx

@@ -0,0 +1,34 @@
+import { memo, useEffect } from 'react';
+
+const Preview = memo(() => {
+  useEffect(() => {
+    console.time('🤯 [layout] inject - Split Previewer');
+    // 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 txt2imgPreview = gradioApp().querySelector(
+      '#txt2img_gallery_container',
+    ) as HTMLDivElement;
+    if (txt2imgToprow && txt2imgSettings && txt2imgGenerate && txt2imgPreview) {
+      txt2imgSettings.prepend(txt2imgToprow);
+      txt2imgPreview.prepend(txt2imgGenerate);
+    }
+    // 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 img2imgPreview = gradioApp().querySelector(
+      '#img2img_gallery_container',
+    ) as HTMLDivElement;
+    if (img2imgSettings && img2imgToprow && img2imgGenerate && img2imgPreview) {
+      img2imgSettings.prepend(img2imgToprow);
+      img2imgPreview.prepend(img2imgGenerate);
+    }
+    console.timeEnd('🤯 [layout] inject - Split Previewer');
+  }, []);
+
+  return null;
+});
+
+export default Preview;

src/pages/Content/index.tsx

@@ -1,14 +1,17 @@
+import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect, useRef } from 'react';
 
 import formatPrompt from '@/script/formatPrompt';
 import { selectors, useAppStore } from '@/store';
 import { type DivProps } from '@/types';
 
+import SplitView from './SplitView';
 import { useStyles } from './style';
 
 const Content = memo<DivProps>(({ className, ...props }) => {
   const mainReference = useRef<HTMLDivElement>(null);
+  const { mobile } = useResponsive();
   const setting = useAppStore(selectors.currentSetting, isEqual);
 
   const { cx, styles } = useStyles({
@@ -49,17 +52,20 @@ const Content = memo<DivProps>(({ className, ...props }) => {
   }, []);
 
   return (
-    <div
-      className={cx(
-        styles.container,
-        styles.textares,
-        styles.text2img,
-        setting.layoutSplitPreview && styles.splitView,
-        className,
-      )}
-      ref={mainReference}
-      {...props}
-    />
+    <>
+      <div
+        className={cx(
+          styles.container,
+          styles.textares,
+          styles.text2img,
+          setting.layoutSplitPreview && styles.splitView,
+          className,
+        )}
+        ref={mainReference}
+        {...props}
+      />
+      {setting.layoutSplitPreview && mobile === false && <SplitView />}
+    </>
   );
 });
 

src/pages/Content/style.ts

@@ -27,6 +27,12 @@ export const useStyles = createStyles(
           border-bottom-left-radius: 0;
         }
 
+        #txt2img_results,
+        #img2img_results {
+          padding: 0 !important;
+          background: transparent !important;
+        }
+
         #txt2img_render,
         #img2img_render {
           display: block !important;
@@ -62,28 +68,15 @@ export const useStyles = createStyles(
         }
       `,
       splitView: css`
+        #txt2img_generate,
+        #img2img_generate {
+          border-radius: ${token.borderRadius}px !important;
+        }
+
         #txt2img_toprow,
         #img2img_toprow {
-          flex-direction: column;
           padding: 0 !important;
           background: transparent !important;
-
-          .interrogate-col {
-            flex-direction: row;
-            max-width: 100%;
-          }
-
-          #txt2img_actions_column,
-          #img2img_actions_column {
-            gap: 12px;
-          }
-
-          #txt2img_styles_row,
-          #img2img_styles_row {
-            padding: 16px;
-            background: ${token.colorBgContainer};
-            border-radius: ${token.borderRadius}px;
-          }
         }
       `,
       text2img: css`
@@ -155,6 +148,7 @@ export const useStyles = createStyles(
                 padding: 16px !important;
 
                 background-color: ${token.colorBgContainer}!important;
+                border: 1px solid ${token.colorBorderSecondary} !important;
                 border-radius: ${token.borderRadius}px !important;
               }
             }