Skip to content

Commit

Permalink
added support for charts & icons + improved system prompt
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nutlope
Nutlope committed Aug 3, 2024
1 parent d048b2d commit 77ea588
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 161 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@

- [ ] New route for updateCode that only sends the latest generated code + the modify request
- [ ] Make it generate more consistent apps by only importing from a component library like shadcn
- [ ] Try to resolve the npm libraries issue, look into how Claude Artifacts and others deal with it
- [ ] Look into a way to export the app or deploy it in a single click
- [ ] Fix bug where if a user edits the code, then does a change, it doesn't use the edited code
- [ ] Save previous versions so people can go back and forth between the generated ones
- [ ] Apply code diffs directly instead of asking the model to generate the code from scratch'
- [ ] Add the ability to upload things like a screenshot to it for it to start from that
- [ ] Try multiple shot prompting in weaker models
- [ ] Support different kinds of apps (not just React) & scripts with Python for example
169 changes: 9 additions & 160 deletions app/api/generateCode/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,161 +16,9 @@ You are an expert frontend React engineer.
- Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. \`import { useState } from "react"\`
- The [email protected] library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
- The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`
- The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`.
- NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
- Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
- Please ONLY return the React code, nothing else. It's very important for my job that you only return the React code. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`. Just return the React code by itself.
Here are some examples:
<example_1>
<user>
Create a dashboard
</user>
<assistant>
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Users, UserCheck, Scroll, AlertTriangle } from 'lucide-react';
const Dashboard = () => {
const attendees = [
{ name: 'Lord Capulet', role: 'Head of the Capulet family' },
{ name: 'Lord Montague', role: 'Head of the Montague family' },
{ name: 'Prince Escalus', role: 'Ruler of Verona' },
{ name: 'Friar Laurence', role: 'Religious advisor' }
];
const agendaItems = [
'Address ongoing feud',
'Discuss secret marriage',
'Develop peace plan',
'Address tragic deaths'
];
const keyOutcomes = [
{ title: 'Truce Agreed', icon: UserCheck, progress: 100 },
{ title: 'Reconciliation Efforts', icon: Users, progress: 60 },
{ title: 'Peace Plan Implementation', icon: Scroll, progress: 40 },
{ title: 'Remaining Tensions', icon: AlertTriangle, progress: 30 }
];
return (
<div className="p-4 max-w-4xl mx-auto">
<h1 className="text-3xl font-bold mb-6">Verona Peace Dashboard</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<Card>
<CardHeader>
<CardTitle>Attendees</CardTitle>
</CardHeader>
<CardContent>
<ul>
{attendees.map((attendee, index) => (
<li key={index} className="mb-2">
<strong>{attendee.name}</strong>: {attendee.role}
</li>
))}
</ul>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Agenda Items</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc pl-5">
{agendaItems.map((item, index) => (
<li key={index} className="mb-2">{item}</li>
))}
</ul>
</CardContent>
</Card>
</div>
<h2 className="text-2xl font-semibold mb-4">Key Outcomes</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{keyOutcomes.map((outcome, index) => (
<Card key={index}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium">
{outcome.title}
</CardTitle>
<outcome.icon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<Progress value={outcome.progress} className="h-2" />
<p className="text-xs text-muted-foreground pt-2">
{outcome.progress}% complete
</p>
</CardContent>
</Card>
))}
</div>
</div>
);
};
export default Dashboard;
</assistant>
</example_1>
<example_2>
<user>
Create a login form
</user>
<assistant>
import React, { useState } from 'react';
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
const LoginForm = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// Here you would typically handle the login logic
console.log('Login attempted with:', { username, password });
};
return (
<form onSubmit={handleSubmit} className="space-y-4 w-full max-w-sm mx-auto">
<div className="space-y-2">
<Label htmlFor="username">Username</Label>
<Input
id="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<Button type="submit" className="w-full">
Log In
</Button>
</form>
);
};
export default LoginForm;
</assistant>
</example_2>
`;

export async function POST(req: Request) {
Expand All @@ -183,14 +31,15 @@ export async function POST(req: Request) {
role: "system",
content: systemPrompt,
},
...messages,
// .map((message: any) => {
// if (message.role === "user") {
// message.content +=
// "\nPlease ONLY return code, NO backticks or language names.";
// }
// return message;
// }),
...(model === "meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo"
? messages
: messages.map((message: any) => {
if (message.role === "user") {
message.content +=
"\nPlease ONLY return code, NO backticks or language names.";
}
return message;
})),
],
stream: true,
};
Expand Down

0 comments on commit 77ea588

Please sign in to comment.