Hugging Face's logo

Spaces:
SahilChande
/
deepdive-labs
Running

App Files Community
SahilChande commited on
Commit
3485987
·
verified ·
1 Parent(s): 4044313

https://huggingface.co/spaces/enzostvs/deepsite

Browse files

i want a page where i can have same cards , make it with dummy information and pages

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +286 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepdive Labs
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: yellow
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: DeepDive Labs 🚀
3
+ colorFrom: yellow
4
+ colorTo: purple
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).
index.html CHANGED
@@ -1,19 +1,286 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DeepDive Labs</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ undefined: {
18
+ 500: '#6366f1',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .card-hover {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .card-hover:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+ .tag-hover {
34
+ transition: all 0.2s ease;
35
+ }
36
+ .tag-hover:hover {
37
+ background-color: rgba(99, 102, 241, 0.2);
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
42
+ <!-- Navigation -->
43
+ <nav class="bg-gray-800 border-b border-gray-700">
44
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45
+ <div class="flex items-center justify-between h-16">
46
+ <div class="flex items-center">
47
+ <div class="flex-shrink-0">
48
+ <span class="text-undefined-500 font-bold text-xl">DeepDive</span>
49
+ </div>
50
+ <div class="hidden md:block">
51
+ <div class="ml-10 flex items-baseline space-x-4">
52
+ <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Models</a>
53
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Datasets</a>
54
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Papers</a>
55
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tutorials</a>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ <div class="hidden md:block">
60
+ <div class="ml-4 flex items-center md:ml-6">
61
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
62
+ <i data-feather="search"></i>
63
+ </button>
64
+ <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
65
+ <i data-feather="moon"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </nav>
72
+
73
+ <!-- Hero Section -->
74
+ <header class="bg-gradient-to-r from-gray-800 to-gray-900 py-16">
75
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
76
+ <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
77
+ Explore Cutting-Edge AI Projects
78
+ </h1>
79
+ <p class="mt-6 max-w-3xl mx-auto text-xl text-gray-300">
80
+ Discover, share, and collaborate on machine learning models, datasets, and research.
81
+ </p>
82
+ <div class="mt-10 flex justify-center">
83
+ <div class="inline-flex rounded-md shadow">
84
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-undefined-500 hover:bg-undefined-600">
85
+ Upload Project
86
+ </a>
87
+ </div>
88
+ <div class="ml-3 inline-flex">
89
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-undefined-500 bg-white hover:bg-gray-50">
90
+ Browse All
91
+ </a>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </header>
96
+
97
+ <!-- Main Content -->
98
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
99
+ <!-- Filter Section -->
100
+ <div class="flex flex-col md:flex-row justify-between items-center mb-8">
101
+ <div class="w-full md:w-auto mb-4 md:mb-0">
102
+ <div class="relative">
103
+ <input type="text" placeholder="Search projects..." class="bg-gray-800 text-white placeholder-gray-400 rounded-lg px-4 py-2 pl-10 w-full md:w-64 focus:outline-none focus:ring-2 focus:ring-undefined-500">
104
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
105
+ </div>
106
+ </div>
107
+ <div class="flex space-x-2">
108
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-undefined-500">
109
+ <i data-feather="filter" class="w-4 h-4 inline mr-2"></i>
110
+ Filters
111
+ </button>
112
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-undefined-500">
113
+ <i data-feather="list" class="w-4 h-4 inline mr-2"></i>
114
+ Sort
115
+ </button>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Cards Grid -->
120
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
121
+ <!-- Card 1 -->
122
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg border border-gray-700 card-hover">
123
+ <div class="p-4">
124
+ <div class="flex items-center mb-4">
125
+ <img src="http://static.photos/technology/320x240/1" alt="Project Icon" class="w-12 h-12 rounded-lg object-cover mr-4">
126
+ <div>
127
+ <h3 class="text-lg font-semibold text-white">Project Alpha</h3>
128
+ <p class="text-sm text-gray-400">by ML Researcher</p>
129
+ </div>
130
+ </div>
131
+ <p class="text-gray-300 mb-4">A machine learning model for advanced image recognition with 95% accuracy on benchmark datasets.</p>
132
+ <div class="flex flex-wrap gap-2 mb-4">
133
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">Computer Vision</span>
134
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">PyTorch</span>
135
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">CNN</span>
136
+ </div>
137
+ <div class="flex justify-between items-center text-sm text-gray-400">
138
+ <span><i data-feather="calendar" class="w-4 h-4 inline mr-1"></i> Jan 2023</span>
139
+ <span><i data-feather="download" class="w-4 h-4 inline mr-1"></i> 1.2k</span>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Card 2 -->
145
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg border border-gray-700 card-hover">
146
+ <div class="p-4">
147
+ <div class="flex items-center mb-4">
148
+ <img src="http://static.photos/science/320x240/2" alt="Project Icon" class="w-12 h-12 rounded-lg object-cover mr-4">
149
+ <div>
150
+ <h3 class="text-lg font-semibold text-white">NLP Transformer</h3>
151
+ <p class="text-sm text-gray-400">by AI Labs</p>
152
+ </div>
153
+ </div>
154
+ <p class="text-gray-300 mb-4">State-of-the-art natural language processing model for text classification and generation tasks.</p>
155
+ <div class="flex flex-wrap gap-2 mb-4">
156
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">NLP</span>
157
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">TensorFlow</span>
158
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">Transformer</span>
159
+ </div>
160
+ <div class="flex justify-between items-center text-sm text-gray-400">
161
+ <span><i data-feather="calendar" class="w-4 h-4 inline mr-1"></i> Mar 2023</span>
162
+ <span><i data-feather="download" class="w-4 h-4 inline mr-1"></i> 3.4k</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Card 3 -->
168
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg border border-gray-700 card-hover">
169
+ <div class="p-4">
170
+ <div class="flex items-center mb-4">
171
+ <img src="http://static.photos/abstract/320x240/3" alt="Project Icon" class="w-12 h-12 rounded-lg object-cover mr-4">
172
+ <div>
173
+ <h3 class="text-lg font-semibold text-white">Reinforcement RL</h3>
174
+ <p class="text-sm text-gray-400">by Robotics Team</p>
175
+ </div>
176
+ </div>
177
+ <p class="text-gray-300 mb-4">Deep reinforcement learning framework for autonomous robotics applications.</p>
178
+ <div class="flex flex-wrap gap-2 mb-4">
179
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">RL</span>
180
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">PyTorch</span>
181
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">Robotics</span>
182
+ </div>
183
+ <div class="flex justify-between items-center text-sm text-gray-400">
184
+ <span><i data-feather="calendar" class="w-4 h-4 inline mr-1"></i> Nov 2022</span>
185
+ <span><i data-feather="download" class="w-4 h-4 inline mr-1"></i> 876</span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Card 4 -->
191
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg border border-gray-700 card-hover">
192
+ <div class="p-4">
193
+ <div class="flex items-center mb-4">
194
+ <img src="http://static.photos/medical/320x240/4" alt="Project Icon" class="w-12 h-12 rounded-lg object-cover mr-4">
195
+ <div>
196
+ <h3 class="text-lg font-semibold text-white">MedImage AI</h3>
197
+ <p class="text-sm text-gray-400">by HealthTech</p>
198
+ </div>
199
+ </div>
200
+ <p class="text-gray-300 mb-4">Medical image analysis for early detection of abnormalities in X-ray scans.</p>
201
+ <div class="flex flex-wrap gap-2 mb-4">
202
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">Healthcare</span>
203
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">TensorFlow</span>
204
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">Medical AI</span>
205
+ </div>
206
+ <div class="flex justify-between items-center text-sm text-gray-400">
207
+ <span><i data-feather="calendar" class="w-4 h-4 inline mr-1"></i> Feb 2023</span>
208
+ <span><i data-feather="download" class="w-4 h-4 inline mr-1"></i> 2.1k</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Card 5 -->
214
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg border border-gray-700 card-hover">
215
+ <div class="p-4">
216
+ <div class="flex items-center mb-4">
217
+ <img src="http://static.photos/finance/320x240/5" alt="Project Icon" class="w-12 h-12 rounded-lg object-cover mr-4">
218
+ <div>
219
+ <h3 class="text-lg font-semibold text-white">Stock Predictor</h3>
220
+ <p class="text-sm text-gray-400">by FinTech AI</p>
221
+ </div>
222
+ </div>
223
+ <p class="text-gray-300 mb-4">Time series forecasting model for stock market predictions with LSTM architecture.</p>
224
+ <div class="flex flex-wrap gap-2 mb-4">
225
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">Finance</span>
226
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">TensorFlow</span>
227
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">LSTM</span>
228
+ </div>
229
+ <div class="flex justify-between items-center text-sm text-gray-400">
230
+ <span><i data-feather="calendar" class="w-4 h-4 inline mr-1"></i> Dec 2022</span>
231
+ <span><i data-feather="download" class="w-4 h-4 inline mr-1"></i> 1.5k</span>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Card 6 -->
237
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg border border-gray-700 card-hover">
238
+ <div class="p-4">
239
+ <div class="flex items-center mb-4">
240
+ <img src="http://static.photos/education/320x240/6" alt="Project Icon" class="w-12 h-12 rounded-lg object-cover mr-4">
241
+ <div>
242
+ <h3 class="text-lg font-semibold text-white">EduChatbot</h3>
243
+ <p class="text-sm text-gray-400">by EduTech</p>
244
+ </div>
245
+ </div>
246
+ <p class="text-gray-300 mb-4">Conversational AI assistant for educational content delivery and student support.</p>
247
+ <div class="flex flex-wrap gap-2 mb-4">
248
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">NLP</span>
249
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">PyTorch</span>
250
+ <span class="text-xs px-2 py-1 bg-gray-700 text-gray-300 rounded-full tag-hover">Chatbot</span>
251
+ </div>
252
+ <div class="flex justify-between items-center text-sm text-gray-400">
253
+ <span><i data-feather="calendar" class="w-4 h-4 inline mr-1"></i> Apr 2023</span>
254
+ <span><i data-feather="download" class="w-4 h-4 inline mr-1"></i> 987</span>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Pagination -->
261
+ <div class="mt-12 flex justify-center">
262
+ <nav class="inline-flex rounded-md shadow">
263
+ <a href="#" class="px-3 py-2 rounded-l-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700">
264
+ Previous
265
+ </a>
266
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-700 bg-undefined-500 text-sm font-medium text-white">
267
+ 1
268
+ </a>
269
+ <a href="#" class="px-3 py-2 border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700">
270
+ 2
271
+ </a>
272
+ <a href="#" class="px-3 py-2 border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700">
273
+ 3
274
+ </a>
275
+ <a href="#" class="px-3 py-2 rounded-r-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700">
276
+ Next
277
+ </a>
278
+ </nav>
279
+ </div>
280
+ </main>
281
+
282
+ <!-- Footer -->
283
+ <footer class="bg-gray-800 border-t border-gray-700 mt-12">
284
+ <div class="max-w-7xl mx-auto px-4 sm:px-6
285
+ </body>
286
+ </html>