diff --git a/README.md b/README.md index a0e97a2..fe15cf3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # NeuraScreen -![Version](https://img.shields.io/badge/version-1.4.0-blue) +![Version](https://img.shields.io/badge/version-1.5.0-blue) ![PyPI](https://img.shields.io/badge/pip_install-neurascreen-3775A9?logo=pypi&logoColor=white) ![Python](https://img.shields.io/badge/python-3.12+-3776AB?logo=python&logoColor=white) ![Playwright](https://img.shields.io/badge/playwright-1.52-2EAD33?logo=playwright&logoColor=white) @@ -56,7 +56,13 @@ Watch NeuraScreen generate a full demo video from a JSON scenario — preview, T NeuraScreen includes an optional desktop application (PySide6) for editing scenarios, previewing TTS audio and managing configuration visually. -![NeuraScreen GUI](docs/images/gui-screenshot.png) +| Welcome | Editor | Configuration | +|---------|--------|---------------| +| ![Welcome](docs/images/capture_1.png) | ![Editor](docs/images/capture_2.png) | ![Config](docs/images/capture_5.png) | + +| Output Browser | Macro Recorder | JSON + Split View | +|----------------|----------------|-------------------| +| ![Output](docs/images/capture_12.png) | ![Macro](docs/images/capture_16.png) | ![Split](docs/images/capture_4.png) | Install with GUI support: `pip install neurascreen[gui]` then launch with `neurascreen gui`. @@ -405,10 +411,15 @@ neurascreen gui - **Configuration manager** — visual .env editor with 7 tabs (Application, Browser, Screen Capture, TTS, Selectors, Directories), validation, import/export - **TTS & audio preview** — per-provider voice config (`~/.neurascreen/voices.json`), per-step audio preview, pronunciation helper, narration statistics - **Output browser** — browse generated videos with integrated video player (QMediaPlayer), SRT subtitles viewer, YouTube chapters viewer -- **Theme engine** — dark teal (default) and light themes, switchable via Ctrl+T. Create custom themes as JSON files in `~/.neurascreen/themes/` +- **Macro recorder** — record browser interactions from the GUI with live event feed, cleanup options, and direct import into the editor (Ctrl+R) +- **Selector validator** — verify scenario selectors against the real DOM using Playwright headless, with found/not found/multiple status and suggestions (Ctrl+Shift+V) +- **Scenario statistics** — steps count, actions breakdown, narration metrics, estimated duration, unique URLs and selectors +- **Scenario diff** — compare two scenario files side by side with added/removed/modified/unchanged status +- **Autosave & recovery** — periodic autosave every 60s, recovery prompt on startup +- **Theme engine** — dark teal (default) and light themes with full Fusion style support, switchable via Ctrl+T. Create custom themes as JSON files in `~/.neurascreen/themes/` - **Step templates** — insert common patterns (navigation, drag & configure, form fill) from the context menu - **Undo/redo** — full undo history for all editing operations -- **Keyboard shortcuts** — Ctrl+N/O/S, F5-F8 for commands, Ctrl+Shift+O for output browser, Ctrl+Shift+T for TTS panel +- **Keyboard shortcuts** — 20+ shortcuts including Ctrl+N/O/S, F5-F8, Ctrl+R (record), Ctrl+Shift+V (validate selectors) The GUI is optional — the CLI remains the primary interface and works without PySide6. @@ -465,7 +476,9 @@ neurascreen/ │ ├── execution/ # Command execution panel │ ├── config/ # Configuration manager (.env editor) │ ├── tts/ # TTS panel, audio preview, voices, pronunciation -│ └── output/ # Output browser, video player, SRT/chapters viewers +│ ├── output/ # Output browser, video player, SRT/chapters viewers +│ ├── macro/ # Macro recorder dialog, event feed, cleanup +│ └── advanced/ # Selector validator, statistics, diff, autosave ├── tests/ # Unit tests (pytest) ├── examples/ # Example scenarios ├── docs/ # Documentation diff --git a/ROADMAP.md b/ROADMAP.md index 3193e6c..956c57d 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -38,20 +38,23 @@ - [x] Macro recorder: record browser interactions → JSON scenario (#9) - [x] Docker container for headless generation (#13) -## v1.5 — Desktop GUI (in progress) +## v1.5 — Desktop GUI (done) Optional PySide6 desktop interface: `pip install neurascreen[gui]` - [x] GUI foundation: main window, menu bar, toolbar, sidebar, status bar (#25) -- [x] Theme engine: JSON palettes → dynamic QSS, dark teal + light themes (#25) +- [x] Theme engine: JSON palettes → dynamic QSS, dark teal + light themes, Fusion style (#25) - [x] Scenario editor: visual step list, adaptive detail panel, JSON source view (#26) - [x] Execution panel: run commands from GUI with real-time console logs (#27) - [x] Configuration manager: visual .env editor with 7 tabs (#29) - [x] TTS & audio preview: per-provider voice config, per-step preview, pronunciation helper (#28) - [x] Output browser: video list, integrated player, SRT/chapters/YouTube viewers (#30) - [x] App icon and cross-platform process name -- [ ] Macro recorder integration: record browser interactions from GUI (#31) -- [ ] Advanced: selector validator, scenario stats, diff viewer, autosave (#32) +- [x] Macro recorder integration: record from GUI with live event feed, cleanup, editor import (#31) +- [x] Selector validator: verify selectors against real DOM with Playwright headless (#32) +- [x] Scenario statistics: steps, actions, narration metrics, duration, URLs (#32) +- [x] Scenario diff: compare two scenarios side by side (#32) +- [x] Autosave & recovery: periodic save, recovery on startup (#32) ## v1.6 — CLI Enhancements (planned) diff --git a/docs/gui.md b/docs/gui.md index b799ff3..6a8058f 100644 --- a/docs/gui.md +++ b/docs/gui.md @@ -18,6 +18,8 @@ neurascreen gui ## Overview +![Welcome screen](images/capture_1.png) + The GUI has six main areas: | Area | Description | @@ -31,6 +33,8 @@ The GUI has six main areas: ## Editing scenarios +![Scenario editor — Detail view](images/capture_2.png) + ### Create or open - `Ctrl+N` — new empty scenario @@ -70,10 +74,14 @@ Common fields (always visible): Wait after, Narration, Screenshot after step. ### JSON view +![JSON view with syntax highlighting](images/capture_3.png) + Switch to the **JSON** tab to edit the raw JSON directly. Changes sync bidirectionally with the visual editor. Syntax highlighting colors keys, strings, numbers and booleans. The **Split** tab shows both views side by side. +![Split view — Detail + JSON](images/capture_4.png) + ### Templates Right-click in the step list → **Insert template** to add common patterns: @@ -106,6 +114,14 @@ When running from the GUI without the Headless checkbox, the browser always open Open via **Tools > Configuration** or **Ctrl+,**. +| Application | Browser | Screen Capture | TTS | +|-------------|---------|----------------|-----| +| ![App](images/capture_5.png) | ![Browser](images/capture_6.png) | ![Capture](images/capture_7.png) | ![TTS](images/capture_8.png) | + +| Login Selectors | Canvas Selectors | Directories | +|-----------------|------------------|-------------| +| ![Login](images/capture_9.png) | ![Canvas](images/capture_10.png) | ![Dirs](images/capture_11.png) | + The configuration dialog provides a visual editor for all `.env` variables, organized in 7 tabs: | Tab | Settings | @@ -144,6 +160,10 @@ The panel shows: steps narrated / total, word count, estimated reading time (~13 Open via **View > Output Browser** or **Ctrl+Shift+O**. +| Video Player | SRT Subtitles | Chapters | +|-------------|---------------|----------| +| ![Player](images/capture_12.png) | ![SRT](images/capture_13.png) | ![Chapters](images/capture_14.png) | + Browse generated videos in the `output/` directory: - **File table** — name, size, date, SRT/chapters indicators, sortable, searchable @@ -156,6 +176,78 @@ Actions: double-click to play, right-click for context menu (open, copy path, de The file list auto-refreshes when new videos are generated. +## Macro Recorder + +Open via **Tools > Record Macro** or **Ctrl+R**. + +![Macro Recorder](images/capture_16.png) + +Record browser interactions and convert them to a scenario: + +1. Enter the **Start URL** and an optional **Title** +2. Click **Start Recording** — a Chromium browser opens +3. Interact normally — clicks, navigations, scrolls and key presses are captured +4. The **live event feed** shows captured events in real time (color-coded by type) +5. Close the browser or click **Stop Recording** +6. Review the results and apply **cleanup options**: + - **Dedup clicks** — remove rapid double-clicks on the same element + - **Merge navigations** — keep only the last of consecutive navigation events + - **Cap waits** — limit pauses to 5 seconds, remove pauses under 500ms +7. Click **Open in Editor** to load the scenario directly, or **Save as...** to export as JSON + +## Selector Validator + +Open via **Tools > Validate Selectors** or **Ctrl+Shift+V** (requires an open scenario). + +![Selector Validator](images/capture_18.png) + +Verifies that all CSS selectors and click texts in your scenario exist in the real DOM: + +1. Enter the **Base URL** of your application +2. Click **Validate** — Playwright launches headless and checks each selector +3. Results appear in real time with status: + - **found** — selector matches exactly one element + - **not found** — selector not found (with suggestions if a similar selector exists) + - **multiple** — selector matches more than one element + - **skipped** — page could not be loaded +4. **Double-click** a result to jump to that step in the editor + +## Scenario Statistics + +Open via **Tools > Statistics** (requires an open scenario). + +![Scenario Statistics](images/capture_17.png) + +Shows metrics for the current scenario: + +- Total steps and breakdown by action type +- Narrated vs silent steps +- Word count and estimated reading time (~130 words/min) +- Estimated total duration (reading + waits) +- Unique URLs visited +- Unique CSS selectors used + +## Scenario Diff + +Open via **Tools > Compare Scenarios**. + +![Compare Scenarios](images/capture_19.png) + +Compare two JSON scenario files side by side: + +1. Select **File A** and **File B** +2. Click **Compare** +3. A table shows each step with status: unchanged, modified, added, or removed +4. Modified steps list the changed fields (e.g., "selector", "narration") + +## Autosave & Recovery + +NeuraScreen automatically saves your work every 60 seconds to `~/.neurascreen/autosave/`. + +- If you quit without saving, a **recovery dialog** appears on next launch +- Choose **Recover** to reload the autosaved scenario, or **Discard** to start fresh +- Autosave is cleared when you save manually + ## Themes Two built-in themes: @@ -211,6 +303,7 @@ The theme appears in the **View > Theme** menu on next launch. | F7 | Run | | F8 | Full (with TTS) | | Ctrl+R | Record macro | +| Ctrl+Shift+V | Validate selectors | | Ctrl+, | Configuration | | Ctrl+Shift+O | Output browser | | Ctrl+Shift+T | TTS panel | diff --git a/docs/images/capture_17.png b/docs/images/capture_17.png new file mode 100644 index 0000000..deab785 Binary files /dev/null and b/docs/images/capture_17.png differ diff --git a/docs/images/capture_18.png b/docs/images/capture_18.png new file mode 100644 index 0000000..6b4b827 Binary files /dev/null and b/docs/images/capture_18.png differ diff --git a/docs/images/capture_19.png b/docs/images/capture_19.png new file mode 100644 index 0000000..d2bdeb8 Binary files /dev/null and b/docs/images/capture_19.png differ diff --git a/neurascreen/__init__.py b/neurascreen/__init__.py index 1e2e190..0d80da1 100644 --- a/neurascreen/__init__.py +++ b/neurascreen/__init__.py @@ -1,3 +1,3 @@ """NeuraScreen — Automated screen walkthrough video generator.""" -__version__ = "1.4.0" +__version__ = "1.5.0" diff --git a/pyproject.toml b/pyproject.toml index 6a7b4ee..4c305a9 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "neurascreen" -version = "1.4.0" +version = "1.5.0" description = "Automated screen walkthrough video generator using Playwright, JSON scenarios and Text-to-Speech" readme = "README.md" license = "MIT"