Spaces:
Running
Running
| <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@3.13.9"; | |
| 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" loading="lazy"></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> |