Update app.py

app.py

@@ -156,35 +156,39 @@ with gr.Blocks(css="""
     .gr-form-label {
         color: #ff0000;
     }
+    #markdown-content {
+        text-align: center;
+    }
+    #markdown-content h1, #markdown-content h2, #markdown-content h3 {
+        color: #ff0000;
+    }
 """) as blocks:
     gr.Markdown(
         """
-        <div style="text-align: center;">
-        
         <img src="https://cdn-uploads.huggingface.co/production/uploads/64740cf7485a7c8e1bd51ac9/_VyYxp5qE_nRZ_LJqBxmL.webp" alt="Yamamoto Logo" style="max-width: 200px; margin-bottom: 20px;">
         
-        <h1 style="text-align: center; color: #ff0000;">🎨 Yamamoto QR Code Art Generator</h1>
+        # 🎨 Yamamoto QR Code Art Generator
 
-        <h2 style="text-align: center; color: #ff0000;">Transform Your QR Codes into Brand Masterpieces</h2>
+        ## Transform Your QR Codes into Brand Masterpieces
 
         Welcome to Yamamoto's innovative QR Code Art Generator! This cutting-edge tool empowers our creative team to craft 
         visually stunning, on-brand QR codes that perfectly blend functionality with artistic expression.
 
-        <h2 style="text-align: center; color: #ff0000;">🚀 How It Works:</h2>
+        ## 🚀 How It Works:
 
         1. **Enter Your QR Code Content**: Start by inputting the URL or text for your QR code.
         2. **Craft Your Prompt**: Describe the artistic style or theme you envision for your QR code.
         3. **Fine-tune with Advanced Settings**: Adjust parameters to perfect your creation (see tips below).
         4. **Generate and Iterate**: Click 'Run' to create your art, then refine as needed.
 
-        <h2 style="text-align: center; color: #ff0000;">🌟 Tips for Spectacular Results:</h2>
+        ## 🌟 Tips for Spectacular Results:
 
         - **Artistic Freedom**: Set between 0.8 and 0.95 for a balance of creativity and scannability.
         - **QR Code Visibility**: Aim for 0.6 to 2.0 to ensure your code is both artistic and functional.
         - **Prompt Crafting**: Use vivid, specific descriptions that align with your brand identity.
         - **Experimentation**: Don't hesitate to try different settings and prompts to find your perfect style!
 
-        <h2 style="text-align: center; color: #ff0000;">🎭 Prompt Ideas to Spark Your Creativity:</h2>
+        ## 🎭 Prompt Ideas to Spark Your Creativity:
 
         - "A serene Japanese garden with cherry blossoms and a koi pond"
         - "A futuristic cityscape with neon lights and flying cars"
@@ -193,8 +197,6 @@ with gr.Blocks(css="""
 
         Remember, the magic lies in the details of your prompt and the fine-tuning of your settings. 
         Happy creating!
-        
-        </div>
         """,
         elem_id="markdown-content"
     )