update instructions

app.py

@@ -25,15 +25,13 @@ from datetime import datetime
 
 from climategan_wrapper import ClimateGAN
 
-HTMLS = [
+TEXTS = [
     dedent(
         """
         <p>
             Climate change does not impact everyone equally.
             This Space shows the effects of the climate emergency,
             "one address at a time".
-        </p>
-        <p>
             Visit the original experience at
             <a href="https://thisclimatedoesnotexist.com/">
                 ThisClimateDoesNotExist.com
@@ -47,27 +45,14 @@ HTMLS = [
         </p>
         <br>
         <p>
-            This is <strong>not</strong> an exercise in climate prediction,
-            rather an exercise of empathy, to put yourself in other's shoes,
+            This is <strong>NOT</strong> an exercise in climate prediction,
+            rather an exercise of empathy, to put yourself in others' shoes,
             as if Climate Change came crushing on your doorstep.
         </p>
         """
     ),
     dedent(
         """
-        <br><br><br><br>
-        <p style='text-align: center'>
-            Visit
-            <a href='https://thisclimatedoesnotexist.com/'>
-                ThisClimateDoesNotExist.com
-            </a>
-            for more information
-            &nbsp;&nbsp;|&nbsp;&nbsp;
-            Original
-            <a href='https://github.com/cc-ai/climategan'>
-                ClimateGAN GitHub Repo
-            </a>
-        </p>
         <br>
         <p>
             After you have selected an image and started the inference you
@@ -82,8 +67,17 @@ HTMLS = [
             select 'Both' painters, you will see a comparison
         </p>
         <br>
-        <br>
-        <p>
+        <p style='text-align: center'>
+            Visit
+            <a href='https://thisclimatedoesnotexist.com/'>
+                ThisClimateDoesNotExist.com</a>
+            &nbsp;for more information
+            &nbsp;&nbsp;|&nbsp;&nbsp;
+            Original
+            <a href='https://github.com/cc-ai/climategan'>
+                ClimateGAN GitHub Repo
+            </a>
+            &nbsp;&nbsp;|&nbsp;&nbsp;
             Read the original
             <a
                 href='https://openreview.net/forum?id=EZNOb_uNpJk'
@@ -93,6 +87,25 @@ HTMLS = [
         </p>
         """
     ),
+    dedent(
+        """
+        ## How to use this Space
+
+        1. Enter an address or upload a Street View image
+        2. Select the type of Painter you'd like to use for the flood renderings
+        3. Click on the "See for yourself!" button
+        4. Wait for the inference to complete, typically around 30 seconds
+            (plus queue time)
+        5. Enjoy the results!
+
+            1. The prompt for Stable Diffusion is `An HD picture of a street with
+            dirty water after a heavy flood`
+            2. Pay attention to potential "inventions" by Stable Diffusion's in-painting
+            3. The "restricted to masked area" SD output is the result of:
+            `y = mask * flooded + (1-mask) * input`
+
+        """
+    ),
 ]
 CSS = dedent(
     """
@@ -102,6 +115,13 @@ CSS = dedent(
     }
     strong {
         color: #c34318;
+        font-weight: bolder;
+    }
+    #how-to-use-md li {
+        margin: 0.1em;
+    }
+    #how-to-use-md li p {
+        margin: 0.1em;
     }
     """
 )
@@ -224,11 +244,12 @@ if __name__ == "__main__":
         with Row():
             with Column():
                 Markdown("# ClimateGAN: Visualize Climate Change")
-                HTML(HTMLS[0])
+                HTML(TEXTS[0])
+                HTML(TEXTS[1])
             with Column():
-                HTML(HTMLS[1])
+                Markdown(TEXTS[2], elem_id="how-to-use-md")
         with Row():
-            Markdown("## Inputs")
+            HTML("<hr><br><h2 style='font-size: 1.5rem;'>Choose Inputs</h2>")
         with Row():
             with Column():
                 if api_key:
@@ -284,4 +305,4 @@ if __name__ == "__main__":
         if api_key:
             radio.change(toggle, inputs=[radio], outputs=[address, im_inp, btn])
 
-    app.launch()
+    app.launch(show_api=False)