upgrade for v3 of dataset, adding family and provider filters, improving responsiveness. Still needs polishing

README.md

@@ -34,9 +34,9 @@ This application explores datasets derived from xlr8harder's [Speechmap](https:/
 
 The underlying dataset from HuggingFace includes:
 *   **2.4k questions**: [speechmap-questions](https://huggingface.co/datasets/PITTI/speechmap-questions)
-*   **336k responses**: [speechmap-responses](https://huggingface.co/datasets/PITTI/speechmap-responses-v2)
-*   **875k LLM-judge assessments**: [speechmap-assessments](https://huggingface.co/datasets/PITTI/speechmap-assessments-v2)
-    *   The assessment dataset combines the original assessments from `gpt-4o`, a new set from `mistral-small-3.1-2503`, a new set from `mistral-small-3.2-2506` and some manual annotations.
+*   **369k responses**: [speechmap-responses](https://huggingface.co/datasets/PITTI/speechmap-responses-v3)
+*   **2.07k LLM-judge assessments**: [speechmap-assessments](https://huggingface.co/datasets/PITTI/speechmap-assessments-v3)
+    *   The assessment dataset combines the original assessments from the Speechmap project by `gpt-4o`, assessments by `mistral-small-3.1-2503`, `mistral-small-3.2-2506`, `gemma3-27b-it`, `deepseek-v3.2`, `qwen3-next-80B-A3B-instruct` and manual annotations.
 
 ## Quick Start
 

api/mismatches.ts

@@ -12,6 +12,8 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
     const j2_compliance = url.searchParams.get('toCategory');
     const theme = url.searchParams.get('theme') || null;
     const model = url.searchParams.get('model') || null;
+    const modelFamily = url.searchParams.get('modelFamily') || null;
+    const apiProvider = url.searchParams.get('provider') || null;
 
     if (!judge1 || !j1_compliance || !judge2 || !j2_compliance || !judge1Classification || !judge2Classification) {
         return jsonResponse(res, 400, { error: 'judge1, j1_compliance, judge2, and j2_compliance are required.' });
@@ -22,47 +24,6 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
       }
     
     try {
-        // const sql = `
-        //     WITH MismatchedResponses AS (
-        //         SELECT a.r_uuid
-        //         FROM assessments a
-        //         JOIN responses r ON a.r_uuid = r.uuid
-        //         JOIN questions q ON r.q_uuid = q.uuid
-        //         WHERE 
-        //             a.judge IN (?, ?) AND
-        //             (? IS NULL OR q.theme = ?)
-        //         GROUP BY a.r_uuid
-        //         HAVING
-        //             SUM(CASE WHEN a.judge = ? AND a.${judge1Classification} = ? THEN 1 ELSE 0 END) > 0
-        //             AND
-        //             SUM(CASE WHEN a.judge = ? AND a.${judge2Classification} = ? THEN 1 ELSE 0 END) > 0
-        //     )
-        //     SELECT
-        //         r.uuid as r_uuid,
-        //         q.question,
-        //         q.theme as question_theme,
-        //         q.domain as question_domain,
-        //         r.model as response_model,
-        //         r.content as response_content,
-        //         a.judge,
-        //         a.${judge1Classification},
-        //         ${judge1Classification!=judge2Classification? `a.${judge2Classification}`:''}
-        //         a.judge_analysis
-        //     FROM MismatchedResponses mr
-        //     JOIN responses r ON mr.r_uuid = r.uuid
-        //     JOIN questions q ON r.q_uuid = q.uuid
-        //     JOIN assessments a ON mr.r_uuid = a.r_uuid
-        //     WHERE
-        //         a.judge IN (?, ?) -- Only get assessments from the two judges in question
-        //     ORDER BY r.uuid;
-        // `;
-        // const params = [
-        //     judge1, judge2,  
-        //     theme, theme,
-        //     judge1, j1_compliance, 
-        //     judge2, j2_compliance,
-        //     judge1, judge2
-        // ];
 
         const sql = `
             SELECT
@@ -72,6 +33,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
                 q.theme AS question_theme,
                 q.domain AS question_domain,
                 r.model AS response_model,
+                r.provider AS provider,
                 r.content AS response_content,
 
                 a1.judge AS judge1_name,
@@ -89,6 +51,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
             -- Join to get response and question details
             JOIN responses r ON a1.r_uuid = r.uuid
             JOIN questions q ON r.q_uuid = q.uuid
+            JOIN models m ON r.model = m.name
             
             WHERE
                 -- Filter for the first judge's specific assessment
@@ -97,15 +60,18 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
                 -- Filter for the second judge's specific assessment
                 AND a2.judge = ? AND a2.${judge2Classification} = ?
                 
-                -- Optional theme filter and model filter
-                AND (? IS NULL OR q.theme = ?) AND (? IS NULL OR r.model = ?);
+                -- Optional theme, model, family and provider filter
+                AND (? IS NULL OR q.theme = ?) AND (? IS NULL OR r.model = ?) 
+                AND (? IS NULL OR m.family = ?) AND (? IS NULL OR r.provider = ?);
         `;
 
         const params = [
             judge1, j1_compliance,
             judge2, j2_compliance,
             theme, theme,
-            model, model
+            model, model,
+            modelFamily, modelFamily,
+            apiProvider, apiProvider
         ];
 
         const rows = await db.query<any>(sql, ...params);
@@ -122,6 +88,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
                     model: row.response_model,
                     r_uuid: row.r_uuid,
                     response: row.response_content,
+                    provider: row.provider,
                     assessments: {},
                 });
             }

api/models_families.ts

@@ -0,0 +1,16 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import db from '../src/lib/db.js';
+import type { ModelFamily } from '../src/types.js';
+import { jsonResponse } from './utils.js';
+
+
+export default async function handler(_req: IncomingMessage, res: ServerResponse) {
+  try {
+    const sql = 'SELECT DISTINCT family FROM models ORDER BY family ASC';
+    const modelFamilies = await db.query<ModelFamily>(sql);
+    jsonResponse(res, 200, modelFamilies);
+  } catch (error) {
+    console.error('Failed to fetch model families:', error);
+    jsonResponse(res, 500, { error: 'Failed to fetch model families' });
+  }
+}

api/providers.ts

@@ -0,0 +1,15 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import db from '../src/lib/db.js';
+import type { Provider } from '../src/types.js';
+import { jsonResponse } from './utils.js';
+
+export default async function handler(_req: IncomingMessage, res: ServerResponse) {
+  try {
+    const sql = 'SELECT DISTINCT provider FROM responses ORDER BY provider ASC';
+    const providers = await db.query<Provider>(sql);
+    jsonResponse(res, 200, providers);
+  } catch (error) {
+    console.error('Failed to fetch providers:', error);
+    jsonResponse(res, 500, { error: 'Failed to fetch providers' });
+  }
+}

api/reclassification.ts

@@ -10,6 +10,8 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
   const judge2Classification = url.searchParams.get('judge2Classification');
   const theme = url.searchParams.get('theme') || null;
   const model = url.searchParams.get('model') || null;
+  const modelFamily = url.searchParams.get('modelFamily') || null;
+  const apiProvider = url.searchParams.get('provider') || null;
 
   if (!judge1 || !judge1Classification || !judge2 || !judge2Classification) {
     return jsonResponse(res, 400, { error: 'Query parameters judge1, judge1Classification, judge2, and judge2Classification are required.' });
@@ -29,14 +31,16 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
         JOIN assessments a2 ON a1.r_uuid = a2.r_uuid
         JOIN responses r ON a1.r_uuid = r.uuid
         JOIN questions q ON r.q_uuid = q.uuid
+        JOIN models m ON r.model = m.name
         WHERE
-          a1.judge = ? AND a2.judge = ? AND (? IS NULL OR q.theme = ?) AND (? IS NULL OR r.model = ?)
+          a1.judge = ? AND a2.judge = ? AND (? IS NULL OR q.theme = ?) 
+          AND (? IS NULL OR r.model = ?) AND (? IS NULL OR m.family = ?) AND (? IS NULL OR r.provider = ?)
         GROUP BY 
           judge1_compliance, 
           judge2_compliance;
     `;
 
-    const params = [judge1, judge2, theme, theme, model, model];
+    const params = [judge1, judge2, theme, theme, model, model, modelFamily, modelFamily, apiProvider, apiProvider];
 
     const rows = await db.query<{ judge1_compliance: string, judge2_compliance: string, count: number }>(sql, ...params);
     

api/reclassified_list.ts

@@ -1,48 +0,0 @@
-import type { IncomingMessage, ServerResponse } from 'http';
-import db from '../src/lib/db.js';
-import { jsonResponse } from './utils.js';
-
-// This API endpoint fetches reclassified items by response uuid based on the judges and theme
-export default async function handler(req: IncomingMessage, res: ServerResponse) {
-  // parsing query parameters from the URL
-  const url = new URL(req.url!, `http://${req.headers.host}`);
-  const judge1 = url.searchParams.get('judge1');
-  const judge2 = url.searchParams.get('judge2');
-  const theme = url.searchParams.get('theme') || null;
-
-  if (!judge1 || !judge2) {
-    return jsonResponse(res, 400, { error: 'judge1 and judge2 query parameters are required.' });
-  }
-
-  try {
-    const sql = `
-        SELECT a1.compliance AS judge1_compliance, a2.compliance AS judge2_compliance, r.uuid as r_uuid
-        FROM assessments a1
-        JOIN assessments a2 ON a1.r_uuid = a2.r_uuid
-        JOIN responses r ON a1.r_uuid = r.uuid
-        JOIN questions q ON r.q_uuid = q.uuid
-        WHERE
-          a1.judge = ? AND a2.judge = ? AND (? IS NULL OR q.theme = ?)
-        ORDER BY r.uuid`;
-
-    const rows = await db.query<{ judge1_compliance: string, judge2_compliance: string, r_uuid: string }>(
-      sql, judge1, judge2, theme, theme
-    );
-    
-    // matrix logic
-    const transitionMatrix: Record<string, Record<string, string[]>> = {};
-    for (const row of rows) {
-      if (!transitionMatrix[row.judge1_compliance]) {
-        transitionMatrix[row.judge1_compliance] = {};
-      }
-      if (!transitionMatrix[row.judge1_compliance][row.judge2_compliance]) {
-        transitionMatrix[row.judge1_compliance][row.judge2_compliance] = [];
-      }
-      transitionMatrix[row.judge1_compliance][row.judge2_compliance].push(row.r_uuid);
-    }
-    jsonResponse(res, 200, transitionMatrix);
-  } catch (error) {
-    console.error('Failed to fetch reclassification data:', error);
-    jsonResponse(res, 500, { error: 'Failed to fetch reclassification data' });
-  }
-}

api/satire.ts

@@ -1,90 +0,0 @@
-import type { IncomingMessage, ServerResponse } from 'http';
-import db from '../src/lib/db.js';
-import { jsonResponse } from './utils.js';
-
-// This API endpoint fetches responses for satirical content where judges disagree and at least one judge has marked it as 'COMPLETE'.
-export default async function handler(req: IncomingMessage, res: ServerResponse) {
-  const url = new URL(req.url!, `http://${req.headers.host}`);
-  const judge1 = url.searchParams.get('judge1');
-  const judge2 = url.searchParams.get('judge2');
-
-  try {
-    const sql = `
-            SELECT
-              q.uuid AS q_uuid,
-              q.question,
-              q.theme,
-              q.domain,
-              r.uuid AS r_uuid,
-              r.model AS r_model,
-              r.content,
-              -- Pivot the compliance for the first judge into its own column
-              MAX(CASE WHEN a.judge = ? THEN a.uuid END) AS judge1_uuid,
-              MAX(CASE WHEN a.judge = ? THEN a.judge END) AS judge1_model,
-              MAX(CASE WHEN a.judge = ? THEN a.compliance END) AS judge1_compliance,
-              MAX(CASE WHEN a.judge = ? THEN a.pitti_compliance END) AS judge1_pitti_compliance,
-              MAX(CASE WHEN a.judge = ? THEN a.judge_analysis END) AS judge1_analysis,
-              -- Pivot the compliance for the second judge into its own column
-              MAX(CASE WHEN a.judge = ? THEN a.uuid END) AS judge2_uuid,
-              MAX(CASE WHEN a.judge = ? THEN a.judge END) AS judge2_model,
-              MAX(CASE WHEN a.judge = ? THEN a.compliance END) AS judge2_compliance,
-              MAX(CASE WHEN a.judge = ? THEN a.pitti_compliance END) AS judge2_pitti_compliance,
-              MAX(CASE WHEN a.judge = ? THEN a.judge_analysis END) AS judge2_analysis
-          FROM questions q
-          JOIN responses r ON r.q_uuid = q.uuid
-          JOIN assessments a ON a.r_uuid = r.uuid
-          WHERE
-              q.question LIKE '%satirical%'
-              AND a.judge IN (?, ?) -- Pre-filter for only the two judges in question
-          GROUP BY
-              q.uuid,
-              q.question,
-              q.theme,
-              q.domain,
-              r.uuid,
-              r.model,
-              r.content
-          HAVING
-              -- Condition 1: Ensure both judges have actually assessed this response.
-              -- The COUNT will be 2 if both judge models are present in the group.
-              COUNT(DISTINCT a.judge_model) = 2
-              AND
-              -- Condition 2: Check for a mismatch in compliance.
-              -- This compares the two pivoted columns directly.
-              judge1_compliance IS DISTINCT FROM judge2_compliance
-              AND
-              -- Condition 3: Ensure at least one of the judges has a compliance status of 'COMPLETE'.
-              (judge1_compliance = 'COMPLETE' OR judge2_compliance = 'COMPLETE')
-          ORDER BY
-              q.uuid;
-      `;
-    const params = [
-      judge1, judge1, judge1, judge1,
-      judge2, judge2, judge2, judge2,
-      judge1, judge2
-    ];
-    const rows = await db.query<{ 
-      q_uuid: string, 
-      question: string, 
-      theme: string, 
-      domain: string, 
-      r_uuid: string, 
-      r_model: string, 
-      r_content: string, 
-      judge1_uuid: string, 
-      judge1_model: string,
-      judge1_compliance: string,
-      judge1_pitti_compliance: string,
-      judge1_analysis: string,
-      judge2_uuid: string,
-      judge2_model: string,
-      judge2_compliance: string,
-      judge2_pitti_compliance: string,
-      judge2_analysis: string
-    }>(sql, ...params);
-    jsonResponse(res, 200, rows);
-  } catch (error) {
-    console.error('Failed to fetch satires:', error);
-    jsonResponse(res, 500, { error: 'Failed to fetch satires' });
-  }
-}

api/satire_domain.ts

@@ -1,102 +0,0 @@
-import type { IncomingMessage, ServerResponse } from 'http';
-import db from '../src/lib/db.js';
-import { jsonResponse } from './utils.js';
-
-interface SatireResponse {
-  question: string;
-  theme: string;
-  domain: string;
-  responses: number;
-}
-
-// This API endpoint fetches responses for satirical content where judges disagree and at least one judge has marked it as 'COMPLETE'.
-export default async function handler(req: IncomingMessage, res: ServerResponse) {
-  const url = new URL(req.url!, `http://${req.headers.host}`);
-  const judge1 = url.searchParams.get('judge1');
-  const judge2 = url.searchParams.get('judge2');
-
-  try {
-    const sql = `
-            SELECT
-              q.uuid AS q_uuid,
-              q.question,
-              q.theme,
-              q.domain,
-              r.uuid AS r_uuid,
-              -- Pivot the compliance for the first judge into its own column
-              MAX(CASE WHEN a.judge = ? THEN a.compliance END) AS judge1_compliance,
-              -- Pivot the compliance for the second judge into its own column
-              MAX(CASE WHEN a.judge = ? THEN a.compliance END) AS judge2_compliance,
-              
-          FROM questions q
-          JOIN responses r ON r.q_uuid = q.uuid
-          JOIN assessments a ON a.r_uuid = r.uuid
-          WHERE
-              q.question LIKE '%satirical%'
-              AND a.judge_model IN (?, ?) -- Pre-filter for only the two judges in question
-          GROUP BY
-              q.uuid,
-              q.question,
-              q.theme,
-              q.domain,
-              r.uuid,
-          HAVING
-              -- Condition 1: Ensure both judges have actually assessed this response.
-              -- The COUNT will be 2 if both judge models are present in the group.
-              COUNT(DISTINCT a.judge) = 2
-              AND
-              -- Condition 2: Check for a mismatch in compliance.
-              -- This compares the two pivoted columns directly.
-              judge1_compliance IS DISTINCT FROM judge2_compliance
-              AND
-              -- Condition 3: Ensure at least one of the judges has a compliance status of 'COMPLETE'.
-              (judge1_compliance = 'COMPLETE' OR judge2_compliance = 'COMPLETE')
-          ORDER BY
-              q.uuid;
-      `;
-    const params = [
-      judge1, judge2,
-      judge1, judge2
-    ];
-    const rows = await db.query<{ 
-      q_uuid: string, 
-      question: string, 
-      theme: string, 
-      domain: string, 
-      r_uuid: string, 
-      judge1_compliance: string,
-      judge2_compliance: string
-    }>(sql, ...params);
-
-    const satiricalQuestions : Record<string, Record<string,SatireResponse>> = {};
-
-    for (const row of rows) {
-      if (!satiricalQuestions[row.domain]) {
-        satiricalQuestions[row.domain] = {
-          [row.q_uuid]: {
-            question: row.question,
-            theme: row.theme,
-            domain: row.domain,
-            responses: 1
-          }
-        };
-      }
-      else if (!satiricalQuestions[row.domain][row.q_uuid]) {
-        satiricalQuestions[row.domain][row.q_uuid] = {
-          question: row.question,
-          theme: row.theme,
-          domain: row.domain,
-          responses: 1
-        };
-      }
-      else {
-        satiricalQuestions[row.domain][row.q_uuid].responses += 1;
-      }
-    }
-
-    jsonResponse(res, 200, satiricalQuestions);
-  } catch (error) {
-    console.error('Failed to fetch satires:', error);
-    jsonResponse(res, 500, { error: 'Failed to fetch satires' });
-  }
-}

api/satire_q.ts

@@ -1,92 +0,0 @@
-import type { IncomingMessage, ServerResponse } from 'http';
-import db from '../src/lib/db.js';
-import { jsonResponse } from './utils.js';
-
-interface SatireResponse {
-  question: string;
-  theme: string;
-  domain: string;
-  responses: number;
-}
-
-// This API endpoint fetches responses for satirical content where judges disagree and at least one judge has marked it as 'COMPLETE'.
-export default async function handler(req: IncomingMessage, res: ServerResponse) {
-  const url = new URL(req.url!, `http://${req.headers.host}`);
-  const judge1 = url.searchParams.get('judge1');
-  const judge2 = url.searchParams.get('judge2');
-
-  try {
-    const sql = `
-            SELECT
-              q.uuid AS q_uuid,
-              q.question,
-              q.theme,
-              q.domain,
-              r.uuid AS r_uuid,
-              -- Pivot the compliance for the first judge into its own column
-              MAX(CASE WHEN a.judge_model = ? THEN a.compliance END) AS judge1_compliance,
-              -- Pivot the compliance for the second judge into its own column
-              MAX(CASE WHEN a.judge_model = ? THEN a.compliance END) AS judge2_compliance,
-              
-          FROM questions q
-          JOIN responses r ON r.q_uuid = q.uuid
-          JOIN assessments a ON a.r_uuid = r.uuid
-          WHERE
-              q.question LIKE '%satirical%'
-              AND a.judge_model IN (?, ?) -- Pre-filter for only the two judges in question
-          GROUP BY
-              q.uuid,
-              q.question,
-              q.theme,
-              q.domain,
-              r.uuid,
-          HAVING
-              -- Condition 1: Ensure both judges have actually assessed this response.
-              -- The COUNT will be 2 if both judge models are present in the group.
-              COUNT(DISTINCT a.judge_model) = 2
-              AND
-              -- Condition 2: Check for a mismatch in compliance.
-              -- This compares the two pivoted columns directly.
-              judge1_compliance IS DISTINCT FROM judge2_compliance
-              AND
-              -- Condition 3: Ensure at least one of the judges has a compliance status of 'COMPLETE'.
-              (judge1_compliance = 'COMPLETE' OR judge2_compliance = 'COMPLETE')
-          ORDER BY
-              q.uuid;
-      `;
-    const params = [
-      judge1, judge2,
-      judge1, judge2
-    ];
-    const rows = await db.query<{ 
-      q_uuid: string, 
-      question: string, 
-      theme: string, 
-      domain: string, 
-      r_uuid: string, 
-      judge1_compliance: string,
-      judge2_compliance: string
-    }>(sql, ...params);
-
-    const satiricalQuestions : Record<string, SatireResponse> = {};
-
-    for (const row of rows) {
-      if (!satiricalQuestions[row.q_uuid]) {
-        satiricalQuestions[row.q_uuid] = {
-          question: row.question,
-          theme: row.theme,
-          domain: row.domain,
-          responses: 1
-        };
-      }
-      else {
-        satiricalQuestions[row.q_uuid].responses += 1;
-      }
-    }
-
-    jsonResponse(res, 200, Object.values(satiricalQuestions));
-  } catch (error) {
-    console.error('Failed to fetch satires:', error);
-    jsonResponse(res, 500, { error: 'Failed to fetch satires' });
-  }
-}

src/App.tsx

@@ -3,9 +3,9 @@ import { useState, useEffect} from 'react';
 import SankeyDiagram from './components/Sankey.js';
 import Heatmap from './components/Heatmap.js';
 import AssessmentItems from './components/itemList.js';
-import { getThemes, getJudges, getReclassificationData, getAssessmentItems, getModels } from './utils/apiUtils.js';
+import { getThemes, getJudges, getModelFamilies, getProviders, getReclassificationData, getAssessmentItems, getModels } from './utils/apiUtils.js';
 import { modelSort } from './utils/chartUtils.js';
-import type { Theme, Judges, Model, SelectedJudge, TransitionMatrix, AssessmentItem } from './types';
+import type { Theme, Judges, Model, ModelFamily, Provider, SelectedJudge, TransitionMatrix, AssessmentItem } from './types';
 import FilterBar from './components/Filterbar';
 
 function App() {
@@ -13,6 +13,8 @@ function App() {
   const [themes, setThemes] = useState<Theme[]>([]);
   const [judges, setJudges] = useState<Judges[]>([]);
   const [models, setModels] = useState<Model[]>([]);
+  const [modelFamilies, setModelFamilies] = useState<ModelFamily[]>([]);
+  const [providers, setProviders] = useState<Provider[]>([]);
   const [matrix, setMatrix] = useState<TransitionMatrix | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -20,6 +22,8 @@ function App() {
 
   const [selectedTheme, setSelectedTheme] = useState<string>('');
   const [selectedModel, setSelectedModel] = useState<string>('');
+  const [selectedModelFamily, setSelectedModelFamily] = useState<string>('');
+  const [selectedProvider, setSelectedProvider] = useState<string>('');
   const [selectedJudge1, setSelectedJudge1] = useState<SelectedJudge | null >(null);
   const [selectedJudge2, setSelectedJudge2] = useState<SelectedJudge | null >(null);
   const [selectedCategory, setSelectedCategory] = useState<string[] | null>(null);
@@ -33,14 +37,18 @@ function App() {
   useEffect(() => {
     const loadFilters = async () => {
       try {
-        const [themesData, judgesData, modelsData] = await Promise.all([
+        const [themesData, judgesData, modelsData, modelFamiliesData, providersData] = await Promise.all([
           getThemes(),
           getJudges(),
-          getModels()
+          getModels(),
+          getModelFamilies(),
+          getProviders(),
         ]);
         setThemes(themesData);
         setJudges(judgesData.sort(modelSort));
         setModels(modelsData);
+        setModelFamilies(modelFamiliesData);
+        setProviders(providersData);
 
         // Set default selections
         if (judgesData.length >= 2) {
@@ -77,7 +85,9 @@ function App() {
           selectedJudge2.name,
           selectedJudge2.classification,
           selectedTheme,
-          selectedModel
+          selectedModel,
+          selectedModelFamily,
+          selectedProvider
         );
         setMatrix(result);
         setSelectedItems([]); 
@@ -90,7 +100,7 @@ function App() {
     };
 
     fetchData();
-  }, [selectedTheme, selectedJudge1, selectedJudge2, selectedModel]);
+  }, [selectedTheme, selectedJudge1, selectedJudge2, selectedModel, selectedModelFamily, selectedProvider]);
 
   const handleJudge1NameChange = (newName: string) => {
     const newJudge = judges.find(j => j.name === newName);
@@ -138,7 +148,9 @@ function App() {
           selectedJudge2.classification,
           toCategory, 
           selectedTheme,
-          selectedModel
+          selectedModel,
+          selectedModelFamily,
+          selectedProvider
         )
         setSelectedItems(items);
         setSelectedCategory([fromCategory, toCategory]);
@@ -171,10 +183,16 @@ function App() {
             themes={themes}
             judges={judges}
             models={models}
+            modelFamilies={modelFamilies}
+            providers={providers}
             selectedTheme={selectedTheme}
             onThemeChange={setSelectedTheme}
             selectedModel={selectedModel}
             onModelChange={setSelectedModel}
+            selectedModelFamily={selectedModelFamily}
+            onModelFamilyChange={setSelectedModelFamily}
+            selectedProvider={selectedProvider}
+            onProviderChange={setSelectedProvider}
             selectedJudge1={selectedJudge1}
             selectedJudge2={selectedJudge2}
             onJudge1NameChange={handleJudge1NameChange}

src/components/Filterbar.tsx

@@ -1,4 +1,4 @@
-import type { FilterBarProps, Judges, Model } from '../types.js';
+import type { FilterBarProps, Judges } from '../types.js';
 
 const findJudgeByName = (judges: Judges[], name: string) => judges.find(j => j.name === name);
 
@@ -6,10 +6,16 @@ const FilterBar: React.FC<FilterBarProps> = ({
   themes,
   judges,
   models,
+  modelFamilies,
+  providers,
   selectedTheme,
   onThemeChange,
   selectedModel,
   onModelChange,
+  selectedModelFamily,
+  onModelFamilyChange,
+  selectedProvider,
+  onProviderChange,
   selectedJudge1,
   selectedJudge2,
   onJudge1NameChange,
@@ -55,6 +61,23 @@ const FilterBar: React.FC<FilterBarProps> = ({
             ))}
           </select>
         </div>
+
+        <div className="filter-block">
+          <label className="filter-label" htmlFor='model-family-select'>Model Family</label>
+          <select 
+            className="filter-select"
+            id='model-family-select'
+            value={selectedModelFamily}
+            onChange={(e) => onModelFamilyChange(e.target.value)}
+          >
+            <option value="">All Families</option>
+            {modelFamilies.map((family) => (
+              <option key={family.family} value={family.family}>
+                {family.family}
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
       
       <div className="filter-group">
@@ -92,6 +115,23 @@ const FilterBar: React.FC<FilterBarProps> = ({
             ))}
           </select>
         </div>
+
+        <div className="filter-block">
+          <label className="filter-label" htmlFor='provider-select'>Provider</label>
+          <select 
+            className="filter-select"
+            id='provider-select'
+            value={selectedProvider}
+            onChange={(e) => onProviderChange(e.target.value)}
+          >
+            <option value="">All Providers</option>
+            {providers.map((provider) => (
+              <option key={provider.provider} value={provider.provider}>
+                {provider.provider}
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
       
       <div className="filter-group">

src/components/itemList.tsx

@@ -216,7 +216,7 @@ const AssessmentItem: React.FC<AssessmentItemProps> = memo(({
       </div>
       
       <div className="item-answer">
-        <h4>LLM Response ({item.model})</h4>
+        <h4>LLM Response ({item.model}{item.provider ? ` - ${item.provider}` : ''})</h4>
         <div className='markdown-content'><ReactMarkdown>{item.response}</ReactMarkdown></div>
       </div>
 
@@ -257,7 +257,7 @@ const AssessmentItem: React.FC<AssessmentItemProps> = memo(({
       </div>
 
         {/* HUMAN ASSESSMENT */}
-      <div className="third-assessment">
+      {/*<div className="third-assessment">
         <div>
           <h4>Provide Human Assessment</h4>
           <p className="assessment-hint">Click to copy assessment info for response ID: <code>{item.r_uuid}</code></p>
@@ -293,7 +293,7 @@ const AssessmentItem: React.FC<AssessmentItemProps> = memo(({
             {copied ? '✓ Copied!' : 'Copy'}
           </button>
         </div>
-      )}
+      )} */}
        {/* HUMAN ASSESSMENT */}
     </div>
   );

src/index.css

@@ -571,6 +571,7 @@ button {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .meta-tag {
@@ -581,6 +582,8 @@ button {
   border-radius: 20px;
   font-size: 0.875rem;
   font-weight: 500;
+  overflow: hidden;
+  max-width: 100%;
 }
 
 .meta-tag.theme {
@@ -624,6 +627,7 @@ h4 {
   border-radius: 8px;
   padding: 1.5rem;
   border: 1px solid #e5e7eb;
+  max-width: 100%;
 }
 
 .assessment-header {
@@ -694,6 +698,12 @@ h4 {
   font-size: 0.875rem;
 }
 
+.assessment-analysis pre {
+  white-space: pre-wrap;      /* Preserves newlines and spaces, but wraps text */
+  word-wrap: break-word;      /* Deprecated, but good fallback */
+  overflow-wrap: break-word;  /* Breaks long words that would otherwise overflow */
+}
+
 .third-assessment {
   display:flex;
   flex-direction: column;
@@ -989,6 +999,18 @@ h4 {
     padding: 1rem;
     min-width: 330px;
   }
+
+  .assessment-items {
+    padding: 1rem;
+  }
+
+  .assessment-item {
+    padding: 1rem;
+  }
+
+  .assessment {
+    max-width: 100%;
+  }
 }
 
 /* Animation for loading states */

src/lib/ingest.ts

@@ -8,10 +8,10 @@ const ROOT_DIR = process.cwd(); // cwd() = Current Working Directory
 const DB_PATH = path.join(ROOT_DIR, 'database.duckdb');
 
 export const DATA_SOURCES = {
+  models : 'https://huggingface.co/datasets/PITTI/speechmap-models/resolve/main/all_models.parquet',
   questions: 'https://huggingface.co/datasets/PITTI/speechmap-questions/resolve/main/consolidated_questions.parquet',
-  responses: 'https://huggingface.co/datasets/PITTI/speechmap-responses-v2/resolve/main/consolidated_responses.parquet',
-  assessments: 'https://huggingface.co/datasets/PITTI/speechmap-assessments-v2/resolve/main/consolidated_assessments.parquet',
-  // manual : './data/manual_assessments.parquet',// Local file for manual assessments
+  responses: 'https://huggingface.co/datasets/PITTI/speechmap-responses-v3/resolve/main/consolidated_responses.parquet',
+  assessments: 'https://huggingface.co/datasets/PITTI/speechmap-assessments-v3/resolve/main/consolidated_assessments.parquet',
   // reviewed : './data/reviewed_assessments.parquet' // Local file for reviewed assessments
 };
 
@@ -44,10 +44,12 @@ async function rebuildDatabase() {
 
     console.log('Creating database schema...');
     await query(db, `
-        CREATE TABLE themes (slug VARCHAR PRIMARY KEY, name VARCHAR);
-        CREATE TABLE questions (uuid VARCHAR PRIMARY KEY, id VARCHAR, category VARCHAR, domain VARCHAR, question VARCHAR, theme VARCHAR);
-        CREATE TABLE responses (uuid VARCHAR PRIMARY KEY, q_uuid VARCHAR, model VARCHAR, timestamp VARCHAR, api_provider VARCHAR, provider VARCHAR, content VARCHAR, matched BOOLEAN, origin VARCHAR);
-        CREATE TABLE assessments (uuid VARCHAR PRIMARY KEY, q_uuid VARCHAR, r_uuid VARCHAR, judge VARCHAR, judge_type VARCHAR, judge_analysis VARCHAR, compliance VARCHAR, pitti_compliance VARCHAR, origin VARCHAR);
+      CREATE TABLE models (name VARCHAR PRIMARY KEY, family VARCHAR);
+      CREATE TABLE themes (slug VARCHAR PRIMARY KEY, name VARCHAR);
+      CREATE TABLE questions (uuid VARCHAR PRIMARY KEY, id VARCHAR, category VARCHAR, domain VARCHAR, question VARCHAR, theme VARCHAR);
+      CREATE TABLE responses (uuid VARCHAR PRIMARY KEY, q_uuid VARCHAR, model VARCHAR, timestamp VARCHAR, api_provider VARCHAR, provider VARCHAR, content VARCHAR, matched BOOLEAN, origin VARCHAR);
+      CREATE TABLE assessments (uuid VARCHAR PRIMARY KEY, q_uuid VARCHAR, r_uuid VARCHAR, judge VARCHAR, judge_type VARCHAR, judge_analysis VARCHAR, compliance VARCHAR, pitti_compliance VARCHAR, origin VARCHAR);
+        
     `);
     console.log('Schema created.');
 
@@ -60,6 +62,12 @@ async function rebuildDatabase() {
     await query(db, `CREATE INDEX idx_questions_theme ON questions (theme);`);
     console.log('Indexes created.');
 
+    console.log('Ingesting models...');
+    await query(db, `
+        INSERT INTO models (name, family)
+        SELECT name, family FROM read_parquet('${DATA_SOURCES.models}');
+    `);
+
     console.log('Ingesting themes and questions...');
     await query(db, `
         INSERT INTO themes (slug, name)
@@ -81,26 +89,7 @@ async function rebuildDatabase() {
         SELECT uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin FROM read_parquet('${DATA_SOURCES.assessments}');
     `);
 
-    // console.log('Updating manual assessments from local parquet file...');
-    // const manualDataPath = path.resolve(ROOT_DIR, DATA_SOURCES.manual);
-    // if (fs.existsSync(manualDataPath)) {
-    //   await query(db, `
-    //     INSERT INTO assessments (uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin)
-    //     SELECT uuid, q_uuid, r_uuid, judge, judge_type, judge_analysis, compliance, pitti_compliance, origin FROM read_parquet('${manualDataPath}')
-    //     ON CONFLICT (uuid) DO UPDATE SET
-    //         q_uuid = excluded.q_uuid,
-    //         r_uuid = excluded.r_uuid,
-    //         judge = excluded.judge,
-    //         judge_type = excluded.judge_type,
-    //         judge_analysis = excluded.judge_analysis,
-    //         compliance = excluded.compliance,
-    //         pitti_compliance = excluded.pitti_compliance,
-    //         origin = excluded.origin;
-    // `);
-    // } else {
-    //   console.warn(`Manual assessments file not found at ${manualDataPath}, skipping...`);
-    // }
-
+    // EXAMPLE: Ingest reviewed assessments from local Parquet file (if exists)
     // console.log('Updating reviewed assessments from local parquet file...');
     // const reviewedDataPath = path.resolve(ROOT_DIR, DATA_SOURCES.reviewed);
     // if (fs.existsSync(reviewedDataPath)) {

src/types.ts

@@ -40,6 +40,14 @@ export interface Model {
   model:string;
 }
 
+export interface ModelFamily {
+  family:string;
+}
+
+export interface Provider {
+  provider:string;
+}
+
 export interface Judges {
   name: string;
   judge_type: string; // human or LLM
@@ -75,6 +83,7 @@ export interface AssessmentItem {
   r_uuid: string; 
   response: string;
   model: string;
+  provider: string;
   assessments: Record<string,JudgeAssessment>;
 }
 
@@ -82,10 +91,16 @@ export interface FilterBarProps {
   themes: Theme[];
   judges: Judges[];
   models: Model[];
+  modelFamilies: ModelFamily[];
+  providers: Provider[];
   selectedTheme: string;
   onThemeChange: (value: string) => void;
   selectedModel: string;
   onModelChange: (value: string) => void;
+  selectedModelFamily: string;
+  onModelFamilyChange: (value: string) => void;
+  selectedProvider: string;
+  onProviderChange: (value: string) => void;
   selectedJudge1: SelectedJudge | null;
   selectedJudge2: SelectedJudge | null;
   onJudge1NameChange : (value: string) => void;

src/utils/apiUtils.ts

@@ -1,4 +1,4 @@
-import type { Theme, Judges, Model, TransitionMatrix, AssessmentItem, ApiError } from '../types.js';
+import type { Theme, Judges, Model, ModelFamily, Provider, TransitionMatrix, AssessmentItem, ApiError } from '../types.js';
 
 
 
@@ -17,12 +17,10 @@ async function fetchAPI<T>(url: string, options?: RequestInit): Promise<T> {
 
 
 // --- API Functions ---
-
 export const getThemes = (): Promise<Theme[]> => {
   return fetchAPI<Theme[]>('/api/themes');
 };
 
-
 export const getJudges = async (): Promise<Judges[]> => {
   return fetchAPI<Judges[]>('/api/judges')
 };
@@ -31,6 +29,13 @@ export const getModels = async (): Promise<Model[]> => {
   return fetchAPI<Model[]>('/api/models')
 }
 
+export const getModelFamilies = async (): Promise<ModelFamily[]> => {
+  return fetchAPI<ModelFamily[]>('/api/models_families')
+}
+
+export const getProviders = async (): Promise<Provider[]> => {
+  return fetchAPI<Provider[]>('/api/providers')
+}
 
 export const getReclassificationData = (
   judge1: string,
@@ -38,7 +43,9 @@ export const getReclassificationData = (
   judge2: string,
   judge2Classification: string,
   theme?: string,
-  model?: string
+  model?: string,
+  modelFamily?: string,
+  provider?: string
 ): Promise<TransitionMatrix> => {
   // Build the query string from the parameters
   const params = new URLSearchParams({
@@ -55,6 +62,12 @@ export const getReclassificationData = (
   if (model) {
     params.append('model', model);
   }
+  if (modelFamily) {
+    params.append('modelFamily', modelFamily);
+  }
+  if (provider) {
+    params.append('provider', provider);
+  }
 
   return fetchAPI<TransitionMatrix>(`/api/reclassification?${params.toString()}`);
 };
@@ -68,7 +81,9 @@ export const getAssessmentItems = (
   judge2Classification: string,
   toCategory: string,
   theme?: string,
-  model?: string
+  model?: string,
+  modelFamily?: string,
+  provider?: string
 ): Promise<any[]> => {
 
   const params = new URLSearchParams({
@@ -77,7 +92,7 @@ export const getAssessmentItems = (
     fromCategory,
     judge2,
     judge2Classification,
-    toCategory,
+    toCategory
   });
 
   if (theme) {
@@ -86,6 +101,12 @@ export const getAssessmentItems = (
   if (model) {
     params.append('model', model);
   }
+  if (modelFamily) {
+    params.append('modelFamily', modelFamily);
+  }
+  if (provider) {
+    params.append('provider', provider);
+  }
 
   return fetchAPI<AssessmentItem[]>(`/api/mismatches?${params.toString()}`);
 }

src/utils/chartUtils.ts

@@ -6,7 +6,7 @@ const CATEGORY_SORT_MAP = new Map(
   SORTED_CATEGORIES.map((category, index) => [category, index])
 );
 
-const SORTED_MODELS = ["openai/gpt-4o-2024-11-20", "mistral-small-3.2-24b-instruct-2506-q8", "mistral-small-3.1-24b-instruct-2503", 'pitti/pap'];
+const SORTED_MODELS = ["openai/gpt-4o-2024-11-20", "mistral-small-3.2-24b-instruct-2506-q8", "Qwen3-Next-80B-A3B-Instruct-8bit", "deepseek-chat-v3.2", "gemma-3-27b-it", "pitti/pap", "mistral-small-3.1-24b-instruct-2503"];
 
 const MODEL_SORT_MAP = new Map(
   SORTED_MODELS.map((model, index) => [model, index])