Update app.py

app.py

@@ -88,19 +88,57 @@ async def generate_predictions(book_name, author, language_choice, detail_option
 
 
     return image_links, combined_summary, telegraph_url
-notion_theme = {
-    "primary": "#e0e0e0",  # Light gray
-    "secondary": "#ffffff",  # White
-    "input_background": "#f5f5f5",  # Slightly darker gray for input fields
-    "input_text": "#333333",  # Dark text for inputs
-    "output_background": "#ffffff",  # White background for outputs
-    "output_text": "#333333",  # Dark text for outputs
-    "button_background": "#6366F1",  # A subtle color for buttons
-    "button_text": "#ffffff",  # White text for buttons
-    "highlight": "#9CA3AF",  # A subtle highlight color
-    "font": "Arial, sans-serif",  # A clean, sans-serif font
+css = """/* General styling to mimic Notion's aesthetic */
+
+body {
+    background-color: #f5f5f5;
+    font-family: 'Arial', sans-serif;
+}
+
+/* Input fields styling */
+
+input, select, textarea {
+    background-color: #ffffff;
+    border: 1px solid #e1e4e8;
+    border-radius: 5px;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #333;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
-with gr.Blocks(title="📚 BookMindAI", theme=gr.Base.from_dict(notion_theme)).queue() as demo:
+
+/* Button styling */
+
+button {
+    background-color: #6366F1;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #5555d6; /* Slightly darker shade for hover */
+}
+
+/* Output cards styling */
+
+.output-card {
+    background-color: #ffffff;
+    border-radius: 5px;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    margin: 16px 0;
+}
+
+/* Gallery and other components can have additional styling based on their structure */
+
+/* ... */
+
+"""
+with gr.Blocks(title="📚 BookMindAI", theme=gr.themes.Base(),css=css).queue() as demo:
     
     with gr.Row():
         with gr.Column():