Skip to content

Add a lightbox #2010

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add a lightbox #2010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 12 additions & 12 deletions client/www/_posts/agents_building_counterstrike.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ Goal number 1 was to set up the physics for the game. Models needed to design a

Here’s a side-by-side comparison of the visuals each model came up with:

| Codex | Claude | Gemini |
| ---------------------------------------- | ----------------------------------------- | ----------------------------------------- |
| ![](/posts/counter_strike/map_codex.png) | ![](/posts/counter_strike/map_claude.png) | ![](/posts/counter_strike/map_gemini.png) |
| Codex | Claude | Gemini |
| ------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------- |
| ![](/posts/counter_strike/map_codex.png?lightbox) | ![](/posts/counter_strike/map_claude.png?lightbox) | ![](/posts/counter_strike/map_gemini.png?lightbox) |

Visually Claude came up with the most interesting map. There were obstacles, a nice floor, and you could see everything well.

Expand All @@ -92,9 +92,9 @@ Now that we had a map and some polygons, we asked the models to style up the cha

Here’s the result of their work:

| Codex | Claude | Gemini |
| ------------------------------------------ | ------------------------------------------- | ------------------------------------------- |
| ![](/posts/counter_strike/enemy_codex.png) | ![](/posts/counter_strike/enemy_claude.png) | ![](/posts/counter_strike/enemy_gemini.png) |
| Codex | Claude | Gemini |
| --------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- |
| ![](/posts/counter_strike/enemy_codex.png?lightbox) | ![](/posts/counter_strike/enemy_claude.png?lightbox) | ![](/posts/counter_strike/enemy_gemini.png?lightbox) |

Again it feels like Claude did the best job here. The character look quite human — almost at the level of design in Minecraft. Gemini did well too. Codex made it’s characters better, but everything was a single color, which really diminished it compared to the others.

Expand All @@ -106,9 +106,9 @@ We then asked each model to add a gun to our first-person view. When we shoot, w

Here’s the side-by-side of how the recoil felt for each model:

| Codex | Claude | Gemini |
| ------------------------------------------- | -------------------------------------------- | -------------------------------------------- |
| ![](/posts/counter_strike/recoil_codex.gif) | ![](/posts/counter_strike/recoil_claude.gif) | ![](/posts/counter_strike/recoil_gemini.gif) |
| Codex | Claude | Gemini |
| ---------------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------- |
| ![](/posts/counter_strike/recoil_codex.gif?lightbox) | ![](/posts/counter_strike/recoil_claude.gif?lightbox) | ![](/posts/counter_strike/recoil_gemini.gif?lightbox) |

Here both Claude and Codex got the gun working in one shot. Claude’s gone looks like a real darn pistol though.

Expand Down Expand Up @@ -228,9 +228,9 @@ The reason we added this challenge, was to see (a) how they would deal with a ne

All models did great with the UI. Here’s how each looked:

| Codex | Claude | Gemini |
| --------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| ![](/posts/counter_strike/ui_codex.png) | ![](/posts/counter_strike/ui_claude.png) | ![](/posts/counter_strike/ui_gemini.png) |
| Codex | Claude | Gemini |
| ------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------- |
| ![](/posts/counter_strike/ui_codex.png?lightbox) | ![](/posts/counter_strike/ui_claude.png?lightbox) | ![](/posts/counter_strike/ui_gemini.png?lightbox) |

We kind of like Gemini’s UI the most, but they were all pretty cool.

Expand Down
45 changes: 45 additions & 0 deletions client/www/components/Lightbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useState } from 'react';
import { Dialog, DialogPanel } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/solid';

export function Lightbox({
src,
alt,
className,
}: {
src: string;
alt?: string;
className?: string;
}) {
const [open, setOpen] = useState(false);

return (
<>
<img
src={src}
alt={alt}
className={className}
onClick={() => setOpen(true)}
style={{ cursor: 'zoom-in' }}
/>
<Dialog open={open} onClose={() => setOpen(false)}>
<div className="fixed inset-0 z-50 bg-black/80" aria-hidden="true" />
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<DialogPanel className="relative max-h-[90vh] max-w-[90vw]">
<button
onClick={() => setOpen(false)}
className="absolute -right-2 -top-2 rounded-full bg-white p-1 shadow-lg hover:bg-gray-100"
>
<XMarkIcon className="h-5 w-5 text-gray-700" />
</button>
<img
src={src}
alt={alt}
className="max-h-[90vh] max-w-[90vw] rounded shadow-2xl"
/>
</DialogPanel>
</div>
</Dialog>
</>
);
}
9 changes: 9 additions & 0 deletions client/www/pages/essays/[slug].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import remarkMath from 'remark-math';
import 'katex/dist/katex.min.css';

import AgentsEssayDemoSection from '@/components/essays/agents_essay_demo_section';
import { Lightbox } from '@/components/Lightbox';

import ReactMarkdown, { Components } from 'react-markdown';
import { Fence } from '@/components/ui';
Expand Down Expand Up @@ -157,6 +158,14 @@ const Post = ({ post }: { post: Post }) => {
></Fence>
);
},
img(props) {
const { src, alt, ...rest } = props;
if (src?.includes('?lightbox')) {
const cleanSrc = src.replace('?lightbox', '');
return <Lightbox src={cleanSrc} alt={alt} />;
}
return <img src={src} alt={alt} {...rest} />;
},
} as Components
}
>
Expand Down