Spaces:

gradio
/

theme-gallery

Running

App Files Files Community

freddyaboulton HF staff commited on Mar 14, 2023

Commit

59e613b

•

1 Parent(s): ac9f40e

Update index.html

Browse files

Files changed (1) hide show

index.html +165 -17

index.html CHANGED Viewed

@@ -1,19 +1,167 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Gradio theme gallery</title>
+    <meta name="description" content="Discover all gradio themes created by the community." />
+    <meta property="og:url" content="https://freddyaboulton-gradio-themes-gallery.hf.space/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Gradio - Theme Gallery" />
+    <meta property="og:description" content="Discover all gradio themes created by the community." />
+    <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://freddyaboulton-gradio-themes-gallery.hf.space/" />
+    <meta name="twitter:description" content="Discover all gradio themes created by the community." />
+    <meta name="twitter:site" content="@huggingface" />
+    <meta name="twitter:title" content="Gradio - Theme Gallery" />
+    <meta name="twitter:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
+    <meta name="twitter:player" content="https://freddyaboulton-gradio-themes-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>
+		iframe {
+			display: block;
+			border: 1px solid transparent;
+			width: 100%;
+			height: 500px;
+			pointer-events: none;
+		}
+		.grid-container {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+			grid-gap: 10px;
+      margin-top: 3.5rem;
+      margin-left: 3.5rem;
+      margin-right: 3.5rem;
+		}
+		.grid-item {
+			position: relative;
+      overflow-y: hidden;
+      border-radius: 10px;
+		}
+		.grid-item a {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			display: block;
+			z-index: 1;
+		}
+    </style>
+    <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("themesData", () => ({
+        async init() {
+          const data = await this.getThemes(this.page, this.sort, this.filter);
+          this.themes = data.pageThemes;
+          console.log(this.themes);
+          this.totalPages = data.totalPages;
+          console.log(this.totalPages);
+        },
+        themes: [],
+        filter: "all",
+        sort: "likes",
+        page: 1,
+        totalPages: -1,
+        buttonClass(attr, filter) {
+          if (this[attr] === filter) {
+            return "bg-black dark:bg-white shadow-lg text-white dark:text-black hover:bg-black hover:text-white";
+          }
+          return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800";
+        },
+        async sortModels(sort) {
+        //   this.sort = sort;
+        //   this.page = 1;
+        //   const data = await this.getModels(this.page, this.sort, this.filter);
+        //   this.models = data.models;
+        //   this.totalPages = data.totalPages;
+        },
+        async getThemes(page, sort, style) {
+          const res = await fetch(
+            'https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/subdomains.json'
+          );
+          const data = await res.json();
+          const themes = Object.entries(data).map(([key, value]) => ({
+            id: key,
+            subdomain: value,
+          }))
+          const pageThemes = themes.slice((page - 1) * 30, page * 30);
+          return {
+            pageThemes,
+            totalPages: Math.floor(themes.length + 30  - 1, 30)
+          };
+        },
+        async nextPage() {
+          if (this.page < this.totalPages) {
+            this.page += 1;
+            const data = await this.getThemes(this.page, this.sort, this.filter);
+            this.themes = this.themes.concat(data.pageThemes);
+            // this.totalPages = data.totalPages;
+          }
+        },
+      }));
+      Alpine.start();
+    </script>
+  </head>
+  <body class="pb-10 pt-5 bg-gray-100 dark:bg-gray-900 relative">
+    <section
+      x-data="themesData"
+    >
+      <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
+        <div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
+          <h1 class="text-lg font-semibold dark:text-white whitespace-nowrap">Gradio Themes Gallery</h1>
+        </div>
+        <div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
+          <div class="flex gap-2">
+            <span class="md:px-3 py-1 dark:text-white text-gray-400">sort by</span>
+            <button
+            :class="buttonClass('sort', 'likes')"
+            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"
+            @click="sortModels('likes')"
+            >
+              Most Likes
+            </button>
+            <button
+              :class="buttonClass('sort', 'recent')"
+              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"
+              @click="sortModels('recent')"
+            >
+              Recent
+            </button>
+          </div>
+        </div>
+      </section>
+      <div class="grid-container">
+      <template x-for="theme in themes" :key="theme.id">
+        <div class="grid-item">
+          <iframe :src="theme.subdomain" :alt="theme.id" scrolling="no" frameborder="0"></iframe>
+          <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
+        </div>
+      </template>
+      </div>
+      <div class="h-12 relative" x-intersect="nextPage" data-iframe-height></div>
+    </section>
+  </body>
+</html>