Add Shared Layout tab with GPU memory swizzle visualization

index.html

@@ -113,7 +113,143 @@ <h3>Tensor Shape</h3>
     </div>
 
     <div class="tab-content" id="shared-layout">
-      <div class="placeholder"></div>
+      <div class="content">
+        <aside class="sidebar">
+          <h2>Shared Layout Parameters</h2>
+          <form id="sharedForm">
+            <div class="form-section">
+              <h3>Swizzle Mode</h3>
+              <div class="form-row">
+                <label>
+                  Mode:
+                  <select id="shared-swizzle-mode">
+                    <option value="swizzled" selected>Swizzled</option>
+                    <option value="amdRotating">AMD Rotating</option>
+                  </select>
+                </label>
+              </div>
+            </div>
+
+            <div class="form-section">
+              <h3>View Mode</h3>
+              <div class="form-row">
+                <label>
+                  View:
+                  <select id="shared-view-mode">
+                    <option value="logical" selected>Logical View</option>
+                    <option value="bank" disabled>Bank View (Coming Soon)</option>
+                  </select>
+                </label>
+              </div>
+            </div>
+
+            <div class="form-section">
+              <h3>Swizzle Parameters</h3>
+              <div class="form-row">
+                <label>
+                  vec:
+                  <select id="shared-vec">
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="4" selected>4</option>
+                    <option value="8">8</option>
+                    <option value="16">16</option>
+                  </select>
+                </label>
+                <label>
+                  perPhase:
+                  <select id="shared-per-phase">
+                    <option value="1">1</option>
+                    <option value="2" selected>2</option>
+                    <option value="4">4</option>
+                    <option value="8">8</option>
+                    <option value="16">16</option>
+                  </select>
+                </label>
+              </div>
+              <div class="form-row">
+                <label>
+                  maxPhase:
+                  <select id="shared-max-phase">
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="4" selected>4</option>
+                    <option value="8">8</option>
+                    <option value="16">16</option>
+                  </select>
+                </label>
+                <label>
+                  order:
+                  <select id="shared-order">
+                    <option value="0,1">[0,1]</option>
+                    <option value="1,0" selected>[1,0]</option>
+                  </select>
+                </label>
+              </div>
+            </div>
+
+            <div class="form-section">
+              <h3>Tensor Shape</h3>
+              <div class="form-row">
+                <label>
+                  Rows:
+                  <input type="number" id="shared-rows" value="128">
+                </label>
+                <label>
+                  Cols:
+                  <input type="number" id="shared-cols" value="64">
+                </label>
+              </div>
+            </div>
+
+            <div class="form-section">
+              <h3>Element Bits</h3>
+              <div class="form-row">
+                <label>
+                  Width:
+                  <select id="shared-element-bits">
+                    <option value="8">8</option>
+                    <option value="16" selected>16</option>
+                    <option value="32">32</option>
+                    <option value="64">64</option>
+                  </select>
+                </label>
+              </div>
+            </div>
+
+            <div id="shared-validation-errors" class="validation-errors"></div>
+            <div id="shared-validation-warnings" class="validation-warnings"></div>
+
+            <div class="form-section">
+              <h3>Bank Info</h3>
+              <div class="bank-info">
+                <div>
+                  <strong>Banks:</strong>
+                  <span id="shared-bank-count">32</span>
+                </div>
+                <div>
+                  <strong>Bank Size:</strong>
+                  <span id="shared-bank-size">32 bits</span>
+                </div>
+                <div>
+                  <strong>Elems/Bank:</strong>
+                  <span id="shared-elems-per-bank">64</span>
+                </div>
+                <div>
+                  <strong>Segments (Bank Row):</strong>
+                  <span id="shared-bank-segments">128</span>
+                </div>
+              </div>
+            </div>
+          </form>
+
+          <div class="controls" data-controls></div>
+        </aside>
+
+        <main class="visualization">
+          <canvas id="shared-canvas"></canvas>
+        </main>
+      </div>
     </div>
 
     <div class="tab-content" id="wmma-layout">

