ez-reads 1.0.0

package/template/src/data/paper.json

@@ -0,0 +1,53 @@
+{
+  "title": "Attention Is All You Need",
+  "authors": ["Ashish Vaswani", "Noam Shazeer", "Niki Parmar", "Jakob Uszkoreit", "Llion Jones", "Aidan N. Gomez", "Lukasz Kaiser", "Illia Polosukhin"],
+  "tldr": "This paper introduces the Transformer, a novel architecture that replaces recurrence and convolution entirely with self-attention mechanisms, achieving state-of-the-art results in machine translation while being significantly more parallelizable.",
+  "analogy": "Imagine translating a book: traditional approaches read word-by-word sequentially (like reading aloud), which is slow and makes it hard to connect a word on page 50 to a key term on page 2. The Transformer instead spreads the entire book on a table and lets every word simultaneously look at every other word, picking out the relevant connections in parallel — like having a team of readers each tracking different threads across the whole text at once.",
+  "abstract_simplified": "Sequential models like RNNs process language one word at a time, creating a bottleneck that limits both training speed and the ability to capture long-range dependencies. This paper proposes the Transformer, a model architecture that dispenses with recurrence entirely, relying instead on a mechanism called self-attention that lets every position in a sequence attend to every other position simultaneously. On English-to-German translation, the Transformer achieves a BLEU score of 28.4, surpassing all prior models including ensembles. Beyond raw performance, the architecture trains in a fraction of the time — 3.5 days on 8 GPUs versus weeks for competing approaches. The Transformer's design has since become the foundation of modern NLP.",
+  "key_contributions": [
+    { "emoji": "🔄", "title": "Pure Attention Architecture", "description": "The Transformer is the first sequence transduction model based entirely on attention, eliminating recurrent and convolutional layers. This is a fundamental departure from the prevailing wisdom that sequential processing was necessary for language. By removing the sequential bottleneck, the architecture can process all positions in parallel, enabling dramatically faster training while maintaining or improving quality." },
+    { "emoji": "🔍", "title": "Multi-Head Attention", "description": "Rather than computing a single attention function, the model projects queries, keys, and values into multiple parallel 'heads' that each attend to different representation subspaces. This allows the model to jointly attend to information at different positions from different perspectives — for example, one head might track syntactic structure while another tracks semantic similarity. The multi-head design consistently outperforms single-head attention of equivalent dimension." },
+    { "emoji": "📐", "title": "Positional Encoding", "description": "Since the model contains no recurrence or convolution, it has no inherent notion of word order. The authors introduce sinusoidal positional encodings — fixed functions of position that are added to the input embeddings. The sinusoidal design was chosen because it allows the model to generalize to sequence lengths not seen during training, since relative positions can be expressed as linear functions of the encodings." }
+  ],
+  "methodology": {
+    "summary": "The Transformer uses an encoder-decoder structure where both halves are built entirely from stacked self-attention and feed-forward layers. The encoder maps an input sequence to continuous representations, and the decoder generates the output sequence one token at a time, attending to both the encoder output and its own previously generated tokens. The key innovation is that every layer uses attention rather than recurrence, enabling full parallelization during training.",
+    "steps": [
+      { "emoji": "🔢", "label": "Input Embedding & Positional Encoding", "detail": "Input tokens are mapped to 512-dimensional vectors via learned embeddings, then summed with sinusoidal positional encodings. The positional signals use sine and cosine functions at geometrically increasing frequencies, creating unique position signatures. This approach was chosen over learned positional embeddings because it can extrapolate to sequence lengths beyond those seen in training — the geometric frequency spacing means relative position information is preserved regardless of absolute position." },
+      { "emoji": "🏗️", "label": "Encoder Stack (6 Layers)", "detail": "Each of the 6 encoder layers applies two sub-operations: multi-head self-attention followed by a position-wise feed-forward network. Both sub-layers use residual connections and layer normalization. The self-attention lets each word build a representation that incorporates context from the entire input sentence, while the feed-forward network (two linear transformations with ReLU) adds non-linear processing capacity. Stacking 6 layers creates increasingly abstract representations." },
+      { "emoji": "🎯", "label": "Scaled Dot-Product Attention", "detail": "The core attention mechanism computes compatibility scores between queries and keys using dot products, scaled by the square root of the key dimension. Scaling prevents the dot products from growing too large in magnitude, which would push the softmax into regions with extremely small gradients. The resulting attention weights are applied to values to produce the output. This mechanism runs in O(n²·d) time, which is faster than recurrent layers for typical sequence lengths." },
+      { "emoji": "🔀", "label": "Multi-Head Projection", "detail": "Instead of one attention pass over 512 dimensions, the model runs 8 parallel attention heads, each operating on a 64-dimensional projection. Each head learns to attend to different aspects of the input — empirically, heads specialize in syntactic roles, coreference, and other linguistic phenomena. The outputs are concatenated and linearly projected back to the model dimension. This is both computationally equivalent to single-head attention and strictly more expressive." },
+      { "emoji": "📝", "label": "Decoder Stack with Masking", "detail": "The decoder mirrors the encoder but adds a third sub-layer: cross-attention over the encoder output. Crucially, self-attention in the decoder is masked so each position can only attend to earlier positions, preserving the autoregressive property needed for generation. This masking is implemented by setting future positions to negative infinity before softmax, effectively zeroing out those attention weights. The cross-attention layer is what allows the decoder to condition on the full source sequence." }
+    ]
+  },
+  "results": [
+    { "emoji": "🏆", "finding": "State-of-the-art English-to-German translation", "detail": "The big Transformer achieves 28.4 BLEU on WMT 2014 English-to-German, exceeding the previous best models (including ensembles) by over 2 BLEU points. This is notable because the model is a single system, not an ensemble, yet it surpasses ensemble approaches that combine multiple independently trained models. The improvement demonstrates that architectural innovation, not just scaling, can drive meaningful quality gains." },
+    { "emoji": "⚡", "finding": "Dramatically faster training", "detail": "The base model requires only 12 hours of training on 8 P100 GPUs (0.5 days), while the big model takes 3.5 days. By comparison, competitive recurrent models required weeks of training. The parallelization advantage comes from eliminating sequential dependencies — all positions in a layer can be computed simultaneously. This 10-100x training speed improvement makes it practical to iterate on model design and hyperparameters far more rapidly." },
+    { "emoji": "🔬", "finding": "Attention heads learn interpretable patterns", "detail": "Visualization of attention weights reveals that different heads specialize in distinct linguistic functions. Some heads track long-range syntactic dependencies (like subject-verb agreement across clauses), while others focus on local morphological patterns. This emergent specialization occurs without explicit supervision, suggesting that multi-head attention is an effective inductive bias for learning hierarchical language structure." }
+  ],
+  "stats": [
+    { "value": "28.4", "label": "BLEU (EN→DE)", "context": "Surpasses the previous best single model by over 2 BLEU points and outperforms ensemble approaches, setting a new state of the art on WMT 2014." },
+    { "value": "3.5 days", "label": "Training time (big model)", "context": "Trained on 8 GPUs in 3.5 days — roughly 10-100x faster than competing recurrent architectures that required weeks of training." },
+    { "value": "8", "label": "Attention heads", "context": "8 parallel attention heads per layer, each learning different linguistic patterns. Ablations show this outperforms both fewer and more heads." }
+  ],
+  "significance": "The Transformer fundamentally changed the trajectory of natural language processing and, eventually, all of deep learning. By proving that attention alone — without recurrence — could achieve superior results, it removed the sequential bottleneck that had limited both the scale and speed of language models. This architecture directly enabled the development of BERT, GPT, and every major large language model that followed. Beyond NLP, the Transformer's design has been adopted in computer vision (Vision Transformer), protein structure prediction (AlphaFold), and audio generation, establishing it as perhaps the most influential neural architecture of the decade.",
+  "limitations": [
+    "Self-attention has O(n²) memory and compute complexity in sequence length, making it expensive for very long sequences (e.g., full documents or genomic data). This has spawned an entire subfield of efficient attention variants.",
+    "The model was evaluated primarily on machine translation; its effectiveness on other tasks required subsequent work (BERT, GPT) to demonstrate.",
+    "Positional encodings are added rather than integrated into the architecture, and the sinusoidal scheme captures only absolute position. Later work showed that relative positional encodings (like RoPE) can be more effective.",
+    "The autoregressive decoder generates tokens one at a time during inference, creating a sequential bottleneck at generation time even though training is fully parallel."
+  ],
+  "glossary": [
+    { "term": "Self-Attention", "definition": "A mechanism where each element in a sequence computes attention weights over all other elements in the same sequence, building context-aware representations. Unlike recurrence (which propagates information step-by-step), self-attention provides direct connections between any two positions, making it particularly effective for capturing long-range dependencies." },
+    { "term": "Multi-Head Attention", "definition": "An extension of attention that runs multiple attention functions in parallel on different learned projections of the input. Each 'head' can specialize in different types of relationships (syntactic, semantic, positional), and their outputs are concatenated to form a richer representation than any single attention pass." },
+    { "term": "BLEU Score", "definition": "Bilingual Evaluation Understudy — a metric for evaluating machine translation quality by measuring n-gram overlap between the model's output and reference translations. Scores range from 0 to 100; differences of 1-2 points are generally considered significant in competitive benchmarks." },
+    { "term": "Positional Encoding", "definition": "A signal added to input embeddings to provide sequence order information to models that have no inherent notion of position (like the Transformer). Sinusoidal encodings use trigonometric functions at different frequencies, creating unique signatures for each position that also encode relative distance information." },
+    { "term": "Residual Connection", "definition": "A shortcut connection that adds a layer's input directly to its output (x + sublayer(x)). This helps gradients flow through deep networks during training and allows each layer to learn a refinement of its input rather than a complete transformation, making optimization easier." },
+    { "term": "Layer Normalization", "definition": "A normalization technique that standardizes activations across the feature dimension within each training example. Applied after residual connections in the Transformer, it stabilizes training by reducing sensitivity to the scale of inputs and gradients." }
+  ],
+  "color_theme": {
+    "primary": "#2563eb",
+    "accent": "#f59e0b"
+  },
+  "publishedDate": "2017-06-12",
+  "url": "https://arxiv.org/abs/1706.03762"
+}

