[codex] Update DEVELOP demo docs and reports - #1
Draft
fengting124 wants to merge 14 commits into
Draft
Conversation
Save working state of all modified pages before starting the image detection interactive flow visualization upgrade. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…linkage - Replace flat text chain with vertical SVG-connected node graph (pending/active/done states, pulse dot, check-mark, arrow connectors) - Add pure-SVG pentagon radar chart for expert contributions (fill polygon, axis lines, data dots, animated progress bars) - Implement 4-way linkage: hover evidence anchor chip → image ForensicMark highlights + chain node activates + expert panel dims others - Add 3-tab right panel (Chain / Experts / Evidence) with AnimatePresence - Upgrade idle upload zone with custom SVG icon + drag-drop support - Add bottom progress phase label replacing plain percentage text - All within CSS Modules + Framer Motion, zero external UI libs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace placeholder with full interactive pipeline showcase: - Stage 01 · SOURCE: real image with forensic rulers + metadata panel - Stage 02 · PROMPT: animated typewriter prompt generation, line-by-line reveal - Stage 03 · GENERATE: 4-model candidate grid with staggered card entrance - Stage 04 · ANNOTATE: scanning line + progressive annotation box reveal - Stage 05 · ARCHIVE: spring-stamp + archive card + progress bar - Top horizontal node graph (SVG arrows, done/active/pending states) - Bottom mini icon pipeline for quick stage overview - Auto-advancing state machine (requestAnimationFrame), pausable + navigable - Click any node to jump to that stage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace flat StepItem list with vertical flow-node graph (SVG arrows between nodes, done/active/pending states, check-mark/pulse dot) - Step 03 shows window progress dots inline - Step 04 shows keep/drop count summary when filtering completes - Wrap FragmentEvidenceCard list in AnimatePresence for smooth entry - AnimatePresence now wraps visibleEvidence for consistent reveal Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
After confirming a sample, SideSheet transitions to a feedback panel: - Animated verdict stamp (AI 生成 / 真实内容) - Source expansion: count animates 0→3, dots spring in one by one - Expert training queue: progress bar with base+delta layers, SD3 expert bar grows from 28% to 33% with percentage label - Operation chain visualization: 异常确认→样本扩充→专家训练→能力更新 - Auto-closes after 2.8s with shrinking progress bar - Submit button disabled until judgement is selected Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Merge all visual flow upgrade commits: - feat(detect-image): semantic chain node-graph + expert radar + 4-way linkage - feat(image-showcase): 5-stage animated pipeline workflow - feat(detect-video): SVG flow-node graph + candidate filter animation - feat(anomaly-pool): post-submit linkage visualization Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Root cause: videoDemoFull.src pointed to /videos/video-demo-01.mp4 which does not exist. Page got stuck in videoReady=false loading state. Fixes: - Switch video source to /videos/workflow/fake_seg2.mp4 (exists, 13.3s) - Realign duration (30s→13.289s), windows (6 equal segments), frames (18 frames from workflow-editor/fake_seg2/), candidates and fakeRanges to match actual fake_segments [[1.796,10.516],[11.9,12.78]] - Fix poster: /samples/09.jpg → /images/workflow-editor/fake_seg2/frame-01.jpg - Add autoPlay + explicit .play() call on canPlay event - Update meta label text to reflect actual video Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…act import - AnimatePresence was used in JSX but not imported from framer-motion → ReferenceError at render time - React.ReactNode used in FlowNode props but React namespace not imported - Added missing CSS classes: .videoMetaLeft, .videoMetaRight, .metaValue, .warningIcon, .evidencePane Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- evidencePane: background dark ink-deep → var(--surface) white - fragmentCard: dark glass morphism bg → var(--canvas) light bg, border rgba white → var(--rule) - fragmentCard hover: dark bg → var(--surface) light hover - evidencePlaceholder: improved contrast, min-height, flex center - removed evidencePane dark color overrides for panelHeader Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…eyframes, right col scrollable - rightCol: overflow-y:auto scrollable, removed fixed height partition - evidencePane: removed flex:1/min-height:0/overflow:hidden, now natural height - fragmentCard: 3-col grid → flex column layout to fit narrow right panel - fragmentLeft: column → horizontal row (index + time + duration inline) - fragmentKeyframes: full width, keyframesRow grid 3 equal columns - fragmentRight: column → horizontal row (reason + votes + confidence) - expertVotes: column → horizontal row - removed media query grid-template-columns override (no longer needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Direction 1 (ImageShowcase stage 06): annotation→forensic transition
- Stage annotation now splits at progress>0.75: JSON view fades out,
ForensicMark overlays animate onto the source image one by one
- Forensic scan line sweeps before each mark appears
- Mark list below image shows training provenance per annotation region
- Hover on mark list activates ForensicMark highlight (4-way linkage)
Direction 2 (DetectImage anchor chips): annotation provenance popover
- marks[] extended with provenance: { annotationType, sampleCount,
sampleType, sourceDataset, sampleId, trainedIn }
- anchorChipWrap wraps each chip for relative positioning
- AnimatePresence popover shows on activeMarkId hover: 6 provenance
fields (annotation type, training samples count, source dataset,
sample ID, trained version)
Direction 3 (ImageShowcase pipeline header): three-path fork diagram
- PipelineHeader replaced with PipelineHeaderWrap + PipelineForkLayout
- Visual Y-fork: entry node 01 → three branches (real/local/full) →
merge at 06→07
- Active branch highlighted by pathType; inactive branches dimmed
- Path legend at bottom with color-coded badges
- Stage progress bar, footer tag and mini pipeline nodes all use
per-path color (real=green, local=accent, full=amber, all=ink)
- PipelineNodeBtn shows nodeActivePath badge when active
- sampleTypeBadgeNew replaces old badge with dynamic color
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Validation
Notes