radames commited on
Commit
0d02f7b
1 Parent(s): d77412f

add filters to page

Browse files
Files changed (1) hide show
  1. index.html +27 -6
index.html CHANGED
@@ -36,6 +36,7 @@
36
  },
37
  ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
38
  models: [],
 
39
  page: 1,
40
  totalPages: -1,
41
  isNSFW(model) {
@@ -50,9 +51,29 @@
50
  }
51
  return ""
52
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  getModels(page) {
54
  // return fetch(`http://localhost:8000/api/models?page=${page}`).then(
55
- return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`).then(
56
  (res) => res.json()
57
  );
58
  },
@@ -79,12 +100,12 @@
79
  <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto" x-data="modelsData">
80
  <div class="col-span-2 md:col-span-3 lg:col-span-4 flex items-center gap-2">
81
  <h1 class="mr-auto text-lg font-semibold">Diffusers Models Gallery</h1>
82
- <button class="bg-black shadow-lg px-4 py-1 rounded-full text-white">All</button>
83
- <!-- <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">Anime</button>
84
- <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">3D</button>
85
- <button class="text-gray-600 px-4 py-1 rounded-full hover:bg-gray-200 hover:text-gray-800">Realistic</button> -->
86
  </div>
87
- <template x-for="model in models" :key="model.id">
88
  <template x-if="model.images.length > 0">
89
  <a :href="`https://huggingface.co/${model.id}`"
90
  class="block bg-gray-900 rounded-xl overflow-hidden relative group aspect-square text-white" target="_blank">
 
36
  },
37
  ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
38
  models: [],
39
+ filter: "all",
40
  page: 1,
41
  totalPages: -1,
42
  isNSFW(model) {
 
51
  }
52
  return ""
53
  },
54
+ buttonClass(filter) {
55
+ if (this.filter === filter) {
56
+ return "bg-black shadow-lg text-white"
57
+ }
58
+ return "text-gray-600 hover:bg-gray-200 hover:text-gray-800"
59
+ },
60
+ filterModels() {
61
+ console.log(this.models)
62
+ switch(this.filter) {
63
+ case "all":
64
+ return this.models
65
+ case "anime":
66
+ return this.models.filter((model) => model.class.anime > 0.1)
67
+ case "3d":
68
+ return this.models.filter((model) => model.class["3d"] > 0.1)
69
+ case "realistic":
70
+ return this.models.filter((model) => model.class.real_life > 0.1)
71
+ }
72
+ return []
73
+ },
74
  getModels(page) {
75
  // return fetch(`http://localhost:8000/api/models?page=${page}`).then(
76
+ return fetch(`https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}`).then(
77
  (res) => res.json()
78
  );
79
  },
 
100
  <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto" x-data="modelsData">
101
  <div class="col-span-2 md:col-span-3 lg:col-span-4 flex items-center gap-2">
102
  <h1 class="mr-auto text-lg font-semibold">Diffusers Models Gallery</h1>
103
+ <button :class="buttonClass('all')" class="px-4 py-1 rounded-full" @click="filter='all'">All</button>
104
+ <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>
105
+ <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>
106
+ <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>
107
  </div>
108
+ <template x-for="model in filterModels" :key="model.id">
109
  <template x-if="model.images.length > 0">
110
  <a :href="`https://huggingface.co/${model.id}`"
111
  class="block bg-gray-900 rounded-xl overflow-hidden relative group aspect-square text-white" target="_blank">