From bf15f3002cff53045e0e031df6fa45bc4112b4bd Mon Sep 17 00:00:00 2001 From: Joep Meindertsma Date: Mon, 13 Jan 2025 09:51:41 +0100 Subject: [PATCH 1/9] Supply chain diagram --- src/lib/components/SupplyChain.svelte | 581 +++++++++++++++++++++++++ src/posts/building-the-pause-button.md | 38 +- 2 files changed, 614 insertions(+), 5 deletions(-) create mode 100644 src/lib/components/SupplyChain.svelte diff --git a/src/lib/components/SupplyChain.svelte b/src/lib/components/SupplyChain.svelte new file mode 100644 index 000000000..f5d85b380 --- /dev/null +++ b/src/lib/components/SupplyChain.svelte @@ -0,0 +1,581 @@ + + + +
+
+

AI Chip Supply Chain

+

Click on any node to learn more about its role in the supply chain.

+
+ +
+ + + + + + + + {#each edges as [start, end]} + {@const points = calculateConnectionPoints(nodes[start], nodes[end])} + + {/each} + + + {#each Object.values(nodes) as node} +
handleNodeClick(node.id)} + on:keydown={(event) => { + if (event.key === 'Enter' || event.key === ' ') { + handleNodeClick(node.id) + } + }} + role="button" + tabindex="0" + > + {node.label} +
+ {/each} +
+ + + {#if selectedNode && nodeInfo[selectedNode]} + + {/if} + +
+
+
+ Lithography +
+
+
+ Foundry +
+
+
+ Chip Design +
+
+
+ Assembly +
+
+
+ AI Labs +
+
+
+ + diff --git a/src/posts/building-the-pause-button.md b/src/posts/building-the-pause-button.md index bf0b4184b..95663f681 100644 --- a/src/posts/building-the-pause-button.md +++ b/src/posts/building-the-pause-button.md @@ -3,12 +3,18 @@ title: Building the Pause Button description: What would an AI Pause look like? How do you continue to actually prevent a superintelligence from being created? --- + + If we allow the creation of a superintelligent AI, we are [risking every single life on earth](/xrisk). When we're talking about a Pause, we're talking about [implementing an international ban on the creation of a superintelligent AI](/proposal). Some argue that it's too early to press the Pause Button (we [don't](/urgency)), but most experts seem to agree that it may be good to pause if developments go too fast. But as of now _we do not have a Pause Button_. So we should start thinking about how this would work, and how we can implement it. +_This document is a work in progress, being updated by the AISC "Building the Pause Button" team._ + ## The Race: why we need international cooperation We do not expect any single country to be able to implement a Pause. @@ -43,6 +49,8 @@ This is great news for governance. Through the hardware, we can regulate the training runs. Let's take a dive into the various choke points in the AI chip supply chain. + + #### Silicon wafers: Shin-Etsu, Sumco, Siltronic #### Lithography: ASML & SMEE @@ -70,11 +78,6 @@ ASML's EUV machines use mirrors and lenses made by the German company Zeiss. In 2016, ASML [bought](https://optics.org/news/7/11/11) a 25% stake in Zeiss, and the two companies have a very close relationship. It is likely that no other company is able to produce these optics. -#### Interconnect & Packaging: ASE - -When a chip die exits a fab, it needs to be "packaged". -ASE is probably the largest interconnect company for AI chips. - #### Fabrication: TSMC, Samsung amd SMIC Building a "fab" (a chip factory) is astonishingly difficult: it has zero-tolerance for dust particles, requires the most expensive high-tech equipment, and has a very complex supply chain. @@ -93,6 +96,19 @@ and is now able to produce 7nm AI chips (about three years behind the 4nm proces AI chips require a lot of HBMs (High Bandwidth Memory), which is the most advanced memory type. Only a few companies can produce them. +#### Probe machines + +Probe machines are used to test the chips after they are manufactured. + +#### Testing: Advantest, Teradyne + +After the chips are packaged, they need to be tested. + +#### Interconnect & Packaging: ASE + +When a chip die exits a fab, it needs to be "packaged". +ASE is probably the largest interconnect company for AI chips. + #### AI Chip design: Nvidia, AMD, Intel, Google, Apple The most famous company names on this page are all chip designers. @@ -132,6 +148,14 @@ Other proposed methods include: An international insitution could be set up to monitor these verification methods, and to enforce the Pause. +## Roles of nations + +- **Taiwan**: has TSMC, the leading AI chip manufacturer. +- **Netherlands**: has ASML, the leading AI chip lithography manufacturer. Practically the only _true monopoly_ in the AI chip supply chain. Through export controls of EUV machines, the Netherlands can effectively control the AI chip supply chain. +- **Germany**: has Zeiss, the leading AI chip optics manufacturer. +- **China**: has SMIC and SMEE, which are getting closer to the leading edge of AI chip manufacturing. +- **USA**: leading in chip design with companies like Nvidia, AMD, Intel, Google, Apple. + ## Software Governance Physical chips are our primary focus, but we may also want to regulate _software_ used to train and run AI models. @@ -158,3 +182,7 @@ Software is just information - it can be copied and distributed very easily. Nonetheless, we have banned information before. Child pornography, for example, is illegal to make, illegal to distribute, and illegal to possess. The same enforcement mechanisms could be used to regulate dangerous AI software. + +## Recommendation + +- **Netherlands**: get ASML to From 167f929b68e90b7e0dfece96593b5cdea2d20b15 Mon Sep 17 00:00:00 2001 From: Joep Meindertsma Date: Tue, 14 Jan 2025 15:18:32 +0100 Subject: [PATCH 2/9] WIP supply chain --- src/lib/components/SupplyChain.svelte | 308 +++++++++++++++++--------- 1 file changed, 199 insertions(+), 109 deletions(-) diff --git a/src/lib/components/SupplyChain.svelte b/src/lib/components/SupplyChain.svelte index f5d85b380..76cea203f 100644 --- a/src/lib/components/SupplyChain.svelte +++ b/src/lib/components/SupplyChain.svelte @@ -3,9 +3,9 @@ interface Node { id: string label: string - x: number - y: number - category: 'raw' | 'litho' | 'fab' | 'design' | 'assembly' | 'end' + category: 'litho' | 'fab' | 'design' | 'assembly' | 'end' + x?: number + y?: number } interface NodeInfo { @@ -17,53 +17,90 @@ // Reactive state let selectedNode: string | null = null - // Node definitions - const nodes: Record = { - L1: { id: 'L1', label: 'ASML', x: 20, y: 30, category: 'litho' }, - L2: { id: 'L2', label: 'Zeiss', x: 20, y: 60, category: 'litho' }, - L3: { id: 'L3', label: 'SMEE', x: 20, y: 90, category: 'litho' }, - W1: { id: 'W1', label: 'TSMC', x: 40, y: 15, category: 'fab' }, - W2: { id: 'W2', label: 'Samsung', x: 40, y: 40, category: 'fab' }, - W3: { id: 'W3', label: 'Intel', x: 40, y: 65, category: 'fab' }, - D1: { id: 'D1', label: 'NVIDIA', x: 60, y: 25, category: 'design' }, - D2: { id: 'D2', label: 'AMD', x: 60, y: 50, category: 'design' }, - D3: { id: 'D3', label: 'Intel AI', x: 60, y: 75, category: 'design' }, - A1: { id: 'A1', label: 'Foxconn', x: 80, y: 35, category: 'assembly' }, - A2: { id: 'A2', label: 'ASE Group', x: 80, y: 65, category: 'assembly' }, - E1: { id: 'E1', label: 'Research Labs', x: 95, y: 30, category: 'end' }, - E2: { id: 'E2', label: 'Tech Companies', x: 95, y: 50, category: 'end' }, - E3: { id: 'E3', label: 'Universities', x: 95, y: 70, category: 'end' }, - W4: { id: 'W4', label: 'SMIC', x: 40, y: 90, category: 'fab' }, - D4: { id: 'D4', label: 'Huawei', x: 60, y: 90, category: 'design' } + // Define column positions (as percentages) + const columns = { + litho: 15, + fab: 35, + design: 55, + assembly: 75, + end: 95 + } + + // Helper function to calculate y position based on index in category + function getYPosition(index: number, totalInCategory: number): number { + const spacing = 80 / (totalInCategory + 1) + return 10 + (index + 1) * spacing } + // First, define the nodes without initial positions + const nodes: Record = { + ASML: { id: 'ASML', label: 'ASML', category: 'litho' }, + ZEISS: { id: 'ZEISS', label: 'Zeiss', category: 'litho' }, + SMEE: { id: 'SMEE', label: 'SMEE', category: 'litho' }, + TSMC: { id: 'TSMC', label: 'TSMC', category: 'fab' }, + SAMSUNG: { id: 'SAMSUNG', label: 'Samsung', category: 'fab' }, + INTEL_FAB: { id: 'INTEL_FAB', label: 'Intel', category: 'fab' }, + SMIC: { id: 'SMIC', label: 'SMIC', category: 'fab' }, + NVIDIA: { id: 'NVIDIA', label: 'Nvidia', category: 'design' }, + AMD: { id: 'AMD', label: 'AMD', category: 'design' }, + GROQ: { id: 'GROQ', label: 'Groq', category: 'design' }, + INTEL: { id: 'INTEL', label: 'Intel', category: 'design' }, + CEREBRAS: { id: 'CEREBRAS', label: 'Cerebras', category: 'design' }, + HUAWEI: { id: 'HUAWEI', label: 'Huawei', category: 'design' }, + ASE: { id: 'ASE', label: 'ASE', category: 'assembly' }, + ASE_GROUP: { id: 'ASE_GROUP', label: 'ASE Group', category: 'assembly' }, + OPENAI: { id: 'OPENAI', label: 'OpenAI', category: 'end' }, + GOOGLE: { id: 'GOOGLE', label: 'Google', category: 'end' }, + META: { id: 'META', label: 'Meta', category: 'end' }, + XAI: { id: 'XAI', label: 'X.ai', category: 'end' } + } + + // Then group and position them + const nodesByCategory: Record = {} + Object.values(nodes).forEach((node) => { + if (!nodesByCategory[node.category]) { + nodesByCategory[node.category] = [] + } + nodesByCategory[node.category].push(node) + }) + + // Update node positions + Object.entries(nodesByCategory).forEach(([category, categoryNodes]) => { + categoryNodes.forEach((node, index) => { + node.x = columns[category as keyof typeof columns] + node.y = getYPosition(index, categoryNodes.length) + }) + }) + // Edge definitions const edges = [ - ['L1', 'W1'], - ['L1', 'W2'], - ['L1', 'W3'], - ['L2', 'L1'], - ['W1', 'D1'], - ['W1', 'D2'], - ['W2', 'D1'], - ['W2', 'D2'], - ['W3', 'D3'], - ['D1', 'A1'], - ['D1', 'A2'], - ['D2', 'A1'], - ['D2', 'A2'], - ['D3', 'A2'], - ['A1', 'E1'], - ['A1', 'E2'], - ['A2', 'E1'], - ['A2', 'E3'], - ['L3', 'W4'], - ['W4', 'D4'] + ['ASML', 'TSMC'], + ['ASML', 'SAMSUNG'], + ['ASML', 'INTEL_FAB'], + ['ZEISS', 'ASML'], + ['TSMC', 'NVIDIA'], + ['TSMC', 'AMD'], + ['TSMC', 'CEREBRAS'], + ['SAMSUNG', 'NVIDIA'], + ['SAMSUNG', 'AMD'], + ['SAMSUNG', 'GROQ'], + ['INTEL_FAB', 'INTEL'], + ['NVIDIA', 'ASE'], + ['NVIDIA', 'ASE_GROUP'], + ['AMD', 'ASE'], + ['AMD', 'ASE_GROUP'], + ['INTEL', 'ASE_GROUP'], + ['ASE', 'OPENAI'], + ['ASE', 'GOOGLE'], + ['ASE_GROUP', 'OPENAI'], + ['ASE_GROUP', 'META'], + ['SMEE', 'SMIC'], + ['SMIC', 'HUAWEI'] ] // Node information const nodeInfo: Record = { - L1: { + ASML: { title: 'ASML', description: 'Global monopoly in EUV lithography machines required for advanced chip manufacturing.', @@ -75,7 +112,7 @@ 'Subject to export controls from NL government' ] }, - L2: { + ZEISS: { title: 'Zeiss', description: "Exclusive provider of critical optical systems for ASML's EUV machines.", details: [ @@ -86,7 +123,7 @@ 'Essential for advanced chip manufacturing' ] }, - W1: { + TSMC: { title: 'TSMC (Taiwan Semiconductor)', description: "World's largest dedicated semiconductor foundry, specializing in advanced process nodes.", @@ -97,7 +134,7 @@ '~54% market share in foundry services' ] }, - W2: { + SAMSUNG: { title: 'Samsung Semiconductor', description: 'Major player in memory and logic chip manufacturing with advanced facilities.', details: [ @@ -107,7 +144,7 @@ '~17% foundry market share' ] }, - W3: { + INTEL_FAB: { title: 'Intel Foundry', description: 'Traditional CPU giant expanding into foundry services with IDM 2.0 strategy.', details: [ @@ -117,7 +154,7 @@ 'Focus on regaining technology leadership' ] }, - D1: { + NVIDIA: { title: 'NVIDIA', description: 'Leader in GPU design and AI accelerator chips.', details: [ @@ -127,7 +164,7 @@ 'Pioneered CUDA ecosystem' ] }, - D2: { + AMD: { title: 'AMD', description: 'Major chip designer competing in CPU, GPU, and AI accelerator markets.', details: [ @@ -137,7 +174,7 @@ 'ROCm software ecosystem' ] }, - D3: { + INTEL: { title: 'Intel AI', description: "Intel's dedicated AI chip design division.", details: [ @@ -147,7 +184,7 @@ 'OneAPI software platform' ] }, - A1: { + ASE: { title: 'Foxconn', description: "World's largest electronics manufacturer and assembler.", details: [ @@ -157,7 +194,7 @@ 'Handles final product assembly' ] }, - A2: { + ASE_GROUP: { title: 'ASE Group', description: "World's largest semiconductor packaging and testing provider.", details: [ @@ -167,38 +204,37 @@ 'Facilities in multiple countries' ] }, - E1: { - title: 'Research Labs', - description: - 'Dedicated AI research laboratories pushing the boundaries of artificial intelligence.', + OPENAI: { + title: 'OpenAI', + description: 'Leading AI research company focused on AGI development.', details: [ - 'Advanced AI model development', - 'Specialized research facilities', - 'High-performance computing clusters', - 'Focus on fundamental AI research' + 'Developed GPT-4, DALL-E', + 'Major compute infrastructure', + 'Partnership with Microsoft', + 'Focus on AI safety research' ] }, - E2: { - title: 'Tech Companies', - description: 'Commercial organizations developing and deploying AI solutions.', + GOOGLE: { + title: 'Google DeepMind', + description: 'Pioneer in AI research and large language models.', details: [ - 'Product-focused AI development', - 'Large-scale model training', - 'Applied AI research', - 'Commercial applications' + 'Developed Gemini, PaLM', + 'Massive TPU infrastructure', + 'Leading AI research lab', + 'Focus on multimodal AI' ] }, - E3: { - title: 'Universities', - description: 'Academic institutions conducting AI research and education.', + META: { + title: 'Meta AI', + description: 'Major AI research organization with open source focus.', details: [ - 'Academic research programs', - 'Student training facilities', - 'Collaborative research projects', - 'Theoretical and applied research' + 'Developed LLaMA models', + 'Large GPU clusters', + 'Open source contributions', + 'Focus on generative AI' ] }, - W4: { + SMIC: { title: 'SMIC (Semiconductor Manufacturing International Corporation)', description: "China's largest chip manufacturer, developing advanced process nodes.", details: [ @@ -209,7 +245,7 @@ 'Located in mainland China' ] }, - D4: { + HUAWEI: { title: 'Huawei', description: 'Chinese technology company developing AI chips through its HiSilicon division.', details: [ @@ -220,7 +256,7 @@ 'Major investments in AI development' ] }, - L3: { + SMEE: { title: 'SMEE (Shanghai Micro Electronics Equipment)', description: 'Chinese lithography equipment manufacturer developing DUV technology.', details: [ @@ -230,12 +266,36 @@ 'Cannot yet produce EUV machines', 'Significant government support' ] + }, + GROQ: { + title: 'Groq', + description: 'AI chip startup focusing on tensor processing units.', + details: [ + 'Developed LPU architecture', + 'Uses older 14nm process', + 'Claims superior inference speed', + 'Founded by former Google TPU lead' + ] + }, + CEREBRAS: { + title: 'Cerebras', + description: 'Developer of the largest AI chip in the world.', + details: ['Specialized for AI inference', 'Uses TSMC 5nm nodes'] + }, + XAI: { + title: 'X.ai', + description: 'New AI company developing large language models.', + details: [ + 'Developing Grok model', + 'Significant compute investment', + 'Focus on unrestricted AI', + 'Founded by Elon Musk' + ] } } // Category styling const categoryColors = { - raw: 'node-raw', litho: 'node-litho', fab: 'node-fab', design: 'node-design', @@ -245,20 +305,21 @@ // Calculate connection points on node edges function calculateConnectionPoints(startNode: Node, endNode: Node) { - // Node dimensions in percentages (the colored rectangle) - const nodeWidth = 2 // 50px in ~2500px container - - // Calculate vector between nodes - const dx = endNode.x - startNode.x - - // For this layout, we know connections are primarily horizontal - // Calculate intersection with vertical node borders - const startX = startNode.x + (dx > 0 ? nodeWidth / 2 : -nodeWidth / 2) - const startY = startNode.y - const endX = endNode.x + (dx > 0 ? -nodeWidth / 2 : nodeWidth / 2) - const endY = endNode.y - - return { startX, startY, endX, endY } + // Add default values if x/y are undefined + const startX = startNode.x ?? 0 + const startY = startNode.y ?? 0 + const endX = endNode.x ?? 0 + const endY = endNode.y ?? 0 + + const dx = endX - startX + const nodeWidth = 2 + + return { + startX: startX + (dx > 0 ? nodeWidth / 2 : -nodeWidth / 2), + startY, + endX: endX + (dx > 0 ? -nodeWidth / 2 : nodeWidth / 2), + endY + } } // Click handler function handleNodeClick(id: string) { @@ -276,6 +337,14 @@ closeModal() } } + + // Add this function to handle backdrop clicks + function handleBackdropClick(event: MouseEvent) { + // Only close if clicking the backdrop (dialog element), not its contents + if (event.target === event.currentTarget) { + closeModal() + } + } @@ -336,28 +405,30 @@ {#if selectedNode && nodeInfo[selectedNode]} - @@ -883,9 +333,9 @@ selectedEdge.target ]?.label || selectedEdge.target} - + {#if selectedEdge.description} {/if} {#if selectedEdge.links && selectedEdge.links.length > 0} -

