| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>From Code to Cosmos: An Interactive Syllabus for AI Ethics-Safety Bridge</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://css.gg/css?=" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> |
| |
| |
| |
| |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #FFF9F2; |
| color: #5A4A42; |
| line-height: 1.6; |
| } |
| h1, h2, h3, h4, h5 { |
| font-family: 'Lora', serif; |
| font-weight: 500; |
| letter-spacing: -0.5px; |
| } |
| .nav-link { |
| position: relative; |
| transition: all 0.3s; |
| padding: 8px 12px; |
| border-radius: 20px; |
| } |
| .nav-link::before { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 100%; |
| top: 0; |
| left: 0; |
| background-color: rgba(234, 149, 89, 0.1); |
| border-radius: 20px; |
| transition: width 0.3s; |
| z-index: -1; |
| } |
| .nav-link.active, .nav-link:hover { |
| color: #EA9559; |
| } |
| .nav-link.active::before, .nav-link:hover::before { |
| width: 100%; |
| } |
| .module-1-bg { background-color: rgba(234, 149, 89, 0.1); border-color: #EA9559; } |
| .module-1-border-hover { border-color: #EA9559; } |
| .module-1-text { color: #EA9559; } |
| |
| .module-2-bg { background-color: rgba(210, 125, 70, 0.1); border-color: #D27D46; } |
| .module-2-border-hover { border-color: #D27D46; } |
| .module-2-text { color: #D27D46; } |
| |
| .module-3-bg { background-color: rgba(191, 107, 57, 0.1); border-color: #BF6B39; } |
| .module-3-border-hover { border-color: #BF6B39; } |
| .module-3-text { color: #BF6B39; } |
| |
| .chart-container { |
| position: relative; |
| width: 100%; |
| max-width: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| height: 350px; |
| max-height: 50vh; |
| background-color: #FFF9F2; |
| border-radius: 12px; |
| padding: 20px; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.05); |
| } |
| @media (min-width: 768px) { |
| .chart-container { |
| height: 450px; |
| } |
| } |
| .week-card { |
| transition: all 0.3s; |
| background-color: white; |
| border: 1px solid #F0E6DC; |
| } |
| .week-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 4px 12px rgba(234, 149, 89, 0.1); |
| border-color: #EA9559; |
| } |
| .modal-content { |
| max-height: 85vh; |
| overflow-y: auto; |
| background-color: #FFF9F2; |
| border: 1px solid #F0E6DC; |
| } |
| .detail-item { |
| border-left: 3px solid #F0E6DC; |
| padding-left: 1rem; |
| margin-top: 0.75rem; |
| transition: all 0.3s; |
| } |
| .detail-item:hover { |
| border-left-color: #EA9559; |
| background-color: rgba(255,255,255,0.5); |
| } |
| .section-divider { |
| position: relative; |
| height: 40px; |
| margin: 40px 0; |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z' fill='%23EA9559' fill-opacity='0.1'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; |
| background-size: cover; |
| } |
| |
| .framework-card { |
| position: relative; |
| overflow: hidden; |
| } |
| .framework-card::before { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 3px; |
| background-color: #EA9559; |
| transform: scaleX(0); |
| transform-origin: left; |
| transition: transform 0.3s; |
| } |
| .framework-card:hover::before { |
| transform: scaleX(1); |
| } |
| </style> |
| </head> |
| <body class="antialiased"> |
|
|
| <div id="app"> |
| <nav id="navbar" class="bg-opacity-80 backdrop-blur-md sticky top-0 z-50 transition-shadow duration-300"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <span class="text-xl font-semibold text-[#3D352E]">AI Ethics-Safety Bridge Syllabus</span> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#framework" class="nav-link font-medium">Framework</a> |
| <a href="#comparison" class="nav-link font-medium">Comparison</a> |
| <a href="#syllabus" class="nav-link font-medium">Syllabus</a> |
| <a href="#pedagogy" class="nav-link font-medium">Pedagogy</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| <header class="py-20 lg:py-32 bg-[#FFF5EB] relative overflow-hidden"> |
| <div class="max-w-4xl mx-auto px-4 text-center relative z-10"> |
| <h1 class="text-4xl md:text-6xl font-medium tracking-tight text-[#5A4A42]">From Code to Cosmos</h1> |
| <p class="mt-4 text-lg md:text-xl text-[#8A7569]">An Interactive Syllabus for a New Generation of AI Ethics, Safety, and Governance.</p> |
| </div> |
| <div class="absolute inset-0 opacity-10"> |
| <div class="absolute top-1/4 left-1/4 w-32 h-32 rounded-full bg-[#EA9559] mix-blend-multiply filter blur-xl"></div> |
| <div class="absolute top-1/3 right-1/3 w-40 h-40 rounded-full bg-[#D27D46] mix-blend-multiply filter blur-xl"></div> |
| <div class="absolute bottom-1/4 right-1/4 w-28 h-28 rounded-full bg-[#BF6B39] mix-blend-multiply filter blur-xl"></div> |
| </div> |
| </header> |
|
|
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-24"> |
| |
| <section id="framework"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold">A New Philosophical Framework</h2> |
| <p class="mt-4 max-w-3xl mx-auto text-lg text-[#6B5E53]">This course is built on the premise that to build responsible AI, we must first understand the worldviews embedded within the technology itself. It integrates deep technical understanding with profound philosophical critique from five key perspectives.</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"> |
| </div> |
| </section> |
|
|
| <section id="comparison"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold">Bridging the Gap in AI Education</h2> |
| <p class="mt-4 max-w-3xl mx-auto text-lg text-[#6B5E53]">How does this proposed syllabus differ from existing top-tier programs? This interactive chart compares the course's focus against others. Select a course to see how they stack up on key educational dimensions.</p> |
| </div> |
| <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| <div class="md:w-1/3"> |
| <h3 class="text-xl font-semibold mb-4">Compare Against:</h3> |
| <select id="comparison-select" class="w-full p-2 border rounded-md bg-gray-50 focus:ring-2 focus:ring-[#A47854]"> |
| <option value="Stanford CS336" selected>Stanford CS336</option> |
| <option value="USC IDSN-544">USC IDSN-544</option> |
| <option value="AI Safety Book Curriculum">AI Safety Book Curriculum</option> |
| </select> |
| <div id="comparison-text" class="mt-6 text-sm text-[#6B5E53] space-y-2"></div> |
| </div> |
| <div class="md:w-2/3 flex-grow"> |
| <div class="chart-container"> |
| <canvas id="comparisonChart"></canvas> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section id="syllabus"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold">Interactive Syllabus Explorer</h2> |
| <p class="mt-4 max-w-3xl mx-auto text-lg text-[#6B5E53]">Explore the 15-week journey. The course is structured in three modules mirroring the AI development lifecycle. Click on any week to see details, or use the filters to highlight weeks related to a specific philosophical theme.</p> |
| </div> |
| <div class="flex flex-wrap items-center justify-center gap-2 mb-8"> |
| <button class="filter-btn bg-gray-200 text-gray-800 py-2 px-4 rounded-full" data-filter="all">All</button> |
| <button class="filter-btn bg-gray-200 text-gray-800 py-2 px-4 rounded-full" data-filter="Heidegger">Heidegger</button> |
| <button class="filter-btn bg-gray-200 text-gray-800 py-2 px-4 rounded-full" data-filter="Floridi">Floridi</button> |
| <button class="filter-btn bg-gray-200 text-gray-800 py-2 px-4 rounded-full" data-filter="Langer">Langer</button> |
| <button class="filter-btn bg-gray-200 text-gray-800 py-2 px-4 rounded-full" data-filter="Schumacher">Schumacher</button> |
| <button class="filter-btn bg-gray-200 text-gray-800 py-2 px-4 rounded-full" data-filter="Setia">Adi Setia</button> |
| </div> |
| <div id="syllabus-grid" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"> |
| </div> |
| </section> |
|
|
| <section id="pedagogy"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl md:text-4xl font-bold">Pedagogy and Assessment</h2> |
| <p class="mt-4 max-w-3xl mx-auto text-lg text-[#6B5E53]">The course is designed not just to impart knowledge, but to cultivate intellectual agility. The learning experience and assessments are structured to synthesize theory and practice, forcing a constant dialogue between the technical, the philosophical, and the real-world implications.</p> |
| </div> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> |
| <div class="bg-white rounded-xl shadow-lg p-8"> |
| <h3 class="text-xl font-semibold mb-4 text-center">A Tripartite Learning Experience</h3> |
| <p class="text-center text-sm text-gray-500 mb-6">Each class session is divided into three interconnected segments.</p> |
| <div class="space-y-4"> |
| <div class="flex items-start space-x-4"> |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-[#A47854] text-white flex items-center justify-center font-bold text-lg">1</div> |
| <div> |
| <h4 class="font-semibold">Technical Deep Dive</h4> |
| <p class="text-[#6B5E53]">Hands-on lectures and discussions of core engineering concepts, grounded in practical implementation.</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-4"> |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-[#A47854] text-white flex items-center justify-center font-bold text-lg">2</div> |
| <div> |
| <h4 class="font-semibold">Philosophical Inquiry</h4> |
| <p class="text-[#6B5E53]">A Socratic seminar connecting abstract philosophical ideas to the concrete technical material of the week.</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-4"> |
| <div class="flex-shrink-0 h-12 w-12 rounded-full bg-[#A47854] text-white flex items-center justify-center font-bold text-lg">3</div> |
| <div> |
| <h4 class="font-semibold">Safety & Governance Case Study</h4> |
| <p class="text-[#6B5E53]">Student-led analysis of a contemporary AI event, policy, or safety paper, grounding theory in reality.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-lg p-8"> |
| <h3 class="text-xl font-semibold mb-4 text-center">Integrated Assessment</h3> |
| <div class="chart-container h-80 md:h-96"> |
| <canvas id="assessmentChart"></canvas> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer class="bg-[#FFF5EB] mt-16 py-8 border-t border-[#F0E6DC]"> |
| <div class="max-w-7xl mx-auto px-4 text-center text-[#8A7569]"> |
| <p>This interactive syllabus was generated based on the report "From Code to Cosmos: A Foundational Syllabus for AI Ethics, Safety, and Governance."</p> |
| </div> |
| </footer> |
| </div> |
|
|
| <div id="modal-container" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl modal-content transform transition-all scale-95 opacity-0"> |
| <div class="p-6 md:p-8"> |
| <div class="flex justify-between items-start"> |
| <h3 id="modal-title" class="text-2xl font-bold text-[#3D352E]"></h3> |
| <button id="modal-close" class="text-gray-400 hover:text-gray-800">×</button> |
| </div> |
| <p id="modal-subtitle" class="text-sm text-gray-500 mt-1 mb-4"></p> |
| <div id="modal-body" class="prose max-w-none text-[#3D352E]"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="syllabus-modal-container" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-5xl modal-content transform transition-all scale-95 opacity-0"> |
| <div id="syllabus-modal-content" class="p-6 md:p-8 relative"> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| const philosophicalFrameworks = [ |
| { name: "Martin Heidegger", concept: "Enframing (Gestell)", summary: "Technology as a worldview that orders reality into a calculable 'standing-reserve,' posing a danger by obscuring other ways of being.", details: `<p>Heidegger argues the essence of modern technology is not the tools themselves, but a specific way of "revealing" the world he calls <strong>Enframing (Gestell)</strong>. This worldview "challenges" all of reality to present itself as a resource to be optimized and controlled.</p><p class="mt-2">In AI, this is seen in the drive to scrape human language (Common Crawl) and optimize models for performance, treating the world as a 'standing-reserve' of data. For Heidegger, the "greatest danger" is not rogue AI, but the triumph of this single, instrumental worldview, leading to a "forgetfulness of Being" where we can no longer relate to the world outside of control and utility.</p>` }, |
| { name: "Adi Setia", concept: "Metaphysics of Order", summary: "A worldview where nature is a coherent, value-laden book of 'signs' (āyāt) to be studied as a moral and intellectual pursuit.", details: `<p>In direct contrast to Enframing, Dr. Adi Setia's framework, derived from Islamic philosophy, posits a <strong>metaphysics of order</strong>. The universe is not a random collection of resources but a purposeful creation imbued with value. The study of nature is the study of divine signs (āyāt).</p><p class="mt-2">The concept of <em>taskhīr</em> (nature's subservience to humanity) is not a license for exploitation but a trust (<em>khilāfa</em>) to appreciate the Creator's wisdom (<em>hikmah</em>). This reframes science and technology as an "intellecto-moral" pursuit, where understanding the world is tied to understanding one's place within a purposeful cosmos.</p>` }, |
| { name: "Luciano Floridi", concept: "The Infosphere", summary: "A new ontological space we inhabit, demanding an 'environmental ethics' to manage it as a habitat for both humans and AI.", details: `<p>Floridi argues we now live in an <strong>Infosphere</strong>, a new environment constituted by information. The distinction between online and offline collapses into a seamless "onlife." AI agents are the "true natives" of this space.</p><p class="mt-2">This reality demands a new ethical framework: an <strong>"environmental ethics for the infosphere."</strong> Issues like data breaches become 'habitat destruction,' and disinformation becomes 'pollution' that increases 'information entropy.' Governance shifts from policing bad actors to practicing ecological stewardship, preserving the health of the informational environment for all its inhabitants (inforgs).</p>` }, |
| { name: "Susanne Langer", concept: "Symbolic Forms", summary: "Distinguishes between discursive (logic, language) and presentational (art, ritual) symbols, questioning the meaning of AI-generated art.", details: `<p>Langer's work is crucial for analyzing generative AI. She distinguishes between two types of symbols:<ul class="list-disc pl-5 mt-2"><li><strong>Discursive Symbols:</strong> Language, math. Have stable meanings and logical structure.</li><li><strong>Presentational Symbols:</strong> Art, ritual. Understood holistically, they articulate the complex, non-linear nature of human feeling. Art is the "creation of forms symbolic of human feeling."</li></ul><p class="mt-2">Generative AI masters both, raising the profound question: What do AI-generated symbols symbolize? If not rooted in a "life of feeling," are they merely hollow shells, or something new entirely? This moves the critique of AI art beyond aesthetics to the core of meaning-making.</p>` }, |
| { name: "E.F. Schumacher", concept: "Appropriate Scale", summary: "Critiques the 'bigger is better' ethos, advocating for 'Appropriate Technology' that is human-scale, decentralized, and sustainable.", details: `<p>In "Small is Beautiful," Schumacher challenges the ideology of maximum scale and growth, an ethos mirrored in AI's obsession with "scaling laws." He argues for <strong>"intermediate" or "appropriate technology"</strong>: tools that serve concrete community needs rather than abstract metrics.</p><p class="mt-2">Applied to AI, this gives us the concept of <strong>"Appropriate Technology AI" (AT-AI)</strong>: systems designed for local empowerment, maintainability, and intelligibility. This directly confronts the dominant paradigm of building massive, centralized foundation models, which risk creating new forms of dependency and alienation, highlighting a crisis of scale alongside the crisis of meaning.</p>` }, |
| ]; |
| |
| const syllabusData = [ |
| { week: 1, module: 1, theme: "Introduction: Technology as Worldview", |
| synopsis: "This foundational week establishes the course's central argument: that technology is not neutral. We introduce the core philosophical conflict between seeing the world as a resource to be optimized (Heidegger's 'Enframing') and seeing it as a meaningful order to be understood (Setia's 'Metaphysics of Order'). This prepares us to analyze the first technical step of AI—tokenization—in Week 2.", |
| philosophy: "<strong>Heidegger's 'The Question Concerning Technology':</strong> To establish the core critique of technology as a mode of revealing, not just a tool. <strong>Adi Setia's 'Three Meanings of Islamic Science':</strong> To provide a non-Western counter-narrative where science is an intellecto-moral pursuit.", |
| safety: "<strong>Anderljung et al., 'Frontier AI Regulation' & Yudkowsky, 'AGI Ruin':</strong> To frame the stakes by contrasting pragmatic governance proposals with long-term existential risk concerns. This highlights the spectrum of what 'safety' means.", |
| technicalRefs: [{title: "PyTorch Documentation", relevance: "essential for establishing a common technical baseline."}, {title: "Effective PyTorch", relevance: "providing practical advice for real-world usage."}], |
| miniProject: "<strong>Goal:</strong> Ensure all students have a functional development environment. <strong>Relevance:</strong> This practical first step grounds the abstract philosophical discussion in the concrete reality of code and hardware.", |
| question: "Is the instrumental definition of technology ('a means to an end') sufficient? How does Heidegger's concept of 'revealing' challenge the premise of a 'general purpose' AI, and how does Setia's framework redefine the 'purpose' of science itself?" }, |
| { week: 2, module: 1, theme: "The Act of Tokenization: Carving Reality", |
| synopsis: "Building on Week 1's philosophical frameworks, this week examines the first concrete act of building an LLM: tokenization. We treat this not as a mere technical step but as a philosophical act of 'carving up' reality. This provides a tangible example of Heidegger's 'Enframing' and sets the stage for understanding the Transformer architecture in Week 3, which operates on these tokens.", |
| philosophy: "<strong>Langer's 'Philosophy in a New Key':</strong> To introduce the critical distinction between discursive (language-like) and presentational (art-like) symbols, which tokenization flattens. <strong>Floridi's 'The Logic of Information':</strong> To understand how information is not raw data but a 'well-formed, meaningful, and truthful' entity, a standard that raw tokenization violates.", |
| safety: "<strong>AI Safety Book, Ch. 1 & ML Fundamentals:</strong> To connect the technical process of tokenization to the foundational concepts of how models learn, providing the basic vocabulary for all future safety discussions.", |
| technicalRefs: [{title: "Hugging Face Tokenizers", relevance: "providing high-level library context."}, {title: "Karpathy's 'Let's build GPT'", relevance: "providing a low-level, first-principles understanding."}], |
| miniProject: "<strong>Goal:</strong> To gain a visceral understanding of how a seemingly neutral algorithm makes irreversible semantic commitments. <strong>Relevance:</strong> This lab makes Langer's abstract concept of imposing a 'grammatical scheme' a concrete technical experience.", |
| question: "Is a tokenizer a neutral tool for data compression, or is it a philosophical act that imposes a 'grammatical scheme' (Langer) on reality? How does tokenizing the world into discrete units relate to Heidegger's 'standing-reserve'?" }, |
| { week: 3, module: 1, theme: "Architectures of Thought: Transformers & Enframing", |
| synopsis: "From the 'what' (tokens) of Week 2, we move to the 'how': the Transformer architecture. We analyze how its design choices—particularly self-attention—embody a specific worldview. This technical deep-dive provides a concrete case study for Heidegger's abstract concepts and Floridi's idea of 'conceptual design', and prepares us to critique the physical hardware that enables this architecture in Week 4.", |
| philosophy: "<strong>Heidegger's 'The Age of the World Picture':</strong> To argue that modern science turns the world into a 'picture' that can be represented and manipulated, which is exactly what a Transformer does. <strong>Floridi on 'Conceptual Design':</strong> To frame the act of designing an architecture as a philosophical choice with ethical consequences.", |
| safety: "<strong>AI Safety Book, Ch. 3 (Single-Agent Safety):</strong> To directly link architectural choices to potential safety failures. A model's lack of transparency or tendency to 'game' its reward function begins with the design of its core components.", |
| technicalRefs: [{title: "'Attention Is All You Need'", relevance: "the primary source paper."}, {title: "'The Illustrated Transformer'", relevance: "providing clear, visual intuition."}], |
| miniProject: "<strong>Goal:</strong> To deconstruct the 'magic' of the Transformer into understandable code. <strong>Relevance:</strong> By building the core block, students see firsthand how the concepts of 'query,' 'key,' and 'value' are not just technical terms but metaphors for a particular way of processing information.", |
| question: "How does the Transformer architecture, with its parallelized self-attention mechanism, embody a specific 'way of revealing' the world? In what sense is designing a neural architecture an act of 'conceptual design' that shapes reality?" }, |
| { week: 4, module: 1, theme: "The Engine Room: GPUs, Kernels, and Efficiency", |
| synopsis: "This week moves down the stack from the abstract architecture (Week 3) to the physical and computational reality of GPUs and custom kernels. We explore the relentless drive for efficiency as a manifestation of Heidegger's 'challenging-forth' and contrast it with Schumacher's call for human-scale technology. This focus on efficiency and complexity sets the stage for Week 5's discussion on distributed systems.", |
| philosophy: "<strong>Heidegger on 'challenging-forth':</strong> To see the optimization of code for hardware as a perfect example of demanding that nature (in this case, silicon) yield its maximum output. <strong>Schumacher's 'Small is Beautiful':</strong> To ask critical questions about whether this hyper-efficiency serves human ends or alienates us from our tools.", |
| safety: "<strong>'Normal Accidents' & High-Reliability Organizations:</strong> To introduce systems-level thinking about safety. The complexity of modern GPU programming and kernel interactions creates conditions ripe for 'normal accidents'—failures that are an inherent property of the system itself.", |
| technicalRefs: [{title: "Triton Tutorial", relevance: "hands-on experience with performance engineering."}, {title: "FlashAttention Paper", relevance: "understanding the state-of-the-art."}], |
| miniProject: "<strong>Goal:</strong> To understand the trade-offs between performance, complexity, and readability in low-level code. <strong>Relevance:</strong> This lab demonstrates that 'efficiency' is not a neutral good; it comes at the cost of increased complexity and potential for new, unexpected failure modes.", |
| question: "The pursuit of kernel optimization is a clear example of 'challenging-forth.' How does this relentless drive for efficiency align or conflict with Schumacher's call for human-centered work? Can we apply principles of high-reliability organizations to AI software development?" }, |
| { week: 5, module: 1, theme: "Parallel Worlds: Distributed Training", |
| synopsis: "This week concludes Module 1 by scaling up from a single machine (Week 4) to massive, distributed systems. We connect the technical challenges of parallelism to the philosophical concept of emergence and the organizational challenges of managing complex, high-risk projects. This provides a perfect bridge to Module 2, which will examine the 'substance'—the data—that flows through these massive systems.", |
| philosophy: "<strong>Floridi on the 'primacy of interactions':</strong> To understand a distributed system not as a collection of nodes, but as a web of interactions, where the system's properties emerge from these relations. <strong>Complex Systems Theory:</strong> To provide a formal language for discussing concepts like emergence and feedback loops.", |
| safety: "<strong>AI Safety Book on Organizational Risks:</strong> To shift the focus from single-model failures to failures in the human systems that build them. Race dynamics and diffusion of responsibility are emergent properties of the organizational 'complex system'.", |
| technicalRefs: [{title: "PyTorch Distributed Overview", relevance: "practical tools for multi-GPU training."}, {title: "Hugging Face Distributed Guide", relevance: "high-level strategies for distributed setups."}], |
| miniProject: "<strong>Goal:</strong> To experience the challenges of coordinating multiple agents. <strong>Relevance:</strong> This lab makes abstract concepts like 'communication overhead' and 'synchronization' concrete, providing a technical metaphor for the organizational challenges of large teams.", |
| question: "Distributed training creates a complex system of interacting agents (GPUs/nodes). How do the properties of complex systems (e.g., emergence, feedback loops) apply to the behavior of both the training process and the organizations that manage them?" }, |
| { week: 6, module: 2, theme: "Data as World: The Ethics of Scraping", |
| synopsis: "Kicking off Module 2, we turn to the 'fuel' of AI: data. Building on Module 1's analysis of the 'engine,' we now question the substance it processes. We contrast the Heideggerian view of the web as a 'resource' to be scraped with Floridi's view of it as an 'environment' to be protected and Setia's view of it as a 'text' to be read with care. This lays the groundwork for Week 7's analysis of how we evaluate models trained on this data.", |
| philosophy: "<strong>Heidegger on 'standing-reserve':</strong> To frame data scraping as the ultimate act of turning the world's collective expression into a resource. <strong>Floridi on 'information entropy':</strong> To see data pollution and low-quality content as an environmental problem. <strong>Adi Setia on 'Science as Adab':</strong> To propose an alternative ethic of data collection based on care, respect, and the search for meaning.", |
| safety: "<strong>AI Safety Book on Malicious Use:</strong> To highlight how the data collection process itself creates vulnerabilities. Data poisoning is a direct attack on the integrity of the 'substance' the model learns from.", |
| technicalRefs: [{title: "Hugging Face Datasets", relevance: "providing tools for data processing."}, {title: "'Stochastic Parrots' paper", relevance: "the seminal critique of uncurated web datasets."}], |
| miniProject: "<strong>Goal:</strong> To confront the messy reality of web-scale data. <strong>Relevance:</strong> This lab forces students to make ethical choices about filtering, moving the discussion from abstract principles to concrete decisions with real consequences for the final model.", |
| question: "When we scrape the internet, are we harvesting a 'resource' (Heidegger), polluting an 'environment' (Floridi), or misreading a 'text' (Setia)? What ethical frameworks should guide our data filtering and deduplication choices?" }, |
| { week: 7, module: 2, theme: "The Problem of Truth: Evaluation and Benchmarks", |
| synopsis: "After collecting data in Week 6, we now ask: how do we know if the model has 'learned' anything true or useful? This week critiques the practice of benchmarking, questioning whether it measures genuine understanding or merely sophisticated mimicry. This technical discussion of evaluation is the perfect context for a philosophical discussion on the nature of truth and meaning, setting up Week 8's focus on how models act in the real world.", |
| philosophy: "<strong>Floridi on 'information quality':</strong> To provide a framework for evaluating data that goes beyond simple accuracy to include relevance, timeliness, and appropriateness. <strong>Langer on the limits of discursive logic:</strong> To argue that benchmarks, being purely discursive, can never capture the full spectrum of understanding.", |
| safety: "<strong>AI Safety Book on Technical Limitations & Emergent Capabilities:</strong> To show how models can achieve high benchmark scores while still being vulnerable to adversarial attacks or exhibiting unpredictable 'emergent' skills not measured by the evaluation suite.", |
| technicalRefs: [{title: "MMLU Paper", relevance: "understanding a key modern benchmark."}, {title: "GLUE Paper", relevance: "understanding the foundation of multi-task evaluation."}], |
| miniProject: "<strong>Goal:</strong> To develop a critical eye for evaluation metrics. <strong>Relevance:</strong> By performing an error analysis, students move beyond a single performance number and gain a qualitative understanding of a model's strengths and weaknesses, revealing the limitations of the benchmark itself.", |
| question: "Do benchmarks like MMLU truly measure 'understanding,' or do they measure performance on a narrow, discursive task? How does the concept of 'information quality' challenge the validity of benchmarks trained on unfiltered web data?" }, |
| { week: 8, module: 2, theme: "Inference and Embodiment: The Model Meets the World", |
| synopsis: "This week focuses on the moment of deployment: inference. We connect the technical drive for optimization (quantization, etc.) to the real-world pressures of 'AI race dynamics'. This provides a concrete setting to discuss the philosophical difference between a model's disembodied 'onlife' existence (Floridi) and human embodied 'being-there' (Heidegger), leading into Week 9's exploration of what's happening 'inside' the model.", |
| philosophy: "<strong>Floridi on 'onlife':</strong> To describe the blended reality where models and humans interact. <strong>Heidegger on 'Dasein':</strong> To contrast the model's mode of existence with human 'being-in-the-world', which is always embodied, situated, and concerned.", |
| safety: "<strong>AI Safety Book on Race Dynamics:</strong> To show how the pressure to deploy quickly (and thus the need for fast inference) can lead to cutting corners on safety, creating a direct link between technical optimization and societal risk.", |
| technicalRefs: [{title: "PyTorch Quantization", relevance: "providing tools for inference optimization."}, {title: "Hugging Face Optimum", relevance: "a high-level library for optimization."}], |
| miniProject: "<strong>Goal:</strong> To understand that performance is not a single number but a spectrum of trade-offs. <strong>Relevance:</strong> This lab forces a direct confrontation with an ethical dilemma: is a slightly less accurate but much faster and more accessible model 'better'? The answer depends on the context of use.", |
| question: "Inference is where the model acts in the world. How does this 'onlife' interaction differ from human embodied 'being-there'? How does the pressure for faster inference speed contribute to race dynamics and the deployment of poorly understood systems?" }, |
| { week: 9, module: 2, theme: "The Black Box: Interpretability and Meaning", |
| synopsis: "Having seen the model's external behavior (Weeks 7-8), we now try to look inside. This week dives into the technical field of mechanistic interpretability. We connect the search for 'circuits' in the model to the philosophical question of whether we can ever fully 'explain' a complex system, or if there will always be an 'ineffable' quality. This sets the stage for Week 10, where we examine the model's creative, or generative, outputs.", |
| philosophy: "<strong>Langer on the 'ineffable':</strong> To question whether the meaning of a complex system can be fully captured by a discursive explanation. <strong>Adi Setia on inner/outer realities:</strong> To provide a powerful metaphor for thinking about a model's hidden states versus its observable behavior.", |
| safety: "<strong>'Risks from Learned Optimization':</strong> To introduce the advanced safety concern of deceptive alignment, where a model might be intentionally hiding its true goals. This makes the technical project of interpretability a crucial component of safety.", |
| technicalRefs: [{title: "Nanda's M-I tutorials", relevance: "a concrete starting point for the field."}, {title: "Olah's 'Circuits'", relevance: "the foundational work on the circuits paradigm."}], |
| miniProject: "<strong>Goal:</strong> To practice the scientific method within the context of interpretability. <strong>Relevance:</strong> This lab moves students from being users of models to being scientists of models, fostering a mindset of curiosity and critical examination.", |
| question: "Can mechanistic interpretability ever fully explain a model's behavior, or will there always be an 'ineffable' quality, as Langer suggests for art? How does the Islamic concept of inner/outer reality provide a metaphor for hidden states in a neural network?" }, |
| { week: 10, module: 2, theme: "Generative Acts: The Symbolism of AI", |
| synopsis: "This week concludes Module 2 by focusing on the most spectacular output of modern AI: generative art and text. Building on Week 9's internal focus, we now analyze the external symbols the model creates. We use Langer's philosophy to ask deep questions about the meaning of these symbols, providing a perfect transition to Module 3, which will focus on how we can 'align' these outputs with human values.", |
| philosophy: "<strong>Langer on 'forms of feeling':</strong> To provide a rich framework for analyzing art that goes beyond aesthetics to its symbolic function. <strong>Floridi on 'digital ectypes':</strong> To ask whether AI-generated art is a genuine new form or merely a hollow copy of human creativity.", |
| safety: "<strong>AI Safety Book on 'Beneficial AI':</strong> To connect the act of generation to the problem of value alignment. How do we ensure that what the model generates is truly 'beneficial' or 'good' for humanity?", |
| technicalRefs: [{title: "Hugging Face Diffusers", relevance: "hands-on experience with image generation models."}, {title: "Latent Diffusion Paper", relevance: "the theory behind modern diffusion models."}], |
| miniProject: "<strong>Goal:</strong> To move from technical analysis to aesthetic and philosophical reflection. <strong>Relevance:</strong> This project forces students to use the philosophical language of the course to analyze their own technical creation, directly bridging the two domains.", |
| question: "Using Langer's framework, what 'feeling' does your generated artifact symbolize? Is it an authentic symbol or a hollow 'ectype' (Floridi)? What does it mean for an AI to create a presentational symbol without a life of feeling to present?" }, |
| { week: 11, module: 3, theme: "Alignment I: Following Instructions", |
| synopsis: "Kicking off the final module on control, this week tackles the core problem of alignment through the lens of instruction following (SFT and RLHF). We critique this approach by asking if it teaches 'values' or merely 'pleasing behavior,' contrasting it with a richer, virtue-based model of 'right action' from Setia. This sets up Week 12's discussion on scale, as alignment becomes harder as models become more powerful.", |
| philosophy: "<strong>Floridi on specifying principles:</strong> To highlight the immense difficulty of capturing human values in a set of instructions or a reward function. <strong>Adi Setia on 'adab':</strong> To offer a non-Western model of alignment based on cultivating a virtuous internal disposition rather than simply rewarding external behavior.", |
| safety: "<strong>Bostrom on Instrumental Convergence & Power-Seeking:</strong> To explain why a poorly specified goal can be dangerous. An instruction-following model might seek power not because it is malicious, but as an instrumentally convergent strategy to better follow its instructions.", |
| technicalRefs: [{title: "RLHF paper (Ziegler et al.)", relevance: "the foundational paper on the dominant alignment paradigm."}, {title: "TRLx Library", relevance: "a practical library for implementation."}], |
| miniProject: "<strong>Goal:</strong> To understand the basics of instruction tuning. <strong>Relevance:</strong> This lab provides a hands-on understanding of the dominant alignment paradigm, allowing students to critique it from an informed technical perspective.", |
| question: "Is RLHF simply teaching a model to produce pleasing outputs, or is it instilling values? How does the Islamic concept of *adab* offer a different model for alignment, one based on internal disposition rather than external reward?" }, |
| { week: 12, module: 3, theme: "The Question of Scale", |
| synopsis: "This week directly confronts the dominant ideology of the AI field: that 'bigger is better.' We examine the technical reality of scaling laws, but critique them using Schumacher's philosophy of appropriate scale. This challenges the assumption that scaling is the only path forward, connecting directly to Week 11's alignment problem (as scale makes alignment harder) and setting up Week 13's focus on advanced reasoning and safety.", |
| philosophy: "<strong>Schumacher's 'Buddhist Economics':</strong> To provide a framework for technology that prioritizes human well-being over abstract growth. <strong>Adi Setia on moderation:</strong> To offer a theological basis for the virtue of avoiding extremes, including the extreme of scale.", |
| safety: "<strong>AI Safety Book on Collective Action Problems:</strong> To frame the race to scale as a classic 'tragedy of the commons' or 'arms race,' where the rational action for each individual lab leads to a potentially catastrophic outcome for all.", |
| technicalRefs: [{title: "Scaling Laws Paper (Kaplan et al.)", relevance: "the original scientific evidence for scaling."}, {title: "Chinchilla Paper (Hoffmann et al.)", relevance: "the research that refined our understanding of optimal scaling."}], |
| miniProject: "<strong>Goal:</strong> To empirically 'discover' a scaling law. <strong>Relevance:</strong> By seeing the relationship between size, data, and performance firsthand, students gain a powerful intuition for why scaling is so alluring, which makes the philosophical critiques more potent.", |
| question: "Are scaling laws an inevitable law of nature, or a choice reflecting a 'bigger is better' ideology? Using Schumacher, design a proposal for an 'Appropriate AI' for a specific community need. How does this conflict with the logic of scaling?" }, |
| { week: 13, module: 3, theme: "Alignment II: Safety and Reasoning", |
| synopsis: "Building on Week 12's theme of scale, this week examines the powerful 'reasoning' capabilities that emerge in large models. We connect the technical methods for eliciting this reasoning (e.g., DPO) to the philosophical distinction between mere calculation (Heidegger) and true understanding (Langer). This leads directly into Week 14's discussion on how to govern these increasingly powerful systems.", |
| philosophy: "<strong>Heidegger on calculative vs. meditative thinking:</strong> To ask whether models that solve math problems are 'thinking' or just performing complex calculations. <strong>Langer on rationality vs. logic:</strong> To distinguish between the formal application of rules (logic) and the flexible, context-aware process of human reason.", |
| safety: "<strong>Anthropic's 'Responsible Scaling Policy' & Constitutional AI:</strong> To examine a concrete attempt by a frontier lab to manage the risks that come with scaled-up reasoning capabilities, providing a real-world governance case study.", |
| technicalRefs: [{title: "DPO Paper (Rafailov et al.)", relevance: "the cutting edge of alignment techniques."}, {title: "Constitutional AI Paper (Bai et al.)", relevance: "a novel approach to instilling values."}], |
| miniProject: "<strong>Goal:</strong> To experience a more advanced alignment technique. <strong>Relevance:</strong> DPO is a simpler yet powerful alternative to RLHF. Implementing it provides insight into the fast-moving nature of the alignment field.", |
| question: "Does teaching an AI to solve math problems equate to teaching it to 'reason'? How does this 'calculative thinking' (Heidegger) differ from human understanding? How do corporate safety policies attempt to manage the risks of these powerful reasoning capabilities?" }, |
| { week: 14, module: 3, theme: "Governing the Future", |
| synopsis: "This penultimate week synthesizes the entire course by focusing on governance. We compare and contrast different models of governance, each one rooted in one of the course's key philosophers (Floridi's stewardship, Setia's trusteeship, Schumacher's localism). This provides a comprehensive framework for students to analyze real-world policies and prepares them for their final capstone presentations in Week 15.", |
| philosophy: "<strong>Floridi on governing the Infosphere, Setia on *khilāfa* (trusteeship), Schumacher on decentralization:</strong> To provide three distinct, powerful, and philosophically-grounded models for how we might approach the problem of AI governance.", |
| safety: "<strong>National & International Governance Policies:</strong> To ground the abstract philosophical models in the concrete reality of existing and proposed legislation like the EU AI Act and the US AI Executive Order.", |
| technicalRefs: [{title: "The EU AI Act (Full Text)", relevance: "understanding the world's first comprehensive AI law."}, {title: "The US AI Executive Order (Full Text)", relevance: "understanding a different, standards-based approach."}], |
| miniProject: "<strong>Goal:</strong> To develop skills in policy analysis and argumentation. <strong>Relevance:</strong> This non-coding project forces students to translate their technical and philosophical understanding into the language of policy, a crucial skill for having real-world impact.", |
| question: "Compare four models of AI governance: Risk Management (AI Safety Book), Ecological Stewardship (Floridi), Theocentric Stewardship (Setia), and Decentralized Localism (Schumacher). Which model best addresses the 'greatest danger' identified by Heidegger?" }, |
| { week: 15, module: 3, theme: "Capstone Presentations & The Free Relationship", |
| synopsis: "The final week is a synthesis and a look forward. Students present their capstone projects, demonstrating their ability to integrate the technical, philosophical, and ethical dimensions of the course. The final reading from Heidegger on the 'saving power' of technology provides a hopeful, forward-looking conclusion, asking how we might move from a relationship of danger to one of freedom and stewardship.", |
| philosophy: "<strong>Heidegger on 'The Turning':</strong> To argue that the 'saving power' lies in recognizing the danger of Enframing. By understanding technology's essence, we can achieve a 'free relationship' with it, using it without being consumed by its worldview.", |
| safety: "<strong>Course Synthesis & Career Paths:</strong> To discuss how the concepts learned in the course can be applied to careers in technical AI safety, policy, or further academic research.", |
| technicalRefs: [], |
| miniProject: "<strong>Goal:</strong> To synthesize the entire course's learning into a single, coherent project. <strong>Relevance:</strong> The capstone is the ultimate demonstration of a student's ability to be a 'wise technologist,' capable of both building and critiquing.", |
| question: "How can we, as technologists and thinkers, move from being 'chained to technology' to developing a 'free relationship' with it? What does it mean to practice AI development as a form of 'poiesis' (a gentle bringing-forth) rather than 'challenging-forth'?" }, |
| ]; |
| |
| const comparisonData = { |
| labels: ['Technical Depth', 'Ethics Integration', 'Philosophical Foundation', 'Hands-on Practice', 'Safety/Gov. Focus'], |
| 'Proposed Syllabus': { data: [4, 5, 5, 4, 5], desc: "A unique synthesis of deep technical work, foundational philosophical critique, and integrated safety/governance principles.", color: '#A47854' }, |
| 'Stanford CS336': { data: [5, 2, 1, 5, 2], desc: "Extremely deep, hands-on software engineering course focused on building LLMs from scratch. Ethics and safety are peripheral.", color: '#455A64' }, |
| 'USC IDSN-544': { data: [3, 4, 3, 4, 3], desc: "Excellent integration of model building (using high-level libraries) with societal impact analysis, but with a contemporary rather than deep philosophical focus.", color: '#4CAF50' }, |
| 'AI Safety Book Curriculum': { data: [2, 5, 2, 1, 5], desc: "A comprehensive theoretical overview of catastrophic risks and governance. Lacks hands-on technical implementation.", color: '#7E57C2' }, |
| }; |
| |
| const assessmentData = { |
| labels: ['Technical Labs', 'Philosophical Memos', 'Seminar Leadership', 'Capstone Project'], |
| datasets: [{ |
| data: [20, 30, 15, 35], |
| backgroundColor: ['#455A64', '#4CAF50', '#7E57C2', '#A47854'], |
| borderColor: '#FDFBF8', |
| borderWidth: 4, |
| }] |
| }; |
| |
| function renderFrameworks() { |
| const container = document.querySelector('#framework .grid'); |
| container.innerHTML = philosophicalFrameworks.map((fw, index) => ` |
| <div class="framework-card bg-white rounded-xl shadow-lg p-6 text-center cursor-pointer transition-transform transform hover:-translate-y-1" data-index="${index}"> |
| <h3 class="text-xl font-bold">${fw.name}</h3> |
| <p class="text-[#A47854] font-semibold mt-1">${fw.concept}</p> |
| <p class="mt-3 text-sm text-[#6B5E53]">${fw.summary}</p> |
| </div> |
| `).join(''); |
| } |
| |
| function renderSyllabus(filter = 'all') { |
| const grid = document.getElementById('syllabus-grid'); |
| grid.innerHTML = syllabusData.map(week => { |
| const moduleClassBg = `module-${week.module}-bg`; |
| const moduleClassText = `module-${week.module}-text`; |
| const isFiltered = filter === 'all' || week.philosophy.includes(filter); |
| return ` |
| <div class="week-card rounded-lg p-4 border-2 border-transparent ${moduleClassBg} ${isFiltered ? 'opacity-100' : 'opacity-30'} transition-opacity duration-300 cursor-pointer" data-week="${week.week}"> |
| <p class="font-bold text-sm ${moduleClassText}">WEEK ${week.week}</p> |
| <h4 class="font-semibold mt-1 text-[#3D352E]">${week.theme}</h4> |
| </div> |
| `; |
| }).join(''); |
| } |
| |
| function updateSyllabusModal(weekNumber) { |
| const week = syllabusData.find(w => w.week === weekNumber); |
| const container = document.getElementById('syllabus-modal-content'); |
| const moduleClassText = `module-${week.module}-text`; |
| |
| container.innerHTML = ` |
| <button id="syllabus-modal-close" class="absolute top-4 right-6 text-gray-500 hover:text-gray-800 text-3xl z-10">×</button> |
| <div class="mb-6"> |
| <p class="font-bold text-lg ${moduleClassText}">WEEK ${week.week}</p> |
| <h3 class="text-3xl md:text-4xl font-bold text-[#3D352E]">${week.theme}</h3> |
| <p class="text-sm ${moduleClassText} font-semibold mt-1">MODULE ${week.module}</p> |
| </div> |
| |
| <div class="bg-[#F8F5F2] p-4 rounded-lg mb-6"> |
| <h5 class="text-lg font-semibold mb-2">Weekly Synopsis</h5> |
| <p class="text-sm text-gray-700">${week.synopsis}</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6"> |
| <div> |
| <h5 class="text-xl font-semibold mb-3">Reading & Resource List</h5> |
| <div class="space-y-4 text-sm"> |
| <div class="detail-item"> |
| <h6 class="font-bold text-gray-500 uppercase tracking-wider">Philosophy & Theory</h6> |
| <p class="mt-1 text-gray-800">${week.philosophy}</p> |
| </div> |
| <div class="detail-item"> |
| <h6 class="font-bold text-gray-500 uppercase tracking-wider">Safety & Governance</h6> |
| <p class="mt-1 text-gray-800">${week.safety}</p> |
| </div> |
| ${week.technicalRefs.length > 0 ? ` |
| <div class="detail-item"> |
| <h6 class="font-bold text-gray-500 uppercase tracking-wider">Technical References</h6> |
| <p class="mt-1 text-gray-800">${week.technicalRefs.map(r => `<strong>${r.title}:</strong> ${r.relevance}`).join('<br>')}</p> |
| </div>` : ''} |
| </div> |
| </div> |
| <div> |
| <h5 class="text-xl font-semibold mb-3">Weekly Mini-Project</h5> |
| <div class="bg-white p-4 rounded-lg shadow-sm text-sm"> |
| <p>${week.miniProject}</p> |
| </div> |
| <div class="mt-6"> |
| <h5 class="text-xl font-semibold mb-3">Integrated Discussion Question</h5> |
| <div class="bg-white border-l-4 border-[#A47854] p-4 rounded-r-lg text-sm shadow-sm"> |
| <p class="italic text-gray-800">"${week.question}"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| document.getElementById('syllabus-modal-close').addEventListener('click', closeSyllabusModal); |
| } |
| |
| let comparisonChart; |
| function renderComparisonChart(selectedCourse) { |
| const ctx = document.getElementById('comparisonChart').getContext('2d'); |
| const datasets = [ |
| { |
| label: 'Proposed Syllabus', |
| data: comparisonData['Proposed Syllabus'].data, |
| backgroundColor: 'rgba(164, 120, 84, 0.2)', |
| borderColor: 'rgba(164, 120, 84, 1)', |
| pointBackgroundColor: 'rgba(164, 120, 84, 1)', |
| pointBorderColor: '#fff', |
| pointHoverBackgroundColor: '#fff', |
| pointHoverBorderColor: 'rgba(164, 120, 84, 1)', |
| borderWidth: 2, |
| }, |
| { |
| label: selectedCourse, |
| data: comparisonData[selectedCourse].data, |
| backgroundColor: 'rgba(69, 90, 100, 0.2)', |
| borderColor: 'rgba(69, 90, 100, 1)', |
| pointBackgroundColor: 'rgba(69, 90, 100, 1)', |
| pointBorderColor: '#fff', |
| pointHoverBackgroundColor: '#fff', |
| pointHoverBorderColor: 'rgba(69, 90, 100, 1)', |
| borderWidth: 2, |
| } |
| ]; |
| |
| if (comparisonChart) { |
| comparisonChart.data.datasets = datasets; |
| comparisonChart.update(); |
| } else { |
| comparisonChart = new Chart(ctx, { |
| type: 'radar', |
| data: { |
| labels: comparisonData.labels, |
| datasets: datasets |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { legend: { position: 'top' }, tooltip: { callbacks: { label: (c) => `${c.dataset.label||''}: ${c.raw}` } } }, |
| scales: { r: { angleLines: { color: 'rgba(61, 53, 46, 0.1)' }, grid: { color: 'rgba(61, 53, 46, 0.1)' }, pointLabels: { font: { size: 12, family: 'Inter' }, color: '#3D352E' }, suggestedMin: 0, suggestedMax: 5, ticks: { stepSize: 1, backdropColor: 'rgba(253, 251, 248, 0.75)' } } } |
| } |
| }); |
| } |
| |
| const descContainer = document.getElementById('comparison-text'); |
| descContainer.innerHTML = `<p><strong>Proposed Syllabus:</strong> ${comparisonData['Proposed Syllabus'].desc}</p><p><strong>${selectedCourse}:</strong> ${comparisonData[selectedCourse].desc}</p>`; |
| } |
| |
| function renderAssessmentChart() { |
| const ctx = document.getElementById('assessmentChart').getContext('2d'); |
| new Chart(ctx, { |
| type: 'doughnut', |
| data: assessmentData, |
| options: { |
| responsive: true, maintainAspectRatio: false, cutout: '60%', |
| plugins: { legend: { position: 'bottom', labels: { padding: 20, font: { size: 12, family: 'Inter' }, color: '#3D352E' } }, tooltip: { callbacks: { label: (c) => `${c.label||''}: ${c.raw}%` } } } |
| } |
| }); |
| } |
| |
| const modalContainer = document.getElementById('modal-container'); |
| const modalContent = modalContainer.querySelector('.modal-content'); |
| const modalClose = document.getElementById('modal-close'); |
| const modalTitle = document.getElementById('modal-title'); |
| const modalSubtitle = document.getElementById('modal-subtitle'); |
| const modalBody = document.getElementById('modal-body'); |
| |
| function openModal(index) { |
| const fw = philosophicalFrameworks[index]; |
| modalTitle.textContent = fw.name; |
| modalSubtitle.textContent = fw.concept; |
| modalBody.innerHTML = fw.details; |
| modalContainer.classList.remove('hidden'); |
| modalContainer.classList.add('flex'); |
| setTimeout(() => { modalContent.classList.remove('scale-95', 'opacity-0'); modalContent.classList.add('scale-100', 'opacity-100'); }, 10); |
| } |
| |
| function closeModal() { |
| modalContent.classList.add('scale-95', 'opacity-0'); |
| modalContent.classList.remove('scale-100', 'opacity-100'); |
| setTimeout(() => { modalContainer.classList.add('hidden'); modalContainer.classList.remove('flex'); }, 200); |
| } |
| |
| const syllabusModalContainer = document.getElementById('syllabus-modal-container'); |
| const syllabusModalContent = syllabusModalContainer.querySelector('.modal-content'); |
| |
| function openSyllabusModal(weekNumber) { |
| updateSyllabusModal(weekNumber); |
| syllabusModalContainer.classList.remove('hidden'); |
| syllabusModalContainer.classList.add('flex'); |
| setTimeout(() => { syllabusModalContent.classList.remove('scale-95', 'opacity-0'); syllabusModalContent.classList.add('scale-100', 'opacity-100'); }, 10); |
| } |
| |
| function closeSyllabusModal() { |
| syllabusModalContent.classList.add('scale-95', 'opacity-0'); |
| syllabusModalContent.classList.remove('scale-100', 'opacity-100'); |
| setTimeout(() => { syllabusModalContainer.classList.add('hidden'); syllabusModalContainer.classList.remove('flex'); }, 200); |
| } |
| |
| document.querySelector('#framework').addEventListener('click', (e) => { const c = e.target.closest('.framework-card'); if (c) openModal(parseInt(c.dataset.index)); }); |
| modalClose.addEventListener('click', closeModal); |
| modalContainer.addEventListener('click', (e) => { if (e.target === modalContainer) closeModal(); }); |
| document.getElementById('syllabus-grid').addEventListener('click', (e) => { const c = e.target.closest('.week-card'); if(c) openSyllabusModal(parseInt(c.dataset.week)); }); |
| syllabusModalContainer.addEventListener('click', (e) => { if (e.target === syllabusModalContainer) closeSyllabusModal(); }); |
| document.getElementById('comparison-select').addEventListener('change', (e) => renderComparisonChart(e.target.value)); |
| document.querySelectorAll('.filter-btn').forEach(btn => btn.addEventListener('click', () => renderSyllabus(btn.dataset.filter))); |
| |
| const sections = document.querySelectorAll('section'); |
| const navLinks = document.querySelectorAll('.nav-link'); |
| const navbar = document.getElementById('navbar'); |
| |
| window.addEventListener('scroll', () => { |
| let current = ''; |
| sections.forEach(section => { if (pageYOffset >= section.offsetTop - 80) current = section.getAttribute('id'); }); |
| navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === `#${current}`) link.classList.add('active'); }); |
| if (window.pageYOffset > 50) navbar.classList.add('shadow-md'); else navbar.classList.remove('shadow-md'); |
| }); |
| |
| renderFrameworks(); |
| renderSyllabus(); |
| renderComparisonChart(document.getElementById('comparison-select').value); |
| renderAssessmentChart(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=webdevsha/aies" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
