Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Updated blog styling #373

Merged
merged 4 commits into from
Feb 28, 2025
+2,473 −209
Merged

docs: Updated blog styling #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd157b6
Updated blog page
danfhernandez Feb 27, 2025
30b335c
Fixed up some formatting
danfhernandez Feb 28, 2025
520e172
Fixed formatting for images and code
danfhernandez Feb 28, 2025
352cd2c
Fixed up inline code issue
danfhernandez Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions website/home/_posts/self-modifying-code.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "Self-modifying code"
excerpt: "Build an agent that can change its own code, start new instances of itself, self-replicate, and evolve."
title: "Self-modifying code agent"
excerpt: "We built an agent that can change its own code, start new instances of itself, self-replicate, and evolve."
date: "2025-02-27T00:00:00.000Z"
coverImage: "/assets/blog/hello-world/cover.jpg"
author:
Expand All @@ -18,7 +18,7 @@ Will it develop independent thought? Brick my machine? Ascend to Skynet?

Feel free to [fork the example in the GenSX GitHub repo](https://github.com/gensx-inc/gensx/tree/main/examples/self-modifying-code) if you’d like to follow along. But fair warning that if you do decide to run this code, **make sure you do it in a VM**. It has the ability to run arbitrary bash commands and spawn new instances of itself in a loop. Each iteration consumes \~1MM tokens (\~$4 at the time of writing), so you certainly don’t want it to run away while unattended.

# Architecture
## Architecture

While this may sound daunting, the architecture is surprisingly straight forward. There is an outer control loop for cloning source code and spawning new agent processes, and an inner workflow that contains the LLM magic.

Expand Down Expand Up @@ -124,7 +124,7 @@ Commands:

There is a lot more to doing this reliably, and making sure that the LLM doesn’t do things like nuke the filesystem (again - _run this code at your own risk_), but this simplified gist will take us pretty far.

# So what did the agent do?
## So what did the agent do?

We let the agent come up with its own goals for improving itself. It reads through the context and history of changes and uses tools to access the codebase.

Expand Down Expand Up @@ -156,7 +156,7 @@ But there are some problems. A deeper look at the code reveals a few TODO commen

I was hopeful that the agent would see all of the TODOs and NYIs when it planned for the next iteration and decide to finish the job. Unfortunately, it just moved on to implementing a telemetry and logging system.

# Should you worry about losing your job?
## Should you worry about losing your job?

Based on my experience building this, absolutely not. At least not yet. This self modifying agent can’t really be left to its own devices.

Expand Down
216 changes: 198 additions & 18 deletions website/home/app/blog/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,17 @@ import { notFound } from "next/navigation";
import { getAllPosts, getPostBySlug } from "@/lib/api";
import MarkdownToHTML from "@/components/markdown-to-html";
import AnimatedPage from "@/components/AnimatedPage";
import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { HyperText } from "@/components/ui/hyper-text";

// Calculate reading time based on content length (average reading speed: 200 words per minute)
function calculateReadingTime(content: string): string {
const words = content.trim().split(/\s+/).length;
const minutes = Math.ceil(words / 200);
return `${minutes} min read`;
}

export default async function Post(props: Params) {
const params = await props.params;
Expand All @@ -12,27 +23,196 @@ export default async function Post(props: Params) {
return notFound();
}

const readingTime = calculateReadingTime(post.content);

return (
<AnimatedPage>
<div className="min-h-screen w-full max-w-7xl mx-auto pt-32 px-6 md:px-8 pb-20">
<article className="max-w-3xl mx-auto">
<div className="mb-8">
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
{post.date && (
<time className="text-gray-600" dateTime={post.date}>
{new Date(post.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</time>
)}
{/* Main content section */}
<div className="min-h-screen w-full max-w-7xl mx-auto pt-52 px-6 md:px-8 pb-20 relative">
{/* Horizontal top line */}
<div className="hidden md:block absolute left-[calc(1.5rem-30px)] lg:left-[calc(4rem-30px)] right-[calc(1.5rem-30px)] lg:right-[calc(4rem-30px)] top-32 h-px bg-gray-200"></div>

{/* Horizontal bottom line */}
<div className="hidden md:block absolute left-[calc(1.5rem-30px)] lg:left-[calc(4rem-30px)] right-[calc(1.5rem-30px)] lg:right-[calc(4rem-30px)] bottom-20 h-px bg-gray-200"></div>

{/* Left vertical line */}
<div className="hidden md:block absolute left-6 lg:left-16 top-[calc(8rem-30px)] bottom-[calc(5rem-30px)] w-px bg-gray-200"></div>
{/* Right vertical line */}
<div className="hidden md:block absolute right-6 lg:right-16 top-[calc(8rem-30px)] bottom-[calc(5rem-30px)] w-px bg-gray-200"></div>

{/* Top-left corner */}
<div className="hidden md:block absolute left-6 lg:left-16 top-32 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute left-6 lg:left-16 top-32 h-[100px] w-px bg-gray-800"></div>

{/* Top-right corner */}
<div className="hidden md:block absolute right-6 lg:right-16 top-32 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute right-6 lg:right-16 top-32 h-[100px] w-px bg-gray-800"></div>

{/* Bottom-left corner */}
<div className="hidden md:block absolute left-6 lg:left-16 bottom-20 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute left-6 lg:left-16 bottom-20 h-[100px] w-px bg-gray-800 origin-bottom"></div>

{/* Bottom-right corner */}
<div className="hidden md:block absolute right-6 lg:right-16 bottom-20 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute right-6 lg:right-16 bottom-20 h-[100px] w-px bg-gray-800 origin-bottom"></div>

<div className="max-w-[720px] mx-auto relative">
<div className="text-center mb-8">
<Link
href="/blog"
className="inline-flex items-center text-sm hover:underline"
>
<svg
className="w-4 h-4 mr-1"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 18L9 12L15 6"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Blog
</Link>
</div>

<article className="relative">
<header className="mb-12 text-center">
<h1 className="text-4xl md:text-5xl font-bold mb-9">
{post.title}
</h1>

{post.author && (
<div className="flex items-center justify-center mb-[92px]">
{post.author.picture && (
<div className="w-6 h-6 rounded-full overflow-hidden mr-2">
<Image
src={post.author.picture}
alt={post.author.name || "Author"}
width={24}
height={24}
className="object-cover"
/>
</div>
)}
<span className="text-sm text-gray-700">
{post.author.name}
</span>
</div>
)}

<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between w-full mb-10">
<div className="flex items-center text-sm text-gray-600 justify-center sm:justify-start">
<span className="inline-flex items-center">
<svg
className="w-4 h-4 mr-2"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 8V12L15 15"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<circle
cx="12"
cy="12"
r="9"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
{readingTime}
</span>
</div>

{post.date && (
<time
className="text-sm text-gray-600 mt-2 sm:mt-0 text-center sm:text-right"
dateTime={post.date}
>
{new Date(post.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</time>
)}
</div>

{post.excerpt && (
<div className="border-l-4 border-gray-200 pl-6 mb-12 mt-8">
<p className="text-xl text-gray-600 leading-[1.3] max-w-2xl text-left font-semibold italic">
{post.excerpt}
</p>
</div>
)}
</header>

<MarkdownToHTML
markdown={post.content || ""}
className="prose md:prose-lg max-w-none [&>*]:my-6 [&_p]:leading-relaxed [&_p]:leading-[1.3] [&_p+p]:mt-6 [&_li]:leading-relaxed [&_li]:leading-[1.3] [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:mt-16 [&_h2]:mb-6 [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:mt-12 [&_h3]:mb-4 [&_ul]:my-6 [&_ol]:my-6 [&_li]:my-2 [&_blockquote]:my-8 [&_blockquote]:border-l-4 [&_blockquote]:pl-4 [&_blockquote]:italic [&_a]:text-blue-600 [&_a]:underline [&_a:hover]:text-blue-800 [&_hr]:my-10 [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_pre]:mt-4 [&_pre]:mb-0 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_img]:my-10 [&_img]:mx-auto [&_figure]:my-10 mb-24"
/>
</article>
</div>
</div>

{/* CTA Section with corner styling */}
<div className="w-full max-w-7xl mx-auto py-24 px-6 md:px-8 relative mb-20">
{/* Horizontal top line */}
<div className="hidden md:block absolute left-[calc(1.5rem-30px)] lg:left-[calc(4rem-30px)] right-[calc(1.5rem-30px)] lg:right-[calc(4rem-30px)] top-0 h-px bg-gray-200"></div>

{/* Horizontal bottom line */}
<div className="hidden md:block absolute left-[calc(1.5rem-30px)] lg:left-[calc(4rem-30px)] right-[calc(1.5rem-30px)] lg:right-[calc(4rem-30px)] bottom-0 h-px bg-gray-200"></div>

{/* Left vertical line */}
<div className="hidden md:block absolute left-6 lg:left-16 top-[calc(0rem-30px)] bottom-[calc(0rem-30px)] w-px bg-gray-200"></div>
{/* Right vertical line */}
<div className="hidden md:block absolute right-6 lg:right-16 top-[calc(0rem-30px)] bottom-[calc(0rem-30px)] w-px bg-gray-200"></div>

{/* Top-left corner */}
<div className="hidden md:block absolute left-6 lg:left-16 top-0 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute left-6 lg:left-16 top-0 h-[100px] w-px bg-gray-800"></div>

{/* Top-right corner */}
<div className="hidden md:block absolute right-6 lg:right-16 top-0 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute right-6 lg:right-16 top-0 h-[100px] w-px bg-gray-800"></div>

{/* Bottom-left corner */}
<div className="hidden md:block absolute left-6 lg:left-16 bottom-0 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute left-6 lg:left-16 bottom-0 h-[100px] w-px bg-gray-800 origin-bottom"></div>

{/* Bottom-right corner */}
<div className="hidden md:block absolute right-6 lg:right-16 bottom-0 h-px w-[100px] bg-gray-800"></div>
<div className="hidden md:block absolute right-6 lg:right-16 bottom-0 h-[100px] w-px bg-gray-800 origin-bottom"></div>

<div className="max-w-[720px] mx-auto relative">
<div className="text-center">
<h2 className="text-3xl font-bold mb-6">Ready to get started?</h2>
<p className="text-lg text-gray-700 mb-10 max-w-xl mx-auto leading-[1.3]">
Join developers building the next generation of AI-powered
applications with GenSX.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/docs/quickstart">
<Button variant="primary">
<HyperText>Quickstart Guide</HyperText>
</Button>
</Link>
<Link href="https://signin.gensx.com/sign-up">
<Button variant="ghost">
<HyperText>Sign up for free</HyperText>
</Button>
</Link>
</div>
</div>
<MarkdownToHTML
markdown={post.content || ""}
className="prose md:prose-lg max-w-none"
/>
</article>
</div>
</div>
</AnimatedPage>
);
Expand Down
Loading
Loading