refactoring

Anupam-pandey · Feb 24, 2023 · 3ccf1ef · 3ccf1ef
1 parent d7a337a
commit 3ccf1ef
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -12,14 +12,15 @@
 - [x] Let replicate team know to keep it on when I launch
 - [x] Test it out locally + in prod to make sure it works properly
 - [x] Add gradient for roomGPT
-- [ ] Refactor code in general (maybe use react-hook-form)
+- [x] Refactor code in general (maybe use react-hook-form)
 - [ ] Test out other models and tweak params to obtain optimal results
   - [ ] Play around with the scale input - 16 seems good
 - [ ] /restore UI update: Make all dropdowns same length, make sure original image isn't stretches
   - [ ] Email upload.io about changing the background for that thing
   - [ ] Maybe switch to 768 generations
 - [ ] Mobile styles
 - [ ] Some visual indication that it takes ~25s
+- [ ] Test lighthouse scores to make sure I have good performance
 
 ## Todos v1.5
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -31,10 +31,10 @@ const Home: NextPage = () => {
           </span>{" "}
           for everyone.
         </h1>
-        <p className="mx-auto mt-12 max-w-xl text-lg text-gray-500 leading-7">
+        <h2 className="mx-auto mt-12 max-w-xl text-lg text-gray-500 leading-7">
           Take a picture of your room and see how your room looks in different
           themes. 100% free – get inspiration for your dream room today.
-        </p>
+        </h2>
         <Link
           className="bg-blue-600 rounded-xl text-white font-medium px-4 py-3 sm:mt-10 mt-8 hover:bg-blue-500 transition"
           href="/restore"
@@ -45,19 +45,19 @@ const Home: NextPage = () => {
           <div className="flex flex-col space-y-10 mt-4 mb-16">
             <div className="flex sm:space-x-8 sm:flex-row flex-col">
               <div>
-                <h2 className="mb-1 font-medium text-lg">Original Room</h2>
+                <h3 className="mb-1 font-medium text-lg">Original Room</h3>
                 <Image
-                  alt="Original photo of my bro"
+                  alt="Original photo of a room with roomGPT.io"
                   src="/original-pic.jpg"
                   className="w-full h-96 rounded-2xl"
                   width={400}
                   height={400}
                 />
               </div>
               <div className="sm:mt-0 mt-8">
-                <h2 className="mb-1 font-medium text-lg">Generated Room</h2>
+                <h3 className="mb-1 font-medium text-lg">Generated Room</h3>
                 <Image
-                  alt="Restored photo of my bro"
+                  alt="Generated photo of a room with roomGPT.io"
                   width={400}
                   height={400}
                   src="/generated-pic.png"

diff --git a/pages/restore.tsx b/pages/restore.tsx
@@ -22,12 +22,11 @@ const uploader = Uploader({
     ? process.env.NEXT_PUBLIC_UPLOAD_API_KEY
     : "free",
 });
-
 const options = {
   maxFileCount: 1,
   mimeTypes: ["image/jpeg", "image/png", "image/jpg"],
   editor: { images: { crop: false } },
-  styles: { colors: { primary: "#2563EB", active: "#2563EB" } }, // maybe experiment with diff colors
+  styles: { colors: { primary: "#2563EB", active: "#2563EB" } },
 };
 
 const Home: NextPage = () => {
@@ -59,7 +58,7 @@ const Home: NextPage = () => {
   );
 
   async function generatePhoto(fileUrl: string) {
-    await new Promise((resolve) => setTimeout(resolve, 500));
+    await new Promise((resolve) => setTimeout(resolve, 500)); // TODO: See if I even need this
     setLoading(true);
     const res = await fetch("/api/generate", {
       method: "POST",
@@ -82,16 +81,14 @@ const Home: NextPage = () => {
     <div className="flex max-w-6xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
       <Head>
         <title>RoomGPT</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
-
       <Header />
       <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 mt-4 sm:mb-0 mb-8">
         <h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-slate-100 sm:text-6xl mb-5">
           Generate your <span className="text-blue-600">dream</span> room
         </h1>
         <ResizablePanel>
-          <AnimatePresence exitBeforeEnter>
+          <AnimatePresence mode="wait">
             <motion.div className="flex justify-between items-center w-full flex-col mt-4">
               <div className="space-y-4">
                 <div className="flex mt-3 items-center space-x-3">
@@ -152,7 +149,6 @@ const Home: NextPage = () => {
                 sideBySide={sideBySide}
                 setSideBySide={(newVal) => setSideBySide(newVal)}
               />
-              {/* TODO: Think about whether I wanna use the compare slider */}
               {restoredLoaded && sideBySide && (
                 <CompareSlider
                   original={originalPhoto!}