Update app.py

app.py

@@ -300,67 +300,147 @@ 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: linear-gradient(to right, #3c3b6e, #121062); 
-            font-family: 'Cinzel', serif;
-            padding: 40px;
+            background: url('https://www.freepik.com/free-photos-vectors/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: 48px;
+            font-size: 50px;
             font-weight: bold;
-            color: #f1c40f;
+            color: #FAF3E0;
             margin-bottom: 20px;
         }
         .sub-title {
             text-align: center;
-            font-size: 20px;
-            color: #ecf0f1;
-            margin-bottom: 40px;
+            font-size: 24px;
+            color: #D1C6E1;
+            margin-bottom: 30px;
         }
         .gradio-button {
-            background-color: #8e44ad;
+            background-color: #A2C2E1;
             color: white;
-            font-size: 20px;
-            padding: 16px;
-            border-radius: 10px;
-            margin-top: 30px;
-            width: 100%;
+            font-size: 18px;
+            padding: 14px;
+            border-radius: 8px;
+            margin-top: 20px;
         }
         .gradio-button:hover {
-            background-color: #9b59b6;
+            background-color: #A8E6CF;
         }
         #output-box {
             height: 600px;
             overflow-y: scroll;
             padding: 20px;
-            background-color: #ecf0f1;
-            border: 1px solid #dcdde1;
+            background-color: white;
+            border: 1px solid #ccc;
             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;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
         }
     """) as demo:
         gr.Markdown("<div class='main-title'>Fantasy Novel Outline Generator</div>")
@@ -372,8 +452,7 @@ 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,
-                    elem_classes="gradio-input"
+                    interactive=True
                 )
 
                 generate_btn = gr.Button("Generate Outline", elem_classes="gradio-button")
@@ -381,23 +460,13 @@ 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=generate_and_format_output,
+            fn=lambda idea: format_output(generate_fantasy_outline(idea)),
             inputs=[user_idea],
             outputs=output_html
         )
 
-        demo.launch()
+    demo.launch()
 
 create_gradio_app()