Update app.py

app.py

@@ -309,40 +309,52 @@ def format_output(plan_text):
 #     demo.launch()
 
 def create_gradio_app():
+    # First add the image as a hidden component to make it available
+    background_image = gr.Image("your_image_path.jpg", visible=False, elem_id="bg-image")
+    
     with gr.Blocks(css="""
-        body {
-            background-image: url('file=fantasy-landscape-floating-islands-illustration.jpg');  /* Use your image path */
-            background-size: cover;
-            background-position: center;
-            background-attachment: fixed;
+        :root {
+            --bg-opacity: 0.9;
+        }
+        #bg-image {
+            display: none;  /* Hide the actual image element */
         }
         .gradio-container {
-            font-family: 'Segoe UI', sans-serif;
+            background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
+                        url('file=your_image_path.jpg') !important;
+            background-size: cover !important;
+            background-position: center !important;
+            background-attachment: fixed !important;
+            min-height: 100vh;
             padding: 30px;
-            background: rgba(255, 255, 255, 0.1);  /* Slightly transparent container */
+            font-family: 'Segoe UI', sans-serif;
         }
         .main-title {
             text-align: center;
-            font-size: 72px !important;  /* Even larger title */
-            font-weight: bold;
+            font-size: 72px !important;
+            font-weight: 800;
             color: #ffffff;
-            margin-bottom: 10px;
-            text-shadow: 3px 3px 10px rgba(0,0,0,0.9);
-            padding: 25px;
-            background: rgba(44, 62, 80, 0.7);
-            border-radius: 15px;
+            margin-bottom: 15px;
+            text-shadow: 3px 3px 12px #000000;
+            padding: 30px;
+            background: rgba(20, 20, 40, 0.7);
+            border-radius: 20px;
             text-transform: uppercase;
-            letter-spacing: 2px;
+            letter-spacing: 3px;
+            border: 2px solid rgba(255,255,255,0.2);
         }
         .sub-title {
             text-align: center;
             font-size: 22px;
             color: #ffffff;
-            margin-bottom: 30px;
-            text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
-            background: rgba(0, 0, 0, 0.5);
-            padding: 10px;
-            border-radius: 8px;
+            margin-bottom: 40px;
+            text-shadow: 2px 2px 6px #000000;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 15px;
+            border-radius: 10px;
+            max-width: 80%;
+            margin-left: auto;
+            margin-right: auto;
         }
         .gradio-button {
             background-color: #4CAF50 !important;
@@ -352,43 +364,45 @@ def create_gradio_app():
             border-radius: 8px !important;
             margin-top: 20px !important;
             border: none !important;
+            transition: all 0.3s ease !important;
         }
         .gradio-button:hover {
-            background-color: #45a049 !important;
-            transform: scale(1.02);
+            background-color: #3e8e41 !important;
+            transform: scale(1.05) !important;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
         }
         #output-box {
             height: 600px;
             overflow-y: scroll;
-            padding: 20px;
-            background-color: rgba(255, 255, 255, 0.9);
-            border: 1px solid #ccc;
-            border-radius: 12px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            padding: 25px;
+            background-color: rgba(255, 255, 255, 0.92);
+            border: 1px solid #cccccc;
+            border-radius: 15px;
+            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+        }
+        .gradio-row {
+            margin-bottom: 30px;
         }
-        .gradio-interface {
-            max-width: 1200px;
-            margin: 0 auto;
+        .gradio-column {
+            padding: 15px;
         }
     """) as demo:
-        # Add hidden image component to serve the background
-        gr.Image("your_image_path.jpg", visible=False, elem_id="bg-image")
         
-        gr.Markdown("<div class='main-title'>Fantasy Novel Outline Generator</div>")
-        gr.Markdown("<div class='sub-title'>Turn your novel idea into a rich, detailed outline with AI-powered agents</div>")
+        gr.Markdown("""<div class='main-title'>FANTASY NOVEL OUTLINE GENERATOR</div>""")
+        gr.Markdown("""<div class='sub-title'>Transform your creative vision into a fully-developed fantasy world</div>""")
 
         with gr.Row():
             with gr.Column(scale=1):
                 user_idea = gr.Textbox(
-                    label="Enter Your Fantasy Novel Idea",
-                    placeholder="e.g., A young orphan discovers they're heir to a ruined magical kingdom...",
+                    label="Your Fantasy Novel Concept",
+                    placeholder="A hidden prophecy... a forgotten magic... an unlikely hero...",
                     lines=5,
                     interactive=True
                 )
-                generate_btn = gr.Button("Generate Outline", elem_classes="gradio-button")
+                generate_btn = gr.Button("Craft My Outline", elem_classes="gradio-button")
 
             with gr.Column(scale=2):
-                output_html = gr.HTML(label="AI-Generated Outline", elem_id="output-box")
+                output_html = gr.HTML(label="Your Generated Outline", elem_id="output-box")
 
         generate_btn.click(
             fn=lambda idea: format_output(generate_fantasy_outline(idea)),
@@ -398,4 +412,4 @@ def create_gradio_app():
 
     demo.launch()
 
-create_gradio_app()
+create_gradio_app()