Added about page

README.md

@@ -10,7 +10,49 @@ app_port: 3000
 
 # AI Evaluation Dashboard
 
-This repository is a Next.js application for viewing and authoring AI evaluations. It includes demo evaluation fixtures under `public/evaluations/` and a dynamic details page that performs server-side rendering and route-handler based inference.
+This repository is a Next.js application for viewing and authoring AI evaluations. It provides a comprehensive platform for documenting and sharing AI system evaluations across multiple dimensions including capabilities and risks.
+
+## Project Goals
+
+The AI Evaluation Dashboard aims to:
+- **Standardize AI evaluation reporting** across different AI systems and models
+- **Facilitate transparency** by providing detailed evaluation cards for AI systems
+- **Enable comparative analysis** of AI capabilities and risks
+- **Support research and policy** by consolidating evaluation data in an accessible format
+- **Promote responsible AI development** through comprehensive risk assessment
+
+## For External Collaborators
+
+### Making Changes to Evaluation Categories and Schema
+
+All evaluation categories, form fields, and data structures are centrally managed in the `schema/` folder. **This is the primary location for making structural changes to the evaluation framework.**
+
+Key schema files:
+- **`schema/evaluation-schema.json`** - Defines all evaluation categories (capabilities and risks)
+- **`schema/output-schema.json`** - Defines the complete data structure for evaluation outputs
+- **`schema/system-info-schema.json`** - Defines form field options for system information
+- **`schema/category-details.json`** - Contains detailed descriptions and criteria for each category
+- **`schema/form-hints.json`** - Provides help text and guidance for form fields
+
+### Standards and Frameworks Used
+
+The evaluation framework is based on established standards:
+- **Risk categories** are derived from **NIST AI 600-1** (AI Risk Management Framework)
+- **Capability categories** are based on the **OECD AI Classification Framework**
+
+This ensures consistency with international AI governance standards and facilitates interoperability with other evaluation systems.
+
+### Contributing Evaluation Data
+
+Evaluation data files are stored in `public/evaluations/` as JSON files. Each file represents a complete evaluation of an AI system and must conform to the schema defined in `schema/output-schema.json`.
+
+To add a new evaluation:
+1. Create a new JSON file in `public/evaluations/`
+2. Follow the structure defined in `schema/output-schema.json`
+3. Ensure all required fields are populated
+4. Validate against the schema before submission
+
+### Development Setup
 
 ## Run locally
 
@@ -50,46 +92,7 @@ Visit `http://localhost:3000` to verify.
 ### Deploy to Hugging Face Spaces
 
 1. Create a new Space at https://huggingface.co/new-space and choose **Docker** as the runtime.
-2. Add a secret named `HF_TOKEN` (if you plan to access private or gated models or the Inference API) in the Space settings.
-3. Push this repository to the Space Git (or upload files through the UI). The Space will build the Docker image using the included `Dockerfile` and serve your app on port 3000.
+2. Push this repository to the Space Git (or upload files through the UI). The Space will build the Docker image using the included `Dockerfile` and serve your app on port 3000.
 
 Notes:
-- The app's server may attempt to construct ML pipelines server-side if you use Transformers.js and large models; prefer small/quantized models or use the Hugging Face Inference API instead (see below).
-- If your build needs native dependencies (e.g. `sharp`), the Docker image may require extra apt packages; update the Dockerfile accordingly.
-
-## Alternative: Use Hugging Face Inference API (avoid hosting model weights)
-
-If downloading and running model weights inside the Space is impractical (memory/disk limits), modify the server route to proxy requests to the Hugging Face Inference API.
-
-Example server-side call (Route Handler):
-
-```js
-const resp = await fetch('https://api-inference.huggingface.co/models/<model-id>', {
-  method: 'POST',
-  headers: { Authorization: `Bearer ${process.env.HF_TOKEN}`, 'Content-Type': 'application/json' },
-  body: JSON.stringify({ inputs: text })
-})
-const json = await resp.json()
-```
-
-Store `HF_TOKEN` in the Space secrets and your route will be able to call the API.
-
-## Troubleshooting
-
-- Build fails in Spaces: check the build logs; you may need extra apt packages or to pin Node version.
-- Runtime OOM / killed: model is too large for Spaces; use Inference API or smaller models.
-
-## What I added
-
-- `Dockerfile` — multi-stage build for production
-- `.dockerignore` — to reduce image size
-- Updated `README.md` with Spaces frontmatter and deployment instructions
-
-If you want, I can:
-- Modify the Dockerfile to use Next.js standalone mode for a smaller runtime image.
-- Add a small health-check route and a simple `docker-compose.yml` for local testing.
-
-Which of those would you like next?
-npm run build
-
-Send the contents of the "out" folder to https://huggingface.co/spaces/evaleval/general-eval-card
+- If your build needs native dependencies (e.g. `sharp`), the Docker image may require extra apt packages; update the Dockerfile accordingly.

