Spaces:

huggingface-projects
/

diffusers-gallery

Running

App Files Files Community

radames commited on Feb 23, 2023

Commit

6104d04

•

1 Parent(s): b638c1c

filter options

Browse files

Files changed (1) hide show

index.html +68 -23

index.html CHANGED Viewed

@@ -4,16 +4,16 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Diffusers gallery</title>
   <meta name="description" content="Discover all difussion models on the Hugging Face hub.">
   <meta property="og:url" content="https://huggingface-projects-diffusers-gallery.hf.space/">
   <meta property="og:type" content="website">
   <meta property="og:title" content="Hugging Face - Diffusers Models Gallery">
   <meta property="og:description" content="Discover all difussion models on the Hugging Face hub.">
   <meta property="og:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg">
   <meta name="twitter:card" content="player">
   <meta property="twitter:url" content="https://huggingface-projects-diffusers-gallery.hf.space/">
   <meta name="twitter:description" content="Discover all difussion models on the Hugging Face hub.">
@@ -23,18 +23,19 @@
   <meta name="twitter:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
   <meta name="twitter:player" content="https://huggingface-projects-diffusers-gallery.hf.space/index.html" />
-  <meta name="twitter:player:width" content="100%"/>
-  <meta name="twitter:player:height" content="600"/>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    body, html {
       height: 100%;
     }
   </style>
   <script src="https://cdn.tailwindcss.com"></script>
   <script type="module">
