fix style

app.py

@@ -182,7 +182,7 @@ with gr.Blocks(title="NGT AI Platform", theme=theme, css_paths="style.css") as d
             Modulo interattivo per la pianificazione dei turni. Confronta in tempo reale il forecast AI con i dati storici effettivi.
             """)
             
-            with gr.Row():
+            with gr.Row(elem_classes="responsive-row"):
                 with gr.Column(scale=1):
                     with gr.Group():
                         gr.Markdown("### 1. Configurazione")
@@ -232,7 +232,7 @@ with gr.Blocks(title="NGT AI Platform", theme=theme, css_paths="style.css") as d
                 """)
             
             # 3. INTERFACCIA
-            with gr.Row():
+            with gr.Row(elem_classes="responsive-row"):
                 with gr.Column():
                     # Input Text
                     sentiment_input = gr.Textbox(
@@ -280,7 +280,7 @@ with gr.Blocks(title="NGT AI Platform", theme=theme, css_paths="style.css") as d
             * **Tecnologia:** Deep Learning su sequenze di testo (Embedding layer).
             """)
             
-            with gr.Row():
+            with gr.Row(elem_classes="responsive-row"):
                 # COLONNA INPUT (L'Articolo)
                 with gr.Column(scale=3):
                     multi_input = gr.Textbox(
@@ -328,7 +328,7 @@ with gr.Blocks(title="NGT AI Platform", theme=theme, css_paths="style.css") as d
             *Utilizzare gli esempi di radiografiche frontali (Chest X-Ray) recuperabili nella sidebar laterale.*
             """)
             
-            with gr.Row():
+            with gr.Row(elem_classes="responsive-row"):
                 # COLONNA INPUT
                 with gr.Column(scale=1):
                     image_input = gr.Image(type="numpy", label="Seleziona Radiografia", height=400, interactive=False)
@@ -351,7 +351,7 @@ with gr.Blocks(title="NGT AI Platform", theme=theme, css_paths="style.css") as d
             *Utilizzare gli esempi di retinografie digitali recuperabili nella sidebar laterale.*            
             """)
             
-            with gr.Row():
+            with gr.Row(elem_classes="responsive-row"):
                 # COLONNA INPUT
                 with gr.Column(scale=1):
                     image_input_dr = gr.Image(

modules/utilities/utils.py

@@ -27,7 +27,6 @@ def global_file_loader(file_data):
     Gestisce il caricamento file dalla Sidebar.
     Supporta sia input stringa (Gradio 5 single) che lista.
     """
-    # 1. NORMALIZZAZIONE INPUT (Il Fix Cruciale)
     if isinstance(file_data, list):
         if not file_data:
             return [gr.update() for _ in range(6)]
@@ -40,7 +39,7 @@ def global_file_loader(file_data):
 
     ext = os.path.splitext(file_path)[1].lower()
     
-    # Valori di default (non cambiare nulla)
+    # Valori di default 
     bpo_update = gr.update()
     forecast_update = gr.update()
     img_xray_update = gr.update()
@@ -61,21 +60,16 @@ def global_file_loader(file_data):
                 content = f.read()
 
         elif ext in ['.csv']:
-            # 1. Aggiorniamo il modulo Forecast (passando il PATH)
             forecast_update = gr.update(value=file_path)
-            
-            # 2. FIX ERRORE: Leggiamo il contenuto testuale per gli altri tab (opzionale)
-            # Se non leggi il file qui, 'content' non esiste e dava errore.
+        
             try:
                 with open(file_path, "r", encoding="utf-8") as f:
                     content = f.read()
                 
-                # Ora 'content' esiste e possiamo usarlo
                 bpo_update = gr.Textbox(value=content)
                 news_update = gr.Textbox(value=content)
                 sentiment_update = gr.Textbox(value=content)
             except:
-                # Se il CSV è illeggibile come testo, pazienza, non crashiamo
                 pass
             
     except Exception as e:
@@ -95,7 +89,7 @@ def render_ner_html(entities):
     """
     Trasforma la lista [('testo', 'LABEL'), ('testo', None)] in HTML puro.
     """