Sources:

-
    - {#each selectedEdge.links as link} -
  • - {link} -
    • - {/each} -
+
+ Sources: + +
{/if} @@ -933,11 +385,44 @@ diff --git a/src/lib/components/supply-chain/data.ts b/src/lib/components/supply-chain/data.ts new file mode 100644 index 000000000..8377066b0 --- /dev/null +++ b/src/lib/components/supply-chain/data.ts @@ -0,0 +1,620 @@ +import type { Node, NodeInfo, Edge } from './types' + +export const nodes: Record = { + ASML: { id: 'ASML', label: 'ASML', category: 'litho' }, + ZEISS: { id: 'ZEISS', label: 'Zeiss', category: 'litho' }, + SMEE: { id: 'SMEE', label: 'SMEE', category: 'litho' }, + TSMC: { id: 'TSMC', label: 'TSMC', category: 'fab' }, + SAMSUNG: { id: 'SAMSUNG', label: 'Samsung', category: 'fab' }, + INTEL_FAB: { id: 'INTEL_FAB', label: 'Intel Foundry', category: 'fab' }, + SMIC: { id: 'SMIC', label: 'SMIC', category: 'fab' }, + NVIDIA: { id: 'NVIDIA', label: 'Nvidia', category: 'design' }, + AMD: { id: 'AMD', label: 'AMD', category: 'design' }, + GROQ: { id: 'GROQ', label: 'Groq', category: 'design' }, + INTEL: { id: 'INTEL', label: 'Intel AI', category: 'design' }, + CEREBRAS: { id: 'CEREBRAS', label: 'Cerebras', category: 'design' }, + HUAWEI: { id: 'HUAWEI', label: 'Huawei', category: 'design' }, + ASE: { id: 'ASE', label: 'ASE (Foxconn)', category: 'assembly' }, + ASE_GROUP: { id: 'ASE_GROUP', label: 'ASE Group', category: 'assembly' }, + AMKOR: { id: 'AMKOR', label: 'Amkor', category: 'assembly' }, + OPENAI: { id: 'OPENAI', label: 'OpenAI', category: 'end' }, + GOOGLE: { id: 'GOOGLE', label: 'Google AI', category: 'end' }, + META: { id: 'META', label: 'Meta AI', category: 'end' }, + XAI: { id: 'XAI', label: 'X.ai', category: 'end' }, + DEEPSEEK: { id: 'DEEPSEEK', label: 'Deepseek', category: 'end' } +} + +export const nodeInfo: Record = { + ASML: { + title: 'ASML', + description: + 'Global monopoly in EUV lithography machines required for advanced chip manufacturing.', + details: [ + 'Only manufacturer of EUV lithography machines', + 'Machines cost ~$200 million each', + 'EUV machines have remote kill-switch capability', + 'Critical choke point in AI chip supply chain', + 'Subject to export controls from NL government' + ] + }, + ZEISS: { + title: 'Zeiss', + description: "Exclusive provider of critical optical systems for ASML's EUV machines.", + details: [] + }, + TSMC: { + title: 'TSMC (Taiwan Semiconductor)', + description: + "World's largest dedicated semiconductor foundry, specializing in advanced process nodes.", + details: [ + 'Market leader in 3nm and 5nm processes', + 'Supplies to NVIDIA, AMD, Apple', + 'Located primarily in Taiwan', + '~54% market share in foundry services' + ] + }, + SAMSUNG: { + title: 'Samsung Semiconductor', + description: 'Major player in memory and logic chip manufacturing with advanced facilities.', + details: [ + 'Competes in 3nm and 5nm processes', + 'Strong in memory chip production', + 'Facilities in Korea and US', + '~17% foundry market share' + ] + }, + INTEL_FAB: { + title: 'Intel Foundry', + description: 'Traditional CPU giant expanding into foundry services with IDM 2.0 strategy.', + details: [ + 'Investing heavily in new fabs', + 'Developing Intel 4 and 3 processes', + 'US-based manufacturing', + 'Focus on regaining technology leadership' + ] + }, + NVIDIA: { + title: 'NVIDIA', + description: 'Leader in GPU design and AI accelerator chips.', + details: [ + 'Designs H100, A100 AI chips', + '~80% market share in AI chips', + 'Partners with TSMC for manufacturing', + 'Pioneered CUDA ecosystem' + ] + }, + AMD: { + title: 'AMD', + description: 'Major chip designer competing in CPU, GPU, and AI accelerator markets.', + details: [ + 'Designs MI300 AI accelerators', + 'Uses TSMC manufacturing', + 'Growing presence in data centers', + 'ROCm software ecosystem' + ] + }, + INTEL: { + title: 'Intel AI (Products)', + description: "Intel's AI chip products, including Gaudi accelerators.", + details: [ + 'Develops Gaudi AI accelerators', + 'Acquired Habana Labs', + 'Internal manufacturing capability (via Intel Foundry)', + 'OneAPI software platform' + ] + }, + ASE: { + title: 'ASE (Foxconn)', + description: "World's largest electronics manufacturer, key assembler of AI servers.", + details: [ + 'Major Apple supplier (general electronics)', + 'Key assembler of AI servers for Nvidia, AMD, etc.', + 'Facilities across Asia and globally', + 'Handles final product assembly for many tech giants' + ] + }, + ASE_GROUP: { + title: 'ASE Group', + description: "World's largest semiconductor packaging and testing (OSAT) provider.", + details: [ + 'Advanced packaging solutions (CoWoS-like, FOCoS, SiP)', + 'Tests final chip products', + 'Key role in supply chain for fabless & IDMs', + 'Facilities in multiple countries' + ] + }, + AMKOR: { + title: 'Amkor Technology', + description: 'Major global OSAT provider with advanced packaging capabilities.', + details: [ + 'Provides advanced packaging (e.g., SWIFT, S-SWIFT, HDFO)', + 'Key partner for US-based chip initiatives', + 'Building new facility in Arizona', + 'Serves fabless, IDM, and foundry customers' + ] + }, + OPENAI: { + title: 'OpenAI', + description: 'Leading AI research company focused on AGI development.', + details: [ + 'Developed GPT-4, DALL-E, Sora', + 'Requires massive compute infrastructure (Nvidia GPUs, custom chips in development)', + 'Partnership with Microsoft', + 'Focus on AI safety research' + ] + }, + GOOGLE: { + title: 'Google (DeepMind & Cloud)', + description: 'Pioneer in AI research and cloud AI services.', + details: [ + 'Developed Gemini, PaLM, TPUs', + 'Massive TPU infrastructure for internal use and Cloud', + 'Leading AI research lab (DeepMind)', + 'Offers Nvidia GPUs and Intel Gaudi on Cloud' + ] + }, + META: { + title: 'Meta AI', + description: 'Major AI research organization with open source focus and large infrastructure.', + details: [ + 'Developed LLaMA models', + 'Building massive GPU clusters (Nvidia)', + 'Developing in-house AI chips (MTIA)', + 'Focus on generative AI and metaverse applications' + ] + }, + SMIC: { + title: 'SMIC (Semiconductor Manufacturing International Corporation)', + description: + "China's largest chip manufacturer, developing advanced process nodes despite restrictions.", + details: [ + 'Achieved 7nm process using DUV (multi-patterning)', + 'Working on 5nm development', + 'Subject to US export controls (limited access to EUV)', + "Key to China's domestic supply chain efforts" + ] + }, + HUAWEI: { + title: 'Huawei (HiSilicon)', + description: + 'Chinese technology company developing AI chips (Ascend) and SoCs (Kirin) through its HiSilicon division.', + details: [ + 'Designs Ascend AI processors and Kirin SoCs', + 'Partners with SMIC for manufacturing due to sanctions', + 'Subject to US trade restrictions', + 'Focusing on domestic supply chain for chips' + ] + }, + SMEE: { + title: 'SMEE (Shanghai Micro Electronics Equipment)', + description: 'Chinese lithography equipment manufacturer developing DUV technology.', + details: [ + 'Developing DUV lithography tools (e.g., 28nm capable SSA800/900)', + 'Working on more advanced DUV immersion systems', + "Key player in China's chip independence strategy", + 'Cannot yet produce EUV machines' + ] + }, + GROQ: { + title: 'Groq', + description: + 'AI chip company focusing on Language Processing Units (LPUs) for ultra-low latency inference.', + details: [ + 'Developed LPU architecture for fast inference', + 'Uses Samsung 4nm for next-gen chips', + 'Claims superior inference speed and energy efficiency', + 'Founded by former Google TPU engineers' + ] + }, + CEREBRAS: { + title: 'Cerebras Systems', + description: 'Developer of Wafer-Scale Engines (WSE), the largest AI chips in the world.', + details: [ + 'WSE-3 is current flagship (5nm, 4 trillion transistors)', + 'Specialized for AI training and inference', + 'Uses TSMC for manufacturing', + 'Offers CS-3 systems built around WSE-3' + ] + }, + XAI: { + title: 'X.ai', + description: 'AI company by Elon Musk developing large language models like Grok.', + details: [ + 'Developing Grok model series', + 'Building massive H100 GPU clusters for training', + 'Focus on "truthful" and "maximum curiosity" AI', + 'Aims for AGI development' + ] + }, + DEEPSEEK: { + title: 'Deepseek', + description: 'Chinese AI company developing large language models.', + details: [ + 'Acquired fame with the Deepseek r1 reasoning model', + 'Focus on open source AI models' + ] + } +} + +export const edges: Edge[] = [ + { + source: 'ZEISS', + target: 'ASML', + links: null, + description: + "Zeiss is the exclusive global supplier of critical optical systems (mirrors, lenses) for ASML's EUV and High-NA EUV lithography machines, a foundational and monopolistic relationship for advanced chip manufacturing.", + weight: 10 + }, + { + source: 'ASML', + target: 'TSMC', + links: null, + description: + "ASML supplies TSMC with essential EUV and High-NA EUV lithography systems, critical for TSMC's production of the world's most advanced semiconductor nodes (7nm, 5nm, 3nm, 2nm). TSMC is a primary customer for ASML's latest technologies.", + weight: 10 + }, + { + source: 'ASML', + target: 'SAMSUNG', + links: [ + 'https://patentpc.com/blog/top-chip-making-equipment-companies-asml-applied-materials-and-lam-research-market-data', + 'https://www.sammobile.com/news/asml-changes-its-plans-for-the-755-million-chip-research-plant-with-samsung/', + 'https://www.trendforce.com/news/2025/04/21/news-samsung-and-asml-reportedly-scrap-euv-research-center-in-hwaseong-eyeing-new-alternatives/' + ], + description: + 'ASML provides Samsung Foundry with EUV lithography systems, enabling Samsung to manufacture advanced chips and compete at leading-edge nodes. Samsung is a major ASML customer and collaborates on High-NA EUV adoption.', + weight: 10 + }, + { + source: 'ASML', + target: 'INTEL_FAB', + links: [ + 'https://newsroom.intel.com/de/intel-foundry/intel-foundry-opens-new-frontier-chipmaking', + 'https://www.asml.com/en/news/press-releases/2022/intel-and-asml-strengthen-their-collaboration-to-drive-high-na-into-manufacturing-in-2025' + ], + description: + "ASML supplies Intel Foundry with EUV and is the first commercial supplier of High-NA EUV systems (TWINSCAN EXE:5000/5200). This is crucial for Intel's IDM 2.0 strategy and its goal to achieve process leadership.", + weight: 10 + }, + { + source: 'SMEE', + target: 'SMIC', + links: null, + description: + "SMEE, China's leading domestic lithography tool maker, supplies DUV scanners (e.g., 28nm-capable SSA800) to SMIC, supporting China's semiconductor self-sufficiency efforts, especially for mature nodes and potentially enabling advanced nodes via multi-patterning.", + weight: 7 + }, + { + source: 'TSMC', + target: 'NVIDIA', + links: [ + 'https://www.carboncredits.com/tsmc-dominates-ai-chip-market-with-record-sales-but-can-it-its-tackle-rising-emissions/', + 'https://nvidianews.nvidia.com/news/nvidia-blackwell-platform-arrives-to-power-a-new-era-of-computing' + ], + description: + "TSMC is the primary foundry for Nvidia, manufacturing its leading AI GPUs (A100, H100, Blackwell) using its most advanced process nodes (e.g., 4NP for Blackwell). This is critical for Nvidia's market leadership.", + weight: 9 + }, + { + source: 'TSMC', + target: 'AMD', + links: [ + 'https://www.carboncredits.com/tsmc-dominates-ai-chip-market-with-record-sales-but-can-it-its-tackle-rising-emissions/', + 'https://www.trendforce.com/news/2025/05/06/news-amd-reportedly-drops-samsung-foundry-in-favor-of-tsmcs-4nm-production-in-arizona/' + ], + description: + "TSMC is a key foundry partner for AMD, manufacturing its advanced CPUs, GPUs (including Instinct AI accelerators like MI300), and future 2nm 'Venice' chips, crucial for AMD's competitiveness in HPC and AI.", + weight: 9 + }, + { + source: 'TSMC', + target: 'CEREBRAS', + links: [ + 'https://en.wikipedia.org/wiki/Cerebras', + 'https://www.nextplatform.com/2024/03/14/cerebras-goes-hyperscale-with-third-gen-waferscale-supercomputers/', + 'https://arxiv.org/html/2503.11698v1' + ], + description: + "TSMC manufactures Cerebras Systems' unique Wafer-Scale Engines (WSE), with WSE-2 on 7nm and WSE-3 on 5nm. This partnership is essential for producing these massive, specialized AI chips.", + weight: 8 + }, + { + source: 'TSMC', + target: 'OPENAI', + links: [ + 'https://aimagazine.com/articles/whats-behind-openais-first-custom-chip-design-with-tsmc', + 'https://www.datacenterdynamics.com/en/news/openai-finalizing-custom-ai-chip-design-ahead-of-2026-launch-report/' + ], + description: + "OpenAI is partnering with TSMC to manufacture its first custom-designed AI chips using TSMC's 3nm process. This is a strategic move for OpenAI to optimize hardware and reduce reliance on external suppliers.", + weight: 7 + }, + { + source: 'TSMC', + target: 'META', + links: [ + 'https://technologymagazine.com/articles/behind-the-testing-of-metas-first-ai-training-chip', + 'https://www.newelectronics.co.uk/content/blogs/meta-said-to-be-testing-in-house-ai-chip-on-tsmc-s-5nm/' + ], + description: + "Meta is collaborating with TSMC to manufacture its in-house AI chips (MTIA program) on TSMC's 5nm process. This is key to Meta's strategy for custom silicon for its AI workloads.", + weight: 7 + }, + { + source: 'TSMC', + target: 'GOOGLE', + links: [ + 'https://siliconangle.com/2025/03/17/google-reportedly-partnering-mediatek-next-generation-tpu-production/', + 'https://www.techpowerup.com/334245/google-teams-up-with-mediatek-for-next-generation-tpu-v7-design' + ], + description: + "TSMC is set to manufacture Google's next-generation TPU v7 (via design partner MediaTek), continuing its role as a key foundry for Google's custom AI silicon, essential for Google's AI and cloud services.", + weight: 8 + }, + { + source: 'SAMSUNG', + target: 'NVIDIA', + links: ['https://sammyguru.com/nvidia-may-partner-with-samsung-foundry-for-next-gen-gpus/'], + description: + 'Samsung Foundry has manufactured GPUs for Nvidia (e.g., RTX 30 series on 8nm) and supplies GDDR7 memory. It remains a potential secondary foundry source for Nvidia to diversify its supply chain.', + weight: 5 + }, + { + source: 'SAMSUNG', + target: 'AMD', + links: [ + 'https://www.trendforce.com/news/2025/05/06/news-amd-reportedly-drops-samsung-foundry-in-favor-of-tsmcs-4nm-production-in-arizona/' + ], + description: + 'AMD has explored Samsung Foundry for 4nm production (SF4X) as a dual-source, but recent reports suggest a shift to TSMC for these nodes. Samsung could still be a partner for other nodes or components.', + weight: 3 + }, + { + source: 'SAMSUNG', + target: 'GROQ', + links: [ + 'https://en.wikipedia.org/wiki/Groq', + 'https://www.prnewswire.com/news-releases/groq-selects-samsung-foundry-to-bring-next-gen-lpu-to-the-ai-acceleration-market-301900464.html' + ], + description: + "Groq has selected Samsung Foundry in Taylor, Texas, to manufacture its next-generation Language Processing Units (LPUs) using Samsung's 4nm (SF4X) process, critical for Groq's product roadmap.", + weight: 8 + }, + { + source: 'INTEL_FAB', + target: 'INTEL', + links: [ + 'https://www.eetimes.com/intel-financial-risks-layoffs-foundry-ambitions/', + 'https://www.intel.com/content/www/us/en/products/details/processors/ai-accelerators/gaudi.html' + ], + description: + "Intel Foundry manufactures Intel's own designed chips, including CPUs and AI accelerators like the Gaudi series, fundamental to Intel's IDM (Integrated Device Manufacturer) model.", + weight: 9 + }, + { + source: 'SMIC', + target: 'HUAWEI', + links: null, + description: + "SMIC is Huawei's primary Chinese foundry partner, manufacturing Kirin SoCs and Ascend AI processors (e.g., on 7nm using DUV). This is vital for Huawei due to US sanctions restricting access to global foundries.", + weight: 9 + }, + { + source: 'NVIDIA', + target: 'ASE_GROUP', + links: [ + 'https://ase.aseglobal.com/blog/technology/advanced-packaging-for-ai-chiplet-and-cpo/', + 'https://www.tomshardware.com/tech-industry/artificial-intelligence/made-in-the-usa-inside-nvidias-usd500-billion-server-gambit' + ], + description: + "Nvidia likely utilizes ASE Group, the world's largest OSAT, for a portion of its packaging needs for GPUs and AI chips, leveraging ASE's scale and broad capabilities for volume production.", + weight: 6 + }, + { + source: 'AMD', + target: 'ASE_GROUP', + links: [ + 'https://ase.aseglobal.com/blog/technology/advanced-packaging-for-ai-chiplet-and-cpo/', + 'https://www.3dincites.com/2025/01/asia-may-still-be-the-hottest-spot-for-advanced-packaging/' + ], + description: + "AMD likely uses ASE Group for some of its packaging requirements, given ASE's market leadership. AMD employs a multi-OSAT strategy for its diverse product portfolio.", + weight: 5 + }, + { + source: 'INTEL', + target: 'ASE_GROUP', + links: [ + 'https://newsroom.intel.com/intel-foundry/intel-foundry-gathers-customers-partners-outlines-priorities', + 'https://ase.aseglobal.com/blog/technology/advanced-packaging-for-ai-chiplet-and-cpo/' + ], + description: + 'Intel may use ASE Group for certain packaging needs or overflow capacity, supplementing its internal capabilities and strategic OSAT partnerships like with Amkor for EMIB.', + weight: 4 + }, + { + source: 'NVIDIA', + target: 'AMKOR', + links: [ + 'https://www.supplychaindive.com/news/nvidia-us-production-blackwell-tsmc-ai-trump-tariffs/745395/', + 'https://telecomlead.com/semiconductor/nvidia-to-invest-500-bn-to-build-ai-servers-working-with-tsmc-foxconn-wistron-120668' + ], + description: + 'Nvidia partners with Amkor for AI chip packaging and testing, especially for its US-based manufacturing initiatives. Amkor is building a new advanced packaging facility in Arizona.', + weight: 7 + }, + { + source: 'NVIDIA', + target: 'DEEPSEEK', + links: [ + 'https://www.reuters.com/technology/nvidia-says-deepseek-advances-prove-need-more-its-chips-2025-01-27/' + ], + description: + "One of DeepSeek's research papers showed that it had used about 2,000 of Nvidia's H800 chips, which were designed to comply with U.S. export controls released in 2022.", + weight: 7 + }, + { + source: 'HUAWEI', + target: 'DEEPSEEK', + links: ['https://x.com/zephyr_z9/status/1884154694123298904'], + description: 'Huawei is supplying DeepSeek with its 910C chips for inference.', + weight: 7 + }, + { + source: 'AMD', + target: 'AMKOR', + links: [ + 'https://www.3dincites.com/2025/01/asia-may-still-be-the-hottest-spot-for-advanced-packaging/', + 'https://www.supplychaindive.com/news/nvidia-us-production-blackwell-tsmc-ai-trump-tariffs/745395/' + ], + description: + "Amkor is a strategic OSAT option for AMD, particularly for US-based supply chains, leveraging Amkor's advanced packaging capabilities and proximity to US fabs like TSMC Arizona.", + weight: 6 + }, + { + source: 'INTEL', + target: 'AMKOR', + links: [ + 'https://newsroom.intel.com/intel-foundry/intel-foundry-gathers-customers-partners-outlines-priorities', + 'https://convergedigest.com/intel-expands-foundry-services-with-emib-partnership-new-alliances-and-18a-variants/' + ], + description: + 'Intel Foundry partners with Amkor to qualify and enable its EMIB advanced packaging at Amkor facilities (Korea, future US), enhancing flexibility for foundry customers.', + weight: 7 + }, + { + source: 'NVIDIA', + target: 'OPENAI', + links: [ + 'https://nvidianews.nvidia.com/news/nvidia-blackwell-platform-arrives-to-power-a-new-era-of-computing', + 'https://www.datacenterdynamics.com/en/news/openai-finalizing-custom-ai-chip-design-ahead-of-2026-launch-report/' + ], + description: + "OpenAI is a major consumer of Nvidia's AI GPUs (e.g., H100, Blackwell) for training and running its large-scale AI models, making Nvidia a critical hardware supplier for OpenAI's current operations.", + weight: 8 + }, + { + source: 'NVIDIA', + target: 'GOOGLE', + links: [ + 'https://nvidianews.nvidia.com/news/nvidia-blackwell-platform-arrives-to-power-a-new-era-of-computing' + ], + description: + "Google Cloud offers Nvidia's AI GPUs (A100, H100, Blackwell) for its cloud AI services. Nvidia is an important supplier for Google's cloud AI infrastructure offerings.", + weight: 7 + }, + { + source: 'NVIDIA', + target: 'META', + links: [ + 'https://technologymagazine.com/articles/behind-the-testing-of-metas-first-ai-training-chip' + ], + description: + "Meta is a massive consumer of Nvidia's AI GPUs, investing billions to power its AI initiatives for social media, recommendations, and Llama models. Nvidia is a critical supplier for Meta's AI infrastructure.", + weight: 8 + }, + { + source: 'NVIDIA', + target: 'XAI', + links: [ + 'https://www.rdworldonline.com/how-xai-turned-a-factory-shell-into-an-ai-colossus-to-power-grok-3-and-beyond/' + ], + description: + 'X.ai utilizes a large cluster of Nvidia H100 GPUs (reportedly 200,000) to train its Grok LLMs, with plans to adopt H200/Blackwell. Nvidia is an indispensable hardware supplier for X.ai.', + weight: 8 + }, + { + source: 'INTEL', + target: 'GOOGLE', + links: [ + 'https://www.intel.com/content/www/us/en/products/details/processors/ai-accelerators/gaudi.html' + ], + description: + "Google Cloud offers Intel's Gaudi AI accelerators, providing customers an alternative for AI workloads. Intel supplies Gaudi chips to Google for its cloud infrastructure.", + weight: 5 + }, + { + source: 'NVIDIA', + target: 'ASE', + links: [ + 'https://www.supplychaindive.com/news/nvidia-us-production-blackwell-tsmc-ai-trump-tariffs/745395/', + 'https://telecomlead.com/semiconductor/nvidia-to-invest-500-bn-to-build-ai-servers-working-with-tsmc-foxconn-wistron-120668' + ], + description: + "Nvidia supplies its AI chips and components to Foxconn (node 'ASE') for assembly into AI servers and supercomputers. Foxconn is a key contract manufacturing partner for Nvidia's AI infrastructure.", + weight: 7 + }, + { + source: 'AMD', + target: 'ASE', + links: null, + description: + "AMD supplies its AI accelerators and components to Foxconn (node 'ASE') for assembly into AMD-based AI server systems, leveraging Foxconn's large-scale manufacturing capabilities.", + weight: 5 + }, + { + source: 'ASE', + target: 'OPENAI', + links: [ + 'https://www.supplychaindive.com/news/nvidia-us-production-blackwell-tsmc-ai-trump-tariffs/745395/' + ], + description: + "Foxconn (node 'ASE') assembles AI servers (often using Nvidia/AMD chips) and supplies these complete systems to large-scale AI consumers like OpenAI for their compute infrastructure.", + weight: 6 + }, + { + source: 'ASE', + target: 'GOOGLE', + links: [ + 'https://www.supplychaindive.com/news/nvidia-us-production-blackwell-tsmc-ai-trump-tariffs/745395/' + ], + description: + "Foxconn (node 'ASE') assembles AI server systems which are supplied to Google for its Cloud services and internal AI research, fulfilling Google's need for vast AI server fleets.", + weight: 6 + }, + { + source: 'ASE', + target: 'META', + links: [ + 'https://www.supplychaindive.com/news/nvidia-us-production-blackwell-tsmc-ai-trump-tariffs/745395/' + ], + description: + "Foxconn (node 'ASE') manufactures AI server systems procured by Meta for its extensive AI infrastructure, supporting its social media platforms and generative AI model development.", + weight: 6 + }, + { + source: 'ASE', + target: 'XAI', + links: [ + 'https://www.rdworldonline.com/how-xai-turned-a-factory-shell-into-an-ai-colossus-to-power-grok-3-and-beyond/' + ], + description: + "Foxconn (node 'ASE') assembles high-performance AI server systems (e.g., Nvidia H100 based) acquired by X.ai for building supercomputing clusters to train LLMs like Grok.", + weight: 6 + }, + { + source: 'ASE_GROUP', + target: 'OPENAI', + links: ['https://ase.aseglobal.com/blog/technology/advanced-packaging-for-ai-chiplet-and-cpo/'], + description: + "Indirect: ASE Group packages chips for designers (e.g., Nvidia) which OpenAI then consumes. OpenAI's custom chips are directly partnered with TSMC/Broadcom for manufacturing/packaging.", + weight: 3 + }, + { + source: 'ASE_GROUP', + target: 'META', + links: ['https://ase.aseglobal.com/blog/technology/ai-and-semiconductor-in-reciprocity/'], + description: + "Indirect: ASE Group packages chips for various vendors whose products Meta consumes. Meta's custom MTIA chips are directly partnered with TSMC for manufacturing/packaging.", + weight: 3 + } +] + +// Category styling +export const categoryColors = { + litho: 'node-litho', + fab: 'node-fab', + design: 'node-design', + assembly: 'node-assembly', + end: 'node-end' +} as const diff --git a/src/lib/components/supply-chain/styles.css b/src/lib/components/supply-chain/styles.css new file mode 100644 index 000000000..3dcf3e5cc --- /dev/null +++ b/src/lib/components/supply-chain/styles.css @@ -0,0 +1,351 @@ +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 2rem 0; + box-sizing: border-box; +} + +.graph-scroll { + width: calc(100% + 12rem); + display: flex; + justify-content: center; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin-left: -8rem; +} + +.graph-container { + position: relative; + background: white; + width: max-content; + min-width: 700px; + margin: 0 auto; + box-sizing: border-box; +} + +.header { + margin-bottom: 2rem; +} + +.title { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 1rem; +} + +.description { + color: #666; + margin-bottom: 1rem; +} + +.edges { + position: absolute; + top: 0; + left: 0; + pointer-events: none; + z-index: 1; +} + +.node { + position: absolute; + cursor: pointer; + border-radius: 0.5rem; + padding: 0.5rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; + width: 100px; + text-align: center; + z-index: 2; + margin: 0; +} + +.node:hover { + transform: scale(1.05); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); +} + +.node-label { + font-size: 0.75rem; + font-weight: 500; +} + +.node-litho { + background-color: #fef3c7; + border: 2px solid #fcd34d; +} + +.node-litho:hover { + background-color: #fde68a; + border-color: #f59e0b; +} + +.node-fab { + background-color: #fed7aa; + border: 2px solid #fb923c; +} + +.node-fab:hover { + background-color: #fdba74; + border-color: #ea580c; +} + +.node-design { + background-color: #fee2e2; + border: 2px solid #fca5a5; +} + +.node-design:hover { + background-color: #fecaca; + border-color: #ef4444; +} + +.node-assembly { + background-color: #dbeafe; + border: 2px solid #93c5fd; +} + +.node-assembly:hover { + background-color: #bfdbfe; + border-color: #3b82f6; +} + +.node-end { + background-color: #f3e8ff; + border: 2px solid #d8b4fe; +} + +.node-end:hover { + background-color: #e9d5ff; + border-color: #a855f7; +} + +.modal { + position: fixed; + inset: 0; + background: transparent; + display: flex; + align-items: center; + justify-content: center; + z-index: 50; + border: none; + padding: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.modal::backdrop { + background: rgba(0, 0, 0, 0.5); + animation: fade-in 0.2s ease-out; +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.modal-content { + background: white; + border-radius: 0.5rem; + padding: 1.5rem; + width: 28rem; + margin: 1rem; + animation: fade-in 0.2s ease-out; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + max-height: calc(100vh - 2rem); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #cbd5e1 #f1f5f9; +} + +.modal-content::-webkit-scrollbar { + width: 8px; +} + +.modal-content::-webkit-scrollbar-track { + background: #f1f5f9; + border-radius: 4px; +} + +.modal-content::-webkit-scrollbar-thumb { + background-color: #cbd5e1; + border-radius: 4px; +} + +.modal-content::-webkit-scrollbar-thumb:hover { + background-color: #94a3b8; +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1rem; +} + +.modal-title { + font-size: 1.25rem; + font-weight: bold; +} + +.modal-close { + color: #6b7280; + cursor: pointer; +} + +.modal-close:hover { + color: #374151; +} + +.modal-description { + color: #666; + margin-bottom: 1rem; +} + +.modal-details { + list-style-type: disc; + padding-left: 1.25rem; +} + +.modal-detail-item { + color: #374151; + margin-bottom: 0.25rem; +} + +.legend { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; + margin: 2rem 0; +} + +.legend-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: #666; +} + +.legend-swatch { + width: 1.5rem; + height: 1rem; + border-radius: 0.25rem; +} + +.edge-group { + cursor: pointer; +} + +.edge-group:hover line { + stroke: #000; +} + +.modal-subtitle { + font-size: 0.875rem; + font-weight: bold; + color: #4b5563; + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +.modal-connections { + margin-top: 1.5rem; + border-top: 1px solid #e5e7eb; + padding-top: 1rem; +} + +.connection-section { + margin-bottom: 1rem; +} + +.connection-list { + list-style: none; + padding: 0; + margin: 0; +} + +.connection-item { + margin-bottom: 0.75rem; + font-size: 0.875rem; + line-height: 1.4; +} + +.connection-button { + display: flex; + align-items: flex-start; + gap: 0.5rem; + width: 100%; + text-align: left; + background: none; + border: none; + padding: 0.5rem; + border-radius: 0.25rem; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.connection-button:hover { + background-color: #f3f4f6; +} + +.connection-button:focus { + outline: 2px solid #2563eb; + outline-offset: 2px; +} + +.connection-label { + font-weight: 500; + color: #2563eb; + min-width: 80px; +} + +.connection-arrow { + color: #6b7280; +} + +.connection-description { + color: #4b5563; + flex: 1; +} + +.connection-links { + margin: 0.25rem 0 0 0; + padding-left: 1.25rem; + font-size: 0.8em; + color: #2563eb; +} + +.connection-links li { + margin-bottom: 0.1rem; +} + +.connection-links a { + color: #2563eb; + text-decoration: underline; + word-break: break-all; +} + +.connection-links a:hover { + color: #1d4ed8; +} + +.connection-sources { + margin-top: 0.5rem; + font-size: 0.9em; + color: #374151; +} + +:global(body) { + margin: 0; + font-family: + system-ui, + -apple-system, + sans-serif; +} diff --git a/src/lib/components/supply-chain/types.ts b/src/lib/components/supply-chain/types.ts new file mode 100644 index 000000000..3f061564e --- /dev/null +++ b/src/lib/components/supply-chain/types.ts @@ -0,0 +1,21 @@ +export interface Node { + id: string + label: string + category: 'litho' | 'fab' | 'design' | 'assembly' | 'end' + x?: number + y?: number +} + +export interface NodeInfo { + title: string + description: string + details: string[] +} + +export interface Edge { + source: string + target: string + links?: string[] | null + description?: string | null + weight?: number +} diff --git a/src/lib/components/supply-chain/utils.ts b/src/lib/components/supply-chain/utils.ts new file mode 100644 index 000000000..90f12c253 --- /dev/null +++ b/src/lib/components/supply-chain/utils.ts @@ -0,0 +1,59 @@ +import type { Node } from './types' + +// Calculate max nodes in any category +export function getMaxNodesInCategory(nodesByCategory: Record) { + return Math.max(...Object.values(nodesByCategory).map((arr) => arr.length)) +} + +// Helper function to calculate y position based on index in category +export function getYPosition( + index: number, + totalInCategory: number, + containerHeight: number, + verticalPadding: number +): number { + const spacing = (containerHeight - 2 * verticalPadding) / (totalInCategory + 1) + return verticalPadding + (index + 1) * spacing +} + +// Helper function to calculate x position with horizontal padding +export function getXPosition( + fraction: number, + containerWidth: number, + horizontalPadding: number +): number { + return horizontalPadding + fraction * (containerWidth - 2 * horizontalPadding) +} + +// Calculate connection points on node edges (in pixels) +export function calculateConnectionPoints(startNode: Node, endNode: Node) { + const startX = startNode.x ?? 0 + const startY = startNode.y ?? 0 + const endX = endNode.x ?? 0 + const endY = endNode.y ?? 0 + + const dx = endX - startX + + // Node total visual width: CSS width (100px) + padding (2*0.5rem=16px) + border (2*2px=4px) = 120px + // Node visual half width = 60px + const nodeVisualHalfWidthPx = 60 + + const calculatedStartX = startX + Math.sign(dx) * nodeVisualHalfWidthPx + const calculatedEndX = endX - Math.sign(dx) * nodeVisualHalfWidthPx + + return { + startX: calculatedStartX, + startY, + endX: calculatedEndX, + endY + } +} + +// Helper to get domain from URL +export function getDomain(link: string): string { + try { + return new URL(link).hostname.replace(/^www\./, '') + } catch { + return link + } +} diff --git a/src/posts/learn.md b/src/posts/learn.md index 8bbdc7eb2..12d6e42d1 100644 --- a/src/posts/learn.md +++ b/src/posts/learn.md @@ -11,6 +11,7 @@ description: Educational resources (videos, articles, books) about AI risks and - [Quotes](/quotes). Quotes on AI risks and governance. - [Feasiblity of a Pause](/feasibility). The feasibility of a pause in AI development. - [Building the Pause button](/building-the-pause-button). What it takes to pause AI. +- [AI Chip Supply Chain](/ai-chip-supply-chain). How chips are made and which companies are involved. - [FAQ](/faq). Commonly asked questions about AI safety and PauseAI. - [Action](/action). What you can do to help (with links to many action-related guides) diff --git a/src/routes/ai-chip-supply-chain/+page.svelte b/src/routes/ai-chip-supply-chain/+page.svelte new file mode 100644 index 000000000..74adbe2ff --- /dev/null +++ b/src/routes/ai-chip-supply-chain/+page.svelte @@ -0,0 +1,12 @@ + + +
+ + +
+ + From 56cc0c5698b6f020c89fb9ada6474feba10998bb Mon Sep 17 00:00:00 2001 From: Joep Meindertsma Date: Fri, 16 May 2025 19:29:56 +0200 Subject: [PATCH 7/9] WIP supply chain --- src/lib/api.ts | 20 + src/lib/components/SupplyChain.svelte | 528 ++++++------------- src/lib/components/supply-chain/Modal.svelte | 115 ++++ src/lib/components/supply-chain/Node.svelte | 118 +++++ src/lib/components/supply-chain/data.ts | 281 +++++++++- src/lib/components/supply-chain/styles.css | 54 +- src/lib/components/supply-chain/types.ts | 2 +- 7 files changed, 721 insertions(+), 397 deletions(-) create mode 100644 src/lib/components/supply-chain/Modal.svelte create mode 100644 src/lib/components/supply-chain/Node.svelte diff --git a/src/lib/api.ts b/src/lib/api.ts index 0f3068732..94ede4786 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -8,3 +8,23 @@ export const options = { 'Content-Type': 'application/json' } } + +// Airtable API is limited to 100 items per page +export async function fetchAllPages(fetch: any, url: any) { + let allRecords: any[] = [] + // https://airtable.com/developers/web/api/list-records#query-pagesize + let offset + + do { + const fullUrl = offset ? `${url}?offset=${offset}` : url + const response = await fetch(fullUrl, options) + if (!response.ok) { + throw new Error('Failed to fetch data from Airtable') + } + const data: any = await response.json() + allRecords = allRecords.concat(data.records) + offset = data.offset + } while (offset) + + return allRecords +} diff --git a/src/lib/components/SupplyChain.svelte b/src/lib/components/SupplyChain.svelte index 98da5a705..bb38ce984 100644 --- a/src/lib/components/SupplyChain.svelte +++ b/src/lib/components/SupplyChain.svelte @@ -9,6 +9,8 @@ calculateConnectionPoints, getDomain } from './supply-chain/utils' + import Modal from './supply-chain/Modal.svelte' + import NodeComponent from './supply-chain/Node.svelte' import './supply-chain/styles.css' // Reactive state @@ -17,7 +19,7 @@ // Container size state let graphContainer: HTMLDivElement - let containerWidth = 1000 // default fallback + let containerWidth = 1600 // default fallback let containerHeight = 600 // default fallback // Dynamic vertical spacing const minNodeSpacing = 80 @@ -40,11 +42,13 @@ // Define column positions (as fractions of width) const columns = { - litho: 0.15, - fab: 0.35, - design: 0.55, - assembly: 0.75, - end: 0.95 + equipment: 0.08, + foundry: 0.2, + design: 0.34, + eda: 0.46, + memory: 0.58, + assembly: 0.72, + end: 0.88 } // Group nodes by category @@ -96,14 +100,6 @@ } } - // Add this function to handle backdrop clicks - function handleBackdropClick(event: MouseEvent) { - // Only close if clicking the backdrop (dialog element), not its contents - if (event.target === event.currentTarget) { - closeAllModals() - } - } - // Add these reactive arrays for links $: incomingLinks = Array.from( new Set( @@ -141,7 +137,7 @@
{#each Object.values(nodes) as node} -
handleNodeClick(node.id)} - on:keydown={(event) => { - if (event.key === 'Enter' || event.key === ' ') { - handleNodeClick(node.id) - } - }} - role="button" - tabindex="0" - > - {node.label} -
+ handleNodeClick(node.id)} + /> {/each}
- + {#if selectedNodeId && nodeInfo[selectedNodeId]} - -
-
- - +
    + {#each nodeInfo[selectedNodeId].details as detail} +
  • {detail}
    • + {/each} +
+ + {#if edges.filter((e) => e.source === selectedNodeId || e.target === selectedNodeId).length > 0} +
+ {#if edges.filter((e) => e.target === selectedNodeId).length > 0} +
+

Incoming Connections:

+
    + {#each edges.filter((e) => e.target === selectedNodeId) as edge} +
  • + +
    • + {/each} +
+ {#if incomingLinks.length > 0} +
+ Sources: + +
+ {/if} +
+ {/if} + + {#if edges.filter((e) => e.source === selectedNodeId).length > 0} +
+

Outgoing Connections:

+
    + {#each edges.filter((e) => e.source === selectedNodeId) as edge} +
  • + +
    • + {/each} +
+ {#if outgoingLinks.length > 0} +
+ Sources: + +
+ {/if} +
+ {/if}
- -
    - {#each nodeInfo[selectedNodeId].details as detail} -
  • {detail}
    • - {/each} -
- - {#if edges.filter((e) => e.source === selectedNodeId || e.target === selectedNodeId).length > 0} -
- {#if edges.filter((e) => e.target === selectedNodeId).length > 0} -
-

Incoming Connections:

-
    - {#each edges.filter((e) => e.target === selectedNodeId) as edge} -
  • - -
    • - {/each} -
- {#if incomingLinks.length > 0} -
- Sources: - -
- {/if} -
- {/if} - - {#if edges.filter((e) => e.source === selectedNodeId).length > 0} -
-

Outgoing Connections:

-
    - {#each edges.filter((e) => e.source === selectedNodeId) as edge} -
  • - -
    • - {/each} -
- {#if outgoingLinks.length > 0} -
- Sources: - -
- {/if} -
- {/if} -
- {/if} -
-
+ {/if} + {/if} {#if selectedEdge} - -
-
- - + {#if selectedEdge.links && selectedEdge.links.length > 0} +
+ Sources: +
- {#if selectedEdge.description} - - {/if} - {#if selectedEdge.links && selectedEdge.links.length > 0} -
- Sources: - -
- {/if} -
-
+ {/if} + {/if}
-
- Lithography +
+ Equipment
-
+
Foundry
Chip Design
+
+
+ EDA +
+
+
+ Memory +
Assembly @@ -389,40 +355,30 @@ margin: 0 auto; padding: 2rem 0; box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; } + .graph-scroll { - width: calc(100% + 12rem); - display: flex; - justify-content: center; + width: 100vw; overflow-x: auto; - -webkit-overflow-scrolling: touch; - margin-left: -8rem; + overflow-y: visible; } + .graph-container { + display: inline-block; position: relative; background: white; - width: max-content; - min-width: 700px; - margin: 0 auto; box-sizing: border-box; } - @media (max-width: 1300px) { - .graph-container { - } - } - @media (max-width: 1100px) { - .graph-container { - } - } - @media (max-width: 800px) { - .graph-container { - } - } + @media (max-width: 600px) { .container { padding: 1rem 0; } } + .header { margin-bottom: 2rem; } @@ -446,163 +402,12 @@ z-index: 1; } - .node { - position: absolute; - cursor: pointer; - border-radius: 0.5rem; - padding: 0.5rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; - width: 100px; - text-align: center; - z-index: 2; - margin: 0; - } - - .node:hover { - transform: scale(1.05); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); - } - - .node-label { - font-size: 0.75rem; - font-weight: 500; - } - - .node-litho { - background-color: #fef3c7; - border: 2px solid #fcd34d; - } - .node-litho:hover { - background-color: #fde68a; - border-color: #f59e0b; - } - - .node-fab { - background-color: #fed7aa; - border: 2px solid #fb923c; - } - .node-fab:hover { - background-color: #fdba74; - border-color: #ea580c; - } - - .node-design { - background-color: #fee2e2; - border: 2px solid #fca5a5; - } - .node-design:hover { - background-color: #fecaca; - border-color: #ef4444; - } - - .node-assembly { - background-color: #dbeafe; - border: 2px solid #93c5fd; - } - .node-assembly:hover { - background-color: #bfdbfe; - border-color: #3b82f6; - } - - .node-end { - background-color: #f3e8ff; - border: 2px solid #d8b4fe; - } - .node-end:hover { - background-color: #e9d5ff; - border-color: #a855f7; - } - - .modal { - position: fixed; - inset: 0; - background: transparent; - display: flex; - align-items: center; - justify-content: center; - z-index: 50; - border: none; - padding: 0; - width: 100%; - height: 100%; - overflow: hidden; /* Prevent background scrolling */ - } - - .modal::backdrop { - background: rgba(0, 0, 0, 0.5); - animation: fade-in 0.2s ease-out; - } - - @keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - .modal-content { - background: white; - border-radius: 0.5rem; - padding: 1.5rem; - width: 28rem; - margin: 1rem; - animation: fade-in 0.2s ease-out; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - max-height: calc(100vh - 2rem); /* Account for margin */ - overflow-y: auto; /* Make content scrollable */ - } - - /* Add smooth scrolling to the modal content */ - .modal-content { - scrollbar-width: thin; - scrollbar-color: #cbd5e1 #f1f5f9; - } - - .modal-content::-webkit-scrollbar { - width: 8px; - } - - .modal-content::-webkit-scrollbar-track { - background: #f1f5f9; - border-radius: 4px; - } - - .modal-content::-webkit-scrollbar-thumb { - background-color: #cbd5e1; - border-radius: 4px; - } - - .modal-content::-webkit-scrollbar-thumb:hover { - background-color: #94a3b8; - } - - .modal-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 1rem; - } - - .modal-title { - font-size: 1.25rem; - font-weight: bold; - } - - .modal-close { - color: #6b7280; + .edge-group { cursor: pointer; } - .modal-close:hover { - color: #374151; - } - - .modal-description { - color: #666; - margin-bottom: 1rem; + .edge-group:hover line { + stroke: #000; } .modal-details { @@ -637,44 +442,14 @@ border-radius: 0.25rem; } - .edge-group { - cursor: pointer; - } - - .edge-group:hover line { - stroke: #000; /* Darken line significantly on hover to black */ - /* stroke-width: 6px; Keep original stroke-width to prevent marker scaling issues */ - } - .modal-subtitle { - font-size: 0.875rem; /* 14px */ + font-size: 0.875rem; font-weight: bold; - color: #4b5563; /* gray-600 */ + color: #4b5563; margin-top: 1rem; margin-bottom: 0.5rem; } - .modal-links { - list-style-type: disc; - padding-left: 1.25rem; - max-height: 150px; /* Example max height for scrollable links */ - overflow-y: auto; /* Allow scrolling for links */ - } - - .modal-link-item { - color: #374151; - margin-bottom: 0.25rem; - } - - .modal-link-item a { - color: #2563eb; /* blue-600 */ - text-decoration: underline; - } - - .modal-link-item a:hover { - color: #1d4ed8; /* blue-700 */ - } - .modal-connections { margin-top: 1.5rem; border-top: 1px solid #e5e7eb; @@ -741,14 +516,17 @@ font-size: 0.8em; color: #2563eb; } + .connection-links li { margin-bottom: 0.1rem; } + .connection-links a { color: #2563eb; text-decoration: underline; word-break: break-all; } + .connection-links a:hover { color: #1d4ed8; } diff --git a/src/lib/components/supply-chain/Modal.svelte b/src/lib/components/supply-chain/Modal.svelte new file mode 100644 index 000000000..9c205c5a6 --- /dev/null +++ b/src/lib/components/supply-chain/Modal.svelte @@ -0,0 +1,115 @@ + + + { + if (e.target === e.currentTarget) { + onClose() + } + }} +> +
+
+ + +
+ + +
+ + + diff --git a/src/lib/components/supply-chain/Node.svelte b/src/lib/components/supply-chain/Node.svelte new file mode 100644 index 000000000..985c5739f --- /dev/null +++ b/src/lib/components/supply-chain/Node.svelte @@ -0,0 +1,118 @@ + + +
{ + if (event.key === 'Enter' || event.key === ' ') { + onClick() + } + }} + role="button" + tabindex="0" +> + {label} +
+ + diff --git a/src/lib/components/supply-chain/data.ts b/src/lib/components/supply-chain/data.ts index 8377066b0..febf047f0 100644 --- a/src/lib/components/supply-chain/data.ts +++ b/src/lib/components/supply-chain/data.ts @@ -1,30 +1,168 @@ import type { Node, NodeInfo, Edge } from './types' export const nodes: Record = { - ASML: { id: 'ASML', label: 'ASML', category: 'litho' }, - ZEISS: { id: 'ZEISS', label: 'Zeiss', category: 'litho' }, - SMEE: { id: 'SMEE', label: 'SMEE', category: 'litho' }, - TSMC: { id: 'TSMC', label: 'TSMC', category: 'fab' }, - SAMSUNG: { id: 'SAMSUNG', label: 'Samsung', category: 'fab' }, - INTEL_FAB: { id: 'INTEL_FAB', label: 'Intel Foundry', category: 'fab' }, - SMIC: { id: 'SMIC', label: 'SMIC', category: 'fab' }, + // Lithography & Equipment + ASML: { id: 'ASML', label: 'ASML', category: 'equipment' }, + ZEISS: { id: 'ZEISS', label: 'Zeiss', category: 'equipment' }, + SMEE: { id: 'SMEE', label: 'SMEE', category: 'equipment' }, + APPLIED: { id: 'APPLIED', label: 'Applied Materials', category: 'equipment' }, + KLA: { id: 'KLA', label: 'KLA', category: 'equipment' }, + TEL: { id: 'TEL', label: 'Tokyo Electron', category: 'equipment' }, + NIKON: { id: 'NIKON', label: 'Nikon', category: 'equipment' }, + + // Foundries + TSMC: { id: 'TSMC', label: 'TSMC', category: 'foundry' }, + SAMSUNG: { id: 'SAMSUNG', label: 'Samsung', category: 'foundry' }, + INTEL_FAB: { id: 'INTEL_FAB', label: 'Intel Foundry', category: 'foundry' }, + SMIC: { id: 'SMIC', label: 'SMIC', category: 'foundry' }, + UMC: { id: 'UMC', label: 'UMC', category: 'foundry' }, + GFS: { id: 'GFS', label: 'GlobalFoundries', category: 'foundry' }, + + // Design / IP / EDA NVIDIA: { id: 'NVIDIA', label: 'Nvidia', category: 'design' }, AMD: { id: 'AMD', label: 'AMD', category: 'design' }, GROQ: { id: 'GROQ', label: 'Groq', category: 'design' }, INTEL: { id: 'INTEL', label: 'Intel AI', category: 'design' }, CEREBRAS: { id: 'CEREBRAS', label: 'Cerebras', category: 'design' }, HUAWEI: { id: 'HUAWEI', label: 'Huawei', category: 'design' }, + ARM: { id: 'ARM', label: 'ARM', category: 'design' }, + CADENCE: { id: 'CADENCE', label: 'Cadence', category: 'eda' }, + SYNOPSYS: { id: 'SYNOPSYS', label: 'Synopsys', category: 'eda' }, + + // Memory + MICRON: { id: 'MICRON', label: 'Micron', category: 'memory' }, + SKHYNIX: { id: 'SKHYNIX', label: 'SK Hynix', category: 'memory' }, + + // Assembly / OSAT ASE: { id: 'ASE', label: 'ASE (Foxconn)', category: 'assembly' }, ASE_GROUP: { id: 'ASE_GROUP', label: 'ASE Group', category: 'assembly' }, AMKOR: { id: 'AMKOR', label: 'Amkor', category: 'assembly' }, + JCET: { id: 'JCET', label: 'JCET', category: 'assembly' }, + SPIL: { id: 'SPIL', label: 'SPIL', category: 'assembly' }, + + // Cloud / End users + AWS: { id: 'AWS', label: 'AWS', category: 'end' }, + AZURE: { id: 'AZURE', label: 'Azure (Microsoft)', category: 'end' }, OPENAI: { id: 'OPENAI', label: 'OpenAI', category: 'end' }, - GOOGLE: { id: 'GOOGLE', label: 'Google AI', category: 'end' }, + GOOGLE: { id: 'GOOGLE', label: 'Google', category: 'end' }, META: { id: 'META', label: 'Meta AI', category: 'end' }, XAI: { id: 'XAI', label: 'X.ai', category: 'end' }, DEEPSEEK: { id: 'DEEPSEEK', label: 'Deepseek', category: 'end' } } export const nodeInfo: Record = { + APPLIED: { + title: 'Applied Materials', + description: + 'Largest semiconductor equipment company covering deposition, etch and CMP tools used by every leading-edge fab.', + details: [ + 'Leader in PVD/CVD, etch and CMP equipment', + 'Critical for 3D NAND, logic and packaging steps', + 'Supplies TSMC, Samsung, Intel and others', + 'Subject to US export controls (China restrictions)' + ] + }, + KLA: { + title: 'KLA', + description: 'Dominant player in process-control, wafer inspection and metrology systems.', + details: [ + 'Essential for yield-learning at advanced nodes', + 'Sells to all top foundries and memory makers' + ] + }, + TEL: { + title: 'Tokyo Electron', + description: + 'Top-three global equipment vendor providing etch, deposition and photoresist coat/develop tools.', + details: [ + 'Japanese powerhouse with strong co-development at TSMC & Samsung', + 'Key for FinFET/GAAFET patterning and 3D NAND fabrication' + ] + }, + NIKON: { + title: 'Nikon', + description: 'Supplier of immersion DUV lithography scanners (No.2 after ASML in lithography).', + details: ['Competition to ASML in mature nodes', 'Important for 28-90 nm and overlay tools'] + }, + UMC: { + title: 'UMC (United Microelectronics)', + description: + 'Taiwan-based pure-play foundry focused on 28 nm and above with selective 14/12 nm capacity.', + details: [ + '~6% global foundry market share', + 'Key second-source for mature logic and specialty nodes' + ] + }, + GFS: { + title: 'GlobalFoundries', + description: + 'US-headquartered pure-play foundry specializing in mature and RF/process-optimized nodes.', + details: [ + 'Largely exited sub-10 nm race in 2018', + 'Strategic US/EU fabs aligned with CHIPS Act customers' + ] + }, + ARM: { + title: 'ARM', + description: + 'Licensor of CPU/GPU architectures underlying most mobile and emerging AI accelerators.', + details: ['Neoverse for data-center CPUs', 'Widely licensed by Nvidia, AWS, Google, etc.'] + }, + CADENCE: { + title: 'Cadence Design Systems', + description: + 'EDA software provider (design, verification, implementation) indispensable to chip designers.', + details: [ + 'Fusion/Innovus, Spectre simulation suites', + 'Collaborates with TSMC and Samsung on advanced PDKs' + ] + }, + SYNOPSYS: { + title: 'Synopsys', + description: 'Largest EDA vendor and IP licensor (Interface & ARC).', + details: [ + 'Design Compiler & Fusion Compiler toolchains', + 'Owns critical interface IP (PCIe, DDR, HBM)' + ] + }, + MICRON: { + title: 'Micron Technology', + description: 'US memory giant producing DRAM, NAND and HBM for AI accelerators.', + details: ['HBM3E supplier for Nvidia Blackwell', 'Boise-based R&D; fabs in US, Taiwan, Japan'] + }, + SKHYNIX: { + title: 'SK Hynix', + description: 'Korean memory leader and primary HBM3 supplier for Nvidia H100/H200.', + details: [ + 'Developed world-first HBM3E 12-high stack', + 'Joint ventures with TSMC on advanced packaging' + ] + }, + JCET: { + title: 'JCET Group', + description: "China's largest OSAT offering flip-chip, SiP and fan-out panel-level packaging.", + details: [] + }, + SPIL: { + title: 'Siliconware Precision Industries (SPIL)', + description: 'Taiwanese OSAT subsidiary of ASE focusing on bumping and advanced SiP.', + details: [] + }, + AWS: { + title: 'Amazon Web Services', + description: + 'Largest cloud provider, massive buyer of AI accelerators and developer of Trainium/Inferentia chips.', + details: [ + 'Ongoing purchases of Nvidia H100/H200', + 'Designs custom Graviton/Trainium chips (fabricated by TSMC)' + ] + }, + AZURE: { + title: 'Microsoft Azure', + description: + 'Cloud platform powering OpenAI and hosting Nvidia, AMD and custom Cobalt/ Maia AI accelerators.', + details: ['Cobalt / Maia chips fabbed at TSMC', 'Major H100/H200 and MI300 customer'] + }, ASML: { title: 'ASML', description: @@ -237,6 +375,127 @@ export const nodeInfo: Record = { } export const edges: Edge[] = [ + // Lithography & equipment → fabs + { + source: 'APPLIED', + target: 'TSMC', + links: null, + description: + 'Applied Materials supplies critical deposition, etch and CMP tools that enable every advanced TSMC node.', + weight: 9 + }, + { + source: 'APPLIED', + target: 'SAMSUNG', + links: null, + description: + 'Samsung Foundry relies on Applied Materials equipment across logic and memory fabs.', + weight: 8 + }, + { + source: 'APPLIED', + target: 'INTEL_FAB', + links: null, + description: + 'Intel’s new Arizona and Ohio fabs deploy Applied Materials platforms for GAAFET manufacturing.', + weight: 8 + }, + { + source: 'KLA', + target: 'TSMC', + links: null, + description: + 'KLA’s inspection & metrology systems are indispensable for TSMC yield‑ramp at 3 nm and below.', + weight: 8 + }, + { + source: 'TEL', + target: 'TSMC', + links: null, + description: + 'Tokyo Electron coat/develop and etch tools form a backbone of TSMC patterning flows.', + weight: 7 + }, + + // Memory → AI chip vendors + { + source: 'MICRON', + target: 'NVIDIA', + links: null, + description: + 'Micron supplies HBM3E stacks for Nvidia Blackwell GPUs, a critical component for memory bandwidth.', + weight: 7 + }, + { + source: 'SKHYNIX', + target: 'NVIDIA', + links: null, + description: + 'SK Hynix is the primary HBM3 supplier for Nvidia’s Hopper GPUs and early Blackwell shipments.', + weight: 7 + }, + + // IP / EDA relationships + { + source: 'ARM', + target: 'NVIDIA', + links: null, + description: 'Nvidia licenses ARM CPU cores (Grace) for its Grace Hopper/Blackwell superchips.', + weight: 6 + }, + { + source: 'ARM', + target: 'AWS', + links: null, + description: 'AWS Graviton and Trainium chips are built on ARM Neoverse designs.', + weight: 6 + }, + { + source: 'CADENCE', + target: 'NVIDIA', + links: null, + description: + 'Nvidia uses Cadence digital and analog toolchains for chip implementation and verification.', + weight: 5 + }, + { + source: 'SYNOPSYS', + target: 'AMD', + links: null, + description: + 'AMD relies on Synopsys EDA tools and interface IP (PCIe, DDR) for its MI300 family.', + weight: 5 + }, + + // Cloud providers consuming accelerators + { + source: 'NVIDIA', + target: 'AWS', + links: null, + description: 'AWS deploys tens of thousands of Nvidia H100 GPUs in its EC2 UltraClusters.', + weight: 8 + }, + { + source: 'NVIDIA', + target: 'AZURE', + links: null, + description: 'Microsoft Azure is a launch partner for Nvidia Blackwell HGX racks.', + weight: 8 + }, + { + source: 'AMD', + target: 'AWS', + links: null, + description: 'AWS offers AMD Instinct MI300X instances for inference‑optimized workloads.', + weight: 6 + }, + { + source: 'AMD', + target: 'AZURE', + links: null, + description: 'Azure is an early customer of AMD’s MI300A/X for its Maia super‑clusters.', + weight: 6 + }, { source: 'ZEISS', target: 'ASML', @@ -612,9 +871,11 @@ export const edges: Edge[] = [ // Category styling export const categoryColors = { - litho: 'node-litho', - fab: 'node-fab', + equipment: 'node-equipment', + foundry: 'node-foundry', design: 'node-design', + eda: 'node-eda', + memory: 'node-memory', assembly: 'node-assembly', end: 'node-end' } as const diff --git a/src/lib/components/supply-chain/styles.css b/src/lib/components/supply-chain/styles.css index 3dcf3e5cc..1d1993bf5 100644 --- a/src/lib/components/supply-chain/styles.css +++ b/src/lib/components/supply-chain/styles.css @@ -4,23 +4,15 @@ margin: 0 auto; padding: 2rem 0; box-sizing: border-box; -} - -.graph-scroll { - width: calc(100% + 12rem); display: flex; - justify-content: center; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - margin-left: -8rem; + flex-direction: column; + align-items: center; } .graph-container { + display: inline-block; position: relative; background: white; - width: max-content; - min-width: 700px; - margin: 0 auto; box-sizing: border-box; } @@ -120,6 +112,46 @@ border-color: #a855f7; } +.node-equipment { + background-color: #e0e7ff; + border: 2px solid #6366f1; +} + +.node-equipment:hover { + background-color: #c7d2fe; + border-color: #4338ca; +} + +.node-foundry { + background-color: #fed7aa; + border: 2px solid #fb923c; +} + +.node-foundry:hover { + background-color: #fdba74; + border-color: #ea580c; +} + +.node-eda { + background-color: #f0fdf4; + border: 2px solid #34d399; +} + +.node-eda:hover { + background-color: #bbf7d0; + border-color: #059669; +} + +.node-memory { + background-color: #fef9c3; + border: 2px solid #fde047; +} + +.node-memory:hover { + background-color: #fef08a; + border-color: #ca8a04; +} + .modal { position: fixed; inset: 0; diff --git a/src/lib/components/supply-chain/types.ts b/src/lib/components/supply-chain/types.ts index 3f061564e..ddac99e6b 100644 --- a/src/lib/components/supply-chain/types.ts +++ b/src/lib/components/supply-chain/types.ts @@ -1,7 +1,7 @@ export interface Node { id: string label: string - category: 'litho' | 'fab' | 'design' | 'assembly' | 'end' + category: 'equipment' | 'foundry' | 'design' | 'eda' | 'memory' | 'assembly' | 'end' x?: number y?: number } From ac5c2130f7f8f9b3b67dc2ba95b4a56e7ec638c2 Mon Sep 17 00:00:00 2001 From: Joep Meindertsma Date: Fri, 16 May 2025 20:01:23 +0200 Subject: [PATCH 8/9] More better --- src/lib/components/SupplyChain.svelte | 169 ++++++-- src/lib/components/SupplyChainText.svelte | 66 ++-- src/lib/components/supply-chain/Modal.svelte | 15 +- src/lib/components/supply-chain/styles.css | 383 ------------------- src/routes/ai-chip-supply-chain/+page.svelte | 2 +- 5 files changed, 199 insertions(+), 436 deletions(-) delete mode 100644 src/lib/components/supply-chain/styles.css diff --git a/src/lib/components/SupplyChain.svelte b/src/lib/components/SupplyChain.svelte index bb38ce984..fa29d6e25 100644 --- a/src/lib/components/SupplyChain.svelte +++ b/src/lib/components/SupplyChain.svelte @@ -11,7 +11,6 @@ } from './supply-chain/utils' import Modal from './supply-chain/Modal.svelte' import NodeComponent from './supply-chain/Node.svelte' - import './supply-chain/styles.css' // Reactive state let selectedNodeId: string | null = null @@ -216,7 +215,7 @@
{#if edges.filter((e) => e.target === selectedNodeId).length > 0}
-

Incoming Connections:

+

Suppliers:

    {#each edges.filter((e) => e.target === selectedNodeId) as edge}
  • @@ -253,7 +252,7 @@ {#if edges.filter((e) => e.source === selectedNodeId).length > 0}
    -

    Outgoing Connections:

    +

    Customers:

      {#each edges.filter((e) => e.source === selectedNodeId) as edge}
    • @@ -369,7 +368,7 @@ .graph-container { display: inline-block; position: relative; - background: white; + background: var(--bg); box-sizing: border-box; } @@ -387,10 +386,11 @@ font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; + color: var(--text); } .description { - color: #666; + color: var(--brand-subtle); margin-bottom: 1rem; } @@ -407,7 +407,7 @@ } .edge-group:hover line { - stroke: #000; + stroke: var(--text); } .modal-details { @@ -416,7 +416,7 @@ } .modal-detail-item { - color: #374151; + color: var(--text); margin-bottom: 0.25rem; } @@ -433,7 +433,7 @@ align-items: center; gap: 0.5rem; font-size: 0.875rem; - color: #666; + color: var(--brand-subtle); } .legend-swatch { @@ -445,14 +445,14 @@ .modal-subtitle { font-size: 0.875rem; font-weight: bold; - color: #4b5563; + color: var(--text); margin-top: 1rem; margin-bottom: 0.5rem; } .modal-connections { margin-top: 1.5rem; - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--brand-subtle); padding-top: 1rem; } @@ -487,26 +487,26 @@ } .connection-button:hover { - background-color: #f3f4f6; + background-color: var(--bg-subtle); } .connection-button:focus { - outline: 2px solid #2563eb; + outline: 2px solid var(--brand); outline-offset: 2px; } .connection-label { font-weight: 500; - color: #2563eb; + color: var(--brand); min-width: 80px; } .connection-arrow { - color: #6b7280; + color: var(--brand-subtle); } .connection-description { - color: #4b5563; + color: var(--text); flex: 1; } @@ -514,7 +514,7 @@ margin: 0.25rem 0 0 0; padding-left: 1.25rem; font-size: 0.8em; - color: #2563eb; + color: var(--brand); } .connection-links li { @@ -522,26 +522,145 @@ } .connection-links a { - color: #2563eb; + color: var(--brand); text-decoration: underline; word-break: break-all; } .connection-links a:hover { - color: #1d4ed8; + color: var(--brand-subtle); } .connection-sources { margin-top: 0.5rem; font-size: 0.9em; - color: #374151; + color: var(--text); } - :global(body) { - margin: 0; - font-family: - system-ui, - -apple-system, - sans-serif; + /* Node color classes */ + :global(.node-equipment) { + background-color: hsl(230, 100%, 95%); + border: 2px solid hsl(230, 100%, 60%); + } + + :global(.node-equipment:hover) { + background-color: hsl(230, 100%, 85%); + border-color: hsl(230, 100%, 50%); + } + + :global(.node-foundry) { + background-color: hsl(30, 100%, 95%); + border: 2px solid hsl(30, 100%, 60%); + } + + :global(.node-foundry:hover) { + background-color: hsl(30, 100%, 85%); + border-color: hsl(30, 100%, 50%); + } + + :global(.node-design) { + background-color: hsl(0, 100%, 95%); + border: 2px solid hsl(0, 100%, 60%); + } + + :global(.node-design:hover) { + background-color: hsl(0, 100%, 85%); + border-color: hsl(0, 100%, 50%); + } + + :global(.node-eda) { + background-color: hsl(150, 100%, 95%); + border: 2px solid hsl(150, 100%, 60%); + } + + :global(.node-eda:hover) { + background-color: hsl(150, 100%, 85%); + border-color: hsl(150, 100%, 50%); + } + + :global(.node-memory) { + background-color: hsl(60, 100%, 95%); + border: 2px solid hsl(60, 100%, 60%); + } + + :global(.node-memory:hover) { + background-color: hsl(60, 100%, 85%); + border-color: hsl(60, 100%, 50%); + } + + :global(.node-assembly) { + background-color: hsl(210, 100%, 95%); + border: 2px solid hsl(210, 100%, 60%); + } + + :global(.node-assembly:hover) { + background-color: hsl(210, 100%, 85%); + border-color: hsl(210, 100%, 50%); + } + + :global(.node-end) { + background-color: hsl(270, 100%, 95%); + border: 2px solid hsl(270, 100%, 60%); + } + + :global(.node-end:hover) { + background-color: hsl(270, 100%, 85%); + border-color: hsl(270, 100%, 50%); + } + + /* Dark mode overrides */ + :global([color-scheme='dark']) .node-equipment { + background-color: hsl(230, 100%, 20%); + border-color: hsl(230, 100%, 40%); + } + + :global([color-scheme='dark']) .node-foundry { + background-color: hsl(30, 100%, 20%); + border-color: hsl(30, 100%, 40%); + } + + :global([color-scheme='dark']) .node-design { + background-color: hsl(0, 100%, 20%); + border-color: hsl(0, 100%, 40%); + } + + :global([color-scheme='dark']) .node-eda { + background-color: hsl(150, 100%, 20%); + border-color: hsl(150, 100%, 40%); + } + + :global([color-scheme='dark']) .node-memory { + background-color: hsl(60, 100%, 20%); + border-color: hsl(60, 100%, 40%); + } + + :global([color-scheme='dark']) .node-assembly { + background-color: hsl(210, 100%, 20%); + border-color: hsl(210, 100%, 40%); + } + + :global([color-scheme='dark']) .node-end { + background-color: hsl(270, 100%, 20%); + border-color: hsl(270, 100%, 40%); + } + + /* Node text color for contrast */ + :global(.node) { + color: #111 !important; + } + + /* Modal dark mode overrides */ + :global([color-scheme='dark']) .modal-content, + :global([color-scheme='dark']) dialog[open].modal { + background: #18181b !important; + color: #f3f4f6 !important; + } + :global([color-scheme='dark']) .modal-title, + :global([color-scheme='dark']) .modal-description, + :global([color-scheme='dark']) .modal-detail-item { + color: #f3f4f6 !important; + } + :global([color-scheme='dark']) dialog[open].modal::backdrop { + background: rgba(0, 0, 0, 0.8) !important; } diff --git a/src/lib/components/SupplyChainText.svelte b/src/lib/components/SupplyChainText.svelte index 48b5c3920..a6bf6c0d4 100644 --- a/src/lib/components/SupplyChainText.svelte +++ b/src/lib/components/SupplyChainText.svelte @@ -35,9 +35,11 @@ // Category titles const categoryTitles: Record = { - litho: 'Lithography Equipment', - fab: 'Foundries', + equipment: 'Equipment', + foundry: 'Foundries', design: 'Chip Designers', + eda: 'EDA', + memory: 'Memory', assembly: 'Assembly & Testing', end: 'AI Labs & End Users' } @@ -47,8 +49,8 @@ {#each Object.entries(nodesByCategory) as [category, categoryNodes]}

      {categoryTitles[category]}

      {#each Object.values(categoryNodes) as node} -
      -

      {nodeInfo[node.id].title}

      +
      +

      {nodeInfo[node.id].title}

      {nodeInfo[node.id].description}

      {#if nodeInfo[node.id].details.length > 0} @@ -60,23 +62,14 @@ {/if} {#if getOutgoingEdges(node.id).length > 0} -

      Outgoing Connections:

      +

      Customers:

        {#each getOutgoingEdges(node.id) as edge}
      • - {nodes[edge.target].label}: - {edge.description} -
        • - {/each} -
      - {/if} - - {#if getIncomingEdges(node.id).length > 0} -

      Incoming Connections:

      -
        - {#each getIncomingEdges(node.id) as edge} -
      • - {nodes[edge.source].label}: + {nodes[edge.target].label}: {edge.description}
        • {/each} @@ -97,10 +90,11 @@ {/each} {/each}
      +Back to top ↑ diff --git a/src/lib/components/supply-chain/Modal.svelte b/src/lib/components/supply-chain/Modal.svelte index 9c205c5a6..42599c598 100644 --- a/src/lib/components/supply-chain/Modal.svelte +++ b/src/lib/components/supply-chain/Modal.svelte @@ -56,7 +56,8 @@ } .modal-content { - background: white; + background: var(--bg-secondary); + color: var(--text); border-radius: 0.5rem; padding: 1.5rem; width: 28rem; @@ -100,16 +101,22 @@ } .modal-close { - color: #6b7280; + color: var(--text); cursor: pointer; } .modal-close:hover { - color: #374151; + color: var(--brand); } .modal-description { - color: #666; + color: var(--text); margin-bottom: 1rem; } + + .modal-title, + .modal-description, + .modal-detail-item { + color: var(--text); + } diff --git a/src/lib/components/supply-chain/styles.css b/src/lib/components/supply-chain/styles.css deleted file mode 100644 index 1d1993bf5..000000000 --- a/src/lib/components/supply-chain/styles.css +++ /dev/null @@ -1,383 +0,0 @@ -.container { - width: 100%; - max-width: 1200px; - margin: 0 auto; - padding: 2rem 0; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; -} - -.graph-container { - display: inline-block; - position: relative; - background: white; - box-sizing: border-box; -} - -.header { - margin-bottom: 2rem; -} - -.title { - font-size: 1.5rem; - font-weight: bold; - margin-bottom: 1rem; -} - -.description { - color: #666; - margin-bottom: 1rem; -} - -.edges { - position: absolute; - top: 0; - left: 0; - pointer-events: none; - z-index: 1; -} - -.node { - position: absolute; - cursor: pointer; - border-radius: 0.5rem; - padding: 0.5rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - transition: all 0.2s ease; - width: 100px; - text-align: center; - z-index: 2; - margin: 0; -} - -.node:hover { - transform: scale(1.05); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); -} - -.node-label { - font-size: 0.75rem; - font-weight: 500; -} - -.node-litho { - background-color: #fef3c7; - border: 2px solid #fcd34d; -} - -.node-litho:hover { - background-color: #fde68a; - border-color: #f59e0b; -} - -.node-fab { - background-color: #fed7aa; - border: 2px solid #fb923c; -} - -.node-fab:hover { - background-color: #fdba74; - border-color: #ea580c; -} - -.node-design { - background-color: #fee2e2; - border: 2px solid #fca5a5; -} - -.node-design:hover { - background-color: #fecaca; - border-color: #ef4444; -} - -.node-assembly { - background-color: #dbeafe; - border: 2px solid #93c5fd; -} - -.node-assembly:hover { - background-color: #bfdbfe; - border-color: #3b82f6; -} - -.node-end { - background-color: #f3e8ff; - border: 2px solid #d8b4fe; -} - -.node-end:hover { - background-color: #e9d5ff; - border-color: #a855f7; -} - -.node-equipment { - background-color: #e0e7ff; - border: 2px solid #6366f1; -} - -.node-equipment:hover { - background-color: #c7d2fe; - border-color: #4338ca; -} - -.node-foundry { - background-color: #fed7aa; - border: 2px solid #fb923c; -} - -.node-foundry:hover { - background-color: #fdba74; - border-color: #ea580c; -} - -.node-eda { - background-color: #f0fdf4; - border: 2px solid #34d399; -} - -.node-eda:hover { - background-color: #bbf7d0; - border-color: #059669; -} - -.node-memory { - background-color: #fef9c3; - border: 2px solid #fde047; -} - -.node-memory:hover { - background-color: #fef08a; - border-color: #ca8a04; -} - -.modal { - position: fixed; - inset: 0; - background: transparent; - display: flex; - align-items: center; - justify-content: center; - z-index: 50; - border: none; - padding: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -.modal::backdrop { - background: rgba(0, 0, 0, 0.5); - animation: fade-in 0.2s ease-out; -} - -@keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.modal-content { - background: white; - border-radius: 0.5rem; - padding: 1.5rem; - width: 28rem; - margin: 1rem; - animation: fade-in 0.2s ease-out; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - max-height: calc(100vh - 2rem); - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: #cbd5e1 #f1f5f9; -} - -.modal-content::-webkit-scrollbar { - width: 8px; -} - -.modal-content::-webkit-scrollbar-track { - background: #f1f5f9; - border-radius: 4px; -} - -.modal-content::-webkit-scrollbar-thumb { - background-color: #cbd5e1; - border-radius: 4px; -} - -.modal-content::-webkit-scrollbar-thumb:hover { - background-color: #94a3b8; -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 1rem; -} - -.modal-title { - font-size: 1.25rem; - font-weight: bold; -} - -.modal-close { - color: #6b7280; - cursor: pointer; -} - -.modal-close:hover { - color: #374151; -} - -.modal-description { - color: #666; - margin-bottom: 1rem; -} - -.modal-details { - list-style-type: disc; - padding-left: 1.25rem; -} - -.modal-detail-item { - color: #374151; - margin-bottom: 0.25rem; -} - -.legend { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 1rem; - margin: 2rem 0; -} - -.legend-item { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - color: #666; -} - -.legend-swatch { - width: 1.5rem; - height: 1rem; - border-radius: 0.25rem; -} - -.edge-group { - cursor: pointer; -} - -.edge-group:hover line { - stroke: #000; -} - -.modal-subtitle { - font-size: 0.875rem; - font-weight: bold; - color: #4b5563; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.modal-connections { - margin-top: 1.5rem; - border-top: 1px solid #e5e7eb; - padding-top: 1rem; -} - -.connection-section { - margin-bottom: 1rem; -} - -.connection-list { - list-style: none; - padding: 0; - margin: 0; -} - -.connection-item { - margin-bottom: 0.75rem; - font-size: 0.875rem; - line-height: 1.4; -} - -.connection-button { - display: flex; - align-items: flex-start; - gap: 0.5rem; - width: 100%; - text-align: left; - background: none; - border: none; - padding: 0.5rem; - border-radius: 0.25rem; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.connection-button:hover { - background-color: #f3f4f6; -} - -.connection-button:focus { - outline: 2px solid #2563eb; - outline-offset: 2px; -} - -.connection-label { - font-weight: 500; - color: #2563eb; - min-width: 80px; -} - -.connection-arrow { - color: #6b7280; -} - -.connection-description { - color: #4b5563; - flex: 1; -} - -.connection-links { - margin: 0.25rem 0 0 0; - padding-left: 1.25rem; - font-size: 0.8em; - color: #2563eb; -} - -.connection-links li { - margin-bottom: 0.1rem; -} - -.connection-links a { - color: #2563eb; - text-decoration: underline; - word-break: break-all; -} - -.connection-links a:hover { - color: #1d4ed8; -} - -.connection-sources { - margin-top: 0.5rem; - font-size: 0.9em; - color: #374151; -} - -:global(body) { - margin: 0; - font-family: - system-ui, - -apple-system, - sans-serif; -} diff --git a/src/routes/ai-chip-supply-chain/+page.svelte b/src/routes/ai-chip-supply-chain/+page.svelte index 74adbe2ff..0a93a724f 100644 --- a/src/routes/ai-chip-supply-chain/+page.svelte +++ b/src/routes/ai-chip-supply-chain/+page.svelte @@ -3,7 +3,7 @@ import SupplyChainText from '$lib/components/SupplyChainText.svelte' -
      +
      From 2d3c8fdb8caa0700ac1ba0d53ff9cec252e0028c Mon Sep 17 00:00:00 2001 From: Joep Meindertsma Date: Thu, 22 May 2025 14:47:46 +0200 Subject: [PATCH 9/9] Merge EDA / mem --- src/lib/components/SupplyChain.svelte | 38 +++++++++++++++--------- src/lib/components/supply-chain/data.ts | 19 ++++++------ src/lib/components/supply-chain/types.ts | 2 +- 3 files changed, 34 insertions(+), 25 deletions(-) diff --git a/src/lib/components/SupplyChain.svelte b/src/lib/components/SupplyChain.svelte index fa29d6e25..8864889fa 100644 --- a/src/lib/components/SupplyChain.svelte +++ b/src/lib/components/SupplyChain.svelte @@ -18,7 +18,7 @@ // Container size state let graphContainer: HTMLDivElement - let containerWidth = 1600 // default fallback + let containerWidth = 1200 // default fallback let containerHeight = 600 // default fallback // Dynamic vertical spacing const minNodeSpacing = 80 @@ -40,28 +40,35 @@ }) // Define column positions (as fractions of width) - const columns = { - equipment: 0.08, - foundry: 0.2, - design: 0.34, - eda: 0.46, - memory: 0.58, - assembly: 0.72, - end: 0.88 - } + const columnKeys = ['equipment', 'foundry', 'design', 'eda_memory', 'assembly', 'end'] as const + const columns = Object.fromEntries( + columnKeys.map((key, i) => [key, i / (columnKeys.length - 1)]) + ) as Record<(typeof columnKeys)[number], number> // Group nodes by category - const nodesByCategory: Record = {} + const nodesByCategory: Record = { + equipment: [], + foundry: [], + design: [], + eda_memory: [], + assembly: [], + end: [] + } + + function isColumnCategory(category: string): category is keyof typeof columns { + return Object.keys(columns).includes(category) + } + Object.values(nodes).forEach((node) => { - if (!nodesByCategory[node.category]) { - nodesByCategory[node.category] = [] + if (isColumnCategory(node.category)) { + nodesByCategory[node.category].push(node) } - nodesByCategory[node.category].push(node) }) // Update node positions (in pixels) function updateNodePositions() { Object.entries(nodesByCategory).forEach(([category, categoryNodes]) => { + if (!(category in columns)) return // Only position categories that have a column categoryNodes.forEach((node, index) => { node.x = getXPosition( columns[category as keyof typeof columns], @@ -370,6 +377,9 @@ position: relative; background: var(--bg); box-sizing: border-box; + max-width: 1200px; + width: 95vw; + margin: 0 auto; } @media (max-width: 600px) { diff --git a/src/lib/components/supply-chain/data.ts b/src/lib/components/supply-chain/data.ts index febf047f0..f3d3838dc 100644 --- a/src/lib/components/supply-chain/data.ts +++ b/src/lib/components/supply-chain/data.ts @@ -26,12 +26,12 @@ export const nodes: Record = { CEREBRAS: { id: 'CEREBRAS', label: 'Cerebras', category: 'design' }, HUAWEI: { id: 'HUAWEI', label: 'Huawei', category: 'design' }, ARM: { id: 'ARM', label: 'ARM', category: 'design' }, - CADENCE: { id: 'CADENCE', label: 'Cadence', category: 'eda' }, - SYNOPSYS: { id: 'SYNOPSYS', label: 'Synopsys', category: 'eda' }, + CADENCE: { id: 'CADENCE', label: 'Cadence', category: 'eda_memory' }, + SYNOPSYS: { id: 'SYNOPSYS', label: 'Synopsys', category: 'eda_memory' }, // Memory - MICRON: { id: 'MICRON', label: 'Micron', category: 'memory' }, - SKHYNIX: { id: 'SKHYNIX', label: 'SK Hynix', category: 'memory' }, + MICRON: { id: 'MICRON', label: 'Micron', category: 'eda_memory' }, + SKHYNIX: { id: 'SKHYNIX', label: 'SK Hynix', category: 'eda_memory' }, // Assembly / OSAT ASE: { id: 'ASE', label: 'ASE (Foxconn)', category: 'assembly' }, @@ -397,7 +397,7 @@ export const edges: Edge[] = [ target: 'INTEL_FAB', links: null, description: - 'Intel’s new Arizona and Ohio fabs deploy Applied Materials platforms for GAAFET manufacturing.', + "Intel's new Arizona and Ohio fabs deploy Applied Materials platforms for GAAFET manufacturing.", weight: 8 }, { @@ -405,7 +405,7 @@ export const edges: Edge[] = [ target: 'TSMC', links: null, description: - 'KLA’s inspection & metrology systems are indispensable for TSMC yield‑ramp at 3 nm and below.', + "KLA's inspection & metrology systems are indispensable for TSMC yield‑ramp at 3 nm and below.", weight: 8 }, { @@ -431,7 +431,7 @@ export const edges: Edge[] = [ target: 'NVIDIA', links: null, description: - 'SK Hynix is the primary HBM3 supplier for Nvidia’s Hopper GPUs and early Blackwell shipments.', + "SK Hynix is the primary HBM3 supplier for Nvidia's Hopper GPUs and early Blackwell shipments.", weight: 7 }, @@ -493,7 +493,7 @@ export const edges: Edge[] = [ source: 'AMD', target: 'AZURE', links: null, - description: 'Azure is an early customer of AMD’s MI300A/X for its Maia super‑clusters.', + description: "Azure is an early customer of AMD's MI300A/X for its Maia super‑clusters.", weight: 6 }, { @@ -874,8 +874,7 @@ export const categoryColors = { equipment: 'node-equipment', foundry: 'node-foundry', design: 'node-design', - eda: 'node-eda', - memory: 'node-memory', + eda_memory: 'node-eda', assembly: 'node-assembly', end: 'node-end' } as const diff --git a/src/lib/components/supply-chain/types.ts b/src/lib/components/supply-chain/types.ts index ddac99e6b..c8e7eb430 100644 --- a/src/lib/components/supply-chain/types.ts +++ b/src/lib/components/supply-chain/types.ts @@ -1,7 +1,7 @@ export interface Node { id: string label: string - category: 'equipment' | 'foundry' | 'design' | 'eda' | 'memory' | 'assembly' | 'end' + category: 'equipment' | 'foundry' | 'design' | 'eda_memory' | 'assembly' | 'end' x?: number y?: number }