Update app.py

app.py

@@ -230,6 +230,67 @@ SPACE_ID = os.getenv('SPACE_ID')
 SHARED_UI_WARNING = f'''## You can duplicate and use it with a gpu with at least 24GB, or clone this repository to run on your own machine.
 <center><a class="duplicate-button" style="display:inline-block" target="_blank" href="https://huggingface.co/spaces/{SPACE_ID}?duplicate=true"><img style="margin-top:0;margin-bottom:0" src="https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&logoWidth=14" alt="Duplicate Space"></a></center>
 '''
+# Simple instructions (original)
+simple_instructions = """ User Guide: We released sliderspace directions for a few concepts. To test them: <br> 
+- Choose the concept from the `SliderSpace trained on` menu. (eg. "Wizard") 
+- Select one of the many directions we discovered for that concept from the `Discovered Directions` menu. (eg. "Direction 3") 
+- Choose a slider weight between -1 to 1 (recommended). But feel free to explore the scale (eg. +1.5) 
+- Finally, write a prompt for the concept you chose. (eg. "picture of a wizard fighting a magical war") 
+- Click Generate and discover what the direction is !! """
+
+# Detailed instructions
+detailed_instructions = """# SliderSpace User Guide
+
+## Overview
+SliderSpace allows you to explore diffusion model knowledge's concept directions. This tool helps you discover how different "directions" in the latent space can influence image generation for specific concepts.
+
+## Detailed Navigation Instructions
+
+### Step 1: Select Your Concept
+- Locate the dropdown menu labeled `SliderSpace trained on`
+- Click to expand the menu and view all available concept categories
+- Select the concept you want to explore (e.g., "Wizard", "Animal", "Landscape")
+- Each concept has been pre-trained with multiple discoverable directions
+
+### Step 2: Choose a Direction to Explore
+- Find the `Discovered Directions` dropdown menu
+- Click to view all available directions for your selected concept
+- Select one of the numbered directions (e.g., "Direction 3")
+- Each direction represents a different aspect or variation of the concept
+- Try multiple directions to see how they affect your results
+
+### Step 3: Adjust the Slider Weight
+- Locate the slider control for weight adjustment
+- Move the slider to set a value between -1 and 1 (this is the recommended range)
+- Negative values (-1 to 0) will move away from the direction
+- Positive values (0 to 1) will enhance the direction
+- For experimental results, you can try more extreme values (e.g., +1.5 or -1.5)
+- The weight determines how strongly the direction influences your generated image
+
+### Step 4: Write Your Prompt
+- Enter a text prompt in the provided text field
+- Make sure your prompt relates to the concept you selected in Step 1
+- Be specific about what you want to see (e.g., "picture of a wizard fighting a magical war")
+- The prompt works together with the direction and weight to generate the final image
+
+### Step 5: Generate and Analyze
+- Click the `Generate` button to create your image
+- Observe how the selected direction affects the output
+- Compare results with different directions and weights to understand each direction's effect
+- Use these observations to discover what each direction represents in the latent space
+
+## Tips for Best Results
+- Keep notes on which directions create specific effects
+- Try the same prompt with different directions to see varied results
+- Experiment with subtle weight changes for fine-tuning
+- Some directions work better with specific types of prompts
+
+## Troubleshooting
+- If results aren't as expected, try adjusting the weight to a more moderate value
+- Ensure your prompt clearly relates to the selected concept
+- Try multiple directions if you're not seeing the effect you want
+"""
+
 
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
@@ -240,14 +301,17 @@ with gr.Blocks(css=css) as demo:
         💻 [GitHub Code](https://github.com/rohitgandikota/sliderspace)
         """)
 
-        gr.Markdown("""
-        User Guide: We released sliderspace directions for a few concepts. To test them: <br>
-        1. Choose the concept from the `SliderSpace trained on` menu. (eg. "Wizard")
-        2. Select one of the many directions we discovered for that concept from the `Discovered Directions` menu. (eg. "Direction 3")
-        3. Choose a slider weight between -1 to 1 (recommended). But feel free to explore the scale (eg. +1.5)
-        4. Finally, write a prompt for the concept you chose. (eg. "picture of a wizard fighting a magical war")
-        5. Click Generate and discover what the direction is !! 
-        """)
+        with gr.Row():
+            instructions_md = gr.Markdown(simple_instructions)
+            toggle_btn = gr.Button("Show Detailed Instructions")
+            
+            # Toggle button to switch between simple and detailed instructions
+            toggle_btn.click(
+                fn=toggle_instructions,
+                inputs=[gr.State(False)],
+                outputs=[instructions_md, toggle_btn],
+                _js="(x) => !x"  # Toggle the state
+            )
 
         with gr.Row():
             prompt = gr.Text(