Update app.py

app.py

@@ -23,13 +23,14 @@ repo: Optional[Repository] = None
 # if HF_TOKEN:
 #     repo = Repository(local_dir=DATADIR, clone_from=DATASET_REPO_URL, token=HF_TOKEN)
 
+
 def neuron_export(model_id: str, task: str) -> str:
     if not model_id:
         return f"### Invalid input 🐞 Please specify a model name, got {model_id}"
 
     try:
-        api = HfApi(token=HF_TOKEN)
-        token = HF_TOKEN
+        api = HfApi(token=HF_TOKEN)  # Use HF_TOKEN if available, else anonymous
+        token = HF_TOKEN  # Pass token to convert only if available
 
         error, commit_info = convert(api=api, model_id=model_id, task=task, token=token)
         if error != "0":
@@ -60,24 +61,6 @@ def neuron_export(model_id: str, task: str) -> str:
     except Exception as e:
         return f"#### Error: {e}"
 
-# --- Custom CSS for dark/light mode fix ---
-CUSTOM_CSS = """
-<style>
-/* Default light mode style */
-input.hub-search-input {
-    color: black !important;
-    background-color: white !important;
-}
-
-/* Dark mode overrides */
-@media (prefers-color-scheme: dark) {
-    input.hub-search-input {
-        color: white !important;
-        background-color: #1f1f1f !important;
-    }
-}
-</style>
-"""
 
 TITLE_IMAGE = """
 <div style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
@@ -103,8 +86,63 @@ Export 🤗 Transformers models hosted on the Hugging Face Hub to AWS Neuron-opt
 - PR creation requires the Space owner to have a valid write token set via HF_WRITE_TOKEN
 """
 
-with gr.Blocks() as demo:
-    gr.HTML(CUSTOM_CSS)
+# Custom CSS to fix dark mode compatibility and transparency issues
+CUSTOM_CSS = """
+/* Fix for HuggingfaceHubSearch component visibility in both light and dark modes */
+.gradio-container .gr-form {
+    background: var(--background-fill-primary) !important;
+    border: 1px solid var(--border-color-primary) !important;
+}
+
+/* Ensure text is visible in both modes */
+.gradio-container input[type="text"], 
+.gradio-container textarea,
+.gradio-container .gr-textbox input {
+    color: var(--body-text-color) !important;
+    background: var(--input-background-fill) !important;
+    border: 1px solid var(--border-color-primary) !important;
+}
+
+/* Fix dropdown/search results visibility */
+.gradio-container .gr-dropdown,
+.gradio-container .gr-dropdown .gr-box,
+.gradio-container [data-testid="textbox"] {
+    background: var(--background-fill-primary) !important;
+    color: var(--body-text-color) !important;
+    border: 1px solid var(--border-color-primary) !important;
+}
+
+/* Fix for search component specifically */
+.gradio-container .gr-form > div,
+.gradio-container .gr-form input {
+    background: var(--input-background-fill) !important;
+    color: var(--body-text-color) !important;
+}
+
+/* Ensure proper contrast for placeholder text */
+.gradio-container input::placeholder {
+    color: var(--body-text-color-subdued) !important;
+    opacity: 0.7;
+}
+
+/* Fix any remaining transparent backgrounds */
+.gradio-container .gr-box,
+.gradio-container .gr-panel {
+    background: var(--background-fill-primary) !important;
+}
+
+/* Make sure search results are visible */
+.gradio-container .gr-dropdown-item {
+    color: var(--body-text-color) !important;
+    background: var(--background-fill-primary) !important;
+}
+
+.gradio-container .gr-dropdown-item:hover {
+    background: var(--background-fill-secondary) !important;
+}
+"""
+
+with gr.Blocks(css=CUSTOM_CSS) as demo:
     gr.HTML(TITLE_IMAGE)
     gr.HTML(TITLE)
 
@@ -117,7 +155,6 @@ with gr.Blocks() as demo:
                 label="Hub model ID",
                 placeholder="Search for model ID on the hub",
                 search_type="model",
-                elem_classes=["hub-search-input"]
             )
             input_task = gr.Textbox(
                 value="auto",
@@ -133,6 +170,7 @@ with gr.Blocks() as demo:
         outputs=output,
     )
 
+
 if __name__ == "__main__":
     def restart_space():
         if HF_TOKEN:
@@ -142,4 +180,4 @@ if __name__ == "__main__":
     scheduler.add_job(restart_space, "interval", seconds=21600)
     scheduler.start()
 
-    demo.launch()
+    demo.launch()