Spaces:
Running
Running
import { alpine } from "./alpine.mts" | |
import { daisy } from "./daisy.mts" | |
import { dockerfile } from "./docker.mts" | |
import { tsconfig } from "./typescript.mts" | |
export function getReactApp(prompt: string) { | |
const prefix = `# In src/pages/index.tsx:\n\`\`\`` | |
const files = [ | |
{ | |
path: `Dockerfile`, | |
content: dockerfile, | |
}, | |
{ | |
path: "tsconfig.json", | |
content: tsconfig | |
} | |
] | |
const instructions = [ | |
{ | |
role: "system", | |
content: [ | |
`You are a TypeScript developer, expert at crafting NextJS and React applications, using TailwindCSS utility classes. | |
You usually use the following dependencies: | |
\`\`\` | |
"@types/node": "20.4.2", | |
"@types/react": "18.2.15", | |
"@types/react-dom": "18.2.7", | |
"react": "18.2.0", | |
"react-dom": "18.2.0", | |
"typescript": "5.1.6", | |
\`\`\` | |
`, | |
].filter(item => item).join("\n") | |
}, | |
{ | |
role: "user", | |
content: ` | |
You need to write the list of files for a new NextJS 12 application. | |
The app is about: ${prompt}. | |
Think step by step, you got this! | |
Please write, file by file, the source code for a Next 12 application. | |
The app should be buildable when we run this in command line: | |
\`\`\` | |
npm install | |
npm run start | |
\`\`\` | |
The project will be deployed to Hugging Face, so it must include a README.md with the following YAML header: | |
\`\`\` | |
--- | |
license: apache-2.0 | |
title: <APPNAME> | |
sdk: docker | |
emoji: π¨βπ» | |
colorFrom: yellow | |
colorTo: green | |
--- | |
\`\`\` | |
Important rules: | |
- you need to leave: "sdk: docker" as-is, but replace: "<APPNAME>" with an actual name, please. | |
- Don't forget to write a valid package.json file! | |
Remember, the app is about: ${prompt}. | |
Remember: don't forget to define the README.md and the package.json file!`, | |
} | |
] | |
return { prefix, files, instructions } | |
} |