domverse/photoanalyzer
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity
Files
457dd5bd90d40c8b766b56af579cf8ffb6c1865b
photoanalyzer/frontend/css/app.css
domverse 457dd5bd90 US02-06: Deliver Workflow, Safety, Library, Analysis, and Stats Views 
Ports the safety review and the Photo Analyzer Library/Analyze/Stats
experiences onto the shared API + service layer, and adds the Workflow
home, enforcing the pipeline gates and the one-mutating-job policy.

Backend
- migration 0005 + models: safety_reviews (append-only, latest row is the
  current decision) and analysis_results (donor photos schema re-keyed to
  asset_id).
- SafetyService: persist scores/decisions, review queue with filters, and
  the EXIF safety checkpoint (mutually-exclusive sfw/nsfw keyword written,
  read back, current_sha256 refreshed) that upload eligibility depends on.
- AnalysisService: the privacy gate — the vision provider is called ONLY for
  canonical, confirmed-SFW assets; nsfw/undecided are recorded skipped without
  a request. Provider is an injected adapter (real OpenAI-compatible Gemini
  call extracted from photo_analyzer.analyze_image; a fake in tests).
- LibraryService: Library search + Stats read model ported from webapp/query.py
  (LIKE search in place of FTS5; facets, top tags, years, albums, people).
- WorkflowService + GET /api/v1/workflow: per-stage readiness derived from the
  source tables — counts, blockers, last-run, action, and an active_job that
  drives read-only-during-jobs. Safety scoring and analysis run as durable jobs
  under the library_write lock via new domain handlers, so a second mutating
  job is refused.
- routes: workflow, safety (queue/counts/decisions/jobs), analysis
  (counts/results/jobs), library (assets/facets/stats).

Frontend
- five views (frontend/js/views.js) on the US02-05 shell: Workflow stepper
  (status text+icon, not colour alone; actions disabled with a reason while a
  job runs), Safety review (filter tabs, decide, persists across reload),
  Library (search + cards), Analyze (counts + live job log via the SSE
  adapter), Stats. Shared DOM helpers extracted to dom.js; Workflow is the home
  route.

Tests
- integration: provider-call privacy (nsfw never reaches the provider),
  sfw→nsfw flip drops analysis eligibility, decision persistence, one-mutating-
  job rejection, workflow counts, and the exiftool safety-keyword write/verify.
- e2e: Workflow cards, actions disabled+explained during a job, safety
  decide-persists-across-reload, Library search, Stats, Analyze counts.
- traceability map updated for US02-05 and US02-06.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-08-06 16:52:01 +02:00

157 lines
5.1 KiB
CSS
Raw Blame History

@import "./tokens.css";
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.app-header {
display: flex;
align-items: center;
gap: 24px;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: var(--surface);
position: sticky;
top: 0;
z-index: 10;
}
.brand { font-weight: 700; letter-spacing: 0.2px; }
nav a {
color: var(--muted);
text-decoration: none;
margin-right: 16px;
padding: 6px 0;
border-bottom: 2px solid transparent;
}
nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
nav a:hover { color: var(--text); }
main { padding: 20px; max-width: 1200px; margin: 0 auto; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
input, select, button { font: inherit; }
input[type="search"], select {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
}
button {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 14px;
cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #06122e; font-weight: 600; }
button.danger { border-color: var(--danger); color: var(--danger); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
tbody tr { outline: none; }
tbody tr[aria-selected="true"] { background: rgba(91, 140, 255, 0.16); }
tbody tr:focus { box-shadow: inset 3px 0 0 var(--accent); }
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
border: 1px solid var(--border);
color: var(--muted);
}
.badge.exact, .badge.pixel { color: var(--ok); border-color: var(--ok); }
.badge.perceptual { color: var(--warn); border-color: var(--warn); }
.badge.decided { color: var(--ok); border-color: var(--ok); }
.badge.reopened, .badge.dismissed { color: var(--warn); border-color: var(--warn); }
.muted { color: var(--muted); }
.pager { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.cluster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.member {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
}
.member.canonical { border-color: var(--accent); }
.member img { width: 100%; height: auto; background: var(--surface-2); border-radius: 8px; display: block; transform-origin: top left; }
.member dl { margin: 10px 0 0; font-size: 13px; }
.member dt { color: var(--muted); }
.member dd { margin: 0 0 6px; word-break: break-all; }
.decision-bar { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; align-items: center; }
.alert {
padding: 12px 16px;
border-radius: var(--radius);
border: 1px solid var(--danger);
color: var(--danger);
background: rgba(255, 91, 110, 0.1);
margin-bottom: 16px;
}
.confirm {
background: var(--surface);
border: 1px solid var(--warn);
border-radius: var(--radius);
padding: 16px;
margin: 16px 0;
}
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
a.link { color: var(--accent); text-decoration: none; }
a.link:hover { text-decoration: underline; }
/* ── Phase B views: workflow stepper, safety, library, analyze, stats ─────── */
.stepper { display: grid; gap: 12px; }
.stage { display: grid; gap: 6px; }
.stage-head { display: flex; align-items: center; gap: 10px; }
.stage-icon { font-size: 18px; width: 20px; text-align: center; }
.stage-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.blocker { color: var(--warn); font-size: 13px; }
.last-run { font-size: 12px; }
.badge.complete { color: var(--ok); border-color: var(--ok); }
.badge.ready { color: var(--muted); }
.badge.attention { color: var(--warn); border-color: var(--warn); }
.badge.blocked { color: var(--danger); border-color: var(--danger); }
.badge.nsfw { color: var(--danger); border-color: var(--danger); }
.badge.sfw { color: var(--ok); border-color: var(--ok); }
.alert.job-running { border-color: var(--warn); color: var(--warn); background: rgba(255, 207, 91, 0.1); }
.counts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 8px 0 16px; }
.stat { text-align: center; }
.stat-value { font-size: 26px; font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-card { display: grid; gap: 6px; }
.lib-card img { width: 100%; height: 140px; object-fit: cover; background: var(--surface-2); border-radius: 8px; }
.lib-desc { font-size: 13px; }
.activity-log {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
font-size: 12px;
max-height: 240px;
overflow: auto;
white-space: pre-wrap;
}
Reference in New Issue View Git Blame Copy Permalink