SmolAgentToolBox

Running

App Files Files Community

acecalisto3 commited on Feb 17

Commit

46e1045

verified ·

1 Parent(s): 91df01e

Update index.html

Browse files

Files changed (1) hide show

index.html +254 -358

index.html CHANGED Viewed

@@ -1,374 +1,270 @@
-               <!DOCTYPE html>
 <html>
-<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Smolagents and tools gallery</title>
     <meta name="description" content="Discover all smolagents and tools created by the community." />
     <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>
-        body {
-            font-family: sans-serif;
-            padding: 20px;
-            background-color: #f4f4f4;
-        }
-        #playground-container {
-            max-width: 800px;
-            margin: 0 auto;
-            background-color: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        #input-container, #output-container, #tool-select {
-            margin-bottom: 20px;
-        }
-        textarea {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            resize: vertical;
-        }
-        button {
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #0056b3;
-        }
-        #output-container {
-            border: 1px solid #ddd;
-            padding: 15px;
-            min-height: 150px;
-            white-space: pre-wrap;
-            background-color: #f9f9f9;
-            border-radius: 4px;
-        }
-        #loading-indicator {
-            display: none;
-            text-align: center;
-            margin-top: 10px;
-        }
-        #error-message {
-            color: red;
-            margin-top: 10px;
-        }
-        select {
-            padding: 8px;
-            border-radius: 4px;
-            border: 1px solid #ccc;
-        }
-        iframe {
-            display: block;
-            border: none;
-            width: 100%;
-            height: 600px;
-            pointer-events: none;
-            margin-top: 48px; /* Match header height */
-        }
-      .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;
-        }
-      .grid-item-header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 48px;
-            background: rgba(0,0,0,0.75);
-            padding: 8px 16px;
-            z-index: 10;
-            display: flex;
-            align-items: center;
-            width: 100%;
-        }
-      .grid-item-header h2 {
-            width: 100%;
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-            hyphens: auto;
-            max-height: 32px;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            line-height: 1.2;
-        }
     </style>
     <script type="module">
-        import Alpine from "https://cdn.skypack.dev/[email protected]";
-        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: "tool",
-            sort: "likes",
-            page: 1,
-            totalPages: -1,
-            useTestData: false,
-            searchQuery: "",
-            searchType: "keyword",
-            hfToken: "",
-            userSpaces:,
-            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 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 filterType(filter) {
-                this.filter = filter;
-                this.page = 1;
-                if (this.searchQuery) {
-                    await this.searchThemes();
-                } else {
-                    const data = await this.getThemes(this.page, this.sort, this.useTestData);
-                    this.themes = data.themes;
-                    this.totalPages = data.totalPages;
-                }
-            },
-            async searchThemes() {
-                this.page = 1;
-                const data = await this.getThemes(this.page, this.sort, this.useTestData);
-                this.themes = data.themes;
-                this.totalPages = data.totalPages;
-            },
-            async switchSearchType(type) {
-                this.searchType = type;
-                if (this.searchQuery) {
-                    await this.searchThemes();
-                }
-            },
-            async getUserSpaces() {
-                if (!this.hfToken) return;
-                const res = await fetch(`https://huggingface.co/api/spaces?token=${this.hfToken}`);
-                const data = await res.json();
-                this.userSpaces = data;
-            },
-            async getThemes(page, sort, useTestData) {
-                let data;
-                if (useTestData) {
-                    const res = await fetch(
-                        `https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/test_data.json`
-                    );
-                    data = await res.json();
-                } else {
-                    const searchFilters = this.filter === 'tool'? 'tool': 'smolagents';
-                    let searchUrl;
-                    if (this.searchQuery) {
-                        if (this.searchType === 'semantic') {
-                            searchUrl = `https://huggingface.co/api/spaces/semantic-search?limit=100&filter=<span class="math-inline">\{searchFilters\}&q\=</span>{encodeURIComponent(this.searchQuery)}&expand=subdomain&expand=lastModified&expand=likes&expand=runtime`;
-                        } else {
-                            searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=<span class="math-inline">\{searchFilters\}&search\=</span>{encodeURIComponent(this.searchQuery)}&expand=subdomain&expand=lastModified&expand=likes&expand=runtime`;
-                        }
-                    } else {
-                        searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${encodeURIComponent(searchFilters)}&expand=subdomain&expand=lastModified&expand=likes&expand=runtime`;
-                    }
-                    const res = await fetch(searchUrl);
-                    data = await res.json();
-                    data = data.filter(item => item.runtime?.stage === "RUNNING").map(item => ({
-                        id: item.id,
-                        subdomain: `https://${item.subdomain}.hf.space`,
-                        likes: item.likes,
-                        lastModified: item.lastModified
-                    }));
-                }
-                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);
-                return {
-                    themes: pageThemes,
-                    totalPages: Math.ceil(data.length / 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;
-                }
-            },
-            publishSelected() {
-                const selectedSpaces = this.userSpaces.filter(space => space.selected);
-            },
-        }));
-        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">
-                <div class="flex items-center gap-2">
-                    <img src="https://camo.githubusercontent.com/a8c1f1d12aa3114010c6e74b29d47fee91d8da10a915f065c38e6d0ea7f16568/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f736d6f6c6167656e74732f6d6173636f742e706e67" alt="Smolagents mascot" class="w-14 h-14 flex-shrink-0">
-                    <h1 class="text-xl font-semibold text-gray-800 break-words">smolagents and tools gallery</h1>
-                </div>
-                <div class="flex items-center gap-2">
-                    <input
-                        type="text"
-                        x-model="hfToken"
-                        placeholder="Enter your Hugging Face Token"
-                        class="px-3 py-1 border rounded-lg"
-                    >
-                    <button @click="getUserSpaces()" class="px-3 py-1 bg-blue-500 text-white rounded-lg">Import Spaces</button>
-                </div>
-            </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 flex-col gap-2">
-                    <div class="flex items-center">
-                        <input
-                            type="text"
-                            x-model="searchQuery"
-                            @input="searchThemes()"
-                            placeholder="Search..."
-                            class="px-3 py-1 border rounded-lg"
-                        >
-                    </div>
-                </div>
-                <div class="flex gap-2">
-                    <span class="md:px-3 py-1 text-gray-800">type</span>
-                    <button:class="buttonClass('filter', 'tool')" @click="filterType('tool')">Tools</button>
-                    <button:class="buttonClass('filter', 'agent')" @click="filterType('agent')">Agents</button>
-                </div>
-                <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>
-        </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">
-                    <div class="grid-item-header">
-                        <h2 class="text-sm font-medium text-white" x-text="theme.id"></h2>
-                    </div>
-                    <iframe:src="`<span class="math-inline">\{theme\.subdomain\}?\_\=</span>{new Date().getTime()}`":alt="theme.id" scrolling="no" frameborder="0" loading="lazy"></iframe>
-                    <a:href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
-                </div>
-            </template>
-            <div class="grid-item">
-                <div class="grid-item-header">
-                    <h2 class="text-sm font-medium text-white">smolagents Playground</h2>
-                </div>
-                <div id="playground-container">
-                    <div id="tool-select">
-                        <label for="tools">Select Tools:</label><br>
-                        <select id="tools" multiple>
-                            <option value="DuckDuckGoSearchTool">DuckDuckGoSearchTool</option>
-                        </select>
-                    </div>
-                    <div id="input-container">
-                        <label for="user-input">Enter your query:</label><br>
-                        <textarea id="user-input" rows="5"></textarea><br>
-                        <button id="run-button">Run Agent</button>
-                        <div id="loading-indicator">Running...</div>
-                        <div id="error-message"></div>
-                    </div>
-                    <div id="output-container">
-                        <p>Agent output:</p>
-                        <div id="output"></div>
-                    </div>
-                </div>
-                <a href="https://huggingface.co/spaces/your-username/your-space-name" target="_blank"></a>
             </div>
         </div>
