ez-reads 1.0.0

package/template/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "paper-site-template",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.14",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.4.2"
+  }
+}

package/template/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/src/App.jsx

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import paper from './data/paper.json';
+import Hero from './components/Hero';
+import Analogy from './components/Analogy';
+import Abstract from './components/Abstract';
+import Stats from './components/Stats';
+import KeyContributions from './components/KeyContributions';
+import Methodology from './components/Methodology';
+import Figures from './components/Figures';
+import Results from './components/Results';
+import Significance from './components/Significance';
+import Limitations from './components/Limitations';
+import Glossary from './components/Glossary';
+import Footer from './components/Footer';
+import ChatAssistant from './components/ChatAssistant';
+
+export default function App() {
+  useEffect(() => {
+    const root = document.documentElement;
+    if (paper.color_theme) {
+      root.style.setProperty('--color-primary', paper.color_theme.primary);
+      root.style.setProperty('--color-accent', paper.color_theme.accent);
+    }
+
+    // Observe all animated elements
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+          }
+        });
+      },
+      { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }
+    );
+
+    document.querySelectorAll('.fade-in, .slide-left, .slide-right, .scale-in, .stagger-children')
+      .forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gray-50 text-gray-900">
+      <Hero title={paper.title} authors={paper.authors} tldr={paper.tldr} publishedDate={paper.publishedDate} />
+      <main className="max-w-5xl mx-auto px-6 py-16 space-y-20">
+        <Analogy text={paper.analogy} />
+        <Abstract text={paper.abstract_simplified} />
+        <Stats items={paper.stats} />
+        <KeyContributions items={paper.key_contributions} />
+        <Methodology methodology={paper.methodology} />
+        <Figures items={paper.figures} />
+        <Results items={paper.results} />
+        <Significance text={paper.significance} />
+        <Limitations items={paper.limitations} />
+        <Glossary items={paper.glossary} />
+      </main>
+      <Footer url={paper.url} />
+      <ChatAssistant paper={paper} />
+    </div>
+  );
+}

package/template/src/components/Abstract.jsx

@@ -0,0 +1,18 @@
+export default function Abstract({ text }) {
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-4">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg"
+          style={{ backgroundColor: 'var(--color-primary)' }}
+        >
+          📖
+        </div>
+        <h2 className="text-2xl font-bold">Overview</h2>
+      </div>
+      <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 primary-glow">
+        <p className="text-lg leading-relaxed text-gray-700">{text}</p>
+      </div>
+    </section>
+  );
+}

package/template/src/components/Analogy.jsx

