From d7b911ea4c6aa3ce095436fc7c36c021b6e4dbd2 Mon Sep 17 00:00:00 2001 From: Hassan El Mghari Date: Sun, 4 Aug 2024 11:02:15 -0700 Subject: [PATCH] improved prompt --- app/api/generateCode/route.ts | 5 ++++- app/page.tsx | 24 ++++++++++++------------ utils/TogetherAIStream.ts | 2 +- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/app/api/generateCode/route.ts b/app/api/generateCode/route.ts index 6df4bf290..ead76605d 100644 --- a/app/api/generateCode/route.ts +++ b/app/api/generateCode/route.ts @@ -13,13 +13,15 @@ You are an expert frontend React engineer. - Use TypeScript as the language for the React component - Ensure the React component has no required props (or provide default values for all props) and use a default export. - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`). +- Add padding and margin appropriately to make sure the layout and style adheres to design and UI principles +- Use a consistent color palette for all the components that compliment each other - 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 lucide-react@0.263.1 library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`\` - The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \` ...\` - NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED. - Do not make fetch calls to other websites in the code. Just use mock data locally. - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`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. +- Please ONLY return the full React code starting with the imports, nothing else. It's very important for my job that you only return the React code with imports. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`. `; export async function POST(req: Request) { @@ -41,6 +43,7 @@ export async function POST(req: Request) { }), ], stream: true, + temperature: 0.2, }; const stream = await TogetherAIStream(payload); diff --git a/app/page.tsx b/app/page.tsx index 25b878b1a..d371348fa 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -372,23 +372,23 @@ export default function Home() { files={{ "App.tsx": generatedCode, "/public/index.html": ` - - - - - Document - - - -
- -`, + + + + + Document + + + +
+ + `, }} template="react-ts" customSetup={{ dependencies: { "lucide-react": "0.263.1", - recharts: "latest", + recharts: "2.9.0", }, }} /> diff --git a/utils/TogetherAIStream.ts b/utils/TogetherAIStream.ts index 693292540..14e102371 100644 --- a/utils/TogetherAIStream.ts +++ b/utils/TogetherAIStream.ts @@ -14,7 +14,7 @@ export interface ChatGPTMessage { export interface TogetherAIStreamPayload { model: string; messages: ChatGPTMessage[]; - + temperature: number; stream: boolean; }