-        <div class="h-12 relative" x-intersect="nextPage" data-iframe-height></div>
-        <button @click="publishSelected()" class="px-4 py-2 bg-green-500 text-white rounded-lg">Publish Selected Spaces</button>
     </section>
-    <script>
-        document.getElementById('run-button').addEventListener('click', async () => {
-            const userInput = document.getElementById('user-input').value;
-            const outputDiv = document.getElementById('output');
-            const loadingIndicator = document.getElementById('loading-indicator');
-            const errorMessage = document.getElementById('error-message');
-            outputDiv.textContent = "";
-            errorMessage.textContent = "";
-            loadingIndicator.style.display = 'block';
-            const selectedTools = Array.from(document.getElementById('tools').selectedOptions).map(option => option.value);
-            try {const response = await fetch('/run_agent', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        query: userInput,
-                        tools: selectedTools
-                    })
-                });
-                loadingIndicator.style.display = 'none';
-                if (response.ok) {
-                    const data = await response.json();
-                    outputDiv.textContent = data.result;
-                } else {
-                    errorMessage.textContent = `Error: ${response.statusText}`;
-                }
-            } catch (error) {
-                loadingIndicator.style.display = 'none';
-                errorMessage.textContent = `Error: ${error.message}`;
-            }
-        });
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
 <html>
+  <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Smolagents and tools gallery</title>
     <meta name="description" content="Discover all smolagents and tools created by the community." />
+    <meta property="og:url" content="https://smolagents-tools-gallery.hf.space/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="smolagents and tools gallery" />
+    <meta property="og:description" content="Discover all smolagents and tools 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://davidberenstein1957-smolagents-and-tools.static.hf.space" />
+    <meta name="twitter:description" content="Discover all smolagents and tools created by the community." />
+    <meta name="twitter:site" content="@huggingface" />
+    <meta name="twitter:title" content="smolagents and tools gallery" />
+    <meta name="twitter:image" content="https://huggingface-projects-diffusers-gallery.hf.space/Fo6vR6JX0AEjbw1.jpeg" />
+    <meta name="twitter:player" content="https://davidberenstein1957-smolagents-and-tools.static.hf.space" />
+    <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;
+        margin-top: 48px; /* Match header height */
+      }
+    .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;
+      }
+    .grid-item-header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 48px;
+        background: rgba(0,0,0,0.75);
+        padding: 8px 16px;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+    .grid-item-header h2 {
+        width: 100%;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        max-height: 32px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 1.2;
+      }
     </style>
     <script type="module">
