Hugging Face's logo

Spaces:
faridlab
/
README
Running

App Files Community
matybohacek commited on
Commit
8309a2c
·
verified ·
1 Parent(s): 5a25f90

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +75 -102
README.md CHANGED
@@ -6,14 +6,6 @@ colorTo: green
6
  sdk: static
7
  pinned: false
8
  ---
9
-
10
- <!--
11
- Example Landing Page / README
12
-
13
- Replace the 'href' values with the links to your actual dataset pages
14
- and update the 'src' values to point to your images or placeholders.
15
- -->
16
-
17
  <!DOCTYPE html>
18
  <html lang="en">
19
  <head>
@@ -21,126 +13,107 @@ pinned: false
21
  <title>Lab Datasets</title>
22
  <style>
23
  body {
24
- font-family: sans-serif;
25
  margin: 20px;
26
  padding: 0;
27
  }
28
 
29
- h1 {
30
- text-align: center;
31
- margin-bottom: 2rem;
32
- }
33
-
34
- /* Container that holds all categories */
35
- .container {
36
- max-width: 1200px;
37
- margin: 0 auto;
38
- padding: 0 1rem;
39
  }
40
 
41
- /* Each category section */
42
  .category {
43
  margin-bottom: 2rem;
44
  }
45
 
46
- .category h2 {
47
- margin-bottom: 1rem;
48
- }
49
-
50
- /* The responsive grid */
51
  .grid {
52
- display: grid;
53
- /* Adjust minmax as desired for your tile width */
54
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
55
- gap: 1rem;
56
  }
57
 
58
- /* Each card (dataset tile) */
59
  .card {
60
- position: relative;
61
- text-decoration: none;
62
- color: #333;
63
- border: 1px solid #ccc;
64
- border-radius: 8px;
65
- overflow: hidden;
66
- }
67
-
68
- /* Force images to be square and fill container */
69
- .card img {
70
- width: 100%;
71
- display: block;
72
- aspect-ratio: 1 / 1; /* Modern browsers only; ensures a square */
73
- object-fit: cover;
74
- }
75
-
76
- /* Title overlay at bottom of image */
77
- .card-title {
78
- position: absolute;
79
- bottom: 0;
80
- width: 100%;
81
- padding: 0.5rem;
82
- background: rgba(255, 255, 255, 0.8);
83
- text-align: center;
84
  font-weight: bold;
 
 
 
85
  }
86
 
87
- /* Hover effect (optional) */
88
- .card:hover .card-title {
89
- background: rgba(255, 255, 255, 1);
90
- }
91
-
92
- /* Optional small screen adjustments */
93
  @media (max-width: 600px) {
94
- h1 {
95
- font-size: 1.5rem;
96
- }
97
- .category h2 {
98
- font-size: 1.2rem;
99
  }
100
  }
101
  </style>
102
  </head>
103
  <body>
104
- <div class="container">
105
- <div class="category">
106
- <h2>Deepfakes</h2>
107
- <div class="grid">
108
- <!-- DeepSpeak v1.0 -->
109
- <a class="card" href="https://huggingface.co/your-org/DeepSpeak-v1.0">
110
- <img src="https://via.placeholder.com/400?text=DeepSpeak+v1.0" alt="DeepSpeak v1.0" />
111
- <div class="card-title">DeepSpeak v1.0</div>
112
- </a>
113
- <a class="card" href="https://huggingface.co/your-org/DeepSpeak-v1.1">
114
- <img src="https://via.placeholder.com/400?text=DeepSpeak+v1.1" alt="DeepSpeak v1.1" />
115
- <div class="card-title">DeepSpeak v1.1</div>
116
- </a>
117
- <a class="card" href="https://huggingface.co/your-org/DeepSpeak-v2.0">
118
- <img src="https://via.placeholder.com/400?text=DeepSpeak+v2.0" alt="DeepSpeak v2.0" />
119
- <div class="card-title">DeepSpeak v2.0</div>
120
- </a>
121
- </div>
122
- </div>
123
- <div class="category">
124
- <h2>Text to Video</h2>
125
- <div class="grid">
126
- <!-- DeepAction -->
127
- <a class="card" href="https://huggingface.co/your-org/DeepAction">
128
- <img src="https://huggingface.co/spaces/faridlab/README/resolve/main/deepaction-v1.png" alt="DeepAction" />
129
- <div class="card-title">DeepAction</div>
130
- </a>
131
- </div>
132
  </div>
