🐛 fix: fix send img to inpaint [#151]

.husky/pre-commit

@@ -1,6 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run build
 git add .
 npx --no-install lint-staged
+npm run test
+npm run build
+git add .

package.json

@@ -21,7 +21,7 @@
   "author": "canisminor1990 <i@canisminor.cc>",
   "sideEffects": false,
   "scripts": {
-    "build": "npm run type-check && vite build",
+    "build": "vite build",
     "dev": "vite",
     "dev:sd": "cd ../../ && ./webui.sh",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
@@ -31,7 +31,7 @@
     "prettier": "prettier -c --write \"**/**\"",
     "release": "semantic-release",
     "start": "npm run dev",
-    "test": "npm run type-check && npm run lint",
+    "test": "npm run type-check",
     "type-check": "tsc -p tsconfig-check.json"
   },
   "lint-staged": {

src/App.tsx

@@ -5,7 +5,6 @@ import { shallow } from 'zustand/shallow';
 import Layout from '@/layouts';
 import Index from '@/pages';
 import formatPrompt from '@/script/formatPrompt';
-import promptBracketChecker from '@/script/promptBracketChecker';
 import Loading from '@/slots/Loading';
 import { useAppStore } from '@/store';
 
@@ -15,7 +14,6 @@ const App = memo(() => {
   useEffect(() => {
     onUiLoaded(() => {
       formatPrompt();
-      promptBracketChecker();
       setLoading(false);
     });
     onUiUpdate(() => {

src/script/promptBracketChecker.ts

@@ -1,75 +0,0 @@
-interface ErrorString {
-  error: string;
-  regex: string;
-}
-
-class BracketChecker {
-  private textArea: HTMLTextAreaElement;
-  private counterElt: HTMLElement;
-  private errorStrings: ErrorString[];
-
-  constructor(textArea: HTMLTextAreaElement, counterElt: HTMLElement) {
-    this.textArea = textArea;
-    this.counterElt = counterElt;
-    this.errorStrings = [
-      {
-        error: '(...) - Different number of opening and closing parentheses detected.\n',
-        regex: '\\(',
-      },
-      {
-        error: '[...] - Different number of opening and closing square brackets detected.\n',
-        regex: '\\[',
-      },
-      {
-        error: '{...} - Different number of opening and closing curly brackets detected.\n',
-        regex: '\\{',
-      },
-    ];
-  }
-
-  /**
-   * 检查文本框中的括号是否匹配，并更新计数器元素的标题和样式
-   */
-  public check = (): void => {
-    let title = '';
-    for (const { regex, error } of this.errorStrings) {
-      const openMatches = (this.textArea.value.match(new RegExp(regex, 'g')) || []).length;
-      const closeMatches = (
-        this.textArea.value.match(
-          new RegExp(regex.replaceAll('(', ')').replaceAll('[', ']').replaceAll('{', '}'), 'g'),
-        ) || []
-      ).length;
-      if (openMatches === closeMatches) {
-        title = this.counterElt.title.replace(error, '');
-      } else {
-        if (!this.counterElt.title.includes(error)) {
-          title += error;
-        }
-      }
-    }
-    this.counterElt.title = title;
-    this.counterElt.classList.toggle('error', !!title);
-  };
-}
-
-/**
- * 初始化括号匹配检查器
- * @param id_prompt 包含文本框的元素的 ID
- * @param id_counter 显示计数器的元素的 ID
- */
-const setupBracketChecking = (idPrompt: string, idCounter: string): void => {
-  const textarea = gradioApp().querySelector(
-    `#${idPrompt} > label > textarea`,
-  ) as HTMLTextAreaElement;
-  const counter = gradioApp().querySelector(`#${idCounter}`) as HTMLElement;
-  const bracketChecker = new BracketChecker(textarea, counter);
-  textarea.addEventListener('input', bracketChecker.check);
-};
-
-export default () => {
-  const elements = ['txt2img', 'txt2img_neg', 'img2img', 'img2img_neg'];
-  for (const prompt of elements) {
-    setupBracketChecking(`${prompt}_prompt`, `${prompt}_token_counter`);
-    setupBracketChecking(`${prompt}_prompt`, `${prompt}_negative_token_counter`);
-  }
-};

src/styles/components/container.ts

@@ -1,14 +1,6 @@
 import { Theme, css } from 'antd-style';
 
 export default (token: Theme) => {
-  const cardStylish = css`
-    display: flex;
-    flex-direction: column;
-
-    background-color: ${token.colorBgContainer} !important;
-    border-radius: ${token.borderRadius}px !important;
-    box-shadow: none;
-  `;
   return css`
     .gradio-tabitem {
       overflow: auto;
@@ -27,7 +19,6 @@ export default (token: Theme) => {
       &.gradio-box,
       &.gradio-accordion {
         &:not(.hidden):has(div) {
-          ${cardStylish};
           margin: 0 !important;
           padding: 16px !important;
           border: 1px solid ${token.colorBorderSecondary} !important;
@@ -38,7 +29,6 @@ export default (token: Theme) => {
     .panel {
       margin: 0 !important;
       padding: 16px !important;
-      ${cardStylish};
     }
 
     .compact,
@@ -55,10 +45,5 @@ export default (token: Theme) => {
       align-items: flex-start;
       justify-content: flex-start;
     }
-
-    #txt2img_dimensions_row,
-    #img2img_dimensions_row {
-      min-width: 36px !important;
-    }
   `;
 };

vite.config.ts

@@ -7,6 +7,9 @@ import { defineConfig } from 'vite';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
+const SD_HOST = '127.0.0.1';
+// const SD_HOST = '30.183.80.45';
+const SD_PORT = 7860;
 export default defineConfig({
   base: '/dev',
   build: {
@@ -73,7 +76,7 @@ export default defineConfig({
             _request.originalUrl === '/dev?__theme=dark' ||
             _request.originalUrl === '/dev?__theme=light'
           ) {
-            const response = await fetch('http://127.0.0.1:7860/');
+            const response = await fetch(`http://${SD_HOST}:${SD_PORT}/`);
 
             let updatedResponse = await response.text();
 
@@ -104,10 +107,10 @@ export default defineConfig({
     port: 8000,
     proxy: {
       '/queue/join': {
-        target: 'ws://127.0.0.1:7860',
+        target: `ws://${SD_HOST}:${SD_PORT}`,
         ws: true,
       },
-      '^(?!.*dev).*$': 'http://127.0.0.1:7860',
+      '^(?!.*dev).*$': `http://${SD_HOST}:${SD_PORT}`,
     },
   },
 });