+      import Alpine from "https://cdn.skypack.dev/[email protected]";
+      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: "tool",
+        sort: "likes",
+        page: 1,
+        totalPages: -1,
+        useTestData: false,
+        searchQuery: "",
+        searchType: "keyword",
+        hfToken: "", // New property for Hugging Face token
+        userSpaces:, // New property to store user spaces
+        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 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 filterType(filter) {
+          this.filter = filter;
+          this.page = 1;
+          if (this.searchQuery) {
+            await this.searchThemes();
+          } else {
+            const data = await this.getThemes(this.page, this.sort, this.useTestData);
+            this.themes = data.themes;
+            this.totalPages = data.totalPages;
+          }
+        },
+        async searchThemes() {
+          this.page = 1;
+          const data = await this.getThemes(this.page, this.sort, this.useTestData);
+          this.themes = data.themes;
+          this.totalPages = data.totalPages;
+        },
+        async switchSearchType(type) {
+          this.searchType = type;
+          if (this.searchQuery) {
+            await this.searchThemes();
+          }
+        },
+        async getUserSpaces() {
+          if (!this.hfToken) {
+            alert("Please enter your Hugging Face token.");
+            return;
+          }
+          try {
+            const res = await fetch(`https://huggingface.co/api/spaces?token=${this.hfToken}`);
+            if (!res.ok) {
+              throw new Error(`Failed to fetch spaces: ${res.status} ${res.statusText}`);
+            }
+            const data = await res.json();
+            this.userSpaces = data;
+          } catch (error) {
+            alert(`Error fetching spaces: ${error.message}`);
+          }
+        },
+        async getThemes(page, sort, useTestData) {
+          let data;
+          if (useTestData) {
+            const res = await fetch(
+              `https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/test_data.json`
+            );
+            data = await res.json();
+          } else {
+            const searchFilters = this.filter === 'tool'? 'tool': 'smolagents';
+            let searchUrl;
+            if (this.searchQuery) {
+              if (this.searchType === 'semantic') {
+                searchUrl = `https://huggingface.co/api/spaces/semantic-search?limit=100&filter=${searchFilters}&q=${encodeURIComponent(this.searchQuery)}&expand=subdomain&expand=lastModified&expand=likes&expand=runtime`;
+              } else {
+                searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}&search=${encodeURIComponent(this.searchQuery)}&expand=subdomain&expand=lastModified&expand=likes&expand=runtime`;
+              }
+            } else {
+              searchUrl = `https://huggingface.co/api/spaces?limit=100&filter=${encodeURIComponent(searchFilters)}&expand=subdomain&expand=lastModified&expand=likes&expand=runtime`;
+            }
+            const res = await fetch(searchUrl);
+            data = await res.json();
+            // Transform the API response to match the expected format
+            data = data.filter(item => item.runtime?.stage === "RUNNING").map(item => ({
+              id: item.id,
+              subdomain: `https://${item.subdomain}.hf.space`,
+              likes: item.likes,
+              lastModified: item.lastModified
+            }));
+          }
+          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);
+          return {
+            themes: pageThemes,
+            totalPages: Math.ceil(data.length / 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">
+          <div class="flex items-center gap-2">
+            <img src="https://camo.githubusercontent.com/a8c1f1d12aa3114010c6e74b29d47fee91d8da10a915f065c38e6d0ea7f16568/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f736d6f6c6167656e74732f6d6173636f742e706e67" alt="Smolagents mascot" class="w-14 h-14 flex-shrink-0">
+            <h1 class="text-xl font-semibold text-gray-800 break-words">smolagents and tools gallery</h1>
+          </div>
+          <div class="flex items-center gap-2">
+            <input
+              type="text"
+              x-model="hfToken"
+              placeholder="Enter your Hugging Face Token"
+              class="px-3 py-1 border rounded-lg"
+            >
+            <button @click="getUserSpaces()" class="px-3 py-1 bg-blue-500 text-white rounded-lg">Import Spaces</button>
+          </div>
+        </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 flex-col gap-2">
+            <div class="flex items-center">
+              <input
+                type="text"
+                x-model="searchQuery"
+                @input="searchThemes()"
+                placeholder="Search..."
+                class="px-3 py-1 border rounded-lg"
+              >
             </div>
+          </div>
+          <div class="flex gap-2">
+            <span class="md:px-3 py-1 text-gray-800">type</span>
+            <button:class="buttonClass('filter', 'tool')" @click="filterType('tool')">Tools</button>
+            <button:class="buttonClass('filter', 'agent')" @click="filterType('agent')">Agents</button>
+          </div>
+          <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>
+      </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">
+            <div class="grid-item-header">
+              <h2 class="text-sm font-medium text-white" x-text="theme.id"></h2>
+            </div>
+            <iframe:src="`${theme.subdomain}?_=${new Date().getTime()}`":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>