@@ -0,0 +1,20 @@
+export default function Analogy({ text }) {
+  if (!text) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="bg-gradient-to-br from-indigo-50 to-blue-50 rounded-2xl p-8 border border-indigo-200/60 relative overflow-hidden">
+        <div className="absolute top-4 right-4 text-6xl opacity-10">💡</div>
+        <div className="flex items-start gap-4">
+          <span className="text-3xl shrink-0 mt-1">🔑</span>
+          <div>
+            <h2 className="text-lg font-bold text-indigo-800 mb-2">
+              The Intuition
+            </h2>
+            <p className="text-lg leading-relaxed text-indigo-900/80">{text}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/components/ChatAssistant.jsx

@@ -0,0 +1,155 @@
+import { useState, useRef, useEffect } from 'react';
+
+function buildSystemPrompt(paper) {
+  const sections = [`You are a helpful research assistant for the paper: "${paper.title}".`];
+  if (paper.abstract_simplified) sections.push(`Abstract: ${paper.abstract_simplified}`);
+  if (paper.methodology) sections.push(`Methodology: ${paper.methodology}`);
+  if (paper.key_contributions?.length) sections.push(`Key contributions:\n${paper.key_contributions.map((c, i) => `${i + 1}. ${c}`).join('\n')}`);
+  if (paper.results?.length) sections.push(`Results:\n${paper.results.map((r, i) => `${i + 1}. ${r}`).join('\n')}`);
+  if (paper.significance) sections.push(`Significance: ${paper.significance}`);
+  if (paper.glossary?.length) sections.push(`Glossary:\n${paper.glossary.map(g => `- ${g.term}: ${g.definition}`).join('\n')}`);
+  sections.push('Answer questions about this paper as if you are explaining to a five-year-old: use simple words, short sentences, fun analogies, and relatable examples. But do NOT dumb down the technical content — keep all the important details and complexity, just make them easy to understand. If the user asks something not covered in the paper, say so.');
+  return sections.join('\n\n');
+}
+
+export default function ChatAssistant({ paper }) {
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const scrollRef = useRef(null);
+
+  if (!paper.groqApiKey) return null;
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const sendMessage = async () => {
+    const text = input.trim();
+    if (!text || loading) return;
+
+    const userMsg = { role: 'user', content: text };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setInput('');
+    setLoading(true);
+
+    try {
+      const res = await fetch('https://api.groq.com/openai/v1/chat/completions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${paper.groqApiKey}`,
+        },
+        body: JSON.stringify({
+          model: 'qwen/qwen3-32b',
+          messages: [
+            { role: 'system', content: buildSystemPrompt(paper) },
+            ...newMessages,
+          ],
+          temperature: 0.7,
+          max_tokens: 1024,
+        }),
+      });
+
+      const data = await res.json();
+      const raw = data.choices?.[0]?.message?.content || 'Sorry, I could not generate a response.';
+      const reply = raw.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+      setMessages((prev) => [...prev, { role: 'assistant', content: reply }]);
+    } catch {
+      setMessages((prev) => [...prev, { role: 'assistant', content: 'Something went wrong. Please try again.' }]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  return (
+    <>
+      {/* Floating button */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="chat-fab"
+        aria-label="Chat about this paper"
+      >
+        {open ? (
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        ) : (
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+        )}
+      </button>
+
+      {/* Chat panel */}
+      {open && (
+        <div className="chat-panel">
+          {/* Header */}
+          <div className="chat-header">
+            <div className="chat-header-title">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+              <span>Ask about this paper</span>
+            </div>
+            <button onClick={() => setOpen(false)} className="chat-close-btn" aria-label="Close chat">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Messages */}
+          <div className="chat-messages" ref={scrollRef}>
+            {messages.length === 0 && (
+              <div className="chat-empty">
+                <p>Ask me anything about this paper!</p>
+              </div>
+            )}
+            {messages.map((msg, i) => (
+              <div key={i} className={`chat-bubble ${msg.role}`}>
+                {msg.content}
+              </div>
+            ))}
+            {loading && (
+              <div className="chat-bubble assistant">
+                <span className="typing-indicator">
+                  <span /><span /><span />
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Input */}
+          <div className="chat-input-area">
+            <input
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Type a question..."
+              className="chat-input"
+              disabled={loading}
+            />
+            <button onClick={sendMessage} disabled={loading || !input.trim()} className="chat-send-btn" aria-label="Send message">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/template/src/components/Figures.jsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+
+function FigureCard({ fig }) {
+  const [failed, setFailed] = useState(false);
+
+  if (failed) return null;
+
+  return (
+    <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
+      <div className="relative bg-gray-50 flex items-center justify-center" style={{ minHeight: '120px' }}>
+        <img
+          src={fig.url}
+          alt={fig.caption || ''}
+          className="w-full object-contain"
+          style={{ maxHeight: '480px' }}
+          onError={() => setFailed(true)}
+        />
+      </div>
+      <div className="p-5">
+        <div className="flex items-center gap-2 mb-2">
+          <span
+            className="text-xs font-semibold px-2.5 py-0.5 rounded-full"
+            style={{
+              backgroundColor: 'color-mix(in srgb, var(--color-primary) 12%, white)',
+              color: 'var(--color-primary)',
+            }}
+          >
+            {fig.category || 'Figure'}
+          </span>
+        </div>
+        {fig.caption && (
+          <p className="text-gray-500 text-xs leading-relaxed mb-2">{fig.caption}</p>
+        )}
+        {fig.explanation && (
+          <p className="text-gray-700 text-sm leading-relaxed">{fig.explanation}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function Figures({ items }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-6">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg"
+          style={{ backgroundColor: 'var(--color-primary)' }}
+        >
+          📊
+        </div>
+        <h2 className="text-2xl font-bold">Key Figures</h2>
+      </div>
+      <div className="space-y-6 stagger-children">
+        {items.map((fig, i) => (
+          <FigureCard key={fig.id || i} fig={fig} />
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/src/components/Footer.jsx

@@ -0,0 +1,22 @@
+export default function Footer({ url }) {
+  return (
+    <footer className="border-t border-gray-200 py-12 px-6">
+      <div className="max-w-5xl mx-auto text-center space-y-4">
+        {url && (
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 font-semibold text-lg px-6 py-3 rounded-full text-white transition-transform hover:scale-105 shadow-lg"
+            style={{ backgroundColor: 'var(--color-primary)' }}
+          >
+            📄 Read the Original Paper →
+          </a>
+        )}
+        <p className="text-gray-400 text-sm">
+          Made with Easy Reads · Explained like you're five 🧒
+        </p>
+      </div>
+    </footer>
+  );
+}

package/template/src/components/Glossary.jsx

@@ -0,0 +1,36 @@
+export default function Glossary({ items }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-6">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg"
+          style={{ backgroundColor: 'var(--color-primary)' }}
+        >
+          📚
+        </div>
+        <h2 className="text-2xl font-bold">Key Concepts</h2>
+      </div>
+      <div className="grid sm:grid-cols-2 gap-4 stagger-children">
+        {items.map((item, i) => (
+          <div
+            key={i}
+            className="glossary-card bg-white rounded-2xl p-5 shadow-sm border border-gray-100"
+          >
+            <dt
+              className="font-bold text-sm mb-2 inline-block px-3 py-1 rounded-full"
+              style={{
+                color: 'var(--color-primary)',
+                backgroundColor: 'color-mix(in srgb, var(--color-primary) 8%, white)',
+              }}
+            >
+              {item.term}
+            </dt>
+            <dd className="text-gray-600 text-sm leading-relaxed">{item.definition}</dd>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/src/components/Hero.jsx

@@ -0,0 +1,56 @@
+function formatDate(dateStr) {
+  if (!dateStr) return null;
+  const d = new Date(dateStr + (dateStr.length === 10 ? 'T00:00:00' : ''));
+  if (isNaN(d)) return null;
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export default function Hero({ title, authors, tldr, publishedDate }) {
+  const formattedDate = formatDate(publishedDate);
+
+  return (
+    <header className="gradient-hero text-white py-24 px-6">
+      <div className="relative z-10 max-w-5xl mx-auto">
+        <div className="flex flex-wrap items-center gap-3 mb-6">
+          <div className="inline-block bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm font-medium text-white/80 border border-white/20">
+            📄 Research Paper Explained
+          </div>
+          {formattedDate && (
+            <div className="inline-block bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm font-medium text-white/80 border border-white/20">
+              📅 Published {formattedDate}
+            </div>
+          )}
+        </div>
+
+        <h1 className="text-4xl md:text-6xl font-extrabold leading-tight mb-6 tracking-tight">
+          {title}
+        </h1>
+
+        <div className="flex flex-wrap gap-2 mb-8">
+          {authors?.map((author, i) => (
+            <span
+              key={i}
+              className="bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 text-sm border border-white/10"
+            >
+              {author}
+            </span>
+          ))}
+        </div>
+
+        <div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 max-w-3xl">
+          <div className="flex items-center gap-2 mb-3">
+            <span className="text-2xl">💡</span>
+            <span className="text-sm uppercase tracking-widest text-white/60 font-bold">
+              In one sentence
+            </span>
+          </div>
+          <p className="text-xl md:text-2xl font-medium leading-relaxed">{tldr}</p>
+        </div>
+      </div>
+    </header>
+  );
+}

package/template/src/components/KeyContributions.jsx

@@ -0,0 +1,35 @@
+export default function KeyContributions({ items }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-6">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg"
+          style={{ backgroundColor: 'var(--color-primary)' }}
+        >
+          🌟
+        </div>
+        <h2 className="text-2xl font-bold">Key Contributions</h2>
+      </div>
+      <div className="grid md:grid-cols-2 gap-5 stagger-children">
+        {items.map((item, i) => (
+          <div
+            key={i}
+            className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-all hover:-translate-y-1 group"
+          >
+            <div className="flex items-start gap-4">
+              <div className="text-3xl shrink-0 group-hover:scale-110 transition-transform">
+                {item.emoji || '💡'}
+              </div>
+              <div>
+                <h3 className="font-bold text-lg mb-2">{item.title}</h3>
+                <p className="text-gray-600 leading-relaxed text-sm">{item.description}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/src/components/Limitations.jsx

@@ -0,0 +1,22 @@
+export default function Limitations({ items }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-200 text-lg">
+          🔍
+        </div>
+        <h2 className="text-2xl font-bold">Limitations & Open Questions</h2>
+      </div>
+      <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 space-y-4 stagger-children">
+        {items.map((item, i) => (
+          <div key={i} className="flex items-start gap-3">
+            <span className="text-xl shrink-0 mt-0.5">⚠️</span>
+            <p className="text-gray-700 leading-relaxed">{item}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/src/components/Methodology.jsx

@@ -0,0 +1,42 @@
+export default function Methodology({ methodology }) {
+  if (!methodology) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-3">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg"
+          style={{ backgroundColor: 'var(--color-primary)' }}
+        >
+          🧪
+        </div>
+        <h2 className="text-2xl font-bold">Methodology</h2>
+      </div>
+      <p className="text-gray-600 mb-8 text-lg ml-[52px] leading-relaxed">{methodology.summary}</p>
+
+      <div className="space-y-6 stagger-children">
+        {methodology.steps?.map((step, i) => (
+          <div key={i} className="flex gap-5 items-start">
+            {/* Step number circle */}
+            <div className="shrink-0 relative timeline-dot">
+              <div
+                className="w-12 h-12 rounded-full flex items-center justify-center text-xl shadow-md"
+                style={{
+                  backgroundColor: `color-mix(in srgb, var(--color-primary) ${100 - i * 12}%, white)`,
+                }}
+              >
+                {step.emoji || `${i + 1}`}
+              </div>
+            </div>
+
+            {/* Step content */}
+            <div className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 flex-1 hover:shadow-md transition-shadow">
+              <h3 className="font-bold text-base mb-2">{step.label}</h3>
+              <p className="text-gray-600 text-sm leading-relaxed">{step.detail}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/src/components/Results.jsx

@@ -0,0 +1,34 @@
+export default function Results({ items }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-6">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg"
+          style={{ backgroundColor: 'var(--color-primary)' }}
+        >
+          🏆
+        </div>
+        <h2 className="text-2xl font-bold">Key Findings</h2>
+      </div>
+      <div className="space-y-4 stagger-children">
+        {items.map((item, i) => (
+          <div
+            key={i}
+            className="bg-white rounded-2xl p-6 shadow-sm border-l-4 hover:shadow-md transition-shadow"
+            style={{ borderLeftColor: 'var(--color-accent)' }}
+          >
+            <div className="flex items-start gap-3">
+              <span className="text-2xl shrink-0">{item.emoji || '✨'}</span>
+              <div>
+                <h3 className="font-bold text-lg mb-2">{item.finding}</h3>
+                <p className="text-gray-600 leading-relaxed text-sm">{item.detail}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/src/components/Significance.jsx

@@ -0,0 +1,20 @@
+export default function Significance({ text }) {
+  if (!text) return null;
+
+  return (
+    <section className="scale-in">
+      <div className="accent-bar rounded-2xl p-10 text-white relative overflow-hidden">
+        <div className="absolute top-4 right-6 text-7xl opacity-10">🚀</div>
+        <div className="relative z-10">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="text-3xl">🌍</span>
+            <h2 className="text-2xl font-bold">Broader Impact</h2>
+          </div>
+          <p className="text-lg md:text-xl leading-relaxed text-white/90 max-w-3xl">
+            {text}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/components/Stats.jsx

@@ -0,0 +1,34 @@
+export default function Stats({ items }) {
+  if (!items?.length) return null;
+
+  return (
+    <section className="fade-in">
+      <div className="flex items-center gap-3 mb-6">
+        <div
+          className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg"
+          style={{ backgroundColor: 'var(--color-accent)' }}
+        >
+          📊
+        </div>
+        <h2 className="text-2xl font-bold">By The Numbers</h2>
+      </div>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 stagger-children">
+        {items.map((stat, i) => (
+          <div
+            key={i}
+            className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 text-center hover:shadow-md transition-shadow"
+          >
+            <div
+              className="text-4xl md:text-5xl font-extrabold mb-2 stat-value"
+              style={{ color: 'var(--color-primary)' }}
+            >
+              {stat.value}
+            </div>
+            <div className="text-sm font-semibold text-gray-800 mb-2">{stat.label}</div>
+            <div className="text-xs text-gray-500 leading-relaxed">{stat.context}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}