diff --git a/backend/prompts.py b/backend/prompts.py index 554f62f..f83480f 100644 --- a/backend/prompts.py +++ b/backend/prompts.py @@ -124,9 +124,20 @@ Generate code for a web page that looks exactly like this. def assemble_imported_code_prompt( - code: str, result_image_data_url: Union[str, None] = None + code: str, stack: str, result_image_data_url: Union[str, None] = None ) -> List[ChatCompletionMessageParam]: system_content = IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT + if stack == "html_tailwind": + system_content = IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT + elif stack == "react_tailwind": + system_content = REACT_TAILWIND_SYSTEM_PROMPT + elif stack == "bootstrap": + system_content = BOOTSTRAP_SYSTEM_PROMPT + elif stack == "ionic_tailwind": + system_content = IONIC_TAILWIND_SYSTEM_PROMPT + else: + raise Exception("Code config is not one of available options") + return [ { "role": "system", diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py index eae9b98..d34f861 100644 --- a/backend/routes/generate_code.py +++ b/backend/routes/generate_code.py @@ -130,7 +130,9 @@ async def stream_code(websocket: WebSocket): # If this generation started off with imported code, we need to assemble the prompt differently if params.get("isImportedFromCode") and params["isImportedFromCode"]: original_imported_code = params["history"][0] - prompt_messages = assemble_imported_code_prompt(original_imported_code) + prompt_messages = assemble_imported_code_prompt( + original_imported_code, generated_code_config + ) for index, text in enumerate(params["history"][1:]): if index % 2 == 0: message: ChatCompletionMessageParam = { @@ -182,6 +184,8 @@ async def stream_code(websocket: WebSocket): image_cache = create_alt_url_mapping(params["history"][-2]) + pprint_prompt(prompt_messages) + if SHOULD_MOCK_AI_RESPONSE: completion = await mock_completion(process_chunk) else: diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 03ec3ba..6305ba7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -262,9 +262,20 @@ function App() { })); }; - function importFromCode(code: string) { - setAppState(AppState.CODE_READY); + // TODO: Rename everything to "stack" instead of "config" + function setStack(stack: GeneratedCodeConfig) { + setSettings((prev) => ({ + ...prev, + generatedCodeConfig: stack, + })); + } + + function importFromCode(code: string, stack: GeneratedCodeConfig) { + setIsImportedFromCode(true); + + // Set up this project setGeneratedCode(code); + setStack(stack); setAppHistory([ { type: "code_create", @@ -274,7 +285,8 @@ function App() { }, ]); setCurrentVersion(0); - setIsImportedFromCode(true); + + setAppState(AppState.CODE_READY); } return ( @@ -295,12 +307,7 @@ function App() { - setSettings((prev) => ({ - ...prev, - generatedCodeConfig: config, - })) - } + setGeneratedCodeConfig={(config) => setStack(config)} shouldDisableUpdates={ appState === AppState.CODING || appState === AppState.CODE_READY } diff --git a/frontend/src/components/ImportCodeSection.tsx b/frontend/src/components/ImportCodeSection.tsx index 0199413..04b2b5a 100644 --- a/frontend/src/components/ImportCodeSection.tsx +++ b/frontend/src/components/ImportCodeSection.tsx @@ -10,13 +10,33 @@ import { DialogTrigger, } from "./ui/dialog"; import { Textarea } from "./ui/textarea"; +import OutputSettingsSection from "./OutputSettingsSection"; +import { GeneratedCodeConfig } from "../types"; +import toast from "react-hot-toast"; interface Props { - importFromCode: (code: string) => void; + importFromCode: (code: string, stack: GeneratedCodeConfig) => void; } function ImportCodeSection({ importFromCode }: Props) { const [code, setCode] = useState(""); + const [stack, setStack] = useState( + undefined + ); + + const doImport = () => { + if (code === "") { + toast.error("Please paste in some code"); + return; + } + + if (stack === undefined) { + toast.error("Please select your stack"); + return; + } + + importFromCode(code, stack); + }; return ( @@ -36,8 +56,17 @@ function ImportCodeSection({ importFromCode }: Props) { className="w-full h-64" /> + + setStack(config) + } + label="Stack:" + shouldDisableUpdates={false} + /> + - diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx index 69d1b0a..fc116ea 100644 --- a/frontend/src/components/OutputSettingsSection.tsx +++ b/frontend/src/components/OutputSettingsSection.tsx @@ -43,20 +43,22 @@ function generateDisplayComponent(config: GeneratedCodeConfig) { } interface Props { - generatedCodeConfig: GeneratedCodeConfig; + generatedCodeConfig: GeneratedCodeConfig | undefined; setGeneratedCodeConfig: (config: GeneratedCodeConfig) => void; + label?: string; shouldDisableUpdates?: boolean; } function OutputSettingsSection({ generatedCodeConfig, setGeneratedCodeConfig, + label = "Generating:", shouldDisableUpdates = false, }: Props) { return (
- Generating: + {label}