theme-gallery

Running

App Files Files Community

jingwora

freddyaboulton HF staff commited on Jul 16, 2023

Commit

16abb78

0 Parent(s):

Duplicate from gradio/theme-gallery

Browse files

Co-authored-by: Freddy Boulton <[email protected]>

Files changed (4) hide show

.gitattributes +34 -0
README.md +12 -0
index.html +194 -0
style.css +28 -0

.gitattributes ADDED Viewed

	@@ -0,0 +1,34 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md ADDED Viewed

	@@ -0,0 +1,12 @@

+---
+title: Theme Gallery
+emoji: 🌍
+colorFrom: indigo
+colorTo: indigo
+sdk: static
+pinned: false
+license: mit
+duplicated_from: gradio/theme-gallery
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,194 @@

+<!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: none;
+			width: 100%;
+			height: 600px;
+			pointer-events: none;
+		}
+		.grid-container {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+			grid-gap: 10px;
+      margin-top: 3.5rem;
+		}
+		.grid-item {
+			position: relative;
+      overflow-y: hidden;
+      border-radius: 10px;
+      border: 1px solid rgb(55 65 81);
+		}
+    .grid-item:hover {
+      filter: brightness(75%);
+    }
+		.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.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        themes: [],
+        filter: "all",
+        sort: "likes",
+        page: 1,
+        totalPages: -1,
+        mode: "light",
+        useTestData: false,
+        buttonClass(attr, filter) {
+          if (this[attr] === filter) {
+            return "text-orange-600 bg-gradient-to-br from-orange-300 to-orange-100 px-2 md:px-3 py-1 rounded-full";
+          }
+          return "text-gray-800 hover:to-orange-300/100 hover:text-orange-600 dark:hover:bg-white";
+        },
+        async switchData() {
+          this.page = 1;
+          this.useTestData = !this.useTestData;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        async switchTheme() {
+          this.mode = this.mode === "light" ? "dark": "light";
+          console.log(this.mode);
+        },
+        async sortThemes(sort) {
+          this.sort = sort;
+          this.page = 1;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        async getThemes(page, sort, useTestData) {
+          const filename = useTestData ? "test_data.json" : "subdomains.json"
+          const res = await fetch(
+            `https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/${filename}`
+          );
+          const data = await res.json();
+          if(sort === 'likes') {
+            data.sort((a, b) => (b.likes - a.likes));
+          }else {
+            data.sort((a, b) => (new Date(b.lastModified) - new Date(a.lastModified)));
+          }
+          const pageThemes = data.slice((page - 1) * 15, page * 15);
+          console.log(pageThemes);
+          return {
+            themes: pageThemes,
+            totalPages: Math.floor(data.length + 15  - 1, 15)
+          };
+        },
+        async nextPage() {
+          if (this.page < this.totalPages) {
+            this.page += 1;
+            const data = await this.getThemes(this.page, this.sort, this.useTestData);
+            this.themes = this.themes.concat(data.themes);
+            this.totalPages = data.totalPages;
+          }
+        },
+      }));
+      Alpine.start();
+    </script>
+  </head>
+  <body class="pb-10 pt-5 bg-white 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 text-gray-800 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 text-gray-800">sort by</span>
+            <button
+            :class="buttonClass('sort', 'likes')"
+            @click="sortThemes('likes')"
+            >
+              Most Likes
+            </button>
+            <button
+              :class="buttonClass('sort', 'recent')"
+              @click="sortThemes('recent')"
+            >
+              Recent
+            </button>
+          </div>
+          <div class="flex gap-0">
+            <!-- <input type="checkbox" @click="switchData()" class="rounded accent-orange-300">
+            <span class="md:px-3 py-1 text-gray-800 ml-0">Use Test Data</span> -->
+            <input type="checkbox" @click="switchTheme()" class="rounded accent-orange-300">
+            <span class="md:px-3 py-1 text-gray-800 ml-0">Show Dark Mode</span>
+            <!-- <button
+              :class="buttonClass('useTestData', false)"
+              class="px-2 md:px-3 py-1 rounded-full"
+              @click="switchData()"
+            >
+              Use Test Data
+            </button> -->
+          </div>
+        </div>
+      </section>
+      <div class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 mx-auto my-8  relative">
+      <template x-for="theme in themes" :key="theme.id">
+        <div class="grid-item">
+          <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}&__theme=${mode}`" :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>

style.css ADDED Viewed

	@@ -0,0 +1,28 @@

+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+.card p:last-child {
+	margin-bottom: 0;
+}