Hugging Face's logo

Spaces:
iiisticks
/
llmresearch
Running

App Files Community
Cj commited on
Commit
af5edc9
·
verified ·
1 Parent(s): fd1db64

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +587 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Llmresearch
3
- emoji: 🏢
4
- colorFrom: gray
5
  colorTo: gray
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: llmresearch
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,587 @@
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>LLM Research Hub - Cutting Edge Language Model Insights</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .fade-in {
18
+ animation: fadeIn 1s ease-in;
19
+ }
20
+ @keyframes fadeIn {
21
+ from { opacity: 0; }
22
+ to { opacity: 1; }
23
+ }
24
+ .typewriter {
25
+ overflow: hidden;
26
+ border-right: .15em solid #6e8efb;
27
+ white-space: nowrap;
28
+ margin: 0 auto;
29
+ letter-spacing: .15em;
30
+ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
31
+ }
32
+ @keyframes typing {
33
+ from { width: 0 }
34
+ to { width: 100% }
35
+ }
36
+ @keyframes blink-caret {
37
+ from, to { border-color: transparent }
38
+ 50% { border-color: #6e8efb; }
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="font-sans bg-gray-50">
43
+ <!-- Navigation -->
44
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <i class="fas fa-brain text-purple-600 text-2xl mr-2"></i>
50
+ <span class="text-xl font-bold text-gray-900">LLM Research Hub</span>
51
+ </div>
52
+ </div>
53
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
54
+ <a href="#features" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Features</a>
55
+ <a href="#research" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Research</a>
56
+ <a href="#insights" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Insights</a>
57
+ <a href="#contact" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Contact</a>
58
+ </div>
59
+ <div class="-mr-2 flex items-center md:hidden">
60
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
61
+ <span class="sr-only">Open main menu</span>
62
+ <i class="fas fa-bars"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Mobile menu -->
69
+ <div class="hidden md:hidden" id="mobile-menu">
70
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
71
+ <a href="#features" class="text-gray-900 hover:text-purple-600 block px-3 py-2 text-base font-medium">Features</a>
72
+ <a href="#research" class="text-gray-900 hover:text-purple-600 block px-3 py-2 text-base font-medium">Research</a>
73
+ <a href="#insights" class="text-gray-900 hover:text-purple-600 block px-3 py-2 text-base font-medium">Insights</a>
74
+ <a href="#contact" class="text-gray-900 hover:text-purple-600 block px-3 py-2 text-base font-medium">Contact</a>
75
+ </div>
76
+ </div>
77
+ </nav>
78
+
79
+ <!-- Hero Section -->
80
+ <div class="gradient-bg text-white">
81
+ <div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
82
+ <div class="text-center">
83
+ <h1 class="text-4xl md:text-6xl font-extrabold mb-6 fade-in">
84
+ <span class="typewriter">Advancing Language Model Research</span>
85
+ </h1>
86
+ <p class="mt-6 text-xl max-w-3xl mx-auto">
87
+ Discover cutting-edge insights, research papers, and practical applications of large language models.
88
+ </p>
89
+ <div class="mt-10 flex justify-center space-x-4">
90
+ <a href="#research" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10 transition duration-300">
91
+ Explore Research
92
+ </a>
93
+ <a href="#contact" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-800 hover:bg-purple-900 md:py-4 md:text-lg md:px-10 transition duration-300">
94
+ Get Updates
95
+ </a>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Features Section -->
102
+ <div id="features" class="py-16 bg-white">
103
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
104
+ <div class="text-center mb-16">
105
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
106
+ Comprehensive LLM Resources
107
+ </h2>
108
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
109
+ Everything you need to stay at the forefront of language model research and development.
110
+ </p>
111
+ </div>
112
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
113
+ <div class="card-hover bg-white rounded-lg shadow-lg p-8 transition duration-300">
114
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6">
115
+ <i class="fas fa-book-open text-xl"></i>
116
+ </div>
117
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Research Papers</h3>
118
+ <p class="text-gray-500">
119
+ Access the latest academic papers and technical reports on large language models, including architecture, training methods, and evaluation metrics.
120
+ </p>
121
+ </div>
122
+ <div class="card-hover bg-white rounded-lg shadow-lg p-8 transition duration-300">
123
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6">
124
+ <i class="fas fa-chart-line text-xl"></i>
125
+ </div>
126
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Performance Benchmarks</h3>
127
+ <p class="text-gray-500">
128
+ Compare model performance across different tasks and datasets with our comprehensive benchmarking tools and visualizations.
129
+ </p>
130
+ </div>
131
+ <div class="card-hover bg-white rounded-lg shadow-lg p-8 transition duration-300">
132
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6">
133
+ <i class="fas fa-code text-xl"></i>
134
+ </div>
135
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Implementation Guides</h3>
136
+ <p class="text-gray-500">
137
+ Step-by-step tutorials and code examples for implementing and fine-tuning language models in various applications.
138
+ </p>
139
+ </div>
140
+ <div class="card-hover bg-white rounded-lg shadow-lg p-8 transition duration-300">
141
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6">
142
+ <i class="fas fa-users text-xl"></i>
143
+ </div>
144
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Community Insights</h3>
145
+ <p class="text-gray-500">
146
+ Learn from the collective experience of researchers and practitioners through case studies and community-contributed knowledge.
147
+ </p>
148
+ </div>
149
+ <div class="card-hover bg-white rounded-lg shadow-lg p-8 transition duration-300">
150
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6">
151
+ <i class="fas fa-lightbulb text-xl"></i>
152
+ </div>
153
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Emerging Techniques</h3>
154
+ <p class="text-gray-500">
155
+ Stay updated on the latest innovations in prompt engineering, few-shot learning, and other advanced techniques for working with LLMs.
156
+ </p>
157
+ </div>
158
+ <div class="card-hover bg-white rounded-lg shadow-lg p-8 transition duration-300">
159
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600 mb-6">
160
+ <i class="fas fa-shield-alt text-xl"></i>
161
+ </div>
162
+ <h3 class="text-lg font-medium text-gray-900 mb-3">Ethical Considerations</h3>
163
+ <p class="text-gray-500">
164
+ Explore research and guidelines on bias mitigation, safety protocols, and responsible deployment of language models.
165
+ </p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Research Highlights Section -->
172
+ <div id="research" class="py-16 bg-gray-50">
173
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
174
+ <div class="text-center mb-16">
175
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
176
+ Latest Research Highlights
177
+ </h2>
178
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
179
+ Key findings and breakthroughs in language model research
180
+ </p>
181
+ </div>
182
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
183
+ <div class="card-hover bg-white rounded-lg shadow-lg overflow-hidden transition duration-300">
184
+ <div class="p-6">
185
+ <div class="flex items-center mb-4">
186
+ <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">New</span>
187
+ <span class="text-sm text-gray-500 ml-2">Published: June 2023</span>
188
+ </div>
189
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Efficient Training Methods for Large-Scale Models</h3>
190
+ <p class="text-gray-500 mb-4">
191
+ This paper introduces novel techniques for reducing the computational cost of training while maintaining model performance, potentially cutting training costs by up to 40%.
192
+ </p>
193
+ <div class="flex items-center justify-between">
194
+ <span class="text-sm font-medium text-purple-600">Read Paper →</span>
195
+ <div class="flex space-x-2">
196
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Training</span>
197
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Optimization</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ <div class="card-hover bg-white rounded-lg shadow-lg overflow-hidden transition duration-300">
203
+ <div class="p-6">
204
+ <div class="flex items-center mb-4">
205
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Updated</span>
206
+ <span class="text-sm text-gray-500 ml-2">Published: May 2023</span>
207
+ </div>
208
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Multimodal Language Model Architectures</h3>
209
+ <p class="text-gray-500 mb-4">
210
+ Comprehensive analysis of architectures that combine text with other modalities (images, audio) and their performance on cross-modal understanding tasks.
211
+ </p>
212
+ <div class="flex items-center justify-between">
213
+ <span class="text-sm font-medium text-purple-600">Read Paper →</span>
214
+ <div class="flex space-x-2">
215
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Multimodal</span>
216
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Architecture</span>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ <div class="card-hover bg-white rounded-lg shadow-lg overflow-hidden transition duration-300">
222
+ <div class="p-6">
223
+ <div class="flex items-center mb-4">
224
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Case Study</span>
225
+ <span class="text-sm text-gray-500 ml-2">Published: April 2023</span>
226
+ </div>
227
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Real-World Deployment Challenges</h3>
228
+ <p class="text-gray-500 mb-4">
229
+ Analysis of practical issues encountered when deploying LLMs in production environments, including latency optimization and cost management strategies.
230
+ </p>
231
+ <div class="flex items-center justify-between">
232
+ <span class="text-sm font-medium text-purple-600">Read Study →</span>
233
+ <div class="flex space-x-2">
234
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Deployment</span>
235
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Production</span>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ <div class="card-hover bg-white rounded-lg shadow-lg overflow-hidden transition duration-300">
241
+ <div class="p-6">
242
+ <div class="flex items-center mb-4">
243
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">Survey</span>
244
+ <span class="text-sm text-gray-500 ml-2">Published: March 2023</span>
245
+ </div>
246
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Emerging Applications in Healthcare</h3>
247
+ <p class="text-gray-500 mb-4">
248
+ Comprehensive review of how language models are being adapted for medical documentation, diagnosis support, and patient communication.
249
+ </p>
250
+ <div class="flex items-center justify-between">
251
+ <span class="text-sm font-medium text-purple-600">Read Survey →</span>
252
+ <div class="flex space-x-2">
253
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Healthcare</span>
254
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Applications</span>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="mt-12 text-center">
261
+ <a href="#" class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 transition duration-300">
262
+ View All Research
263
+ </a>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Insights Section -->
269
+ <div id="insights" class="py-16 bg-white">
270
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
271
+ <div class="text-center mb-16">
272
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
273
+ Expert Insights & Analysis
274
+ </h2>
275
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
276
+ Deep dives into the most important topics in language model research
277
+ </p>
278
+ </div>
279
+ <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
280
+ <div class="lg:col-span-2">
281
+ <div class="card-hover bg-gray-50 rounded-lg shadow-lg overflow-hidden transition duration-300">
282
+ <div class="md:flex">
283
+ <div class="md:flex-shrink-0">
284
+ <img class="h-48 w-full object-cover md:w-48" src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Model architecture visualization">
285
+ </div>
286
+ <div class="p-8">
287
+ <div class="uppercase tracking-wide text-sm text-purple-600 font-semibold mb-1">Technical Analysis</div>
288
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Understanding Transformer Variants</h3>
289
+ <p class="text-gray-500 mb-4">
290
+ Comparative analysis of different transformer architectures (vanilla, sparse, memory-augmented) and their trade-offs in terms of performance, memory usage, and training stability.
291
+ </p>
292
+ <div class="flex items-center">
293
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/47.jpg" alt="Author">
294
+ <div class="ml-3">
295
+ <p class="text-sm font-medium text-gray-900">Dr. Sarah Chen</p>
296
+ <p class="text-sm text-gray-500">Senior Research Scientist</p>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ <div>
304
+ <div class="card-hover bg-gray-50 rounded-lg shadow-lg p-6 transition duration-300 h-full">
305
+ <div class="flex items-center mb-4">
306
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-2">
307
+ <i class="fas fa-chart-pie text-purple-600"></i>
308
+ </div>
309
+ <div class="ml-3">
310
+ <h3 class="text-lg font-bold text-gray-900">Benchmark Results</h3>
311
+ </div>
312
+ </div>
313
+ <p class="text-gray-500 mb-4">
314
+ Latest performance metrics comparing top language models across 12 different NLP tasks, including reading comprehension, summarization, and commonsense reasoning.
315
+ </p>
316
+ <div class="mt-auto">
317
+ <a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-500">View Full Report →</a>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <div>
322
+ <div class="card-hover bg-gray-50 rounded-lg shadow-lg p-6 transition duration-300 h-full">
323
+ <div class="flex items-center mb-4">
324
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-2">
325
+ <i class="fas fa-tools text-purple-600"></i>
326
+ </div>
327
+ <div class="ml-3">
328
+ <h3 class="text-lg font-bold text-gray-900">Tooling Updates</h3>
329
+ </div>
330
+ </div>
331
+ <p class="text-gray-500 mb-4">
332
+ Overview of newly released libraries and frameworks for working with large language models, including fine-tuning tools and deployment solutions.
333
+ </p>
334
+ <div class="mt-auto">
335
+ <a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-500">Explore Tools →</a>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ <div class="lg:col-span-2">
340
+ <div class="card-hover bg-gray-50 rounded-lg shadow-lg overflow-hidden transition duration-300">
341
+ <div class="md:flex">
342
+ <div class="md:flex-shrink-0">
343
+ <img class="h-48 w-full object-cover md:w-48" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ethical considerations">
344
+ </div>
345
+ <div class="p-8">
346
+ <div class="uppercase tracking-wide text-sm text-purple-600 font-semibold mb-1">Ethics & Safety</div>
347
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Mitigating Harmful Outputs</h3>
348
+ <p class="text-gray-500 mb-4">
349
+ Comprehensive review of techniques for reducing toxic, biased, or otherwise harmful outputs from language models, with case studies from recent deployments.
350
+ </p>
351
+ <div class="flex items-center">
352
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author">
353
+ <div class="ml-3">
354
+ <p class="text-sm font-medium text-gray-900">Dr. James Wilson</p>
355
+ <p class="text-sm text-gray-500">AI Ethics Researcher</p>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Newsletter Section -->
367
+ <div class="gradient-bg text-white py-16">
368
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
369
+ <div class="text-center">
370
+ <h2 class="text-3xl font-extrabold sm:text-4xl">
371
+ Stay Updated with the Latest Research
372
+ </h2>
373
+ <p class="mt-4 max-w-2xl text-xl mx-auto">
374
+ Join our newsletter to receive monthly updates on new papers, tools, and insights.
375
+ </p>
376
+ <div class="mt-8 max-w-xl mx-auto">
377
+ <form class="sm:flex">
378
+ <label for="email-address" class="sr-only">Email address</label>
379
+ <input id="email-address" name="email" type="email" autocomplete="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-2 focus:ring-purple-500 focus:border-transparent sm:max-w-xs rounded-md" placeholder="Enter your email">
380
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
381
+ <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-white hover:bg-gray-100 transition duration-300">
382
+ Subscribe
383
+ </button>
384
+ </div>
385
+ </form>
386
+ <p class="mt-3 text-sm text-purple-100">
387
+ We respect your privacy. Unsubscribe at any time.
388
+ </p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Contact Section -->
395
+ <div id="contact" class="py-16 bg-white">
396
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
397
+ <div class="lg:text-center">
398
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
399
+ Get In Touch
400
+ </h2>
401
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
402
+ Have questions about our research or want to collaborate? Reach out to our team.
403
+ </p>
404
+ </div>
405
+ <div class="mt-16">
406
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
407
+ <div class="card-hover bg-gray-50 rounded-lg shadow-lg p-8 transition duration-300">
408
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Contact Information</h3>
409
+ <div class="mt-6">
410
+ <div class="flex items-start">
411
+ <div class="flex-shrink-0">
412
+ <i class="fas fa-envelope text-purple-600"></i>
413
+ </div>
414
+ <div class="ml-3">
415
+ <p class="text-sm font-medium text-gray-900">Email</p>
416
+ <p class="text-sm text-gray-500">research@llmhub.org</p>
417
+ </div>
418
+ </div>
419
+ <div class="mt-4 flex items-start">
420
+ <div class="flex-shrink-0">
421
+ <i class="fas fa-map-marker-alt text-purple-600"></i>
422
+ </div>
423
+ <div class="ml-3">
424
+ <p class="text-sm font-medium text-gray-900">Office</p>
425
+ <p class="text-sm text-gray-500">123 Research Park, San Francisco, CA 94107</p>
426
+ </div>
427
+ </div>
428
+ <div class="mt-4 flex items-start">
429
+ <div class="flex-shrink-0">
430
+ <i class="fas fa-phone-alt text-purple-600"></i>
431
+ </div>
432
+ <div class="ml-3">
433
+ <p class="text-sm font-medium text-gray-900">Phone</p>
434
+ <p class="text-sm text-gray-500">+1 (555) 123-4567</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ <div class="card-hover bg-gray-50 rounded-lg shadow-lg p-8 transition duration-300">
440
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Send Us a Message</h3>
441
+ <form class="mt-6 space-y-6">
442
+ <div>
443
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
444
+ <div class="mt-1">
445
+ <input type="text" name="name" id="name" class="py-3 px-4 block w-full border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" placeholder="Your name">
446
+ </div>
447
+ </div>
448
+ <div>
449
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
450
+ <div class="mt-1">
451
+ <input type="email" name="email" id="email" class="py-3 px-4 block w-full border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" placeholder="your.email@example.com">
452
+ </div>
453
+ </div>
454
+ <div>
455
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
456
+ <div class="mt-1">
457
+ <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" placeholder="Your message"></textarea>
458
+ </div>
459
+ </div>
460
+ <div>
461
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition duration-300">
462
+ Send Message
463
+ </button>
464
+ </div>
465
+ </form>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Footer -->
473
+ <footer class="bg-gray-900 text-white">
474
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
475
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
476
+ <div>
477
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Research</h3>
478
+ <ul class="space-y-3">
479
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Papers</a></li>
480
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Benchmarks</a></li>
481
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Methodologies</a></li>
482
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Datasets</a></li>
483
+ </ul>
484
+ </div>
485
+ <div>
486
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Resources</h3>
487
+ <ul class="space-y-3">
488
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Tools</a></li>
489
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Tutorials</a></li>
490
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">APIs</a></li>
491
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
492
+ </ul>
493
+ </div>
494
+ <div>
495
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Community</h3>
496
+ <ul class="space-y-3">
497
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Forums</a></li>
498
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Events</a></li>
499
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contributors</a></li>
500
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Partners</a></li>
501
+ </ul>
502
+ </div>
503
+ <div>
504
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Company</h3>
505
+ <ul class="space-y-3">
506
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
507
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Team</a></li>
508
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
509
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
510
+ </ul>
511
+ </div>
512
+ </div>
513
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
514
+ <div class="flex space-x-6">
515
+ <a href="#" class="text-gray-400 hover:text-white">
516
+ <i class="fab fa-twitter text-xl"></i>
517
+ </a>
518
+ <a href="#" class="text-gray-400 hover:text-white">
519
+ <i class="fab fa-github text-xl"></i>
520
+ </a>
521
+ <a href="#" class="text-gray-400 hover:text-white">
522
+ <i class="fab fa-linkedin text-xl"></i>
523
+ </a>
524
+ <a href="#" class="text-gray-400 hover:text-white">
525
+ <i class="fab fa-youtube text-xl"></i>
526
+ </a>
527
+ </div>
528
+ <p class="mt-4 md:mt-0 text-base text-gray-400">
529
+ &copy; 2023 LLM Research Hub. All rights reserved.
530
+ </p>
531
+ </div>
532
+ </div>
533
+ </footer>
534
+
535
+ <script>
536
+ // Mobile menu toggle
537
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
538
+ const menu = document.getElementById('mobile-menu');
539
+ if (menu.classList.contains('hidden')) {
540
+ menu.classList.remove('hidden');
541
+ } else {
542
+ menu.classList.add('hidden');
543
+ }
544
+ });
545
+
546
+ // Smooth scrolling for anchor links
547
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
548
+ anchor.addEventListener('click', function (e) {
549
+ e.preventDefault();
550
+
551
+ const targetId = this.getAttribute('href');
552
+ if (targetId === '#') return;
553
+
554
+ const targetElement = document.querySelector(targetId);
555
+ if (targetElement) {
556
+ targetElement.scrollIntoView({
557
+ behavior: 'smooth'
558
+ });
559
+
560
+ // Close mobile menu if open
561
+ const mobileMenu = document.getElementById('mobile-menu');
562
+ if (!mobileMenu.classList.contains('hidden')) {
563
+ mobileMenu.classList.add('hidden');
564
+ }
565
+ }
566
+ });
567
+ });
568
+
569
+ // Animation on scroll
570
+ const observerOptions = {
571
+ threshold: 0.1
572
+ };
573
+
574
+ const observer = new IntersectionObserver((entries) => {
575
+ entries.forEach(entry => {
576
+ if (entry.isIntersecting) {
577
+ entry.target.classList.add('animate-fadeIn');
578
+ }
579
+ });
580
+ }, observerOptions);
581
+
582
+ document.querySelectorAll('.card-hover').forEach(card => {
583
+ observer.observe(card);
584
+ });
585
+ </script>
586
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Its3sticks/llmresearch" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
587
+ </html>