From 23854762391c368dc8fb727287440971e0619f5c Mon Sep 17 00:00:00 2001
From: robertchandler <robert@heydaily.co>
Date: Sun, 24 Mar 2024 10:56:32 -0700
Subject: [PATCH] Tidy even more

---
 ifs.ai/app/start/page.tsx | 85 +++++++++++++++++++++------------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/ifs.ai/app/start/page.tsx b/ifs.ai/app/start/page.tsx
index 451661f..fca1134 100644
--- a/ifs.ai/app/start/page.tsx
+++ b/ifs.ai/app/start/page.tsx
@@ -90,52 +90,57 @@ export default function Page() {
           <p className="text-stone-400">Connect with your inner selves.</p>
         </div>
         {!imagesCaptured && (
-          <Webcam
-            ref={webcamRef}
-            audio={false}
-            height={800}
-            screenshotFormat="image/jpeg"
-            width={800}
-            className="rounded-xl"
-            videoConstraints={{ width: 800, height: 800, facingMode: "user" }}
-          />
+          <>
+            <Webcam
+              ref={webcamRef}
+              audio={false}
+              height={800}
+              screenshotFormat="image/jpeg"
+              width={800}
+              className="rounded-xl"
+              videoConstraints={{ width: 800, height: 800, facingMode: "user" }}
+            />
+            <Button
+              disabled={imagesCaptured}
+              onClick={() => {
+                if (!webcamRef.current) {
+                  toast({ title: "Not ready", description: "Please grant permissions and wait" });
+                } else {
+                  const ss = webcamRef.current.getScreenshot();
+                  if (!ss) {
+                    toast({ title: "Couldn't capture image", variant: "destructive" });
+                  } else {
+                    // toast({
+                    //   title: "Captured",
+                    //   description: <img src={ss} alt="The captured selfie image from the webcam" />,
+                    // });
+                    startUpload([dataURLtoFile(ss, "selfie.jpg")]);
+                    setImagesCaptured(true);
+                  }
+                }
+              }}
+            >
+              {imagesCaptured ? "Looking inside you..." : "Start 🤳"}
+            </Button>
+          </>
         )}
-        <Button
-          disabled={imagesCaptured}
-          onClick={() => {
-            if (!webcamRef.current) {
-              toast({ title: "Not ready", description: "Please grant permissions and wait" });
-            } else {
-              const ss = webcamRef.current.getScreenshot();
-              if (!ss) {
-                toast({ title: "Couldn't capture image", variant: "destructive" });
-              } else {
-                // toast({
-                //   title: "Captured",
-                //   description: <img src={ss} alt="The captured selfie image from the webcam" />,
-                // });
-                startUpload([dataURLtoFile(ss, "selfie.jpg")]);
-                setImagesCaptured(true);
-              }
-            }
-          }}
-        >
-          {imagesCaptured ? "Looking inside you..." : "Start 🤳"}
-        </Button>
-        {imagesCaptured && !rantProcessed && (
+
+        {imagesCaptured && (
           <div className="flex w-full max-w-xl flex-col items-center space-y-4">
             <div>
               <p>Now tell me about your problems...</p>
             </div>
-            <SpeechToText
-              onTranscript={(transcript) => setRant(transcript)}
-              onEnd={() => {
-                window.localStorage.setItem(getRantKeyForId(id), rant);
-                setRantProcessed(true);
-              }}
-            />
+            {!rantProcessed && (
+              <SpeechToText
+                onTranscript={(transcript) => setRant(transcript)}
+                onEnd={() => {
+                  window.localStorage.setItem(getRantKeyForId(id), rant);
+                  setRantProcessed(true);
+                }}
+              />
+            )}
             <div className="italic text-stone-400">{rant}</div>
-            {imageUrls.firefighter && <p className="text-xs text-stone-400">Images generated</p>}
+            <p className="text-xs text-stone-400">{imageUrls.firefighter ? "Images generated" : "Generating images"}</p>
           </div>
         )}
       </div>