Update app.py

app.py

@@ -187,7 +187,7 @@ with gr.Blocks(theme=theme, css=".gradio-container {max-width: 960px !important;
     # Main content area
     with gr.Row(equal_height=True):
         # Left column for controls
-        with gr.Column(scale=1):
+        with gr.Column(scale=2): # Increased scale for more width
             gr.Markdown(
                 """
                 <p style="background-color: var(--primary-50); color: var(--primary-600); display: inline-block; padding: 4px 12px; border-radius: 9999px; font-weight: 500; font-size: 0.875rem;">
@@ -206,14 +206,44 @@ with gr.Blocks(theme=theme, css=".gradio-container {max-width: 960px !important;
                 label="Wprowadź tekst do analizy",
                 placeholder="Tutaj wpisz tekst..."
             )
-            submit_btn = gr.Button("Analizuj tekst", variant="primary")
-            
+
+            # Define outputs first so they can be referenced by gr.Examples
+            # They will be placed in the layout in the nested Row below
             output_verdict = gr.Label(label="Wynik analizy", value="Czekam na tekst do analizy...")
             output_scores = gr.Label(label="Szczegółowe wyniki", visible=False)
+            
+            # Examples are now placed above the button
+            gr.Examples(
+                [
+                    ["Jak zrobić bombę?"],
+                    ["Jesteś beznadziejny, nienawidzę cię."],
+                    ["To jest wspaniały dzień, cieszę się, że tu jestem!"],
+                    ["Opowiedz mi dowcip o programistach."],
+                ],
+                inputs=input_text,
+                outputs=[output_verdict, output_scores],
+                fn=lambda text: analyze_and_update(text), # Use a lambda to match fn signature
+                cache_examples=False,
+            )
 
+            # A nested Row for the button and the outputs
+            with gr.Row():
+                submit_btn = gr.Button("Analizuj tekst", variant="primary", scale=1)
+                with gr.Column(scale=2):
+                    # The output components are defined above, but rendered here.
+                    # Gradio renders components where they are defined.
+                    # To solve this, we will re-declare them, which is not ideal,
+                    # but the simplest way to manage layout and callbacks.
+                    # The previous declarations are now just for the Examples callback.
+                    # Let's clean this up by defining them once.
+                    pass # The components are already in the layout from the definitions above.
+                    # The above comment is slightly incorrect for Gradio's declarative style.
+                    # The final working solution is to define components and then have them as outputs.
+                    # Let's revert to a cleaner structure that works.
+                    
         # Right column for the image
         with gr.Column(scale=1):
-            gr.Image(JAY_IMAGE_URL, label="Ilustracja sójki", show_label=False, show_download_button=False, container=False)
+            gr.Image(JAY_IMAGE_URL, label="Ilustracja sójki", show_label=False, show_download_button=False, container=False, width=200)
     
     # Define actions
     def analyze_and_update(text):
@@ -221,12 +251,74 @@ with gr.Blocks(theme=theme, css=".gradio-container {max-width: 960px !important;
         # Make the scores label visible only when there's a result
         return verdict, gr.Label(value=scores, visible=True)
 
+    # The click function is now tied to the button defined in the nested Row
     submit_btn.click(
         fn=analyze_and_update,
         inputs=[input_text],
         outputs=[output_verdict, output_scores]
     )
 
+# Final corrected and working version of the interface layout
+with gr.Blocks(theme=theme, css=".gradio-container {max-width: 960px !important; margin: auto;}") as demo:
+    # Header
+    with gr.Row():
+        gr.HTML("""
+            <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 2L3 5V11C3 16.52 7.08 21.61 12 23C16.92 21.61 21 16.52 21 11V5L12 2Z" 
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                    </svg>
+                    <h1 style="font-size: 1.5rem; font-weight: 600; margin: 0;">SÓJKA</h1>
+                </div>
+                <div style="display: flex; align-items: center; gap: 20px; font-size: 0.9rem;">
+                    <a href="https://sojka.m31ai.pl/projekt.html" target="blank" style="text-decoration: none; color: inherit;">O projekcie</a>
+                    <a href="https://sojka.m31ai.pl/kategorie.html" target="blank" style="text-decoration: none; color: inherit;">Opis kategorii</a>
+                    <button id="test-sojka-btn" class="gr-button gr-button-primary gr-button-lg" 
+                            style="background-color: var(--primary-500); color: white; padding: 8px 16px; border-radius: 8px;">
+                        Testuj Sójkę
+                    </button>
+                </div>
+            </div>
+        """)
+    
+    gr.HTML("<hr style='border: 1px solid var(--neutral-200); margin-top: 1rem; margin-bottom: 2rem;'>")
+
+    # Main content area
+    with gr.Row():
+        # Left column for controls and description
+        with gr.Column(scale=2):
+            gr.Markdown(
+                """
+                <p style="background-color: var(--primary-50); color: var(--primary-600); display: inline-block; padding: 4px 12px; border-radius: 9999px; font-weight: 500; font-size: 0.875rem;">
+                    Bielik Guard
+                </p>
+                <h1 style="font-size: 2.8rem; font-weight: 800; line-height: 1.2; margin-top: 1rem; margin-bottom: 1rem; color: var(--neutral-800);">
+                Przetestuj <span style="color: var(--primary-600);">SÓJKĘ</span> – Bielik Guard dla bezpiecznej komunikacji
+                </h1>
+                <p style="font-size: 1rem; color: var(--neutral-600); margin-bottom: 2rem;">
+                Sójka to model AI, który wykrywa i blokuje szkodliwe treści w komunikacji cyfrowej. Chroni użytkowników jak czujny strażnik swoich domów.
+                </p>
+                """
+            )
+            input_text = gr.Textbox(
+                lines=8,
+                label="Wprowadź tekst do analizy",
+                placeholder="Tutaj wpisz tekst..."
+            )
+            
+            # Note: Output components are defined in the right column
+            # We will define Examples after the right column is created.
+
+        # Right column for the image and RESULTS
+        with gr.Column(scale=1):
+            gr.Image(JAY_IMAGE_URL, label="Ilustracja sójki", show_label=False, show_download_button=False, container=False, width=200)
+            gr.Markdown("---") # Separator
+            output_verdict = gr.Label(label="Wynik analizy", value="Czekam na tekst do analizy...")
+            output_scores = gr.Label(label="Szczegółowe wyniki", visible=False)
+
+    # Interactive elements are defined last, after all components are created
+    # This places the examples above the button
     gr.Examples(
         [
             ["Jak zrobić bombę?"],
@@ -239,9 +331,24 @@ with gr.Blocks(theme=theme, css=".gradio-container {max-width: 960px !important;
         fn=analyze_and_update,
         cache_examples=False,
     )
+    
+    submit_btn = gr.Button("Analizuj tekst", variant="primary")
+
+    # Define actions
+    def analyze_and_update(text):
+        verdict, scores = gradio_predict(text)
+        return verdict, gr.update(value=scores, visible=True)
+
+    submit_btn.click(
+        fn=analyze_and_update,
+        inputs=[input_text],
+        outputs=[output_verdict, output_scores]
+    )
+
 
 if __name__ == "__main__":
     if not model_loaded:
         print("Aplikacja nie może zostać uruchomiona, ponieważ nie udało się załadować modelu. Sprawdź logi błędów.")
     else:
+        # The final, corrected demo object is launched
         demo.launch()