Upload app.py with huggingface_hub

app.py

@@ -85,48 +85,60 @@ def generate_mindmap(input_text: str):
 base_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
-:root {
-    --bg-canvas: #fafafa;
-    --bg-sidebar: #ffffff;
-    --border-color: #eaeaea;
-    --text-primary: #171717;
-    --text-secondary: #666666;
-    --text-tertiary: #a1a1aa;
-    --focus-ring: rgba(0, 0, 0, 0.08);
+:root, .dark, body {
+    --bg-canvas: #fafafa !important;
+    --bg-sidebar: #ffffff !important;
+    --border-color: #eaeaea !important;
+    --text-primary: #171717 !important;
+    --text-secondary: #666666 !important;
+    --text-tertiary: #a1a1aa !important;
+    --focus-ring: rgba(0, 0, 0, 0.08) !important;
+    --body-text-color: #171717 !important;
+    color: #171717 !important;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif; color: var(--text-primary); background-color: var(--bg-canvas); height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; }
 
-.app-layout { display: flex; height: 100vh; width: 100vw; }
+/* Force layout to break out of Gradio's container limitations */
+.app-layout { position: fixed !important; top: 0 !important; left: 0 !important; display: flex !important; height: 100vh !important; width: 100vw !important; z-index: 99999 !important; background-color: var(--bg-canvas) !important; margin: 0 !important; padding: 0 !important; }
 
-.sidebar { width: 360px; min-width: 360px; max-width: 360px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; box-shadow: 1px 0 10px rgba(0,0,0,0.02); z-index: 10; }
-.sidebar-header { padding: 24px; border-bottom: 1px solid var(--border-color); }
-.logo { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: #171717; }
-.sidebar-content { flex-grow: 1; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
-.input-group { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
-.input-group label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
+/* Force light mode text colors to defeat Gradio Dark Mode */
+.app-layout, .app-layout div, .app-layout span, .app-layout p, .app-layout label { color: #171717 !important; }
+
+.sidebar { width: 360px !important; min-width: 360px !important; max-width: 360px !important; background-color: var(--bg-sidebar) !important; border-right: 1px solid var(--border-color) !important; display: flex !important; flex-direction: column !important; box-shadow: 1px 0 10px rgba(0,0,0,0.02) !important; z-index: 10 !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; }
+.sidebar-header { padding: 24px !important; border-bottom: 1px solid var(--border-color) !important; }
+.logo { display: flex !important; align-items: center !important; gap: 12px !important; font-weight: 600 !important; font-size: 16px !important; letter-spacing: -0.02em !important; color: #171717 !important; }
+.logo svg { stroke: #171717 !important; }
+.sidebar-content { flex-grow: 1 !important; padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }
+.input-group { display: flex !important; flex-direction: column !important; gap: 8px !important; flex-grow: 1 !important; }
+.input-group label { font-size: 13px !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
 
 textarea.custom-textarea {
-    flex-grow: 1; width: 100%; height: 100%; resize: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--text-primary); background-color: #fff; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
+    flex-grow: 1 !important; width: 100% !important; height: 100% !important; resize: none !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; padding: 16px !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--text-primary) !important; background-color: #fff !important; transition: all 0.2s ease !important; box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
 }
-textarea.custom-textarea:focus { outline: none; border-color: #999; box-shadow: 0 0 0 4px var(--focus-ring); }
-textarea.custom-textarea::placeholder { color: #a1a1aa; }
+textarea.custom-textarea:focus { outline: none !important; border-color: #999 !important; box-shadow: 0 0 0 4px var(--focus-ring) !important; }
+textarea.custom-textarea::placeholder { color: #a1a1aa !important; }
 
-.btn-primary { background-color: #000; color: #fff; border: none; border-radius: 6px; padding: 12px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; }
-.btn-primary:hover { background-color: #333; }
-.btn-primary:active { transform: scale(0.98); }
-.btn-primary:disabled { background-color: #e5e5e5; color: #a3a3a3; cursor: not-allowed; }
+.btn-primary { background-color: #000 !important; color: #fff !important; border: none !important; border-radius: 6px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }
+.btn-primary, .btn-primary * { color: #ffffff !important; stroke: #ffffff !important; }
+.btn-primary:hover { background-color: #333 !important; }
+.btn-primary:active { transform: scale(0.98) !important; }
+.btn-primary:disabled { background-color: #e5e5e5 !important; color: #a3a3a3 !important; cursor: not-allowed !important; stroke: #a3a3a3 !important; }
 
-#loading { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--text-secondary); padding: 12px; }
-.spinner { width: 16px; height: 16px; border: 2px solid var(--border-color); border-top: 2px solid #000; border-radius: 50%; animation: spin 0.8s linear infinite; }
+#loading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; font-size: 13px !important; color: var(--text-secondary) !important; padding: 12px !important; }
+.spinner { width: 16px !important; height: 16px !important; border: 2px solid var(--border-color) !important; border-top: 2px solid #000 !important; border-radius: 50% !important; animation: spin 0.8s linear infinite !important; }
 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 .hidden { display: none !important; }
 
-.sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-tertiary); }
+.sidebar-footer { padding: 16px 24px !important; border-top: 1px solid var(--border-color) !important; font-size: 12px !important; color: var(--text-tertiary) !important; }
+.sidebar-footer p { color: var(--text-tertiary) !important; }
+
+.canvas-area { flex-grow: 1 !important; position: relative !important; background-color: var(--bg-canvas) !important; background-image: radial-gradient(#e5e7eb 1px, transparent 1px) !important; background-size: 20px 20px !important; padding: 0 !important; margin: 0 !important; height: 100vh !important; }
+#markmap { width: 100% !important; height: 100% !important; }
+#markmap text { fill: #171717 !important; color: #171717 !important; font-family: inherit !important; }
 
-.canvas-area { flex-grow: 1; position: relative; background-color: var(--bg-canvas); background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
-#markmap { width: 100%; height: 100%; }
+.disclaimer { color: var(--text-tertiary) !important; }
 
 /* Gradio Overrides to remove padding and ensure full screen */
 .gradio-container { padding: 0 !important; margin: 0 !important; max-width: 100vw !important; border: none !important; }