Update app.py

app.py

@@ -308,86 +308,113 @@ 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():
-    # First add the image as a hidden component to make it available
-    background_image = gr.Image("your_image_path.jpg", visible=False, elem_id="bg-image")
-    
-    with gr.Blocks(css="""
-        :root {
-            --bg-opacity: 0.9;
-        }
-        #bg-image {
-            display: none;  /* Hide the actual image element */
-        }
-        .gradio-container {
-            background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
-                        url('file=fantasy-landscape-floating-islands-illustration.jpg') !important;
-            background-size: cover !important;
-            background-position: center !important;
-            background-attachment: fixed !important;
-            min-height: 100vh;
-            padding: 30px;
-            font-family: 'Segoe UI', sans-serif;
-        }
-        .main-title {
-            text-align: center;
-            font-size: 72px !important;
-            font-weight: 800;
-            color: #ffffff;
-            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);
-            border: 1px solid #cccccc;
-            border-radius: 15px;
-            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
-        }
-        .gradio-row {
-            margin-bottom: 30px;
-        }
-        .gradio-column {
-            padding: 15px;
-        }
-    """) as demo:
-        
+    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>""")
 
@@ -410,6 +437,8 @@ def create_gradio_app():
             outputs=output_html
         )
 
-    demo.launch()
+    return demo
 
-create_gradio_app()
+if __name__ == "__main__":
+    app = create_gradio_app()
+    app.launch()