app/about/page.tsx

@@ -0,0 +1,200 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+import { ArrowLeft, ExternalLink } from "lucide-react"
+
+export default function AboutPage() {
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="mb-6">
+        <Link href="/">
+          <Button variant="ghost" className="mb-4">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Dashboard
+          </Button>
+        </Link>
+        <h1 className="text-4xl font-bold mb-2">About AI Evaluation Dashboard</h1>
+        <p className="text-xl text-muted-foreground">
+          A comprehensive platform for documenting and sharing AI system evaluations
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Project Goals</CardTitle>
+            <CardDescription>
+              Our mission is to advance responsible AI development through transparent evaluation
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-3">
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Standardize AI Evaluation Reporting</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Provide a consistent framework for documenting AI system capabilities and limitations across different models and platforms.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Facilitate Transparency</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Enable AI developers and researchers to share detailed evaluation results in an accessible, standardized format.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Enable Comparative Analysis</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Support side-by-side comparison of AI systems across multiple dimensions including capabilities and risks.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-orange-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Support Research and Policy</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Consolidate evaluation data to inform AI research directions and policy development.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 bg-red-500 rounded-full mt-2 flex-shrink-0"></div>
+                <div>
+                  <h4 className="font-semibold">Promote Responsible AI Development</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Encourage comprehensive risk assessment and responsible deployment practices through structured evaluation.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+    {/* EvalEval link removed from page body per request; footer includes external link instead */}
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Standards and Frameworks</CardTitle>
+            <CardDescription>
+              Built on established international standards for AI evaluation
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="p-4 border rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <Badge variant="destructive">Risk Assessment</Badge>
+                </div>
+                <h4 className="font-semibold mb-2">NIST AI 600-1</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Risk categories are derived from the NIST AI Risk Management Framework (AI RMF 1.0), providing a comprehensive approach to identifying and managing AI-related risks.
+                </p>
+                <Link href="https://nvlpubs.nist.gov/nistpubs/ai/NIST.AI.600-1.pdf" target="_blank">
+                  <Button variant="outline" size="sm">
+                    <ExternalLink className="mr-2 h-3 w-3" />
+                    Learn More
+                  </Button>
+                </Link>
+              </div>
+              <div className="p-4 border rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <Badge variant="default">Capabilities</Badge>
+                </div>
+                <h4 className="font-semibold mb-2">OECD AI Classification</h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Capability categories are based on the OECD AI Classification Framework, ensuring alignment with international standards for AI system categorization.
+                </p>
+                <Link href="https://www.oecd.org/en/publications/introducing-the-oecd-ai-capability-indicators_be745f04-en/full-report/component-4.html#chapter-d1e230-f85c23a209" target="_blank">
+                  <Button variant="outline" size="sm">
+                    <ExternalLink className="mr-2 h-3 w-3" />
+                    Learn More
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>For Contributors</CardTitle>
+            <CardDescription>
+              How to contribute to the evaluation framework
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="p-4 bg-muted rounded-lg">
+              <h4 className="font-semibold mb-2">Schema-Driven Architecture</h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                All evaluation categories, form fields, and data structures are centrally managed in the <code className="bg-background px-1 py-0.5 rounded">schema/</code> folder. This is the primary location for making structural changes to the evaluation framework.
+              </p>
+              <div className="space-y-2 text-sm">
+                <div><code className="bg-background px-2 py-1 rounded">schema/evaluation-schema.json</code> - Evaluation categories and types</div>
+                <div><code className="bg-background px-2 py-1 rounded">schema/output-schema.json</code> - Complete data structure</div>
+                <div><code className="bg-background px-2 py-1 rounded">schema/system-info-schema.json</code> - Form field options</div>
+                <div><code className="bg-background px-2 py-1 rounded">schema/category-details.json</code> - Detailed descriptions</div>
+              </div>
+            </div>
+            <div className="p-4 bg-muted rounded-lg">
+              <h4 className="font-semibold mb-2">Adding Evaluations</h4>
+              <p className="text-sm text-muted-foreground">
+                Evaluation data files are stored in <code className="bg-background px-1 py-0.5 rounded">public/evaluations/</code> as JSON files. Each file represents a complete evaluation of an AI system and must conform to the schema.
+              </p>
+            </div>
+            <Link href="https://huggingface.co/spaces/evaleval/general-eval-card/tree/main/schema" target="_blank">
+              <Button className="w-full flex items-center justify-center gap-2">
+                <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face" className="h-4 w-4" />
+                View on Hugging Face
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Technical Implementation</CardTitle>
+            <CardDescription>
+              Built with modern web technologies for performance and accessibility
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-3 md:grid-cols-3">
+              <div className="text-center p-3 border rounded-lg">
+                <h4 className="font-semibold">Next.js 14</h4>
+                <p className="text-xs text-muted-foreground">React framework with SSR</p>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <h4 className="font-semibold">TypeScript</h4>
+                <p className="text-xs text-muted-foreground">Type-safe development</p>
+              </div>
+              <div className="text-center p-3 border rounded-lg">
+                <h4 className="font-semibold">Tailwind CSS</h4>
+                <p className="text-xs text-muted-foreground">Utility-first styling</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator className="my-8" />
+
+      <div className="text-center text-sm text-muted-foreground">
+        <p className="mt-2">AI Evaluation Dashboard is an open-source project dedicated to advancing responsible AI development — built with ❤️ by the EvalEval Coalition.</p>
+        <p className="mt-2 flex items-center justify-center gap-3">
+          <img src="https://evalevalai.com/assets/img/logo-square.png" alt="EvalEval" className="h-8 w-8 rounded" />
+          <span>Learn more about EvalEval: <Link href="https://evalevalai.com/" target="_blank">evalevalai.com</Link></span>
+        </p>
+      </div>
+    </div>
+  )
+}

