From 96515c8e2e53aca19040512a5322b92387caae48 Mon Sep 17 00:00:00 2001 From: ealemadi Date: Tue, 28 Jul 2026 15:20:47 +0300 Subject: [PATCH] Add rich interactive AI models page with neon theme --- index.html | 1348 +++++++++++++++++++++++++++++++++++++++++++++++++++- js/main.js | 321 ++++++++++++- 2 files changed, 1664 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index d70f45f..766335e 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,1351 @@ - MyWeb1 - + AI Model Differences + -

Welcome to MyWeb1

- + +
+ + + + + +
+
+
+
+
Interactive Guide · 2026 Edition
+

Decoding AI Model Differences

+

From transformers to diffusion models — explore how AI architectures work, how they compare, and which one fits your needs. Fully interactive.

+
+ Explore Models + Take the Quiz +
+
+ + +
+
+
0
+
Models Covered
+
+
+
0
+
Architecture Types
+
+
+
0
+
Benchmarks Tracked
+
+
+
0
+
Head-to-Head Comparisons
+
+
+ + +
+
Model Catalog
+

Major AI Models

+

Explore the most influential AI models across language, vision, audio, and generation tasks.

+ +
+
+ + + + + + +
+
+ +
+
+
+
🧠
+

GPT-4o

OpenAI · Language
+
+

A frontier multimodal model excelling at reasoning, coding, and creative tasks. Optimized for both text and vision inputs with reduced latency.

+
+ Transformer + 1.8T Params + Text + Vision +
+
+ +
+
+
🔮
+

Claude 3.5 Sonnet

Anthropic · Language
+
+

Known for nuanced reasoning, long context handling (200K tokens), and strong safety alignment. Excels at analysis and coding.

+
+ Transformer + ~500B Params + 200K Context +
+
+ +
+
+
🌐
+

Gemini 2.0

Google · Multimodal
+
+

Google's most capable model. Natively multimodal — processes text, image, audio, and video in a single architecture with 1M+ context.

+
+ MoE Transformer + 1M+ Context + Multimodal +
+
+ +
+
+
🦙
+

Llama 3.1 405B

Meta · Language (Open)
+
+

The largest open-weight model. Competitive with proprietary models on major benchmarks. Fully customizable and self-hostable.

+
+ Transformer + 405B Params + Open Weight +
+
+ +
+
+
⚡
+

Mistral Large 2

Mistral AI · Language
+
+

European frontier model with strong multilingual capabilities. Efficient architecture with 128K context and tool use support.

+
+ MoE + 123B Params + 128K Context +
+
+ +
+
+
🎨
+

Stable Diffusion 3.5

Stability AI · Generation
+
+

Open-source image generation using a Multimodal Diffusion Transformer (MDiT). excels at photorealism and prompt adherence.

+
+ Diffusion + Open Source + Image Gen +
+
+ +
+
+
👁️
+

SAM 2

Meta · Vision
+
+

Segment Anything Model 2 — real-time video and image segmentation. Works across domains with zero-shot generalization.

+
+ Transformer + Segmentation + Video + Image +
+
+ +
+
+
🎙️
+

Whisper V3 Large

OpenAI · Audio
+
+

State-of-the-art speech recognition. Trained on 680K hours of multilingual data. Near-human accuracy on English transcription.

+
+ Encoder-Decoder + Multilingual + 1.5B Params +
+
+ +
+
+
🎵
+

MusicGen

Meta · Audio Generation
+
+

Generates high-quality music from text descriptions. Uses a single-stage auto-regressive Transformer with codebook pattern modeling.

+
+ Transformer + Music Gen + Open Source +
+
+ +
+
+
🔬
+

GPT-4o + DALL-E 3

OpenAI · Multimodal Stack
+
+

A combination that understands text and images natively, then generates images with DALL-E 3. Full round-trip multimodal reasoning.

+
+ Multimodal + Image Gen + Reasoning +
+
+ +
+
+
🖼️
+

Midjourney V6.1

Midjourney · Generation
+
+

Best-in-class artistic image generation. Known for stunning aesthetics, coherent text rendering, and photorealistic outputs.

