Skip to content

Commit 6c24054

Browse files
NutlopeNutlope
committed
v1 working
0 parents  commit 6c24054

34 files changed

Lines changed: 3971 additions & 0 deletions

‎.gitignore‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
.env
31+
32+
# vercel
33+
.vercel
34+
35+
# typescript
36+
*.tsbuildinfo
37+
next-env.d.ts

‎.prettierrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["prettier-plugin-tailwindcss"]
3+
}

‎README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Llama Coder
2+
3+
This project is a simple Claude Artifacts clone using Llama 3.1 405b.
4+
5+
## How it works
6+
7+
Takes the user's query, adds a system promt, and sends it to Llama 405b to code. After doing some parsing, it displays it to Sandpack to be viewed as an interactive code editor.
8+
9+
## TODOs - hassan
10+
11+
- [ ] Finish styling main hero – mostly GitHub at top right
12+
- [ ] Make README nice
13+
- [ ] Edit the footer to look nicer
14+
- [ ] Add extra input (for followups) w/ messages support
15+
- [ ] Add the plus-sign for new chat + github icon
16+
17+
## Future TODOs
18+
19+
- [ ] Fix "Open Sandbox" button by making it open with the tailwindcss external resource

‎app/api/generateCode/route.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {
2+
TogetherAIStream,
3+
TogetherAIStreamPayload,
4+
} from "@/utils/TogetherAIStream";
5+
import { z } from "zod";
6+
7+
export async function POST(req: Request) {
8+
let json = await req.json();
9+
10+
let { prompt, model } = z
11+
.object({
12+
prompt: z.string(),
13+
model: z.string(),
14+
})
15+
.parse(json);
16+
17+
const payload: TogetherAIStreamPayload = {
18+
model,
19+
messages: [
20+
{
21+
role: "system",
22+
content:
23+
"You are an expert frontend React engineer. Create a React component for whatever the user is asking you to create and make sure it can run by itself by using a default export. Use TypeScript as the language. Use Tailwind classes for styling, but do not use arbitrary values (e.g. h-[600px]). Please make sure the React app is interactive and functional by creating state when needed. ONLY return the React code, nothing else. Its very important for my job that you only return the React code. I will tip you $1 million if you only return code. DO NOT START WITH ```typescript or ```javascript or ```tsx or ```. Just the code.",
24+
},
25+
{
26+
role: "user",
27+
content:
28+
prompt +
29+
"\n Please ONLY return code, NO backticks or language names.",
30+
},
31+
],
32+
stream: true,
33+
};
34+
const stream = await TogetherAIStream(payload);
35+
36+
return new Response(stream, {
37+
headers: new Headers({
38+
"Cache-Control": "no-cache",
39+
}),
40+
});
41+
}

‎app/favicon.ico‎

25.3 KB
Binary file not shown.

‎app/globals.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@font-face {
6+
font-family: "Aeonik";
7+
src: url("/Aeonik/Aeonik-Regular.ttf");
8+
font-weight: 400;
9+
font-style: normal;
10+
}
11+
12+
@font-face {
13+
font-family: "Aeonik";
14+
src: url("/Aeonik/Aeonik-Medium.ttf");
15+
font-weight: 500;
16+
font-style: normal;
17+
}
18+
19+
@font-face {
20+
font-family: "Aeonik";
21+
src: url("/Aeonik/Aeonik-Bold.ttf");
22+
font-weight: 700;
23+
font-style: normal;
24+
}

‎app/layout.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import type { Metadata } from "next";
2+
import "./globals.css";
3+
import Image from "next/image";
4+
import bgImg from "@/public/halo.png";
5+
import PlausibleProvider from "next-plausible";
6+
7+
let title = "Llama Coder – AI Code Generator";
8+
let description = "Generate your next app with Llama 3.1 405B";
9+
let url = "https://llamacoder.io/";
10+
let ogimage = "https://llamacoder.io/og-image.png";
11+
let sitename = "llamacoder.io";
12+
13+
export const metadata: Metadata = {
14+
metadataBase: new URL(url),
15+
title,
16+
description,
17+
icons: {
18+
icon: "/favicon.ico",
19+
},
20+
openGraph: {
21+
images: [ogimage],
22+
title,
23+
description,
24+
url: url,
25+
siteName: sitename,
26+
locale: "en_US",
27+
type: "website",
28+
},
29+
twitter: {
30+
card: "summary_large_image",
31+
images: [ogimage],
32+
title,
33+
description,
34+
},
35+
};
36+
37+
export default function RootLayout({
38+
children,
39+
}: Readonly<{
40+
children: React.ReactNode;
41+
}>) {
42+
return (
43+
<html lang="en">
44+
<head>
45+
<PlausibleProvider domain="llamacoder.io" />
46+
</head>
47+
<body className="bg-brand antialiased">
48+
<div className="absolute inset-x-0 flex justify-center">
49+
<Image
50+
src={bgImg}
51+
alt=""
52+
className="w-full max-w-[1200px] mix-blend-screen"
53+
priority
54+
/>
55+
</div>
56+
<div className="isolate">{children}</div>
57+
</body>
58+
</html>
59+
);
60+
}

0 commit comments

Comments
 (0)