consolidate_components

data/artifacts.json

@@ -1,4 +1,18 @@
 [
+  {
+    "title": "Before AI Exploits Our Chats, Let’s Learn from Social Media Mistakes",
+    "date": "2025-10-13",
+    "type": "external",
+    "description": "To avoid repeating social media’s privacy failures, we must prevent generative AI from turning intimate conversations into ad data—before trust is irreparably eroded. Open-source, privacy-first models and stronger regulation can stop corporations from monetizing vulnerability, but only if we act now.",
+    "areas": [
+      "agency"
+    ],
+    "topics": [
+      "personal"
+    ],
+    "url": "https://www.techpolicy.press/before-ai-exploits-our-chats-lets-learn-from-social-media-mistakes/",
+    "featured": true
+  },
   {
     "title": "Preserving Agency: Why AI Safety Needs Community, Not Corporate Control",
     "date": "2025-09-29",
@@ -8,7 +22,7 @@
       "agency"
     ],
     "topics": [
-      "personal"
+      "community"
     ],
     "url": "https://huggingface.co/blog/giadap/preserving-agency"
   },
@@ -140,12 +154,10 @@
     "type": "article",
     "description": "The rising energy demands of AI data centers are driving up electricity costs for everyday consumers, particularly in regions with high concentrations of these facilities, while grid stability is increasingly compromised. Despite available efficiency techniques and smaller, task-specific models that could drastically reduce energy use, corporate incentives favor deploying the largest, most expensive models at scale. Regulatory shifts in some U.S. states and countries are beginning to shift the financial burden from the public to data center operators, urging a systemic rethinking of AI deployment toward transparency, efficiency, and community-driven solutions.",
     "areas": [
-      "ecosystems",
-      "sustainability"
+      "ecosystems"
     ],
     "topics": [
-      "measuring",
-      "power"
+      "measuring"
     ],
     "url": "https://www.techpolicy.press/how-your-utility-bills-are-subsidizing-power-hungry-ai/"
   },
@@ -277,7 +289,7 @@
       "agency"
     ],
     "topics": [
-      "personal"
+      "community"
     ],
     "url": "https://huggingface.co/blog/giadap/when-ai-speaks"
   },
@@ -383,7 +395,6 @@
       "ecosystems"
     ],
     "topics": [
-      "power",
       "regulation"
     ],
     "url": "https://huggingface.co/blog/hadyelsahar/watermarking-iclr2025"
@@ -498,12 +509,10 @@
     "type": "blog",
     "description": "Traditional consent models are inadequate for the age of generative AI, where data use is unpredictable, irreversible, and often undermines individual autonomy. Users are asked to agree to unknown, evolving, and potentially harmful applications of their personal information, creating a dangerous gap between informed choice and real-world impact. Meaningful protection requires shifting responsibility from individuals to institutions through collective governance, technical safeguards, and new legal frameworks.",
     "areas": [
-      "agency",
-      "ecosystems"
+      "agency"
     ],
     "topics": [
-      "personal",
-      "regulation"
+      "personal"
     ],
     "url": "https://huggingface.co/blog/giadap/beyond-consent"
   },
@@ -607,7 +616,7 @@
       "agency"
     ],
     "topics": [
-      "personal"
+      "community"
     ],
     "url": "https://www.techpolicy.press/when-freedom-bites-back-meta-moderation-and-the-limits-of-tolerance/"
   },
@@ -656,10 +665,10 @@
     "type": "paper",
     "description": "We propose a Coordinated Flaw Disclosure (CFD) framework to systematically identify, report, and remediate algorithmic flaws in AI systems, moving beyond traditional cybersecurity vulnerability models by introducing extended model cards, an independent adjudication panel, automated verification, and dynamic scope expansion to accommodate the unique ethical, statistical, and contextual challenges of machine learning.",
     "areas": [
-      "ecosystems"
+      "agency"
     ],
     "topics": [
-      "power"
+      "community"
     ],
     "url": "https://ojs.aaai.org/index.php/AIES/article/view/31635"
   },
@@ -737,7 +746,7 @@
       "agency"
     ],
     "topics": [
-      "personal"
+      "community"
     ],
     "url": "https://huggingface.co/blog/giadap/civics"
   },
