Add rich interactive AI models page with neon theme
This commit is contained in:
ealemadi
+1343
-3
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