|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Ji Xie — AI Research Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
#hero-vanta { position:absolute; inset:0; z-index:0 } |
|
|
.hero-content { position:relative; z-index:10 } |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.card-hover { transition: all 0.3s ease } |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) |
|
|
} |
|
|
.timeline-dot { |
|
|
width:12px; height:12px; border-radius:50%; |
|
|
background:#6366f1; position:absolute; |
|
|
left:-6px; top:6px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800 bg-white"> |
|
|
|
|
|
<div id="hero-vanta"></div> |
|
|
<header class="fixed w-full z-50 bg-white/90 backdrop-blur-sm shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<nav class="flex justify-between items-center"> |
|
|
<a href="#" class="text-xl font-bold gradient-text">Ji Xie</a> |
|
|
<div class="hidden md:flex gap-6"> |
|
|
<a href="#about" class="hover:text-indigo-600">About</a> |
|
|
<a href="#research" class="hover:text-indigo-600">Research</a> |
|
|
<a href="#projects" class="hover:text-indigo-600">Projects</a> |
|
|
<a href="#contact" class="hover:text-indigo-600">Contact</a> |
|
|
</div> |
|
|
<button class="md:hidden"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
<section class="relative min-h-[90vh] flex items-center pt-16"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="max-w-2xl hero-content"> |
|
|
<p class="text-indigo-500 mb-3">CV · Generative AI · Multimodal</p> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Ji Xie</span></h1> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Building controllable vision-language systems at Berkeley AI Research & Zhejiang University. |
|
|
</p> |
|
|
<div class="flex gap-3"> |
|
|
<a href="#contact" class="px-6 py-2 bg-indigo-600 text-white rounded-full">Contact</a> |
|
|
<a href="#projects" class="px-6 py-2 border border-indigo-600 rounded-full">Projects</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<h2 class="text-2xl font-bold mb-4">About</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-gray-600 mb-3"> |
|
|
Bridging research and engineering to make AI more reliable and controllable. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-3"> |
|
|
At <span class="text-indigo-600 font-medium">Zhejiang University</span> and Berkeley AI Research, I focus on vision-language systems. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-600"> |
|
|
My work includes text-to-image generation, multimodal reasoning, and developing tools to make advanced models more accessible. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="research" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto text-center mb-8"> |
|
|
<h2 class="text-2xl font-bold mb-2">Research</h2> |
|
|
<p class="text-gray-600">Key focus areas</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-4"> |
|
|
<div class="bg-white p-6 rounded-lg card-hover"> |
|
|
<i data-feather="cpu" class="text-indigo-600 mb-3"></i> |
|
|
<h3 class="font-bold mb-2">Multimodal Models</h3> |
|
|
<p class="text-gray-600 text-sm">Joint reasoning across text and vision</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg card-hover"> |
|
|
<i data-feather="sliders" class="text-purple-600 mb-3"></i> |
|
|
<h3 class="font-bold mb-2">Controllable AI</h3> |
|
|
<p class="text-gray-600 text-sm">Steerable generation workflows</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg card-hover"> |
|
|
<i data-feather="shield" class="text-pink-600 mb-3"></i> |
|
|
<h3 class="font-bold mb-2">Trustworthy AI</h3> |
|
|
<p class="text-gray-600 text-sm">Responsible model behaviors</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="projects" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-3xl font-bold mb-6">Selected Work</h2> |
|
|
<p class="text-gray-600 mb-12">Highlights from ongoing research and collaborations</p> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
<div class="border border-gray-200 rounded-xl overflow-hidden card-hover"> |
|
|
<div class="bg-gray-900 h-48 flex items-center justify-center"> |
|
|
<img src="http://static.photos/technology/1024x576/42" alt="AI visualization" class="h-full w-full object-cover opacity-70"> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold bg-indigo-100 text-indigo-800 rounded-full mb-2">2024 · Research</span> |
|
|
<h3 class="text-2xl font-bold">Instruction-Guided Diffusion Editing</h3> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Building a controllable editing stack that aligns diffusion models with free-form instructions and layout hints.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="mailto:sanaka@berkeley.edu" class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
|
<i data-feather="mail" class="w-4 h-4 mr-2"></i> Contact |
|
|
</a> |
|
|
<a href="https://github.com/HorizonWind2004" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
|
<i data-feather="github" class="w-4 h-4 mr-2"></i> GitHub |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-xl overflow-hidden card-hover"> |
|
|
<div class="bg-gray-900 h-48 flex items-center justify-center"> |
|
|
<img src="http://static.photos/abstract/1024x576/23" alt="Multimodal visualization" class="h-full w-full object-cover opacity-70"> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold bg-purple-100 text-purple-800 rounded-full mb-2">2023 · Collaboration</span> |
|
|
<h3 class="text-2xl font-bold">Unified Vision-Language Benchmarks</h3> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Curated a benchmarking suite for evaluating grounding and reasoning across captioning, VQA, and editing tasks.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://scholar.google.com.hk/citations?user=Wv7ItTYAAAAJ" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
|
<i data-feather="file-text" class="w-4 h-4 mr-2"></i> Overview |
|
|
</a> |
|
|
<a href="mailto:sanaka@berkeley.edu" class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
|
|
<i data-feather="mail" class="w-4 h-4 mr-2"></i> Request access |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="updates" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold mb-4">Recent Updates</h2> |
|
|
<p class="text-gray-600">Snapshots of what I've been up to</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute left-0 h-full w-0.5 bg-gray-200"></div> |
|
|
|
|
|
<div class="relative pl-8 mb-12"> |
|
|
<div class="timeline-dot"></div> |
|
|
<span class="inline-block bg-indigo-100 text-indigo-800 px-3 py-1 text-sm font-medium rounded-full mb-2">Jan 2024</span> |
|
|
<h3 class="text-xl font-bold mb-2">Joined Berkeley AI Research</h3> |
|
|
<p class="text-gray-600">Started an internship with the BAIR lab to explore multimodal instruction-following models.</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative pl-8 mb-12"> |
|
|
<div class="timeline-dot"></div> |
|
|
<span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 text-sm font-medium rounded-full mb-2">Jun 2023</span> |
|
|
<h3 class="text-xl font-bold mb-2">Presented on controllable generation</h3> |
|
|
<p class="text-gray-600">Shared work on layout-aware diffusion editing at a university seminar.</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative pl-8"> |
|
|
<div class="timeline-dot"></div> |
|
|
<span class="inline-block bg-pink-100 text-pink-800 px-3 py-1 text-sm font-medium rounded-full mb-2">Dec 2022</span> |
|
|
<h3 class="text-xl font-bold mb-2">Launched open-source resources</h3> |
|
|
<p class="text-gray-600">Published a public repo of prompts and evaluation scripts for diffusion-based editing pipelines.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<section id="contact" class="py-16 bg-indigo-600 text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-2xl font-bold mb-4">Contact</h2> |
|
|
<p class="text-indigo-100 mb-6">Let's connect about vision and generative AI</p> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-4"> |
|
|
<a href="mailto:sanaka@berkeley.edu" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800"> |
|
|
<i data-feather="mail" class="mb-2"></i> |
|
|
<p class="text-sm">sanaka@berkeley.edu</p> |
|
|
</a> |
|
|
<a href="https://github.com/HorizonWind2004" target="_blank" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800"> |
|
|
<i data-feather="github" class="mb-2"></i> |
|
|
<p class="text-sm">GitHub</p> |
|
|
</a> |
|
|
<a href="https://scholar.google.com.hk/citations?user=Wv7ItTYAAAAJ" target="_blank" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800"> |
|
|
<i data-feather="book" class="mb-2"></i> |
|
|
<p class="text-sm">Scholar</p> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<footer class="py-6 bg-gray-900 text-gray-400 text-sm"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<p>© <span id="year"></span> Ji Xie</p> |
|
|
</div> |
|
|
</footer> |
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#hero-vanta", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x6366f1, |
|
|
backgroundColor: 0xffffff, |
|
|
size: 0.8 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.getElementById('year').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('button[aria-label="Toggle navigation"]'); |
|
|
const mobileMenu = document.querySelector('.mobile-menu'); |
|
|
|
|
|
mobileMenuButton?.addEventListener('click', () => { |
|
|
mobileMenu?.classList.toggle('hidden'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