@@ -894,10 +903,10 @@
     "type": "paper",
     "description": "This work introduces a method to evaluate social biases in text-to-image systems by analyzing how gender and ethnicity markers in prompts influence generated depictions of professionals, revealing consistent under-representation of marginalized identities across leading models. It proposes a cluster-based, non-parametric approach to quantify visual stereotypes without assigning fixed identity labels, enabling comparative bias scoring between models. The authors also release interactive tools and datasets to lower barriers for auditing and exploring these biases in generative AI systems.",
     "areas": [
-      "ecosystems"
+      "agency"
     ],
     "topics": [
-      "power"
+      "community"
     ],
     "url": "https://arxiv.org/abs/2312.00384"
   },
@@ -910,7 +919,6 @@
       "ecosystems"
     ],
     "topics": [
-      "power",
       "regulation"
     ],
     "url": "https://dl.acm.org/doi/abs/10.1145/3593013.3594002"
@@ -924,7 +932,7 @@
       "agency"
     ],
     "topics": [
-      "personal"
+      "community"
     ],
     "url": "https://arxiv.org/abs/2303.11408"
   },

js/{cards/ArtifactSummaryCard.js → components/Carousel.js}

@@ -1,16 +1,13 @@
-// ArtifactSummaryCard.js - Summary card component for artifacts
-// Now uses the unified Card component
-import { renderArtifactCard } from '../components/Card.js';
-
-export function createArtifactSummaryCard(artifact, index) {
-    return renderArtifactCard(artifact, { index });
-}
+// Carousel.js - Carousel component for artifacts
+import { renderArtifactCard } from './Card.js';
 
 export function createArtifactCarousel(artifacts, containerId) {
     const container = document.getElementById(containerId);
     if (!container) return;
     
-    const cardsHtml = artifacts.map((artifact, index) => createArtifactSummaryCard(artifact, index)).join('');
+    const cardsHtml = artifacts.map((artifact, index) => 
+        renderArtifactCard(artifact, { index })
+    ).join('');
     
     container.innerHTML = `
         <div class="relative">
@@ -38,7 +35,6 @@ export function createArtifactCarousel(artifacts, containerId) {
     `;
 }
 
-
 // Utility function for carousel navigation
 window.scrollCarousel = function(containerId, scrollAmount) {
     const container = document.getElementById(containerId);

js/pages/AreaPage.js

@@ -1,6 +1,6 @@
 // pages/AreaPage.js - Single-topic view for area pages
 import { getFeaturedArtifacts } from '../init.js';
-import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.js';
+import { createArtifactCarousel } from '../components/Carousel.js';
 import { renderAreaNavigation } from '../components/PageNavigation.js';
 import { renderContentSection, renderOpennessCallout } from '../components/ContentSection.js';
 

js/pages/HomePage.js

@@ -1,6 +1,6 @@
 // pages/HomePage.js - Home page functionality for SPA
 import { createTeamMember } from '../main.js';
-import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.js';
+import { createArtifactCarousel } from '../components/Carousel.js';
 import { getFeaturedArtifacts } from '../init.js';
 import { teamMembers } from '../data/team.js';
 import { renderAreaCard } from '../components/Card.js';
@@ -52,7 +52,7 @@ export function renderHomePage() {
                 </p>
                 
                 <p>
-                    In addition to the work of the entire ${createInlineLink('Hugging Face', 'https://huggingface.co', 'bg-yellow-100 text-yellow-800')} team to support the development and sharing of such systems, the ${createInlineLink('Machine Learning and Society Team', '/', 'bg-blue-100 text-blue-800')} works on projects targeting the boundaries between technology and society more specifically. This includes work on the ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, addressing its financial and environmental costs and investigating methods to manage its footprint, work on how ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} over artificial intelligence systems (or lack thereof) plays out for individual and communities, and work on how the economic and regulatory ${createInlineLink('Ecosystems of AI', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} shape who benefits most or least from the technology.
+                    In addition to the work of the entire ${createInlineLink('Hugging Face', 'https://huggingface.co', 'bg-yellow-100 text-yellow-800')} team to support the development and sharing of such systems, the ${createInlineLink('Machine Learning and Society Team', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} works on projects targeting the boundaries between technology and society more specifically. This includes work on the ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, addressing its financial and environmental costs and investigating methods to manage its footprint, work on how ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} over artificial intelligence systems (or lack thereof) plays out for individual and communities, and work on how the economic and regulatory ${createInlineLink('Ecosystems of AI', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} shape who benefits most or least from the technology.
                 </p>
                 
                 <p>