update
Browse files- index.html +40 -16
index.html
CHANGED
|
@@ -8,23 +8,47 @@
|
|
| 8 |
<script defer="" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
|
| 9 |
|
| 10 |
<script>
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 14 |
const imageRegex = /(https?:\/\/.*\.(?:png|jpg))(\?.*)?/i;
|
| 15 |
const match = text.match(imageRegex);
|
| 16 |
return match ? match[1] : null;
|
| 17 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
</script>
|
| 19 |
</head>
|
| 20 |
-
|
|
|
|
| 21 |
<section
|
| 22 |
-
class="container grid grid-cols-3
|
| 23 |
-
x-data="{models: [],
|
| 24 |
-
x-init="
|
|
|
|
|
|
|
|
|
|
|
|
|
| 25 |
>
|
| 26 |
-
<template x-for="model in models.
|
| 27 |
<a
|
|
|
|
|
|
|
| 28 |
:href="`https://huggingface.co/${model.id}`"
|
| 29 |
class="block bg-gray-100 rounded-xl overflow-hidden relative group aspect-square"
|
| 30 |
target="_blank"
|
|
@@ -34,7 +58,7 @@
|
|
| 34 |
>
|
| 35 |
<div class="text-sm flex items-center group-hover:translate-x-0.5 transition">
|
| 36 |
<svg
|
| 37 |
-
class="mr-1 text-
|
| 38 |
xmlns="http://www.w3.org/2000/svg"
|
| 39 |
xmlns:xlink="http://www.w3.org/1999/xlink"
|
| 40 |
aria-hidden="true"
|
|
@@ -52,17 +76,17 @@
|
|
| 52 |
</svg>
|
| 53 |
<span x-text="model.likes"></span>
|
| 54 |
</div>
|
| 55 |
-
<div
|
|
|
|
|
|
|
|
|
|
| 56 |
</div>
|
| 57 |
-
<div
|
| 58 |
-
class="group-hover:
|
| 59 |
-
x-data="{img: ''}"
|
| 60 |
-
x-init="img = await fetchFirstImage(`https://huggingface.co/${model.id}/raw/main/README.md`)"
|
| 61 |
-
>
|
| 62 |
-
<img :src="img" alt="" class="w-full h-full object-cover" />
|
| 63 |
</div>
|
| 64 |
</a>
|
| 65 |
</template>
|
|
|
|
| 66 |
</section>
|
| 67 |
</body>
|
| 68 |
</html>
|
|
|
|
| 8 |
<script defer="" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
|
| 9 |
|
| 10 |
<script>
|
| 11 |
+
function getModels(page) {
|
| 12 |
+
return fetch(`https://huggingface.co/models-json?pipeline_tag=text-to-image&p=${page}&sort=likes`).then(
|
| 13 |
+
(data) => data.json().then((res) => res.models)
|
| 14 |
+
);
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
function getModelCard(modelId) {
|
| 18 |
+
return fetch(`https://huggingface.co/${modelId}/raw/main/README.md`).then((data) => data.text());
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
function findImage(text) {
|
| 22 |
const imageRegex = /(https?:\/\/.*\.(?:png|jpg))(\?.*)?/i;
|
| 23 |
const match = text.match(imageRegex);
|
| 24 |
return match ? match[1] : null;
|
| 25 |
}
|
| 26 |
+
|
| 27 |
+
function onIntersection(targetEl, callback) {
|
| 28 |
+
const observer = new IntersectionObserver(([entry]) => {
|
| 29 |
+
if (entry.isIntersecting) {
|
| 30 |
+
callback();
|
| 31 |
+
}
|
| 32 |
+
});
|
| 33 |
+
observer.observe(targetEl);
|
| 34 |
+
}
|
| 35 |
</script>
|
| 36 |
</head>
|
| 37 |
+
|
| 38 |
+
<body class="py-10 bg-gray-100">
|
| 39 |
<section
|
| 40 |
+
class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto"
|
| 41 |
+
x-data="{models: [], page: 0}"
|
| 42 |
+
x-init="models = await getModels();
|
| 43 |
+
onIntersection($refs.scrollSentinel, async () => {
|
| 44 |
+
models = [...models, ...await getModels(page+1)]
|
| 45 |
+
page++;
|
| 46 |
+
})"
|
| 47 |
>
|
| 48 |
+
<template x-for="model in models" :key="model.id">
|
| 49 |
<a
|
| 50 |
+
x-data="{img: null}"
|
| 51 |
+
x-init="img = await getModelCard(model.id).then(findImage)"
|
| 52 |
:href="`https://huggingface.co/${model.id}`"
|
| 53 |
class="block bg-gray-100 rounded-xl overflow-hidden relative group aspect-square"
|
| 54 |
target="_blank"
|
|
|
|
| 58 |
>
|
| 59 |
<div class="text-sm flex items-center group-hover:translate-x-0.5 transition">
|
| 60 |
<svg
|
| 61 |
+
class="mr-1.5 text-white/70"
|
| 62 |
xmlns="http://www.w3.org/2000/svg"
|
| 63 |
xmlns:xlink="http://www.w3.org/1999/xlink"
|
| 64 |
aria-hidden="true"
|
|
|
|
| 76 |
</svg>
|
| 77 |
<span x-text="model.likes"></span>
|
| 78 |
</div>
|
| 79 |
+
<div
|
| 80 |
+
x-text="model.id"
|
| 81 |
+
class="text-base md:text-lg lg:text-xl font-semibold group-hover:translate-x-0.5 transition"
|
| 82 |
+
></div>
|
| 83 |
</div>
|
| 84 |
+
<div class="group-hover:brightness-90 h-full">
|
| 85 |
+
<img :src="img" alt="" class="w-full h-full object-cover group-hover:scale-[1.01] transition" />
|
|
|
|
|
|
|
|
|
|
|
|
|
| 86 |
</div>
|
| 87 |
</a>
|
| 88 |
</template>
|
| 89 |
+
<div class="h-12" x-ref="scrollSentinel"></div>
|
| 90 |
</section>
|
| 91 |
</body>
|
| 92 |
</html>
|