option to upload tailwind config file in the settings, and passing it to the prompt

backend/prompts/__init__.py

@@ -15,17 +15,49 @@ SVG_USER_PROMPT = """
 Generate code for a SVG that looks exactly like this.
 """
 
+TAILWIND_USER_PROMPT = """
+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>
+
+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 = (
+    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",
@@ -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
 
@@ -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",

backend/routes/generate_code.py

@@ -166,7 +166,7 @@ async def stream_code(websocket: WebSocket):
     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:
@@ -185,10 +185,10 @@ async def stream_code(websocket: WebSocket):
         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(
                 {

frontend/src/components/SettingsDialog.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import {
   Dialog,
   DialogClose,
@@ -36,7 +36,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
     }));
   };
 
-  const handleFileChange = (event: Event) => {
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
     const target= event.target as HTMLInputElement;
     const file: File = (target.files as FileList)[0];
     if (file) {