@@ -44,7 +45,7 @@
     Alpine.data("modelsData", () => ({
       async init() {
-        const data = await this.getModels(this.page);
         this.models = data.models.map((model) => ({
           id: model.id,
           likes: model.likes,
@@ -66,6 +67,7 @@
       ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
       models: [],
       filter: "all",
       page: 1,
       totalPages: -1,
       isNSFW(model) {
@@ -80,15 +82,14 @@
         }
         return ""
       },
-      buttonClass(filter) {
-        if (this.filter === filter) {
           return "bg-black shadow-lg text-white"
         }
         return "text-gray-600 hover:bg-gray-200 hover:text-gray-800"
       },
       filterModels() {
-        console.log(this.models)
-        switch(this.filter) {
           case "all":
             return this.models
           case "anime":
@@ -100,16 +101,30 @@
         }
         return []
       },
-      getModels(page) {
-        // return fetch(`http://localhost:8000/api/models?page=${page}`).then(
-        return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`).then(
           (res) => res.json()
         );
       },
       nextPage() {
         if (this.page < this.totalPages) {
           this.page += 1;
-          this.getModels(this.page).then((data) => {
             const models = data.models.map((model) => ({
               id: model.id,
               likes: model.likes,
@@ -126,14 +141,44 @@
 </head>
 <body class="pb-10 pt-5 bg-gray-100 relative">
-  <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto relative" x-data="modelsData">
-    <div class="col-span-2 md:col-span-3 lg:col-span-4 flex items-center gap-2">
       <h1 class="mr-auto text-lg font-semibold">Diffusers Models Gallery</h1>
-      <button :class="buttonClass('all')" class="px-4 py-1 rounded-full" @click="filter='all'">All</button>
-      <button :class="buttonClass('anime')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='anime'">Anime</button>
-      <button :class="buttonClass('3d')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='3d'">3D</button>
-      <button :class="buttonClass('realistic')" class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-4 py-1 rounded-full" @click="filter='realistic'">Realistic</button>
     </div>
     <template x-for="model in filterModels" :key="model.id">
       <template x-if="model.images.length > 0">
         <a :href="`https://huggingface.co/${model.id}`"

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Diffusers gallery</title>
   <meta name="description" content="Discover all difussion models on the Hugging Face hub.">
   <meta property="og:url" content="https://huggingface-projects-diffusers-gallery.hf.space/">
   <meta property="og:type" content="website">
   <meta property="og:title" content="Hugging Face - Diffusers Models Gallery">
   <meta property="og:description" content="Discover all difussion models on the Hugging Face hub.">
   <meta property="og:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg">
   <meta name="twitter:card" content="player">
   <meta property="twitter:url" content="https://huggingface-projects-diffusers-gallery.hf.space/">
   <meta name="twitter:description" content="Discover all difussion models on the Hugging Face hub.">
   <meta name="twitter:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
   <meta name="twitter:player" content="https://huggingface-projects-diffusers-gallery.hf.space/index.html" />
+  <meta name="twitter:player:width" content="100%" />
+  <meta name="twitter:player:height" content="600" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
+    body,
+    html {
       height: 100%;
     }
   </style>
   <script src="https://cdn.tailwindcss.com"></script>
   <script type="module">
     Alpine.data("modelsData", () => ({
       async init() {
+        const data = await this.getModels(this.page, this.sort);
         this.models = data.models.map((model) => ({
           id: model.id,
           likes: model.likes,
       ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
       models: [],
       filter: "all",
+      sort: "trending",
       page: 1,
       totalPages: -1,
       isNSFW(model) {
         }
         return ""
       },
+      buttonClass(attr, filter) {
+        if (this[attr] === filter) {
           return "bg-black shadow-lg text-white"
         }
         return "text-gray-600 hover:bg-gray-200 hover:text-gray-800"
       },
       filterModels() {
+        switch (this.filter) {
           case "all":
             return this.models
           case "anime":
         }
         return []
       },
+      sortModels(sort) {
+        this.sort = sort
+        this.page = 1
+        this.getModels(this.page, this.sort).then((data) => {
+          const models = data.models.map((model) => ({
+            id: model.id,
+            likes: model.likes,
+            class: model.class,
+            images: model.images.filter((image) => image && image.endsWith(".jpg")),
+          }));
+          this.models = models;
+        });
+      },
+      getModels(page, sort) {
+        // return fetch(`http://localhost:8000/api/models?page=${page}&sort=${sort}`).then(
+          return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`).then(
           (res) => res.json()
         );
       },
       nextPage() {
         if (this.page < this.totalPages) {
           this.page += 1;
+          this.getModels(this.page, this.sort).then((data) => {
             const models = data.models.map((model) => ({
               id: model.id,
               likes: model.likes,
 </head>
 <body class="pb-10 pt-5 bg-gray-100 relative">
+  <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto relative"
+    x-data="modelsData">
+    <div class="col-span-2 md:col-span-1 flex items-center gap-2 row-start-1">
       <h1 class="mr-auto text-lg font-semibold">Diffusers Models Gallery</h1>
     </div>
+    <div class="col-span-2 md:col-span-3 flex items-center gap-2 flex flex-wrap lg-auto">
+      <div class="flex text-xs gap-2">
+        <span class="px-3 py-1 font-thin">sort by</span>
+        <button :class="buttonClass('sort', 'trending')" class="px-2 md:px-3 py-1 rounded-full text"
+          @click="sortModels('trending')">Trending</button>
+        <button :class="buttonClass('sort', 'recent')"
+          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+          @click="sortModels('recent')">Recent</button>
+        <button :class="buttonClass('sort', 'likes')"
+          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+          @click="sortModels('likes')">Most
+          Likes</button>
+      </div>
+      <div class="flex text-xs gap-2">
+        <span class="px-2 md:px-3 py-1 font-thin"> style</span>
+        <button :class="buttonClass('filter', 'all')" class="px-2 md:px-3 py-1 rounded-full"
+          @click="filter='all'">All</button>
+        <button :class="buttonClass('filter', 'anime')"
+          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+          @click="filter='anime'">Anime</button>
+        <button :class="buttonClass('filter', '3d')"
+          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+          @click="filter='3d'">3D</button>
+        <button :class="buttonClass('filter', 'realistic')"
+          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+          @click="filter='realistic'">Realistic</button>
+        <button :class="buttonClass('filter', 'realistic')"
+          class="text-gray-600 hover:bg-gray-200 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
+          @click="filter='realistic'">18+</button>
+      </div>
+    </div>
     <template x-for="model in filterModels" :key="model.id">
       <template x-if="model.images.length > 0">
         <a :href="`https://huggingface.co/${model.id}`"