Frontend: Interactive Demo Website #10
Description
Goal
Create a public-facing website that demonstrates interrogatory model cards and enables interactive exploration.
Core Features
1. Explainer / Landing Page
- What are interrogatory model cards?
- Why CAN/SHOULD/MUST?
- Comparison to existing approaches
- Quick start for adopters
2. Interactive Card Viewer
- Load example cards
- Visual disclosure heatmap (what's disclosed vs hidden)
- Drill into evidence links
- Compare multiple cards side-by-side
3. Card Builder (Web UI)
- Step-through wizard for creating cards
- Real-time validation feedback
- Export to JSON-LD, Markdown, PDF
- Share/publish workflow
4. Card Analyzer
- Paste or upload existing model card
- Score against interrogatory framework
- Generate gap report
- Suggest improvements
5. Gallery
- Showcase of well-documented models
- "Disclosure leaderboard" (opt-in)
- Filter by tier, domain, completeness
Technical Considerations
Stack Options
Static + Client-Side
- Astro / Next.js static export
- All processing in browser (JSON Schema validation via ajv)
- Hosting: GitHub Pages, Vercel, Netlify
- Pros: Simple, cheap, no backend
- Cons: Limited server-side features
With Backend
- FastAPI / Flask for card processing
- Database for gallery/submissions
- Pros: More features, card storage
- Cons: Hosting complexity, cost
Recommendation: Start static, add backend if needed.
Design Priorities
- Mobile-responsive
- Accessible (WCAG 2.1 AA)
- Fast (static where possible)
- Embeddable widgets for HF/GitHub integration
Content Needs
- Clear, non-academic writing for landing page
- Diagrams explaining the framework
- Video walkthrough (optional)
- FAQ addressing common concerns
Deliverables
website/- source code- Deployed site (GitHub Pages or similar)
- Embeddable card viewer widget
- OpenGraph/social cards for sharing
Related Issues
- Tooling: Validation & Generation (share validation logic)
- Data: Example Cards Collection (populate gallery)
- Publication: LessWrong/AF Post (link to demo)