133
- <div class="category">
134
- <h2>Membership Inference</h2>
135
- <div class="grid">
136
- <!-- STROLL -->
137
- <a class="card" href="https://huggingface.co/your-org/STROLL">
138
- <img src="https://via.placeholder.com/400?text=STROLL" alt="STROLL" />
139
- <div class="card-title">STROLL</div>
140
- </a>
141
- </div>
 
 
142
  </div>
 
143
 
 
 
 
 
 
 
 
 
 
 
144
  </div>
 
145
  </body>
146
  </html>
 
6
  sdk: static
7
  pinned: false
8
  ---
 
 
 
 
 
 
 
 
9
  <!DOCTYPE html>
10
  <html lang="en">
11
  <head>
 
13
  <title>Lab Datasets</title>
14
  <style>
15
  body {
16
+ font-family: "Helvetica Neue", Arial, sans-serif;
17
  margin: 20px;
18
  padding: 0;
19
  }
20
 
21
+ h1, h2 {
22
+ margin: 1rem 0;
23
+ text-align: left;
 
 
 
 
 
 
 
24
  }
25
 
26
+ /* Container for each category */
27
  .category {
28
  margin-bottom: 2rem;
29
  }
30
 
31
+ /* Responsive row of squares */
 
 
 
 
32
  .grid {
33
+ display: flex;
34
+ flex-wrap: wrap; /* allow wrapping on smaller screens */
35
+ gap: 1rem; /* space between blocks */
 
36
  }
37
 
38
+ /* Each square card */
39
  .card {
40
+ width: 200px; /* fixed width */
41
+ height: 200px; /* fixed height => perfect square */
42
+ border: 2px solid #000; /* solid black border */
43
+ display: flex; /* center text horizontally & vertically */
44
+ align-items: center;
45
+ justify-content: center;
46
+ text-decoration: none; /* remove underline on links */
47
+ color: #000; /* text color */
48
+ background-size: cover; /* fill entire block */
49
+ background-position: center;/* center the image */
50
+ background-repeat: no-repeat;
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  font-weight: bold;
52
+ text-align: center;
53
+ padding: 1rem;
54
+ box-sizing: border-box; /* so padding doesn’t break the fixed size */
55
  }
56
 
57
+ /* Optional: reduce square size on very narrow screens */
 
 
 
 
 
58
  @media (max-width: 600px) {
59
+ .card {
60
+ width: 150px;
61
+ height: 150px;
 
 
62
  }
63
  }
64
  </style>
65
  </head>
66
  <body>
67
+
68
+ <h1>Lab Datasets</h1>
69
+
70
+ <!-- Deepfakes Category -->
71
+ <div class="category">
72
+ <h2>Deepfakes</h2>
73
+ <div class="grid">
74
+ <!-- Example: DeepSpeak v1.0 -->
75
+ <a class="card" href="https://huggingface.co/your-org/DeepSpeak-v1.0"
76
+ style="background-image: url('https://via.placeholder.com/400?text=DeepSpeak+v1.0');">
77
+ DeepSpeak v1.0
78
+ </a>
79
+
80
+ <!-- DeepSpeak v1.1 -->
81
+ <a class="card" href="https://huggingface.co/your-org/DeepSpeak-v1.1"
82
+ style="background-image: url('https://via.placeholder.com/400?text=DeepSpeak+v1.1');">
83
+ DeepSpeak v1.1
84
+ </a>
85
+
86
+ <!-- DeepSpeak v2.0 -->
87
+ <a class="card" href="https://huggingface.co/your-org/DeepSpeak-v2.0"
88
+ style="background-image: url('https://via.placeholder.com/400?text=DeepSpeak+v2.0');">
89
+ DeepSpeak v2.0
90
+ </a>
 
 
 
 
91
  </div>
92
+ </div>
93
+
94
+ <!-- Text to Video Category -->
95
+ <div class="category">
96
+ <h2>Text to Video</h2>
97
+ <div class="grid">
98
+ <!-- DeepAction -->
99
+ <a class="card" href="https://huggingface.co/your-org/DeepAction"
100
+ style="background-image: url('https://via.placeholder.com/400?text=DeepAction');">
101
+ DeepAction
102
+ </a>
103
  </div>
104
+ </div>
105
 
106
+ <!-- Membership Inference Category -->
107
+ <div class="category">
108
+ <h2>Membership Inference</h2>
109
+ <div class="grid">
110
+ <!-- STROLL -->
111
+ <a class="card" href="https://huggingface.co/your-org/STROLL"
112
+ style="background-image: url('https://via.placeholder.com/400?text=STROLL');">
113
+ STROLL
114
+ </a>
115
+ </div>
116
  </div>
117
+
118
  </body>
119
  </html>