Skip to content

Commit

Permalink
Breeding makes a url as well
Browse files Browse the repository at this point in the history
  • Loading branch information
SawyerHood committed Jun 12, 2024
1 parent 0c1fd81 commit 7726123
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 9 deletions.
6 changes: 1 addition & 5 deletions app/api/breed/route.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
import { createClient } from "@/ai/client";
import { modelToOpenRouter } from "@/ai/models";
import { system } from "@/ai/prompt";
import PostHogClient from "@/lib/postHogServer";
import { shouldUseAuth } from "@/lib/shouldUseAuth";
import { Settings } from "@/state/settings";
import { currentUser } from "@clerk/nextjs/server";
import { NextRequest } from "next/server";
import { streamHtml } from "openai-html-stream";

import {
ChatCompletionCreateParamsStreaming,
ChatCompletionMessageParam,
} from "openai/resources/index.mjs";
import { ChatCompletionCreateParamsStreaming } from "openai/resources/index.mjs";

const makePrompt = (
p1: string,
Expand Down
90 changes: 90 additions & 0 deletions app/api/breedUrl/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { createClient } from "@/ai/client";
import PostHogClient from "@/lib/postHogServer";
import { shouldUseAuth } from "@/lib/shouldUseAuth";
import { currentUser } from "@clerk/nextjs/server";
import { NextRequest } from "next/server";

import { ChatCompletionCreateParams } from "openai/resources/index.mjs";

const makePrompt = (
p1: string,
p2: string
) => `You will be acting as a website breeder. Your task is to generate a new website name based on two existing websites, as if the new website were the offspring of the two parent sites.
Here are the two URLs you will be working with:
<url1>
${p1}
</url1>
<url2>
${p2}
</url2>
To generate the offspring website name, follow these steps:
1. Analyze each website and identify their key elements, themes, and characteristics. Consider factors such as the website's purpose, target audience, design style, and content focus.
2. Brainstorm potential offspring website names that combine elements from both parent websites. The new name should reflect a blend of the two sites' themes and characteristics.
3. When creating the offspring website name, keep these guidelines in mind:
- The name should be concise and memorable.
- It should maintain a coherent theme that relates to both parent websites.
- The name should hint at the potential purpose or content of the hypothetical offspring website.
- Feel free to use wordplay, puns, or creative combinations of words from the parent website names or their key elements.
4. After brainstorming and refining your ideas, select the best offspring website name.
Please output the final offspring website name inside <offspring_url> tags.
`;

export async function POST(req: NextRequest) {
const { urls } = await req.json();

if (shouldUseAuth) {
const user = await currentUser();
const posthog = PostHogClient();

if (!user) {
return new Response(`<h1>Unauthorized</h1><p>Log in to continue</p>`, {
status: 401,
headers: { "Content-Type": "text/html" },
});
}

posthog.capture({
distinctId: user.id,
event: "breed url",
});
}

const offspringUrl = await genResponse({ urls });

return new Response(JSON.stringify(offspringUrl), {
headers: {
"Content-Type": "application/json",
},
status: 200,
});
}

async function genResponse({ urls }: { urls: string[] }): Promise<string> {
const params: ChatCompletionCreateParams = {
messages: [
{
role: "user",
content: makePrompt(urls[0], urls[1]),
},
],

model: "claude-3-haiku-20240307",
max_tokens: 4000,
};

const client = createClient(process.env.ANTHROPIC_API_KEY!);

const content = (await client.chat.completions.create(params)).choices[0]
.message.content!;
const offspringUrlMatch = content.match(
/<offspring_url>(.*?)<\/offspring_url>/
);
return offspringUrlMatch ? offspringUrlMatch[1] : "";
}
25 changes: 21 additions & 4 deletions components/Canvas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import dynamic from "next/dynamic";
import { BrowserShapeUtil } from "@/components/BrowserShape";
import { useEditor } from "tldraw";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { BottomBar } from "@/components/BottomBar";
import { BrowserTool } from "@/tools/BrowserTool";
import { SignOutButton } from "@clerk/nextjs";
Expand All @@ -13,6 +13,7 @@ import { shouldUseAuth } from "@/lib/shouldUseAuth";
import { Settings } from "@/components/Settings";
import { PromptShapeTool } from "@/tools/PromptShapeTool";
import { breed } from "@/lib/breed";
import { ReloadIcon } from "@radix-ui/react-icons";

const Tldraw = dynamic(async () => (await import("tldraw")).Tldraw, {
ssr: false,
Expand Down Expand Up @@ -57,9 +58,7 @@ function UI() {
style={{ zIndex: 1000 }}
>
<Settings />
<Button size="sm" onClick={() => breed(editor)}>
Breed
</Button>
<BreedButton />
{shouldUseAuth && (
<SignOutButton>
<Button size="sm">Sign Out</Button>
Expand All @@ -75,3 +74,21 @@ function UI() {
</>
);
}

function BreedButton() {
const editor = useEditor();
const [isBreeding, setIsBreeding] = useState(false);
return (
<Button
onClick={async () => {
setIsBreeding(true);
await breed(editor);
setIsBreeding(false);
}}
disabled={isBreeding}
size="sm"
>
{isBreeding ? <ReloadIcon className="h-4 w-4 animate-spin" /> : "Breed"}
</Button>
);
}
12 changes: 12 additions & 0 deletions lib/breed.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,25 @@ export async function breed(editor: Editor) {
return;
}

const urls = selectedShapes.map((s) => s.props.url);
const response = await fetch(`/api/breedUrl`, {
method: "POST",
body: JSON.stringify({ urls }),
headers: {
"Content-Type": "application/json",
},
});

const offspringUrl = await response.json();

const id = makeShapeID();
editor.createShape<BrowserShape>({
...getPointUnder(boundingBox),
type: "browser",
id,
props: {
isBred: true,
url: offspringUrl,
},
});

Expand Down

0 comments on commit 7726123

Please sign in to comment.