mirror of
https://github.com/vladmandic/automatic
synced 2026-09-19 17:24:32 +02:00
Vladimir Mandic
@@ -32,6 +32,10 @@ This folder contains repo-local Copilot skills for recurring SD.Next tasks.
|
||||
File: `check-processing/SKILL.md`
|
||||
Use when validating txt2img/img2img/control processing workflows from UI submit definitions to backend execution with parameter, type, and initialization checks.
|
||||
|
||||
- `check-ui`
|
||||
File: `check-ui/SKILL.md`
|
||||
Use when auditing Python-to-JavaScript UI bindings for Gradio `_js` callbacks, verifying `window` exposure and `ui/globals.d.ts` registration.
|
||||
|
||||
- `check-scripts`
|
||||
File: `check-scripts/SKILL.md`
|
||||
Use when auditing `scripts/*.py` for correct Script overrides (`__init__`, `title`, `show`) and verifying `ui()` output compatibility with `run()` or `process()` parameters.
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
name: check-ui
|
||||
description: "Audit Python-to-JavaScript UI bindings for Gradio _js calls, global window exposure, and ui/globals.d.ts registration."
|
||||
argument-hint: "Optionally focus on a specific extension or module path"
|
||||
---
|
||||
|
||||
# Check Python-JavaScript UI Bindings
|
||||
|
||||
Audit SD.Next UI integration points where Python uses Gradio `_js=...` bindings to call JavaScript. Verify each JavaScript callback is exposed on the global `window` object and included in `ui/globals.d.ts`.
|
||||
|
||||
## When To Use
|
||||
|
||||
- The user changes or reviews Python UI code under `modules/`, `scripts/`, or `extensions/` with `_js=` callbacks.
|
||||
- A UI integration bug involves Python-triggered JavaScript functions.
|
||||
- You need to validate UI contract consistency for Gradio-bound JS methods.
|
||||
- User adds or updates extension with JavaScript code in `extensions/*/javascript`.
|
||||
|
||||
## Primary Files
|
||||
|
||||
- `ui/globals.d.ts`
|
||||
- `wiki/Dev-UI.md`
|
||||
- `modules/**` and `scripts/**` Python files that declare `_js=` values
|
||||
- `extensions/*/javascript/**` TypeScript/JavaScript source files
|
||||
|
||||
## Secondary Files To Inspect
|
||||
|
||||
- `ui/**/*.ts`
|
||||
- `extensions-builtin/sdnext-modernui/src/**/*.ts`
|
||||
- `extensions-builtin/sdnext-kanvas/src/**/*.ts`
|
||||
- `extensions-builtin/sdnext-kanvas/javascript/kanvas.mjs`
|
||||
|
||||
## Audit Goals
|
||||
|
||||
For every Python `_js` usage, confirm:
|
||||
|
||||
1. The referenced JS callback exists in code.
|
||||
2. The callback is assigned to `window.<name>` or otherwise accessible as a global function.
|
||||
3. The callback name is declared in `ui/globals.d.ts`.
|
||||
4. JavaScript-only methods called from Python are not implemented only as module-local exports.
|
||||
|
||||
For all extension JavaScript code under `extensions/*/javascript`, confirm:
|
||||
|
||||
- No missing JS callback registrations for Python-bound names.
|
||||
- Global names are only used for Python bindings, not for code that should instead be imported.
|
||||
- `ui/globals.d.ts` remains the source of truth for Python-visible UI globals.
|
||||
|
||||
## Procedure
|
||||
|
||||
### 1. Enumerate Python `_js=` Bindings
|
||||
|
||||
- Search `modules/`, `scripts/`, and `extensions/` for `_js=` occurrences.
|
||||
- Capture the literal callback string values, including direct names and arrow-function expressions.
|
||||
- For formatted strings, enumerate all possible callback names generated by the formatting pattern.
|
||||
- Flag dynamic cases where the callback cannot be statically resolved.
|
||||
|
||||
This is the most complex part as `_js` can be assigned a direct string, a formatted string, or an inline function. Focus on extracting the intended callback name(s) for verification in the next steps.
|
||||
|
||||
Examples:
|
||||
|
||||
```python
|
||||
_js="send_to_kanvas"
|
||||
_js=f"switch_to_{binding.tabname}"
|
||||
_js=f'(x, y, i, j) => [x, y, ...selected_gallery_files("{tabname}")]'
|
||||
_js='() => gallerySort("name")'
|
||||
```
|
||||
|
||||
### 2. Enumerate any additional Extension JavaScript Sources
|
||||
|
||||
- Review `extensions/*/javascript`, `extensions-builtin/*/src`, and the specific entry point `extensions-builtin/sdnext-kanvas/javascript/kanvas.mjs` for functions that attach to `window`.
|
||||
- Confirm extension source files are the authoritative implementation, not generated build artifacts.
|
||||
- Validate that any new JS entry points are registered by package build or extension initialization.
|
||||
|
||||
### 3. Verify JavaScript Exposure
|
||||
|
||||
- Search `ui/`, `extensions-builtin/sdnext-modernui/src/`, `extensions-builtin/sdnext-kanvas/src/`, and `extensions/*/javascript/` for each callback name.
|
||||
- Confirm the callback is attached to `window` as `window.<name> = ...` or equivalent.
|
||||
- If the callback is an inline function string like `() => quickSaveStyle()`, ensure the referenced helper exists and any helper used for Python integration is also globally available if needed.
|
||||
|
||||
### 4. Check TypeScript Declarations
|
||||
|
||||
- Open `ui/globals.d.ts` and verify each Python-visible global callback name is declared.
|
||||
- Confirm the declaration shape is compatible with its usage if type annotations are present.
|
||||
- If an extension exposes its own additional global helpers, verify the declaration file is updated accordingly.
|
||||
|
||||
### 5. Propose Fixes for Any Issues Found
|
||||
|
||||
- For missing global registrations, add `window.<name> = <function>` in the appropriate JavaScript source file.
|
||||
- For missing `ui/globals.d.ts` entries, add a declaration like `declare global { function <name>(...args: any[]): any; }` with appropriate types if possible.
|
||||
|
||||
### 6. Run UI Typecheck and Lint tests
|
||||
|
||||
- Run `pnpm eslint` to ensure there are no linting errors.
|
||||
- Run `pnpm tsc` to ensure there are no type errors, which can catch missing or mismatched declarations.
|
||||
- Run `pnpm build` to ensure the extension builds correctly with the new or updated JavaScript code.
|
||||
|
||||
And fix any issues that arise from these checks.
|
||||
|
||||
## Reporting Format
|
||||
|
||||
Report findings with:
|
||||
|
||||
- Python file and `_js` reference
|
||||
- JavaScript location and global registration status
|
||||
- `ui/globals.d.ts` declaration status
|
||||
- Severity: missing global, missing declaration, stale declaration, or dynamic/ambiguous binding
|
||||
|
||||
If no issues are found, state that the Python/JS UI binding audit is clear and mention whether any dynamic `_js` strings remain unresolved.
|
||||
|
||||
## Output Expectations
|
||||
|
||||
When this skill is used, return:
|
||||
|
||||
- Total `_js` bindings inspected
|
||||
- Total missing or invalid global registrations
|
||||
- Total missing or stale `ui/globals.d.ts` entries
|
||||
- Summary of any ambiguous `_js` cases that require manual review
|
||||
- A short summary of whether the UI binding contract is intact
|
||||
Reference in New Issue
Block a user