Update app.py

app.py

@@ -308,141 +308,6 @@ 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
 
@@ -452,7 +317,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"
+IMAGE_PATH = "fantasy-landscape-floating-islands-illustration.jpg"  # or "C:/path/to/your/background.jpg"
 
 # Get base64 encoded image
 try:
@@ -469,94 +334,89 @@ CSS = f"""
     background-attachment: fixed !important;
     min-height: 100vh;
     padding: 30px;
-    font-family: 'Palatino Linotype', 'Book Antiqua', serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }}
 
-/* ENHANCED MAIN TITLE */
 .main-title {{
     text-align: center;
-    font-size: 84px !important;  /* Increased from 72px */
-    font-weight: 900;
-    color: #f8f4e6 !important;  /* Parchment color */
+    font-size: 72px !important;
+    font-weight: 800;
+    color: #ffffff !important;
     margin-bottom: 15px;
-    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-shadow: 3px 3px 12px #000000;
+    padding: 30px;
+    background: rgba(20, 20, 40, 0.7);
+    border-radius: 20px;
     text-transform: uppercase;
-    letter-spacing: 4px;  /* More spacing between letters */
-    border: 3px solid #d4af37;  /* Gold border */
-    margin-bottom: 30px;
+    letter-spacing: 3px;
+    border: 2px solid rgba(255,255,255,0.2);
 }}
 
-/* ENHANCED SUBTITLE */
 .sub-title {{
     text-align: center;
-    font-size: 28px !important;  /* Increased from 22px */
-    color: #f0e6d2 !important;  /* Light parchment */
+    font-size: 22px;
+    color: #ffffff;
     margin-bottom: 40px;
-    text-shadow: 
-        2px 2px 4px #000000,
-        -1px -1px 0 #2a2a2a;
-    background: rgba(60, 40, 40, 0.7);  /* Darker background */
-    padding: 20px;
-    border-radius: 15px;
+    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;
-    font-style: italic;
-    border-left: 4px solid #d4af37;  /* Gold accent */
-    border-right: 4px solid #d4af37;
 }}
 
 .gradio-button {{
-    background: linear-gradient(to bottom, #d4af37, #b8860b) !important;
-    color: #2a2a2a !important;
-    font-size: 20px !important;
-    padding: 18px 28px !important;
-    border-radius: 10px !important;
+    background-color: #4CAF50 !important;
+    color: white !important;
+    font-size: 18px !important;
+    padding: 16px 24px !important;
+    border-radius: 8px !important;
     margin-top: 20px !important;
-    border: 2px solid #f8f4e6 !important;
-    font-weight: bold;
+    border: none !important;
     transition: all 0.3s ease !important;
 }}
 
 .gradio-button:hover {{
-    background: linear-gradient(to bottom, #f8d030, #d4af37) !important;
+    background-color: #3e8e41 !important;
     transform: scale(1.05) !important;
-    box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
 }}
 
 #output-box {{
     height: 600px;
     overflow-y: scroll;
-    padding: 30px;
-    background-color: rgba(248, 244, 230, 0.95) !important;  /* Parchment background */
-    border: 2px solid #d4af37 !important;
+    padding: 25px;
+    background-color: rgba(255, 255, 255, 0.92) !important;
+    border: 1px solid #cccccc !important;
     border-radius: 15px !important;
-    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
-    color: #333333;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
 }}
 
 .textbox {{
-    background: rgba(255,255,255,0.95) !important;
-    border: 1px solid #d4af37 !important;
+    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 outline  # Now handled in generate_fantasy_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>""")
+        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):
@@ -570,15 +430,155 @@ def create_gradio_app():
 
             with gr.Column(scale=2):
                 output_html = gr.HTML(label="Your Generated Outline", elem_id="output-box")
-        output = gr.HTML(label="Your Outline") 
+
         generate_btn.click(
-            fn=lambda idea: generate_fantasy_outline(idea),
+            fn=lambda idea: format_output(generate_fantasy_outline(idea)),
             inputs=[user_idea],
-            outputs=output
+            outputs=output_html
         )
 
     return demo
 
 if __name__ == "__main__":
     app = create_gradio_app()
-    app.launch()
+    app.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"
+
+# # 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: 'Palatino Linotype', 'Book Antiqua', serif;
+# }}
+
+# /* ENHANCED MAIN TITLE */
+# .main-title {{
+#     text-align: center;
+#     font-size: 84px !important;  /* Increased from 72px */
+#     font-weight: 900;
+#     color: #f8f4e6 !important;  /* Parchment color */
+#     margin-bottom: 15px;
+#     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: 4px;  /* More spacing between letters */
+#     border: 3px solid #d4af37;  /* Gold border */
+#     margin-bottom: 30px;
+# }}
+
+# /* ENHANCED SUBTITLE */
+# .sub-title {{
+#     text-align: center;
+#     font-size: 28px !important;  /* Increased from 22px */
+#     color: #f0e6d2 !important;  /* Light parchment */
+#     margin-bottom: 40px;
+#     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: 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: 2px solid #f8f4e6 !important;
+#     font-weight: bold;
+#     transition: all 0.3s ease !important;
+# }}
+
+# .gradio-button:hover {{
+#     background: linear-gradient(to bottom, #f8d030, #d4af37) !important;
+#     transform: scale(1.05) !important;
+#     box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
+# }}
+
+# #output-box {{
+#     height: 600px;
+#     overflow-y: scroll;
+#     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 8px 25px rgba(0,0,0,0.2) !important;
+#     color: #333333;
+# }}
+
+# .textbox {{
+#     background: rgba(255,255,255,0.95) !important;
+#     border: 1px solid #d4af37 !important;
+# }}
+# """
+
+
+# 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>""")
+#         # 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")
+#         output = gr.HTML(label="Your Outline") 
+#         generate_btn.click(
+#             fn=lambda idea: generate_fantasy_outline(idea),
+#             inputs=[user_idea],
+#             outputs=output
+#         )
+
+#     return demo
+
+# if __name__ == "__main__":
+#     app = create_gradio_app()
+#     app.launch()