+
+ Proprietary + Image Gen + Artistic +
+
+ +
+
+
🤖
+

DeepSeek R1

DeepSeek · Language (Open)
+
+

Open-reasoning model using reinforcement learning for chain-of-thought. Excels at math, code, and logical reasoning tasks.

+
+ MoE + Open Weight + Reasoning +
+
+
+
+ +
+ + +
+
Deep Dive
+

Architecture Explorer

+

Click on any architecture to learn how it works, its strengths, and where it's used.

+ +
+
+

🧠 Transformer

+

Self-attention mechanism that processes all tokens in parallel. The foundation of modern LLMs.

+
+
How It Works
+
    +
  • Input tokens are embedded into vectors
    • +
  • Multi-head self-attention computes relationships
    • +
  • Feed-forward layers process the results
    • +
  • Layer normalization and residual connections stabilize training
    • +
+
Used By
+
    +
  • GPT-4, Claude 3, Llama 3, Mistral, BERT
    • +
+
+
+ +
+

🖼️ CNN

+

Convolutional Neural Networks extract spatial features through sliding filters. King of computer vision.

+
+
How It Works
+
    +
  • Convolutional layers detect edges, textures, shapes
    • +
  • Pooling layers reduce spatial dimensions
    • +
  • Hierarchical feature extraction from low to high level
    • +
  • Fully connected layers for classification
    • +
+
Used By
+
    +
  • ResNet, VGG, EfficientNet, YOLO
    • +
+
+
+ +
+

📝 RNN / LSTM

+

Recurrent networks process sequences step-by-step with memory. LSTMs solved the vanishing gradient problem.

+
+
How It Works
+
    +
  • Processes one token at a time sequentially
    • +
  • Maintains a hidden state (memory) across steps
    • +
  • LSTMs use gates to control information flow
    • +
  • Struggles with very long sequences
    • +
+
Used By
+
    +
  • Early NLP models, some speech recognition
    • +
+
+
+ +
+

🎨 Diffusion

+

Generates data by learning to reverse a gradual noising process. State-of-the-art for image/video generation.

+
+
How It Works
+
    +
  • Forward pass: gradually adds Gaussian noise to data
    • +
  • Reverse pass: neural network learns to denoise step by step
    • +
  • Text conditioning guides the generation
    • +
  • Classifier-free guidance controls fidelity vs. diversity
    • +
+
Used By
+
    +
  • Stable Diffusion, DALL-E, Midjourney, Sora
    • +
+
+
+ +
+

🎭 GAN

+

Two networks — generator and discriminator — compete in a zero-sum game to create realistic outputs.

+
+
How It Works
+
    +
  • Generator creates fake samples from random noise
    • +
  • Discriminator tries to distinguish real from fake
    • +
  • Both improve adversarially over training
    • +
  • Mode collapse is a common failure mode
    • +
+
Used By
+
    +
  • StyleGAN, CycleGAN, ProGAN
    • +
+
+
+ +
+

🔀 Mixture of Experts

+

Sparse activation — only a subset of parameters processes each token. Enables massive models at lower compute cost.

+
+
How It Works
+
    +
  • Router network selects which "experts" to activate
    • +
  • Only top-K experts process each token
    • +
  • Total parameters are large, but active params are small
    • +
  • Enables scaling to trillions of parameters efficiently
    • +
+
Used By
+
    +
  • Mixtral, GPT-4 (rumored), DeepSeek V2, Grok
    • +
+
+
+
+
+ +
+ + +
+
Head to Head
+

Interactive Comparison

+

Toggle between two leading models to see how they stack up across key dimensions.

+ +
+
+ GPT-4o +
+
+
+ Claude 3.5 Sonnet +
+ +
+
+

GPT-4o

+
Parameters~1.8T
+
Context Window128K
+
ModalitiesText, Vision, Audio
+
MMLU Score88.7%
+
Coding (HumanEval)90.2%
+
Price (Input/1M)$2.50
+
Speed~80 tok/s
+
+
+

Claude 3.5 Sonnet

