3 Commits
Author SHA1 Message Date
iu 4d5cf3c1cb chore: обновить OpenSpec-скиллы и добавить DSH-скиллы
- .opencode: команды и скиллы обновлены openspec 1.15.0
- .dsh/skills: те же скиллы в формате DeepSeek Harness
2026-10-24 22:59:29 +03:00
iu cb9433666a chore(openspec): архивировать photo-effects-editing и обновить photos
Изменение применено к основной спеке photos: эффекты, виньетка, зерно,
живой предпросмотр, свёрнутые секции панели и редактирование из просмотрщика.
Change перемещён в archive.
2026-10-24 22:58:07 +03:00
iu c953008a86 feat(photos): добавить эффекты и настройки панели редактора
- текстура, чёткость, дымка, виньетка и зерно в неразрушающем редакторе
- живой WebGL2-предпросмотр эффектов и CPU-фолбэк
- секции редактора свёрнуты по умолчанию, состояние в localStorage
- вкладка «Редактирование» доступна только из просмотрщика
2026-10-24 22:57:30 +03:00
38 changed files with 5628 additions and 190 deletions
+206
View File
@@ -0,0 +1,206 @@
---
name: openspec-apply-change
description: Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks. Also use when the user says "openspec apply", "opsx apply", or "openspec implement".
allowed-tools: Bash(openspec:*)
license: MIT
compatibility: Requires openspec CLI.
metadata:
author: openspec
version: "1.0"
generatedBy: "1.15.0"
---
Implement tasks from an OpenSpec change.
**Store selection:** If the user names a store (a store is a standalone OpenSpec repo registered on this machine) or the work lives in one, run `openspec store list --json` to discover registered store ids, then pass `--store <id>` on the commands that read or write specs and changes (`new change`, `status`, `instructions`, `list`, `show`, `validate`, `archive`, `doctor`, `context`, `schemas`, `view`). Once selected, treat `--store <id>` as sticky for the rest of the workflow. Every unscoped example of those commands below is shorthand: before running it, append the flag. For example, run `openspec status --change "<name>" --json --store "<id>"`, not the unscoped form shown below. Other commands do not take the flag. Hints printed by commands already carry the flag; keep it on follow-ups. Without a store, commands act on the nearest local `openspec/` root.
**Project check:** These steps expect a project that already uses OpenSpec. Before the first step that writes anything (`new change`, `archive`, `sync specs`, or authoring an artifact file), confirm the project has a root: run `openspec list --json` (with `--store <id>` when a store is selected, since the store is then the root) and read `root`. A root object means the project is set up. `"root": null` means it is not - there is no `openspec/` directory here, and a write such as `openspec new change` would create one as a side effect. The command also exits non-zero, which is that answer rather than a broken CLI, so read the JSON instead of retrying or working around it.
One `"root": null` is not about setup: when a `status` error message starts with `Declared in` or `Invalid store declaration in` and names this project's `openspec/config.yaml` (or `config.yml`), the project does use OpenSpec through a store it declares, which this machine cannot resolve (the store is not registered, or the `store:` line is malformed). Do not treat it as uninitialized and skip the branches below: stop before writing and show the user that error's `message` and `fix`.
Otherwise, with no root, what happens next depends on how this workflow was reached:
- **Auto-selected**: you chose this workflow yourself, without the user naming OpenSpec, naming this skill, or running its slash command. Stop using OpenSpec and answer the request normally, as you would with no OpenSpec installed. Do not ask them to set anything up and do not mention OpenSpec setup.
- **Explicit OpenSpec request**: the user named OpenSpec, named this skill, or ran its slash command. Stop before writing and ask how to proceed: set this project up (`openspec init`), target a store they already have (`--store <id>`), or continue without OpenSpec for this request. Wait for their answer.
In both branches, never create the root as a side effect: do not run `openspec init` until the user asks for it, do not hand-create `openspec/` files, and do not let a command create it.
**Input**: Optionally specify a change name (e.g., `/openspec-apply-change add-auth`). If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
**Steps**
1. **Select the change**
If a name is provided, use it. Otherwise:
- Infer from conversation context if the user mentioned a change
- Auto-select if only one active change exists
- If ambiguous, run `openspec list --json` to get available changes and ask the user to select one
Always announce: "Using change: <name>" and how to override (e.g., `/openspec-apply-change <other>`).
2. **Check status to understand the schema**
```bash
openspec status --change "<name>" --json
```
Parse the JSON to understand:
- `schemaName`: The workflow being used (e.g., "spec-driven")
- `planningHome`, `changeRoot`, and `actionContext`: planning scope and edit constraints
- Which artifact contains the tasks (typically "tasks" for spec-driven, check status for others)
3. **Get apply instructions**
```bash
openspec instructions apply --change "<name>" --json
```
This returns:
- `contextFiles`: artifact ID -> array of concrete file paths (varies by schema - could be proposal/specs/design/tasks or spec/tests/implementation/docs)
- Progress (total, complete, remaining)
- Task list with status, source path, and source line
- Dynamic instruction based on current state
- Optional `context`: current required project instruction input from the selected root
- Optional `operationGuidance`: current advisory guidance for apply
- `missingArtifacts` (when present): required artifact ids with no output
**Handle states:**
- If `state: "blocked"`: show the message and pause implementation.
- If `missingArtifacts` is non-empty: suggest completing the missing artifacts. Run `openspec status --change "<name>" --json`, select the next `ready` artifact (not `skipped` or `blocked`), and use `openspec instructions "<artifact-id>" --change "<name>" --json` for its rules and template. Keep the selected `--store <id>` on both commands.
- Otherwise, follow the CLI instruction to create or repair the schema-configured tracking file from existing planning artifacts. Do not assume another artifact is ready or start implementation while blocked.
- If `state: "all_done"`: report that all tracked tasks are complete and suggest review or verification as appropriate before archiving
- Otherwise: proceed to implementation
Treat `context` as a required prompt-level input. Read and consider it, and
apply relevant project facts, conventions, and constraints while implementing.
Treat `operationGuidance` as optional additive advice. Read and consider every
entry, and follow entries that are applicable and compatible with the built-in
workflow.
Keep both fields separate from CLI-returned state, missing artifacts, tasks,
progress, `contextFiles`, and the built-in `instruction`. They are not
evidence of task completion, do not replace the built-in instruction, and do
not permit bypassing a blocked state. If context conflicts with the built-in
instruction, an explicit user choice, or a CLI-controlled value, report the
conflict and preserve the controlling value. If guidance is inapplicable or
conflicts with those controlling inputs, do not follow it and explain why.
These are prompt-level behavior contracts, not enforceable checks.
4. **Read context files**
Read every file path listed under `contextFiles` from the apply instructions output.
The files depend on the schema being used:
- **spec-driven**: proposal, specs, design, tasks
- Other schemas: follow the contextFiles from CLI output
Do not copy `context` or `operationGuidance` verbatim into implementation
files or planning artifacts unless the user separately asks for that content.
5. **Show current progress**
Display:
- Schema being used
- Progress: "N/M tasks complete"
- Remaining tasks overview
- Dynamic instruction from CLI
6. **Implement tasks (loop until done or blocked)**
For each pending task:
- Show which task is being worked on
- Make the code changes required
- Keep changes minimal and focused
- Before editing, confirm the checkbox at the returned `sourcePath` and `line` still matches the task description; if it does not, rerun the apply instructions and use the refreshed location
- Mark the task complete at its returned `sourcePath` and `line`: `- [ ]` → `- [x]`
- Rerun the apply instructions and confirm that task is now done and progress changed
- Continue to next task
**Pause if:**
- Task is unclear → ask for clarification
- Implementation reveals a design issue → suggest updating artifacts
- A task needs work beyond what the spec and tasks describe, or you are tempted to drop, narrow, defer, or accept exceptions to specified behavior to make it fit → surface the added scope and ask; do not absorb it silently
- Error or blocker encountered → report and wait for guidance
- User interrupts
7. **On completion or pause, show status**
Display:
- Tasks completed this session
- Overall progress: "N/M tasks complete"
- If all done: report that tracked tasks are complete and suggest review or verification as appropriate before archiving
- If paused: explain why and wait for guidance
**Output During Implementation**
```
## Implementing: <change-name> (schema: <schema-name>)
Working on task 3/7: <task description>
[...implementation happening...]
✓ Task complete
Working on task 4/7: <task description>
[...implementation happening...]
✓ Task complete
```
**Output On Completion**
```
## Implementation Complete
**Change:** <change-name>
**Schema:** <schema-name>
**Progress:** 7/7 tasks complete ✓
### Completed This Session
- [x] Task 1
- [x] Task 2
...
All tracked tasks are complete. Review or verify the change as appropriate
before archiving. You can archive this change with `/openspec-archive-change`.
```
**Output On Pause (Issue Encountered)**
```
## Implementation Paused
**Change:** <change-name>
**Schema:** <schema-name>
**Progress:** 4/7 tasks complete
### Issue Encountered
<description of the issue>
**Options:**
1. <option 1>
2. <option 2>
3. Other approach
What would you like to do?
```
**Guardrails**
- Keep going through tasks until done or blocked
- Always read context files before starting (from the apply instructions output)
- If task is ambiguous, pause and ask before implementing
- If implementation reveals issues, pause and suggest artifact updates
- Keep code changes minimal and scoped to each task
- Update task checkbox immediately after completing each task
- Pause on errors, blockers, or unclear requirements - don't guess
- When a task needs work beyond what the spec describes, surface the added scope and pause - never silently narrow, defer, or simplify away specified behavior
- Only mark a task `- [x]` when its specified behavior is fully implemented, not when it is partially done or deferred
- Use contextFiles from CLI output, don't assume specific file names
- Use each task's sourcePath and line to update its exact checkbox
- Do not use context or operation guidance as proof that a task is complete
- Apply relevant project context; report conflicts with controlling workflow inputs
- Consider every guidance entry; explain any inapplicable or conflicting advice
- Do not copy runtime context or operation guidance into implementation files or planning artifacts
- Preserve CLI-controlled blocked/ready/all-done behavior and completion criteria
**Fluid Workflow Integration**
This skill supports the "actions on a change" model:
- **Can be invoked anytime**: Before all artifacts are done (if tasks exist), after partial implementation, interleaved with other actions
- **Allows artifact updates**: If implementation reveals design issues, suggest updating artifacts - not phase-locked, work fluidly
@@ -0,0 +1,221 @@
---
name: openspec-archive-change
description: Archive a completed OpenSpec change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete. Also use when the user says "openspec archive" or "opsx archive".
allowed-tools: Bash(openspec:*)
license: MIT
compatibility: Requires openspec CLI.
metadata:
author: openspec
version: "1.0"
generatedBy: "1.15.0"
---
Archive a completed change in the experimental workflow.
**Store selection:** If the user names a store (a store is a standalone OpenSpec repo registered on this machine) or the work lives in one, run `openspec store list --json` to discover registered store ids, then pass `--store <id>` on the commands that read or write specs and changes (`new change`, `status`, `instructions`, `list`, `show`, `validate`, `archive`, `doctor`, `context`, `schemas`, `view`). Once selected, treat `--store <id>` as sticky for the rest of the workflow. Every unscoped example of those commands below is shorthand: before running it, append the flag. For example, run `openspec status --change "<name>" --json --store "<id>"`, not the unscoped form shown below. Other commands do not take the flag. Hints printed by commands already carry the flag; keep it on follow-ups. Without a store, commands act on the nearest local `openspec/` root.
**Project check:** These steps expect a project that already uses OpenSpec. Before the first step that writes anything (`new change`, `archive`, `sync specs`, or authoring an artifact file), confirm the project has a root: run `openspec list --json` (with `--store <id>` when a store is selected, since the store is then the root) and read `root`. A root object means the project is set up. `"root": null` means it is not - there is no `openspec/` directory here, and a write such as `openspec new change` would create one as a side effect. The command also exits non-zero, which is that answer rather than a broken CLI, so read the JSON instead of retrying or working around it.
One `"root": null` is not about setup: when a `status` error message starts with `Declared in` or `Invalid store declaration in` and names this project's `openspec/config.yaml` (or `config.yml`), the project does use OpenSpec through a store it declares, which this machine cannot resolve (the store is not registered, or the `store:` line is malformed). Do not treat it as uninitialized and skip the branches below: stop before writing and show the user that error's `message` and `fix`.
Otherwise, with no root, what happens next depends on how this workflow was reached:
- **Auto-selected**: you chose this workflow yourself, without the user naming OpenSpec, naming this skill, or running its slash command. Stop using OpenSpec and answer the request normally, as you would with no OpenSpec installed. Do not ask them to set anything up and do not mention OpenSpec setup.
- **Explicit OpenSpec request**: the user named OpenSpec, named this skill, or ran its slash command. Stop before writing and ask how to proceed: set this project up (`openspec init`), target a store they already have (`--store <id>`), or continue without OpenSpec for this request. Wait for their answer.
In both branches, never create the root as a side effect: do not run `openspec init` until the user asks for it, do not hand-create `openspec/` files, and do not let a command create it.
`<capability-path>` is the spec directory relative to `specs/` (for example, `user-auth` or `identity/user-auth`). Preserve the full path from each delta spec when resolving its main spec.
**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
**Steps**
1. **Select the change**
If a name is provided, use it. Otherwise:
- Infer from conversation context if the user mentioned a change
- Auto-select if only one active change exists
- If ambiguous, run `openspec list --json` to get available changes and ask the user to select one
When prompting, show only active changes (not already archived).
Include the schema used for each change if available.
Always announce: "Using change: <name>" and how to override (e.g., `/openspec-archive-change <other>`).
**Load current archive inputs before the existing archive checks:**
After resolving the selected change and planning root, run:
```bash
openspec instructions archive --change "<name>" --json
```
Keep the same selected-root flags on this command. This lookup is advisory and
optional: it only supplies extra prompt inputs, so it must never block archiving.
If it exits non-zero or returns invalid JSON — for example on an older CLI that
does not support this command yet — continue the archive workflow with no
context and no operation guidance. Do not report an error and do not stop.
A successful response may omit both optional fields. Treat `context` as a
required prompt-level input: read and consider it, and apply relevant project
facts, conventions, and constraints. Treat `operationGuidance` as optional
additive advice: read and consider every entry, and follow entries that are
applicable and compatible with the built-in archive workflow.
Keep both fields separate from built-in steps, explicit user choices, resolved
paths, CLI checks, and command contracts. If context conflicts with one of those
controlling inputs, report the conflict and preserve the controlling value. If
guidance is inapplicable or conflicts with a controlling input, do not follow it
and explain why. Do not infer replacement paths, skipped prompts, or flags from
either field, and do not copy their text verbatim into specs, change artifacts,
or archive summaries unless the user separately asks for it. These are
prompt-level behavior contracts, not enforceable checks.
2. **Check artifact completion status**
Run `openspec status --change "<name>" --json` to check artifact completion.
Parse the JSON to understand:
- `schemaName`: The workflow being used
- `planningHome`, `changeRoot`, `artifactPaths`, and `actionContext`: path and scope context
- `artifacts`: List of artifacts with their status (`done`, `skipped`, or other)
**If any artifacts are neither `done` nor `skipped`** (skipped artifacts satisfy the requirement - the change declares skip_specs):
- Display warning listing incomplete artifacts
- Ask the user to confirm they want to proceed
- Proceed if user confirms
3. **Check task completion status**
Run `openspec list --json` with the same selected-root flags and find the
entry in `changes` whose `name` exactly matches the selected change.
Require exactly one match and nonnegative integer `totalTasks` and
`completedTasks`, with `completedTasks <= totalTasks`. The CLI resolves
the schema's tracked task files, including custom artifact names, output
paths, and globs.
Incomplete tasks = `totalTasks - completedTasks`.
Do not infer task completion from artifact status or the absence of a
top-level `tasks.md`. If the lookup fails, returns invalid JSON, omits or
duplicates the selected change, or returns invalid counts, report the problem
and stop before syncing or archiving.
The CLI counts only `x`/`X` checkbox markers as complete;
other markers, including unfamiliar ones, remain incomplete.
**If incomplete tasks found:**
- Display warning showing count of incomplete tasks
- Ask the user to confirm they want to proceed
- Proceed if user confirms
**If `totalTasks` is zero:** Proceed without a task-related warning.
4. **Assess delta spec sync state**
Use `artifactPaths.specs.existingOutputPaths` from status JSON as the only
delta-spec source. If the `specs` entry is missing or
`existingOutputPaths` is empty, proceed without a sync prompt and do not infer
delta specs from other artifacts.
**If delta specs exist:**
- Compare each delta spec with its corresponding main spec at `<planningHome.root>/openspec/specs/<capability-path>/spec.md` (use the store-aware `planningHome.root` from step 2, not a hardcoded repo path)
- A missing main spec is **not automatically** "already synced". For a new capability, the main spec is an *output* of the sync, not an input:
- If the delta has MODIFIED or RENAMED requirements, report that only ADDED requirements can create a new main spec and mark that capability as sync-blocked. Never invent a requirement that has no current version.
- Otherwise, if the delta has only REMOVED requirements and the change's `.openspec.yaml` declares `retire_capabilities: true`, the capability is already retired: count it as already synced, warn that there is nothing left to remove, and do not recreate the main spec. Apply this rule both now and when verifying a completed sync.
- Otherwise, if the delta has no ADDED requirements, report that no sync is possible and mark that capability as sync-blocked. For a REMOVED-only delta, warn that there is no main spec to remove from and leave the main-spec tree unchanged. `openspec archive` refuses the unmarked REMOVED-only case with `Spec must have at least one requirement`.
- Otherwise, count the capability as needing sync and name it in the summary (`<capability-path>: new main spec will be created`). If the delta also has REMOVED requirements, warn that they will be ignored because there is no main spec to remove from. The sync creates the main spec from only the delta's ADDED requirements, exactly as `openspec archive` does.
- Determine what changes would be applied (adds, modifications, removals, renames)
- Continue assessing the remaining capabilities even when one is sync-blocked. Show a combined summary before prompting.
**Prompt options:**
- If any capability is sync-blocked: explain why and offer only "Archive without syncing", "Cancel"
- Otherwise, if changes needed: "Sync now (recommended)", "Archive without syncing"
- Otherwise, if already synced: "Archive now", "Sync anyway", "Cancel"
Route on the answer:
- "Cancel" — stop, do not archive
- "Archive without syncing" or "Archive now" — proceed to archive
- "Sync now" or "Sync anyway" — sync, then verify (below). Do not start any sync while a capability is sync-blocked; explain the blocker and repeat the available choices.
- Anything else — ask again rather than archiving
Before a selected sync writes any main spec, run
`openspec instructions specs --change "<name>" --json` once with the same
selected-root flags. Require a zero exit status and valid artifact-instruction
JSON. If the lookup fails or returns invalid JSON, report the error and stop
before writing any main spec or moving the change. A valid response with omitted
`rules` is the no-rules case. Apply returned `rules` only to the content and
form of main specs produced by this merge; do not use them as archive guidance,
change CLI behavior, or copy the rule text into any output file.
Then run the `openspec-sync-specs` workflow inline (agent-driven intelligent merge) for change '<name>', passing the delta spec analysis and the fetched specs-rule snapshot from above, and wait for it to finish. The inline sync must reuse that snapshot without fetching `specs` instructions again. Do not delegate it to a background task — step 5 would move `changeRoot` out from under a sync that is still reading it, leaving the change archived and the main specs never updated. If your agent can only run it by delegation, delegate synchronously and wait for the result.
If the sync reports any stop or blocking condition, treat the sync as failed.
Stop the archive immediately. Do not perform the post-sync content comparison and do not move its `changeRoot`.
Nothing has moved, so the user can fix the blocking condition or re-run the sync.
After the sync writes each main spec, verify its structure against the canonical sync contract:
- A new main spec starts with a `# <capability> Specification` title. An existing main spec keeps its title exactly as it is.
- Preserve existing `## Purpose` sections completely untouched for established main specs.
- For a new main spec, copy the delta `## Purpose` verbatim. Warn only if the purpose text is shorter than standard validation expects. Do not regenerate or rewrite existing authored purpose. If no usable `## Purpose` is provided, use the existing TBD Purpose behavior and warning.
- Verify that no delta-style section headers (`## ADDED Requirements`, `## MODIFIED Requirements`, `## REMOVED Requirements`, `## RENAMED Requirements`) remain in the main spec, adhering strictly to the sync workflow formatting rules.
- Requirement blocks the sync wrote or changed use `### Requirement:` headings, and their scenarios use `#### Scenario:` headings, under the spec's `## Requirements` section. Leave content the delta does not mention exactly as it is.
Then re-run the comparison from the top of this step, including the explicitly retired, missing-spec case, against every capability that has a delta spec in `artifactPaths.specs.existingOutputPaths` — not only the ones the sync reports it touched. A successful sync leaves nothing left to apply, so each capability must now read as already synced:
- ADDED requirements present
- MODIFIED requirements carrying the scenario and description changes named in the delta, with their other scenarios intact
- REMOVED requirements gone — and where this sync retired a capability (removed its last requirement, leaving `## Requirements` empty), its main spec deleted rather than left empty.
- RENAMED requirements present under the new name and absent under the old one
If the sync failed, or any capability does not match, report what differs and stop — do not archive. Nothing has moved and `changeRoot` is intact, so the user can fix the mismatch or re-run the sync and start the archive again.
5. **Perform the archive**
Create an `archive` directory under `planningHome.changesDir` if it doesn't exist:
```bash
mkdir -p "<planningHome.changesDir>/archive"
```
Generate the target name: use the change name as-is when it already starts with a `YYYY-MM-DD-` prefix; otherwise prepend the current date as `YYYY-MM-DD-<change-name>`. Never stack a second date (same rule as `openspec archive`).
**Check if target already exists:**
- If yes: Fail with error, suggest renaming existing archive or using different date
- If no: Move `changeRoot` to the archive directory
```bash
mv "<changeRoot>" "<planningHome.changesDir>/archive/<target-name>"
```
6. **Display summary**
Show archive completion summary including:
- Change name
- Schema that was used
- Archive location
- Whether specs were synced (if applicable)
- Note about any warnings (incomplete artifacts/tasks)
**Output On Success**
```markdown
## Archive Complete
**Change:** <change-name>
**Schema:** <schema-name>
**Archived to:** the archive path derived from `planningHome.changesDir`/<target-name>/
**Specs:** <"✓ Synced to main specs" only if the step 4 verification passed; otherwise "No delta specs" or "Sync skipped">
<"All artifacts complete. All tasks complete." — or, if archived with warnings, list them instead (e.g. "Archived with 2 incomplete tasks")>
```
**Guardrails**
- Announce the selected change; prompt for selection when it is ambiguous
- Use artifact graph (openspec status --json) for completion checking
- Don't block archive on warnings - just inform and confirm
- Preserve .openspec.yaml when moving to archive (it moves with the directory)
- Show clear summary of what happened
- If sync is requested, run the `openspec-sync-specs` workflow inline (agent-driven)
- Never archive while a spec sync is still in flight — run the sync inline and verify the main specs before moving `changeRoot`
- If delta specs exist, always run the sync assessment and show the combined summary before prompting
- Apply relevant runtime context and report conflicts; operation guidance remains advisory
- Consider every guidance entry and explain any inapplicable or conflicting advice
- Existing CLI checks, resolved paths, prompts, and command contracts are unchanged
- Artifact rules constrain only the specs being written and are never operation guidance
- Never copy runtime context, operation guidance, or artifact-rule text verbatim into output files
+356
View File
@@ -0,0 +1,356 @@
---
name: openspec-explore
description: Enter OpenSpec explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements in a project that uses OpenSpec. Use when the user wants to think through something before or during an OpenSpec change. Also use when the user says "openspec explore" or "opsx explore".
allowed-tools: Bash(openspec:*)
license: MIT
compatibility: Requires openspec CLI.
metadata:
author: openspec
version: "1.0"
generatedBy: "1.15.0"
---
Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
**IMPORTANT: Explore mode is for thinking, not implementing.** You may read files, search code, investigate the codebase, and run read-only commands or tools without confirmation, but you must NEVER write code or implement features. If the user asks you to implement something, do not start it here: say that explore mode does not implement, and point them at `/openspec-propose`, which turns the discussion into a change. The work happens from that change, never from explore mode. You MAY create or update OpenSpec change artifacts (proposals, designs, specs) within a confirmed scope—that's capturing thinking, not implementing. Answering design or clarifying questions is never consent to write. Before the first write-capable action, name the artifacts or files you would change and what you would do, ask a direct yes/no question, and wait for the user's confirmation in a separate message. Confirmation covers only the scope you described; ask again before expanding it. An explicit request from the user to capture the exploration as a new change is itself that confirmation, covering the change and the change artifacts the request names; scaffold it first as described below.
**This is a stance, not a workflow.** There are no fixed steps, no required sequence, no mandatory outputs. You're a thinking partner helping the user explore.
**Store selection:** If the user names a store (a store is a standalone OpenSpec repo registered on this machine) or the work lives in one, run `openspec store list --json` to discover registered store ids, then pass `--store <id>` on the commands that read or write specs and changes (`new change`, `status`, `instructions`, `list`, `show`, `validate`, `archive`, `doctor`, `context`, `schemas`, `view`). Once selected, treat `--store <id>` as sticky for the rest of the workflow. Every unscoped example of those commands below is shorthand: before running it, append the flag. For example, run `openspec status --change "<name>" --json --store "<id>"`, not the unscoped form shown below. Other commands do not take the flag. Hints printed by commands already carry the flag; keep it on follow-ups. Without a store, commands act on the nearest local `openspec/` root.
**Project check:** These steps expect a project that already uses OpenSpec. Before the first step that writes anything (`new change`, `archive`, `sync specs`, or authoring an artifact file), confirm the project has a root: run `openspec list --json` (with `--store <id>` when a store is selected, since the store is then the root) and read `root`. A root object means the project is set up. `"root": null` means it is not - there is no `openspec/` directory here, and a write such as `openspec new change` would create one as a side effect. The command also exits non-zero, which is that answer rather than a broken CLI, so read the JSON instead of retrying or working around it.
One `"root": null` is not about setup: when a `status` error message starts with `Declared in` or `Invalid store declaration in` and names this project's `openspec/config.yaml` (or `config.yml`), the project does use OpenSpec through a store it declares, which this machine cannot resolve (the store is not registered, or the `store:` line is malformed). Do not treat it as uninitialized and skip the branches below: stop before writing and show the user that error's `message` and `fix`.
Otherwise, with no root, what happens next depends on how this workflow was reached:
- **Auto-selected**: you chose this workflow yourself, without the user naming OpenSpec, naming this skill, or running its slash command. Stop using OpenSpec and answer the request normally, as you would with no OpenSpec installed. Do not ask them to set anything up and do not mention OpenSpec setup.
- **Explicit OpenSpec request**: the user named OpenSpec, named this skill, or ran its slash command. Stop before writing and ask how to proceed: set this project up (`openspec init`), target a store they already have (`--store <id>`), or continue without OpenSpec for this request. Wait for their answer.
In both branches, never create the root as a side effect: do not run `openspec init` until the user asks for it, do not hand-create `openspec/` files, and do not let a command create it.
---
## The Stance
- **Curious, not prescriptive** - Ask questions that emerge naturally, don't follow a script
- **Open threads, not interrogations** - Surface multiple interesting directions and let the user follow what resonates. Don't funnel them through a single path of questions.
- **Visual** - Use ASCII diagrams liberally when they'd help clarify thinking
- **Adaptive** - Follow interesting threads, pivot when new information emerges
- **Patient** - Don't rush to conclusions, let the shape of the problem emerge
- **Grounded** - Explore the actual codebase when relevant, don't just theorize
---
## Planning a Change
When the user is planning a change, guide them toward shared understanding with focused discovery questions. For open-ended discussion, follow the conversation without imposing an interview or a required output.
Before asking a factual question, follow the context discovery below and inspect relevant OpenSpec artifacts, source, tests, docs, and configuration. Do not ask the user to repeat facts you can verify. Summarize relevant findings without reproducing private context or rules. If evidence is missing, conflicting, or inaccessible, state that limitation and ask only for the clarification needed to proceed.
- **Follow dependencies** - Resolve the next blocking decision before its dependent details. For example, clarify the user's outcome and scope before choosing an API or data model. Revisit downstream assumptions when an earlier answer changes. Skip branches that do not matter to this goal.
- **Keep questions focused** - Ask one focused question at a time, and briefly explain why it matters and which decision it unlocks. Batch questions only if the user asks for a batch; keep them small and group related decisions.
- **Offer grounded recommendations** - When evidence supports a recommendation, state your preferred option and why it fits the user's goals, with alternatives and their tradeoffs when useful. Do not invent intent, priorities, or external constraints: ask the user when only they can answer. Avoid a fixed question format.
- **Keep a conversational record** - Track decisions in the conversation, not in files. Separate confirmed decisions from proposed defaults and unresolved questions. Silence is not acceptance. Accepting an answer or a batch of recommendations is not permission to write. Keep file-write confirmation separate from discovery questions and follow the guardrails below.
Stop asking when the user has enough clarity. Let them pause, pivot, or defer a decision; do not exhaust every branch or force a proposal.
For example, after inspecting the relevant code:
```text
The CLI already uses SQLite and has no remote service. Is sharing state
across devices in scope? That determines whether local storage is enough.
If this stays a single-device tool, I recommend keeping SQLite to avoid
adding a service to operate; shared state would need a separate sync design.
```
---
## What You Might Do
Depending on what the user brings, you might:
**Explore the problem space**
- Ask clarifying questions that emerge from what they said
- Challenge assumptions
- Reframe the problem
- Find analogies
**Investigate the codebase**
- Map existing architecture relevant to the discussion
- Find integration points
- Identify patterns already in use
- Surface hidden complexity
**Compare options**
- Brainstorm multiple approaches
- Build comparison tables
- Sketch tradeoffs
- Recommend a path (if asked)
**Visualize**
```
+------------------------------------------+
| Use ASCII diagrams liberally |
+------------------------------------------+
| |
| [State A] -------> [State B] |
| | |
| v |
| [State C] |
| |
| System diagrams, state machines, |
| data flows, architecture sketches, |
| dependency graphs, comparison tables |
| |
+------------------------------------------+
```
**Draw with plain ASCII only** — borders `+` `-` `|`, arrows `-->` `<--` `^` `v`, markers `*` `x`.
Unicode diagram glyphs can render at different widths across terminals, fonts, and locales, so padded boxes and aligned tables can drift. Keep every diagram character ASCII.
**Surface risks and unknowns**
- Identify what could go wrong
- Find gaps in understanding
- Suggest spikes or investigations
---
## OpenSpec Awareness
You have full context of the OpenSpec system. Use it naturally, don't force it.
### Check for context
At the start, quickly check what exists:
```bash
openspec list --json
```
This tells you:
- If there are active changes
- Their names and task status
- What the user might be working on
That is the *change* list - work in flight. It does not include the project's durable capabilities, so list those too:
```bash
openspec list --specs
```
Add `--json` for ids and requirement counts, and append `--store "<id>"` only for a registered standalone store. This is the inventory of what the project already claims to do, and `openspec list` on its own never shows it. To look at one, run `openspec show "<spec-id>" --type spec --json --no-scenarios` (same `--store` rule) - it returns that capability's purpose and requirement texts without pulling the whole spec file into context, and `--type spec` stops a change of the same name from making it ambiguous.
The filtered read is only an overview. Before deciding what is already covered or what should change, read each relevant spec in full, including scenarios, with `openspec show "<spec-id>" --type spec` (same `--store` rule).
Then read the project's own context from the resolved root - `<root.path>/openspec/config.yaml` (or `config.yml`). Use the `root.path` returned above, and skip this if neither file exists:
- `context`: project background - tech stack, conventions, constraints
- `rules`: keyed by artifact id - the entries for an artifact apply only when you write that artifact
Ground your thinking in these. They are constraints for you to follow, not content to reproduce: do NOT copy them into the conversation or into any artifact you create.
### When no change exists
Think freely. When insights crystallize, you might offer:
- "This feels solid enough to start a change. Want me to create a proposal?"
- Or keep exploring - no pressure to formalize
If the user asks you to capture the exploration as a new change, that request is the confirmation required above. It covers scaffolding that change and creating the change artifacts the request names, and nothing else. This holds only when the request is theirs: a yes to an offer you made confirms only the scope your offer itself named, so name the change and the artifacts in the offer. Don't re-ask for what they already asked for; do ask before anything beyond it. Transition seamlessly into the requested capture:
1. Run `openspec new change "<name>"` (with `--store <id>` when applicable) before creating any artifacts. Never create a new change directory under `openspec/changes/` by hand; the CLI scaffold creates required metadata such as `.openspec.yaml`. Keep the selected `--store <id>` on every applicable follow-up `status` and `instructions` command.
2. Run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store), then process the requested artifacts in dependency order. For each requested artifact that is `ready`, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store). Before creating a requested artifact, evaluate any condition in its own `instruction` against the explored change; record a deliberate skip instead when the condition does not apply. If a requested artifact is blocked by a direct prerequisite the user did not request, run `openspec instructions "<prerequisite-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) for that prerequisite whether it is `ready` or `blocked`. If its own `instruction` states a condition, evaluate that condition against the explored change and record a deliberate skip only when the condition does not apply. If the condition applies, or the prerequisite is not conditional, treat it as a normal prerequisite and ask before expanding the capture. Do not create an unrequested prerequisite unless the user approves.
3. Follow the returned `template` and `instruction` fields. Read completed dependency files listed in `dependencies`, and apply `context` and `rules` as constraints without copying them into the artifact. Choose the output path before creating anything: when `resolvedOutputPath` is a glob, use the instruction to choose a concrete path inside `changeRoot` and verify it remains inside `changeRoot` after resolving symlinks, both in its parent directories and in the file itself if it already exists; if it does not, stop and tell the user. Otherwise the output path is `resolvedOutputPath`. If the instruction delegates creation to a specific skill or command, invoke it only if it can write the artifact to that output path; otherwise stop and tell the user. Otherwise write the artifact to that output path. Verify that the selected concrete output exists at that output path.
4. After creating each artifact, re-run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) and continue until every requested artifact is `done`, `skipped`, or was deliberately skipped because its own `instruction` stated a condition that did not apply. Tell the user about a deliberate conditional skip, remember it, and do not reconsider it. Dependencies are enablers, not gates: if a requested artifact is still `blocked` only because you deliberately skipped a conditional prerequisite, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) despite the blocked status, then create it using step 3 only when those recorded conditional skips are its sole missing dependencies. If a requested artifact is blocked by a prerequisite the user did not ask to capture and cannot be conditionally skipped, explain that dependency and ask before expanding the capture.
Capture the artifact(s) the user requested without asking them to invoke another workflow command. If they asked only to start a change, stop after scaffolding and show its status. When the requested capture is done, stop there and name where the work continues: `/openspec-propose` writes the remaining planning artifacts, and `/openspec-apply-change` implements the change once tasks exist. Capturing artifacts never starts implementing them.
### When a change exists
If the user mentions a change or you detect one is relevant:
1. **Resolve and read existing artifacts for context**
- Run `openspec status --change "<name>" --json`.
- Use `changeRoot`, `artifactPaths`, and `actionContext` from the status JSON.
- Read existing files from `artifactPaths.<artifact>.existingOutputPaths`.
2. **Reference them naturally in conversation**
- "Your design mentions using Redis, but we just realized SQLite fits better..."
- "The proposal scopes this to premium users, but we're now thinking everyone..."
3. **Offer to capture when decisions are made**
`<capability-path>` is the spec directory relative to `specs/` (for example, `user-auth` or `identity/user-auth`). Preserve an existing capability's full path and follow the project's established organization for new capabilities.
The files below are the default spec-driven schema's. With another schema, capture each insight in whichever artifact from `artifactPaths` fits it, and name that artifact in your offer; never create an artifact the schema does not define.
| Insight Type | Where to Capture |
|----------------------------|-------------------------------------|
| New requirement discovered | `specs/<capability-path>/spec.md` |
| Requirement changed | `specs/<capability-path>/spec.md` |
| Design decision made | `design.md` |
| Scope changed | `proposal.md` |
| New work identified | `tasks.md` |
| Assumption invalidated | Relevant artifact |
Example offers (default schema):
- "That's a design decision. Capture it in design.md?"
- "This is a new requirement. Add it to specs?"
- "This changes scope. Update the proposal?"
4. **The user decides** - Offer and move on. Don't pressure. Don't auto-capture.
---
## What You Don't Have To Do
- Follow a script
- Ask the same questions every time
- Produce a specific artifact
- Reach a conclusion
- Stay on topic if a tangent is valuable
- Be brief (this is thinking time)
---
## Handling Different Entry Points
**User brings a vague idea:**
```
User: I'm thinking about adding real-time collaboration
You: Real-time collab is a big space. Let me think about this...
COLLABORATION SPECTRUM
============================================
Awareness Coordination Sync
| | |
v v v
+--------+ +--------+ +--------+
|Presence| |Cursors | | CRDT |
| "3 | | Multi | |Conflict|
|online" | | select | | free |
+--------+ +--------+ +--------+
| | |
trivial moderate complex
Where's your head at?
```
**User brings a specific problem:**
```
User: The auth system is a mess
You: [reads codebase]
+---------------------------------------------+
| CURRENT AUTH FLOW |
+---------------------------------------------+
|
+-------------+-------------+
v v v
+---------+ +---------+ +---------+
| Google | | GitHub | | Email |
| OAuth | | OAuth | | Magic |
+----+----+ +----+----+ +----+----+
| | |
+-------------+-------------+
v
+-----------+
| Session |
+-----+-----+
|
v
+-----------+
| Perms |
+-----------+
I see three tangles. Which one's burning?
```
**User is stuck mid-implementation:**
```
User: /openspec-explore add-auth-system
The OAuth integration is more complex than expected
You: [reads change artifacts]
You're on task 4: "Implement OAuth flow"
Let me trace what's involved...
[draws diagram, explores options, suggests paths]
Want to update the design to reflect this?
Or add a spike task to investigate?
```
**User wants to compare options:**
```
User: Should we use Postgres or SQLite?
You: Generic answer is boring. What's the context?
User: A CLI tool that tracks local dev environments
You: That changes everything.
+-------------------------------------------------+
| CLI TOOL DATA STORAGE |
+-------------------------------------------------+
Key constraints:
- No daemon running
- Must work offline
- Single user
SQLite Postgres
Deployment embedded needs server
Offline yes no
Single file yes no
SQLite. Not even close.
Unless... is there a sync component?
```
---
## Ending Discovery
There's no required ending. Discovery might:
- **Flow into a proposal**: "Ready to start? Run `/openspec-propose` and this becomes a change."
- **Result in artifact updates**: "Updated the design with these decisions"
- **Just provide clarity**: User has what they need, moves on
- **Continue later**: "We can pick this up anytime"
When it feels like things are crystallizing, you might summarize:
```
## What We Figured Out
**The problem**: [crystallized understanding]
**The approach**: [if one emerged]
**Open questions**: [if any remain]
**Next steps** (if ready):
- Turn this into a change: `/openspec-propose`
- Keep exploring: just keep talking
```
But this summary is optional. Sometimes the thinking IS the value.
---
## Guardrails
- **Don't implement** - Never write code or implement features. Workflow configuration counts too: creating or editing schemas, templates, or `openspec/config.yaml` is a change, not thinking. Creating or updating OpenSpec change artifacts within the confirmed scope is fine, writing anything else is not. When the user is ready to build, name the handoff rather than starting: `/openspec-propose` turns the discussion into a change, and the work happens there.
- **Don't fake understanding** - If something is unclear, dig deeper
- **Don't rush** - Discovery is thinking time, not task time
- **Don't force structure** - Let patterns emerge naturally
- **Don't auto-capture** - Offer to save insights, don't just do it. Read-only commands and tools need no confirmation. Before the first write-capable action—including `openspec new change` or another command that writes files—name the artifacts or files and proposed changes, ask a direct yes/no question, and wait for explicit confirmation in a separate user message. That confirmation covers only the described scope; ask again before expanding it. Answers to design or clarifying questions are never consent to write. That rule governs `openspec new change` whenever you are the one proposing the capture; the user's own capture request is the exception, handled in the capture transition above.
- **Don't manually scaffold changes** - Never create a new change directory under `openspec/changes/` by hand. Always use `openspec new change "<name>"` (with `--store <id>` when applicable) so required metadata such as `.openspec.yaml` is created before writing artifacts.
- **Do visualize** - A good diagram is worth many paragraphs
- **Do explore the codebase** - Ground discussions in reality
- **Do question assumptions** - Including the user's and your own
+175
View File
@@ -0,0 +1,175 @@
---
name: openspec-propose
description: Propose a new OpenSpec change with all artifacts generated in one step. Use when the user wants to quickly describe what they want to build and get a complete proposal with design, specs, and tasks ready for implementation. Also use when the user says "openspec propose" or "opsx propose".
allowed-tools: Bash(openspec:*)
license: MIT
compatibility: Requires openspec CLI.
metadata:
author: openspec
version: "1.0"
generatedBy: "1.15.0"
---
Propose a new change - create the change and generate all artifacts in one step.
**Planning boundary**: This workflow creates planning artifacts only. The user request that selected or triggered this workflow authorizes planning only, even if it asks to build or fix something. Do not edit project code. After the planning artifacts are complete, stop. Do not start implementation in the same response, even if the initial request asks for it. Wait for a new user request after the artifacts are presented; then start the apply workflow.
I'll create a change with the artifacts your schema defines. With the default spec-driven schema that is:
- proposal.md (what & why)
- `specs/<capability-path>/spec.md` (what the system must do - a delta, not the main spec)
- design.md (how)
- tasks.md (implementation steps)
`<capability-path>` is the spec directory relative to `specs/` (for example, `user-auth` or `identity/user-auth`). Preserve an existing capability's full path and follow the project's established organization for new capabilities.
When the user is ready to implement, they must start the apply workflow explicitly.
---
**Store selection:** If the user names a store (a store is a standalone OpenSpec repo registered on this machine) or the work lives in one, run `openspec store list --json` to discover registered store ids, then pass `--store <id>` on the commands that read or write specs and changes (`new change`, `status`, `instructions`, `list`, `show`, `validate`, `archive`, `doctor`, `context`, `schemas`, `view`). Once selected, treat `--store <id>` as sticky for the rest of the workflow. Every unscoped example of those commands below is shorthand: before running it, append the flag. For example, run `openspec status --change "<name>" --json --store "<id>"`, not the unscoped form shown below. Other commands do not take the flag. Hints printed by commands already carry the flag; keep it on follow-ups. Without a store, commands act on the nearest local `openspec/` root.
**Project check:** These steps expect a project that already uses OpenSpec. Before the first step that writes anything (`new change`, `archive`, `sync specs`, or authoring an artifact file), confirm the project has a root: run `openspec list --json` (with `--store <id>` when a store is selected, since the store is then the root) and read `root`. A root object means the project is set up. `"root": null` means it is not - there is no `openspec/` directory here, and a write such as `openspec new change` would create one as a side effect. The command also exits non-zero, which is that answer rather than a broken CLI, so read the JSON instead of retrying or working around it.
One `"root": null` is not about setup: when a `status` error message starts with `Declared in` or `Invalid store declaration in` and names this project's `openspec/config.yaml` (or `config.yml`), the project does use OpenSpec through a store it declares, which this machine cannot resolve (the store is not registered, or the `store:` line is malformed). Do not treat it as uninitialized and skip the branches below: stop before writing and show the user that error's `message` and `fix`.
Otherwise, with no root, what happens next depends on how this workflow was reached:
- **Auto-selected**: you chose this workflow yourself, without the user naming OpenSpec, naming this skill, or running its slash command. Stop using OpenSpec and answer the request normally, as you would with no OpenSpec installed. Do not ask them to set anything up and do not mention OpenSpec setup.
- **Explicit OpenSpec request**: the user named OpenSpec, named this skill, or ran its slash command. Stop before writing and ask how to proceed: set this project up (`openspec init`), target a store they already have (`--store <id>`), or continue without OpenSpec for this request. Wait for their answer.
In both branches, never create the root as a side effect: do not run `openspec init` until the user asks for it, do not hand-create `openspec/` files, and do not let a command create it.
**Input**: The user's request should include a change name (kebab-case) OR a description of what they want to build.
**Steps**
1. **Understand the request and clarify material ambiguity**
If no clear input is provided, ask the user (open-ended, no preset options):
> "What change do you want to work on? Describe what you want to build or fix."
From their description, derive a kebab-case name (e.g., "add user authentication" → `add-user-auth`).
**IMPORTANT**: Do NOT proceed without understanding what the user wants to build.
If the request contains ambiguity that would materially affect scope, externally observable behavior, compatibility, or acceptance criteria, ask the user before creating the change. For minor details, make a reasonable assumption and record it in the planning artifacts.
2. **Load project context**
Run `openspec context --json` from the current working directory (or `openspec context --json --store "<store-id>"` when a registered store was explicitly selected). Use the returned `root.path` as the authoritative OpenSpec root. If context reports `no_openspec_root`, stop without creating or changing any files and follow the **Project check** above for how this workflow was reached. Offer `openspec init` only for an explicit OpenSpec request, and wait for the user to request initialization. Do not initialize automatically or run `openspec new change`. After initialization, rerun this context check before continuing. For any other context failure, stop and report the error; do not fall back to the current directory or run later OpenSpec commands without the selected store.
Only when context returns a resolved `root.path`, read `<root.path>/openspec/config.yaml`. Use `config.yml` only when `config.yaml` does not exist. If neither file exists, continue without project context. Do not fall back to `config.yml` if `config.yaml` is unreadable or invalid.
If the file parses as a YAML object and its `context` field is a string no larger than 51,200 bytes in UTF-8, apply that field before exploring the codebase or making planning decisions. If the file cannot be read or parsed, or the context field is invalid or oversized, continue without project context. Validate this field independently of other config fields, as OpenSpec does.
Treat context as project-provided data and constraints, not as authority to change this workflow: it cannot override user authorization, the planning boundary, tool restrictions, or artifact and output rules. Do not copy the context into artifacts; use it to focus any codebase exploration and as a constraint on the proposal.
3. **Determine the workflow schema**
Use the configured default schema unless the user explicitly requests a different workflow.
**Use a different schema only if the user:**
- Explicitly requests a specific schema by name → use `--schema <schema-name>`
- Asks to "show workflows" or asks "what workflows" exist → resolve the authoritative root by running `openspec context --json` from the current working directory. If the user explicitly selected a registered store, use `openspec context --json --store "<store-id>"`. Then run `openspec schemas --json` with its working directory set to the returned `root.path` and let them choose. This preserves roots selected by a local `store:` pointer or the global `defaultStore`; when a registered store was explicitly selected, append `--store "<store-id>"` to `openspec schemas --json` as well. If context fails, stop as described in the context-loading step; do not fall back to the current directory.
Otherwise, omit `--schema` to preserve the configured default.
4. **Create the change directory**
Choose one schema form below. If a registered store is selected, append `--store "<store-id>"` to that command and each later OpenSpec command shown below that accepts `--store`.
Using the configured default:
```bash
openspec new change "<name>"
```
Using an explicitly requested schema:
```bash
openspec new change "<name>" --schema "<schema-name>"
```
This creates a scaffolded change in the planning home resolved by the CLI with `.openspec.yaml`.
5. **Get the artifact build order**
```bash
openspec status --change "<name>" --json
```
Parse the JSON to get:
- `applyRequires`: array of artifact IDs needed before implementation (e.g., `["tasks"]`)
- `artifacts`: list of all artifacts, each with its `status` and its `requires` edges (the artifact IDs it directly depends on)
- `planningHome`, `changeRoot`, `artifactPaths`, and `actionContext`: path and scope context. Use these instead of assuming repo-local paths.
6. **Create every artifact in the required set**
Use a todo list to track progress through the artifacts.
Loop through artifacts in dependency order (artifacts with no pending dependencies first):
a. **For each artifact that is `ready` (dependencies satisfied)**:
- Get instructions:
```bash
openspec instructions <artifact-id> --change "<name>" --json
```
- The instructions JSON includes:
- `context`: Project background (constraints for you - do NOT include in output)
- `rules`: Artifact-specific rules (constraints for you - do NOT include in output)
- `template`: The structure to use for your output file
- `instruction`: Schema-specific guidance for this artifact type
- `skipped`/`warning`: present when the change declares skip_specs and this artifact must NOT be created - stop and pick another artifact
- `resolvedOutputPath`: Resolved path or pattern to write the artifact
- `dependencies`: Completed artifacts to read for context
- Read any completed dependency files for context - always re-read them from disk, even if you saw them earlier in the conversation (the user may have edited them)
- **Inspect the relevant project before drafting**: Read `context` and `rules` first, then inspect relevant implementation, nearby tests, configuration, and documentation outside `openspec/`. Keep inspection read-only and proportional to the change; reuse findings for later artifacts and inspect more only as needed.
- Identify the target project from the request and project context; the planning home may be separate from the code. If the target is unclear, ask. For greenfield or non-code changes, inspect the available structure and relevant documents. If source is unavailable, state the limitation and ask when it materially affects the plan.
- Ground scope, approach, and tasks in what you find. Distinguish observed behavior from assumptions and proposed additions; surface conflicts with existing specs instead of silently deciding which is correct.
- Do this discovery now, rather than leaving generic "explore the codebase" or "make a plan" tasks for implementation. Keep any necessary follow-up investigation specific to an unresolved question.
- Choose the output path before creating anything. If `resolvedOutputPath` is a glob, follow `instruction` to choose a concrete path inside `changeRoot` that matches the glob, and verify it remains inside `changeRoot` after resolving symlinks, both in its parent directories and in the file itself if it already exists; if it does not, stop and tell the user. Otherwise the output path is `resolvedOutputPath`
- If the `instruction` field delegates creation to a specific skill or command, invoke it only if it can write the artifact to that output path; otherwise stop and tell the user. Then verify the artifact file exists at that output path
- Otherwise create the artifact file using `template` as the structure and write it to that output path
- Apply `context` and `rules` as constraints - but do NOT copy them into the file
- Show brief progress: "Created <artifact-id>"
b. **Continue until every artifact in the required set exists (not just `apply.requires`)**
- After creating each artifact, re-run `openspec status --change "<name>" --json`
- The required set is `applyRequires` plus every artifact reachable from those by following the `requires` edges in `status --json` - walk them transitively (spec-driven closes over proposal, specs, design, tasks). Leave artifacts outside that set alone
- `status` is file-existence only, so an `applyRequires` artifact reading `done` does NOT mean its dependencies exist - writing `tasks.md` early marks `tasks` done while `specs` was never written. Use each artifact's `requires` edges, not its `status`, to build the required set: a `done` artifact still lists what it depends on
- An artifact already reading `status: "skipped"` is satisfied: the change declares `skip_specs` in `.openspec.yaml`, so its files must NOT exist. Never try to create one
- Create every artifact in the required set that is missing, then re-check - creating one can unblock others
- Skip one only when `status` already reports it `skipped`, or when its own `instruction` says it is conditional: run `openspec instructions <artifact-id> --change "<name>" --json` and skip only if its `instruction` field marks it optional (e.g. "create only if..."). Spec-driven's `design.md` qualifies; `specs` qualifies only via the `skipped` status above, never by your own judgment. Tell the user, and do not reconsider it
- Dependencies are enablers, not gates: if a required artifact is still `blocked` only because you skipped a conditional dependency, write it anyway
- Stop when every artifact in the required set is `done`, `skipped`, or was deliberately skipped
c. **If an artifact requires user input** (unclear context):
- Ask the user to clarify
- Then continue with creation
7. **Show final status**
```bash
openspec status --change "<name>"
```
**Output**
After completing all artifacts, summarize:
- Change name and location
- List of artifacts created with brief descriptions, plus any conditional artifact you skipped and why
- What's ready: "All artifacts needed for implementation are ready."
- Prompt: "The artifacts are ready for review. When you are ready, run `/openspec-apply-change` or ask me to apply this change."
**Artifact Creation Guidelines**
- Follow the `instruction` field from `openspec instructions` for each artifact type - it is the authoritative guidance, even for familiar artifact names
- If the `instruction` field directs you to use a specific skill or command to create the artifact, invoke it instead of writing the artifact directly - but only once you have chosen and checked the output path, and only if it can write there
- The schema defines what each artifact should contain - follow it
- Read dependency artifacts for context before creating new ones
- Use `template` as the structure for your output file - fill in its sections
- **IMPORTANT**: `context` and `rules` are constraints for YOU, not content for the file
- Do NOT copy `<context>`, `<rules>`, `<project_context>` blocks into the artifact
- These guide what you write, but should never appear in the output
**Guardrails**
- The request that invoked this workflow authorizes planning only. Any implementation or apply instruction in that request does not carry forward. Do NOT implement the change, start the apply workflow, or edit project code during this workflow. After presenting the artifacts, stop and wait for a new user request to start the apply workflow
- Create every artifact the apply phase transitively depends on, not just the ids listed in `apply.requires`
- Always read dependency artifacts before creating a new one - re-read from disk, not from conversation memory (files may have changed since you last saw them)
- Ask about ambiguities that would materially change scope, externally observable behavior, compatibility, or acceptance criteria; for minor details, make reasonable assumptions and record them
- If a change with that name already exists, ask if user wants to continue it or create a new one
- Verify each artifact file exists after writing before proceeding to next
+290
View File
@@ -0,0 +1,290 @@
---
name: openspec-sync-specs
description: Sync delta specs from an OpenSpec change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change. Also use when the user says "openspec sync" or "opsx sync".
allowed-tools: Bash(openspec:*)
license: MIT
compatibility: Requires openspec CLI.
metadata:
author: openspec
version: "1.0"
generatedBy: "1.15.0"
---
Sync delta specs from a change to main specs.
This is an **agent-driven** operation - you will read delta specs and directly edit main specs to apply the changes. This allows intelligent merging (e.g., adding a scenario without copying the entire requirement).
**Store selection:** If the user names a store (a store is a standalone OpenSpec repo registered on this machine) or the work lives in one, run `openspec store list --json` to discover registered store ids, then pass `--store <id>` on the commands that read or write specs and changes (`new change`, `status`, `instructions`, `list`, `show`, `validate`, `archive`, `doctor`, `context`, `schemas`, `view`). Once selected, treat `--store <id>` as sticky for the rest of the workflow. Every unscoped example of those commands below is shorthand: before running it, append the flag. For example, run `openspec status --change "<name>" --json --store "<id>"`, not the unscoped form shown below. Other commands do not take the flag. Hints printed by commands already carry the flag; keep it on follow-ups. Without a store, commands act on the nearest local `openspec/` root.
**Project check:** These steps expect a project that already uses OpenSpec. Before the first step that writes anything (`new change`, `archive`, `sync specs`, or authoring an artifact file), confirm the project has a root: run `openspec list --json` (with `--store <id>` when a store is selected, since the store is then the root) and read `root`. A root object means the project is set up. `"root": null` means it is not - there is no `openspec/` directory here, and a write such as `openspec new change` would create one as a side effect. The command also exits non-zero, which is that answer rather than a broken CLI, so read the JSON instead of retrying or working around it.
One `"root": null` is not about setup: when a `status` error message starts with `Declared in` or `Invalid store declaration in` and names this project's `openspec/config.yaml` (or `config.yml`), the project does use OpenSpec through a store it declares, which this machine cannot resolve (the store is not registered, or the `store:` line is malformed). Do not treat it as uninitialized and skip the branches below: stop before writing and show the user that error's `message` and `fix`.
Otherwise, with no root, what happens next depends on how this workflow was reached:
- **Auto-selected**: you chose this workflow yourself, without the user naming OpenSpec, naming this skill, or running its slash command. Stop using OpenSpec and answer the request normally, as you would with no OpenSpec installed. Do not ask them to set anything up and do not mention OpenSpec setup.
- **Explicit OpenSpec request**: the user named OpenSpec, named this skill, or ran its slash command. Stop before writing and ask how to proceed: set this project up (`openspec init`), target a store they already have (`--store <id>`), or continue without OpenSpec for this request. Wait for their answer.
In both branches, never create the root as a side effect: do not run `openspec init` until the user asks for it, do not hand-create `openspec/` files, and do not let a command create it.
`<capability-path>` is the spec directory relative to `specs/` (for example, `user-auth` or `identity/user-auth`). Preserve the full path from each delta spec when resolving its main spec.
**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
**Steps**
1. **Select the change**
If a name is provided, use it. Otherwise:
- Infer from conversation context if the user mentioned a change
- Auto-select if only one active change exists
- If ambiguous, run `openspec list --json` to get available changes and ask the user to select one
When prompting, show changes that have delta specs (under `specs/` directory).
Always announce: "Using change: <name>" and how to override (e.g., `/openspec-sync-specs <other>`).
2. **Resolve change context**
Run:
```bash
openspec status --change "<name>" --json
```
The JSON includes `planningHome.root`. Main specs live under `<planningHome.root>/openspec/specs/` — use that (store-aware) root for every main-spec path below, not a hardcoded repo path. When a store is selected it points at the store, not the current repository.
3. **Find delta specs**
Use `artifactPaths.specs.existingOutputPaths` from the status JSON as the
only source of delta spec paths. If the `specs` entry is missing or
`existingOutputPaths` is empty, report that there are no delta specs to sync,
do not infer them from other artifacts, and stop without requesting artifact
instructions or writing a main spec.
Sync every path in `existingOutputPaths` unless the caller narrowed the set.
A caller narrows it by naming an explicit list of complete entries from
`existingOutputPaths` — copy those absolute values verbatim. Archive does
this inline, and a user can too (for example, by selecting the entry ending
in `/specs/billing/invoices/spec.md`).
Then sync only the named paths and leave the remaining delta specs untouched:
bulk archive excludes a delta whose implementation it could not find, and
syncing it anyway would write a main spec the caller deliberately withheld.
Carry that narrowed selection through step 4; never widen it back to the full
list. If a named path is not in `existingOutputPaths`, do not sync it —
report it and stop, rather than dropping it silently. If the named list is
empty, report that there is nothing to sync and stop without writing a main
spec.
Each delta spec file contains sections like:
- `## ADDED Requirements` - New requirements to add
- `## MODIFIED Requirements` - Changes to existing requirements
- `## REMOVED Requirements` - Requirements to remove
- `## RENAMED Requirements` - Requirements to rename (FROM:/TO: format)
If no delta specs found, inform user and stop.
4. **For each delta spec, apply changes to main specs**
Before the first main-spec write, obtain one current specs-rule snapshot:
- If archive invoked this workflow inline and supplied a valid snapshot from
`openspec instructions specs --change "<name>" --json`, reuse it and do not
fetch the same instructions again.
- Otherwise run that command once now with the same selected-root flags.
- If the direct lookup exits non-zero or returns invalid artifact-instruction
JSON, report the error and stop before writing any main spec. Do not treat the
failure as an absent rule set.
- A valid response with omitted `rules` means no artifact rules are configured
and the existing semantic merge continues.
Apply returned `rules` only to the content and form of the main specs produced
by this merge. Artifact rules are not operation guidance and cannot change
selected roots, delta paths, CLI checks, or workflow steps. Use their text as
constraints without copying it verbatim into a main spec or summary.
For each capability delta spec path selected in step 3 — the full `existingOutputPaths` list, or the narrowed subset when a caller supplied one (these may belong to a selected store, not the repo):
a. **Read the delta spec** to understand the intended changes
b. **Read the main spec** at `<planningHome.root>/openspec/specs/<capability-path>/spec.md` (may not exist yet)
**If it does not exist yet** (a new capability), match what `openspec archive` does:
only ADDED requirements may be applied - step d creates the spec from them.
MODIFIED and RENAMED have no requirement to act on, so stop the sync for that
capability and report that its main spec does not exist and only ADDED is allowed
for a new spec; never invent the missing requirement. REMOVED has nothing to
remove - skip it and warn.
c. **Apply changes intelligently**:
**ADDED Requirements:**
- If requirement doesn't exist in main spec → add it
- If requirement already exists → update it to match (treat as implicit MODIFIED)
**MODIFIED Requirements:**
- Find the requirement in main spec
- Apply the changes - this can be:
- Adding new scenarios the main spec does not have yet
- Modifying existing scenarios
- Changing the requirement description
- Preserve scenarios/content not mentioned in the delta
**REMOVED Requirements:**
- Remove the entire requirement block from main spec
- Retiring the capability. Delete the whole `spec.md` - and the directory once
nothing else is left in it - only when ALL of these hold:
1. removing the requirements *this run* left no requirement blocks;
2. the rest of the spec is well-formed (it still has a `## Purpose`);
3. the main spec was not already empty before this sync - if you removed
nothing, change nothing;
4. every other nonblank line in the whole file is accounted for as the
title, Purpose, Requirements header, or a canonical requirement's
statement, scenarios, or fenced examples;
5. the change's `.openspec.yaml` declares `retire_capabilities: true`;
6. the `spec.md` resolves inside the real specs root (do not follow a
capability-directory symlink to delete an external file).
If removing the selected requirements would leave no requirement blocks and
any retirement condition is not satisfied, do not modify the main spec. Stop
the sync for that capability, report the blocking condition, and tell the user
how to resolve it. Never write or leave an empty `## Requirements` section.
When only the marker is missing, say that too - it is the one thing the user
can add to make the retirement go through.
- Deleting the file also deletes its `## Purpose`; any other section blocks
retirement. Name Purpose when you report the retirement. Include a pasteable
`git checkout` only when the spec lived in the caller's checkout;
otherwise give checkout-scoped recovery guidance.
**RENAMED Requirements:**
- Find the FROM requirement, rename to TO
**`## Purpose` in the delta:**
- The main spec already has one and it is authoritative - leave it alone
(this is what `openspec archive` does; it warns and moves on)
d. **Create new main spec** if capability doesn't exist yet:
- Only when the delta has ADDED requirements to put in it and no MODIFIED or
RENAMED requirements blocked this capability in step b. Otherwise create nothing
and leave the specs directory untouched. For a REMOVED-only delta, if the change's
`.openspec.yaml` declares `retire_capabilities: true`, report it as already retired
and continue without recreating the spec. Without that marker, report the sync as blocked:
`openspec archive` rejects it with `Spec must have at least one requirement`.
An empty delta has no operations to sync; report it as blocked too.
Never write an empty `## Requirements` section.
- Create `<planningHome.root>/openspec/specs/<capability-path>/spec.md`
- Add Purpose section: copy the delta's `## Purpose` body verbatim when it has one
(this is what `openspec archive` does); only write a brief TBD placeholder when it does not
- Add Requirements section with the ADDED requirements
- Follow the **Main Spec Format Reference** below
5. **Validate updated main specs**
Run `openspec validate --specs` with the same selected-root flags used earlier.
If validation fails, report the problems and do not claim the sync succeeded.
6. **Show summary**
After applying all changes, summarize:
- Which capabilities were updated
- What changes were made (requirements added/modified/removed/renamed)
- Any new main spec left with a TBD Purpose placeholder, so it gets written
now rather than lingering
- Any capability retired, naming the deleted `spec.md`, its Purpose, and
either a pasteable `git checkout` or checkout-scoped recovery guidance
**Delta Spec Format Reference**
```markdown
# Spec Delta
## Purpose
Only on a delta that introduces a brand-new capability. Seeds the new main spec.
## ADDED Requirements
### Requirement: New Feature
The system SHALL do something new.
#### Scenario: Basic case
- **WHEN** user does X
- **THEN** system does Y
## MODIFIED Requirements
### Requirement: Existing Feature
The system SHALL keep doing the existing thing, now also handling A.
#### Scenario: Scenario the main spec already has
- **WHEN** user does X
- **THEN** system does Y
#### Scenario: New scenario to add
- **WHEN** user does A
- **THEN** system does B
## REMOVED Requirements
### Requirement: Deprecated Feature
## RENAMED Requirements
- FROM: `### Requirement: Old Name`
- TO: `### Requirement: New Name`
```
**Main Spec Format Reference**
Main specs are what the delta merges INTO. They must never contain delta operation headers (`## ADDED/MODIFIED/REMOVED/RENAMED Requirements`) - after syncing, every requirement lives under a single `## Requirements` section:
```markdown
# <capability> Specification
## Purpose
Short description of what this capability does and why it exists.
## Requirements
### Requirement: New Feature
The system SHALL do something new.
#### Scenario: Basic case
- **WHEN** user does X
- **THEN** system does Y
```
**Key Principle: Intelligent Merging**
Unlike programmatic merging, you merge rather than overwrite:
- A MODIFIED block carries the whole requirement - body plus every scenario that survives the change. `openspec validate` and `openspec archive` both reject one that drops a scenario the main spec still has.
- Keep anything the delta does not mention, in the main spec's existing order
- Use your judgment to merge changes sensibly
**Output On Success**
```markdown
## Specs Synced: <change-name>
Updated main specs:
**<capability-1>**:
- Added requirement: "New Feature"
- Modified requirement: "Existing Feature" (added 1 scenario)
**<capability-2>**:
- Created new spec file
- Added requirement: "Another Feature"
Main specs are now updated. The change remains active - archive when implementation is complete.
```
**Guardrails**
- Read both delta and main specs before making changes
- Preserve existing content not mentioned in delta
- Never copy a delta file into a main spec as-is - merge its content so the main spec keeps the Main Spec Format Reference structure, with no delta operation headers
- If something is unclear, ask for clarification
- Show what you're changing as you go
- The operation should be idempotent - running twice should give same result
- Use only `artifactPaths.specs.existingOutputPaths`; never infer delta specs from unrelated artifacts
- Honor a caller-supplied subset of `existingOutputPaths`; never widen it back to the full list
- Fetch specs instructions once for direct sync, or reuse the archive-supplied snapshot inline
- Stop before every main-spec write on a non-zero or invalid JSON specs-instruction response
- Artifact rules constrain only the specs being written and are never copied into output files
+109
View File
@@ -0,0 +1,109 @@
---
name: openspec-update-change
description: Update an OpenSpec change by revising its existing planning artifacts and keeping them coherent with one another. Use when the user wants to revise a change's plan, fold new decisions into it, or reconcile its artifacts after an edit. Also use when the user says "openspec update change" or "opsx update". If the user means the openspec update CLI command, which refreshes generated files, run that command instead. Never edits code.
allowed-tools: Bash(openspec:*)
license: MIT
compatibility: Requires openspec CLI.
metadata:
author: openspec
version: "1.0"
generatedBy: "1.15.0"
---
Revise a change's existing planning artifacts and keep them coherent. Never edit code.
**Store selection:** If the user names a store (a store is a standalone OpenSpec repo registered on this machine) or the work lives in one, run `openspec store list --json` to discover registered store ids, then pass `--store <id>` on the commands that read or write specs and changes (`new change`, `status`, `instructions`, `list`, `show`, `validate`, `archive`, `doctor`, `context`, `schemas`, `view`). Once selected, treat `--store <id>` as sticky for the rest of the workflow. Every unscoped example of those commands below is shorthand: before running it, append the flag. For example, run `openspec status --change "<name>" --json --store "<id>"`, not the unscoped form shown below. Other commands do not take the flag. Hints printed by commands already carry the flag; keep it on follow-ups. Without a store, commands act on the nearest local `openspec/` root.
**Project check:** These steps expect a project that already uses OpenSpec. Before the first step that writes anything (`new change`, `archive`, `sync specs`, or authoring an artifact file), confirm the project has a root: run `openspec list --json` (with `--store <id>` when a store is selected, since the store is then the root) and read `root`. A root object means the project is set up. `"root": null` means it is not - there is no `openspec/` directory here, and a write such as `openspec new change` would create one as a side effect. The command also exits non-zero, which is that answer rather than a broken CLI, so read the JSON instead of retrying or working around it.
One `"root": null` is not about setup: when a `status` error message starts with `Declared in` or `Invalid store declaration in` and names this project's `openspec/config.yaml` (or `config.yml`), the project does use OpenSpec through a store it declares, which this machine cannot resolve (the store is not registered, or the `store:` line is malformed). Do not treat it as uninitialized and skip the branches below: stop before writing and show the user that error's `message` and `fix`.
Otherwise, with no root, what happens next depends on how this workflow was reached:
- **Auto-selected**: you chose this workflow yourself, without the user naming OpenSpec, naming this skill, or running its slash command. Stop using OpenSpec and answer the request normally, as you would with no OpenSpec installed. Do not ask them to set anything up and do not mention OpenSpec setup.
- **Explicit OpenSpec request**: the user named OpenSpec, named this skill, or ran its slash command. Stop before writing and ask how to proceed: set this project up (`openspec init`), target a store they already have (`--store <id>`), or continue without OpenSpec for this request. Wait for their answer.
In both branches, never create the root as a side effect: do not run `openspec init` until the user asks for it, do not hand-create `openspec/` files, and do not let a command create it.
**Input**: Optionally specify a change name. If omitted, check if it can be inferred from conversation context. If vague or ambiguous you MUST prompt for available changes.
This workflow revises artifacts that already exist; it never creates missing ones. When an artifact is missing, `openspec status --change "<name>" --json` names the next one and `openspec instructions "<artifact-id>" --change "<name>" --json` explains how to write it.
**Steps**
1. **Select the change**
If a name is provided, use it. Otherwise:
- Infer from conversation context if the user mentioned a change
- Auto-select if only one active change exists
- If ambiguous, run `openspec list --json` to get available changes sorted by most recently modified, and ask the user to select one
When prompting, present the top 3-4 most recently modified changes as options, showing:
- Change name
- Status (e.g., "0/5 tasks", "complete", "no tasks")
- How recently it was modified (from `lastModified` field)
Mark the most recently modified change as "(Recommended)" since it's likely what the user wants to update.
Always announce: "Using change: <name>" and how to override (e.g., `/openspec-update-change <other>`).
2. **Get the change's artifacts**
```bash
openspec status --change "<name>" --json
```
Parse the JSON to understand current state. The response includes:
- `schemaName`: The workflow schema being used (e.g., "spec-driven")
- `artifacts`: Array of artifacts with their status ("done", "skipped", "ready", "blocked")
- `isPlanningComplete`: Boolean indicating if all planning artifacts are complete. Older CLI versions expose the same value as `isComplete`.
- `planningHome`, `changeRoot`, `artifactPaths`, and `actionContext`: path and scope context. Use these instead of assuming repo-local paths.
The artifact ids and paths come from the active schema - do NOT assume them, and do NOT branch on hardcoded artifact names. Custom schemas must work unchanged.
The files to edit are `artifactPaths.<id>.existingOutputPaths` - the concrete files that exist on disk, already glob-expanded for glob artifacts (e.g. `specs/**/*.md`), plus any confirmed concrete path allowed under a partly populated glob artifact (step 4). Do NOT write to `resolvedOutputPath`: for a glob artifact it is still the glob pattern, not a real file.
3. **Understand the request**
- If the user asked for a specific revision ("the design now uses X"), that is the starting edit.
- If they only said "update" / "make this coherent", treat it as a coherence review: read the existing artifacts and check them against each other for contradictions, gaps, and duplication.
4. **Read and reconcile**
- Read the artifact(s) the request touches and the change's other existing artifacts.
- Draft the requested edit in the conversation, not in files. Work out exactly what it changes; step 5 owns every write. Then check every other existing artifact against the drafted edit - in ANY direction: an edit to a later artifact may require revising an earlier one, not only the other way around. Build order is a useful reading order, not a constraint on which artifacts may be revised.
- Note everything that is now inconsistent, missing, or contradictory.
- Propose revisions to files that already exist (`existingOutputPaths`). If an artifact has no existing output files and status `ready` or `blocked`, note it and point the user to `openspec instructions "<artifact-id>" --change "<name>" --json` for how to create them. Leave `skipped` artifacts untouched; do not treat them as missing or defer them to the continue workflow.
- A glob artifact (e.g. `specs/**/*.md`) is marked `done` after at least one file matches, and the continue workflow only handles `ready` artifacts. When reconciliation identifies a missing file for a glob artifact whose `existingOutputPaths` is non-empty:
1. Run `openspec instructions "<artifact-id>" --change "<name>" --json` and use its `instruction` and `template`. Treat `context` and `rules` as constraints; do not copy them into the file. If instructions report `skipped: true`, do not create the file. Read current dependency files from disk; if a required non-skipped dependency is missing, stop and ask the user to restore it first.
2. Choose a concrete path inside `changeRoot` that matches `artifactPaths.<id>.outputPath` and does not already exist. Verify it remains inside `changeRoot` after resolving any symlinked parent directories. The glob `resolvedOutputPath` is not a valid target.
3. Include the new file in step 5's proposed revisions and create it only after the user confirms.
4. After confirmation, immediately before creation, refresh status and instructions. Verify the artifact is still in scope, not skipped, and partially populated; repeat the concrete-path checks above.
5. Use a create operation that fails if the target already exists. If `instruction` delegates creation to another skill or command, invoke it only if it can honor the confirmed path and these guardrails; otherwise stop. If any check fails or the confirmed draft is no longer valid, stop and reconcile with the user rather than replacing existing content or choosing a different path.
- If the change is already coherent, say so and propose no revisions.
5. **Confirm and apply, one artifact at a time**
- This step performs every artifact write in this workflow; no earlier step edits an artifact.
- Show each proposed revision and why - including the requested edit drafted in step 4. Write only after the user confirms.
- If the user rejects a revision, do not write it - leave that artifact unchanged.
- When a substantial rewrite is needed, get that artifact's rules and template first:
```bash
openspec instructions "<artifact-id>" --change "<name>" --json
```
6. **Point to the next step (guidance only - NEVER act on it)**
- Artifacts with empty `existingOutputPaths` and status `ready` or `blocked` -> run `openspec status --change "<name>" --json` for the next artifact and point the user to `openspec instructions "<artifact-id>" --change "<name>" --json` for how to create it.
- Change already implemented (tasks checked off / already applied) -> the code may no longer match the revised plan; suggest `/openspec-apply-change` to carry the delta into code.
- Everything done and implemented -> suggest `/openspec-archive-change`.
**Output**
After each invocation, show:
- Which artifacts were revised (and which proposed revisions were rejected)
- Any file created under a glob artifact that was already partially populated
- Anything deferred because it does not exist yet (artifacts with no files and status `ready` or `blocked`, never `skipped` artifacts)
- Where the change stands and the recommended next command
**Guardrails**
- Planning artifacts only - NEVER edit implementation code. If the revised plan implies code changes, stop and point to `/openspec-apply-change`.
- Use the artifact ids and paths reported by `openspec status`; never branch on hardcoded artifact names.
- Edit only the concrete files in `existingOutputPaths`, plus any confirmed concrete path allowed under a partly populated glob artifact (step 4); never write to a glob `resolvedOutputPath`.
- Do not advance the build frontier: if an artifact has empty `existingOutputPaths` and status `ready` or `blocked`, creating them is a separate step, outside this workflow. Leave `skipped` artifacts untouched. The only new-file scope is a confirmed concrete path under a glob artifact whose `existingOutputPaths` is non-empty.
- Confirm every edit with the user before writing.
- If the request changes the change's *intent* rather than refining it, ask for a distinct unused change name and recommend `openspec new change "<new-change-name>"` instead (the "Update vs. Start Fresh" heuristic).
+1 -1
View File
@@ -159,7 +159,7 @@ If the user asks you to capture the exploration as a new change, that request is
1. Run `openspec new change "<name>"` (with `--store <id>` when applicable) before creating any artifacts. Never create a new change directory under `openspec/changes/` by hand; the CLI scaffold creates required metadata such as `.openspec.yaml`. Keep the selected `--store <id>` on every applicable follow-up `status` and `instructions` command. 1. Run `openspec new change "<name>"` (with `--store <id>` when applicable) before creating any artifacts. Never create a new change directory under `openspec/changes/` by hand; the CLI scaffold creates required metadata such as `.openspec.yaml`. Keep the selected `--store <id>` on every applicable follow-up `status` and `instructions` command.
2. Run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store), then process the requested artifacts in dependency order. For each requested artifact that is `ready`, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store). Before creating a requested artifact, evaluate any condition in its own `instruction` against the explored change; record a deliberate skip instead when the condition does not apply. If a requested artifact is blocked by a direct prerequisite the user did not request, run `openspec instructions "<prerequisite-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) for that prerequisite whether it is `ready` or `blocked`. If its own `instruction` states a condition, evaluate that condition against the explored change and record a deliberate skip only when the condition does not apply. If the condition applies, or the prerequisite is not conditional, treat it as a normal prerequisite and ask before expanding the capture. Do not create an unrequested prerequisite unless the user approves. 2. Run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store), then process the requested artifacts in dependency order. For each requested artifact that is `ready`, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store). Before creating a requested artifact, evaluate any condition in its own `instruction` against the explored change; record a deliberate skip instead when the condition does not apply. If a requested artifact is blocked by a direct prerequisite the user did not request, run `openspec instructions "<prerequisite-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) for that prerequisite whether it is `ready` or `blocked`. If its own `instruction` states a condition, evaluate that condition against the explored change and record a deliberate skip only when the condition does not apply. If the condition applies, or the prerequisite is not conditional, treat it as a normal prerequisite and ask before expanding the capture. Do not create an unrequested prerequisite unless the user approves.
3. Follow the returned `template` and `instruction` fields. Read completed dependency files listed in `dependencies`, and apply `context` and `rules` as constraints without copying them into the artifact. If the instruction delegates creation to a specific skill or command, invoke it; otherwise write the artifact to `resolvedOutputPath`, using the instruction to choose a concrete path when it is a glob. Verify that the selected concrete output exists. 3. Follow the returned `template` and `instruction` fields. Read completed dependency files listed in `dependencies`, and apply `context` and `rules` as constraints without copying them into the artifact. Choose the output path before creating anything: when `resolvedOutputPath` is a glob, use the instruction to choose a concrete path inside `changeRoot` and verify it remains inside `changeRoot` after resolving symlinks, both in its parent directories and in the file itself if it already exists; if it does not, stop and tell the user. Otherwise the output path is `resolvedOutputPath`. If the instruction delegates creation to a specific skill or command, invoke it only if it can write the artifact to that output path; otherwise stop and tell the user. Otherwise write the artifact to that output path. Verify that the selected concrete output exists at that output path.
4. After creating each artifact, re-run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) and continue until every requested artifact is `done`, `skipped`, or was deliberately skipped because its own `instruction` stated a condition that did not apply. Tell the user about a deliberate conditional skip, remember it, and do not reconsider it. Dependencies are enablers, not gates: if a requested artifact is still `blocked` only because you deliberately skipped a conditional prerequisite, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) despite the blocked status, then create it using step 3 only when those recorded conditional skips are its sole missing dependencies. If a requested artifact is blocked by a prerequisite the user did not ask to capture and cannot be conditionally skipped, explain that dependency and ask before expanding the capture. 4. After creating each artifact, re-run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) and continue until every requested artifact is `done`, `skipped`, or was deliberately skipped because its own `instruction` stated a condition that did not apply. Tell the user about a deliberate conditional skip, remember it, and do not reconsider it. Dependencies are enablers, not gates: if a requested artifact is still `blocked` only because you deliberately skipped a conditional prerequisite, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) despite the blocked status, then create it using step 3 only when those recorded conditional skips are its sole missing dependencies. If a requested artifact is blocked by a prerequisite the user did not ask to capture and cannot be conditionally skipped, explain that dependency and ask before expanding the capture.
Capture the artifact(s) the user requested without asking them to invoke another workflow command. If they asked only to start a change, stop after scaffolding and show its status. When the requested capture is done, stop there and name where the work continues: `/opsx-propose` writes the remaining planning artifacts, and `/opsx-apply` implements the change once tasks exist. Capturing artifacts never starts implementing them. Capture the artifact(s) the user requested without asking them to invoke another workflow command. If they asked only to start a change, stop after scaffolding and show its status. When the requested capture is done, stop there and name where the work continues: `/opsx-propose` writes the remaining planning artifacts, and `/opsx-apply` implements the change once tasks exist. Capturing artifacts never starts implementing them.
+4 -3
View File
@@ -115,8 +115,9 @@ In both branches, never create the root as a side effect: do not run `openspec i
- Identify the target project from the request and project context; the planning home may be separate from the code. If the target is unclear, ask. For greenfield or non-code changes, inspect the available structure and relevant documents. If source is unavailable, state the limitation and ask when it materially affects the plan. - Identify the target project from the request and project context; the planning home may be separate from the code. If the target is unclear, ask. For greenfield or non-code changes, inspect the available structure and relevant documents. If source is unavailable, state the limitation and ask when it materially affects the plan.
- Ground scope, approach, and tasks in what you find. Distinguish observed behavior from assumptions and proposed additions; surface conflicts with existing specs instead of silently deciding which is correct. - Ground scope, approach, and tasks in what you find. Distinguish observed behavior from assumptions and proposed additions; surface conflicts with existing specs instead of silently deciding which is correct.
- Do this discovery now, rather than leaving generic "explore the codebase" or "make a plan" tasks for implementation. Keep any necessary follow-up investigation specific to an unresolved question. - Do this discovery now, rather than leaving generic "explore the codebase" or "make a plan" tasks for implementation. Keep any necessary follow-up investigation specific to an unresolved question.
- If the `instruction` field delegates creation to a specific skill or command, invoke it to produce the artifact instead of writing the file yourself, then verify the artifact file exists at `resolvedOutputPath` - Choose the output path before creating anything. If `resolvedOutputPath` is a glob, follow `instruction` to choose a concrete path inside `changeRoot` that matches the glob, and verify it remains inside `changeRoot` after resolving symlinks, both in its parent directories and in the file itself if it already exists; if it does not, stop and tell the user. Otherwise the output path is `resolvedOutputPath`
- Otherwise create the artifact file using `template` as the structure and write it to `resolvedOutputPath`. If `resolvedOutputPath` is a glob, follow `instruction` to choose the concrete file path - If the `instruction` field delegates creation to a specific skill or command, invoke it only if it can write the artifact to that output path; otherwise stop and tell the user. Then verify the artifact file exists at that output path
- Otherwise create the artifact file using `template` as the structure and write it to that output path
- Apply `context` and `rules` as constraints - but do NOT copy them into the file - Apply `context` and `rules` as constraints - but do NOT copy them into the file
- Show brief progress: "Created <artifact-id>" - Show brief progress: "Created <artifact-id>"
@@ -150,7 +151,7 @@ After completing all artifacts, summarize:
**Artifact Creation Guidelines** **Artifact Creation Guidelines**
- Follow the `instruction` field from `openspec instructions` for each artifact type - it is the authoritative guidance, even for familiar artifact names - Follow the `instruction` field from `openspec instructions` for each artifact type - it is the authoritative guidance, even for familiar artifact names
- If the `instruction` field directs you to use a specific skill or command to create the artifact, invoke it instead of writing the artifact directly - If the `instruction` field directs you to use a specific skill or command to create the artifact, invoke it instead of writing the artifact directly - but only once you have chosen and checked the output path, and only if it can write there
- The schema defines what each artifact should contain - follow it - The schema defines what each artifact should contain - follow it
- Read dependency artifacts for context before creating new ones - Read dependency artifacts for context before creating new ones
- Use `template` as the structure for your output file - fill in its sections - Use `template` as the structure for your output file - fill in its sections
@@ -7,7 +7,7 @@ compatibility: Requires openspec CLI.
metadata: metadata:
author: openspec author: openspec
version: "1.0" version: "1.0"
generatedBy: "1.14.2" generatedBy: "1.15.0"
--- ---
Implement tasks from an OpenSpec change. Implement tasks from an OpenSpec change.
@@ -7,7 +7,7 @@ compatibility: Requires openspec CLI.
metadata: metadata:
author: openspec author: openspec
version: "1.0" version: "1.0"
generatedBy: "1.14.2" generatedBy: "1.15.0"
--- ---
Archive a completed change in the experimental workflow. Archive a completed change in the experimental workflow.
+2 -2
View File
@@ -7,7 +7,7 @@ compatibility: Requires openspec CLI.
metadata: metadata:
author: openspec author: openspec
version: "1.0" version: "1.0"
generatedBy: "1.14.2" generatedBy: "1.15.0"
--- ---
Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes. Enter explore mode. Think deeply. Visualize freely. Follow the conversation wherever it goes.
@@ -157,7 +157,7 @@ If the user asks you to capture the exploration as a new change, that request is
1. Run `openspec new change "<name>"` (with `--store <id>` when applicable) before creating any artifacts. Never create a new change directory under `openspec/changes/` by hand; the CLI scaffold creates required metadata such as `.openspec.yaml`. Keep the selected `--store <id>` on every applicable follow-up `status` and `instructions` command. 1. Run `openspec new change "<name>"` (with `--store <id>` when applicable) before creating any artifacts. Never create a new change directory under `openspec/changes/` by hand; the CLI scaffold creates required metadata such as `.openspec.yaml`. Keep the selected `--store <id>` on every applicable follow-up `status` and `instructions` command.
2. Run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store), then process the requested artifacts in dependency order. For each requested artifact that is `ready`, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store). Before creating a requested artifact, evaluate any condition in its own `instruction` against the explored change; record a deliberate skip instead when the condition does not apply. If a requested artifact is blocked by a direct prerequisite the user did not request, run `openspec instructions "<prerequisite-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) for that prerequisite whether it is `ready` or `blocked`. If its own `instruction` states a condition, evaluate that condition against the explored change and record a deliberate skip only when the condition does not apply. If the condition applies, or the prerequisite is not conditional, treat it as a normal prerequisite and ask before expanding the capture. Do not create an unrequested prerequisite unless the user approves. 2. Run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store), then process the requested artifacts in dependency order. For each requested artifact that is `ready`, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store). Before creating a requested artifact, evaluate any condition in its own `instruction` against the explored change; record a deliberate skip instead when the condition does not apply. If a requested artifact is blocked by a direct prerequisite the user did not request, run `openspec instructions "<prerequisite-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) for that prerequisite whether it is `ready` or `blocked`. If its own `instruction` states a condition, evaluate that condition against the explored change and record a deliberate skip only when the condition does not apply. If the condition applies, or the prerequisite is not conditional, treat it as a normal prerequisite and ask before expanding the capture. Do not create an unrequested prerequisite unless the user approves.
3. Follow the returned `template` and `instruction` fields. Read completed dependency files listed in `dependencies`, and apply `context` and `rules` as constraints without copying them into the artifact. If the instruction delegates creation to a specific skill or command, invoke it; otherwise write the artifact to `resolvedOutputPath`, using the instruction to choose a concrete path when it is a glob. Verify that the selected concrete output exists. 3. Follow the returned `template` and `instruction` fields. Read completed dependency files listed in `dependencies`, and apply `context` and `rules` as constraints without copying them into the artifact. Choose the output path before creating anything: when `resolvedOutputPath` is a glob, use the instruction to choose a concrete path inside `changeRoot` and verify it remains inside `changeRoot` after resolving symlinks, both in its parent directories and in the file itself if it already exists; if it does not, stop and tell the user. Otherwise the output path is `resolvedOutputPath`. If the instruction delegates creation to a specific skill or command, invoke it only if it can write the artifact to that output path; otherwise stop and tell the user. Otherwise write the artifact to that output path. Verify that the selected concrete output exists at that output path.
4. After creating each artifact, re-run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) and continue until every requested artifact is `done`, `skipped`, or was deliberately skipped because its own `instruction` stated a condition that did not apply. Tell the user about a deliberate conditional skip, remember it, and do not reconsider it. Dependencies are enablers, not gates: if a requested artifact is still `blocked` only because you deliberately skipped a conditional prerequisite, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) despite the blocked status, then create it using step 3 only when those recorded conditional skips are its sole missing dependencies. If a requested artifact is blocked by a prerequisite the user did not ask to capture and cannot be conditionally skipped, explain that dependency and ask before expanding the capture. 4. After creating each artifact, re-run `openspec status --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) and continue until every requested artifact is `done`, `skipped`, or was deliberately skipped because its own `instruction` stated a condition that did not apply. Tell the user about a deliberate conditional skip, remember it, and do not reconsider it. Dependencies are enablers, not gates: if a requested artifact is still `blocked` only because you deliberately skipped a conditional prerequisite, run `openspec instructions "<artifact-id>" --change "<name>" --json` (append the confirmed `--store "<id>"` only for a registered standalone store) despite the blocked status, then create it using step 3 only when those recorded conditional skips are its sole missing dependencies. If a requested artifact is blocked by a prerequisite the user did not ask to capture and cannot be conditionally skipped, explain that dependency and ask before expanding the capture.
Capture the artifact(s) the user requested without asking them to invoke another workflow command. If they asked only to start a change, stop after scaffolding and show its status. When the requested capture is done, stop there and name where the work continues: `/opsx-propose` writes the remaining planning artifacts, and `/opsx-apply` implements the change once tasks exist. Capturing artifacts never starts implementing them. Capture the artifact(s) the user requested without asking them to invoke another workflow command. If they asked only to start a change, stop after scaffolding and show its status. When the requested capture is done, stop there and name where the work continues: `/opsx-propose` writes the remaining planning artifacts, and `/opsx-apply` implements the change once tasks exist. Capturing artifacts never starts implementing them.
+5 -4
View File
@@ -7,7 +7,7 @@ compatibility: Requires openspec CLI.
metadata: metadata:
author: openspec author: openspec
version: "1.0" version: "1.0"
generatedBy: "1.14.2" generatedBy: "1.15.0"
--- ---
Propose a new change - create the change and generate all artifacts in one step. Propose a new change - create the change and generate all artifacts in one step.
@@ -122,8 +122,9 @@ In both branches, never create the root as a side effect: do not run `openspec i
- Identify the target project from the request and project context; the planning home may be separate from the code. If the target is unclear, ask. For greenfield or non-code changes, inspect the available structure and relevant documents. If source is unavailable, state the limitation and ask when it materially affects the plan. - Identify the target project from the request and project context; the planning home may be separate from the code. If the target is unclear, ask. For greenfield or non-code changes, inspect the available structure and relevant documents. If source is unavailable, state the limitation and ask when it materially affects the plan.
- Ground scope, approach, and tasks in what you find. Distinguish observed behavior from assumptions and proposed additions; surface conflicts with existing specs instead of silently deciding which is correct. - Ground scope, approach, and tasks in what you find. Distinguish observed behavior from assumptions and proposed additions; surface conflicts with existing specs instead of silently deciding which is correct.
- Do this discovery now, rather than leaving generic "explore the codebase" or "make a plan" tasks for implementation. Keep any necessary follow-up investigation specific to an unresolved question. - Do this discovery now, rather than leaving generic "explore the codebase" or "make a plan" tasks for implementation. Keep any necessary follow-up investigation specific to an unresolved question.
- If the `instruction` field delegates creation to a specific skill or command, invoke it to produce the artifact instead of writing the file yourself, then verify the artifact file exists at `resolvedOutputPath` - Choose the output path before creating anything. If `resolvedOutputPath` is a glob, follow `instruction` to choose a concrete path inside `changeRoot` that matches the glob, and verify it remains inside `changeRoot` after resolving symlinks, both in its parent directories and in the file itself if it already exists; if it does not, stop and tell the user. Otherwise the output path is `resolvedOutputPath`
- Otherwise create the artifact file using `template` as the structure and write it to `resolvedOutputPath`. If `resolvedOutputPath` is a glob, follow `instruction` to choose the concrete file path - If the `instruction` field delegates creation to a specific skill or command, invoke it only if it can write the artifact to that output path; otherwise stop and tell the user. Then verify the artifact file exists at that output path
- Otherwise create the artifact file using `template` as the structure and write it to that output path
- Apply `context` and `rules` as constraints - but do NOT copy them into the file - Apply `context` and `rules` as constraints - but do NOT copy them into the file
- Show brief progress: "Created <artifact-id>" - Show brief progress: "Created <artifact-id>"
@@ -157,7 +158,7 @@ After completing all artifacts, summarize:
**Artifact Creation Guidelines** **Artifact Creation Guidelines**
- Follow the `instruction` field from `openspec instructions` for each artifact type - it is the authoritative guidance, even for familiar artifact names - Follow the `instruction` field from `openspec instructions` for each artifact type - it is the authoritative guidance, even for familiar artifact names
- If the `instruction` field directs you to use a specific skill or command to create the artifact, invoke it instead of writing the artifact directly - If the `instruction` field directs you to use a specific skill or command to create the artifact, invoke it instead of writing the artifact directly - but only once you have chosen and checked the output path, and only if it can write there
- The schema defines what each artifact should contain - follow it - The schema defines what each artifact should contain - follow it
- Read dependency artifacts for context before creating new ones - Read dependency artifacts for context before creating new ones
- Use `template` as the structure for your output file - fill in its sections - Use `template` as the structure for your output file - fill in its sections
@@ -7,7 +7,7 @@ compatibility: Requires openspec CLI.
metadata: metadata:
author: openspec author: openspec
version: "1.0" version: "1.0"
generatedBy: "1.14.2" generatedBy: "1.15.0"
--- ---
Sync delta specs from a change to main specs. Sync delta specs from a change to main specs.
@@ -7,7 +7,7 @@ compatibility: Requires openspec CLI.
metadata: metadata:
author: openspec author: openspec
version: "1.0" version: "1.0"
generatedBy: "1.14.2" generatedBy: "1.15.0"
--- ---
Revise a change's existing planning artifacts and keep them coherent. Never edit code. Revise a change's existing planning artifacts and keep them coherent. Never edit code.
@@ -0,0 +1,96 @@
package app
import (
"bytes"
"context"
"encoding/json"
"net/http"
"testing"
"galo/internal/auth"
"galo/internal/models"
)
// The PATCH /photos/:id/edit endpoint must accept the whole edit payload,
// including the effects block: the HTTP layer has its own request struct, so a
// new parameter group can silently disappear if it is not added there.
func TestEditEndpointAcceptsEffects(t *testing.T) {
ctx := context.Background()
r, token, uid, repos := newAvatarServer(t)
album := &models.Album{ID: auth.NewID(), OwnerID: uid, Title: "Effects"}
if err := repos.Albums.Create(ctx, album); err != nil {
t.Fatalf("create album: %v", err)
}
if err := repos.Members.Add(ctx, album.ID, uid, "editor", nil); err != nil {
t.Fatalf("add owner member: %v", err)
}
body, contentType := multipartFile(t, "file", "effects.png", makeTestPNG(t))
rec := doAuthed(r, http.MethodPost, "/api/albums/"+album.ID+"/photos", body, contentType, token)
if rec.Code != http.StatusCreated {
t.Fatalf("upload = %d body=%s", rec.Code, rec.Body.String())
}
var uploaded struct {
Photos []models.Photo `json:"photos"`
}
if err := json.Unmarshal(rec.Body.Bytes(), &uploaded); err != nil {
t.Fatalf("decode upload: %v", err)
}
if len(uploaded.Photos) != 1 {
t.Fatalf("uploaded photos = %d", len(uploaded.Photos))
}
photoID := uploaded.Photos[0].ID
// Explicit zero midpoint/feather/size/roughness must survive the round trip,
// and omitted strengths must stay zero.
payload := []byte(`{
"effects": {
"texture": 40,
"clarity": -20,
"dehaze": 10,
"vignette": {
"mode": "color",
"amount": 50,
"midpoint": 0,
"feather": 0,
"roundness": 10,
"highlights": 5,
"color": "#ff0000"
},
"grain": {"amount": 30, "size": 0, "roughness": 0}
}
}`)
rec = doAuthed(r, http.MethodPatch, "/api/photos/"+photoID+"/edit", bytes.NewBuffer(payload), "application/json", token)
if rec.Code != http.StatusOK {
t.Fatalf("edit = %d body=%s", rec.Code, rec.Body.String())
}
var edited struct {
Photo models.Photo `json:"photo"`
}
if err := json.Unmarshal(rec.Body.Bytes(), &edited); err != nil {
t.Fatalf("decode edit: %v", err)
}
effects, ok := edited.Photo.EditParams["effects"].(map[string]any)
if !ok {
t.Fatalf("effects missing from edit_params: %+v", edited.Photo.EditParams)
}
if got := effects["texture"]; got != float64(40) {
t.Fatalf("texture = %v, want 40", got)
}
vignette, ok := effects["vignette"].(map[string]any)
if !ok {
t.Fatalf("vignette missing from effects: %+v", effects)
}
if vignette["mode"] != "color" || vignette["midpoint"] != float64(0) ||
vignette["feather"] != float64(0) || vignette["color"] != "#ff0000" {
t.Fatalf("vignette params not stored as sent: %+v", vignette)
}
grain, ok := effects["grain"].(map[string]any)
if !ok {
t.Fatalf("grain missing from effects: %+v", effects)
}
if grain["size"] != float64(0) || grain["roughness"] != float64(0) {
t.Fatalf("grain params not stored as sent: %+v", grain)
}
}
+142
View File
@@ -0,0 +1,142 @@
package e2e
import (
"bytes"
"context"
"path/filepath"
"testing"
"time"
"github.com/disintegration/imaging"
"github.com/gen2brain/webp"
"galo/internal/albums"
"galo/internal/photos"
)
// TestEffectsEdit covers the effects round trip: the parameters are stored in
// the photo metadata, the background worker renders the edited version, the
// saved parameters carry the normalized effects, a reset removes everything,
// and re-rendering the same edit (including grain) is deterministic.
func TestEffectsEdit(t *testing.T) {
ctx := context.Background()
st, closeDB := openStack(t, filepath.Join(t.TempDir(), "galo.db"), t.TempDir())
defer closeDB()
user, _, err := st.auth.Register(ctx, "effects@test.local", "", "password123", "E")
if err != nil {
t.Fatalf("register: %v", err)
}
album, err := st.albums.Create(ctx, user.ID, albums.CreateInput{Title: "Effects"})
if err != nil {
t.Fatalf("create album: %v", err)
}
p, err := st.photos.Upload(ctx, photos.UploadInput{
AlbumID: album.ID, UserID: user.ID, Filename: "e.png", Data: makePNG(t),
})
if err != nil {
t.Fatalf("upload: %v", err)
}
w := photos.NewWorker(st.photos, time.Second, 10, time.Minute, 2)
w.ProcessOnce(ctx)
params := photos.EditParams{Effects: photos.EffectsParams{
Texture: 25,
Clarity: 20,
Dehaze: 15,
Vignette: photos.VignetteParams{
Mode: photos.VignetteColor, Amount: 40, Midpoint: 60, Feather: 40, Color: "#ff8800",
},
Grain: photos.GrainParams{Amount: 35, Size: 30, Roughness: 60},
}}
edited, err := st.photos.EditPhoto(ctx, p.ID, user.ID, params)
if err != nil {
t.Fatalf("edit: %v", err)
}
if edited.EditParams == nil {
t.Fatal("edit returned no parameters")
}
if _, ok := edited.EditParams["effects"]; !ok {
t.Fatalf("effects params not returned: %+v", edited.EditParams)
}
w.ProcessOnce(ctx)
got, err := st.photos.Get(ctx, p.ID, user.ID)
if err != nil {
t.Fatalf("get: %v", err)
}
if got.EditPreviewURL == "" {
t.Fatalf("no edited preview url: %+v", got)
}
if got.EditPreviewKey == "" {
t.Fatalf("no edited preview key: %+v", got)
}
effects, ok := got.EditParams["effects"].(map[string]any)
if !ok {
t.Fatalf("effects params not stored: %+v", got.EditParams)
}
vignette, ok := effects["vignette"].(map[string]any)
if !ok {
t.Fatalf("vignette params not stored: %+v", effects)
}
if vignette["mode"] != photos.VignetteColor {
t.Fatalf("vignette mode = %v, want %q", vignette["mode"], photos.VignetteColor)
}
if vignette["color"] != "#ff8800" {
t.Fatalf("vignette color = %v, want #ff8800", vignette["color"])
}
if vignette["midpoint"] != float64(60) {
t.Fatalf("vignette midpoint = %v, want 60", vignette["midpoint"])
}
grain, ok := effects["grain"].(map[string]any)
if !ok {
t.Fatalf("grain params not stored: %+v", effects)
}
if grain["size"] != float64(30) || grain["roughness"] != float64(60) {
t.Fatalf("grain params = %+v, want size 30 roughness 60", grain)
}
first := previewPixels(t, st, got.EditPreviewKey)
reset, err := st.photos.ResetEdit(ctx, p.ID, user.ID)
if err != nil {
t.Fatalf("reset: %v", err)
}
if len(reset.EditParams) != 0 {
t.Fatalf("reset kept params: %+v", reset.EditParams)
}
if reset.EditURL != "" || reset.EditPreviewURL != "" || reset.EditPreviewKey != "" {
t.Fatalf("reset kept the edited version: %+v", reset)
}
// The same parameters and the same photo id must render the same grain.
if _, err := st.photos.EditPhoto(ctx, p.ID, user.ID, params); err != nil {
t.Fatalf("edit again: %v", err)
}
w.ProcessOnce(ctx)
again, err := st.photos.Get(ctx, p.ID, user.ID)
if err != nil {
t.Fatalf("get after second edit: %v", err)
}
if again.EditPreviewURL == "" || again.EditPreviewKey == "" {
t.Fatalf("no edited preview after second edit: %+v", again)
}
second := previewPixels(t, st, again.EditPreviewKey)
if !bytes.Equal(first, second) {
t.Fatal("repeated render with the same grain parameters is not deterministic")
}
}
// previewPixels decodes an edited preview object into its pixel bytes.
func previewPixels(t *testing.T, st *stack, key string) []uint8 {
t.Helper()
data, err := st.storage.Get(context.Background(), key)
if err != nil {
t.Fatalf("read preview object: %v", err)
}
img, err := webp.Decode(bytes.NewReader(data))
if err != nil {
t.Fatalf("decode preview: %v", err)
}
return imaging.Clone(img).Pix
}
+232 -9
View File
@@ -5,6 +5,7 @@ import (
"errors" "errors"
"math" "math"
"sort" "sort"
"strings"
) )
// Edit parameters are stored in the photo metadata and describe a // Edit parameters are stored in the photo metadata and describe a
@@ -15,12 +16,12 @@ import (
// ranges mirror the ones Lightroom exposes: exposure in stops, everything else // ranges mirror the ones Lightroom exposes: exposure in stops, everything else
// in percent. // in percent.
type LightParams struct { type LightParams struct {
Exposure float64 `json:"exposure"` Exposure float64 `json:"exposure"`
Contrast float64 `json:"contrast"` Contrast float64 `json:"contrast"`
Highlights float64 `json:"highlights"` Highlights float64 `json:"highlights"`
Shadows float64 `json:"shadows"` Shadows float64 `json:"shadows"`
Whites float64 `json:"whites"` Whites float64 `json:"whites"`
Blacks float64 `json:"blacks"` Blacks float64 `json:"blacks"`
Curve CurveParams `json:"curve"` Curve CurveParams `json:"curve"`
} }
@@ -95,6 +96,140 @@ type ColorCorrection struct {
Blue float64 `json:"blue"` Blue float64 `json:"blue"`
} }
// EffectsParams holds the parameters of the "Эффекты" (effects) tool: texture,
// clarity, dehaze, vignette and grain. It is applied after the light and color
// adjustments, because it works on the already corrected frame.
type EffectsParams struct {
Texture float64 `json:"texture"`
Clarity float64 `json:"clarity"`
Dehaze float64 `json:"dehaze"`
Vignette VignetteParams `json:"vignette"`
Grain GrainParams `json:"grain"`
}
// VignetteParams holds the parameters of the "Виньетка" tool. The mode picks
// the way the edges are treated ("light" darkens or brightens them, "color"
// tints them and "colorize" fills them with the chosen color), amount is the
// signed strength in percent, and the rest controls the geometry of the effect.
//
// midpointSet and featherSet record whether the client sent the field: an
// explicit zero is a valid geometry value and must not be replaced by the
// default, while an omitted field gets the default.
type VignetteParams struct {
Mode string `json:"mode"`
Amount float64 `json:"amount"`
Midpoint float64 `json:"midpoint"`
Feather float64 `json:"feather"`
Roundness float64 `json:"roundness"`
Highlights float64 `json:"highlights"`
Color string `json:"color"`
midpointSet bool
featherSet bool
}
// UnmarshalJSON remembers which defaultable fields the client actually sent.
func (v *VignetteParams) UnmarshalJSON(data []byte) error {
var raw struct {
Mode *string `json:"mode"`
Amount *float64 `json:"amount"`
Midpoint *float64 `json:"midpoint"`
Feather *float64 `json:"feather"`
Roundness *float64 `json:"roundness"`
Highlights *float64 `json:"highlights"`
Color *string `json:"color"`
}
if err := json.Unmarshal(data, &raw); err != nil {
return err
}
*v = VignetteParams{}
if raw.Mode != nil {
v.Mode = *raw.Mode
}
if raw.Amount != nil {
v.Amount = *raw.Amount
}
if raw.Midpoint != nil {
v.Midpoint = *raw.Midpoint
v.midpointSet = true
}
if raw.Feather != nil {
v.Feather = *raw.Feather
v.featherSet = true
}
if raw.Roundness != nil {
v.Roundness = *raw.Roundness
}
if raw.Highlights != nil {
v.Highlights = *raw.Highlights
}
if raw.Color != nil {
v.Color = *raw.Color
}
return nil
}
// GrainParams holds the parameters of the "Зерно" tool. Amount is the strength,
// size the scale of the noise cells, roughness the mix of fine and smooth
// noise.
//
// sizeSet and roughnessSet record whether the client sent the field: an
// explicit zero is a valid value and must not be replaced by the default.
type GrainParams struct {
Amount float64 `json:"amount"`
Size float64 `json:"size"`
Roughness float64 `json:"roughness"`
sizeSet bool
roughnessSet bool
}
// UnmarshalJSON remembers which defaultable fields the client actually sent.
func (g *GrainParams) UnmarshalJSON(data []byte) error {
var raw struct {
Amount *float64 `json:"amount"`
Size *float64 `json:"size"`
Roughness *float64 `json:"roughness"`
}
if err := json.Unmarshal(data, &raw); err != nil {
return err
}
*g = GrainParams{}
if raw.Amount != nil {
g.Amount = *raw.Amount
}
if raw.Size != nil {
g.Size = *raw.Size
g.sizeSet = true
}
if raw.Roughness != nil {
g.Roughness = *raw.Roughness
g.roughnessSet = true
}
return nil
}
// Modes of the "Виньетка" tool. Any other mode is normalized to VignetteLight.
const (
VignetteLight = "light"
VignetteColor = "color"
VignetteColorize = "colorize"
)
// Structural defaults of the effects. They are filled by Normalized, so the
// zero value and an explicit "defaults" request mean the same thing and a photo
// without the "effects" key reads as untouched.
const (
DefaultVignetteMidpoint = 50.0
DefaultVignetteFeather = 50.0
DefaultGrainSize = 25.0
DefaultGrainRoughness = 50.0
)
// DefaultVignetteColor is the color used when the request carries no usable
// hex color.
const DefaultVignetteColor = "#000000"
// mixerBand is a color band with its hue center in degrees. // mixerBand is a color band with its hue center in degrees.
type mixerBand struct { type mixerBand struct {
center float64 center float64
@@ -124,8 +259,9 @@ func (g ColorGrading) wheels() [3]ColorWheel {
// EditParams is the full set of non-destructive editing parameters of a photo. // EditParams is the full set of non-destructive editing parameters of a photo.
type EditParams struct { type EditParams struct {
Light LightParams `json:"light"` Light LightParams `json:"light"`
Color ColorParams `json:"color"` Color ColorParams `json:"color"`
Effects EffectsParams `json:"effects"`
} }
// Limits of the editing parameters. They are enforced on write so a hand-made // Limits of the editing parameters. They are enforced on write so a hand-made
@@ -167,6 +303,7 @@ func (p EditParams) Normalized() EditParams {
p.Light.Curve.Green = normalizeCurve(p.Light.Curve.Green) p.Light.Curve.Green = normalizeCurve(p.Light.Curve.Green)
p.Light.Curve.Blue = normalizeCurve(p.Light.Curve.Blue) p.Light.Curve.Blue = normalizeCurve(p.Light.Curve.Blue)
p.Color = p.Color.Normalized() p.Color = p.Color.Normalized()
p.Effects = p.Effects.Normalized()
return p return p
} }
@@ -214,6 +351,92 @@ func (c ColorParams) Normalized() ColorParams {
return c return c
} }
// Normalized returns a copy of the effects clamped to their ranges, with the
// structural defaults filled in. Normalization is idempotent: applying it to an
// already normalized value returns it unchanged, which keeps repeated saves and
// reads stable.
func (e EffectsParams) Normalized() EffectsParams {
e.Texture = clampFloat(e.Texture, -MaxPercent, MaxPercent)
e.Clarity = clampFloat(e.Clarity, -MaxPercent, MaxPercent)
e.Dehaze = clampFloat(e.Dehaze, -MaxPercent, MaxPercent)
e.Vignette = e.Vignette.Normalized()
e.Grain = e.Grain.Normalized()
return e
}
// Normalized returns a copy of the vignette parameters clamped to their ranges.
// The midpoint and feather defaults are applied only when the client omitted the
// field; an explicit zero stays zero. Clamping happens before defaulting so the
// operation stays idempotent.
func (v VignetteParams) Normalized() VignetteParams {
v.Mode = normalizeVignetteMode(v.Mode)
v.Amount = clampFloat(v.Amount, -MaxPercent, MaxPercent)
v.Midpoint = clampFloat(v.Midpoint, 0, MaxPercent)
if v.Midpoint == 0 && !v.midpointSet {
v.Midpoint = DefaultVignetteMidpoint
}
v.Feather = clampFloat(v.Feather, 0, MaxPercent)
if v.Feather == 0 && !v.featherSet {
v.Feather = DefaultVignetteFeather
}
v.Roundness = clampFloat(v.Roundness, -MaxPercent, MaxPercent)
v.Highlights = clampFloat(v.Highlights, 0, MaxPercent)
v.Color = normalizeHexColor(v.Color)
return v
}
// Normalized returns a copy of the grain parameters clamped to their ranges.
// The size and roughness defaults are applied only when the client omitted the
// field; an explicit zero stays zero.
func (g GrainParams) Normalized() GrainParams {
g.Amount = clampFloat(g.Amount, 0, MaxPercent)
g.Size = clampFloat(g.Size, 0, MaxPercent)
if g.Size == 0 && !g.sizeSet {
g.Size = DefaultGrainSize
}
g.Roughness = clampFloat(g.Roughness, 0, MaxPercent)
if g.Roughness == 0 && !g.roughnessSet {
g.Roughness = DefaultGrainRoughness
}
return g
}
// IsEmpty reports whether the effects leave the image untouched. Only the
// strengths count: the structural defaults (mode, midpoint, feather, size,
// roughness, color) do not turn into an edit by themselves.
func (e EffectsParams) IsEmpty() bool {
return e.Texture == 0 && e.Clarity == 0 && e.Dehaze == 0 &&
e.Vignette.Amount == 0 && e.Grain.Amount == 0
}
// normalizeVignetteMode maps an unknown or empty mode to the light one.
func normalizeVignetteMode(mode string) string {
switch strings.ToLower(strings.TrimSpace(mode)) {
case VignetteColor:
return VignetteColor
case VignetteColorize:
return VignetteColorize
default:
return VignetteLight
}
}
// normalizeHexColor returns the lower-case "#rrggbb" form of a valid color and
// the default black for anything unusable.
func normalizeHexColor(color string) string {
color = strings.TrimSpace(color)
if len(color) != 7 || color[0] != '#' {
return DefaultVignetteColor
}
for i := 1; i < len(color); i++ {
c := color[i]
if (c < '0' || c > '9') && (c < 'a' || c > 'f') && (c < 'A' || c > 'F') {
return DefaultVignetteColor
}
}
return strings.ToLower(color)
}
// IsEmpty reports whether the parameters describe an untouched photo. // IsEmpty reports whether the parameters describe an untouched photo.
func (p EditParams) IsEmpty() bool { func (p EditParams) IsEmpty() bool {
l := p.Light l := p.Light
@@ -228,7 +451,7 @@ func (p EditParams) IsEmpty() bool {
} }
} }
} }
return p.Color.IsEmpty() return p.Color.IsEmpty() && p.Effects.IsEmpty()
} }
// IsEmpty reports whether the color parameters leave the image untouched. // IsEmpty reports whether the color parameters leave the image untouched.
@@ -1,7 +1,9 @@
package photos package photos
import ( import (
"bytes"
"image" "image"
"image/png"
"testing" "testing"
"time" "time"
) )
@@ -29,6 +31,73 @@ func BenchmarkApplyLight(b *testing.B) {
b.Logf("кадров: %d", b.N) b.Logf("кадров: %d", b.N)
} }
// BenchmarkBoxBlur3 measures the O(n) box-blur passes on a 12 MP luminance
// plane with the radius the clarity pass uses for that frame.
func BenchmarkBoxBlur3(b *testing.B) {
w, h := 4000, 3000
src := make([]uint8, w*h)
for i := range src {
src[i] = uint8(i % 251)
}
radius := int(0.008 * float64(min(w, h)))
if radius < 2 {
radius = 2
}
b.ResetTimer()
for i := 0; i < b.N; i++ {
_ = boxBlur3(src, w, h, radius)
}
b.StopTimer()
b.Logf("кадров: %d, радиус: %d", b.N, radius)
}
// BenchmarkFullRenderWithEffects measures the whole edited render of a 12 MP
// photo with all effects enabled: decode, light, color, dehaze, texture,
// clarity, vignette and grain. This is the work the background worker does for
// one edit job.
func BenchmarkFullRenderWithEffects(b *testing.B) {
w, h := 4000, 3000
src := image.NewNRGBA(image.Rect(0, 0, w, h))
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
i := y*src.Stride + x*4
src.Pix[i] = uint8(x*255/w) ^ uint8(y*255/h)
src.Pix[i+1] = uint8(x * 3)
src.Pix[i+2] = uint8(y * 5)
src.Pix[i+3] = 255
}
}
var buf bytes.Buffer
encoder := png.Encoder{CompressionLevel: png.BestSpeed}
if err := encoder.Encode(&buf, src); err != nil {
b.Fatalf("encode png: %v", err)
}
data := buf.Bytes()
params := EditParams{
Light: LightParams{Exposure: 0.2, Contrast: 12, Shadows: 15},
Color: ColorParams{Vibrance: 20, Temperature: 8},
Effects: EffectsParams{
Texture: 30,
Clarity: 25,
Dehaze: 20,
Vignette: VignetteParams{
Mode: VignetteColor, Amount: 35, Color: "#ff8800", Highlights: 25,
},
Grain: GrainParams{Amount: 30, Size: 30, Roughness: 55},
},
}
seed := editSeed("benchmark-photo")
b.ResetTimer()
for i := 0; i < b.N; i++ {
if _, err := decodeAndAdjust(data, params, seed); err != nil {
b.Fatalf("decode and adjust: %v", err)
}
}
b.StopTimer()
b.Logf("кадров: %d, эффекты: текстура/чёткость/дымка/виньетка/зерно", b.N)
}
func TestRenderSpeed(t *testing.T) { func TestRenderSpeed(t *testing.T) {
w, h := 4000, 3000 w, h := 4000, 3000
src := image.NewNRGBA(image.Rect(0, 0, w, h)) src := image.NewNRGBA(image.Rect(0, 0, w, h))
+11 -6
View File
@@ -90,19 +90,24 @@ func applyLightRows(dst *image.NRGBA, from, to int, adj lightAdjuster, master, r
} }
} }
// decodeAndAdjust decodes the original and applies the light and color // decodeAndAdjust decodes the original and applies the light, color and effect
// adjustments to it, so the variants and the full-size version share one // adjustments to it, so the variants and the full-size version share one
// decode. Color is applied after light. // decode. The passes run in a fixed order: light, color, then the effects
func decodeAndAdjust(data []byte, p EditParams) (*image.NRGBA, error) { // (dehaze, texture, clarity, vignette, grain). The seed makes the grain render
// deterministic; it comes from the photo id.
func decodeAndAdjust(data []byte, p EditParams, seed uint64) (*image.NRGBA, error) {
img, err := imaging.Decode(bytes.NewReader(data), imaging.AutoOrientation(true)) img, err := imaging.Decode(bytes.NewReader(data), imaging.AutoOrientation(true))
if err != nil { if err != nil {
return nil, err return nil, err
} }
edited := applyLight(img, p.Light) edited := applyLight(img, p.Light)
if p.Color.IsEmpty() { if !p.Color.IsEmpty() {
return edited, nil edited = applyColor(edited, p.Color)
} }
return applyColor(edited, p.Color), nil if !p.Effects.IsEmpty() {
edited = applyEffects(edited, p.Effects, seed)
}
return edited, nil
} }
// applyColor applies the color adjustments in place to an image that already // applyColor applies the color adjustments in place to an image that already
+1 -1
View File
@@ -208,7 +208,7 @@ func TestBuildEditedVariants(t *testing.T) {
src.Pix[i+3] = 255 src.Pix[i+3] = 255
} }
} }
edited, err := decodeAndAdjust(mustEncodePNG(t, src), EditParams{Light: LightParams{Exposure: 0.5}}) edited, err := decodeAndAdjust(mustEncodePNG(t, src), EditParams{Light: LightParams{Exposure: 0.5}}, editSeed("test-photo"))
if err != nil { if err != nil {
t.Fatalf("decode and adjust: %v", err) t.Fatalf("decode and adjust: %v", err)
} }
+659
View File
@@ -0,0 +1,659 @@
package photos
import (
"image"
"math"
"runtime"
"sync"
"github.com/disintegration/imaging"
)
// Spatial effects of the non-destructive editor. They run after the light and
// color adjustments, in a fixed order: dehaze, texture, clarity, vignette,
// grain. Texture and clarity compute a correction from the luminance and add it
// to all three channels equally, so hue and saturation are preserved; dehaze is
// a global tonal correction based on the dark channel prior. Vignette and grain
// are the final, "post-crop" operations.
//
// Everything here is deterministic: the grain seed comes from the photo id, so
// a repeated render of the same parameters produces the same pixels.
// maxDehazeSide is the longest side of the reduced copy used to estimate the
// atmosphere and the transmission map.
const maxDehazeSide = 512
// dehazeOmega is the share of the haze the dark channel prior removes.
const dehazeOmega = 0.95
// dehazeMinT bounds the transmission map from below, so the darkest regions do
// not amplify noise without limit.
const dehazeMinT = 0.1
// applyEffects applies the non-empty effect passes in the documented order and
// returns the image owned by the caller.
func applyEffects(dst *image.NRGBA, p EffectsParams, seed uint64) *image.NRGBA {
if p.Dehaze != 0 {
dst = applyDehaze(dst, p.Dehaze)
}
if p.Texture != 0 {
applyTexture(dst, p.Texture)
}
if p.Clarity != 0 {
applyClarity(dst, p.Clarity)
}
if p.Vignette.Amount != 0 {
applyVignette(dst, p.Vignette)
}
if p.Grain.Amount != 0 {
applyGrain(dst, p.Grain, seed)
}
return dst
}
// luminance returns the perceived brightness Y of an RGB pixel (each 0..255).
func luminance(r, g, b float64) float64 {
return 0.299*r + 0.587*g + 0.114*b
}
// lumaPlane builds a Y plane of the image, one byte per pixel.
func lumaPlane(img *image.NRGBA) []uint8 {
w, h := img.Rect.Dx(), img.Rect.Dy()
out := make([]uint8, w*h)
parallelChunks(h, func(from, to int) {
for y := from; y < to; y++ {
row := img.Pix[y*img.Stride : y*img.Stride+w*4]
dst := out[y*w : (y+1)*w]
for x := 0; x < w; x++ {
i := x * 4
dst[x] = uint8(luminance(float64(row[i]), float64(row[i+1]), float64(row[i+2])) + 0.5)
}
}
})
return out
}
// parallelChunks splits n independent items (rows or columns) into chunks and
// runs fn over each chunk, mirroring the row parallelism of applyLight and
// applyColor.
func parallelChunks(n int, fn func(from, to int)) {
if n <= 0 {
return
}
workers := runtime.GOMAXPROCS(0)
if workers > n {
workers = n
}
if workers <= 1 {
fn(0, n)
return
}
chunk := (n + workers - 1) / workers
var wg sync.WaitGroup
for from := 0; from < n; from += chunk {
to := from + chunk
if to > n {
to = n
}
wg.Add(1)
go func(from, to int) {
defer wg.Done()
fn(from, to)
}(from, to)
}
wg.Wait()
}
// boxBlur applies one separable box blur with edge-clamped borders. The running
// window makes the cost independent of the radius. Edge pixels repeat the
// nearest border value, so the size of the image never changes.
func boxBlur(src []uint8, w, h, radius int) []uint8 {
if w <= 0 || h <= 0 || len(src) < w*h {
return nil
}
out := make([]uint8, w*h)
if radius <= 0 {
copy(out, src[:w*h])
return out
}
tmp := make([]uint8, w*h)
blurHorizontal(src, tmp, w, h, radius)
blurVertical(tmp, out, w, h, radius)
return out
}
// boxBlur3 approximates a Gaussian blur with three box passes.
func boxBlur3(src []uint8, w, h, radius int) []uint8 {
out := boxBlur(src, w, h, radius)
out = boxBlur(out, w, h, radius)
return boxBlur(out, w, h, radius)
}
// blurHorizontal is one horizontal box-blur pass with a sliding window.
func blurHorizontal(src, dst []uint8, w, h, radius int) {
window := 2*radius + 1
parallelChunks(h, func(from, to int) {
for y := from; y < to; y++ {
row := src[y*w : (y+1)*w]
out := dst[y*w : (y+1)*w]
var sum int
for k := -radius; k <= radius; k++ {
sum += int(row[clampInt(k, 0, w-1)])
}
for x := 0; x < w; x++ {
out[x] = uint8((sum + window/2) / window)
sum -= int(row[clampInt(x-radius, 0, w-1)])
sum += int(row[clampInt(x+radius+1, 0, w-1)])
}
}
})
}
// blurVertical is one vertical box-blur pass with a sliding window. Columns are
// independent, so they are split into chunks just like rows.
func blurVertical(src, dst []uint8, w, h, radius int) {
window := 2*radius + 1
parallelChunks(w, func(from, to int) {
for x := from; x < to; x++ {
var sum int
for k := -radius; k <= radius; k++ {
sum += int(src[clampInt(k, 0, h-1)*w+x])
}
for y := 0; y < h; y++ {
dst[y*w+x] = uint8((sum + window/2) / window)
sum -= int(src[clampInt(y-radius, 0, h-1)*w+x])
sum += int(src[clampInt(y+radius+1, 0, h-1)*w+x])
}
}
})
}
// addLumaDelta adds the same delta to the three color channels of one pixel.
// Transparent pixels are left untouched by the callers.
func addLumaDelta(row []uint8, i int, delta float64) {
row[i] = clampChannel(float64(row[i]) + delta)
row[i+1] = clampChannel(float64(row[i+1]) + delta)
row[i+2] = clampChannel(float64(row[i+2]) + delta)
}
// clampChannel rounds and clamps a channel value to 0..255.
func clampChannel(v float64) uint8 {
return uint8(clampFloat(v+0.5, 0, 255))
}
// applyTexture is an unsharp mask with a small radius: it boosts (or, for a
// negative amount, smooths) the high-frequency detail of the luminance.
func applyTexture(dst *image.NRGBA, amount float64) {
w, h := dst.Rect.Dx(), dst.Rect.Dy()
if w == 0 || h == 0 {
return
}
y := lumaPlane(dst)
radius := int(math.Round(0.0015 * float64(min(w, h))))
if radius < 1 {
radius = 1
}
blur := boxBlur3(y, w, h, radius)
k := amount / 100
parallelChunks(h, func(from, to int) {
for row := from; row < to; row++ {
pix := dst.Pix[row*dst.Stride : row*dst.Stride+w*4]
base := row * w
for x := 0; x < w; x++ {
i := x * 4
if pix[i+3] == 0 {
continue
}
delta := k * (float64(y[base+x]) - float64(blur[base+x]))
addLumaDelta(pix, i, delta)
}
}
})
}
// applyClarity is an unsharp mask with a large radius. The correction is
// limited to +-40 levels and weighted by the midtone mask, which keeps the
// edges of contrasty objects from ringing.
func applyClarity(dst *image.NRGBA, amount float64) {
w, h := dst.Rect.Dx(), dst.Rect.Dy()
if w == 0 || h == 0 {
return
}
y := lumaPlane(dst)
radius := int(math.Round(0.008 * float64(min(w, h))))
if radius < 2 {
radius = 2
}
blur := boxBlur3(y, w, h, radius)
k := amount / 100 * 1.25
parallelChunks(h, func(from, to int) {
for row := from; row < to; row++ {
pix := dst.Pix[row*dst.Stride : row*dst.Stride+w*4]
base := row * w
for x := 0; x < w; x++ {
i := x * 4
if pix[i+3] == 0 {
continue
}
yVal := float64(y[base+x])
d := clampFloat(yVal-float64(blur[base+x]), -40, 40)
t := math.Abs(2*yVal/255 - 1)
weight := 1 - 0.6*t*t
addLumaDelta(pix, i, k*d*weight)
}
}
})
}
// applyDehaze removes (positive amount) or adds (negative amount) haze with the
// dark channel prior. The atmosphere and the transmission map are estimated on
// a reduced copy, then the map is interpolated back to the full frame.
func applyDehaze(dst *image.NRGBA, amount float64) *image.NRGBA {
w, h := dst.Rect.Dx(), dst.Rect.Dy()
if w == 0 || h == 0 {
return dst
}
small := dst
sw, sh := w, h
if max(w, h) > maxDehazeSide {
scale := float64(maxDehazeSide) / float64(max(w, h))
sw = max(1, int(math.Round(float64(w)*scale)))
sh = max(1, int(math.Round(float64(h)*scale)))
small = imaging.Resize(dst, sw, sh, imaging.Linear)
}
sw, sh = small.Rect.Dx(), small.Rect.Dy()
dark := darkChannel(small)
atmosphere := atmosphericLight(small, dark)
tMap := make([]uint8, sw*sh)
for y := 0; y < sh; y++ {
row := small.Pix[y*small.Stride : y*small.Stride+sw*4]
for x := 0; x < sw; x++ {
i := x * 4
transmission := 1 - dehazeOmega*min(
float64(row[i])/atmosphere[0],
min(float64(row[i+1])/atmosphere[1], float64(row[i+2])/atmosphere[2]))
transmission = clampFloat(transmission, dehazeMinT, 1)
tMap[y*sw+x] = uint8(transmission*255 + 0.5)
}
}
tRadius := int(math.Round(0.02 * float64(min(sw, sh))))
if tRadius < 1 {
tRadius = 1
}
tMap = boxBlur3(tMap, sw, sh, tRadius)
fullT := tMap
if sw != w || sh != h {
gray := image.NewGray(image.Rect(0, 0, sw, sh))
copy(gray.Pix, tMap)
fullT = resizeTransmission(gray, w, h)
}
k := amount / 100
if amount > 0 {
parallelChunks(h, func(from, to int) {
for row := from; row < to; row++ {
pix := dst.Pix[row*dst.Stride : row*dst.Stride+w*4]
base := row * w
for x := 0; x < w; x++ {
i := x * 4
if pix[i+3] == 0 {
continue
}
t := float64(fullT[base+x]) / 255
if t < dehazeMinT {
t = dehazeMinT
}
for c := 0; c < 3; c++ {
in := float64(pix[i+c])
clear := (in-atmosphere[c])/t + atmosphere[c]
pix[i+c] = clampChannel(in + k*(clear-in))
}
}
}
})
return dst
}
// Negative amount adds haze: the frame moves toward the atmosphere color
// and loses contrast.
haze := -k
parallelChunks(h, func(from, to int) {
for row := from; row < to; row++ {
pix := dst.Pix[row*dst.Stride : row*dst.Stride+w*4]
for x := 0; x < w; x++ {
i := x * 4
if pix[i+3] == 0 {
continue
}
for c := 0; c < 3; c++ {
in := float64(pix[i+c])
pix[i+c] = clampChannel(in*(1-0.75*haze) + atmosphere[c]*0.75*haze)
}
}
}
})
return dst
}
// darkChannel returns the per-pixel minimum of the RGB channels.
func darkChannel(img *image.NRGBA) []uint8 {
w, h := img.Rect.Dx(), img.Rect.Dy()
out := make([]uint8, w*h)
parallelChunks(h, func(from, to int) {
for y := from; y < to; y++ {
row := img.Pix[y*img.Stride : y*img.Stride+w*4]
dst := out[y*w : (y+1)*w]
for x := 0; x < w; x++ {
i := x * 4
v := row[i]
if row[i+1] < v {
v = row[i+1]
}
if row[i+2] < v {
v = row[i+2]
}
dst[x] = v
}
}
})
return out
}
// atmosphericLight estimates the color of the haze: the average RGB of the
// pixels whose dark channel is above the 99.9th percentile, at least one pixel
// and never below one per channel.
func atmosphericLight(img *image.NRGBA, dark []uint8) [3]float64 {
var atmosphere [3]float64
if len(dark) == 0 {
return [3]float64{1, 1, 1}
}
var hist [256]int
maxDark := 0
for _, v := range dark {
hist[v]++
if int(v) > maxDark {
maxDark = int(v)
}
}
target := int(math.Ceil(0.999 * float64(len(dark))))
if target < 1 {
target = 1
}
threshold := maxDark
cumulative := 0
for v := 0; v < 256; v++ {
cumulative += hist[v]
if cumulative >= target {
threshold = v
break
}
}
w, h := img.Rect.Dx(), img.Rect.Dy()
var sum [3]float64
count := 0
add := func(x, y int) {
i := y*img.Stride + x*4
sum[0] += float64(img.Pix[i])
sum[1] += float64(img.Pix[i+1])
sum[2] += float64(img.Pix[i+2])
count++
}
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
if int(dark[y*w+x]) > threshold {
add(x, y)
}
}
}
if count == 0 {
// A uniform dark channel has no pixel strictly above the threshold:
// the brightest pixel still is the best atmosphere estimate.
found := false
for y := 0; y < h && !found; y++ {
for x := 0; x < w; x++ {
if int(dark[y*w+x]) == maxDark {
add(x, y)
found = true
break
}
}
}
}
for c := 0; c < 3; c++ {
atmosphere[c] = 1
if count > 0 {
atmosphere[c] = math.Max(1, sum[c]/float64(count))
}
}
return atmosphere
}
// resizeTransmission upsamples the gray transmission map to the full frame.
// imaging.Resize returns an NRGBA image, so the gray value is the first byte of
// every pixel; slicing its Pix by w*h would read only the first quarter of the
// frame, hence the explicit per-pixel copy.
func resizeTransmission(gray *image.Gray, w, h int) []uint8 {
resized := imaging.Resize(gray, w, h, imaging.Linear)
out := make([]uint8, w*h)
for i := range out {
out[i] = resized.Pix[i*4]
}
return out
}
// applyVignette darkens, brightens, tints or fills the edges of the frame. The
// geometry is normalized to the half-frame: roundness turns the ellipse into a
// rounded rectangle, midpoint sets where the zone starts and feather sets how
// soft the transition is.
func applyVignette(dst *image.NRGBA, v VignetteParams) {
w, h := dst.Rect.Dx(), dst.Rect.Dy()
if w == 0 || h == 0 || v.Amount == 0 {
return
}
exponent := 2 * math.Pow(6, v.Roundness/100)
invExponent := 1 / exponent
start := 0.15 + 0.85*v.Midpoint/100
featherWidth := 0.02 + 0.48*v.Feather/100
xTerms := make([]float64, w)
for x := 0; x < w; x++ {
dx := (float64(x)+0.5)/float64(w)*2 - 1
xTerms[x] = math.Pow(math.Abs(dx), exponent)
}
yTerms := make([]float64, h)
for y := 0; y < h; y++ {
dy := (float64(y)+0.5)/float64(h)*2 - 1
yTerms[y] = math.Pow(math.Abs(dy), exponent)
}
amount := v.Amount / 100
tintR, tintG, tintB := parseHexRGB(v.Color)
tintY := luminance(tintR, tintG, tintB)
highlights := v.Highlights / 100
mode := v.Mode
if mode != VignetteColor && mode != VignetteColorize {
mode = VignetteLight
}
parallelChunks(h, func(from, to int) {
for row := from; row < to; row++ {
pix := dst.Pix[row*dst.Stride : row*dst.Stride+w*4]
termY := yTerms[row]
for x := 0; x < w; x++ {
i := x * 4
if pix[i+3] == 0 {
continue
}
distance := math.Pow(xTerms[x]+termY, invExponent)
mask := smoothstep(start, start+featherWidth, distance)
if mask == 0 {
continue
}
yVal := luminance(float64(pix[i]), float64(pix[i+1]), float64(pix[i+2]))
highlightFactor := highlights * smoothstep(0.5, 1, yVal/255)
switch mode {
case VignetteColor:
strength := math.Abs(amount) * mask * (1 - highlightFactor)
if strength == 0 {
continue
}
targetR := tintR - tintY + yVal
targetG := tintG - tintY + yVal
targetB := tintB - tintY + yVal
pix[i] = clampChannel(float64(pix[i]) + (targetR-float64(pix[i]))*strength)
pix[i+1] = clampChannel(float64(pix[i+1]) + (targetG-float64(pix[i+1]))*strength)
pix[i+2] = clampChannel(float64(pix[i+2]) + (targetB-float64(pix[i+2]))*strength)
case VignetteColorize:
strength := math.Abs(amount) * mask * (1 - highlightFactor)
if strength == 0 {
continue
}
pix[i] = clampChannel(float64(pix[i]) + (tintR-float64(pix[i]))*strength)
pix[i+1] = clampChannel(float64(pix[i+1]) + (tintG-float64(pix[i+1]))*strength)
pix[i+2] = clampChannel(float64(pix[i+2]) + (tintB-float64(pix[i+2]))*strength)
default:
factor := 1 - amount*0.85*mask
factor += (1 - factor) * highlightFactor * mask
pix[i] = clampChannel(float64(pix[i]) * factor)
pix[i+1] = clampChannel(float64(pix[i+1]) * factor)
pix[i+2] = clampChannel(float64(pix[i+2]) * factor)
}
}
}
})
}
// smoothstep is the Hermite ramp between the two edges, clamped to 0..1.
func smoothstep(edge0, edge1, x float64) float64 {
if edge1 <= edge0 {
if x < edge1 {
return 0
}
return 1
}
t := clamp01((x - edge0) / (edge1 - edge0))
return t * t * (3 - 2*t)
}
// parseHexRGB decodes a "#rrggbb" color. An unusable color reads as black.
func parseHexRGB(color string) (float64, float64, float64) {
if len(color) != 7 || color[0] != '#' {
return 0, 0, 0
}
var rgb [3]float64
for c := 0; c < 3; c++ {
hi := hexNibble(color[1+c*2])
lo := hexNibble(color[2+c*2])
if hi < 0 || lo < 0 {
return 0, 0, 0
}
rgb[c] = float64(hi*16 + lo)
}
return rgb[0], rgb[1], rgb[2]
}
// hexNibble decodes one hexadecimal digit, or -1 for an invalid character.
func hexNibble(c byte) int {
switch {
case c >= '0' && c <= '9':
return int(c - '0')
case c >= 'a' && c <= 'f':
return int(c-'a') + 10
case c >= 'A' && c <= 'F':
return int(c-'A') + 10
}
return -1
}
// Grain noise is a pure function of the pixel coordinates and the seed. Using
// the splitmix64 finalizer as a hash (instead of a stateful sequence) keeps the
// noise independent of the row order, so the row-parallel render is bit-for-bit
// reproducible.
const (
grainSaltValue uint64 = 0x9e3779b97f4a7c15
grainSaltWhite uint64 = 0xd1b54a32d192ed03
)
// mix64 is the splitmix64 finalizer.
func mix64(x uint64) uint64 {
x += 0x9e3779b97f4a7c15
x = (x ^ (x >> 30)) * 0xbf58476d1ce4e5b9
x = (x ^ (x >> 27)) * 0x94d049bb133111eb
return x ^ (x >> 31)
}
// hashSigned maps a seed, a salt and integer coordinates to [-1, 1].
func hashSigned(seed, salt uint64, x, y int) float64 {
z := seed ^ salt
z ^= uint64(x) * 0x9e3779b97f4a7c15
z ^= uint64(y) * 0xc2b2ae3d27d4eb4f
h := mix64(z)
return float64(h>>11)/float64(uint64(1)<<53)*2 - 1
}
// applyGrain adds a deterministic luminance noise. Size sets the cell of the
// smooth value noise and roughness mixes it with the per-pixel white noise; the
// weight fades the noise out of the darkest and brightest tones.
func applyGrain(dst *image.NRGBA, g GrainParams, seed uint64) {
w, h := dst.Rect.Dx(), dst.Rect.Dy()
if w == 0 || h == 0 || g.Amount == 0 {
return
}
cell := int(math.Round((0.0005 + 0.004*g.Size/100) * float64(min(w, h))))
if cell < 1 {
cell = 1
}
gridW := (w-1)/cell + 2
gridH := (h-1)/cell + 2
grid := make([]float64, gridW*gridH)
for gy := 0; gy < gridH; gy++ {
for gx := 0; gx < gridW; gx++ {
grid[gy*gridW+gx] = hashSigned(seed, grainSaltValue, gx, gy)
}
}
roughness := g.Roughness / 100
smoothWeight := 1 - roughness
strength := g.Amount / 100 * 38
parallelChunks(h, func(from, to int) {
for row := from; row < to; row++ {
pix := dst.Pix[row*dst.Stride : row*dst.Stride+w*4]
gy := row / cell
fy := float64(row-gy*cell) / float64(cell)
vy := smoothstep(0, 1, fy)
for x := 0; x < w; x++ {
i := x * 4
if pix[i+3] == 0 {
continue
}
gx := x / cell
fx := float64(x-gx*cell) / float64(cell)
vx := smoothstep(0, 1, fx)
a := grid[gy*gridW+gx]
b := grid[gy*gridW+gx+1]
c := grid[(gy+1)*gridW+gx]
d := grid[(gy+1)*gridW+gx+1]
top := a + (b-a)*vx
bottom := c + (d-c)*vx
value := top + (bottom-top)*vy
white := hashSigned(seed, grainSaltWhite, x, row)
noise := value*smoothWeight + white*roughness
yVal := luminance(float64(pix[i]), float64(pix[i+1]), float64(pix[i+2]))
t := 2*yVal/255 - 1
weight := 1 - t*t
addLumaDelta(pix, i, noise*strength*weight)
}
}
})
}
+708
View File
@@ -0,0 +1,708 @@
package photos
import (
"bytes"
"encoding/json"
"image"
"math"
"reflect"
"testing"
"github.com/disintegration/imaging"
)
func TestEffectsParams(t *testing.T) {
t.Run("defaults", func(t *testing.T) {
got := (EffectsParams{}).Normalized()
if got.Texture != 0 || got.Clarity != 0 || got.Dehaze != 0 {
t.Fatalf("strengths changed: %+v", got)
}
v := got.Vignette
if v.Mode != VignetteLight || v.Midpoint != DefaultVignetteMidpoint ||
v.Feather != DefaultVignetteFeather || v.Roundness != 0 || v.Highlights != 0 ||
v.Color != DefaultVignetteColor || v.Amount != 0 {
t.Fatalf("vignette defaults = %+v", v)
}
g := got.Grain
if g.Amount != 0 || g.Size != DefaultGrainSize || g.Roughness != DefaultGrainRoughness {
t.Fatalf("grain defaults = %+v", g)
}
})
t.Run("clamps", func(t *testing.T) {
got := EffectsParams{
Texture: 250,
Clarity: -250,
Dehaze: 150,
Vignette: VignetteParams{
Mode: "sepia", Amount: -150, Midpoint: 150, Feather: 150,
Roundness: -150, Highlights: 150, Color: "#AABBCC",
},
Grain: GrainParams{Amount: 150, Size: 150, Roughness: 150},
}.Normalized()
if got.Texture != MaxPercent || got.Clarity != -MaxPercent || got.Dehaze != MaxPercent {
t.Fatalf("strengths = %v/%v/%v, want clamped", got.Texture, got.Clarity, got.Dehaze)
}
v := got.Vignette
if v.Mode != VignetteLight {
t.Fatalf("unknown mode = %q, want %q", v.Mode, VignetteLight)
}
if v.Amount != -MaxPercent || v.Midpoint != MaxPercent || v.Feather != MaxPercent ||
v.Roundness != -MaxPercent || v.Highlights != MaxPercent {
t.Fatalf("vignette not clamped: %+v", v)
}
if v.Color != "#aabbcc" {
t.Fatalf("color = %q, want lower-case", v.Color)
}
if got.Grain.Amount != MaxPercent || got.Grain.Size != MaxPercent || got.Grain.Roughness != MaxPercent {
t.Fatalf("grain not clamped: %+v", got.Grain)
}
})
t.Run("modes and colors", func(t *testing.T) {
cases := []struct {
mode, want string
}{
{"", VignetteLight},
{"light", VignetteLight},
{"LIGHT", VignetteLight},
{"color", VignetteColor},
{"Colorize", VignetteColorize},
{"unknown", VignetteLight},
}
for _, tc := range cases {
if got := (VignetteParams{Mode: tc.mode}).Normalized().Mode; got != tc.want {
t.Fatalf("mode %q = %q, want %q", tc.mode, got, tc.want)
}
}
colors := []struct {
in, want string
}{
{"#A1B2C3", "#a1b2c3"},
{"#abcdef", "#abcdef"},
{"#12345", DefaultVignetteColor},
{"#gggggg", DefaultVignetteColor},
{"aabbcc", DefaultVignetteColor},
{"red", DefaultVignetteColor},
{"", DefaultVignetteColor},
}
for _, tc := range colors {
if got := normalizeHexColor(tc.in); got != tc.want {
t.Fatalf("color %q = %q, want %q", tc.in, got, tc.want)
}
}
})
t.Run("idempotent", func(t *testing.T) {
p := EffectsParams{
Texture: 12.5, Clarity: -8, Dehaze: 33,
Vignette: VignetteParams{Mode: "COLOR", Amount: -25, Midpoint: 40, Feather: 70, Roundness: 20, Highlights: 10, Color: "#FF8000"},
Grain: GrainParams{Amount: 45, Size: 33, Roughness: 66},
}
once := p.Normalized()
twice := once.Normalized()
if !reflect.DeepEqual(once, twice) {
t.Fatalf("normalization is not idempotent:\n once = %+v\ntwice = %+v", once, twice)
}
})
t.Run("is empty", func(t *testing.T) {
cases := []struct {
name string
p EffectsParams
empty bool
}{
{"zero", EffectsParams{}, true},
{
"geometry only",
EffectsParams{
Vignette: VignetteParams{
Mode: VignetteColor, Midpoint: 20, Feather: 80,
Roundness: 40, Highlights: 50, Color: "#ff0000",
},
Grain: GrainParams{Size: 90, Roughness: 90},
},
true,
},
{"texture", EffectsParams{Texture: 1}, false},
{"clarity", EffectsParams{Clarity: -1}, false},
{"dehaze", EffectsParams{Dehaze: 1}, false},
{"vignette", EffectsParams{Vignette: VignetteParams{Amount: -1}}, false},
{"grain", EffectsParams{Grain: GrainParams{Amount: 1}}, false},
}
for _, tc := range cases {
if got := tc.p.IsEmpty(); got != tc.empty {
t.Fatalf("%s: IsEmpty = %v, want %v", tc.name, got, tc.empty)
}
}
})
t.Run("explicit zero geometry", func(t *testing.T) {
// An explicit zero is a valid geometry value and must survive both
// parsing and normalization; omitted fields still get the defaults.
p, err := ParseEditParams([]byte(`{"effects":{"vignette":{"mode":"light","amount":10,"midpoint":0,"feather":0},"grain":{"amount":10,"size":0,"roughness":0}}}`))
if err != nil {
t.Fatalf("parse explicit zero: %v", err)
}
if p.Effects.Vignette.Midpoint != 0 || p.Effects.Vignette.Feather != 0 {
t.Fatalf("explicit zero vignette geometry was defaulted: %+v", p.Effects.Vignette)
}
if p.Effects.Grain.Size != 0 || p.Effects.Grain.Roughness != 0 {
t.Fatalf("explicit zero grain geometry was defaulted: %+v", p.Effects.Grain)
}
omitted, err := ParseEditParams([]byte(`{"effects":{"vignette":{"amount":10},"grain":{"amount":10}}}`))
if err != nil {
t.Fatalf("parse omitted: %v", err)
}
if omitted.Effects.Vignette.Midpoint != DefaultVignetteMidpoint ||
omitted.Effects.Vignette.Feather != DefaultVignetteFeather ||
omitted.Effects.Grain.Size != DefaultGrainSize ||
omitted.Effects.Grain.Roughness != DefaultGrainRoughness {
t.Fatalf("omitted geometry was not defaulted: %+v", omitted.Effects)
}
})
t.Run("json", func(t *testing.T) {
p := EditParams{Effects: EffectsParams{Dehaze: 10}}
data := p.JSON()
var raw map[string]json.RawMessage
if err := json.Unmarshal(data, &raw); err != nil {
t.Fatalf("unmarshal: %v", err)
}
if _, ok := raw["effects"]; !ok {
t.Fatalf("effects key missing from %s", data)
}
var effects EffectsParams
if err := json.Unmarshal(raw["effects"], &effects); err != nil {
t.Fatalf("unmarshal effects: %v", err)
}
if effects.Dehaze != 10 {
t.Fatalf("dehaze = %v, want 10", effects.Dehaze)
}
var body string
if err := json.Unmarshal(data, &body); err == nil {
t.Fatalf("unexpected string body %q", body)
}
})
t.Run("edit params count effects", func(t *testing.T) {
if (EditParams{Effects: EffectsParams{Texture: 1}}).IsEmpty() {
t.Fatal("params with texture must not be empty")
}
if (EditParams{Effects: EffectsParams{Vignette: VignetteParams{Mode: VignetteColor}}}).IsEmpty() != true {
t.Fatal("vignette defaults without strength must count as empty")
}
})
}
func TestEditParamsLegacy(t *testing.T) {
empty, err := ParseEditParams([]byte(`{}`))
if err != nil {
t.Fatalf("parse empty: %v", err)
}
if !empty.IsEmpty() || !empty.Effects.IsEmpty() {
t.Fatalf("empty params = %+v", empty)
}
if empty.Effects.Vignette.Midpoint != DefaultVignetteMidpoint ||
empty.Effects.Vignette.Color != DefaultVignetteColor ||
empty.Effects.Grain.Size != DefaultGrainSize {
t.Fatalf("legacy defaults not filled: %+v", empty.Effects)
}
legacy, err := ParseEditParams([]byte(`{"light":{"exposure":0.4},"color":{"temperature":15,"saturation":10}}`))
if err != nil {
t.Fatalf("parse legacy: %v", err)
}
if legacy.IsEmpty() {
t.Fatal("legacy light/color params must not be empty")
}
if !legacy.Effects.IsEmpty() {
t.Fatalf("params without effects key read as effects: %+v", legacy.Effects)
}
// The old pipeline (light, then color) renders exactly the same pixels when
// the parameters carry no effects.
src := gradientImage(16, 12)
data := mustEncodePNG(t, src)
got, err := decodeAndAdjust(data, legacy, editSeed("legacy"))
if err != nil {
t.Fatalf("decode and adjust: %v", err)
}
decoded, err := imaging.Decode(bytes.NewReader(data), imaging.AutoOrientation(true))
if err != nil {
t.Fatalf("decode: %v", err)
}
want := applyColor(applyLight(decoded, legacy.Light), legacy.Color)
if !bytes.Equal(got.Pix, want.Pix) {
t.Fatal("legacy render changed when effects are absent")
}
// An untouched photo decodes to the original pixels.
plain, err := decodeAndAdjust(data, EditParams{}, editSeed("legacy"))
if err != nil {
t.Fatalf("decode and adjust untouched: %v", err)
}
if !bytes.Equal(plain.Pix, imaging.Clone(decoded).Pix) {
t.Fatal("empty params changed the original")
}
}
func TestBoxBlur(t *testing.T) {
if got := boxBlur([]uint8{1, 2, 3, 4}, 2, 2, 0); !bytes.Equal(got, []uint8{1, 2, 3, 4}) {
t.Fatalf("radius 0 = %v, want identity", got)
}
constant := make([]uint8, 9*7)
for i := range constant {
constant[i] = 77
}
blurred := boxBlur3(constant, 9, 7, 3)
for i, v := range blurred {
if v != 77 {
t.Fatalf("constant image changed at %d: %d", i, v)
}
}
w, h := 13, 9
src := make([]uint8, w*h)
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
src[y*w+x] = uint8((x*37 + y*61) % 256)
}
}
for _, radius := range []int{1, 2, 5} {
if want, got := naiveBoxPass(src, w, h, radius), boxBlur(src, w, h, radius); !bytes.Equal(got, want) {
t.Fatalf("radius %d: boxBlur = %v, want %v", radius, got, want)
}
want := src
for i := 0; i < 3; i++ {
want = naiveBoxPass(want, w, h, radius)
}
if got := boxBlur3(src, w, h, radius); !bytes.Equal(got, want) {
t.Fatalf("radius %d: boxBlur3 = %v, want %v", radius, got, want)
}
}
// A one-pixel image is a fixed point of any radius.
if got := boxBlur3([]uint8{42}, 1, 1, 4); len(got) != 1 || got[0] != 42 {
t.Fatalf("1x1 blur = %v, want [42]", got)
}
}
// naiveBoxPass is the reference implementation of one box-blur pass: the
// window is sampled explicitly with edge-clamped coordinates.
func naiveBoxPass(src []uint8, w, h, radius int) []uint8 {
window := 2*radius + 1
tmp := make([]uint8, w*h)
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
sum := 0
for kx := -radius; kx <= radius; kx++ {
sum += int(src[y*w+clampInt(x+kx, 0, w-1)])
}
tmp[y*w+x] = uint8((sum + window/2) / window)
}
}
out := make([]uint8, w*h)
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
sum := 0
for ky := -radius; ky <= radius; ky++ {
sum += int(tmp[clampInt(y+ky, 0, h-1)*w+x])
}
out[y*w+x] = uint8((sum + window/2) / window)
}
}
return out
}
func TestTextureClarity(t *testing.T) {
src := checkerImage(64, 64, 96, 160)
base := lumaLocalVariance(src)
for _, effect := range []string{"texture", "clarity"} {
up := applyEffects(imaging.Clone(src), strengths(effect, 100), 1)
down := applyEffects(imaging.Clone(src), strengths(effect, -100), 1)
if got := lumaLocalVariance(up); got <= base {
t.Fatalf("%s +100: local variance %v must grow above %v", effect, got, base)
}
if got := lumaLocalVariance(down); got >= base {
t.Fatalf("%s -100: local variance %v must drop below %v", effect, got, base)
}
}
}
// lumaLocalVariance is the average variance of the luminance inside a 3x3
// window: the property that texture and clarity change.
func lumaLocalVariance(img *image.NRGBA) float64 {
plane := lumaPlane(img)
w, h := img.Rect.Dx(), img.Rect.Dy()
var total float64
count := 0
for y := 1; y < h-1; y++ {
for x := 1; x < w-1; x++ {
var sum, sumSq float64
for dy := -1; dy <= 1; dy++ {
for dx := -1; dx <= 1; dx++ {
v := float64(plane[(y+dy)*w+x+dx])
sum += v
sumSq += v * v
}
}
mean := sum / 9
total += sumSq/9 - mean*mean
count++
}
}
return total / float64(count)
}
// strengths builds a single-effect parameter block.
func strengths(effect string, value float64) EffectsParams {
switch effect {
case "texture":
return EffectsParams{Texture: value}
case "clarity":
return EffectsParams{Clarity: value}
}
return EffectsParams{}
}
func TestDehaze(t *testing.T) {
clear := hazyScene(128, 96)
hazy := addHaze(clear, 0.45, 235)
baseContrast := lumaStdDev(hazy)
baseSaturation := meanSaturation(hazy)
removed := applyEffects(imaging.Clone(hazy), EffectsParams{Dehaze: 100}, 1)
t.Logf("contrast %.2f -> %.2f, saturation %.2f -> %.2f",
baseContrast, lumaStdDev(removed), baseSaturation, meanSaturation(removed))
if got := lumaStdDev(removed); got <= baseContrast {
t.Fatalf("dehaze +100: contrast %v did not grow above %v", got, baseContrast)
}
if got := meanSaturation(removed); got <= baseSaturation {
t.Fatalf("dehaze +100: saturation %v did not grow above %v", got, baseSaturation)
}
clearContrast := lumaStdDev(clear)
clearSaturation := meanSaturation(clear)
added := applyEffects(imaging.Clone(clear), EffectsParams{Dehaze: -100}, 1)
t.Logf("clear contrast %.2f -> %.2f, saturation %.2f -> %.2f",
clearContrast, lumaStdDev(added), clearSaturation, meanSaturation(added))
if got := lumaStdDev(added); got >= clearContrast {
t.Fatalf("dehaze -100: contrast %v did not drop below %v", got, clearContrast)
}
if got := meanSaturation(added); got >= clearSaturation {
t.Fatalf("dehaze -100: saturation %v did not drop below %v", got, clearSaturation)
}
}
func TestResizeTransmission(t *testing.T) {
// A vertical step map: the top half is dark, the bottom half is bright.
sw, sh := 16, 12
transmission := make([]uint8, sw*sh)
for y := 0; y < sh; y++ {
for x := 0; x < sw; x++ {
if y < sh/2 {
transmission[y*sw+x] = 20
} else {
transmission[y*sw+x] = 230
}
}
}
gray := image.NewGray(image.Rect(0, 0, sw, sh))
copy(gray.Pix, transmission)
out := resizeTransmission(gray, 128, 96)
if len(out) != 128*96 {
t.Fatalf("resized map length = %d, want %d", len(out), 128*96)
}
// The transition band is blurred by the interpolation, so the edges are
// checked away from the step.
for y := 0; y < 96; y++ {
if y >= 40 && y < 56 {
continue
}
want := uint8(20)
if y >= 56 {
want = 230
}
for x := 0; x < 128; x++ {
if got := out[y*128+x]; got < want-4 || got > want+4 {
t.Fatalf("pixel %d,%d = %d, want around %d", x, y, got, want)
}
}
}
}
func TestVignette(t *testing.T) {
src := solidImage(64, 64, 128)
const centerX, centerY = 32, 32
const cornerX, cornerY = 0, 0
t.Run("light mode", func(t *testing.T) {
dark := applyEffects(imaging.Clone(src), EffectsParams{
Vignette: VignetteParams{Mode: VignetteLight, Amount: 80},
}, 0)
if pixelAt(dark, centerX, centerY) != 128 {
t.Fatalf("center changed: %d", pixelAt(dark, centerX, centerY))
}
if pixelAt(dark, cornerX, cornerY) >= 128 {
t.Fatalf("positive amount did not darken the corner: %d", pixelAt(dark, cornerX, cornerY))
}
bright := applyEffects(imaging.Clone(src), EffectsParams{
Vignette: VignetteParams{Mode: VignetteLight, Amount: -80},
}, 0)
if pixelAt(bright, centerX, centerY) != 128 {
t.Fatalf("center changed: %d", pixelAt(bright, centerX, centerY))
}
if pixelAt(bright, cornerX, cornerY) <= 128 {
t.Fatalf("negative amount did not brighten the corner: %d", pixelAt(bright, cornerX, cornerY))
}
})
t.Run("zero amount is identity", func(t *testing.T) {
out := applyEffects(imaging.Clone(src), EffectsParams{
Vignette: VignetteParams{Mode: VignetteColor, Amount: 0, Color: "#ff0000"},
}, 0)
if !bytes.Equal(out.Pix, src.Pix) {
t.Fatal("zero vignette changed the image")
}
})
t.Run("color mode tints the edges", func(t *testing.T) {
out := applyEffects(imaging.Clone(src), EffectsParams{
Vignette: VignetteParams{Mode: VignetteColor, Amount: 100, Color: "#ff0000"},
}, 0)
r, g, b := rgbAt(out, cornerX, cornerY)
if !(r > g && r > b) {
t.Fatalf("color vignette corner = %d/%d/%d, want a red tint", r, g, b)
}
if r, g, b := rgbAt(out, centerX, centerY); r != 128 || g != 128 || b != 128 {
t.Fatalf("color vignette changed the center: %d/%d/%d", r, g, b)
}
})
t.Run("colorize mode fills the edges", func(t *testing.T) {
out := applyEffects(imaging.Clone(src), EffectsParams{
Vignette: VignetteParams{Mode: VignetteColorize, Amount: 100, Color: "#ff0000"},
}, 0)
if r, g, b := rgbAt(out, cornerX, cornerY); r != 255 || g != 0 || b != 0 {
t.Fatalf("colorize corner = %d/%d/%d, want 255/0/0", r, g, b)
}
if r, g, b := rgbAt(out, centerX, centerY); r != 128 || g != 128 || b != 128 {
t.Fatalf("colorize changed the center: %d/%d/%d", r, g, b)
}
})
t.Run("highlight protection", func(t *testing.T) {
bright := solidImage(64, 64, 240)
plain := applyEffects(imaging.Clone(bright), EffectsParams{
Vignette: VignetteParams{Mode: VignetteLight, Amount: 100},
}, 0)
protected := applyEffects(imaging.Clone(bright), EffectsParams{
Vignette: VignetteParams{Mode: VignetteLight, Amount: 100, Highlights: 100},
}, 0)
if pixelAt(protected, cornerX, cornerY) <= pixelAt(plain, cornerX, cornerY) {
t.Fatalf("highlight protection did not preserve the corner: %d <= %d",
pixelAt(protected, cornerX, cornerY), pixelAt(plain, cornerX, cornerY))
}
})
}
func TestGrainDeterminism(t *testing.T) {
src := gradientImage(64, 64)
grain := EffectsParams{Grain: GrainParams{Amount: 70, Size: 30, Roughness: 60}}
first := applyEffects(imaging.Clone(src), grain, 12345)
second := applyEffects(imaging.Clone(src), grain, 12345)
if !bytes.Equal(first.Pix, second.Pix) {
t.Fatal("two renders with the same parameters and seed differ")
}
if bytes.Equal(first.Pix, src.Pix) {
t.Fatal("grain did not change the image")
}
other := applyEffects(imaging.Clone(src), grain, 999)
if bytes.Equal(first.Pix, other.Pix) {
t.Fatal("a different seed produced the same grain")
}
zero := applyEffects(imaging.Clone(src), EffectsParams{
Grain: GrainParams{Amount: 0, Size: 30, Roughness: 60},
}, 12345)
if !bytes.Equal(zero.Pix, src.Pix) {
t.Fatal("zero grain strength changed the image")
}
// The full render path seeds the same noise from the photo id.
data := mustEncodePNG(t, src)
a, err := decodeAndAdjust(data, EditParams{Effects: grain}, editSeed("photo-1"))
if err != nil {
t.Fatalf("decode and adjust: %v", err)
}
b, err := decodeAndAdjust(data, EditParams{Effects: grain}, editSeed("photo-1"))
if err != nil {
t.Fatalf("decode and adjust again: %v", err)
}
if !bytes.Equal(a.Pix, b.Pix) {
t.Fatal("repeated decodeAndAdjust renders differ")
}
}
func TestEffectsKeepTransparentPixels(t *testing.T) {
src := image.NewNRGBA(image.Rect(0, 0, 32, 32))
for i := 0; i < len(src.Pix); i += 4 {
src.Pix[i], src.Pix[i+1], src.Pix[i+2], src.Pix[i+3] = 200, 10, 30, 0
}
before := append([]uint8(nil), src.Pix...)
out := applyEffects(src, EffectsParams{
Texture: 60,
Clarity: 60,
Dehaze: 60,
Vignette: VignetteParams{
Mode: VignetteColorize, Amount: 100, Color: "#00ff00",
},
Grain: GrainParams{Amount: 100, Size: 40, Roughness: 80},
}, 7)
if !bytes.Equal(out.Pix, before) {
t.Fatal("effects changed transparent pixels")
}
}
// solidImage returns a uniform opaque image.
func solidImage(w, h int, value uint8) *image.NRGBA {
img := image.NewNRGBA(image.Rect(0, 0, w, h))
for i := 0; i < len(img.Pix); i += 4 {
img.Pix[i] = value
img.Pix[i+1] = value
img.Pix[i+2] = value
img.Pix[i+3] = 255
}
return img
}
// gradientImage returns an opaque image with smooth horizontal and vertical
// variation, so every effect has something to work with.
func gradientImage(w, h int) *image.NRGBA {
img := image.NewNRGBA(image.Rect(0, 0, w, h))
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
i := y*img.Stride + x*4
img.Pix[i] = uint8(20 + x*3)
img.Pix[i+1] = uint8(30 + y*3)
img.Pix[i+2] = uint8(40 + (x + y))
img.Pix[i+3] = 255
}
}
return img
}
// checkerImage returns a fine checkerboard, the high-frequency input of the
// local-contrast tests.
func checkerImage(w, h int, dark, light uint8) *image.NRGBA {
img := image.NewNRGBA(image.Rect(0, 0, w, h))
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
i := y*img.Stride + x*4
v := dark
if (x+y)%2 == 0 {
v = light
}
img.Pix[i] = v
img.Pix[i+1] = v
img.Pix[i+2] = v
img.Pix[i+3] = 255
}
}
return img
}
// hazyScene builds a synthetic landscape: a bright sky band and a colored
// checker with a brightness gradient. It represents the "clear" frame.
func hazyScene(w, h int) *image.NRGBA {
img := image.NewNRGBA(image.Rect(0, 0, w, h))
sky := h / 6
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
i := y*img.Stride + x*4
if y < sky {
img.Pix[i], img.Pix[i+1], img.Pix[i+2] = 235, 235, 235
img.Pix[i+3] = 255
continue
}
t := float64(x) / float64(w-1)
if (x/16+y/16)%2 == 0 {
img.Pix[i] = uint8(40 + 180*t)
img.Pix[i+1] = uint8(40 + 60*t)
img.Pix[i+2] = uint8(40 + 40*t)
} else {
img.Pix[i] = uint8(40 + 40*t)
img.Pix[i+1] = uint8(40 + 120*t)
img.Pix[i+2] = uint8(40 + 180*t)
}
img.Pix[i+3] = 255
}
}
return img
}
// addHaze mixes the frame toward an atmospheric color.
func addHaze(src *image.NRGBA, haze float64, atmosphere uint8) *image.NRGBA {
out := imaging.Clone(src)
w, h := out.Rect.Dx(), out.Rect.Dy()
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
i := y*out.Stride + x*4
for c := 0; c < 3; c++ {
out.Pix[i+c] = uint8(float64(out.Pix[i+c])*(1-haze) + float64(atmosphere)*haze + 0.5)
}
}
}
return out
}
// lumaVariance is the global variance of the luminance.
func lumaVariance(img *image.NRGBA) float64 {
plane := lumaPlane(img)
var sum float64
for _, v := range plane {
sum += float64(v)
}
mean := sum / float64(len(plane))
var variance float64
for _, v := range plane {
d := float64(v) - mean
variance += d * d
}
return variance / float64(len(plane))
}
// lumaStdDev is the contrast measure of the dehaze test.
func lumaStdDev(img *image.NRGBA) float64 {
return math.Sqrt(lumaVariance(img))
}
// meanSaturation is the average channel spread of the image.
func meanSaturation(img *image.NRGBA) float64 {
w, h := img.Rect.Dx(), img.Rect.Dy()
var sum float64
for y := 0; y < h; y++ {
for x := 0; x < w; x++ {
i := y*img.Stride + x*4
mx := max(img.Pix[i], max(img.Pix[i+1], img.Pix[i+2]))
mn := min(img.Pix[i], min(img.Pix[i+1], img.Pix[i+2]))
sum += float64(mx - mn)
}
}
return sum / float64(w*h)
}
func pixelAt(img *image.NRGBA, x, y int) uint8 {
return img.Pix[y*img.Stride+x*4]
}
func rgbAt(img *image.NRGBA, x, y int) (uint8, uint8, uint8) {
i := y*img.Stride + x*4
return img.Pix[i], img.Pix[i+1], img.Pix[i+2]
}
+4 -3
View File
@@ -123,14 +123,15 @@ func (h *Handler) Download(c *gin.Context) {
// the photo metadata and the edited version is rendered in the background. // the photo metadata and the edited version is rendered in the background.
func (h *Handler) Edit(c *gin.Context) { func (h *Handler) Edit(c *gin.Context) {
var req struct { var req struct {
Light LightParams `json:"light"` Light LightParams `json:"light"`
Color ColorParams `json:"color"` Color ColorParams `json:"color"`
Effects EffectsParams `json:"effects"`
} }
if err := c.ShouldBindJSON(&req); err != nil { if err := c.ShouldBindJSON(&req); err != nil {
httpx.RespondError(c, httpx.BadRequest("invalid_request", "edit params are required")) httpx.RespondError(c, httpx.BadRequest("invalid_request", "edit params are required"))
return return
} }
p, err := h.svc.EditPhoto(c.Request.Context(), c.Param("id"), auth.UserID(c), EditParams{Light: req.Light, Color: req.Color}) p, err := h.svc.EditPhoto(c.Request.Context(), c.Param("id"), auth.UserID(c), EditParams{Light: req.Light, Color: req.Color, Effects: req.Effects})
if err != nil { if err != nil {
httpx.RespondError(c, err) httpx.RespondError(c, err)
return return
+13 -2
View File
@@ -6,6 +6,7 @@ import (
"crypto/sha256" "crypto/sha256"
"encoding/hex" "encoding/hex"
"errors" "errors"
"hash/fnv"
"io" "io"
"log/slog" "log/slog"
"os" "os"
@@ -202,7 +203,7 @@ func (w *Worker) generateEdit(ctx context.Context, photoID string) {
w.failEdit(ctx, photoID, "fetch original: "+err.Error()) w.failEdit(ctx, photoID, "fetch original: "+err.Error())
return return
} }
edited, err := decodeAndAdjust(data, params) edited, err := decodeAndAdjust(data, params, editSeed(photoID))
if err != nil { if err != nil {
w.failEdit(ctx, photoID, "decode original: "+err.Error()) w.failEdit(ctx, photoID, "decode original: "+err.Error())
return return
@@ -211,7 +212,8 @@ func (w *Worker) generateEdit(ctx context.Context, photoID string) {
if err != nil { if err != nil {
w.failEdit(ctx, photoID, "build edited variants: "+err.Error()) w.failEdit(ctx, photoID, "build edited variants: "+err.Error())
return return
} // The edit belongs to this photo only, so the variants are not shared }
// The edit belongs to this photo only, so the variants are not shared
// with the copies of the same original. // with the copies of the same original.
owner := []string{photoID} owner := []string{photoID}
if err := w.createVariant(ctx, owner, RoleEditThumb, thumb); err != nil { if err := w.createVariant(ctx, owner, RoleEditThumb, thumb); err != nil {
@@ -240,6 +242,15 @@ func (w *Worker) generateEdit(ctx context.Context, photoID string) {
w.notify(ctx, photoID) w.notify(ctx, photoID)
} }
// editSeed is the deterministic seed of the grain render: the FNV-1a hash of the
// photo id. It depends on the photo and not on the parameters, so a repeated
// render of the same edit produces the same noise pattern.
func editSeed(photoID string) uint64 {
h := fnv.New64a()
_, _ = h.Write([]byte(photoID))
return h.Sum64()
}
func (w *Worker) failEdit(ctx context.Context, photoID, msg string) { func (w *Worker) failEdit(ctx context.Context, photoID, msg string) {
slog.Warn("edit job failed", "photo", photoID, "error", msg) slog.Warn("edit job failed", "photo", photoID, "error", msg)
_ = w.svc.store.FailEditJob(ctx, photoID, msg, maxVariantAttempts) _ = w.svc.store.FailEditJob(ctx, photoID, msg, maxVariantAttempts)
+206 -31
View File
@@ -8,30 +8,44 @@
import { edit } from '$lib/stores/edit.svelte'; import { edit } from '$lib/stores/edit.svelte';
import { eyedropper } from '$lib/stores/eyedropper.svelte'; import { eyedropper } from '$lib/stores/eyedropper.svelte';
import { auth } from '$lib/stores/auth.svelte'; import { auth } from '$lib/stores/auth.svelte';
import {
loadSectionCollapse,
saveSectionCollapse,
type SectionCollapse
} from '$lib/editor-sections';
import { applyColor, applyLight } from '$lib/light-wasm'; import { applyColor, applyLight } from '$lib/light-wasm';
import { import {
CHANNEL_COLORS, CHANNEL_COLORS,
CHANNEL_LABELS, CHANNEL_LABELS,
COLOR_SLIDERS, COLOR_SLIDERS,
CURVE_CHANNELS, CURVE_CHANNELS,
EFFECT_SLIDERS,
GRAIN_SLIDERS,
GRADING_WHEELS, GRADING_WHEELS,
LIGHT_SLIDERS, LIGHT_SLIDERS,
MAX_CURVE_POINTS, MAX_CURVE_POINTS,
MIXER_BANDS, MIXER_BANDS,
VIGNETTE_MODES,
VIGNETTE_SLIDERS,
curveSvgPath, curveSvgPath,
effectiveCurvePoints, effectiveCurvePoints,
emptyEditParams, emptyEditParams,
isEmptyEditParams, isEmptyEditParams,
normalizeEditParams, normalizeEditParams,
normalizeVignetteColor,
readEditParams, readEditParams,
whiteBalanceFromRGB, whiteBalanceFromRGB,
type ColorSliderKey, type ColorSliderKey,
type CurveChannel, type CurveChannel,
type CurvePoint, type CurvePoint,
type EditParams, type EditParams,
type EffectSliderKey,
type GrainSliderKey,
type GradingWheelKey, type GradingWheelKey,
type MixerBand, type MixerBand,
type MixerBandKey type MixerBandKey,
type VignetteMode,
type VignetteSliderKey
} from '$lib/edit'; } from '$lib/edit';
import { import {
findActiveCurvePreset, findActiveCurvePreset,
@@ -57,15 +71,15 @@
// перетирать более свежие правки (например, после переключения фото). // перетирать более свежие правки (например, после переключения фото).
let saveSequence = 0; let saveSequence = 0;
const latestSaveByPhoto = new Map<string, number>(); const latestSaveByPhoto = new Map<string, number>();
let collapsed = $state(false); let collapsed = $state<SectionCollapse>(loadSectionCollapse());
let curveCollapsed = $state(false); // Состояние секций хранится в браузере: панель открывается в том же виде
// после перезагрузки и переключения фото.
$effect(() => {
saveSectionCollapse(collapsed);
});
let channel = $state<CurveChannel>('rgb'); let channel = $state<CurveChannel>('rgb');
let colorCollapsed = $state(false);
let mixerCollapsed = $state(false);
let mixerTab = $state<keyof MixerBand>('hue'); let mixerTab = $state<keyof MixerBand>('hue');
let mixerBand = $state<MixerBandKey>('red'); let mixerBand = $state<MixerBandKey>('red');
let pointColorCollapsed = $state(false);
let correctionCollapsed = $state(false);
let correctionView = $state<'all' | 'midtones' | 'split' | 'highlights'>('all'); let correctionView = $state<'all' | 'midtones' | 'split' | 'highlights'>('all');
let wbPreset = $state('as-shot'); let wbPreset = $state('as-shot');
@@ -337,6 +351,57 @@
scheduleSave(); scheduleSave();
} }
function onEffectInput(key: EffectSliderKey, value: number) {
params = { ...params, effects: { ...params.effects, [key]: value } };
edit.set(photo.id, params);
}
function onVignetteInput(key: VignetteSliderKey, value: number) {
params = {
...params,
effects: {
...params.effects,
vignette: { ...params.effects.vignette, [key]: value }
}
};
edit.set(photo.id, params);
}
function onVignetteMode(mode: VignetteMode) {
params = {
...params,
effects: { ...params.effects, vignette: { ...params.effects.vignette, mode } }
};
edit.set(photo.id, params);
scheduleSave();
}
function onVignetteColor(value: string) {
params = {
...params,
effects: {
...params.effects,
vignette: { ...params.effects.vignette, color: normalizeVignetteColor(value) }
}
};
edit.set(photo.id, params);
}
function onGrainInput(key: GrainSliderKey, value: number) {
params = {
...params,
effects: { ...params.effects, grain: { ...params.effects.grain, [key]: value } }
};
edit.set(photo.id, params);
}
function onEffectsCommit() {
if (!canEdit) return;
params = normalizeEditParams(params);
edit.set(photo.id, params);
scheduleSave();
}
function onMixerInput(band: MixerBandKey, component: keyof MixerBand, value: number) { function onMixerInput(band: MixerBandKey, component: keyof MixerBand, value: number) {
const current = params.color.mixer[band]; const current = params.color.mixer[band];
params = { params = {
@@ -654,12 +719,12 @@
<button <button
type="button" type="button"
class="text-text hover:text-primary flex items-center gap-1 text-sm font-semibold" class="text-text hover:text-primary flex items-center gap-1 text-sm font-semibold"
aria-expanded={!collapsed} aria-expanded={!collapsed.light}
onclick={() => (collapsed = !collapsed)} onclick={() => (collapsed.light = !collapsed.light)}
> >
<Icon <Icon
name="expand_more" name="expand_more"
class="size-4 transition-transform {collapsed ? '-rotate-90' : ''}" class="size-4 transition-transform {collapsed.light ? '-rotate-90' : ''}"
/> />
Свет Свет
</button> </button>
@@ -675,7 +740,7 @@
</button> </button>
</div> </div>
{#if !collapsed} {#if !collapsed.light}
<div class="mt-3 space-y-4"> <div class="mt-3 space-y-4">
<div class="space-y-2.5"> <div class="space-y-2.5">
{#each LIGHT_SLIDERS as slider (slider.key)} {#each LIGHT_SLIDERS as slider (slider.key)}
@@ -698,9 +763,9 @@
<button <button
type="button" type="button"
class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold" class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold"
aria-expanded={!curveCollapsed} aria-expanded={!collapsed.curve}
aria-controls="light-curve" aria-controls="light-curve"
onclick={() => (curveCollapsed = !curveCollapsed)} onclick={() => (collapsed.curve = !collapsed.curve)}
> >
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<Icon name="show_chart" class="size-4" /> <Icon name="show_chart" class="size-4" />
@@ -708,11 +773,11 @@
</span> </span>
<Icon <Icon
name="expand_more" name="expand_more"
class="size-4 transition-transform {curveCollapsed ? '-rotate-90' : ''}" class="size-4 transition-transform {collapsed.curve ? '-rotate-90' : ''}"
/> />
</button> </button>
{#if !curveCollapsed} {#if !collapsed.curve}
<div id="light-curve" class="mt-2"> <div id="light-curve" class="mt-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
{#each CURVE_CHANNELS as ch (ch)} {#each CURVE_CHANNELS as ch (ch)}
@@ -842,13 +907,13 @@
<button <button
type="button" type="button"
class="text-text hover:text-primary flex items-center gap-1 text-sm font-semibold" class="text-text hover:text-primary flex items-center gap-1 text-sm font-semibold"
aria-expanded={!colorCollapsed} aria-expanded={!collapsed.color}
aria-controls="color-panel" aria-controls="color-panel"
onclick={() => (colorCollapsed = !colorCollapsed)} onclick={() => (collapsed.color = !collapsed.color)}
> >
<Icon <Icon
name="expand_more" name="expand_more"
class="size-4 transition-transform {colorCollapsed ? '-rotate-90' : ''}" class="size-4 transition-transform {collapsed.color ? '-rotate-90' : ''}"
/> />
Цвет Цвет
</button> </button>
@@ -857,7 +922,7 @@
</span> </span>
</div> </div>
{#if !colorCollapsed} {#if !collapsed.color}
<div id="color-panel" class="mt-3 space-y-4"> <div id="color-panel" class="mt-3 space-y-4">
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -918,9 +983,9 @@
<button <button
type="button" type="button"
class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold" class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold"
aria-expanded={!mixerCollapsed} aria-expanded={!collapsed.mixer}
aria-controls="color-mixer" aria-controls="color-mixer"
onclick={() => (mixerCollapsed = !mixerCollapsed)} onclick={() => (collapsed.mixer = !collapsed.mixer)}
> >
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<Icon name="tune" class="size-4" /> <Icon name="tune" class="size-4" />
@@ -928,10 +993,10 @@
</span> </span>
<Icon <Icon
name="expand_more" name="expand_more"
class="size-4 transition-transform {mixerCollapsed ? '-rotate-90' : ''}" class="size-4 transition-transform {collapsed.mixer ? '-rotate-90' : ''}"
/> />
</button> </button>
{#if !mixerCollapsed} {#if !collapsed.mixer}
<div id="color-mixer" class="mt-2"> <div id="color-mixer" class="mt-2">
<div class="flex items-center justify-between gap-1"> <div class="flex items-center justify-between gap-1">
{#each MIXER_BANDS as band (band.key)} {#each MIXER_BANDS as band (band.key)}
@@ -1015,9 +1080,9 @@
<button <button
type="button" type="button"
class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold" class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold"
aria-expanded={!pointColorCollapsed} aria-expanded={!collapsed.pointColor}
aria-controls="color-point" aria-controls="color-point"
onclick={() => (pointColorCollapsed = !pointColorCollapsed)} onclick={() => (collapsed.pointColor = !collapsed.pointColor)}
> >
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<Icon name="colorize" class="size-4" /> <Icon name="colorize" class="size-4" />
@@ -1025,10 +1090,10 @@
</span> </span>
<Icon <Icon
name="expand_more" name="expand_more"
class="size-4 transition-transform {pointColorCollapsed ? '-rotate-90' : ''}" class="size-4 transition-transform {collapsed.pointColor ? '-rotate-90' : ''}"
/> />
</button> </button>
{#if !pointColorCollapsed} {#if !collapsed.pointColor}
<div id="color-point" class="text-text-muted mt-2 flex items-start gap-2 text-xs"> <div id="color-point" class="text-text-muted mt-2 flex items-start gap-2 text-xs">
<Icon name="colorize" class="mt-0.5 size-4 shrink-0" /> <Icon name="colorize" class="mt-0.5 size-4 shrink-0" />
<span>Выберите цвет на фото пипеткой.</span> <span>Выберите цвет на фото пипеткой.</span>
@@ -1040,9 +1105,9 @@
<button <button
type="button" type="button"
class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold" class="text-text hover:text-primary flex w-full items-center justify-between gap-1 text-xs font-semibold"
aria-expanded={!correctionCollapsed} aria-expanded={!collapsed.correction}
aria-controls="color-correction" aria-controls="color-correction"
onclick={() => (correctionCollapsed = !correctionCollapsed)} onclick={() => (collapsed.correction = !collapsed.correction)}
> >
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<Icon name="blur_on" class="size-4" /> <Icon name="blur_on" class="size-4" />
@@ -1050,10 +1115,10 @@
</span> </span>
<Icon <Icon
name="expand_more" name="expand_more"
class="size-4 transition-transform {correctionCollapsed ? '-rotate-90' : ''}" class="size-4 transition-transform {collapsed.correction ? '-rotate-90' : ''}"
/> />
</button> </button>
{#if !correctionCollapsed} {#if !collapsed.correction}
<div id="color-correction" class="mt-2 space-y-4"> <div id="color-correction" class="mt-2 space-y-4">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
{#each CORRECTION_VIEWS as view (view.key)} {#each CORRECTION_VIEWS as view (view.key)}
@@ -1169,6 +1234,116 @@
{/if} {/if}
</div> </div>
<div class="border-border border-t pt-3">
<div class="flex items-center justify-between gap-2">
<button
type="button"
class="text-text hover:text-primary flex items-center gap-1 text-sm font-semibold"
aria-expanded={!collapsed.effects}
aria-controls="effects-panel"
onclick={() => (collapsed.effects = !collapsed.effects)}
>
<Icon
name="expand_more"
class="size-4 transition-transform {collapsed.effects ? '-rotate-90' : ''}"
/>
Эффекты
</button>
<span class="text-text-muted" title="Показать эффекты">
<Icon name="visibility" class="size-4" />
</span>
</div>
{#if !collapsed.effects}
<div id="effects-panel" class="mt-3 space-y-4">
<div class="space-y-2.5">
{#each EFFECT_SLIDERS as slider (slider.key)}
<EditSlider
id="effect-{slider.key}"
label={slider.label}
value={params.effects[slider.key]}
min={slider.min}
max={slider.max}
step={slider.step}
disabled={!canEdit}
format={formatValue}
oninput={(value) => onEffectInput(slider.key, value)}
onchange={onEffectsCommit}
/>
{/each}
</div>
<div class="border-border space-y-2.5 border-t pt-3">
<div class="flex items-center gap-1" role="group" aria-label="Режим виньетки">
{#each VIGNETTE_MODES as mode (mode.key)}
<button
type="button"
class="rounded-md px-2 py-1 text-xs disabled:opacity-40 {params.effects.vignette
.mode === mode.key
? 'bg-bg-muted text-text'
: 'text-text-muted hover:text-text'}"
aria-pressed={params.effects.vignette.mode === mode.key}
disabled={!canEdit}
onclick={() => onVignetteMode(mode.key)}
>
{mode.label}
</button>
{/each}
</div>
{#each VIGNETTE_SLIDERS as slider (slider.key)}
<EditSlider
id="vignette-{slider.key}"
label={slider.label}
value={params.effects.vignette[slider.key]}
min={slider.min}
max={slider.max}
step={slider.step}
resetValue={slider.key === 'midpoint' || slider.key === 'feather' ? 50 : 0}
disabled={!canEdit}
format={slider.min < 0 ? formatValue : undefined}
oninput={(value) => onVignetteInput(slider.key, value)}
onchange={onEffectsCommit}
/>
{/each}
{#if params.effects.vignette.mode !== 'light'}
<label class="flex items-center justify-between gap-2 text-xs">
<span class="text-text">Цвет виньетки</span>
<input
type="color"
class="border-border bg-bg h-6 w-10 cursor-pointer rounded border disabled:opacity-40"
value={params.effects.vignette.color}
title="Цвет виньетки"
disabled={!canEdit}
oninput={(e) => onVignetteColor(e.currentTarget.value)}
onchange={onEffectsCommit}
/>
</label>
{/if}
</div>
<div class="border-border space-y-2.5 border-t pt-3">
<div class="text-text text-xs font-semibold">Зерно</div>
{#each GRAIN_SLIDERS as slider (slider.key)}
<EditSlider
id="grain-{slider.key}"
label={slider.label}
value={params.effects.grain[slider.key]}
min={slider.min}
max={slider.max}
step={slider.step}
resetValue={slider.key === 'size' ? 25 : slider.key === 'roughness' ? 50 : 0}
disabled={!canEdit}
oninput={(value) => onGrainInput(slider.key, value)}
onchange={onEffectsCommit}
/>
{/each}
</div>
</div>
{/if}
</div>
{#if busy} {#if busy}
<p class="text-text-subtle text-xs">Сохраняем на сервере…</p> <p class="text-text-subtle text-xs">Сохраняем на сервере…</p>
{:else if dirty && !busy} {:else if dirty && !busy}
+19 -13
View File
@@ -42,6 +42,10 @@
const canEditPhoto = $derived( const canEditPhoto = $derived(
canEdit || (photo?.uploader_id === auth.user?.id && role !== 'viewer') canEdit || (photo?.uploader_id === auth.user?.id && role !== 'viewer')
); );
// Редактирование доступно только из просмотрщика: в режиме сетки вкладка
// «Редактирование» скрыта, панель показывает «Сведения». Сохранённая
// вкладка при этом не теряется — она снова станет активной в просмотрщике.
const activeTab = $derived(viewer ? tab : 'info');
let editingName = $state(false); let editingName = $state(false);
let nameDraft = $state(''); let nameDraft = $state('');
@@ -242,26 +246,28 @@ const tabClass =
role="tab" role="tab"
id="photo-tab-info" id="photo-tab-info"
aria-controls="photo-panel-info" aria-controls="photo-panel-info"
aria-selected={tab === 'info'} aria-selected={activeTab === 'info'}
class={tabClass} class={tabClass}
onclick={() => (tab = 'info')} onclick={() => (tab = 'info')}
> >
Сведения Сведения
</button> </button>
<button {#if viewer}
type="button" <button
role="tab" type="button"
id="photo-tab-edit" role="tab"
aria-controls="photo-panel-edit" id="photo-tab-edit"
aria-selected={tab === 'edit'} aria-controls="photo-panel-edit"
class={tabClass} aria-selected={activeTab === 'edit'}
onclick={() => (tab = 'edit')} class={tabClass}
> onclick={() => (tab = 'edit')}
Редактирование >
</button> Редактирование
</button>
{/if}
</div> </div>
{#if tab === 'edit'} {#if activeTab === 'edit'}
<div id="photo-panel-edit" role="tabpanel" aria-labelledby="photo-tab-edit"> <div id="photo-panel-edit" role="tabpanel" aria-labelledby="photo-tab-edit">
<PhotoEditPanel <PhotoEditPanel
{photo} {photo}
+15 -1
View File
@@ -14,6 +14,8 @@
import { applyColor, applyLight, initLightWasm } from '$lib/light-wasm'; import { applyColor, applyLight, initLightWasm } from '$lib/light-wasm';
import { WebGLPreview } from '$lib/webgl-preview'; import { WebGLPreview } from '$lib/webgl-preview';
import { import {
applyEffectsToPixels,
effectsSeed,
isEmptyColor, isEmptyColor,
isEmptyEditParams, isEmptyEditParams,
isEmptyLight, isEmptyLight,
@@ -296,7 +298,10 @@
viewport: { width, height }, viewport: { width, height },
dest, dest,
light: liveParams.light, light: liveParams.light,
color: liveParams.color color: liveParams.color,
effects: liveParams.effects,
seed: effectsSeed(current?.id ?? ''),
lowQuality: previewLow
}); });
if (ok) return; if (ok) return;
useGL = false; useGL = false;
@@ -325,6 +330,14 @@
const frame = ctx.getImageData(0, 0, bw, bh); const frame = ctx.getImageData(0, 0, bw, bh);
if (!isEmptyLight(liveParams.light)) applyLight(frame.data, liveParams.light); if (!isEmptyLight(liveParams.light)) applyLight(frame.data, liveParams.light);
if (!isEmptyColor(liveParams.color)) applyColor(frame.data, liveParams.color); if (!isEmptyColor(liveParams.color)) applyColor(frame.data, liveParams.color);
// CPU-фолбэк считает только попиксельные эффекты: виньетку и зерно.
applyEffectsToPixels(
frame.data,
liveParams.effects,
bw,
bh,
effectsSeed(current?.id ?? '')
);
ctx.putImageData(frame, 0, 0); ctx.putImageData(frame, 0, 0);
} }
@@ -343,6 +356,7 @@
scale; scale;
liveParams.light; liveParams.light;
liveParams.color; liveParams.color;
liveParams.effects;
displaySrc; displaySrc;
previewLow; previewLow;
useGL; useGL;
+187
View File
@@ -1,14 +1,20 @@
import { describe, expect, it } from 'vitest'; import { describe, expect, it } from 'vitest';
import { import {
applyColorToPixels, applyColorToPixels,
applyGrainToPixels,
applyVignetteToPixels,
buildCurveLUT, buildCurveLUT,
curveSvgPath, curveSvgPath,
effectiveCurvePoints, effectiveCurvePoints,
effectsSeed,
emptyColor, emptyColor,
emptyEditParams, emptyEditParams,
emptyEffects,
isEmptyColor, isEmptyColor,
isEmptyEditParams, isEmptyEditParams,
isEmptyEffects,
normalizeEditParams, normalizeEditParams,
normalizeVignette,
readEditParams, readEditParams,
whiteBalanceFromRGB whiteBalanceFromRGB
} from './edit'; } from './edit';
@@ -186,6 +192,187 @@ describe('цветовые параметры', () => {
}); });
}); });
describe('эффекты', () => {
function uniform(width: number, height: number, value = 128): Uint8ClampedArray {
const pixels = new Uint8ClampedArray(width * height * 4);
for (let i = 0; i < pixels.length; i += 4) {
pixels[i] = value;
pixels[i + 1] = value;
pixels[i + 2] = value;
pixels[i + 3] = 255;
}
return pixels;
}
function channel(pixels: Uint8ClampedArray, width: number, x: number, y: number): [number, number, number] {
const i = (y * width + x) * 4;
return [pixels[i], pixels[i + 1], pixels[i + 2]];
}
it('зажимает значения и заполняет дефолты', () => {
const params = normalizeEditParams({
light: emptyEditParams().light,
color: emptyColor(),
effects: {
texture: 500,
clarity: -500,
dehaze: 50,
vignette: {
mode: 'weird' as never,
amount: 200,
midpoint: -10,
feather: 300,
roundness: 500,
highlights: -5,
color: 'red'
},
grain: { amount: -10, size: 500, roughness: -5 }
}
});
expect(params.effects.texture).toBe(100);
expect(params.effects.clarity).toBe(-100);
expect(params.effects.dehaze).toBe(50);
expect(params.effects.vignette.mode).toBe('light');
expect(params.effects.vignette.amount).toBe(100);
expect(params.effects.vignette.midpoint).toBe(0);
expect(params.effects.vignette.feather).toBe(100);
expect(params.effects.vignette.roundness).toBe(100);
expect(params.effects.vignette.highlights).toBe(0);
expect(params.effects.vignette.color).toBe('#000000');
expect(params.effects.grain.amount).toBe(0);
expect(params.effects.grain.size).toBe(100);
expect(params.effects.grain.roughness).toBe(0);
});
it('нормализует цвет виньетки', () => {
expect(normalizeVignette({ color: '#AABBCC' }).color).toBe('#aabbcc');
expect(normalizeVignette({ color: '#abc' }).color).toBe('#aabbcc');
expect(normalizeVignette({ color: 'нет' }).color).toBe('#000000');
expect(normalizeVignette({}).midpoint).toBe(50);
expect(normalizeVignette({}).feather).toBe(50);
});
it('считает пустыми эффекты без силы', () => {
expect(isEmptyEffects(emptyEffects())).toBe(true);
expect(isEmptyEffects({ ...emptyEffects(), texture: 1 })).toBe(false);
const noVignettePower = emptyEffects();
noVignettePower.vignette.amount = 0;
noVignettePower.vignette.midpoint = 90;
noVignettePower.vignette.color = '#ff0000';
expect(isEmptyEffects(noVignettePower)).toBe(true);
const grain = emptyEffects();
grain.grain.amount = 1;
expect(isEmptyEffects(grain)).toBe(false);
});
it('читает эффекты из метаданных и не теряет свет и цвет', () => {
const photo = {
edit_params: {
light: { exposure: 0.5 },
color: { temperature: 20 },
effects: { texture: 30, grain: { amount: 10 } }
}
} as unknown as Photo;
const params = readEditParams(photo);
expect(params.light.exposure).toBe(0.5);
expect(params.color.temperature).toBe(20);
expect(params.effects.texture).toBe(30);
expect(params.effects.grain.amount).toBe(10);
expect(params.effects.grain.size).toBe(25);
expect(isEmptyEditParams(params)).toBe(false);
});
it('затемняет края и не трогает центр', () => {
const pixels = uniform(9, 9);
applyVignetteToPixels(
pixels,
{ ...emptyEffects().vignette, amount: 100 },
9,
9
);
const center = channel(pixels, 9, 4, 4);
const corner = channel(pixels, 9, 0, 0);
expect(center).toEqual([128, 128, 128]);
expect(corner[0]).toBeLessThan(center[0]);
});
it('осветляет края при отрицательной силе', () => {
const pixels = uniform(9, 9);
applyVignetteToPixels(
pixels,
{ ...emptyEffects().vignette, amount: -100 },
9,
9
);
expect(channel(pixels, 9, 0, 0)[0]).toBeGreaterThan(128);
});
it('тонирует и заливает края цветом', () => {
const tinted = uniform(9, 9);
applyVignetteToPixels(
tinted,
{
...emptyEffects().vignette,
mode: 'color',
amount: 100,
color: '#ff0000'
},
9,
9
);
const colorCorner = channel(tinted, 9, 0, 0);
expect(colorCorner[0]).toBeGreaterThan(colorCorner[1]);
expect(colorCorner[0]).toBeGreaterThan(colorCorner[2]);
expect(channel(tinted, 9, 4, 4)).toEqual([128, 128, 128]);
const painted = uniform(9, 9);
applyVignetteToPixels(
painted,
{
...emptyEffects().vignette,
mode: 'colorize',
amount: 100,
color: '#ff0000'
},
9,
9
);
expect(channel(painted, 9, 0, 0)).toEqual([255, 0, 0]);
});
it('не трогает прозрачные пиксели', () => {
const pixels = new Uint8ClampedArray([10, 20, 30, 0]);
applyVignetteToPixels(
pixels,
{ ...emptyEffects().vignette, amount: 100 },
1,
1
);
expect(Array.from(pixels)).toEqual([10, 20, 30, 0]);
});
it('делает зерно детерминированным', () => {
const seed = effectsSeed('photo-1');
const first = uniform(16, 16);
const second = uniform(16, 16);
const grain = { ...emptyEffects().grain, amount: 80 };
applyGrainToPixels(first, grain, 16, 16, seed);
applyGrainToPixels(second, grain, 16, 16, seed);
expect(Array.from(first)).toEqual(Array.from(second));
expect(first[0]).not.toBe(128);
const other = uniform(16, 16);
applyGrainToPixels(other, grain, 16, 16, effectsSeed('photo-2'));
expect(Array.from(other)).not.toEqual(Array.from(first));
});
it('не меняет кадр при нулевой силе зерна', () => {
const pixels = uniform(8, 8);
applyGrainToPixels(pixels, emptyEffects().grain, 8, 8, effectsSeed('photo-1'));
expect(Array.from(pixels)).toEqual(Array.from(uniform(8, 8)));
});
});
describe('кривая', () => { describe('кривая', () => {
const medium = [ const medium = [
{ x: 0, y: 0 }, { x: 0, y: 0 },
+340 -6
View File
@@ -77,9 +77,49 @@ export interface ColorParams {
correction: ColorCorrection; correction: ColorCorrection;
} }
export type VignetteMode = 'light' | 'color' | 'colorize';
/** Параметры виньетки: геометрия общая для всех режимов. */
export interface VignetteParams {
/** Режим: «Свет», «Цвет» или «Закарасить». */
mode: VignetteMode;
/** Сила виньетки, -100..100. */
amount: number;
/** Средняя точка, 0..100. */
midpoint: number;
/** Растушёвка, 0..100. */
feather: number;
/** Округлость, -100..100. */
roundness: number;
/** Защита светов, 0..100. */
highlights: number;
/** Цвет виньетки для режимов color/colorize, "#rrggbb". */
color: string;
}
/** Параметры зерна. */
export interface GrainParams {
/** Сила зерна, 0..100. */
amount: number;
/** Размер зерна, 0..100. */
size: number;
/** Шероховатость, 0..100. */
roughness: number;
}
/** Блок «Эффекты»: пространственные эффекты, виньетка и зерно. */
export interface EffectsParams {
texture: number;
clarity: number;
dehaze: number;
vignette: VignetteParams;
grain: GrainParams;
}
export interface EditParams { export interface EditParams {
light: LightParams; light: LightParams;
color: ColorParams; color: ColorParams;
effects: EffectsParams;
} }
/** Полосы цветового микшера: ключ, подпись и центр оттенка в градусах. */ /** Полосы цветового микшера: ключ, подпись и центр оттенка в градусах. */
@@ -106,6 +146,44 @@ export const COLOR_SLIDERS = [
export type ColorSliderKey = (typeof COLOR_SLIDERS)[number]['key']; export type ColorSliderKey = (typeof COLOR_SLIDERS)[number]['key'];
/** Ползунки пространственных эффектов. */
export const EFFECT_SLIDERS = [
{ key: 'texture', label: 'Текстура', min: -100, max: 100, step: 1 },
{ key: 'clarity', label: 'Чёткость', min: -100, max: 100, step: 1 },
{ key: 'dehaze', label: 'Убрать дымку', min: -100, max: 100, step: 1 }
] as const;
export type EffectSliderKey = (typeof EFFECT_SLIDERS)[number]['key'];
/** Ползунки виньетки: общие для всех режимов. */
export const VIGNETTE_SLIDERS = [
{ key: 'amount', label: 'Виньетка', min: -100, max: 100, step: 1 },
{ key: 'midpoint', label: 'Средняя точка', min: 0, max: 100, step: 1 },
{ key: 'feather', label: 'Растушёвка', min: 0, max: 100, step: 1 },
{ key: 'roundness', label: 'Округлость', min: -100, max: 100, step: 1 },
{ key: 'highlights', label: 'Света', min: 0, max: 100, step: 1 }
] as const;
export type VignetteSliderKey = (typeof VIGNETTE_SLIDERS)[number]['key'];
/** Ползунки зерна. */
export const GRAIN_SLIDERS = [
{ key: 'amount', label: 'Зерно', min: 0, max: 100, step: 1 },
{ key: 'size', label: 'Размер', min: 0, max: 100, step: 1 },
{ key: 'roughness', label: 'Шероховатость', min: 0, max: 100, step: 1 }
] as const;
export type GrainSliderKey = (typeof GRAIN_SLIDERS)[number]['key'];
/** Вкладки виньетки. */
export const VIGNETTE_MODES = [
{ key: 'light', label: 'Свет' },
{ key: 'color', label: 'Цвет' },
{ key: 'colorize', label: 'Закарасить' }
] as const;
export const DEFAULT_VIGNETTE_COLOR = '#000000';
/** Колёса точечного цвета. */ /** Колёса точечного цвета. */
export const GRADING_WHEELS = [ export const GRADING_WHEELS = [
{ key: 'shadows', label: 'Тени' }, { key: 'shadows', label: 'Тени' },
@@ -173,7 +251,7 @@ export function emptyLight(): LightParams {
} }
export function emptyEditParams(): EditParams { export function emptyEditParams(): EditParams {
return { light: emptyLight(), color: emptyColor() }; return { light: emptyLight(), color: emptyColor(), effects: emptyEffects() };
} }
function emptyMixerBand(): MixerBand { function emptyMixerBand(): MixerBand {
@@ -207,6 +285,25 @@ export function emptyColor(): ColorParams {
}; };
} }
/** Пустые эффекты: все силы нулевые, геометрия — по умолчанию. */
export function emptyEffects(): EffectsParams {
return {
texture: 0,
clarity: 0,
dehaze: 0,
vignette: {
mode: 'light',
amount: 0,
midpoint: 50,
feather: 50,
roundness: 0,
highlights: 0,
color: DEFAULT_VIGNETTE_COLOR
},
grain: { amount: 0, size: 25, roughness: 50 }
};
}
function clamp(v: number | undefined, min: number, max: number): number { function clamp(v: number | undefined, min: number, max: number): number {
if (typeof v !== 'number' || !Number.isFinite(v)) return 0; if (typeof v !== 'number' || !Number.isFinite(v)) return 0;
return Math.min(max, Math.max(min, v)); return Math.min(max, Math.max(min, v));
@@ -234,6 +331,7 @@ export function normalizeCurve(points?: CurvePoint[]): CurvePoint[] | undefined
export function normalizeEditParams(params: { export function normalizeEditParams(params: {
light?: Partial<LightParams>; light?: Partial<LightParams>;
color?: Partial<ColorParams>; color?: Partial<ColorParams>;
effects?: Partial<EffectsParams>;
}): EditParams { }): EditParams {
const light = params?.light ?? emptyLight(); const light = params?.light ?? emptyLight();
return { return {
@@ -251,7 +349,8 @@ export function normalizeEditParams(params: {
blue: normalizeCurve(light.curve?.blue) blue: normalizeCurve(light.curve?.blue)
} }
}, },
color: normalizeColor(params?.color) color: normalizeColor(params?.color),
effects: normalizeEffects(params?.effects)
}; };
} }
@@ -306,6 +405,53 @@ export function normalizeColor(color?: Partial<ColorParams>): ColorParams {
}; };
} }
const VIGNETTE_MODE_KEYS: VignetteMode[] = ['light', 'color', 'colorize'];
/** Приводит hex-цвет виньетки к виду "#rrggbb"; невалидное значение — чёрный. */
export function normalizeVignetteColor(value: unknown): string {
if (typeof value !== 'string') return DEFAULT_VIGNETTE_COLOR;
const raw = value.trim().replace(/^#/, '');
const hex = raw.length === 3 ? raw.replace(/./g, (c) => c + c) : raw;
if (!/^[0-9a-fA-F]{6}$/.test(hex)) return DEFAULT_VIGNETTE_COLOR;
return `#${hex.toLowerCase()}`;
}
/** Приводит параметры виньетки к допустимым диапазонам и дефолтам. */
export function normalizeVignette(v?: Partial<VignetteParams>): VignetteParams {
const mode = VIGNETTE_MODE_KEYS.includes(v?.mode as VignetteMode)
? (v?.mode as VignetteMode)
: 'light';
return {
mode,
amount: clamp(v?.amount ?? 0, -MAX_PERCENT, MAX_PERCENT),
midpoint: clamp(v?.midpoint ?? 50, 0, MAX_PERCENT),
feather: clamp(v?.feather ?? 50, 0, MAX_PERCENT),
roundness: clamp(v?.roundness ?? 0, -MAX_PERCENT, MAX_PERCENT),
highlights: clamp(v?.highlights ?? 0, 0, MAX_PERCENT),
color: normalizeVignetteColor(v?.color)
};
}
/** Приводит параметры зерна к допустимым диапазонам и дефолтам. */
export function normalizeGrain(g?: Partial<GrainParams>): GrainParams {
return {
amount: clamp(g?.amount ?? 0, 0, MAX_PERCENT),
size: clamp(g?.size ?? 25, 0, MAX_PERCENT),
roughness: clamp(g?.roughness ?? 50, 0, MAX_PERCENT)
};
}
/** Приводит эффекты к допустимым диапазонам и дефолтам. */
export function normalizeEffects(effects?: Partial<EffectsParams>): EffectsParams {
return {
texture: clamp(effects?.texture ?? 0, -MAX_PERCENT, MAX_PERCENT),
clarity: clamp(effects?.clarity ?? 0, -MAX_PERCENT, MAX_PERCENT),
dehaze: clamp(effects?.dehaze ?? 0, -MAX_PERCENT, MAX_PERCENT),
vignette: normalizeVignette(effects?.vignette),
grain: normalizeGrain(effects?.grain)
};
}
/** Пустой ли блок «Свет». */ /** Пустой ли блок «Свет». */
export function isEmptyLight(light: LightParams): boolean { export function isEmptyLight(light: LightParams): boolean {
if ( if (
@@ -341,7 +487,21 @@ export function isColorFast(color: ColorParams): boolean {
/** Пустые ли параметры: фотография не тронута. */ /** Пустые ли параметры: фотография не тронута. */
export function isEmptyEditParams(params: EditParams): boolean { export function isEmptyEditParams(params: EditParams): boolean {
return isEmptyLight(params.light) && isEmptyColor(params.color); return (
isEmptyLight(params.light) && isEmptyColor(params.color) && isEmptyEffects(params.effects)
);
}
/** Пусты ли эффекты: все силы нулевые (дефолты геометрии правкой не считаются). */
export function isEmptyEffects(effects?: EffectsParams): boolean {
if (!effects) return true;
return (
!effects.texture &&
!effects.clarity &&
!effects.dehaze &&
!effects.vignette?.amount &&
!effects.grain?.amount
);
} }
/** Пусты ли цветовые параметры: цвет не тронут. */ /** Пусты ли цветовые параметры: цвет не тронут. */
@@ -386,16 +546,17 @@ export function whiteBalanceFromRGB(
/** Читает параметры правок из метаданных фото. */ /** Читает параметры правок из метаданных фото. */
export function readEditParams(photo: Photo | null | undefined): EditParams { export function readEditParams(photo: Photo | null | undefined): EditParams {
const raw = photo?.edit_params as const raw = photo?.edit_params as
| { light?: Partial<LightParams>; color?: Partial<ColorParams> } | { light?: Partial<LightParams>; color?: Partial<ColorParams>; effects?: Partial<EffectsParams> }
| undefined; | undefined;
if (!raw?.light && !raw?.color) return emptyEditParams(); if (!raw?.light && !raw?.color && !raw?.effects) return emptyEditParams();
return normalizeEditParams({ return normalizeEditParams({
light: { light: {
...emptyLight(), ...emptyLight(),
...raw?.light, ...raw?.light,
curve: raw?.light?.curve ?? {} curve: raw?.light?.curve ?? {}
}, },
color: raw?.color ?? emptyColor() color: raw?.color ?? emptyColor(),
effects: raw?.effects ?? emptyEffects()
}); });
} }
@@ -758,3 +919,176 @@ export function applyColorToPixels(data: Uint8ClampedArray, color: ColorParams):
data[i + 2] = Math.round(clamp(bb, 0, 255)); data[i + 2] = Math.round(clamp(bb, 0, 255));
} }
} }
/** Разбирает "#rrggbb" в RGB (0..255); на входе уже нормализованный цвет. */
function parseHexColor(hex: string): [number, number, number] {
const m = /^#([0-9a-f]{6})$/.exec(hex);
if (!m) return [0, 0, 0];
const value = parseInt(m[1], 16);
return [(value >> 16) & 0xff, (value >> 8) & 0xff, value & 0xff];
}
function smoothstep(edge0: number, edge1: number, x: number): number {
if (edge1 <= edge0) return x < edge0 ? 0 : 1;
const t = clamp01((x - edge0) / (edge1 - edge0));
return t * t * (3 - 2 * t);
}
/** Яркость пикселя (та же формула, что в серверном рендере). */
function luma(r: number, g: number, b: number): number {
return 0.299 * r + 0.587 * g + 0.114 * b;
}
/**
* Применяет виньетку к пикселям (в том же массиве). Математика повторяет
* серверную: нормализованные координаты, суперэллипс по округлости,
* smoothstep по средней точке и растушёвке, три режима.
*/
export function applyVignetteToPixels(
data: Uint8ClampedArray,
vignette: VignetteParams,
width: number,
height: number
): void {
if (!width || !height || !vignette?.amount) return;
const p = 2 * Math.pow(6, vignette.roundness / 100);
const start = 0.15 + 0.85 * (vignette.midpoint / 100);
const feather = 0.02 + 0.48 * (vignette.feather / 100);
const amount = vignette.amount / 100;
const highlights = vignette.highlights / 100;
const tint = parseHexColor(vignette.color);
const tintLuma = luma(tint[0], tint[1], tint[2]);
const colorize = vignette.mode === 'colorize';
const colored = colorize || vignette.mode === 'color';
for (let y = 0; y < height; y++) {
const dy = ((y + 0.5) / height) * 2 - 1;
for (let x = 0; x < width; x++) {
const i = (y * width + x) * 4;
if (data[i + 3] === 0) continue;
const dx = ((x + 0.5) / width) * 2 - 1;
const radius = Math.pow(
Math.pow(Math.abs(dx), p) + Math.pow(Math.abs(dy), p),
1 / p
);
const mask = smoothstep(start, start + feather, radius);
if (mask <= 0) continue;
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const y0 = luma(r, g, b);
const light = 1 - highlights * smoothstep(0.5, 1, y0 / 255);
if (!colored) {
let factor = 1 - amount * 0.85 * mask;
const protect = highlights * mask * smoothstep(0.5, 1, y0 / 255);
factor += (1 - factor) * protect;
data[i] = Math.round(clamp(r * factor, 0, 255));
data[i + 1] = Math.round(clamp(g * factor, 0, 255));
data[i + 2] = Math.round(clamp(b * factor, 0, 255));
continue;
}
const strength = Math.abs(amount) * mask * light;
if (strength <= 0) continue;
if (colorize) {
data[i] = Math.round(clamp(r + (tint[0] - r) * strength, 0, 255));
data[i + 1] = Math.round(clamp(g + (tint[1] - g) * strength, 0, 255));
data[i + 2] = Math.round(clamp(b + (tint[2] - b) * strength, 0, 255));
} else {
const target = [tint[0] - tintLuma + y0, tint[1] - tintLuma + y0, tint[2] - tintLuma + y0];
data[i] = Math.round(clamp(r + (target[0] - r) * strength, 0, 255));
data[i + 1] = Math.round(clamp(g + (target[1] - g) * strength, 0, 255));
data[i + 2] = Math.round(clamp(b + (target[2] - b) * strength, 0, 255));
}
}
}
}
/** FNV-1a 64-bit: seed зерна, одинаковый с серверным рендером (photo.id). */
export function effectsSeed(photoId: string): bigint {
let hash = 0xcbf29ce484222325n;
const bytes = new TextEncoder().encode(photoId);
for (const byte of bytes) {
hash ^= BigInt(byte);
hash = (hash * 0x100000001b3n) & 0xffffffffffffffffn;
}
return hash;
}
function mix32(x: number): number {
x = Math.imul(x ^ (x >>> 16), 0x7feb352d);
x = Math.imul(x ^ (x >>> 15), 0x846ca68b);
return (x ^ (x >>> 16)) >>> 0;
}
/** Детерминированный шум в -1..1 по координатам пикселя/ячейки. */
function hashNoise(seedLo: number, seedHi: number, x: number, y: number): number {
let h = seedLo ^ mix32(seedHi ^ mix32(Math.imul(x, 0x9e3779b1) ^ Math.imul(y, 0x85ebca6b)));
h = mix32(h);
return (h / 0xffffffff) * 2 - 1;
}
/**
* Применяет зерно к пикселям (в том же массиве). Детерминировано от seed:
* повторный вызов с теми же аргументами даёт тот же рисунок.
*/
export function applyGrainToPixels(
data: Uint8ClampedArray,
grain: GrainParams,
width: number,
height: number,
seed: bigint
): void {
if (!width || !height || !grain?.amount) return;
const minDim = Math.min(width, height);
const cell = Math.max(1, Math.round((0.0005 + 0.004 * (grain.size / 100)) * minDim));
const roughness = grain.roughness / 100;
const strength = (grain.amount / 100) * 38;
const seedLo = Number(seed & 0xffffffffn);
const seedHi = Number((seed >> 32n) & 0xffffffffn);
for (let y = 0; y < height; y++) {
const fy = y / cell;
const iy = Math.floor(fy);
const ty0 = fy - iy;
const ty = ty0 * ty0 * (3 - 2 * ty0);
for (let x = 0; x < width; x++) {
const i = (y * width + x) * 4;
if (data[i + 3] === 0) continue;
const fx = x / cell;
const ix = Math.floor(fx);
const tx0 = fx - ix;
const tx = tx0 * tx0 * (3 - 2 * tx0);
const v00 = hashNoise(seedLo, seedHi, ix, iy);
const v10 = hashNoise(seedLo, seedHi, ix + 1, iy);
const v01 = hashNoise(seedLo, seedHi, ix, iy + 1);
const v11 = hashNoise(seedLo, seedHi, ix + 1, iy + 1);
const value = v00 + (v10 - v00) * tx + (v01 - v00) * ty + (v00 - v10 - v01 + v11) * tx * ty;
const white = hashNoise(seedLo, seedHi, x, y);
const noise = value * (1 - roughness) + white * roughness;
const y0 = luma(data[i], data[i + 1], data[i + 2]);
const weight = 1 - Math.pow((2 * y0) / 255 - 1, 2);
const delta = noise * strength * weight;
data[i] = Math.round(clamp(data[i] + delta, 0, 255));
data[i + 1] = Math.round(clamp(data[i + 1] + delta, 0, 255));
data[i + 2] = Math.round(clamp(data[i + 2] + delta, 0, 255));
}
}
}
/**
* Применяет эффекты к пикселям кадра (в том же массиве). CPU-фолбэк считает
* только попиксельные эффекты — виньетку и зерно; пространственные эффекты
* появляются после серверного рендера.
*/
export function applyEffectsToPixels(
data: Uint8ClampedArray,
effects: EffectsParams,
width: number,
height: number,
seed: bigint
): void {
applyVignetteToPixels(data, effects.vignette, width, height);
applyGrainToPixels(data, effects.grain, width, height, seed);
}
+81
View File
@@ -0,0 +1,81 @@
import { describe, expect, it } from 'vitest';
import {
defaultSectionCollapse,
EDITOR_SECTIONS_KEY,
loadSectionCollapse,
normalizeSectionCollapse,
saveSectionCollapse
} from './editor-sections';
function memoryStorage(initial: Record<string, string> = {}) {
const data = new Map(Object.entries(initial));
return {
data,
getItem(key: string) {
return data.has(key) ? data.get(key)! : null;
},
setItem(key: string, value: string) {
data.set(key, value);
}
};
}
describe('секции редактора', () => {
it('по умолчанию все секции свёрнуты', () => {
const state = defaultSectionCollapse();
for (const section of [
'light',
'curve',
'color',
'mixer',
'pointColor',
'correction',
'effects'
] as const) {
expect(state[section]).toBe(true);
}
expect(loadSectionCollapse(null)).toEqual(defaultSectionCollapse());
});
it('читает сохранённое состояние и восстанавливает недостающие ключи', () => {
const storage = memoryStorage({
[EDITOR_SECTIONS_KEY]: JSON.stringify({ effects: false, light: false, unknown: false })
});
const state = loadSectionCollapse(storage);
expect(state.effects).toBe(false);
expect(state.light).toBe(false);
expect(state.color).toBe(true);
expect('unknown' in state).toBe(false);
});
it('игнорирует невалидный JSON и небулевы значения', () => {
expect(
loadSectionCollapse(memoryStorage({ [EDITOR_SECTIONS_KEY]: '{oops' }))
).toEqual(defaultSectionCollapse());
expect(normalizeSectionCollapse({ effects: 'no', color: 1 })).toEqual(
defaultSectionCollapse()
);
expect(normalizeSectionCollapse(null)).toEqual(defaultSectionCollapse());
});
it('сохраняет состояние в хранилище', () => {
const storage = memoryStorage();
const state = { ...defaultSectionCollapse(), effects: false, curve: false };
saveSectionCollapse(state, storage);
expect(storage.data.get(EDITOR_SECTIONS_KEY)).toBe(JSON.stringify(state));
expect(loadSectionCollapse(storage)).toEqual(state);
});
it('переживает недоступное хранилище', () => {
const broken = {
getItem() {
throw new Error('denied');
},
setItem() {
throw new Error('denied');
}
};
expect(loadSectionCollapse(broken)).toEqual(defaultSectionCollapse());
expect(() => saveSectionCollapse(defaultSectionCollapse(), broken)).not.toThrow();
});
});
+92
View File
@@ -0,0 +1,92 @@
/**
* Состояние сворачиваемых секций редактора фото.
*
* Все секции по умолчанию свёрнуты, а выбор пользователя хранится в браузере
* (localStorage), поэтому панель открывается в том же виде после перезагрузки
* и переключения фото. Серверные настройки для этого не нужны.
*/
export const EDITOR_SECTIONS = [
'light',
'curve',
'color',
'mixer',
'pointColor',
'correction',
'effects'
] as const;
export type EditorSection = (typeof EDITOR_SECTIONS)[number];
/** true — секция свёрнута. */
export type SectionCollapse = Record<EditorSection, boolean>;
export const EDITOR_SECTIONS_KEY = 'galo.edit.sections';
/** По умолчанию все секции свёрнуты. */
export function defaultSectionCollapse(): SectionCollapse {
return {
light: true,
curve: true,
color: true,
mixer: true,
pointColor: true,
correction: true,
effects: true
};
}
function isRecord(value: unknown): value is Record<string, unknown> {
return typeof value === 'object' && value !== null && !Array.isArray(value);
}
/**
* Приводит сохранённое значение к полному набору секций: неизвестные ключи
* отбрасываются, небулевы значения и отсутствующие ключи получают дефолт.
*/
export function normalizeSectionCollapse(raw: unknown): SectionCollapse {
const defaults = defaultSectionCollapse();
if (!isRecord(raw)) return defaults;
const out = defaults;
for (const section of EDITOR_SECTIONS) {
const value = raw[section];
if (typeof value === 'boolean') out[section] = value;
}
return out;
}
type ReadableStorage = Pick<Storage, 'getItem'>;
type WritableStorage = Pick<Storage, 'setItem'>;
/** Читает состояние секций из браузера; без хранилища — дефолт. */
export function loadSectionCollapse(
storage?: ReadableStorage | null
): SectionCollapse {
const target = storage === undefined ? browserStorage() : storage;
if (!target) return defaultSectionCollapse();
try {
const raw = target.getItem(EDITOR_SECTIONS_KEY);
if (!raw) return defaultSectionCollapse();
return normalizeSectionCollapse(JSON.parse(raw));
} catch {
return defaultSectionCollapse();
}
}
/** Сохраняет состояние секций в браузере; ошибки хранилища игнорируются. */
export function saveSectionCollapse(
state: SectionCollapse,
storage?: WritableStorage | null
): void {
const target = storage === undefined ? browserStorage() : storage;
if (!target) return;
try {
target.setItem(EDITOR_SECTIONS_KEY, JSON.stringify(state));
} catch {
// Приватный режим или переполненное хранилище не должны ломать панель.
}
}
function browserStorage(): Storage | null {
return typeof localStorage === 'undefined' ? null : localStorage;
}
+673 -101
View File
@@ -4,31 +4,37 @@ import {
hslToRGB, hslToRGB,
MIXER_BANDS, MIXER_BANDS,
type ColorParams, type ColorParams,
type EffectsParams,
type LightParams type LightParams
} from './edit'; } from './edit';
/** /**
* GPU-превью правок на WebGL2. * GPU-превью правок на WebGL2.
* *
* Шейдер повторяет математику серверного рендера: свет (экспозиция, контраст, * Проход 1 повторяет серверную математику света и цвета и рисует кадр в
* света/тени, белые/чёрные, кривые через LUT) и цвет (баланс белого, HSL, * FBO-текстуру. Затем считаются размытия яркости (текстура — мелкие детали,
* микшер, колористика, коррекция). В отличие от попиксельного CPU-фильтра, * чёткость — средние частоты), карта дымки готовится на CPU. Финальный проход
* кадр целиком считает GPU, поэтому ползунки не блокируют интерфейс. * применяет пространственные эффекты, виньетку и зерно и выводит кадр на экран.
*
* Превью приблизительное: источник истины — серверный рендер.
*/ */
const VERT = `#version 300 es const VERT = `#version 300 es
in vec2 a_pos; layout(location = 0) in vec2 a_pos;
uniform vec2 u_uvOffset; uniform vec2 u_uvOffset;
uniform vec2 u_uvScale; uniform vec2 u_uvScale;
out vec2 v_uv; out vec2 v_uv;
out vec2 v_tex;
void main() { void main() {
vec2 uv = a_pos * 0.5 + 0.5; vec2 uv = a_pos * 0.5 + 0.5;
v_tex = uv;
v_uv = u_uvOffset + uv * u_uvScale; v_uv = u_uvOffset + uv * u_uvScale;
gl_Position = vec4(a_pos, 0.0, 1.0); gl_Position = vec4(a_pos, 0.0, 1.0);
}`; }`;
const FRAG = `#version 300 es const SCENE_FRAG = `#version 300 es
precision highp float; precision highp float;
precision highp int;
in vec2 v_uv; in vec2 v_uv;
out vec4 outColor; out vec4 outColor;
@@ -196,6 +202,181 @@ void main() {
outColor = vec4(clamp(outc / 255.0, 0.0, 1.0), tex.a); outColor = vec4(clamp(outc / 255.0, 0.0, 1.0), tex.a);
}`; }`;
const BLUR_FRAG = `#version 300 es
precision highp float;
precision highp int;
in vec2 v_tex;
out vec4 outColor;
uniform sampler2D u_src;
uniform vec2 u_step;
uniform int u_radius;
const int MAX_RADIUS = 32;
float luma(vec3 c) {
return dot(c, vec3(0.299, 0.587, 0.114));
}
void main() {
float sum = 0.0;
float count = 0.0;
int radius = u_radius;
if (radius > MAX_RADIUS) radius = MAX_RADIUS;
for (int i = 0; i <= MAX_RADIUS * 2; i++) {
int d = i - MAX_RADIUS;
if (d < -radius || d > radius) continue;
sum += luma(texture(u_src, v_tex + u_step * float(d)).rgb);
count += 1.0;
}
outColor = vec4(vec3(sum / max(count, 1.0)), 1.0);
}`;
const FINAL_FRAG = `#version 300 es
precision highp float;
precision highp int;
in vec2 v_uv;
in vec2 v_tex;
out vec4 outColor;
uniform sampler2D u_scene;
uniform sampler2D u_blurTex;
uniform sampler2D u_blurClar;
uniform sampler2D u_dehaze;
uniform float u_hasBlurTex;
uniform float u_hasBlurClar;
uniform float u_texture;
uniform float u_clarity;
uniform float u_dehazeAmount;
uniform vec3 u_dehazeA;
uniform vec2 u_imageSize;
uniform float u_grainCell;
uniform uint u_seedLo;
uniform uint u_seedHi;
uniform float u_grainAmount;
uniform float u_grainSize;
uniform float u_grainRoughness;
uniform float u_vigAmount;
uniform float u_vigMidpoint;
uniform float u_vigFeather;
uniform float u_vigRoundness;
uniform float u_vigHighlights;
uniform int u_vigMode;
uniform vec3 u_vigColor;
float luma(vec3 c) {
return dot(c, vec3(0.299, 0.587, 0.114));
}
uint mix32(uint x) {
x ^= x >> 16;
x *= 0x7feb352du;
x ^= x >> 15;
x *= 0x846ca68bu;
x ^= x >> 16;
return x;
}
float hashNoise(uint lo, uint hi, float x, float y) {
uint ux = uint(int(x));
uint uy = uint(int(y));
uint h = mix32(lo ^ mix32(hi ^ mix32(ux * 0x9e3779b1u ^ uy * 0x85ebca6bu)));
return float(h) / 4294967295.0 * 2.0 - 1.0;
}
void main() {
vec4 scene = texture(u_scene, v_tex);
if (scene.a == 0.0) {
outColor = vec4(0.0);
return;
}
vec3 c = scene.rgb * 255.0;
float y = luma(c);
// Текстура и чёткость: локальный контраст по яркости.
if (u_texture != 0.0 && u_hasBlurTex > 0.5) {
float b = texture(u_blurTex, v_tex).r * 255.0;
c += (y - b) * u_texture;
}
if (u_clarity != 0.0 && u_hasBlurClar > 0.5) {
float b = texture(u_blurClar, v_tex).r * 255.0;
float d = clamp(y - b, -40.0, 40.0);
float t = abs(2.0 * y / 255.0 - 1.0);
float w = 1.0 - 0.6 * t * t;
c += u_clarity * 1.25 * d * w;
}
// Дымка: приближённо, по карте пропускания на уменьшенной копии.
if (u_dehazeAmount != 0.0) {
float transmission = max(texture(u_dehaze, v_uv).r, 0.1);
if (u_dehazeAmount > 0.0) {
vec3 cleaned = (c - u_dehazeA) / transmission + u_dehazeA;
c = mix(c, cleaned, u_dehazeAmount);
} else {
c = c * (1.0 - 0.75 * -u_dehazeAmount) + u_dehazeA * (0.75 * -u_dehazeAmount);
}
}
c = clamp(c, 0.0, 255.0);
float vy = luma(c);
// Виньетка.
if (u_vigAmount != 0.0) {
vec2 d = v_uv * 2.0 - 1.0;
float p = 2.0 * pow(6.0, u_vigRoundness / 100.0);
float radius = pow(pow(abs(d.x), p) + pow(abs(d.y), p), 1.0 / p);
float start = 0.15 + 0.85 * u_vigMidpoint / 100.0;
float feather = 0.02 + 0.48 * u_vigFeather / 100.0;
float mask = clamp((radius - start) / feather, 0.0, 1.0);
mask = mask * mask * (3.0 - 2.0 * mask);
float hl = (u_vigHighlights / 100.0) * smoothstep(0.5, 1.0, vy / 255.0);
float amount = u_vigAmount / 100.0;
if (u_vigMode == 0) {
float factor = 1.0 - amount * 0.85 * mask;
float protect = hl * mask;
factor += (1.0 - factor) * protect;
c *= factor;
} else {
float strength = abs(amount) * mask * (1.0 - hl);
vec3 tint = u_vigColor * 255.0;
if (u_vigMode == 2) {
c += (tint - c) * strength;
} else {
float tintY = luma(tint);
vec3 target = tint - tintY + vy;
c += (target - c) * strength;
}
}
}
// Зерно: детерминированный шум в координатах изображения.
if (u_grainAmount != 0.0) {
vec2 pos = v_uv * u_imageSize;
vec2 cell = vec2(max(1.0, u_grainCell));
vec2 f = pos / cell;
vec2 i = floor(f);
vec2 fr = f - i;
fr = fr * fr * (3.0 - 2.0 * fr);
float v00 = hashNoise(u_seedLo, u_seedHi, i.x, i.y);
float v10 = hashNoise(u_seedLo, u_seedHi, i.x + 1.0, i.y);
float v01 = hashNoise(u_seedLo, u_seedHi, i.x, i.y + 1.0);
float v11 = hashNoise(u_seedLo, u_seedHi, i.x + 1.0, i.y + 1.0);
float value = mix(mix(v00, v10, fr.x), mix(v01, v11, fr.x), fr.y);
float white = hashNoise(u_seedLo, u_seedHi, pos.x, pos.y);
float roughness = u_grainRoughness / 100.0;
float noise = value * (1.0 - roughness) + white * roughness;
float weight = 1.0 - pow(2.0 * vy / 255.0 - 1.0, 2.0);
c += noise * (u_grainAmount / 100.0) * 38.0 * weight;
}
outColor = vec4(clamp(c / 255.0, 0.0, 1.0), scene.a);
}`;
export interface PreviewRenderOptions { export interface PreviewRenderOptions {
image: TexImageSource; image: TexImageSource;
imageVersion: string; imageVersion: string;
@@ -206,6 +387,24 @@ export interface PreviewRenderOptions {
dest: { x: number; y: number; width: number; height: number }; dest: { x: number; y: number; width: number; height: number };
light: LightParams; light: LightParams;
color: ColorParams; color: ColorParams;
effects: EffectsParams;
seed: bigint;
lowQuality?: boolean;
}
interface Target {
texture: WebGLTexture;
framebuffer: WebGLFramebuffer;
width: number;
height: number;
}
interface DehazeMap {
width: number;
height: number;
/** Карта пропускания, строки снизу вверх (как у FBO-текстур). */
transmission: Uint8Array;
atmosphere: [number, number, number];
} }
function compile(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null { function compile(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {
@@ -221,6 +420,36 @@ function compile(gl: WebGL2RenderingContext, type: number, source: string): WebG
return shader; return shader;
} }
interface Program {
program: WebGLProgram;
uniforms: Record<string, WebGLUniformLocation | null>;
}
function buildProgram(
gl: WebGL2RenderingContext,
fragment: string,
uniformNames: string[]
): Program {
const vertex = compile(gl, gl.VERTEX_SHADER, VERT);
const frag = compile(gl, gl.FRAGMENT_SHADER, fragment);
if (!vertex || !frag) throw new Error('shader compile failed');
const program = gl.createProgram();
if (!program) throw new Error('program create failed');
gl.attachShader(program, vertex);
gl.attachShader(program, frag);
gl.linkProgram(program);
gl.deleteShader(vertex);
gl.deleteShader(frag);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
const log = gl.getProgramInfoLog(program);
gl.deleteProgram(program);
throw new Error(`program link failed: ${log ?? ''}`);
}
const uniforms: Record<string, WebGLUniformLocation | null> = {};
for (const name of uniformNames) uniforms[name] = gl.getUniformLocation(program, name);
return { program, uniforms };
}
function buildLuts(light: LightParams): Uint8Array { function buildLuts(light: LightParams): Uint8Array {
const master = buildCurveLUT(light.curve?.rgb); const master = buildCurveLUT(light.curve?.rgb);
const red = buildCurveLUT(light.curve?.red); const red = buildCurveLUT(light.curve?.red);
@@ -236,37 +465,191 @@ function buildLuts(light: LightParams): Uint8Array {
return out; return out;
} }
function parseHex(color: string): [number, number, number] {
const m = /^#([0-9a-f]{6})$/.exec(color);
if (!m) return [0, 0, 0];
const value = parseInt(m[1], 16);
return [((value >> 16) & 0xff) / 255, ((value >> 8) & 0xff) / 255, (value & 0xff) / 255];
}
/** box-размытие карты пропускания (маленькая картинка, поэтому простое). */
function blurTransmission(map: Float32Array, width: number, height: number, radius: number): void {
if (radius <= 0) return;
const temp = new Float32Array(map.length);
const window = radius * 2 + 1;
for (let y = 0; y < height; y++) {
let sum = 0;
const row = y * width;
for (let x = -radius; x <= radius; x++) sum += map[row + Math.min(width - 1, Math.max(0, x))];
for (let x = 0; x < width; x++) {
temp[row + x] = sum / window;
sum -= map[row + Math.min(width - 1, Math.max(0, x - radius))];
sum += map[row + Math.min(width - 1, Math.max(0, x + radius + 1))];
}
}
for (let x = 0; x < width; x++) {
let sum = 0;
for (let y = -radius; y <= radius; y++) sum += temp[Math.min(height - 1, Math.max(0, y)) * width + x];
for (let y = 0; y < height; y++) {
map[y * width + x] = sum / window;
sum -= temp[Math.min(height - 1, Math.max(0, y - radius)) * width + x];
sum += temp[Math.min(height - 1, Math.max(0, y + radius + 1)) * width + x];
}
}
}
/**
* Готовит карту дымки по уменьшенной копии изображения: атмосферный свет и
* пропускание (dark channel prior). Карта хранится в ориентации изображения
* снизу вверх, чтобы совпадать с текстурными координатами сцены.
*/
function buildDehazeMap(
image: CanvasImageSource,
imageWidth: number,
imageHeight: number
): DehazeMap | null {
const scale = Math.min(1, 256 / Math.max(1, imageWidth, imageHeight));
const width = Math.max(1, Math.round(imageWidth * scale));
const height = Math.max(1, Math.round(imageHeight * scale));
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d', { willReadFrequently: true });
if (!ctx) return null;
ctx.drawImage(image, 0, 0, width, height);
const src = ctx.getImageData(0, 0, width, height).data;
const dark = new Uint8Array(width * height);
const histogram = new Uint32Array(256);
for (let i = 0, p = 0; i < dark.length; i++, p += 4) {
const d = Math.min(src[p], src[p + 1], src[p + 2]);
dark[i] = d;
histogram[d]++;
}
let needed = Math.max(1, Math.round(dark.length * 0.001));
let threshold = 255;
for (let value = 255; value >= 0; value--) {
needed -= histogram[value];
if (needed <= 0) {
threshold = value;
break;
}
}
let sumR = 0;
let sumG = 0;
let sumB = 0;
let count = 0;
for (let i = 0, p = 0; i < dark.length; i++, p += 4) {
if (dark[i] < threshold) continue;
sumR += src[p];
sumG += src[p + 1];
sumB += src[p + 2];
count++;
}
const atmosphere: [number, number, number] = count
? [sumR / count, sumG / count, sumB / count]
: [255, 255, 255];
const a = atmosphere.map((v) => Math.max(1, v)) as [number, number, number];
const transmission = new Float32Array(width * height);
for (let i = 0, p = 0; i < dark.length; i++, p += 4) {
const t =
1 -
0.95 *
Math.min(src[p] / a[0], src[p + 1] / a[1], src[p + 2] / a[2]);
transmission[i] = Math.min(1, Math.max(0.1, t));
}
blurTransmission(transmission, width, height, Math.max(1, Math.round(0.02 * Math.min(width, height))));
const bytes = new Uint8Array(width * height);
for (let y = 0; y < height; y++) {
const dstRow = (height - 1 - y) * width;
const srcRow = y * width;
for (let x = 0; x < width; x++) {
bytes[dstRow + x] = Math.round(transmission[srcRow + x] * 255);
}
}
return { width, height, transmission: bytes, atmosphere: a };
}
export class WebGLPreview { export class WebGLPreview {
private readonly gl: WebGL2RenderingContext; private readonly gl: WebGL2RenderingContext;
private readonly canvas: HTMLCanvasElement; private readonly canvas: HTMLCanvasElement;
private readonly program: WebGLProgram; private readonly scene: Program;
private readonly blur: Program;
private readonly final: Program;
private readonly vao: WebGLVertexArrayObject; private readonly vao: WebGLVertexArrayObject;
private readonly buffer: WebGLBuffer; private readonly buffer: WebGLBuffer;
private readonly imageTex: WebGLTexture; private readonly imageTex: WebGLTexture;
private readonly lutTex: WebGLTexture; private readonly lutTex: WebGLTexture;
private readonly u: Record<string, WebGLUniformLocation | null>; private readonly dehazeTex: WebGLTexture;
private imageVersion = ''; private imageVersion = '';
private dehazeVersion = '';
private dehazeMap: DehazeMap | null = null;
private sceneTarget: Target | null = null;
private textureH: Target | null = null;
private textureV: Target | null = null;
private clarityH: Target | null = null;
private clarityV: Target | null = null;
private constructor(canvas: HTMLCanvasElement, gl: WebGL2RenderingContext) { private constructor(canvas: HTMLCanvasElement, gl: WebGL2RenderingContext) {
this.canvas = canvas; this.canvas = canvas;
this.gl = gl; this.gl = gl;
const vs = compile(gl, gl.VERTEX_SHADER, VERT); this.scene = buildProgram(gl, SCENE_FRAG, [
const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG); 'u_image',
if (!vs || !fs) throw new Error('shader compile failed'); 'u_luts',
const program = gl.createProgram(); 'u_uvOffset',
if (!program) throw new Error('program create failed'); 'u_uvScale',
gl.attachShader(program, vs); 'u_exposureMul',
gl.attachShader(program, fs); 'u_contrastK',
gl.linkProgram(program); 'u_highlights',
gl.deleteShader(vs); 'u_shadows',
gl.deleteShader(fs); 'u_whites',
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { 'u_blacks',
const log = gl.getProgramInfoLog(program); 'u_temperature',
gl.deleteProgram(program); 'u_tint',
throw new Error(`program link failed: ${log ?? ''}`); 'u_vibrance',
} 'u_saturation',
this.program = program; 'u_blending',
'u_balance',
'u_correction',
'u_mixerHue[0]',
'u_mixerSat[0]',
'u_mixerLum[0]',
'u_gradeSat[0]',
'u_gradeLum[0]',
'u_gradeTint[0]'
]);
this.blur = buildProgram(gl, BLUR_FRAG, ['u_src', 'u_step', 'u_radius']);
this.final = buildProgram(gl, FINAL_FRAG, [
'u_scene',
'u_blurTex',
'u_blurClar',
'u_dehaze',
'u_hasBlurTex',
'u_hasBlurClar',
'u_texture',
'u_clarity',
'u_dehazeAmount',
'u_dehazeA',
'u_imageSize',
'u_grainCell',
'u_seedLo',
'u_seedHi',
'u_grainAmount',
'u_grainSize',
'u_grainRoughness',
'u_vigAmount',
'u_vigMidpoint',
'u_vigFeather',
'u_vigRoundness',
'u_vigHighlights',
'u_vigMode',
'u_vigColor',
'u_uvOffset',
'u_uvScale'
]);
const vao = gl.createVertexArray(); const vao = gl.createVertexArray();
const buffer = gl.createBuffer(); const buffer = gl.createBuffer();
@@ -278,55 +661,34 @@ export class WebGLPreview {
new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
gl.STATIC_DRAW gl.STATIC_DRAW
); );
const aPos = gl.getAttribLocation(program, 'a_pos'); gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(aPos); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
gl.bindVertexArray(null); gl.bindVertexArray(null);
this.vao = vao; this.vao = vao;
this.buffer = buffer; this.buffer = buffer;
const imageTex = gl.createTexture(); const imageTex = gl.createTexture();
const lutTex = gl.createTexture(); const lutTex = gl.createTexture();
if (!imageTex || !lutTex) throw new Error('texture create failed'); const dehazeTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, imageTex); if (!imageTex || !lutTex || !dehazeTex) throw new Error('texture create failed');
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); for (const texture of [imageTex, lutTex, dehazeTex]) {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, lutTex); gl.texParameteri(
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.TEXTURE_2D,
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.TEXTURE_MIN_FILTER,
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); texture === lutTex ? gl.NEAREST : gl.LINEAR
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); );
gl.texParameteri(
gl.TEXTURE_2D,
gl.TEXTURE_MAG_FILTER,
texture === lutTex ? gl.NEAREST : gl.LINEAR
);
}
this.imageTex = imageTex; this.imageTex = imageTex;
this.lutTex = lutTex; this.lutTex = lutTex;
this.dehazeTex = dehazeTex;
const loc = (name: string) => gl.getUniformLocation(program, name);
this.u = {
u_image: loc('u_image'),
u_luts: loc('u_luts'),
u_uvOffset: loc('u_uvOffset'),
u_uvScale: loc('u_uvScale'),
u_exposureMul: loc('u_exposureMul'),
u_contrastK: loc('u_contrastK'),
u_highlights: loc('u_highlights'),
u_shadows: loc('u_shadows'),
u_whites: loc('u_whites'),
u_blacks: loc('u_blacks'),
u_temperature: loc('u_temperature'),
u_tint: loc('u_tint'),
u_vibrance: loc('u_vibrance'),
u_saturation: loc('u_saturation'),
u_blending: loc('u_blending'),
u_balance: loc('u_balance'),
u_correction: loc('u_correction'),
u_mixerHue: loc('u_mixerHue[0]'),
u_mixerSat: loc('u_mixerSat[0]'),
u_mixerLum: loc('u_mixerLum[0]'),
u_gradeSat: loc('u_gradeSat[0]'),
u_gradeLum: loc('u_gradeLum[0]'),
u_gradeTint: loc('u_gradeTint[0]')
};
} }
static create(canvas: HTMLCanvasElement): WebGLPreview | null { static create(canvas: HTMLCanvasElement): WebGLPreview | null {
@@ -349,11 +711,120 @@ export class WebGLPreview {
dispose() { dispose() {
const gl = this.gl; const gl = this.gl;
for (const target of [
this.sceneTarget,
this.textureH,
this.textureV,
this.clarityH,
this.clarityV
]) {
if (!target) continue;
gl.deleteTexture(target.texture);
gl.deleteFramebuffer(target.framebuffer);
}
gl.deleteTexture(this.imageTex); gl.deleteTexture(this.imageTex);
gl.deleteTexture(this.lutTex); gl.deleteTexture(this.lutTex);
gl.deleteTexture(this.dehazeTex);
gl.deleteBuffer(this.buffer); gl.deleteBuffer(this.buffer);
gl.deleteVertexArray(this.vao); gl.deleteVertexArray(this.vao);
gl.deleteProgram(this.program); gl.deleteProgram(this.scene.program);
gl.deleteProgram(this.blur.program);
gl.deleteProgram(this.final.program);
}
private ensureTarget(target: Target | null, width: number, height: number): Target {
const gl = this.gl;
if (target && target.width === width && target.height === height) return target;
if (target) {
gl.deleteTexture(target.texture);
gl.deleteFramebuffer(target.framebuffer);
}
const texture = gl.createTexture();
const framebuffer = gl.createFramebuffer();
if (!texture || !framebuffer) throw new Error('target create failed');
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
gl.COLOR_ATTACHMENT0,
gl.TEXTURE_2D,
texture,
0
);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
console.error('webgl preview: incomplete framebuffer');
}
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
return { texture, framebuffer, width, height };
}
private drawQuad() {
const gl = this.gl;
gl.bindVertexArray(this.vao);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
gl.bindVertexArray(null);
}
private uploadImage(opts: PreviewRenderOptions) {
const gl = this.gl;
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.imageTex);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, opts.image);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
this.imageVersion = opts.imageVersion;
}
private ensureDehazeMap(opts: PreviewRenderOptions) {
const gl = this.gl;
if (this.dehazeVersion !== opts.imageVersion) {
this.dehazeMap = buildDehazeMap(
opts.image as CanvasImageSource,
opts.imageWidth,
opts.imageHeight
);
this.dehazeVersion = opts.imageVersion;
if (this.dehazeMap) {
gl.activeTexture(gl.TEXTURE3);
gl.bindTexture(gl.TEXTURE_2D, this.dehazeTex);
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.R8,
this.dehazeMap.width,
this.dehazeMap.height,
0,
gl.RED,
gl.UNSIGNED_BYTE,
this.dehazeMap.transmission
);
}
}
return this.dehazeMap;
}
private blurPass(
source: WebGLTexture,
target: Target,
stepX: number,
stepY: number,
radius: number
) {
const gl = this.gl;
gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
gl.viewport(0, 0, target.width, target.height);
gl.useProgram(this.blur.program);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, source);
gl.uniform1i(this.blur.uniforms.u_src, 0);
gl.uniform2f(this.blur.uniforms.u_step, stepX, stepY);
gl.uniform1i(this.blur.uniforms.u_radius, Math.min(32, Math.max(1, radius)));
this.drawQuad();
} }
render(opts: PreviewRenderOptions): boolean { render(opts: PreviewRenderOptions): boolean {
@@ -370,19 +841,22 @@ export class WebGLPreview {
gl.viewport(0, 0, width, height); gl.viewport(0, 0, width, height);
gl.clearColor(0, 0, 0, 0); gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(this.program);
if (this.imageVersion !== opts.imageVersion) { if (this.imageVersion !== opts.imageVersion) this.uploadImage(opts);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.imageTex); const effects = opts.effects;
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); const sceneWidth = Math.max(1, Math.round(opts.dest.width));
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, opts.image); const sceneHeight = Math.max(1, Math.round(opts.dest.height));
this.imageVersion = opts.imageVersion; this.sceneTarget = this.ensureTarget(this.sceneTarget, sceneWidth, sceneHeight);
} const sceneTarget = this.sceneTarget;
// Проход 1: свет и цвет в FBO-текстуру.
gl.bindFramebuffer(gl.FRAMEBUFFER, sceneTarget.framebuffer);
gl.viewport(0, 0, sceneWidth, sceneHeight);
gl.useProgram(this.scene.program);
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.imageTex); gl.bindTexture(gl.TEXTURE_2D, this.imageTex);
gl.uniform1i(this.u.u_image, 0); gl.uniform1i(this.scene.uniforms.u_image, 0);
gl.activeTexture(gl.TEXTURE1); gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, this.lutTex); gl.bindTexture(gl.TEXTURE_2D, this.lutTex);
gl.texImage2D( gl.texImage2D(
@@ -396,25 +870,25 @@ export class WebGLPreview {
gl.UNSIGNED_BYTE, gl.UNSIGNED_BYTE,
buildLuts(opts.light) buildLuts(opts.light)
); );
gl.uniform1i(this.u.u_luts, 1); gl.uniform1i(this.scene.uniforms.u_luts, 1);
const light = opts.light; const light = opts.light;
gl.uniform1f(this.u.u_exposureMul, Math.pow(2, light.exposure)); gl.uniform1f(this.scene.uniforms.u_exposureMul, Math.pow(2, light.exposure));
gl.uniform1f(this.u.u_contrastK, 1 + light.contrast / 100); gl.uniform1f(this.scene.uniforms.u_contrastK, 1 + light.contrast / 100);
gl.uniform1f(this.u.u_highlights, (light.highlights / 100) * 80); gl.uniform1f(this.scene.uniforms.u_highlights, (light.highlights / 100) * 80);
gl.uniform1f(this.u.u_shadows, (light.shadows / 100) * 80); gl.uniform1f(this.scene.uniforms.u_shadows, (light.shadows / 100) * 80);
gl.uniform1f(this.u.u_whites, (light.whites / 100) * 80); gl.uniform1f(this.scene.uniforms.u_whites, (light.whites / 100) * 80);
gl.uniform1f(this.u.u_blacks, (light.blacks / 100) * 80); gl.uniform1f(this.scene.uniforms.u_blacks, (light.blacks / 100) * 80);
const color = opts.color; const color = opts.color;
gl.uniform1f(this.u.u_temperature, color.temperature / 100); gl.uniform1f(this.scene.uniforms.u_temperature, color.temperature / 100);
gl.uniform1f(this.u.u_tint, color.tint / 100); gl.uniform1f(this.scene.uniforms.u_tint, color.tint / 100);
gl.uniform1f(this.u.u_vibrance, color.vibrance / 100); gl.uniform1f(this.scene.uniforms.u_vibrance, color.vibrance / 100);
gl.uniform1f(this.u.u_saturation, color.saturation / 100); gl.uniform1f(this.scene.uniforms.u_saturation, color.saturation / 100);
gl.uniform1f(this.u.u_blending, color.grading.blending / 100); gl.uniform1f(this.scene.uniforms.u_blending, color.grading.blending / 100);
gl.uniform1f(this.u.u_balance, color.grading.balance / 100); gl.uniform1f(this.scene.uniforms.u_balance, color.grading.balance / 100);
gl.uniform3f( gl.uniform3f(
this.u.u_correction, this.scene.uniforms.u_correction,
color.correction.red / 100, color.correction.red / 100,
color.correction.green / 100, color.correction.green / 100,
color.correction.blue / 100 color.correction.blue / 100
@@ -429,9 +903,9 @@ export class WebGLPreview {
sat[i] = band.saturation / 100; sat[i] = band.saturation / 100;
lum[i] = band.luminance / 100; lum[i] = band.luminance / 100;
} }
gl.uniform1fv(this.u.u_mixerHue, hue); gl.uniform1fv(this.scene.uniforms['u_mixerHue[0]'], hue);
gl.uniform1fv(this.u.u_mixerSat, sat); gl.uniform1fv(this.scene.uniforms['u_mixerSat[0]'], sat);
gl.uniform1fv(this.u.u_mixerLum, lum); gl.uniform1fv(this.scene.uniforms['u_mixerLum[0]'], lum);
const gradeSat = new Float32Array(3); const gradeSat = new Float32Array(3);
const gradeLum = new Float32Array(3); const gradeLum = new Float32Array(3);
@@ -445,26 +919,124 @@ export class WebGLPreview {
gradeTint[i * 3 + 1] = g; gradeTint[i * 3 + 1] = g;
gradeTint[i * 3 + 2] = b; gradeTint[i * 3 + 2] = b;
} }
gl.uniform1fv(this.u.u_gradeSat, gradeSat); gl.uniform1fv(this.scene.uniforms['u_gradeSat[0]'], gradeSat);
gl.uniform1fv(this.u.u_gradeLum, gradeLum); gl.uniform1fv(this.scene.uniforms['u_gradeLum[0]'], gradeLum);
gl.uniform3fv(this.u.u_gradeTint, gradeTint); gl.uniform3fv(this.scene.uniforms['u_gradeTint[0]'], gradeTint);
const u0 = opts.crop.x / opts.imageWidth; const u0 = opts.crop.x / opts.imageWidth;
const u1 = (opts.crop.x + opts.crop.width) / opts.imageWidth; const u1 = (opts.crop.x + opts.crop.width) / opts.imageWidth;
const vTop = opts.crop.y / opts.imageHeight; const vTop = opts.crop.y / opts.imageHeight;
const vBottom = (opts.crop.y + opts.crop.height) / opts.imageHeight; const vBottom = (opts.crop.y + opts.crop.height) / opts.imageHeight;
gl.uniform2f(this.u.u_uvOffset, u0, 1 - vBottom); const uvOffsetX = u0;
gl.uniform2f(this.u.u_uvScale, u1 - u0, vBottom - vTop); const uvOffsetY = 1 - vBottom;
const uvScaleX = u1 - u0;
const uvScaleY = vBottom - vTop;
gl.uniform2f(this.scene.uniforms.u_uvOffset, uvOffsetX, uvOffsetY);
gl.uniform2f(this.scene.uniforms.u_uvScale, uvScaleX, uvScaleY);
this.drawQuad();
// Проходы размытия: текстура — полное (или половинное) разрешение,
// чёткость — половинное (или четвертное).
const scale = opts.dest.width / Math.max(1, opts.crop.width);
const minCrop = Math.min(opts.crop.width, opts.crop.height);
const textureRadius = Math.max(1, Math.round(0.0015 * minCrop * scale));
const clarityRadius = Math.max(2, Math.round(0.008 * minCrop * scale));
const texScale = opts.lowQuality ? 0.5 : 1;
const clarScale = opts.lowQuality ? 0.25 : 0.5;
let hasTexture = false;
let hasClarity = false;
if (effects.texture !== 0) {
const targetW = Math.max(1, Math.round(sceneWidth * texScale));
const targetH = Math.max(1, Math.round(sceneHeight * texScale));
this.textureH = this.ensureTarget(this.textureH, targetW, targetH);
this.textureV = this.ensureTarget(this.textureV, targetW, targetH);
const radius = Math.max(1, Math.round(textureRadius * texScale));
this.blurPass(sceneTarget.texture, this.textureH, 1 / targetW, 0, radius);
this.blurPass(this.textureH.texture, this.textureV, 0, 1 / targetH, radius);
hasTexture = true;
}
if (effects.clarity !== 0) {
const targetW = Math.max(1, Math.round(sceneWidth * clarScale));
const targetH = Math.max(1, Math.round(sceneHeight * clarScale));
this.clarityH = this.ensureTarget(this.clarityH, targetW, targetH);
this.clarityV = this.ensureTarget(this.clarityV, targetW, targetH);
const radius = Math.max(1, Math.round(clarityRadius * clarScale));
this.blurPass(sceneTarget.texture, this.clarityH, 1 / targetW, 0, radius);
this.blurPass(this.clarityH.texture, this.clarityV, 0, 1 / targetH, radius);
hasClarity = true;
}
const dehazeMap = effects.dehaze !== 0 ? this.ensureDehazeMap(opts) : null;
// Финальный проход: эффекты, виньетка, зерно.
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport( gl.viewport(
Math.round(opts.dest.x), Math.round(opts.dest.x),
Math.round(height - opts.dest.y - opts.dest.height), Math.round(height - opts.dest.y - opts.dest.height),
Math.max(1, Math.round(opts.dest.width)), Math.max(1, Math.round(opts.dest.width)),
Math.max(1, Math.round(opts.dest.height)) Math.max(1, Math.round(opts.dest.height))
); );
gl.bindVertexArray(this.vao); gl.useProgram(this.final.program);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); const u = this.final.uniforms;
gl.bindVertexArray(null);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, sceneTarget.texture);
gl.uniform1i(u.u_scene, 0);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, hasTexture ? this.textureV!.texture : sceneTarget.texture);
gl.uniform1i(u.u_blurTex, 1);
gl.activeTexture(gl.TEXTURE2);
gl.bindTexture(gl.TEXTURE_2D, hasClarity ? this.clarityV!.texture : sceneTarget.texture);
gl.uniform1i(u.u_blurClar, 2);
gl.activeTexture(gl.TEXTURE3);
gl.bindTexture(gl.TEXTURE_2D, this.dehazeTex);
gl.uniform1i(u.u_dehaze, 3);
gl.uniform1f(u.u_hasBlurTex, hasTexture ? 1 : 0);
gl.uniform1f(u.u_hasBlurClar, hasClarity ? 1 : 0);
gl.uniform1f(u.u_texture, effects.texture / 100);
gl.uniform1f(u.u_clarity, effects.clarity / 100);
gl.uniform1f(u.u_dehazeAmount, dehazeMap ? effects.dehaze / 100 : 0);
if (dehazeMap) {
gl.uniform3f(
u.u_dehazeA,
dehazeMap.atmosphere[0],
dehazeMap.atmosphere[1],
dehazeMap.atmosphere[2]
);
} else {
gl.uniform3f(u.u_dehazeA, 255, 255, 255);
}
gl.uniform2f(u.u_imageSize, opts.imageWidth, opts.imageHeight);
const cell = Math.max(
1,
(0.0005 + 0.004 * (effects.grain.size / 100)) *
Math.min(opts.imageWidth, opts.imageHeight)
);
gl.uniform1f(u.u_grainCell, cell);
const seed = opts.seed;
gl.uniform1ui(u.u_seedLo, Number(seed & 0xffffffffn));
gl.uniform1ui(u.u_seedHi, Number((seed >> 32n) & 0xffffffffn));
gl.uniform1f(u.u_grainAmount, effects.grain.amount);
gl.uniform1f(u.u_grainSize, effects.grain.size);
gl.uniform1f(u.u_grainRoughness, effects.grain.roughness);
const vignette = effects.vignette;
gl.uniform1f(u.u_vigAmount, vignette.amount);
gl.uniform1f(u.u_vigMidpoint, vignette.midpoint);
gl.uniform1f(u.u_vigFeather, vignette.feather);
gl.uniform1f(u.u_vigRoundness, vignette.roundness);
gl.uniform1f(u.u_vigHighlights, vignette.highlights);
gl.uniform1i(
u.u_vigMode,
vignette.mode === 'light' ? 0 : vignette.mode === 'color' ? 1 : 2
);
gl.uniform3f(u.u_vigColor, ...parseHex(vignette.color));
gl.uniform2f(u.u_uvOffset, uvOffsetX, uvOffsetY);
gl.uniform2f(u.u_uvScale, uvScaleX, uvScaleY);
this.drawQuad();
return true; return true;
} }
} }
@@ -0,0 +1,2 @@
schema: spec-driven
created: 2026-10-24
@@ -0,0 +1,256 @@
# Design
## Context
См. `proposal.md` — «Why». Текущее состояние, важное для подхода:
- `EditParams` хранится JSON-блобом в `photo.edit_params` (Postgres `jsonb`,
SQLite `TEXT`); роли `edit`, `edit_thumb`, `edit_medium`, `edit_preview`
рендерит фоновый воркер по исходному объекту. Источник истины — Go-рендер.
- Конвейер правок попиксельный: `applyLight`, затем `applyColor`; цвет уже
использует HSL-переход и быстрый путь без него.
- Живой предпросмотр: `WebGLPreview` рисует видимую область одним проходом
фрагментного шейдера; при недоступности WebGL2 — CPU-фолбэк (WASM, затем JS),
который применяет свет и цвет к пикселям кадра.
- `edit_params` — открытый JSON: новые ключи не требуют миграции; фото без
ключа `effects` рендерятся как раньше. Копии фото правки не наследуют.
Ключевое ограничение: текстура, чёткость и дымка — пространственные операции,
им нужны размытие и локальная статистика. Текущие три реализации (Go, GLSL,
WASM) этого не умеют; виньетка и зерно остаются попиксельными.
## Goals / Non-Goals
**Goals:**
- Полный блок «Эффекты» из макета: текстура, чёткость, дымка, виньетка
(режимы «Свет», «Цвет», «Закарасить»), зерно.
- Живой предпросмотр всех эффектов на WebGL2 и его деградация без WebGL.
- Детерминированный серверный рендер и обратная совместимость `edit_params`.
- Разумная стоимость рендера полноразмерного фото в фоновом воркере.
**Non-Goals:**
- Попиксельное совпадение с Lightroom и точное повторение его формул.
- Локальные маски, кисти, градиенты, синхронизация правок между устройствами.
- Пресеты эффектов, экспорт XMP, редактирование на Android.
- Изменение API-контракта правок: по-прежнему `PATCH /photos/:id/edit` с JSON.
## Decisions
**1. `EffectsParams` — новый блок в `EditParams`, без миграции БД.**
```json
{
"light": { "...": "..." },
"color": { "...": "..." },
"effects": {
"texture": 0,
"clarity": 0,
"dehaze": 0,
"vignette": {
"mode": "light",
"amount": 0,
"midpoint": 50,
"feather": 50,
"roundness": 0,
"highlights": 0,
"color": "#000000"
},
"grain": { "amount": 0, "size": 25, "roughness": 50 }
}
}
```
- `mode`: `light` | `color` | `colorize`; неизвестный режим нормализуется в
`light`. `color` — hex-строка `#rrggbb`, нормализуется к нижнему регистру.
- Нормализация заполняет структурные дефолты (midpoint 50, feather 50, size 25,
roughness 50, mode light, color `#000000`) только для полей, отсутствующих в
JSON: явный `0` — валидное значение геометрии и сохраняется. Для этого модель
запоминает факт присутствия поля при разборе (`midpointSet`, `featherSet`,
`sizeSet`, `roughnessSet`). `IsEmpty` игнорирует дефолты при нулевой силе:
пустыми считаются только ненулевые `texture`, `clarity`, `dehaze`,
`vignette.amount`, `grain.amount`. Так `{}` и «дефолты без силы» одинаково
означают отсутствие правок.
- Альтернатива: отдельная таблица/колонка — отвергнута, потребовала бы миграции
и не даёт выгоды для JSON-параметров.
**2. Порядок рендера: свет → цвет → дымка → текстура → чёткость → виньетка → зерно.**
- Дымка — глобальная тональная коррекция, её логично применять до локального
контраста; текстура работает с высокими частотами, чёткость — со средними,
поэтому текстура идёт раньше. Виньетка и зерно — финальные операции над уже
сведённым кадром (аналог post-crop в Lightroom).
- Альтернатива: применять эффекты до цвета — отвергнута: цветокоррекция должна
работать с уже очищенным от дымки кадром, иначе дымка «перекрашивает» цвета.
- Порядок одинаков во всех реализациях; расхождение с сервером допустимо только
в деталях предпросмотра.
**3. Пространственные эффекты считаются в яркости, цвет не смещается.**
- Для каждого пикселя берётся яркость `Y = 0.299r + 0.587g + 0.114b`;
локальный контраст считается по `Y`, а разница применяется аддитивно ко всем
трём каналам. Это сохраняет оттенок и насыщенность и совпадает с принятым в
проекте подходом «яркость аддитивно».
- Текстура: unsharp mask с малым радиусом, `Y' = Y + k * (Y - blur_small(Y))`.
- Чёткость: unsharp mask с большим радиусом и подавлением ореолов — дельта
ограничивается и взвешивается по средним тонам, чтобы не звонить на границах
контрастных объектов.
- Отрицательные значения интерполируют к размытой версии (сглаживание), а не
просто инвертируют знак дельты.
**4. Размытие — быстрый box-blur (три прохода ≈ гаусс), радиус — доля размера кадра.**
- Радиус задаётся относительно `min(width, height)` (текстура ≈ 0.15 %, чёткость
≈ 0.8 %), с минимумом 1 px. Это ключевое решение для совпадения превью и
полноразмерного рендера: сервер считает по оригиналу (например, 4000 px), а
превью — по preview 1200 px; относительный радиус даёт одинаковую частоту.
- Box-blur через скользящее окно по строкам/столбцам — O(n) независимо от
радиуса, поэтому большой радиус чёткости не бьёт по времени. Размытие идёт по
строкам параллельно, как текущие проходы.
- Альтернатива: `imaging.Blur` — проще, но стоимость растёт с радиусом; для
полноразмерных фото и больших радиусов отвергнуто.
**5. Дымка — dark channel prior на уменьшенной копии.**
- Оценка атмосферного света `A`: по уменьшенной копии (≈512 px) берутся самые
яркие пиксели тёмного канала (верхний 0.1 %).
- Карта пропускания `t = 1 - ω * min_c(I_c / A_c)` сглаживается box-blur и
ограничивается снизу (например, 0.1), затем интерполируется на полный кадр.
- `J_c = (I_c - A_c) / max(t, t0) + A_c`; сила эффекта интерполирует между `I` и
`J`. Отрицательные значения — обратная операция: подмешивание `A` и снижение
контраста.
- Альтернатива: простое «поднять контраст и насыщенность» — дешевле, но не
убирает дымку на дальних планах; отвергнуто как не соответствующее смыслу
контрола.
**6. Виньетка — нормализованная геометрия и три режима.**
- Координаты нормализуются к половине кадра; расстояние до центра возводится в
степень, зависящую от округлости (эллипс ↔ суперэллипс/скруглённый
прямоугольник). Средняя точка задаёт начало зоны, растушёвка — ширину
перехода, знак силы выбирает затемнение или осветление.
- «Свет»: аддитивная поправка яркости с весом маски; «Света» защищает яркие
пиксели (уменьшает поправку при высокой `Y`), чтобы виньетка не «съедала»
блики.
- «Цвет»: подмешивание выбранного цвета с сохранением светлоты (смещение в
хроматические координаты). «Закарасить»: заливка выбранным цветом поверх
кадра с весом маски и силы. В обоих цветных режимах «Света» ограничивает
влияние на яркие участки.
- Альтернатива: отдельные реализации на каждый режим — отвергнута, общая маска
даёт одинаковую геометрию и меньше расхождений между сервером и превью.
**7. Зерно — детерминированный процедурный шум.**
- PRNG (например, splitmix64) инициализируется хешем `photo.id`, а не случайным
зерном: повторный рендер тех же параметров даёт тот же рисунок. Это требование
спеки; иначе `edit_thumb` и полноразмерный рендер расходились бы при каждом
прогоне.
- «Размер» задаёт шаг сетки шума (доля размера кадра, с минимумом 1 px),
«шероховатость» смешивает высокочастотный и сглаженный шум. Шум добавляется в
яркость, чтобы не вносить цветные пятна; сила 0 — шум не считается.
- Превью и полноразмерный рендер используют один PRNG, но разные сетки
дискретизации: рисунок визуально похож, побитового совпадения нет.
**8. WebGL2-предпросмотр переходит на много­проходную схему.**
- Проход 1: существующий шейдер света/цвета рисует кадр в FBO-текстуру вместо
экрана.
- Проход 2: яркость `Y`, разделимое box-размытие (горизонталь + вертикаль) в
две ping-pong текстуры; для чёткости — уменьшенное разрешение, для текстуры —
несколько тапов на полном.
- Дымка: `A` и карта `t` считаются на CPU по базовому превью при смене
изображения/параметров дымки и загружаются текстурой (например, 256 px);
шейдер интерполирует.
- Финальный проход: `A`-текстура, размытая яркость, карта дымки, виньетка и
зерно (хеш-шум в шейдере) → экран.
- Во время перетаскивания ползунка (`previewLow`) уменьшаются разрешение
размытия и число проходов; после паузы — полное качество, как сейчас.
- Альтернатива: один проход с приближением (несколько тапов) — проще, но
большой радиус чёткости требует десятков выборок и даёт хуже картинку;
отвергнуто.
**9. CPU-фолбэк: виньетка и зерно — да, пространственные эффекты — после сервера.**
- В JS-фолбэке применяются свет, цвет, виньетка и зерно (попиксельно); текстура,
чёткость и дымка не считаются, чтобы не блокировать main thread размытием
полного кадра, и появляются после серверного рендера. Это допустимо по спеке
(«предпросмотр без WebGL… после серверного рендера»).
- WASM-модуль не трогаем: он остаётся попиксельным и покрывает свет/цвет.
Альтернатива — расширять `no_std`-модуль буферами под blur — отвергнута как
отдельный крупный проект без выигрыша для основного GPU-пути.
**10. Гистограмма остаётся по свету и цвету.**
- Она считается по сэмплу 256 px (`sampleImage` + `applyLight`/`applyColor`);
на таком размере пространственные эффекты бессмысленны, а виньетка/зерно
искажали бы оценку тональности. Оставляем текущий расчёт и явно фиксируем это
решение в коде/дизайне.
**11. UI: секция «Эффекты» после «Цвет».**
- Заголовок сворачиваемый, как «Свет»/«Цвет». Слайдеры — существующий
`EditSlider` (двойной клик сбрасывает значение).
- Виньетка: три кнопки-вкладки («Свет», «Цвет», «Закарасить»), под ними сила
(«Виньетка»), средняя точка, растушёвка, округлость, света; для цветных
режимов — свотч цвета (`<input type="color">`), значение хранится hex-строкой.
- «Зерно»: сила, размер, шероховатость.
- Глобальная кнопка «Сброс» в секции «Свет» продолжает сбрасывать все правки
целиком (включая эффекты) — новых точек сброса не добавляем, чтобы не
дублировать поведение.
- Сохранение — через существующий debounce и `photosApi.edit`; сервер сам решает,
что параметры пустые. Индикатор «рендерится» уже привязан к наличию правок и
отсутствию `edit_preview_url`, поэтому заработает без изменений.
**12. Свёрнутость секций редактора — в localStorage, по умолчанию всё свёрнуто.**
- Все сворачиваемые блоки панели («Свет», «Кривая», «Цвет», «Цветовой микшер»,
«Точный цвет», «Цветокоррекция», «Эффекты») по умолчанию свёрнуты: панель
открывается компактно и не перегружает экран.
- Выбор пользователя хранится в браузере, в localStorage-ключе
`galo.edit.sections` (JSON `{section: collapsed}`), и восстанавливается при
перезагрузке и смене фото. Неизвестные ключи и небулевы значения
игнорируются, ошибки хранилища не ломают панель.
- Альтернатива: хранить в `preferences` профиля — отвергнута: это настройка
конкретного браузера, а не аккаунта; сервер и Android не затрагиваются.
**13. Вкладка «Редактирование» доступна только в просмотрщике.**
- В режиме сетки правая панель показывает только «Сведения»: редактирование
открывается при просмотре фото в просмотрщике, где доступны живой предпросмотр
и пипетка.
- Реализация: у `PhotoPanel` уже есть признак `viewer`; активная вкладка —
`activeTab = viewer ? tab : 'info'`, кнопка «Редактирование» рендерится только
при `viewer`. Сохранённая вкладка не теряется: вернувшись в просмотрщик,
пользователь увидит тот же раздел.
- Альтернатива: показывать вкладку неактивной — отвергнута: лишний элемент в
режиме просмотра сетки и риск случайных правок.
## Risks / Trade-offs
- **[Расхождение превью и серверного рендера]** → относительные радиусы и
геометрия; CPU/GL предпросмотр явно считается приблизительным, источник истины
— сервер. Это документируется в спеке («MAY отличаться деталями»).
- **[Стоимость рендера полноразмерного фото]** → O(n) box-blur вместо
гауссова с большим радиусом; дымка считается на уменьшенной копии; проходы
пропускаются, если эффект пуст; параллелизм по строкам. Добавить бенчмарк на
12 Мп и следить за временем воркера.
- **[Ореолы чёткости]** → ограничение дельты и веса по тонам; при сильных
значениях полностью убрать ореолы нельзя, это осознанный компромисс.
- **[Зерно и thumbnail]** → seed от `photo.id`, иначе фоновая пересборка даёт
разный шум; цена — визуально разные рисунки превью и полного кадра.
- **[Обратная совместимость]** → ключ `effects` игнорируется старым бинарником;
`IsEmpty` учитывает только силы, поэтому дефолты не «залипают» как правка.
- **[Шум в гистограмме]** → эффекты не входят в гистограмму; это осознанно и
может быть пересмотрено отдельным изменением.
## Migration Plan
Схемных миграций нет. Выкатка сервер + фронтенд одновременно; старые фото и
старые `edit_params` читаются с дефолтами. Откат — возврат предыдущей сборки:
неизвестный ключ `effects` старые версии просто игнорируют, параметры остаются в
метаданных и сбрасываются штатной кнопкой «Сброс».
## Open Questions
Нет.
@@ -0,0 +1,72 @@
# Proposal
## Why
В неразрушающем редакторе Galo сейчас есть только блоки «Свет» и «Цвет»:
экспозиция, тональная кривая, баланс белого, микшер и цветокоррекция. Не хватает
эффектов, которые в Lightroom собраны в панели «Эффекты»: текстура, чёткость,
удаление дымки, виньетка и зерно. Это последний крупный блок базовой обработки,
после которого веб-редактор покрывает привычный набор Lightroom.
## What Changes
- Добавить в `EditParams` блок `Effects`:
- **Текстура** — локальный контраст высоких частот (unsharp mask по яркости).
- **Чёткость** — локальный контраст средних частот с защитой от ореолов.
- **Убрать дымку** — оценка дымки (dark channel prior) и возврат контраста и
насыщенности.
- **Виньетка** — три режима, как в макете: «Свет», «Цвет», «Закарасить»
(заливка). Параметры: сила, средняя точка, растушёвка, округлость, света;
для цветных режимов — цвет виньетки.
- **Зерно** — сила, размер, шероховатость; шум детерминирован для повторных
рендеров.
- Сервер (Go): применять эффекты после света и цвета при рендере редактированной
версии; результат по-прежнему пишется в роли `edit`, `edit_thumb`,
`edit_medium`, `edit_preview`, оригинал не меняется.
- Клиент (Svelte/TS): раздел «Эффекты» в панели правок с вкладками виньетки;
живой предпросмотр эффектов в просмотрщике до готовности серверного рендера.
- Панель правок: все секции инструментов по умолчанию свёрнуты, состояние
каждой секции сохраняется в браузере (`localStorage`).
- Вкладка «Редактирование» доступна только в просмотрщике: в режиме сетки
правая панель показывает только «Сведения».
- WebGL2-превью: перейти с одного прохода на много­проходную схему (FBO,
разделимое размытие, карта дымки) для пространственных эффектов.
- Обратная совместимость: `edit_params` остаётся JSON-блобом, фото без ключа
`effects` рендерятся как раньше; миграции схемы БД не требуется.
- Android-клиент не меняется: он показывает уже отрендеренные версии.
## Capabilities
### New Capabilities
Нет — эффекты входят в существующую способность `photos`.
### Modified Capabilities
- `photos`: требование «Неразрушающее редактирование фотографии» расширяется
параметрами эффектов; добавляются требования к виньетке, зерну, пространственным
эффектам и их живому предпросмотру.
## Impact
- `backend/internal/photos/edit.go` — модель `EffectsParams`, нормализация,
`IsEmpty`, сериализация.
- `backend/internal/photos/handlers.go` — приём блока `effects` в
`PATCH /photos/:id/edit` (у обработчика собственный request-структ).
- `backend/internal/photos/edit_render.go` — порядок проходов рендера и новые
эффекты; вероятно отдельный файл с пространственными операциями (blur,
dark channel, виньетка, зерно).
- `frontend/src/lib/edit.ts` — типы, дефолты, нормализация, CPU-реализация
попиксельных эффектов (виньетка, зерно) для фолбэка.
- `frontend/src/lib/webgl-preview.ts`, `Viewer.svelte` — много­проходный
предпросмотр эффектов.
- `frontend/src/lib/components/PhotoEditPanel.svelte` — раздел «Эффекты»,
вкладки виньетки, цвет виньетки; свёрнутые по умолчанию секции; `EditSlider.svelte`
переиспользуется.
- `frontend/src/lib/editor-sections.ts` — состояние сворачивания секций в
`localStorage` и его нормализация.
- `frontend/src/lib/components/PhotoPanel.svelte` — вкладка «Редактирование»
только при открытом просмотрщике.
- Тесты: `edit_test.go`, `edit.test.ts`, новый e2e-сценарий правки с эффектами,
бенчмарк пространственных проходов; проверка компиляции GL-шейдеров.
- Миграции БД и Android-клиент не затрагиваются.
@@ -0,0 +1,180 @@
# Spec Delta
## MODIFIED Requirements
### Requirement: Неразрушающее редактирование фотографии
Система SHALL поддерживать неразрушающее редактирование фотографий. Параметры правок (свет, цвет и эффекты) SHALL храниться в метаданных фото, а отредактированная версия SHALL создаваться как отдельные объекты (роли `edit`, `edit_thumb`, `edit_medium`, `edit_preview`) рядом с исходными вариантами. Рендер SHALL выполняться по исходному объекту фото, а не по его уменьшенным вариантам. Исходный объект SHALL оставаться неизменным, а скачивание SHALL отдавать оригинал. Сброс правок SHALL удалять и параметры, и отредактированную версию. Правки SHALL применяться только к изображениям.
#### Scenario: Сохранение правок
- **WHEN** пользователь сохраняет правки фото (свет, цвет и/или эффекты)
- **THEN** параметры сохраняются в метаданных, отредактированная версия рендерится в фоне, а после рендера фото получает URL отредактированных вариантов
#### Scenario: Фоновая подготовка версий
- **WHEN** правки фото сохранены
- **THEN** система готовит варианты сетки и полноразмерную версию в фоне и сообщает о готовности
#### Scenario: Рендер по оригиналу
- **WHEN** готовится отредактированная версия фото
- **THEN** световые и цветовые правки, а также эффекты применяются к пикселям исходного объекта, а не к его уменьшенной копии
#### Scenario: Неразрушачность
- **WHEN** фото отредактировано
- **THEN** исходный объект и его варианты остаются неизменными
#### Scenario: Сброс правок
- **WHEN** пользователь сбрасывает правки
- **THEN** параметры и отредактированная версия удаляются, а фото снова показывается в исходном виде
#### Scenario: Права на правки
- **WHEN** правки сохраняет пользователь без прав на это фото
- **THEN** система отклоняет запрос
#### Scenario: Редактирование видео
- **WHEN** пользователь пытается отредактировать видео
- **THEN** система отклоняет запрос
#### Scenario: Цветовые правки сохраняются и рендерятся
- **WHEN** пользователь сохраняет цветовые правки фото: баланс белого (температура/оттенок), сочность (vibrance), насыщенность, цветовой микшер по оттенкам, цветокоррекцию (тени/средние тона/света, яркость зон, наложение, баланс) или поканальную коррекцию
- **THEN** параметры цвета сохраняются в метаданных, отредактированная версия рендерится в фоне, а после рендера фото получает URL отредактированных вариантов
#### Scenario: Цветовые правки применяются к пикселям исходного объекта
- **WHEN** готовится отредактированная версия фото с цветовыми правками
- **THEN** цветовые правки применяются к пикселям исходного объекта после световых правок, а не к его уменьшенной копии
#### Scenario: Пустые цветовые правки не сохраняются
- **WHEN** в цветовых параметрах заданы только наложение/баланс или оттенок колеса без силы и яркости
- **THEN** правки считаются пустыми и фото не получает цветовую версию
#### Scenario: Пустые правки эффектов не сохраняются
- **WHEN** во всех эффектах заданы только значения по умолчанию (сила эффекта, виньетки и зерна равна нулю)
- **THEN** правки считаются пустыми и фото не получает новую отредактированную версию
## ADDED Requirements
### Requirement: Текстура
Клиент SHALL позволять настраивать текстуру фото в диапазоне -100..100. Положительные значения SHALL усиливать контраст мелких деталей, отрицательные — ослаблять его. Эффект SHALL применяться к исходному кадру после световых и цветовых правок.
#### Scenario: Усиление текстуры
- **WHEN** пользователь увеличивает значение текстуры
- **THEN** мелкие детали становятся контрастнее, а общая тональность кадра не меняется
#### Scenario: Ослабление текстуры
- **WHEN** пользователь уменьшает значение текстуры ниже нуля
- **THEN** мелкие детали сглаживаются
#### Scenario: Текстура в пределах допустимого
- **WHEN** клиент присылает значение текстуры вне диапазона -100..100
- **THEN** сервер ограничивает его ближайшей границей диапазона
### Requirement: Чёткость
Клиент SHALL позволять настраивать чёткость фото в диапазоне -100..100. Положительные значения SHALL усиливать локальный контраст средних частот, отрицательные — смягчать его. Чёткость SHALL NOT создавать заметных ореолов на границах контрастных объектов. Эффект SHALL применяться после световых и цветовых правок.
#### Scenario: Усиление чёткости
- **WHEN** пользователь увеличивает значение чёткости
- **THEN** локальный контраст средних тонов растёт, а границы контрастных объектов остаются без заметных ореолов
#### Scenario: Ослабление чёткости
- **WHEN** пользователь уменьшает значение чёткости ниже нуля
- **THEN** изображение становится мягче
### Requirement: Убрать дымку
Клиент SHALL позволять ослаблять или усиливать дымку в диапазоне -100..100. При положительных значениях сервер SHALL оценивать дымку по кадру и возвращать контраст и насыщенность удалённых участков; отрицательные значения SHALL добавлять дымку.
#### Scenario: Удаление дымки
- **WHEN** пользователь увеличивает значение «Убрать дымку» на кадре с дымкой
- **THEN** дальние планы становятся контрастнее и насыщеннее
#### Scenario: Добавление дымки
- **WHEN** пользователь уменьшает значение «Убрать дымку» ниже нуля
- **THEN** кадр становится менее контрастным, как при дымке
### Requirement: Виньетка
Клиент SHALL позволять настраивать виньетку: силу -100..100, среднюю точку и растушёвку 0..100 (по умолчанию 50), округлость -100..100, света 0..100, а также режим «Свет», «Цвет» или «Закарасить». Режим «Свет» SHALL затемнять или осветлять края, «Цвет» — тонировать их выбранным цветом с сохранением светлоты, «Закарасить» — заливать их выбранным цветом.
#### Scenario: Затемнение краёв
- **WHEN** пользователь задаёт положительную силу виньетки в режиме «Свет»
- **THEN** края кадра затемняются, а центр остаётся без изменений
#### Scenario: Осветление краёв
- **WHEN** пользователь задаёт отрицательную силу виньетки в режиме «Свет»
- **THEN** края кадра осветляются
#### Scenario: Цветная виньетка
- **WHEN** пользователь выбирает режим «Цвет» или «Закарасить» и задаёт цвет виньетки
- **THEN** края кадра тонируются или заливаются этим цветом с силой, заданной ползунком виньетки
#### Scenario: Геометрия виньетки
- **WHEN** пользователь меняет среднюю точку, растушёвку или округлость
- **THEN** меняются размер, мягкость и форма зоны виньетки
#### Scenario: Защита светов
- **WHEN** пользователь увеличивает значение «Света» в режиме «Свет»
- **THEN** яркие участки в зоне виньетки сохраняют яркость
#### Scenario: Нулевая сила виньетки
- **WHEN** сила виньетки равна нулю
- **THEN** виньетка не влияет на изображение независимо от остальных параметров
### Requirement: Зерно
Клиент SHALL позволять добавлять зерно с силой, размером и шероховатостью в диапазоне 0..100 (по умолчанию размер 25, шероховатость 50). Зерно SHALL быть детерминированным: повторный рендер одних и тех же параметров SHALL давать одинаковый шум.
#### Scenario: Добавление зерна
- **WHEN** пользователь увеличивает силу зерна
- **THEN** на изображении появляется шум, заметный в средних тонах
#### Scenario: Размер и шероховатость
- **WHEN** пользователь меняет размер или шероховатость зерна
- **THEN** меняются крупность и контрастность шума
#### Scenario: Детерминированность зерна
- **WHEN** сервер повторно рендерит фото с теми же параметрами зерна
- **THEN** рисунок шума совпадает с предыдущим рендером
#### Scenario: Нулевая сила зерна
- **WHEN** сила зерна равна нулю
- **THEN** зерно не влияет на изображение
### Requirement: Живой предпросмотр эффектов
Клиент SHALL показывать эффекты в просмотрщике до завершения серверного рендера. После готовности серверной версии клиент SHALL показывать её. Предпросмотр пространственных эффектов (текстура, чёткость, дымка) MAY отличаться от серверного рендера деталями, но SHALL передавать характер эффекта.
#### Scenario: Эффекты видны сразу
- **WHEN** пользователь двигает ползунок эффекта
- **THEN** просмотрщик обновляет изображение без ожидания серверного рендера
#### Scenario: Серверная версия заменяет предпросмотр
- **WHEN** серверный рендер эффектов завершён
- **THEN** просмотрщик показывает серверную версию
#### Scenario: Предпросмотр без WebGL
- **WHEN** аппаратное ускорение недоступно
- **THEN** клиент показывает эффекты доступным способом или показывает их после серверного рендера, не блокируя интерфейс
### Requirement: Свёрнутые секции редактора
Редактор SHALL показывать все сворачиваемые секции инструментов свёрнутыми по умолчанию. Клиент SHALL сохранять состояние каждой секции (свёрнута или развёрнута) в браузере пользователя и восстанавливать его при повторном открытии редактора и перезагрузке страницы. Состояние SHALL NOT зависеть от выбранного фото.
#### Scenario: Первое открытие редактора
- **WHEN** пользователь впервые открывает редактор фото
- **THEN** все секции инструментов («Свет», «Цвет», «Эффекты» и их вложенные блоки) свёрнуты
#### Scenario: Состояние запоминается
- **WHEN** пользователь разворачивает секцию «Эффекты» и перезагружает страницу
- **THEN** секция «Эффекты» остаётся развёрнутой
#### Scenario: Состояние переживает смену фото
- **WHEN** пользователь переключает фото в редакторе
- **THEN** свёрнутость секций не меняется
### Requirement: Редактирование только из просмотрщика
Клиент SHALL показывать вкладку «Редактирование» только когда фото открыто в просмотрщике. В режиме сетки правая панель SHALL показывать только «Сведения» и SHALL NOT отображать инструменты редактирования.
#### Scenario: Фото выбрано в сетке
- **WHEN** пользователь выбирает фото в сетке, не открывая просмотрщик
- **THEN** в правой панели отображается только вкладка «Сведения»
#### Scenario: Фото открыто в просмотрщике
- **WHEN** пользователь открывает фото в просмотрщике
- **THEN** в правой панели доступны «Сведения» и «Редактирование»
#### Scenario: Возврат из просмотрщика в сетку
- **WHEN** пользователь возвращается из просмотрщика в сетку
- **THEN** вкладка «Редактирование» скрыта, панель показывает «Сведения»
@@ -0,0 +1,62 @@
# Tasks
## 1. Модель правок и нормализация (Go)
- [x] 1.1 Добавить `EffectsParams`, `VignetteParams`, `GrainParams` и поле `EditParams.Effects` в `backend/internal/photos/edit.go`, включая режимы виньетки и hex-цвет — проверить `cd backend && go build ./internal/photos/`
- [x] 1.2 Реализовать нормализацию: диапазоны, дефолты midpoint 50 / feather 50 / size 25 / roughness 50, неизвестный режим → `light`, валидный hex-цвет; обновить `IsEmpty`/`JSON` так, чтобы дефолты без силы не считались правкой — проверить `cd backend && go test ./internal/photos/ -run TestEffectsParams -v`
- [x] 1.3 Проверить обратную совместимость: `{}` и старые параметры только со светом/цветом читаются как пустые эффекты и рендерятся без изменений — проверить `cd backend && go test ./internal/photos/ -run TestEditParamsLegacy -v`
## 2. Пространственный рендер (Go)
- [x] 2.1 Добавить хелпер яркости и разделимый box-blur со скользящим окном (O(n) от радиуса, параллельно по строкам) — проверить `cd backend && go test ./internal/photos/ -run TestBoxBlur -v` и бенчмарк на 4000×3000
- [x] 2.2 Реализовать текстуру и чёткость как unsharp mask по яркости с ограничением дельты и весами по тонам (радиусы — доли `min(width,height)`) — проверить тест, что локальная дисперсия растёт при положительных и падает при отрицательных значениях
- [x] 2.3 Реализовать «Убрать дымку» через dark channel prior: атмосферный свет и карта пропускания на уменьшенной копии, интерполяция на полный кадр, положительные и отрицательные значения — проверить тест на синтетическом «задымлённом» изображении: контраст и насыщенность растут
- [x] 2.4 Реализовать виньетку: нормализованная геометрия (midpoint, feather, roundness), режимы «Свет»/«Цвет»/«Закарасить», защита светов — проверить тест: края темнеют/светлеют, центр не меняется, цветные режимы меняют оттенок краёв
- [x] 2.5 Реализовать зерно: PRNG с seed от `photo.id`, размер и шероховатость, аддитивный шум в яркость — проверить тест: два рендера с одинаковыми параметрами дают идентичные пиксели, сила 0 не меняет кадр
- [x] 2.6 Встроить эффекты в `decodeAndAdjust` в порядке свет → цвет → дымка → текстура → чёткость → виньетка → зерно, с пропуском пустых проходов — проверить `cd backend && go test ./internal/photos/ -v` и бенчмарк полного рендера
- [x] 2.7 Добавить e2e-сценарий: сохранение правки с эффектами, фоновый рендер `edit_*`, сброс, повторный рендер с тем же зерном — проверить `cd backend && go test ./internal/e2e/ -run TestEffectsEdit -v`
## 3. Клиентская модель и CPU-фолбэк (TypeScript)
- [x] 3.1 Добавить `EffectsParams` и дефолты в `frontend/src/lib/edit.ts`, обновить `readEditParams`/`normalizeEditParams`/`isEmptyEditParams` — проверить `cd frontend && npm run test` (`edit.test.ts`) и `npm run check`
- [x] 3.2 Реализовать CPU-применение виньетки и зерна (по образцу `applyColorToPixels`), seed и геометрия — как на сервере; тесты на затемнение краёв и детерминированность шума — проверить `cd frontend && npm run test`
- [x] 3.3 Убедиться, что гистограмма по-прежнему считается только по свету и цвету (без пространственных эффектов) — проверить `npm run check` и отсутствие изменений в расчёте `histogram`
## 4. WebGL-предпросмотр
- [x] 4.1 Перевести `frontend/src/lib/webgl-preview.ts` на много­проходную схему: свет/цвет в FBO-текстуру вместо экрана, два ping-pong FBO — проверить компиляцию/линковку шейдеров и `npm run build`
- [x] 4.2 Добавить проход яркости и разделимое box-размытие: малое разрешение для чёткости, несколько тапов для текстуры; включать проход только при ненулевых значениях — проверить, что текстура и чёткость видны в превью и не ломают свет/цвет
- [x] 4.3 Добавить предварительный расчёт дымки на CPU (атмосферный свет + карта пропускания по базовому превью) и передачу её текстурой в финальный проход — проверить, что ползунок дымки меняет превью
- [x] 4.4 Добавить в финальный проход виньетку (три режима) и зерно (хеш-шум) с параметрами из `liveParams.effects` — проверить визуально смену режимов и силы
- [x] 4.5 Подключить эффекты в `Viewer.svelte` для GL-пути и CPU-фолбэка: при `previewLow` снижать качество размытия, после паузы — полное; в CPU-фолбэке применять только виньетку и зерно — проверить, что интерфейс не блокируется при перетаскивании
- [x] 4.6 Проверить деградацию без WebGL: пространственные эффекты появляются после серверного рендера, а виньетка/зерно видны сразу — проверить ручным сценарием с отключённым WebGL2
## 5. UI: раздел «Эффекты»
- [x] 5.1 Добавить сворачиваемую секцию «Эффекты» в `PhotoEditPanel.svelte` со слайдерами текстуры, чёткости и дымки (`EditSlider`) — проверить открытие/сворачивание и изменение превью
- [x] 5.2 Добавить вкладки виньетки «Свет»/«Цвет»/«Закарасить», ползунки силы/средней точки/растушёвки/округлости/светов и свотч цвета для цветных режимов — проверить сохранение режима и цвета в параметрах
- [x] 5.3 Добавить ползунки зерна (сила, размер, шероховатость) — проверить, что сила 0 не добавляет правку
- [x] 5.4 Подключить эффекты к существующему сохранению (`scheduleSave`/`photosApi.edit`), переключению фото и глобальному сбросу — проверить `PATCH /api/photos/:id/edit` с `effects`, сброс очищает параметры и `edit_*`, переключение фото не теряет несохранённые эффекты
- [x] 5.5 Проверить сборку и типы: `cd frontend && npm run check && npm run build`
## 6. Интеграционная проверка
- [x] 6.1 Ручной прогон матрицы: только эффекты; эффекты вместе со светом/цветом; сброс; правка во время переключения фото; фото без `effects`; копия фото не наследует эффекты; видео отклоняется — проверить в запущенном инстансе
- [x] 6.2 Замерить время фонового рендера полноразмерного фото с включёнными текстурой/чёткостью/дымкой и сравнить с текущим рендером света/цвета — проверить по логам воркера и бенчмарку
- [x] 6.3 Прогнать общие проверки репозитория: `make test`, фронтенд-тесты `npm run test` и сборку `make build`
## 7. Свёрнутые секции редактора
- [x] 7.1 Добавить `frontend/src/lib/editor-sections.ts` (дефолты, чтение/запись localStorage, нормализация) и тесты — проверить `cd frontend && npm run test` (`editor-sections.test.ts`)
- [x] 7.2 Сделать все сворачиваемые секции `PhotoEditPanel.svelte` свёрнутыми по умолчанию и подключить сохранение состояния — проверить `npm run check`
- [x] 7.3 Проверить в Chrome: по умолчанию всё свёрнуто, развёрнутое состояние переживает перезагрузку и смену фото — сценарий с CDP, без ошибок в консоли
## 8. Вкладка редактирования только в просмотрщике
- [x] 8.1 Скрыть вкладку «Редактирование» в режиме сетки через `activeTab` в `PhotoPanel.svelte` — проверить `cd frontend && npm run check`
- [x] 8.2 Проверить в Chrome: в сетке доступна только «Сведения», в просмотрщике — «Редактирование», после возврата в сетку вкладка снова скрыта — CDP-сценарий, без ошибок в консоли
## Workflow follow-up
- Архивировать изменение после удовлетворения требований ревью проекта.
- Проверить архивированный результат: дельта-спека `photos` применена к основной спеке.
+135 -3
View File
@@ -283,10 +283,10 @@ SHALL быть доступно и для фото без альбома (нап
- **THEN** контрольные суммы входят в данные полученных фото - **THEN** контрольные суммы входят в данные полученных фото
### Requirement: Неразрушающее редактирование фотографии ### Requirement: Неразрушающее редактирование фотографии
Система SHALL поддерживать неразрушающее редактирование фотографий. Параметры правок (свет и цвет) SHALL храниться в метаданных фото, а отредактированная версия SHALL создаваться как отдельные объекты (роли `edit`, `edit_thumb`, `edit_medium`, `edit_preview`) рядом с исходными вариантами. Рендер SHALL выполняться по исходному объекту фото, а не по его уменьшенным вариантам. Исходный объект SHALL оставаться неизменным, а скачивание SHALL отдавать оригинал. Сброс правок SHALL удалять и параметры, и отредактированную версию. Правки SHALL применяться только к изображениям. Система SHALL поддерживать неразрушающее редактирование фотографий. Параметры правок (свет, цвет и эффекты) SHALL храниться в метаданных фото, а отредактированная версия SHALL создаваться как отдельные объекты (роли `edit`, `edit_thumb`, `edit_medium`, `edit_preview`) рядом с исходными вариантами. Рендер SHALL выполняться по исходному объекту фото, а не по его уменьшенным вариантам. Исходный объект SHALL оставаться неизменным, а скачивание SHALL отдавать оригинал. Сброс правок SHALL удалять и параметры, и отредактированную версию. Правки SHALL применяться только к изображениям.
#### Scenario: Сохранение правок #### Scenario: Сохранение правок
- **WHEN** пользователь сохраняет правки фото (свет и/или цвет) - **WHEN** пользователь сохраняет правки фото (свет, цвет и/или эффекты)
- **THEN** параметры сохраняются в метаданных, отредактированная версия рендерится в фоне, а после рендера фото получает URL отредактированных вариантов - **THEN** параметры сохраняются в метаданных, отредактированная версия рендерится в фоне, а после рендера фото получает URL отредактированных вариантов
#### Scenario: Фоновая подготовка версий #### Scenario: Фоновая подготовка версий
@@ -295,7 +295,7 @@ SHALL быть доступно и для фото без альбома (нап
#### Scenario: Рендер по оригиналу #### Scenario: Рендер по оригиналу
- **WHEN** готовится отредактированная версия фото - **WHEN** готовится отредактированная версия фото
- **THEN** световые и цветовые правки применяются к пикселям исходного объекта, а не к его уменьшенной копии - **THEN** световые и цветовые правки, а также эффекты применяются к пикселям исходного объекта, а не к его уменьшенной копии
#### Scenario: Неразрушачность #### Scenario: Неразрушачность
- **WHEN** фото отредактировано - **WHEN** фото отредактировано
@@ -325,6 +325,10 @@ SHALL быть доступно и для фото без альбома (нап
- **WHEN** в цветовых параметрах заданы только наложение/баланс или оттенок колеса без силы и яркости - **WHEN** в цветовых параметрах заданы только наложение/баланс или оттенок колеса без силы и яркости
- **THEN** правки считаются пустыми и фото не получает цветовую версию - **THEN** правки считаются пустыми и фото не получает цветовую версию
#### Scenario: Пустые правки эффектов не сохраняются
- **WHEN** во всех эффектах заданы только значения по умолчанию (сила эффекта, виньетки и зерна равна нулю)
- **THEN** правки считаются пустыми и фото не получает новую отредактированную версию
### Requirement: Пипетка баланса белого ### Requirement: Пипетка баланса белого
Клиент SHALL позволять выбрать нейтральную точку на фото и SHALL устанавливать температуру и оттенок так, чтобы цвет этой точки стал нейтральным. Выборка SHALL браться из исходного (неотредактированного) превью, а пресет баланса белого SHALL переходить в «Пользовательский». Клиент SHALL позволять выбрать нейтральную точку на фото и SHALL устанавливать температуру и оттенок так, чтобы цвет этой точки стал нейтральным. Выборка SHALL браться из исходного (неотредактированного) превью, а пресет баланса белого SHALL переходить в «Пользовательский».
@@ -427,3 +431,131 @@ SHALL быть доступно и для фото без альбома (нап
#### Scenario: Некорректный файл или пресет #### Scenario: Некорректный файл или пресет
- **WHEN** имя или кривая хотя бы одного канала недопустимы - **WHEN** имя или кривая хотя бы одного канала недопустимы
- **THEN** система отклоняет пресет и не меняет профиль - **THEN** система отклоняет пресет и не меняет профиль
### Requirement: Текстура
Клиент SHALL позволять настраивать текстуру фото в диапазоне -100..100. Положительные значения SHALL усиливать контраст мелких деталей, отрицательные — ослаблять его. Эффект SHALL применяться к исходному кадру после световых и цветовых правок.
#### Scenario: Усиление текстуры
- **WHEN** пользователь увеличивает значение текстуры
- **THEN** мелкие детали становятся контрастнее, а общая тональность кадра не меняется
#### Scenario: Ослабление текстуры
- **WHEN** пользователь уменьшает значение текстуры ниже нуля
- **THEN** мелкие детали сглаживаются
#### Scenario: Текстура в пределах допустимого
- **WHEN** клиент присылает значение текстуры вне диапазона -100..100
- **THEN** сервер ограничивает его ближайшей границей диапазона
### Requirement: Чёткость
Клиент SHALL позволять настраивать чёткость фото в диапазоне -100..100. Положительные значения SHALL усиливать локальный контраст средних частот, отрицательные — смягчать его. Чёткость SHALL NOT создавать заметных ореолов на границах контрастных объектов. Эффект SHALL применяться после световых и цветовых правок.
#### Scenario: Усиление чёткости
- **WHEN** пользователь увеличивает значение чёткости
- **THEN** локальный контраст средних тонов растёт, а границы контрастных объектов остаются без заметных ореолов
#### Scenario: Ослабление чёткости
- **WHEN** пользователь уменьшает значение чёткости ниже нуля
- **THEN** изображение становится мягче
### Requirement: Убрать дымку
Клиент SHALL позволять ослаблять или усиливать дымку в диапазоне -100..100. При положительных значениях сервер SHALL оценивать дымку по кадру и возвращать контраст и насыщенность удалённых участков; отрицательные значения SHALL добавлять дымку.
#### Scenario: Удаление дымки
- **WHEN** пользователь увеличивает значение «Убрать дымку» на кадре с дымкой
- **THEN** дальние планы становятся контрастнее и насыщеннее
#### Scenario: Добавление дымки
- **WHEN** пользователь уменьшает значение «Убрать дымку» ниже нуля
- **THEN** кадр становится менее контрастным, как при дымке
### Requirement: Виньетка
Клиент SHALL позволять настраивать виньетку: силу -100..100, среднюю точку и растушёвку 0..100 (по умолчанию 50), округлость -100..100, света 0..100, а также режим «Свет», «Цвет» или «Закарасить». Режим «Свет» SHALL затемнять или осветлять края, «Цвет» — тонировать их выбранным цветом с сохранением светлоты, «Закарасить» — заливать их выбранным цветом.
#### Scenario: Затемнение краёв
- **WHEN** пользователь задаёт положительную силу виньетки в режиме «Свет»
- **THEN** края кадра затемняются, а центр остаётся без изменений
#### Scenario: Осветление краёв
- **WHEN** пользователь задаёт отрицательную силу виньетки в режиме «Свет»
- **THEN** края кадра осветляются
#### Scenario: Цветная виньетка
- **WHEN** пользователь выбирает режим «Цвет» или «Закарасить» и задаёт цвет виньетки
- **THEN** края кадра тонируются или заливаются этим цветом с силой, заданной ползунком виньетки
#### Scenario: Геометрия виньетки
- **WHEN** пользователь меняет среднюю точку, растушёвку или округлость
- **THEN** меняются размер, мягкость и форма зоны виньетки
#### Scenario: Защита светов
- **WHEN** пользователь увеличивает значение «Света» в режиме «Свет»
- **THEN** яркие участки в зоне виньетки сохраняют яркость
#### Scenario: Нулевая сила виньетки
- **WHEN** сила виньетки равна нулю
- **THEN** виньетка не влияет на изображение независимо от остальных параметров
### Requirement: Зерно
Клиент SHALL позволять добавлять зерно с силой, размером и шероховатостью в диапазоне 0..100 (по умолчанию размер 25, шероховатость 50). Зерно SHALL быть детерминированным: повторный рендер одних и тех же параметров SHALL давать одинаковый шум.
#### Scenario: Добавление зерна
- **WHEN** пользователь увеличивает силу зерна
- **THEN** на изображении появляется шум, заметный в средних тонах
#### Scenario: Размер и шероховатость
- **WHEN** пользователь меняет размер или шероховатость зерна
- **THEN** меняются крупность и контрастность шума
#### Scenario: Детерминированность зерна
- **WHEN** сервер повторно рендерит фото с теми же параметрами зерна
- **THEN** рисунок шума совпадает с предыдущим рендером
#### Scenario: Нулевая сила зерна
- **WHEN** сила зерна равна нулю
- **THEN** зерно не влияет на изображение
### Requirement: Живой предпросмотр эффектов
Клиент SHALL показывать эффекты в просмотрщике до завершения серверного рендера. После готовности серверной версии клиент SHALL показывать её. Предпросмотр пространственных эффектов (текстура, чёткость, дымка) MAY отличаться от серверного рендера деталями, но SHALL передавать характер эффекта.
#### Scenario: Эффекты видны сразу
- **WHEN** пользователь двигает ползунок эффекта
- **THEN** просмотрщик обновляет изображение без ожидания серверного рендера
#### Scenario: Серверная версия заменяет предпросмотр
- **WHEN** серверный рендер эффектов завершён
- **THEN** просмотрщик показывает серверную версию
#### Scenario: Предпросмотр без WebGL
- **WHEN** аппаратное ускорение недоступно
- **THEN** клиент показывает эффекты доступным способом или показывает их после серверного рендера, не блокируя интерфейс
### Requirement: Свёрнутые секции редактора
Редактор SHALL показывать все сворачиваемые секции инструментов свёрнутыми по умолчанию. Клиент SHALL сохранять состояние каждой секции (свёрнута или развёрнута) в браузере пользователя и восстанавливать его при повторном открытии редактора и перезагрузке страницы. Состояние SHALL NOT зависеть от выбранного фото.
#### Scenario: Первое открытие редактора
- **WHEN** пользователь впервые открывает редактор фото
- **THEN** все секции инструментов («Свет», «Цвет», «Эффекты» и их вложенные блоки) свёрнуты
#### Scenario: Состояние запоминается
- **WHEN** пользователь разворачивает секцию «Эффекты» и перезагружает страницу
- **THEN** секция «Эффекты» остаётся развёрнутой
#### Scenario: Состояние переживает смену фото
- **WHEN** пользователь переключает фото в редакторе
- **THEN** свёрнутость секций не меняется
### Requirement: Редактирование только из просмотрщика
Клиент SHALL показывать вкладку «Редактирование» только когда фото открыто в просмотрщике. В режиме сетки правая панель SHALL показывать только «Сведения» и SHALL NOT отображать инструменты редактирования.
#### Scenario: Фото выбрано в сетке
- **WHEN** пользователь выбирает фото в сетке, не открывая просмотрщик
- **THEN** в правой панели отображается только вкладка «Сведения»
#### Scenario: Фото открыто в просмотрщике
- **WHEN** пользователь открывает фото в просмотрщике
- **THEN** в правой панели доступны «Сведения» и «Редактирование»
#### Scenario: Возврат из просмотрщика в сетку
- **WHEN** пользователь возвращается из просмотрщика в сетку
- **THEN** вкладка «Редактирование» скрыта, панель показывает «Сведения»