Przeglądaj źródła

update video; (#3284)

clean up docs site;
remove faq;
Xingyao Wang 1 rok temu
rodzic
commit
2669a5378c

+ 1 - 2
docs/docusaurus.config.ts

@@ -4,7 +4,7 @@ import { themes as prismThemes } from "prism-react-renderer";
 
 const config: Config = {
   title: "OpenDevin",
-  tagline: "Code Less, Make More",
+  tagline: "An Open Platform for AI Software Developers as Generalist Agents",
   favicon: "img/logo.png",
 
   // Set the production url of your site here
@@ -81,7 +81,6 @@ const config: Config = {
           position: "left",
           label: "Codebase",
         },
-        { to: "/faq", label: "FAQ", position: "left" },
         {
           href: "https://github.com/OpenDevin/OpenDevin",
           label: "GitHub",

+ 1 - 3
docs/src/components/CustomFooter.tsx

@@ -17,9 +17,7 @@ function CustomFooter() {
             </a>
           </div>
         </div>
-        <div className="footer-community">
-          <Translate id="footer.community">Community</Translate>
-        </div>
+
         <div className="footer-icons">
           <a href="https://join.slack.com/t/opendevin/shared_invite/zt-2ngejmfw6-9gW4APWOC9XUp1n~SiQ6iw" target="_blank" rel="noopener noreferrer">
             <FaSlack />

+ 1 - 1
docs/src/components/Demo/Demo.tsx

@@ -6,7 +6,7 @@ export function Demo() {
 
   return (
     <div
-      style={{ paddingBottom: "30px", paddingTop: "20px", textAlign: "center" }}
+      style={{ paddingBottom: "10px", paddingTop: "10px", textAlign: "center" }}
     >
       <video
         playsInline

+ 20 - 7
docs/src/components/HomepageHeader/HomepageHeader.tsx

@@ -14,15 +14,28 @@ export function HomepageHeader() {
         <Heading as="h1" className="header-title">
           {siteConfig.title}
         </Heading>
+
         <p className="header-subtitle">{siteConfig.tagline}</p>
-        <div className="header-buttons">
-          <Link
-            className="button button--secondary button--lg"
-            to="/modules/usage/intro"
-          >
-            <Translate id="homepage.getStarted">Get Started</Translate>
-          </Link>
+
+        <div className="header-links">
+          <a href="https://github.com/OpenDevin/OpenDevin">
+            <img src="https://img.shields.io/badge/Code-Github-purple?logo=github&logoColor=white&style=for-the-badge" alt="Code" />
+          </a>
+          <a href="https://join.slack.com/t/opendevin/shared_invite/zt-2i1iqdag6-bVmvamiPA9EZUu7oCO6KhA">
+            <img src="https://img.shields.io/badge/Slack-Join%20Us-red?logo=slack&logoColor=white&style=for-the-badge" alt="Join our Slack community" />
+          </a>
+          <a href="https://discord.gg/ESHStjSjD4">
+            <img src="https://img.shields.io/badge/Discord-Join%20Us-purple?logo=discord&logoColor=white&style=for-the-badge" alt="Join our Discord community" />
+          </a>
+
+          <a href="https://arxiv.org/abs/2407.16741">
+            <img src="https://img.shields.io/badge/Paper-%20on%20Arxiv-red?logo=arxiv&style=for-the-badge" alt="Paper on Arxiv" />
+          </a>
+          <a href="https://huggingface.co/spaces/OpenDevin/evaluation">
+            <img src="https://img.shields.io/badge/Evaluation-Benchmark%20on%20HF%20Space-green?logo=huggingface&style=for-the-badge" alt="Evaluation Benchmark" />
+          </a>
         </div>
+
         <Demo />
       </div>
     </div>

+ 0 - 20
docs/src/components/Welcome/Welcome.tsx

@@ -1,20 +0,0 @@
-import "../../css/welcome.css";
-import Translate from '@docusaurus/Translate';
-
-export function Welcome() {
-  return (
-    <div className="text-white">
-      <div className="welcome-container">
-        <img src="img/logo.png" className="welcome-logo" />
-        <p className="welcome-text">
-          <Translate id="welcome.message">
-          Welcome to OpenDevin, an open-source autonomous AI software engineer
-          that is capable of executing
-          complex engineering tasks and collaborating actively with users on
-          software development projects.
-          </Translate>
-        </p>
-      </div>
-    </div>
-  );
-}

+ 0 - 66
docs/src/css/faq.css

@@ -1,66 +0,0 @@
-/* faq.css */
-
-.faq-container {
-    margin: auto;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 24px;
-  }
-  
-  .faq-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2rem;
-    padding: 8px;
-    text-transform: uppercase;
-    font-weight: bold;
-  }
-  
-  @media (min-width: 1024px) {
-    .faq-title {
-      font-size: 6rem;
-    }
-  }
-  
-  .faq-section {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    margin-bottom: 24px;
-  }
-  
-  .faq-section-title {
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 2rem;
-    letter-spacing: 0.1em;
-  }
-  
-  .highlight {
-    font-weight: 600;
-    color: var(--logo);
-  }
-  
-  .faq-steps ol {
-    padding-left: 24px;
-  }
-  
-  .command-box {
-    display: flex;
-    flex-direction: column;
-    padding: 8px;
-    background-color: #e0e0e0;
-    border-radius: 0.375rem;
-    height: 6vh;
-    text-transform: uppercase;
-    color: #4a5568;
-  }
-  
-  .command-box + .command-box {
-    height: 8vh;
-  }
-  

+ 12 - 13
docs/src/css/footer.css

@@ -3,12 +3,12 @@
 .custom-footer {
     background-color: dark;
     color: white;
-    height: 25vh;
+    height: 200px;
     /* background: linear-gradient(to bottom, #1a1a1a, #1a1a1a); */
     background: linear-gradient(to bottom, #1f2937, #000000);
 
   }
-  
+
   .footer-content {
     display: flex;
     flex-direction: column;
@@ -17,56 +17,55 @@
     padding: 8px;
     height: 100%;
   }
-  
+
   .footer-top {
     display: flex;
     gap: 8px;
     align-items: center;
   }
-  
+
   .footer-title {
     font-weight: bold;
     font-size: 1.125rem;
   }
-  
+
   @media (min-width: 768px) {
     .footer-title {
       font-size: 1.875rem;
     }
   }
-  
+
   .footer-link a {
     font-size: 0.875rem;
     text-decoration: none;
     color: gray;
     transition: color 0.3s ease;
   }
-  
+
   .footer-link a:hover {
     color: white;
   }
-  
+
   .footer-community {
     text-transform: uppercase;
     font-weight: 300;
   }
-  
+
   .footer-icons {
     display: flex;
     gap: 24px;
     font-size: 1.875rem;
   }
-  
+
   .footer-icons a {
     color:gray;
     transition: color 0.3s ease;
   }
-  
+
   .footer-icons a:hover {
     color: white;
   }
-  
+
   .footer-bottom {
     text-transform: uppercase;
   }
-  

+ 42 - 31
docs/src/css/homepageHeader.css

@@ -1,36 +1,47 @@
 /* homepageHeader.css */
 
 .homepage-header {
-    height: 100vh;
-    color: white;
-    background: linear-gradient(to top, #64748b, #000000);
-  }
-  
-  .header-content {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: center;
-    padding: 24px;
-    font-weight: 300;
-    width: 100%;
-  }
-  
+  height: 800px;
+  color: white;
+  background: linear-gradient(to top, #64748b, #000000);
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  font-weight: 300;
+  width: 100%;
+}
+
+.header-title {
+  font-size: 3rem;
+}
+
+@media (min-width: 768px) {
   .header-title {
-    font-size: 3rem;
-  }
-  
-  @media (min-width: 768px) {
-    .header-title {
-      font-size: 5rem;
-    }
+    font-size: 4rem;
   }
-  
-  .header-subtitle {
-    font-size: 1.25rem;
-  }
-  
-  .header-buttons {
-    margin-top: 24px;
-  }
-  
+}
+
+.header-subtitle {
+  font-size: 1.5rem;
+}
+
+.header-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  max-width: 680px;
+}
+
+.header-links a {
+  display: inline-block;
+  transition: transform 0.2s ease-in-out;
+}
+
+.header-links a:hover {
+  transform: translateY(-2px);
+}

+ 0 - 53
docs/src/css/welcome.css

@@ -1,53 +0,0 @@
-/* welcome.css */
-
-.text-white {
-    color: white;
-  }
-
-  .welcome-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background: linear-gradient(to bottom, #64748b, #1f2937);
-  }
-
-  @media (min-width: 768px) {
-    .welcome-container {
-      flex-direction: row;
-      background: linear-gradient(to bottom, #64748b, #1f2937);
-    }
-  }
-
-  .welcome-logo {
-    height: 45vh;
-    width: 45vw;
-  }
-
-  @media (max-width: 640px) {
-    .welcome-logo {
-      height: 40vw;
-      width: 40vw;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .welcome-logo {
-      height: auto;
-      width: 350px;
-    }
-  }
-
-  .welcome-text {
-    padding: 24px;
-    margin-bottom: 24px;
-    font-weight: 300;
-    font-size: 1.125rem;
-  }
-
-  @media (min-width: 768px) {
-    .welcome-text {
-      padding: 8px;
-      font-size: 1.5rem;
-    }
-  }

+ 0 - 129
docs/src/pages/faq.tsx

@@ -1,129 +0,0 @@
-import Layout from '@theme/Layout';
-import '../css/faq.css';
-import Translate, { translate } from '@docusaurus/Translate';
-
-export default function FAQ() {
-  const githubLink = (
-    <a href="https://github.com/OpenDevin/OpenDevin/issues" target="_blank">GitHub</a>
-  );
-  const discordLink = (
-    <a href="https://discord.gg/mBuDGRzzES" target="_blank">Discord</a>
-  );
-  const slackLink = (
-    <a href="https://join.slack.com/t/opendevin/shared_invite/zt-2ngejmfw6-9gW4APWOC9XUp1n~SiQ6iw" target="_blank">Slack</a>
-  );
-
-  return (
-    <Layout
-      title={translate({ id: 'faq.title', message: 'FAQ' })}
-      description={translate({ id: 'faq.description', message: 'Frequently Asked Questions' })}
-    >
-      <div id="faq" className="faq-container">
-        <div className="faq-title">
-          <Translate id="faq.title" description="FAQ Title">Frequently Asked Questions</Translate>
-        </div>
-        <div className="faq-section">
-          <div className="faq-section-title">
-            <Translate id="faq.section.title.1" description="First Section Title">What is OpenDevin?</Translate>
-          </div>
-          <p>
-            <span className="highlight"><Translate id="faq.section.highlight" description="Highlight Text">OpenDevin</Translate></span>{" "}
-            <Translate id="faq.section.description.1" description="Description for OpenDevin">
-              is an autonomous software engineer that can solve software engineering
-              and web-browsing tasks end-to-end. It can perform data science queries, such
-              as "Find the number of pull requests to the OpenDevin repository in the last
-              month," and software engineering tasks, such as "Please add tests to this
-              file and verify that all the tests pass. If they don't fix the file."
-            </Translate>
-          </p>
-          <p>
-            <Translate id="faq.section.description.2" description="Further Description for OpenDevin">
-              At the same time, OpenDevin is a platform and community for agent developers
-              to test out and evaluate new agents.
-            </Translate>
-          </p>
-        </div>
-        <div className="faq-section">
-          <div className="faq-section-title">
-            <Translate id="faq.section.title.2" description="Support Section Title">Support</Translate>
-          </div>
-          <div>
-            <Translate
-              id="faq.section.support.answer"
-              description="Support Answer"
-              values={{
-                githubLink: githubLink,
-                discordLink: discordLink,
-                slackLink: slackLink,
-              }}
-            >
-              {`Please file a bug on {githubLink} if you notice a problem that likely affects others. If you're having trouble installing, or have general questions, reach out on {discordLink} or {slackLink}.`}
-            </Translate>
-          </div>
-        </div>
-        <div className="faq-section">
-          <div className="faq-section-title">
-            <Translate id="faq.section.title.3" description="GitHub Issue Section Title">How to fix a GitHub issue with OpenDevin?</Translate>
-          </div>
-          <div className="faq-steps">
-            <Translate id="faq.section.github.steps.intro" description="GitHub Steps Introduction">
-              To fix an issue on GitHub using OpenDevin, send a prompt to OpenDevin asking it to follow
-              steps like the following:
-            </Translate>
-            <ol>
-              <li><Translate id="faq.section.github.step1" description="GitHub Step 1">Read the issue https://github.com/OpenDevin/OpenDevin/issues/1611</Translate></li>
-              <li><Translate id="faq.section.github.step2" description="GitHub Step 2">Clone the repository and check out a new branch</Translate></li>
-              <li><Translate id="faq.section.github.step3" description="GitHub Step 3">Based on the instructions in the issue description, modify files to fix the issue</Translate></li>
-              <li><Translate id="faq.section.github.step4" description="GitHub Step 4">Push the resulting output to GitHub using the GITHUB_TOKEN environment variable</Translate></li>
-              <li><Translate id="faq.section.github.step5" description="GitHub Step 5">Tell me the link that I need to go to to send a pull request</Translate></li>
-            </ol>
-            <Translate id="faq.section.github.steps.preRun" description="GitHub Steps Pre-Run">
-              Before you run OpenDevin, you can do:
-            </Translate>
-            <div className="command-box">
-              export SANDBOX_ENV_GITHUB_TOKEN=XXX
-            </div>
-            <Translate id="faq.section.github.steps.tokenInfo" description="GitHub Steps Token Info">
-              where XXX is a GitHub token that you created that has permissions to push to the OpenDevin repo. If you don’t have write permission to the OpenDevin repo, you might need to change that to:
-            </Translate>
-            <div className="command-box">
-              Push the resulting output to my fork at https://github.com/USERNAME/OpenDevin/ using the GITHUB_TOKEN environment variable
-            </div>
-            <Translate id="faq.section.github.steps.usernameInfo" description="GitHub Steps Username Info">
-              where USERNAME is your GitHub username.
-            </Translate>
-          </div>
-        </div>
-        <div className="faq-section">
-          <div className="faq-section-title">
-            <Translate id="faq.section.title.4" description="Devin Section Title">How is OpenDevin different from Devin?</Translate>
-          </div>
-          <p>
-            <a href="https://www.cognition.ai/blog/introducing-devin"><Translate id="faq.section.devin.linkText" description="Devin Link Text">Devin</Translate></a>&nbsp;
-            <Translate id="faq.section.devin.description" description="Devin Description">
-              is a commercial product by Cognition Inc., that served as the initial
-              inspiration for OpenDevin. They both aim to do a good job at solving software
-              engineering tasks, but OpenDevin you can download, use, and modify, while Devin
-              you can only use through the Cognition site. In addition, OpenDevin has evolved
-              beyond the initial inspiration, and now serves as a community-driven ecosystem for
-              agent development in general, and we'd love to have you join and
-            </Translate>
-            <a href="https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md"><Translate id="faq.section.devin.contribute" description="Contribute Link">contribute</Translate></a>!
-          </p>
-        </div>
-        <div className="faq-section">
-          <div className="faq-section-title">
-            <Translate id="faq.section.title.5" description="ChatGPT Section Title">How is OpenDevin different from ChatGPT?</Translate>
-          </div>
-          <p>
-            <Translate id="faq.section.chatgpt.description" description="ChatGPT Description">
-              ChatGPT you can access online, it does not interface with local files, and
-              its ability to execute code is limited. So it can write code, but it is not
-              easy to test or execute it.
-            </Translate>
-          </p>
-        </div>
-      </div>
-    </Layout>
-  );
-}

+ 4 - 12
docs/src/pages/index.tsx

@@ -4,12 +4,11 @@ import { HomepageHeader } from "../components/HomepageHeader/HomepageHeader";
 import { Welcome } from "../components/Welcome/Welcome";
 import { translate } from '@docusaurus/Translate';
 
-export function Header({ title, summary, description }): JSX.Element {
+export function Header({ title, summary }): JSX.Element {
   return (
     <div>
       <h1>{title}</h1>
-      <h2 style={{ fontSize: "40px" }}>{summary}</h2>
-      <h3 className="headerDescription">{description}</h3>
+      <h2 style={{ fontSize: "3rem" }}>{summary}</h2>
     </div>
   );
 }
@@ -17,22 +16,15 @@ export function Header({ title, summary, description }): JSX.Element {
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <>
     <Layout
       title={`${siteConfig.title}`}
       description={translate({
         id: 'homepage.description',
-        message: 'AI-powered code generation for software engineering.',
+        message: 'An Open Platform for AI Software Developers as Generalist Agents',
         description: 'The homepage description',
       })}
     >
-      <div>
-        <HomepageHeader />
-        <div>
-          <Welcome />
-        </div>
-      </div>
+    <HomepageHeader />
     </Layout>
-    </>
   );
 }

BIN
docs/static/img/teaser.mp4