-    # Mappa colori HEX (più belli e moderni)
+    # Mappa colori HEX
     colors = {
         "CODICE CLIENTE": "#3b82f6", # Blue 500
         "N. FATTURA": "#f97316",     # Orange 500

style.css

@@ -1,4 +1,4 @@
-/* --- 1. HEADER & LOGO --- */
+/* --- HEADER & LOGO --- */
 .header-row {
     display: flex !important;
     align-items: flex-end !important;
@@ -7,10 +7,13 @@
     padding-bottom: 20px;
     border-bottom: 1px solid #e2e8f0;
 }
+
 .h4-margin{
     margin-left: 4px 6px 6px 4px;
 }
+
 .logo-container img { margin-bottom: 4px !important; object-fit: contain; }
+
 .header-text-col h1 {
     font-family: 'Inter', sans-serif !important;
     font-weight: 900 !important;
@@ -24,12 +27,13 @@
     padding-bottom: 0 !important;
     line-height: 1.0 !important; 
 }
+
 .header-text-col .subheader {
     text-align: left !important; color: #64748b; font-size: 1.1em; font-weight: 500;
     margin-top: 0 !important; padding-top: 0 !important;
 }
 
-/* --- 2. CUSTOM TABS STYLE (DESKTOP) --- */
+/* --- CUSTOM TABS STYLE --- */
 .tabs > .tab-nav { border-bottom: none !important; gap: 8px !important; margin-bottom: 15px !important; }
 .tabs > .tab-nav > button {
     border: 1px solid #e5e7eb !important; border-radius: 10px !important; 
@@ -43,7 +47,7 @@
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
 }
 
-/* --- 3. COMPONENTS --- */
+/* --- COMPONENTS --- */
 button.primary {
     background: linear-gradient(135deg, #8B5CF6 0%, #D65DB1 100%) !important;
     border: none !important; color: white !important; transition: filter 0.2s;
@@ -58,7 +62,7 @@ button.primary:hover { filter: brightness(1.1); box-shadow: 0 4px 15px rgba(139,
 
 .fixed-height-tab2 {height: 500px}
 
-/* Stile per la Model Card nel tab BPO */
+/* Model Card tab BPO */
 .model-card {
     background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px;
     font-size: 0.9em; color: #475569; margin-top: 10px;
@@ -68,18 +72,112 @@ button.primary:hover { filter: brightness(1.1); box-shadow: 0 4px 15px rgba(139,
     color: #475569 !important
 }
 
-/* --- 4. MOBILE RESPONSIVE --- */
+/* --- MOBILE RESPONSIVE --- */
 @media (max-width: 768px) {
-    .header-row { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 10px !important; }
-    .header-text-col h1 { text-align: center !important; font-size: 1.8em !important; }
-    .header-text-col .subheader { text-align: center !important; }
-    .responsive-row { flex-direction: column !important; display: flex !important; }
-    .responsive-row > * { width: 100% !important; min-width: 100% !important; margin-bottom: 15px !important; }
     
-    .tabs > .tab-nav { flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; }
+    /* Gestione Contenitore Principale*/
+    .gradio-container {
+        padding-left: 15px !important;
+        padding-right: 15px !important;
+        max-width: 100% !important;
+        overflow-x: hidden !important; 
+    }
+
+    /* Header più compatto e centrato */
+    .header-row { 
+        flex-direction: row !important; 
+        align-items: center !important; 
+        justify-content: flex-start !important;
+        gap: 15px !important; 
+        margin-bottom: 20px !important;
+        height: auto !important;
+        text-align: left !important;
+        padding-left: 5px !important;
+        padding-right: 5px !important;
+    }
+
+    .logo-container {
+        width: auto !important;
+        flex-shrink: 0 !important;
+        flex-grow: 0 !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        display: flex !important;
+        align-items: center !important;
+        overflow: visible !important;
+    }
+    
+    .logo-container img {
+        height: 60px !important;
+        width: auto !important;
+        margin-bottom: 0 !important;
+        object-fit: contain !important;
+    }
+
+    .header-text-col {
+        width: auto !important;
+        min-width: 0 !important;
+        flex-grow: 1 !important; 
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: center !important;
+    }
+
+    .header-text-col h1 { 
+        text-align: left !important;
+        font-size: 1.5em !important; 
+        line-height: 1.2 !important; 
+        margin-bottom: 2px !important;
+        white-space: normal !important; 
+        word-wrap: break-word !important; 
+    }
+    
+    .header-text-col .subheader { 
+        text-align: left !important; 
+        font-size: 0.85rem !important;
+        margin-top: 0 !important;
+        line-height: 1.2 !important;
+        display: block !important;
+    }
+
+    /* Responsive Rows: Stack verticale pulito */
+    .responsive-row { 
+        flex-direction: column !important; 
+        display: flex !important; 
+        gap: 20px !important;
+    }
+    .responsive-row > * { 
+        width: 100% !important; 
+        min-width: 0 !important; 
+        margin: 0 !important;   
+        padding: 0 !important;
+    }
+
+    /* Tab Navigation: Griglia 2x2 per i pulsanti */
+    .tabs > .tab-nav { 
+        display: flex !important;
+        flex-wrap: wrap !important; 
+        justify-content: center !important; 
+        gap: 8px !important; 
+    }
     .tabs > .tab-nav > button {
-        flex-grow: 1 !important; text-align: center !important; font-size: 0.85rem !important;
-        padding: 8px 10px !important; margin: 0 !important; width: auto !important; min-width: 45% !important;
+        flex-grow: 1 !important; 
+        text-align: center !important; 
+        font-size: 0.85rem !important;
+        padding: 8px 4px !important; 
+        width: 48% !important;
+        min-width: auto !important;
+    }
+
+    button {
+        min-height: 45px !important;
+        height: auto !important;
     }
+    
+    .fixed-height { 
+        height: auto !important; 
+        min-height: 300px !important;
+    }
+
 }
 footer {visibility: hidden}