src/layouts/SharedLayout.bank.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest'
+import { assignBank, createSharedLayout, type SharedLayoutParams } from './SharedLayout'
+
+interface LayoutAccessor {
+  numCols: number
+  numRows: number
+  toOffset(row: number, col: number): number
+}
+
+function buildAccessor(params: SharedLayoutParams): LayoutAccessor {
+  const { layout, rowDimName, colDimName } = createSharedLayout(params)
+  const inverse = layout.invert()
+  const colIndex = params.order[0]
+  const rowIndex = params.order[1]
+  const numCols = params.tensorShape[colIndex]
+  const numRows = params.tensorShape[rowIndex]
+  return {
+    numCols,
+    numRows,
+    toOffset(row: number, col: number): number {
+      const inputs: Record<string, number> = {
+        [rowDimName]: row,
+        [colDimName]: col,
+      }
+      const { offset = 0 } = inverse.apply(inputs)
+      return offset
+    },
+  }
+}
+
+function rowMajorOffset(numCols: number, row: number, col: number): number {
+  return row * numCols + col
+}
+
+describe('SharedLayout bank distribution', () => {
+  it('reduces column-stripe bank conflicts compared to row-major', () => {
+    const params: SharedLayoutParams = {
+      tensorShape: [64, 64],
+      order: [0, 1],
+      vec: 8,
+      perPhase: 4,
+      maxPhase: 8,
+      swizzleMode: 'swizzled',
+    }
+    const accessor = buildAccessor(params)
+    const column = 0
+    const rows = Array.from({ length: 8 }, (_, idx) => idx)
+    const rowMajorBanks = rows.map((row) =>
+      assignBank(rowMajorOffset(accessor.numCols, row, column), 16).bank
+    )
+    const swizzledBanks = rows.map((row) => assignBank(accessor.toOffset(row, column), 16).bank)
+    expect(new Set(rowMajorBanks).size).toBe(1)
+    expect(new Set(swizzledBanks).size).toBeGreaterThan(new Set(rowMajorBanks).size)
+  })
+
+  it('assigns distinct banks to consecutive rows for 32-bit accesses', () => {
+    const params: SharedLayoutParams = {
+      tensorShape: [64, 64],
+      order: [0, 1],
+      vec: 4,
+      perPhase: 2,
+      maxPhase: 8,
+      swizzleMode: 'swizzled',
+    }
+    const accessor = buildAccessor(params)
+    const column = 5
+    const rows = [0, 1, 2, 3]
+    const rowMajorBanks = rows.map((row) =>
+      assignBank(rowMajorOffset(accessor.numCols, row, column), 32).bank
+    )
+    const banks = rows.map((row) => assignBank(accessor.toOffset(row, column), 32).bank)
+    expect(new Set(banks).size).toBeGreaterThan(new Set(rowMajorBanks).size)
+  })
+
+  it('spans multiple bank segments for large tensors', () => {
+    const params: SharedLayoutParams = {
+      tensorShape: [128, 128],
+      order: [0, 1],
+      vec: 16,
+      perPhase: 8,
+      maxPhase: 16,
+      swizzleMode: 'swizzled',
+    }
+    const accessor = buildAccessor(params)
+    const start = assignBank(accessor.toOffset(0, 0), 32)
+    const end = assignBank(accessor.toOffset(accessor.numRows - 1, accessor.numCols - 1), 32)
+    expect(end.segment).toBeGreaterThan(start.segment)
+  })
+
+  it('responds to custom bank topologies', () => {
+    const params: SharedLayoutParams = {
+      tensorShape: [64, 64],
+      order: [0, 1],
+      vec: 8,
+      perPhase: 4,
+      maxPhase: 8,
+      swizzleMode: 'swizzled',
+    }
+    const accessor = buildAccessor(params)
+    const columns = Array.from({ length: 64 }, (_, idx) => idx % accessor.numCols)
+    const offsets = columns.map((col) => accessor.toOffset(12, col))
+    const sixteenBanks = offsets.map((value) =>
+      assignBank(value, 32, { bankCount: 16, bankSizeBits: 32 }).bank
+    )
+    const sixtyFourBanks = offsets.map((value) =>
+      assignBank(value, 32, { bankCount: 64, bankSizeBits: 32 }).bank
+    )
+    expect(Math.max(...sixteenBanks)).toBeLessThan(16)
+    expect(Math.max(...sixtyFourBanks)).toBeLessThan(64)
+    expect(new Set(sixtyFourBanks).size).toBeGreaterThan(new Set(sixteenBanks).size)
+  })
+
+  it('varies bank coverage with element size', () => {
+    const params: SharedLayoutParams = {
+      tensorShape: [32, 128],
+      order: [0, 1],
+      vec: 8,
+      perPhase: 4,
+      maxPhase: 16,
+      swizzleMode: 'swizzled',
+    }
+    const accessor = buildAccessor(params)
+    const row = 10
+    const columns = Array.from({ length: 32 }, (_, idx) => idx)
+    const banks8 = columns.map((col) => assignBank(accessor.toOffset(row, col), 8).bank)
+    const banks64 = columns.map((col) => assignBank(accessor.toOffset(row, col), 64).bank)
+    expect(new Set(banks64).size).toBeGreaterThan(new Set(banks8).size)
+  })
+})