Website Gallery page building

website/docs/Gallery.mdx

@@ -0,0 +1,26 @@
+import GalleryPage from '../src/components/GalleryPage';
+
+# Gallery
+
+This page contains a list of demos that use AutoGen in various applications from the community.
+
+**Contribution guide:**
+Built something interesting with AutoGen? Submit a PR to add it to the list! See the [Contribution Guide below](#contributing) for more details.
+
+<GalleryPage />
+
+## Contributing
+
+To contribute, please open a PR that adds an entry to the `data/gallery.json` file in the `src` directory. The entry should be an object with the following properties:
+
+```js
+{
+    "title": "AutoGen Playground",
+    "link": "https://huggingface.co/spaces/thinkall/AutoGen_Playground",
+    "description": "A space to explore the capabilities of AutoGen.",
+    "image": "default.png",
+    "tags": ["web", "app"]
+  }
+```
+
+The `image` property should be the name of a file in the `static/img/gallery` directory. The `tags` property should be an array of strings that describe the demo.

website/docusaurus.config.js

@@ -63,8 +63,8 @@ module.exports = {
               docId: 'Ecosystem',
             },
             {
-              href: 'https://huggingface.co/spaces/thinkall/AutoGen_Playground',
-              label: 'PlayGround',
+              type: 'doc',
+              docId: 'Gallery',
             },
           ],
         },

website/package.json

@@ -2,17 +2,17 @@
   "name": "website",
   "version": "0.0.0",
   "private": true,
-  "resolutions" :{
-    "nth-check":"2.0.1",
-    "trim":"0.0.3",
+  "resolutions": {
+    "nth-check": "2.0.1",
+    "trim": "0.0.3",
     "got": "11.8.5",
     "node-forge": "1.3.0",
     "minimatch": "3.0.5",
     "loader-utils": "2.0.4",
     "eta": "2.0.0",
     "@sideway/formula": "3.0.1",
     "http-cache-semantics": "4.1.1"
-   },
+  },
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
@@ -30,16 +30,17 @@
     "@easyops-cn/docusaurus-search-local": "^0.21.1",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
+    "antd": "^5.11.5",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
     "hast-util-is-element": "1.1.0",
+    "minimatch": "3.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rehype-katex": "4",
     "remark-math": "3",
     "trim": "^0.0.3",
