revise web (#71)

* revise web * formate * formate * update * delete
autogenhub · Oct 21, 2024 · 830270d · 830270d
1 parent bf6b15c
commit 830270d
Show file tree

Hide file tree

Showing 10 changed files with 313 additions and 116 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -234,6 +234,15 @@ module.exports = {
   ],
 
   plugins: [
+    [
+      '@docusaurus/plugin-content-blog',
+      {
+        id: 'talks',
+        routeBasePath: 'talks',
+        path: './talks',
+        showReadingTime: true,
+      },
+    ],
     [
       require.resolve("@easyops-cn/docusaurus-search-local"),
       {

diff --git a/website/src/css/api.scss b/website/src/css/api.scss
@@ -0,0 +1,61 @@
+.api-method > .menu__link {
+    align-items: center;
+    justify-content: start;
+  }
+
+.api-method > .menu__link::before {
+  width: 50px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 20px;
+  text-transform: uppercase;
+  font-weight: 600;
+  border-radius: 0.25rem;
+  border: 1px solid;
+  border-inline-start-width: 5px;
+  margin-right: var(--ifm-spacing-horizontal);
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.get > .menu__link::before {
+  content: "get";
+  background-color: var(--ifm-color-warning-contrast-background);
+  color: var(--ifm-color-warning-contrast-foreground);
+  border-color: var(--ifm-color-warning-dark);
+}
+
+.post > .menu__link::before {
+  content: "post";
+  background-color: var(--ifm-color-success-contrast-background);
+  color: var(--ifm-color-success-contrast-foreground);
+  border-color: var(--ifm-color-success-dark);
+}
+
+.delete > .menu__link::before {
+  content: "del";
+  background-color: var(--ifm-color-danger-contrast-background);
+  color: var(--ifm-color-danger-contrast-foreground);
+  border-color: var(--ifm-color-danger-dark);
+}
+
+.put > .menu__link::before {
+  content: "put";
+  background-color: var(--ifm-color-info-contrast-background);
+  color: var(--ifm-color-info-contrast-foreground);
+  border-color: var(--ifm-color-info-dark);
+}
+
+.patch > .menu__link::before {
+  content: "patch";
+  background-color: var(--ifm-color-success-contrast-background);
+  color: var(--ifm-color-success-contrast-foreground);
+  border-color: var(--ifm-color-success-dark);
+}
+
+.head > .menu__link::before {
+  content: "head";
+  background-color: var(--ifm-color-secondary-contrast-background);
+  color: var(--ifm-color-secondary-contrast-foreground);
+  border-color: var(--ifm-color-secondary-dark);
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -1,136 +1,68 @@
-:root {
-  --ifm-font-size-base: 17px;
-  --ifm-code-font-size: 90%;
-
-  --ifm-color-primary: #0c4da2;
-  --ifm-color-primary-dark: rgb(11, 69, 146);
-  --ifm-color-primary-darker: #0a418a;
-  --ifm-color-primary-darkest: #083671;
-  --ifm-color-primary-light: #0d55b2;
-  --ifm-color-primary-lighter: #0e59ba;
-  --ifm-color-primary-lightest: #1064d3;
+@use 'proxy';
+@use 'api';
 
-  --ifm-color-emphasis-300: #1064d3;
-  --ifm-link-color: #1064d3;
-  --ifm-menu-color-active: #1064d3;
-  --ifm-navbar-search-input-placeholder-color: #6e7174;
-}
-
-.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);
-}
-
-.admonition-content a {
-  text-decoration: underline;
-  font-weight: 600;
-  color: inherit;
-}
-
-a {
-  font-weight: 600;
+:root {
+  --ifm-color-primary: #f7912d;
+  --ifm-color-primary-dark: #f68211;
+  --ifm-color-primary-darker: #ef7b09;
+  --ifm-color-primary-darkest: #c56508;
+  --ifm-color-primary-light: #f8a049;
+  --ifm-color-primary-lighter: #f9a757;
+  --ifm-color-primary-lightest: #fabd81;
+  --ifm-code-font-size: 95%;
+  --ifm-background-color: #fff;
+
+  --docusaurus-highlighted-code-line-bg: rgb(235, 235, 235);
 }
 
-blockquote {
-  /* samsung blue with lots of transparency */
-  background-color: #0c4da224;
+[data-theme='dark'] {
+  --docusaurus-highlighted-code-line-bg: #3f4255;
 }
 
-.header-github-link:hover {
-  opacity: 0.6;
+.theme-code-block-highlighted-line {
+  display: table-row !important;
 }
 
-.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;
+.video-container {
+  height: 0;
+  margin: 0;
+  margin-bottom: 30px;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  position: relative;
 }
 
-.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 */
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.tag {
-  padding: 2px 8px;
-  border: 1px solid #1273ce;
-  color: #1273ce;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
+.saml-tutorial-img {
+  border: 1px solid rgb(224, 224, 224);
+  margin-bottom: 1rem;
 }
 
-.tag:hover {
-  background-color: #1273ce;
-  color: white;
+.zoomed-in-img {
+  border: 1px solid rgb(224, 224, 224);
 }
 
-/* This puts a 10px border on the left of Python code blocks. This is to provide
-some visual distinction between code cells and output cells. The color is the
-prism code block background color lightened by 25% */
-.language-python.theme-code-block
-{
-  border-left: 10px solid #51597b;
+table td:first-child {
+  white-space: nowrap;
 }
 
-/* Small visual differentiation for the code output cell. Code background
-lightened by 15% */
-.language-text.theme-code-block
-{
-  background-color: #414863;
+.bottom-spaced {
+  margin-bottom: 1em;
 }
 
-html[data-theme="dark"] {
-  --ifm-breadcrumb-color-active: #0c90ff;
-  --ifm-hero-text-color: white;
-  --ifm-link-color: #1084ff;
-  --ifm-menu-color-active: #0c90ff;
-  --ifm-navbar-search-input-placeholder-color: #8a8d91;
-  --ifm-navbar-link-hover-color: #0c90ff;
-
-  .table-of-contents__link--active {
-    color: #0c84ff;
-  }
-
-  a[class^=sidebarItem][aria-current='page'] {
-    color: #0c84ff !important;
-  }
-
-  .hero.hero--primary {
-    --ifm-hero-text-color: white;
-  }
-
-  blockquote {
-    --ifm-color-emphasis-300: var(--ifm-color-primary);
-  }
-
-  a code {
-    color: #10a5ff;
-  }
-
-  /* Docusaurus still defaults to their green! */
-  .react-toggle-thumb {
-    border-color: var(--ifm-color-primary) !important;
-  }
-
-  .docusaurus-highlight-code-line {
-    background-color: rgb(0, 0, 0, 0.3);
-  }
-
-  .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;
-  }
-
-  .markdown table tr:nth-child(even) a {
-    color: #1097ff;
-  }
+span[class*='codeLineNumber'] {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
 }
diff --git a/website/src/css/proxy.scss b/website/src/css/proxy.scss
@@ -0,0 +1,116 @@
+.proxy-arg-table {
+    li[role='tab'] {
+      font-weight: 500;
+      font-size: 12px;
+      padding: 0 .5rem;
+    }
+
+    li[role='tab'][aria-selected='true'] {
+      opacity: .8;
+      border: 0px;
+      color: white;
+      background-color: var(--ifm-color-primary-light);
+      border-radius: var(--ifm-global-radius);
+    }
+
+    li[role='tab'][aria-selected='false'] {
+      opacity: .6;
+      transition: opacity .2s;
+      border: 0px
+    }
+
+    li[role='tab']:not(:first-of-type) {
+      margin-left: 5px;
+    }
+
+    td:nth-child(1) {
+      max-width: 500px;
+    }
+  }
+
+  .endpoint {
+    font-family: monospace;
+    font-size: 14px;
+
+    .http-method {
+      padding: 3px 6px;
+      border-radius: 4px;
+      color: white;
+      margin: 0 3px;
+    }
+
+    .green {
+      background-color: rgb(27, 168, 27);
+    }
+
+    .blue {
+      background-color: rgb(111, 111, 182);
+    }
+
+    .gray {
+      background-color: rgb(134, 134, 143);
+    }
+  }
+
+  .responses {
+    li {
+      padding: 2px 8px;
+      border-radius: 5px;
+      margin: 5px 0;
+    }
+
+    .status {
+      font-family: monospace;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .success {
+      background-color: rgba(0, 255, 0, 0.082);
+      .status {
+        color: rgb(0, 141, 0);
+      }
+    }
+
+    .error {
+      background-color: rgba(255, 0, 0, 0.082);
+      .status {
+        color: rgb(141, 0, 0);
+      }
+    }
+
+    .response-body {
+      font-weight: bold;
+      margin-top: 8px;
+    }
+  }
+
+  [data-theme='dark'] {
+    .proxy-arg-table {
+      li[role='tab'] {
+        opacity: .9;
+      }
+
+      li[role='tab'][aria-selected='false'] {
+        opacity: .6;
+      }
+
+      li[role='tab'][aria-selected='true'] {
+        background-color: var(--ifm-color-primary-darkest);
+      }
+    }
+
+    .success {
+      background-color: rgba(0, 255, 0, 0.075);
+      .status {
+        color: rgb(82, 212, 82);
+      }
+    }
+
+    .error {
+      background-color: rgba(255, 0, 0, 0.192);
+      .status {
+        color: rgb(248, 109, 109);
+      }
+    }
+  }
diff --git a/website/talks/2024-08-26/index.mdx b/website/talks/2024-08-26/index.mdx
@@ -0,0 +1,19 @@
+---
+title: Language Agent Tree Search in AutoGen - Aug 26, 2024
+# description:
+# slug:
+# authors:
+#   - name: AutoGenHub Team
+---
+
+### Speakers: Andy Zhou and Kai Yan
+
+### Biography of the speakers:
+
+Andy Zhou is currently a BS/MS student at UIUC advised by Bo Li. His research focuses on improving the decision-making abilities and addressing the security vulnerabilities of large language models. He has published papers in trustworthy machine learning, AI safety, and language model agents in multiple top AI conferences such as NeurIPS and ICML. For details, see https://www.andyzhou.ai
+
+Kai Yan is currently a third-year PhD student at UIUC, co-advised by Yuxiong Wang and Alexander Schwing. He received a BS in computer science from Peking University in 2021. His research interest is to build more versatile and efficient decision-making agents with demonstration-guided Reinforcement Learning (RL) and large language models. He has published papers on RL, Imitation Learning (IL), Large Language Model (LLM) agents, and optimization in multiple top AI conferences, and has served as a reviewer for top conferences such as NeurIPS, ICLR, ICML, CVPR, etc. For details, see https://kaiyan289.github.io/.
+
+### Abstract:
+
+Recent years have witnessed great development of AI agents. However, traditional AI, such as vanilla tree search and RL, has several limitations: inability of high-level understanding of the environment, low generalizability, and low learning efficiency. Fortunately, the advent of foundation models has enabled us to build agents that overcome all those shortcomings. With foundation models, AI agents have the potential to possess (super-)human-level reasoning, acting, and planning abilities, which are the most important features for future AI agents. In this talk, we introduce LATS (Language Agent Tree Search), the first framework that realizes all three capabilities of LLMs in reasoning, acting, and planning. Our work enables LLMs as agents to leverage tree-based search algorithms while employing LLM-powered value functions and self-reflections for cleverer exploration, which provides a more adaptive problem-solving mechanism. We show that our method is 1) empirically successful on a variety of tasks across different domains including tool-use, coding, and web agents, 2) more efficient than prior tree-search-based works, and 3) importantly, conveniently adaptable for Autogen users.