update

app.py

@@ -186,24 +186,63 @@ def process_ui(folder_id, naming_convention):
                  for file in renamed_files] if renamed_files else []
     return status, table_data
 
-# Simplified Gradio interface
+# Custom CSS for web-safe fonts and improved styling
+custom_css = """
+div.gradio-container {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
+}
+div.gradio-container button {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
+}
+div.gradio-container input {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
+}
+.gr-form {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.gr-button {
+    background-color: #2c5282;
+    color: white;
+}
+.gr-button:hover {
+    background-color: #2b6cb0;
+}
+.gr-input {
+    border: 1px solid #e2e8f0;
+}
+.gr-input:focus {
+    border-color: #4299e1;
+    box-shadow: 0 0 0 1px #4299e1;
+}
+"""
+
+# Gradio interface
 demo = gr.Interface(
     fn=process_ui,
     inputs=[
         gr.Textbox(
             label="Google Drive Folder ID",
-            placeholder="Enter the folder ID from the URL"
+            placeholder="Enter the folder ID from the URL",
+            info="Found in your Google Drive folder's URL"
         ),
         gr.Textbox(
             label="Naming Convention",
             placeholder="e.g., sports_card",
-            value="sports_card"
+            value="sports_card",
+            info="Use only letters, numbers, and underscores"
         )
     ],
     outputs=[
-        gr.Textbox(label="Status"),
+        gr.Textbox(
+            label="Status",
+            lines=3
+        ),
         gr.Dataframe(
-            headers=["Original Name", "New Name", "File Path"]
+            headers=["Original Name", "New Name", "File Path"],
+            wrap=True
         )
     ],
     title="Sports Cards Dataset Processor",
@@ -214,7 +253,9 @@ demo = gr.Interface(
     3. Click submit to start processing
     
     Note: Only image files will be processed. Invalid images will be skipped.
-    """
+    """,
+    css=custom_css,
+    theme="default"
 )
 
 if __name__ == "__main__":