Website Gallery page building

website/docs/Ecosystem.md

@@ -1,5 +1,4 @@
 # Ecosystem
-
 This page lists libraries that have integrations with Autogen for LLM applications using multiple agents in alphabetical order. Including your own integration to this list is highly encouraged. Simply open a pull request with a few lines of text, see the dropdown below for more information.
 
 
@@ -10,4 +9,4 @@ This page lists libraries that have integrations with Autogen for LLM applicatio
 
 MemGPT enables LLMs to manage their own memory and overcome limited context windows. You can use MemGPT to create perpetual chatbots that learn about you and modify their own personalities over time. You can connect MemGPT to your own local filesystems and databases, as well as connect MemGPT to your own tools and APIs. The MemGPT + AutoGen integration allows you to equip any AutoGen agent with MemGPT capabilities.
 
-- [MemGPT + AutoGen documentation with code examples](https://memgpt.readthedocs.io/en/latest/autogen/)
+- [MemGPT + AutoGen Documentation with Code Examples](https://memgpt.readthedocs.io/en/latest/autogen/)

website/docs/Gallery.mdx

@@ -0,0 +1,35 @@
+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": ["ui"]
+  }
+```
+
+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. We recommend using no more than two tags for clarity.
+Here are the meanings of several tags for reference:
+1. app: Using Autogen for specific applications.
+2. extension: Enhacing AutoGen beyond the features in current version.
+3. ui: Building user interface for AutoGen.
+4. tool: Strengthing AutoGen Agents with exteral tools.
+5. groupchat: Solving complex tasks with a group of Agents.
+
+if the existing ones do not precisely portray your own demos, new tags are also encouraged to add.

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,137 @@
+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
+                        ? item.image.includes("http")
+                          ? item.image
+                          : `/autogen/img/gallery/${item.image}`
+                        : `/autogen/img/gallery/default.png`
+                    }
+                  />
+                }
+              >
+                <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 ? item.description : item.title}
+                </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;
 }