forked from microsoft/autogen
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Website Gallery page building (microsoft#850)
* initial draft * update dependences, add antd for layout (note yarn install needed her) * update gallery to use mdx file format to support react components * add custom react component for gallery with tag based filtering and url state management * add styling for gallery objects * add gallery data structure and default image * improve layout for gallerypage * revise Postgres demo * add default value when image is not provided * move semetic kernal to ecosystem * update tags * update tags * update ecosystem * update default fig * update tags * reformat --------- Co-authored-by: “skzhang1” <“shaokunzhang529@gmail.com”> Co-authored-by: Victor Dibia <victordibia@microsoft.com>
- Loading branch information
Showing
9 changed files
with
1,024 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.