package/template/src/index.css

@@ -0,0 +1,327 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary: #2563eb;
+  --color-accent: #f59e0b;
+}
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f8fafc;
+}
+
+/* Scroll animations */
+.fade-in {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+}
+.fade-in.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.slide-left {
+  opacity: 0;
+  transform: translateX(-40px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+.slide-left.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.slide-right {
+  opacity: 0;
+  transform: translateX(40px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+.slide-right.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.scale-in {
+  opacity: 0;
+  transform: scale(0.85);
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.scale-in.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Stagger children animations */
+.stagger-children.visible > * {
+  opacity: 1;
+  transform: translateY(0);
+}
+.stagger-children > * {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.stagger-children > *:nth-child(1) { transition-delay: 0.05s; }
+.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
+.stagger-children > *:nth-child(3) { transition-delay: 0.15s; }
+.stagger-children > *:nth-child(4) { transition-delay: 0.2s; }
+.stagger-children > *:nth-child(5) { transition-delay: 0.25s; }
+.stagger-children > *:nth-child(6) { transition-delay: 0.3s; }
+.stagger-children > *:nth-child(7) { transition-delay: 0.35s; }
+.stagger-children > *:nth-child(8) { transition-delay: 0.4s; }
+
+/* Hero gradient */
+.gradient-hero {
+  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 50%, #1e1b4b) 100%);
+  position: relative;
+  overflow: hidden;
+}
+.gradient-hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 50%),
+              radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, transparent 50%);
+}
+
+/* Accent surfaces */
+.accent-bar {
+  background: linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 70%, var(--color-primary)) 100%);
+}
+.primary-glow {
+  box-shadow: 0 0 40px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+/* Animated counter */
+@keyframes countPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}
+.stat-value {
+  animation: countPulse 2s ease-in-out infinite;
+}
+
+/* Timeline connector */
+.timeline-dot::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: 2px;
+  height: calc(100% + 1.5rem);
+  transform: translateX(-50%);
+  background: linear-gradient(to bottom, var(--color-primary), color-mix(in srgb, var(--color-primary) 20%, transparent));
+}
+.timeline-dot:last-child::before {
+  display: none;
+}
+
+/* Floating blob animation */
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  33% { transform: translateY(-8px) rotate(2deg); }
+  66% { transform: translateY(4px) rotate(-1deg); }
+}
+.float {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* Glossary tooltip hover */
+.glossary-card {
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.glossary-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12);
+}
+
+/* ── Chat Assistant ── */
+.chat-fab {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 1000;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: var(--color-accent);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+  transition: transform 0.2s, box-shadow 0.2s;
+  animation: fabPulse 3s ease-in-out infinite;
+}
+.chat-fab:hover {
+  transform: scale(1.08);
+  box-shadow: 0 6px 28px rgba(0,0,0,0.3);
+  animation: none;
+}
+@keyframes fabPulse {
+  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
+  50% { box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 8px color-mix(in srgb, var(--color-accent) 20%, transparent); }
+}
+
+.chat-panel {
+  position: fixed;
+  bottom: 5.5rem;
+  right: 1.5rem;
+  z-index: 1000;
+  width: 380px;
+  max-height: 520px;
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.25);
+  border: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  animation: chatSlideUp 0.25s ease-out;
+  overflow: hidden;
+}
+@keyframes chatSlideUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid #f1f5f9;
+  background: #f8fafc;
+}
+.chat-header-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #334155;
+}
+.chat-close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #94a3b8;
+  padding: 2px;
+  border-radius: 4px;
+  display: flex;
+  transition: color 0.15s;
+}
+.chat-close-btn:hover { color: #475569; }
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  min-height: 200px;
+  max-height: 340px;
+}
+
+.chat-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 120px;
+  color: #94a3b8;
+  font-size: 0.88rem;
+}
+
+.chat-bubble {
+  max-width: 85%;
+  padding: 0.6rem 0.85rem;
+  border-radius: 1rem;
+  font-size: 0.85rem;
+  line-height: 1.55;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.chat-bubble.user {
+  align-self: flex-end;
+  background: var(--color-accent);
+  color: #fff;
+  border-bottom-right-radius: 4px;
+}
+.chat-bubble.assistant {
+  align-self: flex-start;
+  background: #f1f5f9;
+  color: #334155;
+  border-bottom-left-radius: 4px;
+}
+
+.chat-input-area {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid #f1f5f9;
+}
+.chat-input {
+  flex: 1;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+  color: #1e293b;
+}
+.chat-input::placeholder { color: #94a3b8; }
+.chat-input:focus { border-color: var(--color-accent); }
+.chat-send-btn {
+  background: var(--color-accent);
+  border: none;
+  border-radius: 0.5rem;
+  padding: 0.45rem 0.6rem;
+  cursor: pointer;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s;
+}
+.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.chat-send-btn:not(:disabled):hover { opacity: 0.85; }
+
+/* Typing indicator */
+.typing-indicator {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 2px 0;
+}
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #94a3b8;
+  animation: typingBounce 1.2s infinite;
+}
+.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes typingBounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-4px); }
+}
+
+@media (max-width: 480px) {
+  .chat-panel {
+    width: calc(100vw - 2rem);
+    right: 1rem;
+    bottom: 5rem;
+    max-height: 70vh;
+  }
+}

package/template/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/template/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

package/template/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  base: './',
+});