-    "url-loader": "^4.1.1",
-    "minimatch": "3.0.5"
+    "url-loader": "^4.1.1"
   },
   "browserslist": {
     "production": [

website/src/components/GalleryPage.js

@@ -0,0 +1,135 @@
+import React, { useEffect, useState, useCallback } from "react";
+import galleryData from "../data/gallery.json";
+import { Card, List, Select } from "antd";
+import { useLocation, useHistory } from "react-router-dom";
+
+const { Option } = Select;
+
+const GalleryPage = () => {
+  const location = useLocation();
+  const history = useHistory();
+
+  // Function to get tags from the URL query string.
+  const getTagsFromURL = useCallback(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const tags = searchParams.get("tags");
+    return tags ? tags.split(",") : [];
+  }, [location.search]);
+
+  // Initialize selectedTags state based on URL parameters.
+  const [selectedTags, setSelectedTags] = useState(getTagsFromURL());
+
+  useEffect(() => {
+    // Update state if the URL search parameters change.
+    const tagsFromURL = getTagsFromURL();
+    setSelectedTags(tagsFromURL);
+  }, [getTagsFromURL]);
+
+  const TagsView = ({ tags }) => (
+    <div className="tags-container">
+      {tags.map((tag, index) => (
+        <span className="tag" key={index}>
+          {tag}
+        </span>
+      ))}
+    </div>
+  );
+
+  const allTags = [...new Set(galleryData.flatMap((item) => item.tags))];
+
+  const handleTagChange = (tags) => {
+    setSelectedTags(tags);
+    const searchParams = new URLSearchParams();
+    if (tags.length > 0) {
+      searchParams.set("tags", tags.join(","));
+    }
+    history.push(`${location.pathname}?${searchParams.toString()}`);
+  };
+
+  const filteredData =
+    selectedTags.length > 0
+      ? galleryData.filter((item) =>
+          selectedTags.some((tag) => item.tags.includes(tag))
+        )
+      : galleryData;
+
+  return (
+    <div>
+      <Select
+        mode="multiple"
+        placeholder="Filter by tags"
+        style={{ width: "100%", marginBottom: 16 }}
+        value={selectedTags}
+        onChange={handleTagChange}
+      >
+        {allTags.map((tag) => (
+          <Option key={tag} value={tag}>
+            {tag}
+          </Option>
+        ))}
+      </Select>
+
+      <List
+        grid={{
+          gutter: 16,
+          xs: 1,
+          sm: 2,
+          md: 3,
+          lg: 3,
+          xl: 4,
+          xxl: 4,
+        }}
+        dataSource={filteredData}
+        renderItem={(item) => (
+          <List.Item>
+            <a
+              href={item.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ display: "block" }}
+            >
+              <Card
+                hoverable
+                bordered
+                cover={
+                  <img
+                    alt={item.title}
+                    src={
+                      item.image.includes("http")
+                        ? item.image
+                        : `/autogen/img/gallery/${item.image}`
+                    }
+                  />
+                }
+              >
+                <div>
+                  <span
+                    style={{
+                      fontSize: "1.2rem",
+                      fontWeight: "bold",
+                      color: "black",
+                    }}
+                  >
+                    {item.title}
+                  </span>
+                </div>
+                <div
+                  style={{
+                    // fontSize: "0.8rem",
+                    fontWeight: "normal",
+                    color: "grey",
+                  }}
+                >
+                  {item.description}
+                </div>
+                <TagsView tags={item.tags} />
+              </Card>
+            </a>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+
+export default GalleryPage;

website/src/css/custom.css

@@ -16,73 +16,95 @@
 }
 
 .docusaurus-highlight-code-line {
-background-color: rgba(0, 0, 0, 0.1);
-display: block;
-margin: 0 calc(-1 * var(--ifm-pre-padding));
-padding: 0 var(--ifm-pre-padding);
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
 }
-html[data-theme='dark'] .docusaurus-highlight-code-line {
-background-color: rgb(0, 0, 0, 0.3);
+html[data-theme="dark"] .docusaurus-highlight-code-line {
+  background-color: rgb(0, 0, 0, 0.3);
 }
 
 .admonition-content a {
-text-decoration: underline;
-font-weight: 600;
-color: inherit;
+  text-decoration: underline;
+  font-weight: 600;
+  color: inherit;
 }
 
 a {
-font-weight: 600;
+  font-weight: 600;
 }
 
 blockquote {
   /* samsung blue with lots of transparency */
   background-color: #0c4da224;
 }
 @media (prefers-color-scheme: dark) {
-:root {
-  --ifm-hero-text-color: white;
-}
+  :root {
+    --ifm-hero-text-color: white;
+  }
 }
 @media (prefers-color-scheme: dark) {
-.hero.hero--primary { --ifm-hero-text-color: white;}
+  .hero.hero--primary {
+    --ifm-hero-text-color: white;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
-blockquote {
-  --ifm-color-emphasis-300: var(--ifm-color-primary);
-  /* border-left: 6px solid var(--ifm-color-emphasis-300); */
-}
+  blockquote {
+    --ifm-color-emphasis-300: var(--ifm-color-primary);
+    /* border-left: 6px solid var(--ifm-color-emphasis-300); */
+  }
 }
 @media (prefers-color-scheme: dark) {
-code {
-  /* background-color: rgb(41, 45, 62); */
+  code {
+    /* background-color: rgb(41, 45, 62); */
+  }
 }
-}
-
 
 /* Docusaurus still defaults to their green! */
 @media (prefers-color-scheme: dark) {
-.react-toggle-thumb {
-  border-color: var(--ifm-color-primary) !important;
-}
+  .react-toggle-thumb {
+    border-color: var(--ifm-color-primary) !important;
+  }
 }
 
-
 .header-github-link:hover {
-opacity: 0.6;
+  opacity: 0.6;
 }
 
 .header-github-link:before {
-content: '';
-width: 24px;
-height: 24px;
-display: flex;
-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-  no-repeat;
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+html[data-theme="dark"] .header-github-link:before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+.tags-container {
+  display: flex; /* Use flexbox to lay out tags inline */
+  flex-wrap: wrap;
+  gap: 4px; /* Adjust the gap between tags */
+  margin-top: 8px; /* Space above the tag list */
+}
+
+.tag {
+  padding: 2px 8px;
+  border: 1px solid #1890ff;
+  color: #1890ff;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
 }
 
-html[data-theme='dark'] .header-github-link:before {
-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-  no-repeat;
+.tag:hover {
+  background-color: #1890ff;
+  color: white;
 }