+
Parameters~500B
+
Context Window200K
+
ModalitiesText, Vision
+
MMLU Score88.7%
+
Coding (HumanEval)92.0%
+
Price (Input/1M)$3.00
+
Speed~70 tok/s
+
+
+ + +
+ + +

BENCHMARK SCORES

+
+
+ GPT-4o + 88.7% +
+
+
+
+
+ Claude 3.5 Sonnet + 88.7% +
+
+
+
+
+ Gemini 2.0 Flash + 85.1% +
+
+
+
+
+ Llama 3.1 405B + 87.3% +
+
+
+
+ +
+ + +
+
History
+

Model Evolution Timeline

+

Key milestones in AI model development from early neural networks to today's frontier models.

+ +
+
+
2017
+

Transformer Paper — "Attention Is All You Need"

+

Google introduces the transformer architecture, replacing RNNs with self-attention. This becomes the foundation for every major AI model today.

+
+
+
2018
+

GPT-1 & BERT

+

OpenAI's GPT-1 and Google's BERT show that pre-training on massive text data produces general-purpose language understanding. The era of large language models begins.

+
+
+
2020
+

GPT-3 — Scaling Laws Proven

+

175 billion parameters. GPT-3 demonstrates that scaling model size dramatically improves capabilities, including few-shot learning without fine-tuning.

+
+
+
2021
+

DALL-E & CLIP — Multimodal Breakthrough

+

OpenAI connects vision and language. CLIP learns visual concepts from text, and DALL-E generates images from descriptions — pioneering multimodal AI.

+
+
+
2022
+

Stable Diffusion & ChatGPT

+

Stable Diffusion democratizes image generation with open source. ChatGPT takes the world by storm, reaching 100M users in 2 months.

+
+
+
2023
+

GPT-4, Claude 2, Gemini 1.0

+

Frontier models push boundaries. GPT-4 is multimodal. Claude introduces 100K context. Gemini processes text, image, audio, and video natively.

+
+
+
2024
+

Open-Weight Revolution & Reasoning Models

+

Llama 3, Mistral, and DeepSeek prove open models can compete with proprietary ones. o1 and DeepSeek R1 introduce chain-of-thought reasoning.

+
+
+
2025-2026
+

Agentic AI & World Models

+

Models that can browse, code, and take actions autonomously. Sora and similar models simulate physical worlds. AI models become AI agents.

+
+
+
+ +
+ + +
+
Test Yourself
+

Find Your Model

+

Answer a few questions and we'll recommend the best AI model for your use case.

+ +
+
+
+
+
+
+ +
+
+
+

+

+
+ +
+
+
+
+ +
+ + +
+
Knowledge Base
+

Frequently Asked Questions

+

Common questions about AI models, answered.

+ +
+
+
+ What makes AI models different from each other? + ▾ +
+
+

AI models differ in their architecture (transformer vs CNN vs diffusion), training data, parameter count, training methods (supervised, RLHF, etc.), context window size, modalities supported, and optimization objectives. Even models with similar architectures can produce very different results based on how they were trained and fine-tuned.

+
+
+ +
+
+ What is the difference between open-source and proprietary models? + ▾ +
+
+

Open-source models (like Llama 3, Mistral) release their weights publicly, allowing anyone to download, run, fine-tune, and study them. Proprietary models (like GPT-4, Claude) are only accessible through APIs — you can use them but can't see how they work internally. Open models offer more control and privacy; proprietary models often have better performance and ease of use.

+
+
+ +
+
+ What does "parameters" mean in AI models? + ▾ +
+
+

Parameters are the numerical weights within a neural network that are learned during training. More parameters generally means the model can learn more complex patterns, but also requires more memory and compute. A model with 7B parameters has 7 billion learnable weights. However, architecture and training quality matter as much as raw parameter count.

+
+
+ +
+
+ What is "context window" and why does it matter? + ▾ +
+
+

The context window is the maximum amount of text a model can process in a single conversation. GPT-4 handles 128K tokens (~96K words), Claude 3.5 handles 200K, and Gemini can handle over 1M. A larger context window means the model can reference more of the conversation, documents, or code at once, which is critical for long documents, codebases, and complex analysis.

+
+
+ +
+
+ What is MoE (Mixture of Experts)? + ▾ +
+
+

