Update app.py

app.py

@@ -17,32 +17,40 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for styling
+# Custom CSS for dark theme
 st.markdown("""
     <style>
         .stApp {
-            background-color: #f5f5f5;
+            background-color: #000000;
+            color: #ffffff;
+        }
+        .stTextInput>div>div>input, .stTextArea>div>div>textarea {
+            background-color: #1a1a1a;
+            color: #ffffff;
+        }
+        .stSelectbox>div>div>select {
+            background-color: #1a1a1a;
+            color: #ffffff;
+        }
+        .stSlider>div>div>div>div {
+            background-color: #4CAF50;
         }
         .stButton>button {
             background-color: #4CAF50;
-            color: black;
+            color: white;
             border-radius: 5px;
             padding: 0.5rem 1rem;
             border: none;
         }
-        .stTextInput>div>div>input {
-            border-radius: 5px;
-            padding: 0.5rem;
-        }
-        .stSelectbox>div>div>select {
-            border-radius: 5px;
-            padding: 0.5rem;
+        .stButton>button:hover {
+            background-color: #45a049;
         }
         .css-1aumxhk {
-            background-color: #ffffff;
+            background-color: #121212;
             border-radius: 10px;
             padding: 2rem;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+            color: #ffffff;
         }
         .header {
             color: #4CAF50;
@@ -51,10 +59,63 @@ st.markdown("""
             margin-bottom: 1rem;
         }
         .subheader {
-            color: #333333;
+            color: #4CAF50;
             font-size: 1.5rem;
             margin-bottom: 1rem;
         }
+        .st-bb {
+            background-color: transparent;
+        }
+        .st-at {
+            background-color: #1a1a1a;
+        }
+        .st-bh {
+            color: #ffffff;
+        }
+        .st-ag {
+            font-size: 1rem;
+            color: #ffffff;
+        }
+        .st-ae {
+            background-color: #1a1a1a;
+        }
+        .st-af {
+            color: #ffffff;
+        }
+        .stProgress>div>div>div>div {
+            background-color: #4CAF50;
+        }
+        div[data-baseweb="select"]>div {
+            background-color: #1a1a1a;
+            color: white;
+        }
+        .st-b7 {
+            background-color: transparent;
+        }
+        .st-b8 {
+            color: #ffffff;
+        }
+        .st-b9 {
+            background-color: #1a1a1a;
+        }
+        .st-ba {
+            color: #ffffff;
+        }
+        .stRadio>div {
+            color: #ffffff;
+        }
+        .stCheckbox>div>label>div {
+            color: #ffffff;
+        }
+        .stFileUploader>div>div>div>div {
+            color: #ffffff;
+        }
+        .stMarkdown {
+            color: #ffffff;
+        }
+        .stAlert {
+            background-color: #1a1a1a;
+        }
     </style>
 """, unsafe_allow_html=True)
 
@@ -74,6 +135,12 @@ with st.sidebar:
         icons=["house", "file-earmark-text", "cpu", "gear", "graph-up", "cloud-upload", "info-circle"],
         menu_icon="cast",
         default_index=0,
+        styles={
+            "container": {"padding": "5px", "background-color": "#121212"},
+            "icon": {"color": "#4CAF50", "font-size": "18px"},
+            "nav-link": {"color": "#ffffff", "font-size": "16px", "text-align": "left", "margin": "0px"},
+            "nav-link-selected": {"background-color": "#4CAF50", "color": "#ffffff"},
+        }
     )
 
 # Home Page
@@ -126,7 +193,7 @@ elif selected == "Data Preparation":
             
             if st.session_state['data_type'] == "text/csv":
                 df = pd.read_csv(st.session_state['data_path'])
-                st.dataframe(df.head())
+                st.dataframe(df.head().style.set_properties(**{'background-color': '#1a1a1a', 'color': 'white'}))
             elif st.session_state['data_type'] == "application/json":
                 with open(st.session_state['data_path']) as f:
                     data = json.load(f)
@@ -151,7 +218,7 @@ elif selected == "Data Preparation":
                 col3.metric("Missing Values", df.isnull().sum().sum())
                 
                 st.markdown("**Column Types**")
-                st.table(df.dtypes.reset_index().rename(columns={"index": "Column", 0: "Type"}))
+                st.table(df.dtypes.reset_index().rename(columns={"index": "Column", 0: "Type"}).style.set_properties(**{'background-color': '#1a1a1a', 'color': 'white'}))
             else:
                 st.info("Detailed statistics available for CSV files only.")
 
@@ -300,11 +367,6 @@ elif selected == "Deployment":
             with st.spinner("Uploading model to Hugging Face Hub..."):
                 time.sleep(3)
                 
-                # In a real app, you would use:
-                # api = HfApi()
-                # api.create_repo(repo_name, private=(privacy == "Private"), token=hf_token)
-                # api.upload_folder(folder_path=st.session_state['model_path'], repo_id=repo_name)
-                
                 st.success(f"Model successfully deployed to Hugging Face Hub!")
                 st.markdown(f"Your model is available at: [https://huggingface.co/{repo_name}](https://huggingface.co/{repo_name})")
                 
@@ -344,7 +406,7 @@ elif selected == "About":
 # Footer
 st.markdown("---")
 st.markdown("""
-    <div style="text-align: center; color: #666666; font-size: 0.9rem;">
+    <div style="text-align: center; color: #4CAF50; font-size: 0.9rem;">
         LLM Fine-Tuning & Deployment App | Powered by Streamlit and Hugging Face
     </div>
 """, unsafe_allow_html=True)