Update app.py

app.py

@@ -308,6 +308,141 @@ def format_output(plan_text):
 
 #     demo.launch()
 
+# import gradio as gr
+# import base64
+
+# # Function to encode the image
+# def get_base64_image(image_path):
+#     with open(image_path, "rb") as img_file:
+#         return base64.b64encode(img_file.read()).decode('utf-8')
+
+# # Your image path - REPLACE THIS WITH YOUR ACTUAL IMAGE PATH
+# IMAGE_PATH = "fantasy-landscape-floating-islands-illustration.jpg"  # or "C:/path/to/your/background.jpg"
+
+# # Get base64 encoded image
+# try:
+#     encoded_image = get_base64_image(IMAGE_PATH)
+# except FileNotFoundError:
+#     print(f"Error: Image not found at {IMAGE_PATH}")
+#     encoded_image = ""
+
+# CSS = f"""
+# .gradio-container {{
+#     background: url('data:image/jpeg;base64,{encoded_image}') !important;
+#     background-size: cover !important;
+#     background-position: center !important;
+#     background-attachment: fixed !important;
+#     min-height: 100vh;
+#     padding: 30px;
+#     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+# }}
+
+# .main-title {{
+#     text-align: center;
+#     font-size: 72px !important;
+#     font-weight: 800;
+#     color: #ffffff !important;
+#     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: 3px;
+#     border: 2px solid rgba(255,255,255,0.2);
+# }}
+
+# .sub-title {{
+#     text-align: center;
+#     font-size: 22px;
+#     color: #ffffff;
+#     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;
+#     color: white !important;
+#     font-size: 18px !important;
+#     padding: 16px 24px !important;
+#     border-radius: 8px !important;
+#     margin-top: 20px !important;
+#     border: none !important;
+#     transition: all 0.3s ease !important;
+# }}
+
+# .gradio-button:hover {{
+#     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: 25px;
+#     background-color: rgba(255, 255, 255, 0.92) !important;
+#     border: 1px solid #cccccc !important;
+#     border-radius: 15px !important;
+#     box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
+# }}
+
+# .textbox {{
+#     background: rgba(255,255,255,0.9) !important;
+# }}
+# """
+
+# def generate_fantasy_outline(idea):
+#     # Replace this with your actual generation logic
+#     return f"<h2>Outline for:</h2><h3>{idea}</h3><p>1. Introduction to the magical world...</p>"
+
+# def format_output(outline):
+#     return f"""
+#     <div style="
+#         background: rgba(255,255,255,0.9);
+#         padding: 20px;
+#         border-radius: 10px;
+#     ">
+#         {outline}
+#     </div>
+#     """
+
+# def create_gradio_app():
+#     with gr.Blocks(css=CSS) as demo:
+#         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="Your Fantasy Novel Concept",
+#                     placeholder="A hidden prophecy... a forgotten magic... an unlikely hero...",
+#                     lines=5,
+#                     interactive=True
+#                 )
+#                 generate_btn = gr.Button("Craft My Outline", elem_classes="gradio-button")
+
+#             with gr.Column(scale=2):
+#                 output_html = gr.HTML(label="Your Generated Outline", elem_id="output-box")
+
+#         generate_btn.click(
+#             fn=lambda idea: format_output(generate_fantasy_outline(idea)),
+#             inputs=[user_idea],
+#             outputs=output_html
+#         )
+
+#     return demo
+
+# if __name__ == "__main__":
+#     app = create_gradio_app()
+#     app.launch()
+
 import gradio as gr
 import base64
 
@@ -317,7 +452,7 @@ def get_base64_image(image_path):
         return base64.b64encode(img_file.read()).decode('utf-8')
 
 # Your image path - REPLACE THIS WITH YOUR ACTUAL IMAGE PATH
-IMAGE_PATH = "fantasy-landscape-floating-islands-illustration.jpg"  # or "C:/path/to/your/background.jpg"
+IMAGE_PATH = "fantasy-landscape-floating-islands-illustration.jpg"
 
 # Get base64 encoded image
 try:
@@ -334,85 +469,101 @@ CSS = f"""
     background-attachment: fixed !important;
     min-height: 100vh;
     padding: 30px;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Palatino Linotype', 'Book Antiqua', serif;
 }}
 
+/* ENHANCED MAIN TITLE */
 .main-title {{
     text-align: center;
-    font-size: 72px !important;
-    font-weight: 800;
-    color: #ffffff !important;
+    font-size: 84px !important;  /* Increased from 72px */
+    font-weight: 900;
+    color: #f8f4e6 !important;  /* Parchment color */
     margin-bottom: 15px;
-    text-shadow: 3px 3px 12px #000000;
-    padding: 30px;
-    background: rgba(20, 20, 40, 0.7);
-    border-radius: 20px;
+    text-shadow: 
+        3px 3px 0 #2a2a2a,  /* Dark shadow for depth */
+        -1px -1px 0 #2a2a2a,
+        1px -1px 0 #2a2a2a,
+        -1px 1px 0 #2a2a2a,
+        1px 1px 0 #2a2a2a;
+    padding: 40px;
+    background: rgba(40, 30, 30, 0.65);  /* Deep wine background */
+    border-radius: 25px;
     text-transform: uppercase;
-    letter-spacing: 3px;
-    border: 2px solid rgba(255,255,255,0.2);
+    letter-spacing: 4px;  /* More spacing between letters */
+    border: 3px solid #d4af37;  /* Gold border */
+    margin-bottom: 30px;
 }}
 
+/* ENHANCED SUBTITLE */
 .sub-title {{
     text-align: center;
-    font-size: 22px;
-    color: #ffffff;
+    font-size: 28px !important;  /* Increased from 22px */
+    color: #f0e6d2 !important;  /* Light parchment */
     margin-bottom: 40px;
-    text-shadow: 2px 2px 6px #000000;
-    background: rgba(0, 0, 0, 0.6);
-    padding: 15px;
-    border-radius: 10px;
+    text-shadow: 
+        2px 2px 4px #000000,
+        -1px -1px 0 #2a2a2a;
+    background: rgba(60, 40, 40, 0.7);  /* Darker background */
+    padding: 20px;
+    border-radius: 15px;
     max-width: 80%;
     margin-left: auto;
     margin-right: auto;
+    font-style: italic;
+    border-left: 4px solid #d4af37;  /* Gold accent */
+    border-right: 4px solid #d4af37;
 }}
 
 .gradio-button {{
-    background-color: #4CAF50 !important;
-    color: white !important;
-    font-size: 18px !important;
-    padding: 16px 24px !important;
-    border-radius: 8px !important;
+    background: linear-gradient(to bottom, #d4af37, #b8860b) !important;
+    color: #2a2a2a !important;
+    font-size: 20px !important;
+    padding: 18px 28px !important;
+    border-radius: 10px !important;
     margin-top: 20px !important;
-    border: none !important;
+    border: 2px solid #f8f4e6 !important;
+    font-weight: bold;
     transition: all 0.3s ease !important;
 }}
 
 .gradio-button:hover {{
-    background-color: #3e8e41 !important;
+    background: linear-gradient(to bottom, #f8d030, #d4af37) !important;
     transform: scale(1.05) !important;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+    box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
 }}
 
 #output-box {{
     height: 600px;
     overflow-y: scroll;
-    padding: 25px;
-    background-color: rgba(255, 255, 255, 0.92) !important;
-    border: 1px solid #cccccc !important;
+    padding: 30px;
+    background-color: rgba(248, 244, 230, 0.95) !important;  /* Parchment background */
+    border: 2px solid #d4af37 !important;
     border-radius: 15px !important;
-    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
+    color: #333333;
 }}
 
 .textbox {{
-    background: rgba(255,255,255,0.9) !important;
+    background: rgba(255,255,255,0.95) !important;
+    border: 1px solid #d4af37 !important;
 }}
 """
 
 def generate_fantasy_outline(idea):
     # Replace this with your actual generation logic
-    return f"<h2>Outline for:</h2><h3>{idea}</h3><p>1. Introduction to the magical world...</p>"
-
-def format_output(outline):
     return f"""
-    <div style="
-        background: rgba(255,255,255,0.9);
-        padding: 20px;
-        border-radius: 10px;
-    ">
-        {outline}
-    </div>
+    <h2 style='color: #5e2c04; border-bottom: 2px solid #d4af37; padding-bottom: 8px;'>Outline for:</h2>
+    <h3 style='color: #8b4513;'>{idea}</h3>
+    <ol style='color: #333333; font-size: 17px; line-height: 1.6;'>
+        <li><strong>Prologue:</strong> The ancient prophecy revealed...</li>
+        <li><strong>Chapter 1:</strong> The ordinary world disrupted...</li>
+        <li><strong>Chapter 2:</strong> First encounter with magic...</li>
+    </ol>
     """
 
+def format_output(outline):
+    return outline  # Now handled in generate_fantasy_outline
+
 def create_gradio_app():
     with gr.Blocks(css=CSS) as demo:
         gr.Markdown("""<div class='main-title'>FANTASY NOVEL OUTLINE GENERATOR</div>""")
@@ -432,7 +583,7 @@ def create_gradio_app():
                 output_html = gr.HTML(label="Your Generated Outline", elem_id="output-box")
 
         generate_btn.click(
-            fn=lambda idea: format_output(generate_fantasy_outline(idea)),
+            fn=lambda idea: generate_fantasy_outline(idea),
             inputs=[user_idea],
             outputs=output_html
         )