Mixture of Experts is an architecture where a model has many "expert" sub-networks, but only activates a few for each input. A router decides which experts to use. This means the model can have trillions of total parameters while keeping inference fast because only a fraction are active. Mixtral and possibly GPT-4 use this approach to balance scale with efficiency.

+
+
+ +
+
+ How do I choose the right model for my project? + ▾ +
+
+

Consider: (1) Task type — language, vision, audio, or multimodal. (2) Budget — proprietary APIs charge per token; open models require hardware but have no per-use cost. (3) Latency requirements — smaller models are faster. (4) Data privacy — self-hosted models keep data local. (5) Fine-tuning needs — open models allow customization. Start with benchmarks but always test with your actual use case.

+
+
+ +
+
+ What is RLHF and why is it important? + ▾ +
+
+

Reinforcement Learning from Human Feedback (RLHF) is a training technique where human evaluators rank model outputs, and a reward model is trained on these preferences. This is then used to fine-tune the language model via reinforcement learning. RLHF is what makes models like ChatGPT and Claude helpful, harmless, and honest — bridging the gap between raw language modeling and useful assistant behavior.

+
+
+
+
+ + + + + diff --git a/js/main.js b/js/main.js index 229163c..a1d8780 100644 --- a/js/main.js +++ b/js/main.js @@ -1 +1,320 @@ -console.log('MyWeb1 loaded'); +// ============ PARTICLES ============ +const canvas = document.getElementById('particles'); +const ctx = canvas.getContext('2d'); +let particles = []; +function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; +} +resizeCanvas(); +window.addEventListener('resize', resizeCanvas); + +class Particle { + constructor() { + this.reset(); + } + reset() { + this.x = Math.random() * canvas.width; + this.y = Math.random() * canvas.height; + this.vx = (Math.random() - 0.5) * 0.3; + this.vy = (Math.random() - 0.5) * 0.3; + this.size = Math.random() * 2 + 0.5; + this.alpha = Math.random() * 0.5 + 0.1; + const colors = ['0,240,255', '255,0,229', '57,255,20', '176,38,255']; + this.color = colors[Math.floor(Math.random() * colors.length)]; + } + update() { + this.x += this.vx; + this.y += this.vy; + if (this.x < 0 || this.x > canvas.width) this.vx *= -1; + if (this.y < 0 || this.y > canvas.height) this.vy *= -1; + } + draw() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); + ctx.fillStyle = `rgba(${this.color},${this.alpha})`; + ctx.fill(); + } +} + +for (let i = 0; i < 80; i++) particles.push(new Particle()); + +function drawLines() { + for (let i = 0; i < particles.length; i++) { + for (let j = i + 1; j < particles.length; j++) { + const dx = particles[i].x - particles[j].x; + const dy = particles[i].y - particles[j].y; + const dist = Math.sqrt(dx * dx + dy * dy); + if (dist < 150) { + ctx.beginPath(); + ctx.moveTo(particles[i].x, particles[i].y); + ctx.lineTo(particles[j].x, particles[j].y); + ctx.strokeStyle = `rgba(0,240,255,${0.06 * (1 - dist / 150)})`; + ctx.lineWidth = 0.5; + ctx.stroke(); + } + } + } +} + +function animateParticles() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + particles.forEach(p => { p.update(); p.draw(); }); + drawLines(); + requestAnimationFrame(animateParticles); +} +animateParticles(); + +// ============ SCROLL REVEAL ============ +const revealElements = document.querySelectorAll('.reveal'); +const revealObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); +}, { threshold: 0.1 }); +revealElements.forEach(el => revealObserver.observe(el)); + +// ============ ANIMATED COUNTERS ============ +const counters = document.querySelectorAll('.stat-num[data-target]'); +let countersAnimated = false; +const statsObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting && !countersAnimated) { + countersAnimated = true; + counters.forEach(counter => { + const target = +counter.dataset.target; + const duration = 2000; + const start = performance.now(); + function update(now) { + const progress = Math.min((now - start) / duration, 1); + const eased = 1 - Math.pow(1 - progress, 3); + counter.textContent = Math.floor(eased * target) + (target > 40 ? '+' : ''); + if (progress < 1) requestAnimationFrame(update); + } + requestAnimationFrame(update); + }); + } + }); +}, { threshold: 0.5 }); +if (counters.length > 0) statsObserver.observe(counters[0].closest('.stats-bar')); + +// ============ ANIMATED BARS ============ +const bars = document.querySelectorAll('.bar-fill[data-width]'); +const barObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.width = entry.target.dataset.width + '%'; + barObserver.unobserve(entry.target); + } + }); +}, { threshold: 0.5 }); +bars.forEach(bar => barObserver.observe(bar)); + +// ============ TABS ============ +document.querySelectorAll('.tab-btn').forEach(btn => { + btn.addEventListener('click', () => { + document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + const tab = btn.dataset.tab; + document.querySelectorAll('.model-card').forEach(card => { + if (tab === 'all' || card.dataset.category.includes(tab)) { + card.style.display = ''; + } else { + card.style.display = 'none'; + } + }); + }); +}); + +// ============ TOGGLE COMPARISON ============ +let toggleState = false; +function toggleComparison() { + toggleState = !toggleState; + const sw = document.getElementById('toggle-switch'); + const c1 = document.getElementById('comparison-1'); + const c2 = document.getElementById('comparison-2'); + const ll = document.getElementById('label-left'); + const lr = document.getElementById('label-right'); + + if (toggleState) { + sw.classList.add('right'); + c1.style.display = 'none'; + c2.style.display = 'grid'; + ll.textContent = 'Llama 3.1 405B'; + ll.classList.remove('left'); + ll.style.color = ''; + lr.textContent = 'Mistral Large 2'; + lr.classList.add('left'); + lr.style.color = 'var(--neon-magenta)'; + } else { + sw.classList.remove('right'); + c1.style.display = 'grid'; + c2.style.display = 'none'; + ll.textContent = 'GPT-4o'; + ll.classList.add('left'); + ll.style.color = 'var(--neon-cyan)'; + lr.textContent = 'Claude 3.5 Sonnet'; + lr.classList.remove('left'); + lr.style.color = ''; + } +} + +// ============ ARCHITECTURE EXPLORER ============ +document.querySelectorAll('.arch-card').forEach(card => { + card.addEventListener('click', () => { + const arch = card.dataset.arch; + const detail = document.getElementById('detail-' + arch); + const wasActive = card.classList.contains('active'); + + document.querySelectorAll('.arch-card').forEach(c => { + c.classList.remove('active'); + c.querySelector('.arch-detail').classList.remove('active'); + }); + + if (!wasActive) { + card.classList.add('active'); + detail.classList.add('active'); + } + }); +}); + +// ============ ACCORDION ============ +function toggleAccordion(header) { + const item = header.parentElement; + const wasOpen = item.classList.contains('open'); + + document.querySelectorAll('.accordion-item').forEach(i => i.classList.remove('open')); + + if (!wasOpen) item.classList.add('open'); +} + +// ============ QUIZ ============ +const quizData = [ + { + q: "What's your primary use case?", + options: ["Text generation & conversation", "Image creation & editing", "Code generation & analysis", "Data analysis & research", "Voice & audio processing"] + }, + { + q: "What's your budget?", + options: ["Free / open source preferred", "Moderate ($10-100/mo)", "Enterprise ($100+/mo)", "No budget limit"] + }, + { + q: "Do you need to fine-tune the model?", + options: ["Yes, on my own data", "Maybe later", "No, out-of-the-box is fine"] + }, + { + q: "How important is data privacy?", + options: ["Critical — must be self-hosted", "Important — prefer private API", "Not a concern"] + }, + { + q: "What context length do you need?", + options: ["Short (< 8K tokens)", "Medium (8K - 128K)", "Long (128K+)", "Very long (500K+)"] + } +]; + +const quizResults = { + "open-language": { title: "Llama 3.1 405B", text: "The best open-weight language model. Full control, self-hostable, fine-tunable. Perfect for privacy-focused projects that need frontier-level performance." }, + "proprietary-language": { title: "GPT-4o or Claude 3.5 Sonnet", text: "For general language tasks with no hosting concerns, these frontier models offer the best performance. GPT-4o for multimodal, Claude for long-context analysis." }, + "creative": { title: "Midjourney V6.1 + GPT-4o", text: "Midjourney for stunning visual creation, GPT-4o for text and ideation. A powerful creative duo." }, + "code": { title: "Claude 3.5 Sonnet + DeepSeek R1", text: "Claude for writing and reviewing code, DeepSeek R1 for complex reasoning and debugging. Both support long context for large codebases." }, + "privacy": { title: "Mistral Large 2 (Self-hosted)", text: "Apache-2.0 licensed, efficient MoE architecture. Smaller than Llama 3.1 405B but runs on fewer GPUs. Great balance of performance and accessibility." }, + "audio": { title: "Whisper V3 Large + MusicGen", text: "Whisper for transcription and speech recognition, MusicGen for audio generation. Both open source and state-of-the-art." }, + "default": { title: "Gemini 2.0", text: "Google's most capable model with 1M+ context. Native multimodal processing of text, image, audio, and video in one model. Great all-rounder." } +}; + +let currentQ = 0; +let answers = []; + +function startQuiz() { + currentQ = 0; + answers = []; + document.getElementById('quiz-body').style.display = 'block'; + document.getElementById('quiz-result').style.display = 'none'; + renderQuestion(); +} + +function renderQuestion() { + const progress = document.getElementById('quiz-progress'); + progress.innerHTML = ''; + for (let i = 0; i < quizData.length; i++) { + const dot = document.createElement('div'); + dot.className = 'quiz-dot'; + if (i < currentQ) dot.classList.add('done'); + if (i === currentQ) dot.classList.add('current'); + progress.appendChild(dot); + } + + const q = quizData[currentQ]; + document.getElementById('quiz-question').textContent = q.q; + + const optionsDiv = document.getElementById('quiz-options'); + optionsDiv.innerHTML = ''; + q.options.forEach((opt, i) => { + const btn = document.createElement('button'); + btn.className = 'quiz-option'; + btn.textContent = opt; + btn.onclick = () => selectOption(i); + if (answers[currentQ] === i) btn.classList.add('selected'); + optionsDiv.appendChild(btn); + }); + + document.getElementById('quiz-next').disabled = answers[currentQ] === undefined; + document.getElementById('quiz-next').textContent = currentQ === quizData.length - 1 ? 'See Result →' : 'Next →'; +} + +function selectOption(i) { + answers[currentQ] = i; + document.querySelectorAll('.quiz-option').forEach((btn, j) => { + btn.classList.toggle('selected', j === i); + }); + document.getElementById('quiz-next').disabled = false; +} + +function nextQuestion() { + if (answers[currentQ] === undefined) return; + + if (currentQ < quizData.length - 1) { + currentQ++; + renderQuestion(); + } else { + showResult(); + } +} + +function showResult() { + document.getElementById('quiz-body').style.display = 'none'; + const result = document.getElementById('quiz-result'); + result.style.display = 'block'; + + const [use, budget, finetune, privacy, ctx] = answers; + + let key = 'default'; + if (use === 2) key = 'code'; + else if (use === 1) key = 'creative'; + else if (use === 4) key = 'audio'; + else if (privacy === 0) key = 'privacy'; + else if (budget === 0 || finetune === 0) key = 'open-language'; + else if (budget >= 2) key = 'proprietary-language'; + + const r = quizResults[key]; + document.getElementById('quiz-result-title').textContent = 'Recommended: ' + r.title; + document.getElementById('quiz-result-text').textContent = r.text; +} + +startQuiz(); + +// ============ SMOOTH NAV HIGHLIGHT ============ +const sections = document.querySelectorAll('section[id]'); +window.addEventListener('scroll', () => { + let current = ''; + sections.forEach(section => { + const top = section.offsetTop - 200; + if (window.scrollY >= top) current = section.getAttribute('id'); + }); + document.querySelectorAll('.nav-links a').forEach(a => { + a.style.color = a.getAttribute('href') === '#' + current ? 'var(--neon-cyan)' : ''; + }); +});