Skip to content

Tailwind config support #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Tailwind config support #356

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7542ee4
tailwind config support in the frontend
naman1608 Jun 6, 2024
46ed6e8
option to upload tailwind config file in the settings, and passing it…
naman1608 Jun 6, 2024
9714fd2
remove print statements
naman1608 Jun 11, 2024
bad1335
UX change, shifted to left section
naman1608 Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 52 additions & 6 deletions backend/prompts/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,49 @@
Generate code for a SVG that looks exactly like this.
"""

TAILWIND_USER_PROMPT = """
Copy link
Owner

@abi abi Jun 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to modify the system prompt when using Tailwind config I think. The goal with using Tailwind config is to have the generated code use the theme but the system prompt explicitly instructs the AI to replicate exactly the screenshot.

Incorporate the below given Tailwind CSS configuration into your project to customize its appearance. The configuration may have the custom fonts, colours, sizes, spacing which can be used to match the original image. Also add the configuration in the following way:
<script>
tailwind.config = {
// Add the configuration here
}
</script>
Comment on lines +20 to +24
Copy link

@lhz516 lhz516 Jun 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it have presets support?

tailwind.config = {
  presets: [require('xxx')]
}

If not, any future plan for this?


The configuration is:
"""


def assemble_imported_code_prompt(
code: str, stack: Stack, result_image_data_url: Union[str, None] = None
code: str,
stack: Stack,
tailwind_config: Union[str, None],
result_image_data_url: Union[str, None] = None,
) -> List[ChatCompletionMessageParam]:

print('Tailwind config', tailwind_config)

system_content = IMPORTED_CODE_SYSTEM_PROMPTS[stack]

user_content = (
"Here is the code of the app: " + code
if stack != "svg"
else "Here is the code of the SVG: " + code
)
user_content: List[ChatCompletionContentPartParam] = [
{
"type": "text",
"text": (
"Here is the code of the app: " + code
if stack != "svg"
else "Here is the code of the SVG: " + code
),
},
]

if tailwind_config is not None:
user_content.insert(
1,
{
"type": "text",
"text": TAILWIND_USER_PROMPT + tailwind_config,
},
)

return [
{
"role": "system",
Expand All @@ -42,8 +74,12 @@ def assemble_imported_code_prompt(
def assemble_prompt(
image_data_url: str,
stack: Stack,
tailwind_config: Union[str, None],
result_image_data_url: Union[str, None] = None,
) -> List[ChatCompletionMessageParam]:

print('Tailwind config', tailwind_config)

system_content = SYSTEM_PROMPTS[stack]
user_prompt = USER_PROMPT if stack != "svg" else SVG_USER_PROMPT

Expand All @@ -67,6 +103,16 @@ def assemble_prompt(
"image_url": {"url": result_image_data_url, "detail": "high"},
},
)

if tailwind_config is not None:
user_content.insert(
2,
{
"type": "text",
"text": TAILWIND_USER_PROMPT + tailwind_config,
},
)

return [
{
"role": "system",
Expand Down
6 changes: 3 additions & 3 deletions backend/routes/generate_code.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ async def process_chunk(content: str):
if params.get("isImportedFromCode") and params["isImportedFromCode"]:
original_imported_code = params["history"][0]
prompt_messages = assemble_imported_code_prompt(
original_imported_code, valid_stack
original_imported_code, valid_stack, params["tailwindConfig"]
)
for index, text in enumerate(params["history"][1:]):
if index % 2 == 0:
Expand All @@ -185,10 +185,10 @@ async def process_chunk(content: str):
try:
if params.get("resultImage") and params["resultImage"]:
prompt_messages = assemble_prompt(
params["image"], valid_stack, params["resultImage"]
params["image"], valid_stack, params["tailwindConfig"], params["resultImage"],
)
else:
prompt_messages = assemble_prompt(params["image"], valid_stack)
prompt_messages = assemble_prompt(params["image"], valid_stack, params["tailwindConfig"])
except:
await websocket.send_json(
{
Expand Down
38 changes: 19 additions & 19 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ function App() {
codeGenerationModel: CodeGenerationModel.GPT_4O_2024_05_13,
// Only relevant for hosted version
isTermOfServiceAccepted: false,
tailwindConfig: null,
},
"setting"
);
Expand Down Expand Up @@ -403,7 +404,7 @@ function App() {
/>
)}
<div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
<div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
<div className="flex flex-col px-6 overflow-y-auto bg-white border-r border-gray-200 grow gap-y-2 dark:bg-zinc-950 dark:text-white">
<div className="flex items-center justify-between mt-10 mb-2">
<h1 className="text-2xl ">Screenshot to Code</h1>
<SettingsDialog settings={settings} setSettings={setSettings} />
Expand All @@ -426,15 +427,15 @@ function App() {
/>

{showReactWarning && (
<div className="text-sm bg-yellow-200 rounded p-2">
<div className="p-2 text-sm bg-yellow-200 rounded">
Sorry - React is not currently working with GPT-4 Turbo. Please
use GPT-4 Vision or Claude Sonnet. We are working on a fix.
</div>
)}

{showGpt4OMessage && (
<div className="rounded-lg p-2 bg-fuchsia-200">
<p className="text-gray-800 text-sm">
<div className="p-2 rounded-lg bg-fuchsia-200">
<p className="text-sm text-gray-800">
Now supporting GPT-4o. Higher quality and 2x faster. Give it a
try!
</p>
Expand All @@ -446,7 +447,7 @@ function App() {
{IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}

{IS_OPENAI_DOWN && (
<div className="bg-black text-white dark:bg-white dark:text-black p-3 rounded">
<div className="p-3 text-white bg-black rounded dark:bg-white dark:text-black">
OpenAI API is currently down. Try back in 30 minutes or later. We
apologize for the inconvenience.
</div>
Expand All @@ -461,8 +462,7 @@ function App() {
{/* Speed disclaimer for video mode */}
{inputMode === "video" && (
<div
className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700
p-2 text-xs mb-4 mt-1"
className="p-2 mt-1 mb-4 text-xs text-yellow-700 bg-yellow-100 border-l-4 border-yellow-500"
>
Code generation from videos can take 3-4 minutes. We do
multiple passes to get the best result. Please be patient.
Expand Down Expand Up @@ -495,8 +495,8 @@ function App() {
onChange={(e) => setUpdateInstruction(e.target.value)}
value={updateInstruction}
/>
<div className="flex justify-between items-center gap-x-2">
<div className="font-500 text-xs text-slate-700 dark:text-white">
<div className="flex items-center justify-between gap-x-2">
<div className="text-xs font-500 text-slate-700 dark:text-white">
Include screenshot of current version?
</div>
<Switch
Expand All @@ -512,7 +512,7 @@ function App() {
Update
</Button>
</div>
<div className="flex items-center justify-end gap-x-2 mt-2">
<div className="flex items-center justify-end mt-2 gap-x-2">
<Button
onClick={regenerate}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700 regenerate-btn"
Expand All @@ -523,14 +523,14 @@ function App() {
<SelectAndEditModeToggleButton />
)}
</div>
<div className="flex justify-end items-center mt-2">
<div className="flex items-center justify-end mt-2">
<TipLink />
</div>
</div>
)}

{/* Reference image display */}
<div className="flex gap-x-2 mt-2">
<div className="flex mt-2 gap-x-2">
{referenceImages.length > 0 && (
<div className="flex flex-col">
<div
Expand All @@ -555,21 +555,21 @@ function App() {
/>
)}
</div>
<div className="text-gray-400 uppercase text-sm text-center mt-1">
<div className="mt-1 text-sm text-center text-gray-400 uppercase">
{inputMode === "video"
? "Original Video"
: "Original Screenshot"}
</div>
</div>
)}
<div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
<h2 className="text-lg mb-4 border-b border-gray-800">
<div className="hidden px-4 py-2 text-sm bg-gray-400 rounded">
<h2 className="mb-4 text-lg border-b border-gray-800">
Console
</h2>
{executionConsole.map((line, index) => (
<div
key={index}
className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
className="mb-2 font-mono text-gray-600 border-b border-gray-400"
>
{line}
</div>
Expand Down Expand Up @@ -600,7 +600,7 @@ function App() {

<main className="py-2 lg:pl-96">
{appState === AppState.INITIAL && (
<div className="flex flex-col justify-center items-center gap-y-10">
<div className="flex flex-col items-center justify-center gap-y-10">
<ImageUpload setReferenceImages={doCreate} />
<UrlInputSection
doCreate={doCreate}
Expand All @@ -613,7 +613,7 @@ function App() {
{(appState === AppState.CODING || appState === AppState.CODE_READY) && (
<div className="ml-4">
<Tabs defaultValue="desktop">
<div className="flex justify-between mr-8 mb-4">
<div className="flex justify-between mb-4 mr-8">
Copy link
Owner

@abi abi Jun 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert these changes so it's easier to review the PR.

<div className="flex items-center gap-x-2">
{appState === AppState.CODE_READY && (
<>
Expand All @@ -627,7 +627,7 @@ function App() {
<Button
onClick={downloadCode}
variant="secondary"
className="flex items-center gap-x-2 mr-4 dark:text-white dark:bg-gray-700 download-btn"
className="flex items-center mr-4 gap-x-2 dark:text-white dark:bg-gray-700 download-btn"
>
<FaDownload /> Download
</Button>
Expand Down
57 changes: 48 additions & 9 deletions frontend/src/components/SettingsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { ChangeEvent } from "react";
import {
Dialog,
DialogClose,
Expand Down Expand Up @@ -30,12 +30,30 @@ interface Props {

function SettingsDialog({ settings, setSettings }: Props) {
const handleThemeChange = (theme: EditorTheme) => {
setSettings((s) => ({
setSettings((s: Settings) => ({
...s,
editorTheme: theme,
}));
};

const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
const target= event.target as HTMLInputElement;
const file: File = (target.files as FileList)[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const content = e!.target!.result;
// Here you can set the file content to the settings
console.log(content);
setSettings((s: any) => ({
...s,
tailwindConfig: content,
}));
};
reader.readAsText(file);
}
};

return (
<Dialog>
<DialogTrigger>
Expand All @@ -49,7 +67,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div className="flex items-center space-x-2">
<Label htmlFor="image-generation">
<div>DALL-E Placeholder Image Generation</div>
<div className="font-light mt-2 text-xs">
<div className="mt-2 text-xs font-light">
Copy link
Owner

@abi abi Jun 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these linter changes? What are you using?

And please revert it as part of this PR. We can make style changes but it shouldn't be mixed into a PR that adds functionality.

Copy link
Owner

@abi abi Jun 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs to be obvious whether Tailwind config is enabled, and need to provide a way to remove the previously added Tailwind config or toggle it off.

Copy link
Contributor Author

@naman1608 naman1608 Jun 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these linter changes? What are you using?

And please revert it as part of this PR. We can make style changes but it shouldn't be mixed into a PR that adds functionality.

I was using prettier and eslint, but even after disabling all extensions I'm not able to fix this. As soon as I revert to the old order it changes again.

More fun with it but if you want to save money, turn it off.
</div>
</Label>
Expand All @@ -68,7 +86,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div>
<Label htmlFor="openai-api-key">
<div>OpenAI API key</div>
<div className="font-light mt-1 mb-2 text-xs leading-relaxed">
<div className="mt-1 mb-2 text-xs font-light leading-relaxed">
Only stored in your browser. Never stored on servers. Overrides
your .env config.
</div>
Expand All @@ -91,7 +109,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div>
<Label htmlFor="openai-api-key">
<div>OpenAI Base URL (optional)</div>
<div className="font-light mt-2 leading-relaxed">
<div className="mt-2 font-light leading-relaxed">
Replace with a proxy URL if you don't want to use the default.
</div>
</Label>
Expand All @@ -113,7 +131,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div>
<Label htmlFor="anthropic-api-key">
<div>Anthropic API key</div>
<div className="font-light mt-1 text-xs leading-relaxed">
<div className="mt-1 text-xs font-light leading-relaxed">
Only stored in your browser. Never stored on servers. Overrides
your .env config.
</div>
Expand All @@ -137,7 +155,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
<AccordionContent>
<Label htmlFor="screenshot-one-api-key">
<div className="leading-normal font-normal text-xs">
<div className="text-xs font-normal leading-normal">
If you want to use URLs directly instead of taking the
screenshot yourself, add a ScreenshotOne API key.{" "}
<a
Expand Down Expand Up @@ -169,14 +187,14 @@ function SettingsDialog({ settings, setSettings }: Props) {
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Theme Settings</AccordionTrigger>
<AccordionContent className="space-y-4 flex flex-col">
<AccordionContent className="flex flex-col space-y-4">
<div className="flex items-center justify-between">
<Label htmlFor="app-theme">
<div>App Theme</div>
</Label>
<div>
<button
className="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
className="flex px-3 py-1 text-sm transition-colors bg-transparent border rounded-md shadow-sm border-input file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
onClick={() => {
document
.querySelector("div.mt-2")
Expand Down Expand Up @@ -218,6 +236,27 @@ function SettingsDialog({ settings, setSettings }: Props) {
</AccordionContent>
</AccordionItem>
</Accordion>

<Accordion type="single" collapsible className="w-full">
Copy link
Owner

@abi abi Jun 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good for a first version. But from a UX perspective, I think this needs to be moved here at some point. I'll come up with a design for it.

Screenshot 2024-06-10 at 1 10 07 PM

Copy link
Contributor Author

@naman1608 naman1608 Jun 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have attempted shifting it here if this is better

<AccordionItem value="item-1">
<AccordionTrigger>Tailwind Configuration</AccordionTrigger>
<AccordionContent className="flex flex-col space-y-4">
<div className="flex items-center justify-between">
<Label htmlFor="app-theme">
<div>Upload config file</div>
</Label>
<div>
<Input
id="config-file"
type="file"
accept=".js,.ts"
onChange={handleFileChange}
/>
</div>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>

<DialogFooter>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface Settings {
// Only relevant for hosted version
isTermOfServiceAccepted: boolean;
anthropicApiKey: string | null; // Added property for anthropic API key
tailwindConfig: string | null; // Added property for tailwind config
}

export enum AppState {
Expand Down