IoMa/diffusers-gallery

1<!DOCTYPE html>2<html>3  <head>4    <meta charset="utf-8" />5    <meta name="viewport" content="width=device-width" />6 7    <title>Diffusers gallery</title>8    <meta name="description" content="Discover all difussion models on the Hugging Face hub." />9 10    <meta property="og:url" content="https://huggingface-projects-diffusers-gallery.hf.space/" />11    <meta property="og:type" content="website" />12    <meta property="og:title" content="Hugging Face - Diffusers Models Gallery" />13    <meta property="og:description" content="Discover all difussion models on the Hugging Face hub." />14    <meta property="og:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />15 16    <meta name="twitter:card" content="player" />17    <meta property="twitter:url" content="https://huggingface-projects-diffusers-gallery.hf.space/" />18    <meta name="twitter:description" content="Discover all difussion models on the Hugging Face hub." />19 20    <meta name="twitter:site" content="@huggingface" />21    <meta name="twitter:title" content="Hugging Face - Diffusers Models Gallery" />22 23    <meta name="twitter:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />24    <meta name="twitter:player" content="https://huggingface-projects-diffusers-gallery.hf.space/index.html" />25    <meta name="twitter:player:width" content="100%" />26    <meta name="twitter:player:height" content="600" />27 28    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>29    <script src="https://cdn.tailwindcss.com"></script>30 31    <script type="module">32      import Alpine from "https://cdn.skypack.dev/alpinejs";33      import Intersect from "https://cdn.skypack.dev/@alpinejs/intersect";34      Alpine.plugin(Intersect);35 36      Alpine.data("modelsData", () => ({37        async init() {38          const data = await this.getModels(this.page, this.sort, this.filter);39          this.models = data.models;40          this.totalPages = data.totalPages;41        },42        ASSETS_URL: "https://d26smi9133w0oo.cloudfront.net/diffusers-gallery/",43        models: [],44        filter: "all",45        sort: "trending",46        page: 1,47        totalPages: -1,48        buttonClass(attr, filter) {49          if (this[attr] === filter) {50            return "bg-black dark:bg-white shadow-lg text-white dark:text-black hover:bg-black hover:text-white";51          }52          return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800";53        },54        async filterModels(style) {55          this.filter = style;56          this.page = 1;57          const data = await this.getModels(this.page, this.sort, this.filter);58          this.models = data.models;59          this.totalPages = data.totalPages;60        },61        async sortModels(sort) {62          this.sort = sort;63          this.page = 1;64          const data = await this.getModels(this.page, this.sort, this.filter);65          this.models = data.models;66          this.totalPages = data.totalPages;67        },68        async getModels(page, sort, style) {69          // const res = await fetch(`http://localhost:8000/api/models?page=${page}&sort=${sort}&style=${style}`)70          const res = await fetch(71            `https://huggingface-projects-diffusers-gallery-bot.hf.space/api/models?page=${page}&sort=${sort}&style=${style}`72          );73          const data = await res.json();74          const models = data.models.map((model) => ({75            id: model.id,76            likes: model.likes,77            class: model.class,78            isNFSW: model.isNFSW,79            images: model.images.filter((image) => image && image.endsWith(".jpg")),80          }));81 82          return {83            models,84            totalPages: data.totalPages,85          };86        },87        async nextPage() {88          if (this.page < this.totalPages) {89            this.page += 1;90            const data = await this.getModels(this.page, this.sort, this.filter);91            this.models = this.models.concat(data.models);92            this.totalPages = data.totalPages;93          }94        },95      }));96      Alpine.start();97    </script>98  </head>99 100  <body class="pb-10 pt-5 bg-gray-100 dark:bg-gray-900 relative">101    <section102      class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto relative"103      x-data="modelsData"104    >105      <div class="col-span-2 lg:col-span-1 flex flex-col gap-2 row-start">106        <h1 class="text-lg font-semibold dark:text-white whitespace-nowrap">Diffusers Models Gallery</h1>107      </div>108 109      <div class="col-span-2 md:col-span-3 flex items-center gap-4 flex flex-wrap lg-auto lg:ml-auto text-sm">110        <div class="flex gap-2">111          <span class="md:px-3 py-1 dark:text-white text-gray-400">sort by</span>112          <button113            :class="buttonClass('sort', 'trending')"114            class="px-2 md:px-3 py-1 rounded-full text"115            @click="sortModels('trending')"116          >117            Trending118          </button>119          <button120            :class="buttonClass('sort', 'recent')"121            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"122            @click="sortModels('recent')"123          >124            Recent125          </button>126          <button127            :class="buttonClass('sort', 'likes')"128            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"129            @click="sortModels('likes')"130          >131            Most Likes132          </button>133        </div>134        <div class="flex gap-2">135          <span class="md:px-3 py-1 dark:text-white text-gray-400"> style</span>136          <button137            :class="buttonClass('filter', 'all')"138            class="px-2 md:px-3 py-1 rounded-full"139            @click="filterModels('all')"140          >141            All142          </button>143          <button144            :class="buttonClass('filter', 'anime')"145            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"146            @click="filterModels('anime')"147          >148            Anime149          </button>150          <button151            :class="buttonClass('filter', '3d')"152            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"153            @click="filterModels('3d')"154          >155            3D156          </button>157          <button158            :class="buttonClass('filter', 'realistic')"159            class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"160            @click="filterModels('realistic')"161          >162            Realistic163          </button>164        </div>165      </div>166 167      <template x-for="model in models" :key="model.id">168        <template x-if="model.images.length > 0">169          <a170            :href="`https://huggingface.co/${model.id}`"171            class="block bg-gray-900 rounded-xl overflow-hidden relative group aspect-square text-white"172            target="_blank"173          >174            <div175              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"176            >177              <div class="text-sm flex items-center group-hover:translate-x-0.5 transition">178                <svg179                  class="mr-1.5 text-white/70"180                  xmlns="http://www.w3.org/2000/svg"181                  xmlns:xlink="http://www.w3.org/1999/xlink"182                  aria-hidden="true"183                  focusable="false"184                  role="img"185                  width="1em"186                  height="1em"187                  preserveAspectRatio="xMidYMid meet"188                  viewBox="0 0 32 32"189                  fill="currentColor"190                >191                  <path192                    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"193                  ></path>194                </svg>195                <span x-text="model.likes"></span>196              </div>197              <div198                x-text="model.id"199                class="text-sm md:text-lg lg:text-xl font-semibold group-hover:translate-x-0.5 transition"200              ></div>201            </div>202            <div class="group-hover:brightness-90 h-full" :class="model.isNFSW ? 'blur-md' : ''">203              <template x-if="model.images[0]">204                <img205                  :src="()=> ASSETS_URL + model.images[0]"206                  :alt="model.id"207                  alt=""208                  class="w-full h-full object-cover group-hover:scale-[1.01] transition"209                />210              </template>211            </div>212          </a>213        </template>214      </template>215      <div class="h-12 relative" x-intersect="nextPage" data-iframe-height></div>216    </section>217  </body>218</html>219