Hugging Face's logo

Spaces:
sanaka87
/
undefined
Running

App Files Community
sanaka87 commited on
Commit
44de4e4
·
verified ·
1 Parent(s): d25eb9b

简约一点点，紧凑一点点

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +264 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐨
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: red
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,265 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ji Xie — AI Research Portfolio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
10
+ <style>
11
+ #hero-vanta { position:absolute; inset:0; z-index:0 }
12
+ .hero-content { position:relative; z-index:10 }
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ .card-hover { transition: all 0.3s ease }
20
+ .card-hover:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1)
23
+ }
24
+ .timeline-dot {
25
+ width:12px; height:12px; border-radius:50%;
26
+ background:#6366f1; position:absolute;
27
+ left:-6px; top:6px;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="font-sans antialiased text-gray-800 bg-white">
32
+ <!-- Vanta.js Background -->
33
+ <div id="hero-vanta"></div>
34
+ <header class="fixed w-full z-50 bg-white/90 backdrop-blur-sm shadow-sm">
35
+ <div class="container mx-auto px-4 py-3">
36
+ <nav class="flex justify-between items-center">
37
+ <a href="#" class="text-xl font-bold gradient-text">Ji Xie</a>
38
+ <div class="hidden md:flex gap-6">
39
+ <a href="#about" class="hover:text-indigo-600">About</a>
40
+ <a href="#research" class="hover:text-indigo-600">Research</a>
41
+ <a href="#projects" class="hover:text-indigo-600">Projects</a>
42
+ <a href="#contact" class="hover:text-indigo-600">Contact</a>
43
+ </div>
44
+ <button class="md:hidden">
45
+ <i data-feather="menu"></i>
46
+ </button>
47
+ </nav>
48
+ </div>
49
+ </header>
50
+ <section class="relative min-h-[90vh] flex items-center pt-16">
51
+ <div class="container mx-auto px-4 py-12">
52
+ <div class="max-w-2xl hero-content">
53
+ <p class="text-indigo-500 mb-3">CV · Generative AI · Multimodal</p>
54
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Ji Xie</span></h1>
55
+ <p class="text-gray-600 mb-6">
56
+ Building controllable vision-language systems at Berkeley AI Research & Zhejiang University.
57
+ </p>
58
+ <div class="flex gap-3">
59
+ <a href="#contact" class="px-6 py-2 bg-indigo-600 text-white rounded-full">Contact</a>
60
+ <a href="#projects" class="px-6 py-2 border border-indigo-600 rounded-full">Projects</a>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </section>
65
+ <section id="about" class="py-16 bg-white">
66
+ <div class="container mx-auto px-4">
67
+ <div class="max-w-3xl mx-auto">
68
+ <h2 class="text-2xl font-bold mb-4">About</h2>
69
+ <div class="grid md:grid-cols-2 gap-8">
70
+ <div>
71
+ <p class="text-gray-600 mb-3">
72
+ Bridging research and engineering to make AI more reliable and controllable.
73
+ </p>
74
+ <p class="text-gray-600 mb-3">
75
+ At <span class="text-indigo-600 font-medium">Zhejiang University</span> and Berkeley AI Research, I focus on vision-language systems.
76
+ </p>
77
+ </div>
78
+ <div>
79
+ <p class="text-gray-600">
80
+ My work includes text-to-image generation, multimodal reasoning, and developing tools to make advanced models more accessible.
81
+ </p>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+ <section id="research" class="py-16 bg-gray-50">
88
+ <div class="container mx-auto px-4">
89
+ <div class="max-w-3xl mx-auto text-center mb-8">
90
+ <h2 class="text-2xl font-bold mb-2">Research</h2>
91
+ <p class="text-gray-600">Key focus areas</p>
92
+ </div>
93
+ <div class="grid md:grid-cols-3 gap-4">
94
+ <div class="bg-white p-6 rounded-lg card-hover">
95
+ <i data-feather="cpu" class="text-indigo-600 mb-3"></i>
96
+ <h3 class="font-bold mb-2">Multimodal Models</h3>
97
+ <p class="text-gray-600 text-sm">Joint reasoning across text and vision</p>
98
+ </div>
99
+ <div class="bg-white p-6 rounded-lg card-hover">
100
+ <i data-feather="sliders" class="text-purple-600 mb-3"></i>
101
+ <h3 class="font-bold mb-2">Controllable AI</h3>
102
+ <p class="text-gray-600 text-sm">Steerable generation workflows</p>
103
+ </div>
104
+ <div class="bg-white p-6 rounded-lg card-hover">
105
+ <i data-feather="shield" class="text-pink-600 mb-3"></i>
106
+ <h3 class="font-bold mb-2">Trustworthy AI</h3>
107
+ <p class="text-gray-600 text-sm">Responsible model behaviors</p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </section>
112
+ <!-- Projects Section -->
113
+ <section id="projects" class="py-20 bg-white">
114
+ <div class="container mx-auto px-6">
115
+ <div class="max-w-4xl mx-auto">
116
+ <h2 class="text-3xl font-bold mb-6">Selected Work</h2>
117
+ <p class="text-gray-600 mb-12">Highlights from ongoing research and collaborations</p>
118
+
119
+ <div class="space-y-8">
120
+ <div class="border border-gray-200 rounded-xl overflow-hidden card-hover">
121
+ <div class="bg-gray-900 h-48 flex items-center justify-center">
122
+ <img src="http://static.photos/technology/1024x576/42" alt="AI visualization" class="h-full w-full object-cover opacity-70">
123
+ </div>
124
+ <div class="p-8">
125
+ <div class="flex justify-between items-start mb-4">
126
+ <div>
127
+ <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>
128
+ <h3 class="text-2xl font-bold">Instruction-Guided Diffusion Editing</h3>
129
+ </div>
130
+ </div>
131
+ <p class="text-gray-600 mb-6">Building a controllable editing stack that aligns diffusion models with free-form instructions and layout hints.</p>
132
+ <div class="flex space-x-4">
133
+ <a href="mailto:sanaka@berkeley.edu" class="text-indigo-600 hover:text-indigo-800 flex items-center">
134
+ <i data-feather="mail" class="w-4 h-4 mr-2"></i> Contact
135
+ </a>
136
+ <a href="https://github.com/HorizonWind2004" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center">
137
+ <i data-feather="github" class="w-4 h-4 mr-2"></i> GitHub
138
+ </a>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="border border-gray-200 rounded-xl overflow-hidden card-hover">
144
+ <div class="bg-gray-900 h-48 flex items-center justify-center">
145
+ <img src="http://static.photos/abstract/1024x576/23" alt="Multimodal visualization" class="h-full w-full object-cover opacity-70">
146
+ </div>
147
+ <div class="p-8">
148
+ <div class="flex justify-between items-start mb-4">
149
+ <div>
150
+ <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>
151
+ <h3 class="text-2xl font-bold">Unified Vision-Language Benchmarks</h3>
152
+ </div>
153
+ </div>
154
+ <p class="text-gray-600 mb-6">Curated a benchmarking suite for evaluating grounding and reasoning across captioning, VQA, and editing tasks.</p>
155
+ <div class="flex space-x-4">
156
+ <a href="https://scholar.google.com.hk/citations?user=Wv7ItTYAAAAJ" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center">
157
+ <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Overview
158
+ </a>
159
+ <a href="mailto:sanaka@berkeley.edu" class="text-indigo-600 hover:text-indigo-800 flex items-center">
160
+ <i data-feather="mail" class="w-4 h-4 mr-2"></i> Request access
161
+ </a>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Updates Section -->
171
+ <section id="updates" class="py-20 bg-gray-50">
172
+ <div class="container mx-auto px-6">
173
+ <div class="max-w-4xl mx-auto">
174
+ <div class="text-center mb-16">
175
+ <h2 class="text-3xl font-bold mb-4">Recent Updates</h2>
176
+ <p class="text-gray-600">Snapshots of what I've been up to</p>
177
+ </div>
178
+
179
+ <div class="relative">
180
+ <div class="absolute left-0 h-full w-0.5 bg-gray-200"></div>
181
+
182
+ <div class="relative pl-8 mb-12">
183
+ <div class="timeline-dot"></div>
184
+ <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>
185
+ <h3 class="text-xl font-bold mb-2">Joined Berkeley AI Research</h3>
186
+ <p class="text-gray-600">Started an internship with the BAIR lab to explore multimodal instruction-following models.</p>
187
+ </div>
188
+
189
+ <div class="relative pl-8 mb-12">
190
+ <div class="timeline-dot"></div>
191
+ <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>
192
+ <h3 class="text-xl font-bold mb-2">Presented on controllable generation</h3>
193
+ <p class="text-gray-600">Shared work on layout-aware diffusion editing at a university seminar.</p>
194
+ </div>
195
+
196
+ <div class="relative pl-8">
197
+ <div class="timeline-dot"></div>
198
+ <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>
199
+ <h3 class="text-xl font-bold mb-2">Launched open-source resources</h3>
200
+ <p class="text-gray-600">Published a public repo of prompts and evaluation scripts for diffusion-based editing pipelines.</p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </section>
206
+ <section id="contact" class="py-16 bg-indigo-600 text-white">
207
+ <div class="container mx-auto px-4">
208
+ <div class="max-w-3xl mx-auto text-center">
209
+ <h2 class="text-2xl font-bold mb-4">Contact</h2>
210
+ <p class="text-indigo-100 mb-6">Let's connect about vision and generative AI</p>
211
+
212
+ <div class="grid md:grid-cols-3 gap-4">
213
+ <a href="mailto:sanaka@berkeley.edu" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800">
214
+ <i data-feather="mail" class="mb-2"></i>
215
+ <p class="text-sm">sanaka@berkeley.edu</p>
216
+ </a>
217
+ <a href="https://github.com/HorizonWind2004" target="_blank" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800">
218
+ <i data-feather="github" class="mb-2"></i>
219
+ <p class="text-sm">GitHub</p>
220
+ </a>
221
+ <a href="https://scholar.google.com.hk/citations?user=Wv7ItTYAAAAJ" target="_blank" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800">
222
+ <i data-feather="book" class="mb-2"></i>
223
+ <p class="text-sm">Scholar</p>
224
+ </a>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </section>
229
+ <footer class="py-6 bg-gray-900 text-gray-400 text-sm">
230
+ <div class="container mx-auto px-4 text-center">
231
+ <p>&copy; <span id="year"></span> Ji Xie</p>
232
+ </div>
233
+ </footer>
234
+ <script>
235
+ // Initialize Vanta.js
236
+ VANTA.GLOBE({
237
+ el: "#hero-vanta",
238
+ mouseControls: true,
239
+ touchControls: true,
240
+ gyroControls: false,
241
+ minHeight: 200.00,
242
+ minWidth: 200.00,
243
+ scale: 1.00,
244
+ scaleMobile: 1.00,
245
+ color: 0x6366f1,
246
+ backgroundColor: 0xffffff,
247
+ size: 0.8
248
+ });
249
+
250
+ // Initialize Feather Icons
251
+ feather.replace();
252
+
253
+ // Update copyright year
254
+ document.getElementById('year').textContent = new Date().getFullYear();
255
+
256
+ // Mobile menu toggle
257
+ const mobileMenuButton = document.querySelector('button[aria-label="Toggle navigation"]');
258
+ const mobileMenu = document.querySelector('.mobile-menu');
259
+
260
+ mobileMenuButton?.addEventListener('click', () => {
261
+ mobileMenu?.classList.toggle('hidden');
262
+ });
263
+ </script>
264
+ </body>
265
  </html>