feat/improv: Design consistency, additional user guides and recreate brand new html

app/api/toHtml/route.ts

@@ -4,7 +4,7 @@ const systemPrompt = `You are an expert tailwind developer. A user will provide
 if you need to insert an image, use placehold.co to create a placeholder image. Respond only with the html file.`;
 
 export async function POST(request: Request) {
-  const { image } = await request.json();
+  const { image, currentHtml, additionalInstructions } = await request.json();
   const body: GPT4VCompletionRequest = {
     model: "gpt-4-vision-preview",
     max_tokens: 4096,
@@ -15,7 +15,17 @@ export async function POST(request: Request) {
       },
       {
         role: "user",
-        content: [
+        content: currentHtml ? [
+          {
+            type: "image_url",
+            image_url: image,
+          },
+          `Update this html content, based on the updated image given. 
+          Don't make drastic changes from the given html, based on the image. 
+          And do not change anything arbitrarily if not changed in the given image explicitly. Current HTML: ${currentHtml}`,
+          additionalInstructions ? `This is the user's additional instructions on how to convert the image to html. 
+          Give EXTRA ATTENTION to this also. User: ${additionalInstructions}` : '',
+        ] : [
           {
             type: "image_url",
             image_url: image,
@@ -70,9 +80,9 @@ export type GPT4VCompletionRequest = {
   frequency_penalty?: number | undefined;
   presence_penalty?: number | undefined;
   logit_bias?:
-    | {
-        [x: string]: number;
-      }
-    | undefined;
+  | {
+    [x: string]: number;
+  }
+  | undefined;
   stop?: (string[] | string) | undefined;
 };

app/page.tsx

@@ -54,8 +54,39 @@ export default function Home() {
 function ExportButton({ setHtml }: { setHtml: (html: string) => void }) {
   const editor = useEditor();
   const [loading, setLoading] = useState(false);
+  const [freshHtml, setFreshHtml] = useState(false);
+  const [additionalInstructions, setAdditionalInstructions] = useState("");
   // A tailwind styled button that is pinned to the bottom right of the screen
-  return (
+  return (<>
+    <textarea
+      placeholder="Write any additional instruction to your UI developer assistant. More instructions makes the task more clear..."
+      className="fixed bottom-8 right-4 bg-white-500 hover:bg-grey-700 text-black font-bold p-4 w-96 h-1/4 border-dotted border-2 border-blue-500 rounded"
+      style={{ zIndex: 1000 }}
+      value={additionalInstructions}
+      onChange={(e) => setAdditionalInstructions(e.target.value)}
+    />
+
+    <div className="fixed bottom-4 right-4 bg-slate-200 text-black font-bold py-0 px-4 rounded-lg shadow-inner"
+      style={{ zIndex: 1000, width: '24rem', padding: '5px', boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.06)' }}>
+      <div className="flex flex-col items-start space-y-1">
+        <div className="flex items-center">
+          <input
+            type="checkbox"
+            id="freshHtmlCheckbox"
+            className="custom-checkbox"
+            checked={freshHtml}
+            onChange={(e) => {
+              setFreshHtml(e.target.checked ? true : false);
+            }}
+          />
+          <label htmlFor="freshHtmlCheckbox" className="ml-2 text-xs">Recreate Html</label>
+        </div>
+        <span className="text-xs text-gray-600">
+          Clear the current version and get a fresh Html
+        </span>
+      </div>
+    </div>
+
     <button
       onClick={async (e) => {
         setLoading(true);
@@ -78,7 +109,11 @@ function ExportButton({ setHtml }: { setHtml: (html: string) => void }) {
             headers: {
               "Content-Type": "application/json",
             },
-            body: JSON.stringify({ image: dataUrl }),
+            body: JSON.stringify({
+              image: dataUrl,
+              currentHtml: freshHtml ? '' : window.localStorage.getItem("currentHtml"),
+              additionalInstructions
+            }),
           });
 
           const json = await resp.json();
@@ -88,6 +123,8 @@ function ExportButton({ setHtml }: { setHtml: (html: string) => void }) {
             return;
           }
 
+          setAdditionalInstructions("");
+          setFreshHtml(false);
           const message = json.choices[0].message.content;
           const start = message.indexOf("<!DOCTYPE html>");
           const end = message.indexOf("</html>");
@@ -102,11 +139,12 @@ function ExportButton({ setHtml }: { setHtml: (html: string) => void }) {
     >
       {loading ? (
         <div className="flex justify-center items-center ">
-          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
         </div>
       ) : (
         "Make Real"
       )}
     </button>
+  </>
   );
 }

components/PreviewModal.tsx

@@ -26,6 +26,8 @@ export function PreviewModal({
     return null;
   }
 
+  window?.localStorage.setItem("currentHtml", html);
+
   return (
     <div
       onClick={(e) => {