fixed issue with generations, restored photo UI updates

README.md

@@ -4,21 +4,26 @@
 - [x] Make UI look nicer, maybe dark theme
 - [x] Redo landing page, remove testimonials and either make it dark mode or use another lp
 - [x] Redo README
-- [ ] Fix issue with generations not working
+- [x] Fix issue with generations not working
 - [ ] Add two dropdowns for what kind of room it is + dropdown for themes
 - [ ] Deploy, assign domain, fix meta tags, add OG image with one of the genrated pics
 - [ ] Send it to team/ai channel for feedback + tweet out a screenshot for hype
 - [ ] Let replicate team know to keep it on when I launch
 
 ## Todos v1.5
 
-- [ ] Use new redis db?
+- [ ] Use new redis db for rate limiting
 - [ ] Some visual indication that it takes ~25s
 - [ ] Sharability features - look at Replicate's project for inspo
   - [ ] Add ability to generate shareable links
   - [ ] Also use dynamic OGs to make this work as well
 - [ ] Launch on Twitter
 
+## Todos v2
+
+- [ ] Add a carousel of generated rooms using my image gallery
+- [ ] Add gradient / Try diff color pallets for roomGPT
+
 # [roomGPT.io](https://roomGPT.io)
 
 This project generates new variations of your room based on a photo.

components/CompareSlider.tsx

@@ -13,9 +13,9 @@ export const CompareSlider = ({
   return (
     <ReactCompareSlider
       itemOne={<ReactCompareSliderImage src={original} alt="original photo" />}
-      itemTwo={<ReactCompareSliderImage src={restored} alt="restored photo" />}
+      itemTwo={<ReactCompareSliderImage src={restored} alt="generated photo" />}
       portrait
-      className="flex w-[475px] mt-5"
+      className="flex w-[600px] mt-5 h-96"
     />
   );
 };

components/Footer.tsx

@@ -45,7 +45,7 @@ export default function Footer() {
           </svg>
         </Link>
         <Link
-          href="https://github.com/Nutlope/restorePhotos"
+          href="https://github.com/Nutlope/roomGPT"
           className="group"
           aria-label="TaxPal on GitHub"
         >

components/Header.tsx

@@ -18,7 +18,7 @@ export default function Header() {
       </Link>
       <a
         className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-blue-600 text-white px-5 py-2 text-sm shadow-md hover:bg-blue-500 bg-blue-600 font-medium transition"
-        href="https://github.com/Nutlope/search-youtuber"
+        href="https://github.com/Nutlope/roomGPT"
         target="_blank"
         rel="noopener noreferrer"
       >

components/Toggle.tsx

@@ -19,7 +19,7 @@ export default function Toggle({
       <div className="flex items-center">
         <span
           className={`text-sm mr-3 font-medium ${
-            !sideBySide ? "text-gray-900" : "text-gray-500"
+            !sideBySide ? "text-white" : "text-gray-500"
           }`}
         >
           Side by Side
@@ -28,7 +28,7 @@ export default function Toggle({
           checked={sideBySide}
           onChange={setSideBySide}
           className={classNames(
-            sideBySide ? "bg-black" : "bg-gray-200",
+            sideBySide ? "bg-blue-600" : "bg-gray-200",
             "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none "
           )}
         >
@@ -43,7 +43,7 @@ export default function Toggle({
         <Switch.Label as="span" className="ml-3">
           <span
             className={`text-sm font-medium ${
-              sideBySide ? "text-gray-900" : "text-gray-500"
+              sideBySide ? "text-white" : "text-gray-500"
             } `}
           >
             Compare

pages/restore.tsx

@@ -25,7 +25,7 @@ const options = {
   maxFileCount: 1,
   mimeTypes: ["image/jpeg", "image/png", "image/jpg"],
   editor: { images: { crop: false } },
-  styles: { colors: { primary: "#2563EB" } }, // maybe experiment with diff colors
+  styles: { colors: { primary: "#2563EB", active: "#2563EB" } }, // maybe experiment with diff colors
 };
 
 const Home: NextPage = () => {
@@ -44,6 +44,7 @@ const Home: NextPage = () => {
       onUpdate={(file) => {
         if (file.length !== 0) {
           setPhotoName(file[0].originalFile.originalFileName);
+          // TODO: Make sure these are the image dimensions we want
           setOriginalPhoto(file[0].fileUrl.replace("raw", "thumbnail"));
           generatePhoto(file[0].fileUrl.replace("raw", "thumbnail"));
         }
@@ -93,6 +94,7 @@ const Home: NextPage = () => {
                 sideBySide={sideBySide}
                 setSideBySide={(newVal) => setSideBySide(newVal)}
               />
+              {/* TODO: Think about whether I wanna use the compare slider */}
               {restoredLoaded && sideBySide && (
                 <CompareSlider
                   original={originalPhoto!}
@@ -104,7 +106,7 @@ const Home: NextPage = () => {
                 <Image
                   alt="original photo"
                   src={originalPhoto}
-                  className="rounded-2xl"
+                  className="rounded-2xl w-full h-96"
                   width={475}
                   height={475}
                 />
@@ -116,18 +118,20 @@ const Home: NextPage = () => {
                     <Image
                       alt="original photo"
                       src={originalPhoto}
-                      className="rounded-2xl relative"
+                      className="rounded-2xl relative w-full h-96"
                       width={475}
                       height={475}
                     />
                   </div>
                   <div className="sm:mt-0 mt-8">
-                    <h2 className="mb-1 font-medium text-lg">Restored Photo</h2>
+                    <h2 className="mb-1 font-medium text-lg">
+                      Generated Photo
+                    </h2>
                     <a href={restoredImage} target="_blank" rel="noreferrer">
                       <Image
                         alt="restored photo"
                         src={restoredImage}
-                        className="rounded-2xl relative sm:mt-0 mt-2 cursor-zoom-in"
+                        className="rounded-2xl relative sm:mt-0 mt-2 cursor-zoom-in w-full h-96"
                         width={475}
                         height={475}
                         onLoadingComplete={() => setRestoredLoaded(true)}
@@ -139,7 +143,7 @@ const Home: NextPage = () => {
               {loading && (
                 <button
                   disabled
-                  className="bg-black rounded-full text-white font-medium px-4 pt-2 pb-3 mt-8 hover:bg-black/80 w-40"
+                  className="bg-blue-500 rounded-full text-white font-medium px-4 pt-2 pb-3 mt-8 hover:bg-black/80 w-40"
                 >
                   <span className="pt-4">
                     <LoadingDots color="white" style="large" />
@@ -163,7 +167,7 @@ const Home: NextPage = () => {
                       setRestoredLoaded(false);
                       setError(null);
                     }}
-                    className="bg-black rounded-full text-white font-medium px-4 py-2 mt-8 hover:bg-black/80 transition"
+                    className="bg-blue-500 rounded-full text-white font-medium px-4 py-2 mt-8 hover:bg-black/80 transition"
                   >
                     Upload New Photo
                   </button>
@@ -178,7 +182,7 @@ const Home: NextPage = () => {
                     }}
                     className="bg-white rounded-full text-black border font-medium px-4 py-2 mt-8 hover:bg-gray-100 transition"
                   >
-                    Download Restored Photo
+                    Download Photo
                   </button>
                 )}
               </div>