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