From 46ed6e886ba32884db2de91297cb932dc0de789b Mon Sep 17 00:00:00 2001
From: Naman Dhingra <1608naman@gmail.com>
Date: Fri, 7 Jun 2024 03:57:06 +0530
Subject: [PATCH] option to upload tailwind config file in the settings, and
 passing it to the prompt

---
 backend/prompts/__init__.py                | 58 +++++++++++++++++++---
 backend/routes/generate_code.py            |  6 +--
 frontend/src/components/SettingsDialog.tsx |  4 +-
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/backend/prompts/__init__.py b/backend/prompts/__init__.py
index 4f2e329..e43150d 100644
--- a/backend/prompts/__init__.py
+++ b/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 = (
-        "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",
@@ -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",
diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py
index 379042e..254d584 100644
--- a/backend/routes/generate_code.py
+++ b/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(
                 {
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 211191b..0c3989c 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/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) {