app/evaluation/[id]/page.client.tsx

@@ -5,10 +5,11 @@ import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { ArrowLeft, Download, Eye, EyeOff } from "lucide-react"
+import { ArrowLeft, Download, Eye, EyeOff, Info } from "lucide-react"
 import { getAllCategories, getCategoryById, getBenchmarkQuestions, getProcessQuestions } from "@/lib/schema"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { naReasonForCategoryFromEval } from "@/lib/na-utils"
+import Link from "next/link"
 
 const loadEvaluationDetails = async (id: string) => {
   const evaluationFiles = [
@@ -180,10 +181,18 @@ export default function EvaluationDetailsPage() {
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Dashboard
           </Button>
-          <Button variant="outline" size="sm">
-            <Download className="h-4 w-4 mr-2" />
-            Export Report
-          </Button>
+          <div className="flex items-center gap-2">
+            <Link href="/about">
+              <Button variant="ghost" size="sm">
+                <Info className="h-4 w-4 mr-2" />
+                About
+              </Button>
+            </Link>
+            <Button variant="outline" size="sm">
+              <Download className="h-4 w-4 mr-2" />
+              Export Report
+            </Button>
+          </div>
         </div>
 
         <div className="mt-3 text-center">

app/page.tsx

@@ -3,11 +3,12 @@
 import { useState, useMemo, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Plus, Moon, Sun, Filter, ArrowUpDown } from "lucide-react"
+import { Plus, Moon, Sun, Filter, ArrowUpDown, Info } from "lucide-react"
 import { useTheme } from "next-themes"
 import { EvaluationCard, type EvaluationCardData } from "@/components/evaluation-card"
 import { getBenchmarkQuestions, getProcessQuestions } from "@/lib/schema"
 import { AIEvaluationDashboard } from "@/components/ai-evaluation-dashboard"
+import Link from "next/link"
 
 const loadEvaluationData = async (): Promise<EvaluationCardData[]> => {
   const evaluationFiles = [
@@ -460,6 +461,12 @@ export default function HomePage() {
               <p className="text-sm text-muted-foreground">Manage and track your AI system evaluations</p>
             </div>
             <div className="flex items-center gap-3">
+              <Link href="/about">
+                <Button variant="ghost" size="sm" className="gap-2">
+                  <Info className="h-4 w-4" />
+                  About
+                </Button>
+              </Link>
               <Button
                 variant="ghost"
                 size="sm"