Add rich interactive AI models page with neon theme
This commit is contained in:
ealemadi
+1344
-4
File diff suppressed because it is too large
Load Diff
+320
-1
@@ -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)' : '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user