File size: 7,365 Bytes
9626490
 
39963d4
d77412f
 
 
c42a098
 
 
 
 
 
 
 
 
 
 
 
 
 
914a14d
 
c42a098
914a14d
 
c42a098
 
 
 
 
 
 
 
 
 
 
 
 
914a14d
d77412f
 
3208a90
d77412f
 
 
 
c215deb
d77412f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0d02f7b
d77412f
 
 
 
 
 
 
 
 
 
7520956
d77412f
 
 
0d02f7b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d77412f
 
0d02f7b
d77412f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4040b5d
d77412f
 
 
 
0d02f7b
 
 
 
d77412f
0d02f7b
d77412f
 
 
 
 
 
 
 
 
 
 
 
 
 
2ef123a
d77412f
 
 
 
 
 
 
 
 
 
a51f23c
d77412f
 
 
 
 
 
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>

<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:site" content="@huggingface" />
  <meta name="twitter:title" content="Hugging Face - Diffusers Models Gallery" />

  <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://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
  <style>
    body, html {
      height: 100%;
      overflow-y: scroll;
    }
  </style>

  
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>

  <script type="module">
    import Alpine from "https://cdn.skypack.dev/alpinejs";
    import Intersect from "https://cdn.skypack.dev/@alpinejs/intersect";
    Alpine.plugin(Intersect);

    Alpine.data("modelsData", () => ({
      async init() {
        const data = await this.getModels(this.page);
        this.models = data.models.map((model) => ({
          id: model.id,
          likes: model.likes,
          class: model.class,
          //"anime"
          //"3d"
          //"other"
          //"real_life"
          //"manga_like"
          //"aesthetic"
          //"not_aesthetic"
          //"safe"
          //"suggestive"
          //"explicit"
          images: model.images.filter((image) => image && image.endsWith(".jpg")),
        }));
        this.totalPages = data.totalPages;
      },
      ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",
      models: [],
      filter: "all",
      page: 1,
      totalPages: -1,
      isNSFW(model) {
        if ("class" in model) {
          // check if class is empty object
          if (Object.keys(model.class).length === 0) {
            return ""
          }
          if (model.class.explicit > 0.1 || model.class.suggestive > 0.4) {
            return "blur-md"
          }
        }
        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":
            return this.models.filter((model) => model.class.anime > 0.1)
          case "3d":
            return this.models.filter((model) => model.class["3d"] > 0.1)
          case "realistic":
            return this.models.filter((model) => model.class.real_life > 0.1)
        }
        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,
              class: model.class,
              images: model.images.filter((image) => image && image.endsWith(".jpg")),
            }));
            this.models = this.models.concat(models);
          });
        }
      },
    }));
    Alpine.start();
  </script>
</head>

<body class="pb-10 pt-5 bg-gray-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">
    <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}`"
          class="block bg-gray-900 rounded-xl overflow-hidden relative group aspect-square text-white" target="_blank">
          <div
            class="absolute bottom-0 p-4 bg-gradient-to-t text-white pt-10 from-black/90 via-black/70 to-transparent w-full z-10">
            <div class="text-sm flex items-center group-hover:translate-x-0.5 transition">
              <svg class="mr-1.5 text-white/70" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em"
                height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor">
                <path
                  d="M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z">
                </path>
              </svg>
              <span x-text="model.likes"></span>
            </div>
            <div x-text="model.id"
              class="text-base md:text-lg lg:text-xl font-semibold group-hover:translate-x-0.5 transition"></div>
          </div>
          <div class="group-hover:brightness-90 h-full" :class="isNSFW(model)">
            <template x-if="model.images[0]">
              <img :src="()=> ASSETS_URL + model.images[0]" :alt="model.id" alt=""
                class="w-full h-full object-cover group-hover:scale-[1.01] transition" />
            </template>
          </div>
        </a>
      </template>
    </template>
    <div class="h-12" x-intersect="nextPage"></div>
  </section>
</body>

</html>