Update app.py

app.py

@@ -233,28 +233,36 @@ def format_output(plan_text):
     """
     return styled_html
 
+
+
+
+
 # def create_gradio_app():
 #     with gr.Blocks(css="""
 #         .gradio-container {
-#             background: linear-gradient(to right, #fdfbfb, #ebedee);
+#             background: url('https://img.freepik.com/free-ai-image/fantasy-landscape-floating-islands-illustration_355026699.htm#fromView=keyword&page=1&position=3&uuid=c5b6d86a-b71a-47da-9593-ce6dc72d2fbd&query=Fantasy+Background') no-repeat center center fixed;
+#             background-size: cover;
 #             font-family: 'Segoe UI', sans-serif;
 #             padding: 30px;
 #         }
 #         .main-title {
 #             text-align: center;
-#             font-size: 40px;
+#             font-size: 60px;
 #             font-weight: bold;
-#             color: #2c3e50;
-#             margin-bottom: 10px;
+#             font-style: italic;
+#             color: #FAF3E0;
+#             margin-bottom: 20px;
 #         }
 #         .sub-title {
 #             text-align: center;
-#             font-size: 18px;
-#             color: #555;
+#             font-size: 28px;
+#             font-weight: bold;
+#             font-style: italic;
+#             color: #D1C6E1;
 #             margin-bottom: 30px;
 #         }
 #         .gradio-button {
-#             background-color: #4CAF50;
+#             background-color: #A2C2E1;
 #             color: white;
 #             font-size: 18px;
 #             padding: 14px;
@@ -262,7 +270,7 @@ def format_output(plan_text):
 #             margin-top: 20px;
 #         }
 #         .gradio-button:hover {
-#             background-color: #45a049;
+#             background-color: #A8E6CF;
 #         }
 #         #output-box {
 #             height: 600px;
@@ -300,154 +308,74 @@ def format_output(plan_text):
 
 #     demo.launch()
 
-# def create_gradio_app():
-#     with gr.Blocks(css="""
-#         .gradio-container {
-#             background: linear-gradient(to right, #3c3b6e, #121062); 
-#             font-family: 'Cinzel', serif;
-#             padding: 40px;
-#         }
-#         .main-title {
-#             text-align: center;
-#             font-size: 48px;
-#             font-weight: bold;
-#             color: #f1c40f;
-#             margin-bottom: 20px;
-#         }
-#         .sub-title {
-#             text-align: center;
-#             font-size: 20px;
-#             color: #ecf0f1;
-#             margin-bottom: 40px;
-#         }
-#         .gradio-button {
-#             background-color: #8e44ad;
-#             color: white;
-#             font-size: 20px;
-#             padding: 16px;
-#             border-radius: 10px;
-#             margin-top: 30px;
-#             width: 100%;
-#         }
-#         .gradio-button:hover {
-#             background-color: #9b59b6;
-#         }
-#         #output-box {
-#             height: 600px;
-#             overflow-y: scroll;
-#             padding: 20px;
-#             background-color: #ecf0f1;
-#             border: 1px solid #dcdde1;
-#             border-radius: 12px;
-#             box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-#             margin-top: 20px;
-#         }
-#         .gradio-input {
-#             background-color: #ecf0f1;
-#             border-radius: 8px;
-#             padding: 10px;
-#             border: 1px solid #dcdde1;
-#             font-size: 16px;
-#         }
-#         .gradio-input:focus {
-#             outline: none;
-#             border-color: #8e44ad;
-#         }
-#         .gradio-column {
-#             display: flex;
-#             justify-content: center;
-#         }
-#         .loading {
-#             color: #f39c12;
-#             font-size: 18px;
-#             text-align: center;
-#         }
-#     """) as demo:
-#         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>")
-
-#         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...",
-#                     lines=5,
-#                     interactive=True,
-#                     elem_classes="gradio-input"
-#                 )
-
-#                 generate_btn = gr.Button("Generate Outline", elem_classes="gradio-button")
-
-#             with gr.Column(scale=2):
-#                 output_html = gr.HTML(label="AI-Generated Outline", elem_id="output-box")
-
-#         # Add a loading message for user feedback
-#         loading_message = gr.Markdown("<div class='loading'>Generating outline, please wait...</div>", visible=False)
-
-#         # Button logic
-#         def generate_and_format_output(idea):
-#             loading_message.visible = True
-#             result = generate_fantasy_outline(idea)
-#             formatted_result = format_output(result)
-#             loading_message.visible = False
-#             return formatted_result
-
-#         generate_btn.click(
-#             fn=generate_and_format_output,
-#             inputs=[user_idea],
-#             outputs=output_html
-#         )
-
-#         demo.launch()
-
-
 def create_gradio_app():
     with gr.Blocks(css="""
-        .gradio-container {
-            background: url('https://img.freepik.com/free-ai-image/fantasy-landscape-floating-islands-illustration_355026699.htm#fromView=keyword&page=1&position=3&uuid=c5b6d86a-b71a-47da-9593-ce6dc72d2fbd&query=Fantasy+Background') no-repeat center center fixed;
+        body {
+            background-image: url('file=fantasy-landscape-floating-islands-illustration.jpg');  /* Use your image path */
             background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+        }
+        .gradio-container {
             font-family: 'Segoe UI', sans-serif;
             padding: 30px;
+            background: rgba(255, 255, 255, 0.1);  /* Slightly transparent container */
         }
         .main-title {
             text-align: center;
-            font-size: 60px;
+            font-size: 72px !important;  /* Even larger title */
             font-weight: bold;
-            font-style: italic;
-            color: #FAF3E0;
-            margin-bottom: 20px;
+            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;
+            text-transform: uppercase;
+            letter-spacing: 2px;
         }
         .sub-title {
             text-align: center;
-            font-size: 28px;
-            font-weight: bold;
-            font-style: italic;
-            color: #D1C6E1;
+            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;
         }
         .gradio-button {
-            background-color: #A2C2E1;
-            color: white;
-            font-size: 18px;
-            padding: 14px;
-            border-radius: 8px;
-            margin-top: 20px;
+            background-color: #4CAF50 !important;
+            color: white !important;
+            font-size: 18px !important;
+            padding: 16px 24px !important;
+            border-radius: 8px !important;
+            margin-top: 20px !important;
+            border: none !important;
         }
         .gradio-button:hover {
-            background-color: #A8E6CF;
+            background-color: #45a049 !important;
+            transform: scale(1.02);
         }
         #output-box {
             height: 600px;
             overflow-y: scroll;
             padding: 20px;
-            background-color: white;
+            background-color: rgba(255, 255, 255, 0.9);
             border: 1px solid #ccc;
             border-radius: 12px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+        .gradio-interface {
+            max-width: 1200px;
+            margin: 0 auto;
         }
     """) 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='sub-title'>Turn your novel idea into a rich, detailed outline with AI-powered agents</div>")
 
         with gr.Row():
             with gr.Column(scale=1):
@@ -457,13 +385,11 @@ def create_gradio_app():
                     lines=5,
                     interactive=True
                 )
-
                 generate_btn = gr.Button("Generate Outline", elem_classes="gradio-button")
 
             with gr.Column(scale=2):
                 output_html = gr.HTML(label="AI-Generated Outline", elem_id="output-box")
 
-        # Button logic
         generate_btn.click(
             fn=lambda idea: format_output(generate_fantasy_outline(idea)),
             inputs=[user_idea],