Update app.py

app.py

@@ -17,7 +17,6 @@ import matplotlib.pyplot as plt
 import matplotlib.patches as mpatches
 
 import streamlit as st
-import streamlit.components.v1 as components
 
 # Optional RDKit logging mute
 try:
@@ -85,39 +84,38 @@ else:
     }
     """
 
-base_css = f"""
+# Standard string concatenation to avoid f-string curly brace conflicts
+base_css = """
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <style>
 /* Hide Streamlit elements */
-#MainMenu, footer, header {{ visibility: hidden; }}
-.stDeployButton, [data-testid="stToolbar"] {{ display: none; }}
-[data-testid="collapsedControl"] {{ display: none !important; }}
-section[data-testid="stSidebar"] {{ display: none !important; }}
-
-{theme_css}
-
-.stApp {{
+#MainMenu, footer, header { visibility: hidden; }
+.stDeployButton, [data-testid="stToolbar"] { display: none; }
+[data-testid="collapsedControl"] { display: none !important; }
+section[data-testid="stSidebar"] { display: none !important; }
+""" + theme_css + """
+.stApp {
   background: var(--bg) !important;
   font-family: var(--font-sans) !important;
   color: var(--text) !important;
-}}
+}
 
 /* Center and constrain main block */
-.main .block-container {{
+.main .block-container {
   max-width: 1160px !important;
   margin: 0 auto !important;
   padding: 0 32px 80px !important;
-}}
+}
 
 /* Tabs */
-.stTabs [data-baseweb="tab-list"] {{
+.stTabs [data-baseweb="tab-list"] {
   background: transparent !important;
   border-bottom: 1px solid var(--border) !important;
   gap: 0 !important; padding: 0 !important;
-}}
-.stTabs [data-baseweb="tab"] {{
+}
+.stTabs [data-baseweb="tab"] {
   background: transparent !important;
   color: var(--muted) !important;
   font-family: var(--font-sans) !important;
@@ -126,18 +124,18 @@ section[data-testid="stSidebar"] {{ display: none !important; }}
   border: none !important;
   border-bottom: 2px solid transparent !important;
   border-radius: 0 !important;
-}}
-.stTabs [aria-selected="true"] {{
+}
+.stTabs [aria-selected="true"] {
   color: var(--accent) !important;
   border-bottom-color: var(--accent) !important;
   background: transparent !important;
-}}
-.stTabs [data-baseweb="tab-highlight"] {{ background: var(--accent) !important; height: 2px !important; }}
-.stTabs [data-baseweb="tab-border"] {{ display: none !important; }}
-.stTabs [data-baseweb="tab-panel"] {{ padding: 24px 0 0 !important; background: transparent !important; }}
+}
+.stTabs [data-baseweb="tab-highlight"] { background: var(--accent) !important; height: 2px !important; }
+.stTabs [data-baseweb="tab-border"] { display: none !important; }
+.stTabs [data-baseweb="tab-panel"] { padding: 24px 0 0 !important; background: transparent !important; }
 
 /* Textarea & Input */
-.stTextArea textarea, .stTextInput input {{
+.stTextArea textarea, .stTextInput input {
   background: var(--surface) !important;
   border: 1px solid var(--border) !important;
   border-radius: 6px !important;
@@ -145,29 +143,29 @@ section[data-testid="stSidebar"] {{ display: none !important; }}
   font-family: var(--font-mono) !important;
   font-size: 13px !important;
   line-height: 1.6 !important;
-}}
-.stTextArea textarea:focus, .stTextInput input:focus {{
+}
+.stTextArea textarea:focus, .stTextInput input:focus {
   border-color: var(--accent) !important;
   box-shadow: 0 0 0 2px var(--accent-dim) !important;
-}}
-.stTextArea label, .stTextInput label {{
+}
+.stTextArea label, .stTextInput label {
   color: var(--muted) !important;
   font-family: var(--font-sans) !important;
   font-size: 12px !important; font-weight: 500 !important;
-}}
+}
 
 /* File uploader */
-[data-testid="stFileUploader"] {{
+[data-testid="stFileUploader"] {
   background: var(--surface) !important;
   border: 2px dashed var(--border) !important;
   border-radius: 8px !important;
-}}
+}
 [data-testid="stFileUploader"] label,
-[data-testid="stFileUploader"] span {{ color: var(--muted) !important; font-family: var(--font-sans) !important; }}
-[data-testid="stFileUploaderDropzone"] {{ background: transparent !important; }}
+[data-testid="stFileUploader"] span { color: var(--muted) !important; font-family: var(--font-sans) !important; }
+[data-testid="stFileUploaderDropzone"] { background: transparent !important; }
 
 /* Buttons */
-.stButton button[kind="primary"] {{
+.stButton button[kind="primary"] {
   background: var(--accent) !important;
   color: #ffffff !important;
   border: none !important;
@@ -177,22 +175,22 @@ section[data-testid="stSidebar"] {{ display: none !important; }}
   padding: 10px 24px !important;
   width: 100% !important;
   transition: opacity .15s !important;
-}}
-.stButton button[kind="primary"]:hover {{ opacity: 0.90 !important; }}
+}
+.stButton button[kind="primary"]:hover { opacity: 0.90 !important; }
 
 /* Standard Buttons (like Theme Toggle) */
-.stButton button[kind="secondary"] {{
+.stButton button[kind="secondary"] {
   background: var(--surface) !important;
   color: var(--text) !important;
   border: 1px solid var(--border) !important;
   border-radius: 6px !important;
   font-family: var(--font-sans) !important;
   font-size: 13px !important; font-weight: 500 !important;
-}}
-.stButton button[kind="secondary"]:hover {{ border-color: var(--accent) !important; color: var(--accent) !important; }}
+}
+.stButton button[kind="secondary"]:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
 
 /* Pill buttons */
-.pill-btn button {{
+.pill-btn button {
   background: var(--surface) !important;
   color: var(--muted) !important;
   border: 1px solid var(--border) !important;
@@ -201,36 +199,36 @@ section[data-testid="stSidebar"] {{ display: none !important; }}
   font-size: 11.5px !important;
   padding: 3px 10px !important;
   width: auto !important;
-}}
-.pill-btn button:hover {{ border-color: var(--accent) !important; color: var(--accent) !important; }}
+}
+.pill-btn button:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
 
 /* Dataframe */
-[data-testid="stDataFrame"] iframe {{ background: var(--surface) !important; }}
-.stDataFrame {{ border: 1px solid var(--border) !important; border-radius: 8px !important; }}
+[data-testid="stDataFrame"] iframe { background: var(--surface) !important; }
+.stDataFrame { border: 1px solid var(--border) !important; border-radius: 8px !important; }
 
 /* Progress bar */
-.stProgress > div > div > div > div {{ background-color: var(--accent) !important; }}
-[data-testid="stProgressBarMessage"] {{ color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }}
+.stProgress > div > div > div > div { background-color: var(--accent) !important; }
+[data-testid="stProgressBarMessage"] { color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }
 
 /* Spinner */
-.stSpinner > div {{ border-top-color: var(--accent) !important; }}
-[data-testid="stSpinnerMessage"] {{ color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }}
+.stSpinner > div { border-top-color: var(--accent) !important; }
+[data-testid="stSpinnerMessage"] { color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }
 
 /* Alert/error */
-[data-testid="stAlert"] {{
+[data-testid="stAlert"] {
   background: var(--danger-dim) !important;
   border: 1px solid var(--danger) !important;
   border-radius: 6px !important;
   color: var(--danger) !important;
   font-family: var(--font-mono) !important;
-}}
+}
 
-hr {{ border: none !important; border-top: 1px solid var(--border) !important; margin: 20px 0 !important; }}
+hr { border: none !important; border-top: 1px solid var(--border) !important; margin: 20px 0 !important; }
 </style>
 """
 
+# Inject the clean CSS directly into the app
 st.markdown(base_css, unsafe_allow_html=True)
-components.html(base_css, height=0, scrolling=False)
 
 # Constants / paths
 MODEL_REPO = "ym59/velobind-models"