Update app.py

app.py

@@ -88,7 +88,7 @@ def add_example_text(current_text, example):
     return example
 
 # Gradio-interface met duidelijke instructies en styling
-with gr.Blocks() as demo:
+with gr.Blocks(css=".orange-btn {background-color: #FFA500 !important; color: black !important; font-weight: bold; font-size: 16px; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer;} .orange-btn:hover {background-color: #FF8C00 !important;}") as demo:
     gr.Markdown(
         """
         <div style='font-size: 18px; font-weight: bold; text-align: center; color: #333;'>
@@ -110,9 +110,8 @@ with gr.Blocks() as demo:
         for example in example_sentences_top:
             gr.Button(example).click(add_example_text, inputs=[input_box, gr.Textbox(value=example, visible=False)], outputs=input_box, queue=False)
 
-    # Oranje knop voor sentimentanalyse
-    analyze_button = gr.Button("Tell me how I feel", interactive=True)
-    analyze_button.style(full_width=True)
+    # Oranje knop voor sentimentanalyse (correct toegepast)
+    analyze_button = gr.Button("Tell me how I feel", elem_classes="orange-btn")
     output_box = gr.HTML(label="Results")
     plot_box = gr.Plot(label="Sentiment Distribution")
 
@@ -124,27 +123,6 @@ with gr.Blocks() as demo:
         for example in example_sentences_bottom:
             gr.Button(example).click(add_example_text, inputs=[input_box, gr.Textbox(value=example, visible=False)], outputs=input_box, queue=False)
 
-# CSS voor styling (oranje knop correct toegepast)
-css = """
-button.svelte-1ipelgc {
-    background-color: #FFA500 !important;
-    color: black !important;
-    font-weight: bold;
-    font-size: 16px;
-    padding: 10px 20px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-}
-button.svelte-1ipelgc:hover {
-    background-color: #FF8C00 !important;
-}
-"""
-
-# Start de app met aangepaste CSS voor de oranje knop
+# Start de app
 demo.launch(share=True)
 
-
-
-
-