changed the styling

app.py

@@ -1,13 +1,11 @@
 import gradio as gr
 import numpy as np
 import random
-
-# import spaces #[uncomment to use ZeroGPU]
 from diffusers import DiffusionPipeline
 import torch
 
 device = "cuda" if torch.cuda.is_available() else "cpu"
-model_repo_id = "stabilityai/sdxl-turbo"  # Replace to the model you would like to use
+model_repo_id = "stabilityai/sdxl-turbo"
 
 if torch.cuda.is_available():
     torch_dtype = torch.float16
@@ -20,8 +18,6 @@ pipe = pipe.to(device)
 MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 1024
 
-
-# @spaces.GPU #[uncomment to use ZeroGPU]
 def infer(
     prompt,
     negative_prompt,
@@ -50,7 +46,6 @@ def infer(
 
     return image, seed
 
-
 examples = [
     "Astronaut in a jungle, cold color palette, muted colors, detailed, 8k",
     "An astronaut riding a green horse",
@@ -58,15 +53,54 @@ examples = [
 ]
 
 css = """
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f9;
+    margin: 0;
+    padding: 0;
+}
+
 #col-container {
     margin: 0 auto;
     max-width: 640px;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    color: #333;
+    text-align: center;
+}
+
+button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+.slider {
+    margin: 10px 0;
+}
+
+.gr-image {
+    margin-top: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
 }
 """
 
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(" # PixelPhraser")
+        gr.Markdown("<h1>Pixel Phraser</h1>")
 
         with gr.Row():
             prompt = gr.Text(
@@ -95,6 +129,7 @@ with gr.Blocks(css=css) as demo:
                 maximum=MAX_SEED,
                 step=1,
                 value=0,
+                interactive=True,
             )
 
             randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
@@ -105,7 +140,7 @@ with gr.Blocks(css=css) as demo:
                     minimum=256,
                     maximum=MAX_IMAGE_SIZE,
                     step=32,
-                    value=1024,  # Replace with defaults that work for your model
+                    value=1024,
                 )
 
                 height = gr.Slider(
@@ -113,7 +148,7 @@ with gr.Blocks(css=css) as demo:
                     minimum=256,
                     maximum=MAX_IMAGE_SIZE,
                     step=32,
-                    value=1024,  # Replace with defaults that work for your model
+                    value=1024,
                 )
 
             with gr.Row():
@@ -122,7 +157,7 @@ with gr.Blocks(css=css) as demo:
                     minimum=0.0,
                     maximum=10.0,
                     step=0.1,
-                    value=0.0,  # Replace with defaults that work for your model
+                    value=0.0,
                 )
 
                 num_inference_steps = gr.Slider(
@@ -130,10 +165,11 @@ with gr.Blocks(css=css) as demo:
                     minimum=1,
                     maximum=50,
                     step=1,
-                    value=2,  # Replace with defaults that work for your model
+                    value=2,
                 )
 
         gr.Examples(examples=examples, inputs=[prompt])
+    
     gr.on(
         triggers=[run_button.click, prompt.submit],
         fn=infer,
@@ -151,5 +187,4 @@ with gr.Blocks(css=css) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch()
-## Added a comment
+    demo.launch()

index.html

@@ -5,26 +5,60 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Embedded content from Pixel Phraser">
-    <title>Embedded Pixel Phraser</title>
+    <title>Pixel Phraser - Create Engaging Visual Content</title> <!-- Updated title -->
     <style>
         body {
             margin: 0;
             padding: 0;
             height: 100vh;
             /* Full height */
+            overflow: hidden;
+            /* Prevent scrolling on the body */
+            display: flex;
+            flex-direction: column;
+        }
+
+        header {
+            background-color: #333;
+            /* Change to your desired header color */
+            color: white;
+            /* Text color */
+            padding: 10px 20px;
+            /* Adjust padding as needed */
+            text-align: center;
+            /* Center the text */
+            position: fixed;
+            /* Fix the header to the top */
+            width: 100%;
+            /* Full width */
+            z-index: 10;
+            /* Make sure it appears above other content */
+        }
+
+        .iframe-container {
+            flex: 1;
+            /* Take up remaining space */
+            margin-top: 50px;
+            /* Adjust margin for header height */
         }
 
         iframe {
             width: 100%;
             height: 100%;
-            /* Full height */
             border: none;
+            overflow: hidden;
+            /* Prevent scrolling inside the iframe */
         }
     </style>
 </head>
 
 <body>
-    <iframe src="https://fsadeek-pixelphraser.hf.space" title="Pixel Phraser"></iframe>
+    <header>
+        <h1>Pixel Phraser</h1> <!-- Title of the page -->
+    </header>
+    <div class="iframe-container">
+        <iframe src="https://fsadeek-pixelphraser.hf.space" title="Pixel Phraser" scrolling="no"></iframe>
+    </div>
 </body>
 
 </html>