Update app.py

app.py

@@ -233,45 +233,134 @@ 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);
+#             font-family: 'Segoe UI', sans-serif;
+#             padding: 30px;
+#         }
+#         .main-title {
+#             text-align: center;
+#             font-size: 40px;
+#             font-weight: bold;
+#             color: #2c3e50;
+#             margin-bottom: 10px;
+#         }
+#         .sub-title {
+#             text-align: center;
+#             font-size: 18px;
+#             color: #555;
+#             margin-bottom: 30px;
+#         }
+#         .gradio-button {
+#             background-color: #4CAF50;
+#             color: white;
+#             font-size: 18px;
+#             padding: 14px;
+#             border-radius: 8px;
+#             margin-top: 20px;
+#         }
+#         .gradio-button:hover {
+#             background-color: #45a049;
+#         }
+#         #output-box {
+#             height: 600px;
+#             overflow-y: scroll;
+#             padding: 20px;
+#             background-color: white;
+#             border: 1px solid #ccc;
+#             border-radius: 12px;
+#             box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+#         }
+#     """) 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
+#                 )
+
+#                 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],
+#             outputs=output_html
+#         )
+
+#     demo.launch()
+
 def create_gradio_app():
     with gr.Blocks(css="""
         .gradio-container {
-            background: linear-gradient(to right, #fdfbfb, #ebedee);
-            font-family: 'Segoe UI', sans-serif;
-            padding: 30px;
+            background: linear-gradient(to right, #3c3b6e, #121062); 
+            font-family: 'Cinzel', serif;
+            padding: 40px;
         }
         .main-title {
             text-align: center;
-            font-size: 40px;
+            font-size: 48px;
             font-weight: bold;
-            color: #2c3e50;
-            margin-bottom: 10px;
+            color: #f1c40f;
+            margin-bottom: 20px;
         }
         .sub-title {
             text-align: center;
-            font-size: 18px;
-            color: #555;
-            margin-bottom: 30px;
+            font-size: 20px;
+            color: #ecf0f1;
+            margin-bottom: 40px;
         }
         .gradio-button {
-            background-color: #4CAF50;
+            background-color: #8e44ad;
             color: white;
-            font-size: 18px;
-            padding: 14px;
-            border-radius: 8px;
-            margin-top: 20px;
+            font-size: 20px;
+            padding: 16px;
+            border-radius: 10px;
+            margin-top: 30px;
+            width: 100%;
         }
         .gradio-button:hover {
-            background-color: #45a049;
+            background-color: #9b59b6;
         }
         #output-box {
             height: 600px;
             overflow-y: scroll;
             padding: 20px;
-            background-color: white;
-            border: 1px solid #ccc;
+            background-color: #ecf0f1;
+            border: 1px solid #dcdde1;
             border-radius: 12px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            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>")
@@ -283,7 +372,8 @@ def create_gradio_app():
                     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
+                    interactive=True,
+                    elem_classes="gradio-input"
                 )
 
                 generate_btn = gr.Button("Generate Outline", elem_classes="gradio-button")
@@ -291,14 +381,23 @@ def create_gradio_app():
             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=lambda idea: format_output(generate_fantasy_outline(idea)),
+            fn=generate_and_format_output,
             inputs=[user_idea],
             outputs=output_html
         )
 
-    demo.launch()
-
+        demo.launch()
 
-create_gradio_app()
+create_gradio_app()