[Feature] Stable Diffusion #4983
Conversation
|
@Licoy is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe update enhances user flexibility by introducing optional configurations for the Stability API, allowing customization of both the API key and URL. New components and routes have been added to manage Stability-related tasks effectively, while UI enhancements improve the Stable Diffusion experience. Localization has been expanded, styling updates provide consistency, and overall functionality has been refined, making the application more robust and user-friendly. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (27)
- README.md (1 hunks)
- README_CN.md (1 hunks)
- app/api/auth.ts (1 hunks)
- app/api/stability/[...path]/route.ts (1 hunks)
- app/api/webdav/[...path]/route.ts (1 hunks)
- app/client/platforms/anthropic.ts (2 hunks)
- app/components/button.tsx (3 hunks)
- app/components/chat.tsx (1 hunks)
- app/components/error.tsx (1 hunks)
- app/components/home.tsx (5 hunks)
- app/components/sd-panel.module.scss (1 hunks)
- app/components/sd-panel.tsx (1 hunks)
- app/components/sd.module.scss (1 hunks)
- app/components/sd.tsx (1 hunks)
- app/components/sidebar.tsx (6 hunks)
- app/components/ui-lib.module.scss (2 hunks)
- app/components/ui-lib.tsx (5 hunks)
- app/config/client.ts (1 hunks)
- app/config/server.ts (3 hunks)
- app/constant.ts (8 hunks)
- app/layout.tsx (1 hunks)
- app/locales/cn.ts (1 hunks)
- app/locales/en.ts (1 hunks)
- app/page.tsx (1 hunks)
- app/store/sd.ts (1 hunks)
- app/styles/globals.scss (1 hunks)
- package.json (1 hunks)
Files skipped from review due to trivial changes (8)
- README_CN.md
- app/client/platforms/anthropic.ts
- app/components/chat.tsx
- app/components/error.tsx
- app/components/sd.module.scss
- app/layout.tsx
- app/page.tsx
- package.json
Additional context used
Biome
app/store/sd.ts
[error] 71-71: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 49-49: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
app/components/sd.tsx
[error] 143-143: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
Additional comments not posted (59)
app/config/client.ts (1)
6-6: LGTM! Correctly handles potential null or undefined values.The change ensures that
queryMeta("config")returns an empty object if it is null or undefined.app/components/sd-panel.module.scss (2)
1-25: LGTM! Styles are well-defined and follow best practices.The styles for
.ctrl-param-itemand its child elements are well-defined and follow best practices.
27-33: LGTM! Styles are well-defined and follow best practices.The styles for buttons within
.ai-modelsare well-defined and follow best practices.app/components/button.tsx (3)
4-4: LGTM! Correctly importsCSSPropertiesfrom React.The change imports
CSSPropertiesfrom React to define thestyleprop.
20-20: LGTM! Correctly defines thestyleprop.The change adds a
styleprop to theIconButtoncomponent, allowing custom styles to be applied.
36-36: LGTM! Correctly applies thestyleprop.The change applies the
styleprop to the button element, allowing custom styles to be used.app/api/stability/[...path]/route.ts (13)
6-9: LGTM! Correctly defines thehandlefunction.The function is defined to handle Stability API requests with
GETandPOSTmethods.
12-14: LGTM! Correctly handlesOPTIONSrequest.The code correctly handles
OPTIONSrequests by returning a 200 status.
16-17: LGTM! Correctly initializesAbortController.The code initializes an
AbortControllerto handle request timeouts.
18-20: LGTM! Correctly retrieves server configuration.The code retrieves server configuration using
getServerSideConfig.
22-24: LGTM! Correctly formats base URL.The code ensures the base URL starts with
httpand trims any trailing slashes.
30-34: LGTM! Logs request details.The code logs the request path and base URL for debugging purposes.
35-40: LGTM! Sets request timeout.The code sets a timeout for the request using
setTimeout.
42-48: LGTM! Handles authentication.The code handles authentication using the
authfunction and returns a 401 status if authentication fails.
50-54: LGTM! Retrieves API key.The code retrieves the API key from the request headers or server configuration.
55-64: LGTM! Returns 401 status if API key is missing.The code returns a 401 status if the API key is missing.
67-82: LGTM! Prepares fetch options.The code prepares the fetch options for the Stability API request.
84-98: LGTM! Handles Stability API request and response.The code handles the Stability API request and response, including error handling and response headers.
101-104: LGTM! Exports request handlers and runtime.The code exports the request handlers for
GETandPOSTmethods and sets the runtime toedge.app/store/sd.ts (4)
7-33: LGTM!The
SdDbConfigobject is well-defined and correctly structured for the IndexedDB store.
35-37: LGTM!The
SdDbInitfunction correctly initializes the IndexedDB with the provided configuration.
39-42: LGTM!The
SdStoretype definition is clear and straightforward.
44-47: LGTM!The
useSdStorefunction is correctly implemented and adheres to Zustand's API.app/api/auth.ts (1)
70-71: LGTM!The
authfunction correctly handles the new Stability provider.app/api/webdav/[...path]/route.ts (1)
40-46: LGTM!The
handlefunction correctly handles WebDAV requests with appropriate URL validation.app/config/server.ts (2)
26-28: LGTM!The new configuration options
STABILITY_URLandSTABILITY_API_KEYare correctly defined and integrated.
Line range hint
114-143:
LGTM!The new configuration constants
isStability,stabilityUrl, andstabilityApiKeyare correctly defined and integrated.app/components/home.tsx (3)
59-61: LGTM! Dynamic import ofSdcomponent is correctly implemented.The loading state is handled appropriately.
63-65: LGTM! Dynamic import ofSdPanelcomponent is correctly implemented.The loading state is handled appropriately.
169-170: LGTM! Routes forSdandSdPanelcomponents are correctly added.The routes are implemented appropriately.
app/components/ui-lib.module.scss (2)
64-76: LGTM! New styles forlist-itemclass with vertical alignment are correctly implemented.The styles are implemented appropriately.
307-309: LGTM! New styles forselector-item-disabledclass are correctly implemented.The styles are implemented appropriately.
app/styles/globals.scss (1)
229-230: LGTM! New styles for input fields of typepasswordare correctly implemented.The styles are implemented appropriately.
app/constant.ts (5)
1-2: LGTM! Import statement forstabilityRequestCallis correctly added.The import statement is implemented appropriately.
13-14: LGTM! New constantSTABILITY_BASE_URLis correctly added.The constant is implemented appropriately.
35-36: LGTM! New pathsSdandSdPanelinPathenum are correctly added.The paths are implemented appropriately.
67-67: LGTM! New keySdListinStoreKeyenum is correctly added.The key is implemented appropriately.
Line range hint
87-109:
LGTM! NewServiceProviderandModelProviderenums,StabilityPathconstant are correctly added.The enums and constants are implemented appropriately.
app/components/sidebar.tsx (5)
1-1: Ensure all imports are necessary.Review the usage of newly added imports to confirm they are required and correctly utilized.
Also applies to: 18-18, 26-26, 30-30
Verification successful
All newly added imports are necessary and correctly used.
The following imports are confirmed to be used within the
app/components/sidebar.tsxfile:
useStateModelTypePLUGINSuseLocationuseNavigateScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of newly added imports in `app/components/sidebar.tsx`. # Test: Ensure all newly added imports are used in the file. rg --type js --word-regexp --fixed-strings 'useState' app/components/sidebar.tsx rg --type js --word-regexp --fixed-strings 'ModelType' app/components/sidebar.tsx rg --type js --word-regexp --fixed-strings 'PLUGINS' app/components/sidebar.tsx rg --type js --word-regexp --fixed-strings 'useLocation' app/components/sidebar.tsx rg --type js --word-regexp --fixed-strings 'useNavigate' app/components/sidebar.tsxLength of output: 868
39-41: Confirm necessity and correctness of dynamic import.Ensure that the dynamic import for
SdPanelis necessary and correctly implemented.Verification successful
Confirm the necessity and correctness of dynamic import for
SdPanel.The dynamic import for
SdPanelappears to be correctly implemented and used conditionally. Ensure that this dynamic import is necessary for optimizing performance.
- Check if
PathandSdPanelare correctly defined and used.- Verify if the dynamic import is needed for performance optimization.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the necessity and correctness of dynamic import for `SdPanel`. # Test: Ensure `SdPanel` is dynamically imported and used correctly. rg --type js --word-regexp --fixed-strings 'SdPanel' app/components/sidebar.tsxLength of output: 213
148-149: Verify correct usage ofuseStateanduseLocation.Ensure the
useStateforshowPluginSelectoranduseLocationforlocationare correctly implemented and necessary.Verification successful
Verification successful: Correct usage of
useStateanduseLocation.
showPluginSelectorstate andsetShowPluginSelectorfunction are correctly implemented and used for toggling visibility.locationfromuseLocationis correctly used in aswitchstatement to handle different paths.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `useState` and `useLocation` in `SideBar` component. # Test: Ensure `useState` and `useLocation` are correctly implemented and used. rg --type js --word-regexp --fixed-strings 'showPluginSelector' app/components/sidebar.tsx rg --type js --word-regexp --fixed-strings 'useLocation' app/components/sidebar.tsxLength of output: 377
Script:
#!/bin/bash # Description: Verify the usage of `setShowPluginSelector` and `location` in `SideBar` component. # Test: Ensure `setShowPluginSelector` is correctly implemented and used. rg --type js --word-regexp --fixed-strings 'setShowPluginSelector' app/components/sidebar.tsx # Test: Ensure `location` is correctly implemented and used. rg --type js --word-regexp --fixed-strings 'location' app/components/sidebar.tsxLength of output: 419
271-291: Verify plugin selector logic.Ensure the plugin selector logic is correctly implemented and necessary.
153-163: Verify conditional rendering logic.Ensure the conditional rendering logic for
SdPanelandChatListis correct.Verification successful
Verify conditional rendering logic.
The conditional rendering logic for
SdPanelandChatListinapp/components/sidebar.tsxappears to be correct. ThePathobject is correctly imported from../constant, and theChatListcomponent is dynamically imported.
Pathobject is defined and used correctly.ChatListcomponent is imported dynamically and used correctly.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the conditional rendering logic in `SideBar` component. # Test: Ensure the conditional rendering logic for `SdPanel` and `ChatList` is correct. rg --type js --word-regexp --fixed-strings 'bodyComponent' app/components/sidebar.tsxLength of output: 242
Script:
#!/bin/bash # Search for the definition and usage of the `Path` object to ensure it contains `Sd` and `SdPanel`. rg --type js --word-regexp --fixed-strings 'Path' # Search for the definition and usage of the `ChatList` component to ensure it is correctly used and the `shouldNarrow` prop is defined. rg --type js --word-regexp --fixed-strings 'ChatList'Length of output: 103
Script:
#!/bin/bash # Search for the definition and usage of the `Path` object, including context lines for better understanding. rg --type js --word-regexp --fixed-strings 'Path' -A 10 -B 10 # Search for the definition and usage of the `ChatList` component, including context lines for better understanding. rg --type js --word-regexp --fixed-strings 'ChatList' -A 10 -B 10Length of output: 127
Script:
#!/bin/bash # Search for import statements related to `Path` and `ChatList`. rg --type js 'import .*Path' -A 5 -B 5 rg --type js 'import .*ChatList' -A 5 -B 5 # Search for variable declarations related to `Path` and `ChatList`. rg --type js 'const Path' -A 5 -B 5 rg --type js 'const ChatList' -A 5 -B 5Length of output: 165
Script:
#!/bin/bash # Search for import statements and variable declarations related to `Path` and `ChatList` in `.jsx` and `.ts` files. rg --type ts 'import .*Path' -A 5 -B 5 rg --type ts 'import .*ChatList' -A 5 -B 5 rg --type ts 'const Path' -A 5 -B 5 rg --type ts 'const ChatList' -A 5 -B 5 rg --type jsx 'import .*Path' -A 5 -B 5 rg --type jsx 'import .*ChatList' -A 5 -B 5 rg --type jsx 'const Path' -A 5 -B 5 rg --type jsx 'const ChatList' -A 5 -B 5Length of output: 7724
app/components/sd-panel.tsx (6)
1-11: Ensure necessary imports and correct initialization.Review the usage of newly added imports and ensure the initialization of
IndexedDBis correct.Verification successful
Imports and initialization are correct and necessary.
The newly added imports
useIndexedDBandSdDbInitare utilized withinapp/components/sd-panel.tsx. The initialization ofIndexedDBis also correctly implemented.
useIndexedDBis used to initializesdListDbwithStoreKey.SdList.SdDbInitis called to initialize the IndexedDB.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of newly added imports and initialization of `IndexedDB`. # Test: Ensure all newly added imports are used in the file. rg --type js --word-regexp --fixed-strings 'useIndexedDB' app/components/sd-panel.tsx rg --type js --word-regexp --fixed-strings 'SdDbInit' app/components/sd-panel.tsxLength of output: 350
274-347: Verify correctness ofSdPanelcomponent.Ensure the
SdPanelcomponent is correctly implemented and necessary.
161-255: Verify correctness ofControlParamcomponent.Ensure the
ControlParamcomponent is correctly implemented and necessary.Verification successful
The
ControlParamcomponent is correctly implemented and used within the codebase.
- The implementation handles different input types appropriately based on the
item.typeproperty.- There are no additional references or usages of
ControlParamfound outside the specified file, indicating it is self-contained.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correctness of `ControlParam` component. # Test: Ensure the `ControlParam` component is correctly implemented and used. rg --type js --word-regexp --fixed-strings 'ControlParam' app/components/sd-panel.tsxLength of output: 166
Script:
#!/bin/bash # Description: Verify the correctness of `ControlParam` component. # Search for the implementation details of `ControlParam` component. ast-grep --lang tsx --pattern 'function ControlParam($_) { $$$ }' # Search for any other references to `ControlParam` across the codebase. rg --type js --word-regexp --fixed-strings 'ControlParam'Length of output: 6321
13-108: Verify logic ofsdCommonParamsfunction.Ensure the logic of
sdCommonParamsfunction is correct and necessary.Verification successful
Verification of
sdCommonParamsfunction logic.The logic of the
sdCommonParamsfunction is correct and necessary. The function is properly defined and used within theSdPanelcomponent to generate model-specific parameters with appropriate localization and filtering.
- The
localesobject is correctly imported and used for localization.- The
modelsarray is correctly defined and used within theSdPanelcomponent.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the logic of `sdCommonParams` function. # Test: Ensure the function is correctly implemented and used. rg --type js --word-regexp --fixed-strings 'sdCommonParams' app/components/sd-panel.tsxLength of output: 317
Script:
#!/bin/bash # Extract the context around the usage of `sdCommonParams` function within the file `app/components/sd-panel.tsx`. # Get 5 lines before and after each occurrence of `sdCommonParams` function within the file. rg --type js --word-regexp --fixed-strings 'sdCommonParams' -A 5 -B 5 app/components/sd-panel.tsxLength of output: 899
Script:
#!/bin/bash # Verify the definitions and usage of the `locales` object and the `models` array within the file `app/components/sd-panel.tsx`. # Search for the definition and usage of the `locales` object. rg --type js --word-regexp 'locales' -A 5 -B 5 app/components/sd-panel.tsx # Search for the definition and usage of the `models` array. rg --type js --word-regexp 'models' -A 5 -B 5 app/components/sd-panel.tsxLength of output: 5220
110-132: Verify correctness of models array.Ensure the models array is correctly defined and used.
134-159: Verify correctness ofControlParamItemcomponent.Ensure the
ControlParamItemcomponent is correctly implemented and necessary.Verification successful
To proceed with the verification of the
ControlParamItemcomponent, let's check for the definition of thestylesobject and ensure the styles referenced in theControlParamItemcomponent are correctly defined and imported.
To confirm the correctness of the
ControlParamItemcomponent, let's verify that the required styles are defined in the./sd-panel.module.scssfile.
To proceed, let's search the repository for any CSS or SCSS files that might contain the required style definitions.
The
ControlParamItemcomponent is correctly implemented.The component references styles that are correctly defined in the
app/components/sd-panel.module.scssfile.
ctrl-param-itemctrl-param-item-headerctrl-param-item-titlectrl-param-item-sub-titleNo issues found with the component's implementation or its style references.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correctness of `ControlParamItem` component. # Test: Ensure the `ControlParamItem` component is correctly implemented and used. rg --type js --word-regexp --fixed-strings 'ControlParamItem' app/components/sd-panel.tsxLength of output: 478
Script:
#!/bin/bash # Description: Verify the `styles` object and its usage in `ControlParamItem` component. # Find the definition of the `styles` object in the `app/components/sd-panel.tsx` file. rg --type js --word-regexp --fixed-strings 'styles' app/components/sd-panel.tsx # Check for the existence and definition of the styles used in the `ControlParamItem` component. rg --type js --word-regexp --fixed-strings 'ctrl-param-item' app/components/sd-panel.tsxLength of output: 769
Script:
#!/bin/bash # Description: Verify the style definitions in `./sd-panel.module.scss`. # Check for the definitions of the styles used in the `ControlParamItem` component. rg --type css --word-regexp --fixed-strings '.ctrl-param-item' ./sd-panel.module.scss rg --type css --word-regexp --fixed-strings '.ctrl-param-item-header' ./sd-panel.module.scss rg --type css --word-regexp --fixed-strings '.ctrl-param-item-title' ./sd-panel.module.scss rg --type css --word-regexp --fixed-strings '.ctrl-param-item-sub-title' ./sd-panel.module.scssLength of output: 618
Script:
#!/bin/bash # Description: Search the repository for CSS or SCSS files that might contain the required style definitions. # Find all CSS or SCSS files in the repository. fd --type f --extension css --extension scss # Check for the definitions of the styles used in the `ControlParamItem` component within the found files. fd --type f --extension css --extension scss --exec rg --word-regexp --fixed-strings '.ctrl-param-item' {} fd --type f --extension css --extension scss --exec rg --word-regexp --fixed-strings '.ctrl-param-item-header' {} fd --type f --extension css --extension scss --exec rg --word-regexp --fixed-strings '.ctrl-param-item-title' {} fd --type f --extension css --extension scss --exec rg --word-regexp --fixed-strings '.ctrl-param-item-sub-title' {}Length of output: 1275
app/components/ui-lib.tsx (4)
56-57: Verify correctness ofverticalprop in ListItem component.Ensure the
verticalprop is correctly implemented and necessary.Also applies to: 61-65
Verification successful
The
verticalprop in theListItemcomponent is correctly implemented and necessary.The
verticalprop is used to conditionally apply averticalCSS class, enabling different styling based on its value.
app/components/ui-lib.tsx:
- Line 56: Definition of
verticalprop.- Line 61: Usage in
ListItemcomponent.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correctness of `vertical` prop in `ListItem` component. # Test: Ensure the `vertical` prop is correctly implemented and used in `ListItem` component. rg --type js --word-regexp --fixed-strings 'ListItem' app/components/ui-lib.tsxLength of output: 163
Script:
#!/bin/bash # Description: Verify the usage and implementation of `vertical` prop in `ListItem` component. # Test: Search for `vertical` prop within `ListItem` component definition and its usage. rg --type js --word-regexp --fixed-strings 'vertical' app/components/ui-lib.tsx -A 10Length of output: 622
16-20: Verify correctness ofonClickevent type in Popover component.Ensure the
onClickevent type is correctly implemented.Verification successful
The
onClickevent type in thePopovercomponent is correctly implemented.The
onCloseprop is correctly typed as() => voidand does not require an explicitMouseEventtype.
Popovercomponent:app/components/ui-lib.tsx, line 1Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correctness of `onClick` event type in `Popover` component. # Test: Ensure the `onClick` event type is correctly implemented in `Popover` component. rg --type js --word-regexp --fixed-strings 'Popover' app/components/ui-lib.tsxLength of output: 111
Script:
#!/bin/bash # Description: Extract the implementation of the `Popover` component to verify the `onClick` event type. # Locate the start and end of the Popover component rg --type js --word-regexp --fixed-strings -A 20 'export function Popover' app/components/ui-lib.tsxLength of output: 627
Script:
#!/bin/bash # Description: Search for the definition and usage of `onClose` in the codebase to verify if it is using the `MouseEvent` type correctly. # Search for `onClose` in the `app/components/ui-lib.tsx` file rg --type js --word-regexp --fixed-strings 'onClose' app/components/ui-lib.tsxLength of output: 684
Line range hint
464-490:
Verify correctness ofdisableprop in Selector component.Ensure the
disableprop inSelectorcomponent is correctly implemented and necessary.
434-452: Verify correctness of new parameters inshowImageModalfunction.Ensure the new parameters in
showImageModalfunction are correctly implemented and necessary.Verification successful
Verify correctness of new parameters in
showImageModalfunction.The new parameters
defaultMax,style, andboxStylein theshowImageModalfunction are correctly implemented and used in the following instances:
File:
app/components/sd.tsx
- Usage:
showImageModal( getBase64ImgUrl(item.img_data, "image/png"), true, isMobileScreen ? { width: "100%", height: "fit-content" } : { maxWidth: "100%", maxHeight: "100%" } );File:
app/components/exporter.tsx
- Usage:
showImageModal(blob);File:
app/components/markdown.tsx
- Usage:
showImageModal(URL.createObjectURL(blob));The parameters are used in a manner consistent with their definitions, ensuring the function's flexibility and adaptability to different contexts.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correctness of new parameters in `showImageModal` function. # Test: Ensure the new parameters in `showImageModal` function are correctly implemented and used. rg --type js --word-regexp --fixed-strings 'showImageModal' app/components/ui-lib.tsxLength of output: 117
Script:
#!/bin/bash # Search for all instances where the showImageModal function is called in the entire codebase rg --type js --word-regexp --fixed-strings 'showImageModal'Length of output: 59
Script:
#!/bin/bash # Search for all instances where the showImageModal function is called in the entire codebase with additional context lines rg --type js --word-regexp --fixed-strings 'showImageModal' -A 5 -B 5Length of output: 69
Script:
#!/bin/bash # Search for all instances where the showImageModal function is called in the entire codebase, including TypeScript and JSX files rg --type-add 'tsx:*.{ts,tsx,js,jsx}' --type tsx --word-regexp --fixed-strings 'showImageModal' -A 5 -B 5Length of output: 4323
app/components/sd.tsx (1)
1-26: Ensure necessary imports.Review the usage of newly added imports to confirm they are required and correctly utilized.
#!/bin/bash # Description: Verify the usage of newly added imports in `app/components/sd.tsx`. # Test: Ensure all newly added imports are used in the file. rg --type js --word-regexp --fixed-strings 'chatStyles' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'styles' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'IconButton' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ReturnIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'Locale' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'Path' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'StoreKey' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'copyToClipboard' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'getMessageTextContent' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useMobileScreen' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useNavigate' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useAppConfig' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'MinIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'MaxIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'getClientConfig' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ChatAction' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'DeleteIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'CopyIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'PromptIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ResetIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useIndexedDB' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'sendSdTask' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useSdStore' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'locales' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'LoadingIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ErrorIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'showConfirm' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'showImageModal' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'showModal' app/components/sd.tsx <details> <summary>Verification successful</summary> --- <!-- [monologue] [task review_file_4/4 segment_1/4] Review initial setup and imports. [observations] The shell script results indicate that all newly added imports are indeed used within the `app/components/sd.tsx` file. [analysis] Since all the imports are utilized in the file, there are no unnecessary imports. This confirms that the review comment's concern about ensuring necessary imports has been addressed. [actions] Generate the final response confirming that all the imports are necessary and correctly used. --> **All imports are necessary and correctly used.** The newly added imports in `app/components/sd.tsx` are all utilized within the file, confirming their necessity and correct usage. - `chatStyles` is used multiple times for styling elements. - `styles` is used for various class names. - `IconButton`, `ReturnIcon`, `Locale`, `Path`, `StoreKey`, `copyToClipboard`, `getMessageTextContent`, `useMobileScreen`, `useNavigate`, `useAppConfig`, `MinIcon`, `MaxIcon`, `getClientConfig`, `ChatAction`, `DeleteIcon`, `CopyIcon`, `PromptIcon`, `ResetIcon`, `useIndexedDB`, `sendSdTask`, `useSdStore`, `locales`, `LoadingIcon`, `ErrorIcon`, `showConfirm`, `showImageModal`, and `showModal` are all utilized appropriately within the component. </details> <details> <summary>Scripts executed</summary> The following scripts were executed for the analysis: --- Script: ```shell #!/bin/bash # Description: Verify the usage of newly added imports in `app/components/sd.tsx`. # Test: Ensure all newly added imports are used in the file. rg --type js --word-regexp --fixed-strings 'chatStyles' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'styles' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'IconButton' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ReturnIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'Locale' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'Path' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'StoreKey' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'copyToClipboard' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'getMessageTextContent' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useMobileScreen' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useNavigate' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useAppConfig' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'MinIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'MaxIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'getClientConfig' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ChatAction' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'DeleteIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'CopyIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'PromptIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ResetIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useIndexedDB' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'sendSdTask' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'useSdStore' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'locales' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'LoadingIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'ErrorIcon' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'showConfirm' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'showImageModal' app/components/sd.tsx rg --type js --word-regexp --fixed-strings 'showModal' app/components/sd.tsxLength of output: 6658
app/locales/cn.ts (2)
525-555: Translations forSdPanellook good.The translations for prompts, styles, and other elements related to
SdPanelappear to be accurate and contextually appropriate.
556-577: Translations forSdlook good.The translations for actions, statuses, and other elements related to
Sdappear to be accurate and contextually appropriate.
README.md (1)
298-305: Documentation for Stability API configuration looks good.The documentation for the
STABILITY_API_KEYandSTABILITY_URLenvironment variables is clear and provides sufficient information for users to configure these settings.
app/locales/en.ts (2)
531-560: Translations forSdPanellook good.The translations for prompts, styles, and other elements related to
SdPanelappear to be accurate and contextually appropriate.
562-583: Translations forSdlook good.The translations for actions, statuses, and other elements related to
Sdappear to be accurate and contextually appropriate.
|
#5013 |
#5013 |
There was a problem hiding this comment.
Actionable comments posted: 6
Outside diff range, codebase verification and nitpick comments (1)
app/store/sd.ts (1)
1-6: Remove unused imports.The imports
uploadImageandbase64Image2Blobfrom "@/app/utils/chat" are not used in this file.- import { uploadImage, base64Image2Blob } from "@/app/utils/chat"; + // import { uploadImage, base64Image2Blob } from "@/app/utils/chat";
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- app/components/sd/sd-new.tsx (1 hunks)
- app/components/sd/sd-panel.tsx (1 hunks)
- app/components/sd/sd-sidebar.tsx (1 hunks)
- app/components/sd/sd.tsx (1 hunks)
- app/store/sd.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- app/components/sd/sd-new.tsx
- app/components/sd/sd-panel.tsx
- app/components/sd/sd-sidebar.tsx
Additional context used
Biome
app/store/sd.ts
[error] 65-65: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 31-31: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
[error] 52-52: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
app/components/sd/sd.tsx
[error] 137-137: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
Additional comments not posted (5)
app/store/sd.ts (4)
47-51: LGTM!The method
getNextIdis correct and follows best practices.
129-131: LGTM!The method
setCurrentModelis correct and follows best practices.
132-135: LGTM!The method
setCurrentParamsis correct and follows best practices.
52-57: Improve error handling and feedback mechanisms.The current implementation logs errors to the console, which is not user-friendly. Consider implementing a more robust error handling strategy that includes user notifications and error recovery mechanisms.
+ import { handleError } from "@/app/utils/errorHandling"; - console.error("uploadImage error", e); + handleError("Image upload failed", e);Likely invalid or redundant comment.
Tools
Biome
[error] 52-52: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
app/components/sd/sd.tsx (1)
38-85: LGTM!The function
getSdTaskStatusis correct and follows best practices.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- app/components/home.tsx (3 hunks)
- app/components/sd/index.tsx (1 hunks)
- app/components/sd/sd-sidebar.tsx (1 hunks)
- app/components/sd/sd.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- app/components/sd/index.tsx
- app/components/sd/sd-sidebar.tsx
Additional context used
Biome
app/components/sd/sd.tsx
[error] 142-142: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
Additional comments not posted (6)
app/components/home.tsx (4)
58-60: Dynamic import forSdcomponent looks good.The dynamic import pattern is correctly used, and the loading state is handled appropriately.
129-135:WindowContentfunction looks good.The function correctly wraps children components in a styled div.
142-143: New route checks inScreenfunction look good.The route checks for
isSdandisSdNeware correctly added.
153-171: RefactoredrenderContentfunction looks good.The refactoring improves readability and maintains the component's layout.
app/components/sd/sd.tsx (2)
1-39: Import statements look good.The import statements are correctly structured and necessary for the component's functionality.
41-89:getSdTaskStatusfunction looks good.The function is well-structured and handles different statuses appropriately.
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- app/components/settings.tsx (3 hunks)
- app/constant.ts (7 hunks)
- app/locales/cn.ts (2 hunks)
- app/locales/en.ts (2 hunks)
- app/store/access.ts (2 hunks)
- app/store/sd.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- app/constant.ts
- app/locales/cn.ts
- app/locales/en.ts
Additional context used
Biome
app/store/sd.ts
[error] 65-65: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 31-31: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
[error] 52-52: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
Additional comments not posted (2)
app/store/access.ts (1)
81-83: LGTM!The addition of
stabilityUrlandstabilityApiKeytoDEFAULT_ACCESS_STATEaligns with the enhancement for stability-related configurations.app/components/settings.tsx (1)
1045-1082: LGTM!The new component for configuring stability settings is correctly implemented and enhances the functionality of the settings interface.
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- app/components/sd/sd-sidebar.tsx (1 hunks)
- app/components/sd/sd.tsx (1 hunks)
- app/constant.ts (7 hunks)
Files skipped from review as they are similar to previous changes (2)
- app/components/sd/sd-sidebar.tsx
- app/constant.ts
Additional context used
Biome
app/components/sd/sd.tsx
[error] 141-141: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
Additional comments not posted (1)
app/components/sd/sd.tsx (1)
41-87: FunctiongetSdTaskStatuslooks good.The function is well-structured and follows good practices.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
app/icons/discovery.svgis excluded by!**/*.svg
Files selected for processing (4)
- app/components/chat.tsx (3 hunks)
- app/components/sidebar.tsx (6 hunks)
- app/locales/cn.ts (3 hunks)
- app/locales/en.ts (3 hunks)
Files skipped from review as they are similar to previous changes (3)
- app/components/chat.tsx
- app/components/sidebar.tsx
- app/locales/cn.ts
Additional comments not posted (3)
app/locales/en.ts (3)
375-384: LGTM!The added localization strings for the
Stabilityobject are consistent with the existing pattern.
549-578: LGTM!The added localization strings for the
SdPanelobject are consistent with the existing pattern.
580-603: LGTM!The added localization strings for the
Sdobject are consistent with the existing pattern.
There was a problem hiding this comment.
Actionable comments posted: 6
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- app/client/api.ts (2 hunks)
- app/constant.ts (8 hunks)
- app/store/access.ts (2 hunks)
- app/store/sd.ts (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- app/constant.ts
- app/store/access.ts
Additional context used
Biome
app/store/sd.ts
[error] 37-37: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
[error] 58-58: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
| console.error("uploadImage error", e); | ||
| self.updateDraw({ | ||
| ...data, | ||
| status: "error", | ||
| error: JSON.stringify(e), | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Improve error handling and feedback mechanisms.
The current implementation logs errors to the console, which is not user-friendly. Consider implementing a more robust error handling strategy that includes user notifications and error recovery mechanisms.
+ import { handleError } from "@/app/utils/errorHandling";
- console.error("uploadImage error", e);
+ handleError("Image upload failed", e);Committable suggestion was skipped due to low confidence.
| set({ currentId: id }); | ||
| return id; | ||
| }, | ||
| sendTask(data: any, okCall?: Function) { |
There was a problem hiding this comment.
Refactor to use explicit function types instead of Function.
Using Function as a type is too generic and can lead to bugs because it doesn't specify what arguments or return type the function should have. This aligns with TypeScript best practices.
- sendTask(data: any, okCall?: Function) {
+ sendTask(data: any, okCall?: () => void) {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| sendTask(data: any, okCall?: Function) { | |
| sendTask(data: any, okCall?: () => void) { |
Tools
Biome
[error] 58-58: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
| sendTask: (data: any, okCall?: Function) => void; | ||
| updateDraw: (draw: any) => void; |
There was a problem hiding this comment.
Refactor to use explicit function types instead of Function.
Using Function as a type is too generic and can lead to bugs because it doesn't specify what arguments or return type the function should have. This aligns with TypeScript best practices.
- sendTask: (data: any, okCall?: Function) => void;
+ sendTask: (data: any, okCall?: () => void) => void;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| sendTask: (data: any, okCall?: Function) => void; | |
| updateDraw: (draw: any) => void; | |
| sendTask: (data: any, okCall?: () => void) => void; | |
| updateDraw: (draw: any) => void; |
Tools
Biome
[error] 37-37: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
| this.updateDraw({ ...data, status: "error", error: error.message }); | ||
| console.error("Error:", error); |
There was a problem hiding this comment.
Improve error handling and feedback mechanisms.
The current implementation logs errors to the console, which is not user-friendly. Consider implementing a more robust error handling strategy that includes user notifications and error recovery mechanisms.
+ import { handleError } from "@/app/utils/errorHandling";
- console.error("Error:", error);
+ handleError("Stability request failed", error);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| this.updateDraw({ ...data, status: "error", error: error.message }); | |
| console.error("Error:", error); | |
| this.updateDraw({ ...data, status: "error", error: error.message }); | |
| import { handleError } from "@/app/utils/errorHandling"; | |
| handleError("Stability request failed", error); |
| updateDraw(_draw: any) { | ||
| const draw = _get().draw || []; | ||
| draw.some((item, index) => { | ||
| if (item.id === _draw.id) { | ||
| draw[index] = _draw; | ||
| set(() => ({ draw })); | ||
| return true; | ||
| } | ||
| }); |
There was a problem hiding this comment.
Add a return statement in the loop.
The loop lacks a return statement, which may lead to unintended behavior. Ensure the function exits the loop correctly once the condition is met.
- });
+ return false;
+ });Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| updateDraw(_draw: any) { | |
| const draw = _get().draw || []; | |
| draw.some((item, index) => { | |
| if (item.id === _draw.id) { | |
| draw[index] = _draw; | |
| set(() => ({ draw })); | |
| return true; | |
| } | |
| }); | |
| updateDraw(_draw: any) { | |
| const draw = _get().draw || []; | |
| draw.some((item, index) => { | |
| if (item.id === _draw.id) { | |
| draw[index] = _draw; | |
| set(() => ({ draw })); | |
| return true; | |
| } | |
| }); | |
| return false; |
| stabilityRequestCall(data: any) { | ||
| const accessStore = useAccessStore.getState(); | ||
| let prefix: string = ApiPath.Stability as string; | ||
| let bearerToken = ""; | ||
| if (accessStore.useCustomConfig) { | ||
| prefix = accessStore.stabilityUrl || (ApiPath.Stability as string); | ||
| bearerToken = getBearerToken(accessStore.stabilityApiKey); | ||
| } | ||
| if (!bearerToken && accessStore.enabledAccessControl()) { | ||
| bearerToken = getBearerToken( | ||
| ACCESS_CODE_PREFIX + accessStore.accessCode, | ||
| ); | ||
| } | ||
| const headers = { | ||
| Accept: "application/json", | ||
| Authorization: bearerToken, | ||
| }; | ||
| const path = `${prefix}/${Stability.GeneratePath}/${data.model}`; | ||
| const formData = new FormData(); | ||
| for (let paramsKey in data.params) { | ||
| formData.append(paramsKey, data.params[paramsKey]); | ||
| } | ||
| fetch(path, { | ||
| method: "POST", | ||
| headers, | ||
| body: formData, | ||
| }) | ||
| .then((response) => response.json()) | ||
| .then((resData) => { | ||
| if (resData.errors && resData.errors.length > 0) { | ||
| this.updateDraw({ | ||
| ...data, | ||
| status: "error", | ||
| error: resData.errors[0], | ||
| }); | ||
| this.getNextId(); | ||
| return; | ||
| } | ||
| const self = this; | ||
| if (resData.finish_reason === "SUCCESS") { | ||
| uploadImage(base64Image2Blob(resData.image, "image/png")) | ||
| .then((img_data) => { | ||
| console.debug("uploadImage success", img_data, self); | ||
| self.updateDraw({ | ||
| ...data, | ||
| status: "success", | ||
| img_data, | ||
| }); | ||
| }) | ||
| .catch((e) => { | ||
| console.error("uploadImage error", e); | ||
| self.updateDraw({ | ||
| ...data, | ||
| status: "error", | ||
| error: JSON.stringify(e), | ||
| }); | ||
| }); | ||
| } else { | ||
| self.updateDraw({ | ||
| ...data, | ||
| status: "error", | ||
| error: JSON.stringify(resData), | ||
| }); | ||
| } | ||
| this.getNextId(); | ||
| }) | ||
| .catch((error) => { | ||
| this.updateDraw({ ...data, status: "error", error: error.message }); | ||
| console.error("Error:", error); | ||
| this.getNextId(); | ||
| }); |
There was a problem hiding this comment.
Improve error handling and feedback mechanisms.
The current implementation logs errors to the console, which is not user-friendly. Consider implementing a more robust error handling strategy that includes user notifications and error recovery mechanisms.
+ import { handleError } from "@/app/utils/errorHandling";
- console.error("uploadImage error", e);
+ handleError("Image upload failed", e);
- console.error("Error:", error);
+ handleError("Stability request failed", error);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| stabilityRequestCall(data: any) { | |
| const accessStore = useAccessStore.getState(); | |
| let prefix: string = ApiPath.Stability as string; | |
| let bearerToken = ""; | |
| if (accessStore.useCustomConfig) { | |
| prefix = accessStore.stabilityUrl || (ApiPath.Stability as string); | |
| bearerToken = getBearerToken(accessStore.stabilityApiKey); | |
| } | |
| if (!bearerToken && accessStore.enabledAccessControl()) { | |
| bearerToken = getBearerToken( | |
| ACCESS_CODE_PREFIX + accessStore.accessCode, | |
| ); | |
| } | |
| const headers = { | |
| Accept: "application/json", | |
| Authorization: bearerToken, | |
| }; | |
| const path = `${prefix}/${Stability.GeneratePath}/${data.model}`; | |
| const formData = new FormData(); | |
| for (let paramsKey in data.params) { | |
| formData.append(paramsKey, data.params[paramsKey]); | |
| } | |
| fetch(path, { | |
| method: "POST", | |
| headers, | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((resData) => { | |
| if (resData.errors && resData.errors.length > 0) { | |
| this.updateDraw({ | |
| ...data, | |
| status: "error", | |
| error: resData.errors[0], | |
| }); | |
| this.getNextId(); | |
| return; | |
| } | |
| const self = this; | |
| if (resData.finish_reason === "SUCCESS") { | |
| uploadImage(base64Image2Blob(resData.image, "image/png")) | |
| .then((img_data) => { | |
| console.debug("uploadImage success", img_data, self); | |
| self.updateDraw({ | |
| ...data, | |
| status: "success", | |
| img_data, | |
| }); | |
| }) | |
| .catch((e) => { | |
| console.error("uploadImage error", e); | |
| self.updateDraw({ | |
| ...data, | |
| status: "error", | |
| error: JSON.stringify(e), | |
| }); | |
| }); | |
| } else { | |
| self.updateDraw({ | |
| ...data, | |
| status: "error", | |
| error: JSON.stringify(resData), | |
| }); | |
| } | |
| this.getNextId(); | |
| }) | |
| .catch((error) => { | |
| this.updateDraw({ ...data, status: "error", error: error.message }); | |
| console.error("Error:", error); | |
| this.getNextId(); | |
| }); | |
| stabilityRequestCall(data: any) { | |
| const accessStore = useAccessStore.getState(); | |
| let prefix: string = ApiPath.Stability as string; | |
| let bearerToken = ""; | |
| if (accessStore.useCustomConfig) { | |
| prefix = accessStore.stabilityUrl || (ApiPath.Stability as string); | |
| bearerToken = getBearerToken(accessStore.stabilityApiKey); | |
| } | |
| if (!bearerToken && accessStore.enabledAccessControl()) { | |
| bearerToken = getBearerToken( | |
| ACCESS_CODE_PREFIX + accessStore.accessCode, | |
| ); | |
| } | |
| const headers = { | |
| Accept: "application/json", | |
| Authorization: bearerToken, | |
| }; | |
| const path = `${prefix}/${Stability.GeneratePath}/${data.model}`; | |
| const formData = new FormData(); | |
| for (let paramsKey in data.params) { | |
| formData.append(paramsKey, data.params[paramsKey]); | |
| } | |
| fetch(path, { | |
| method: "POST", | |
| headers, | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((resData) => { | |
| if (resData.errors && resData.errors.length > 0) { | |
| this.updateDraw({ | |
| ...data, | |
| status: "error", | |
| error: resData.errors[0], | |
| }); | |
| this.getNextId(); | |
| return; | |
| } | |
| const self = this; | |
| if (resData.finish_reason === "SUCCESS") { | |
| uploadImage(base64Image2Blob(resData.image, "image/png")) | |
| .then((img_data) => { | |
| console.debug("uploadImage success", img_data, self); | |
| self.updateDraw({ | |
| ...data, | |
| status: "success", | |
| img_data, | |
| }); | |
| }) | |
| .catch((e) => { | |
| handleError("Image upload failed", e); | |
| self.updateDraw({ | |
| ...data, | |
| status: "error", | |
| error: JSON.stringify(e), | |
| }); | |
| }); | |
| } else { | |
| self.updateDraw({ | |
| ...data, | |
| status: "error", | |
| error: JSON.stringify(resData), | |
| }); | |
| } | |
| this.getNextId(); | |
| }) | |
| .catch((error) => { | |
| this.updateDraw({ ...data, status: "error", error: error.message }); | |
| handleError("Stability request failed", error); | |
| this.getNextId(); | |
| }); |
Summary by CodeRabbit
New Features
STABILITY_API_KEYandSTABILITY_URLto customize Stability API settings.Sd,SdNew,SdPanel, andSideBarcomponents for managing and displaying Stability AI tasks.Enhancements
SdPanelandSdcomponents in multiple languages.Bug Fixes