Update ui/ui_generators.py

ui/ui_generators.py

@@ -32,15 +32,15 @@ ACTIVE_ICON = "❌ Close" # Ensure this matches app.py
 
 def build_home_tab_ui():
     """
-    Constructs the entire UI for the Home tab, including the header,
-    overview, feature cards, and navigation buttons.
+    Costruisce l'intera interfaccia utente per la scheda Home, inclusi l'intestazione,
+    la panoramica, le schede delle funzionalità e i pulsanti di navigazione.
 
     Returns:
-        tuple: A tuple containing the Gradio Button components for
-               Graphs, Reports, and OKR Table, allowing app.py to
-               attach click handlers for tab navigation.
+        tuple: Una tupla contenente i componenti Gradio Button per
+               Grafici, Report e Tabella OKR, consentendo ad app.py di
+               associare gestori di click per la navigazione tra le schede.
     """
-    # Custom CSS for enhanced styling
+    # CSS personalizzato per uno stile migliorato
     css_styles = """
     <style>
         .hero-section {
@@ -75,7 +75,7 @@ def build_home_tab_ui():
             font-size: 3.2em;
             font-weight: 800;
             margin-bottom: 24px;
-            /* Apply gradient and text-fill to the text, but not the emoji */
+            /* Applica gradiente e riempimento del testo al testo, ma non all'emoji */
             background: linear-gradient(45deg, #ffffff, #e0e7ff);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -84,16 +84,16 @@ def build_home_tab_ui():
             line-height: 1.2;
         }
 
-        /* NEW CSS: Style for the rocket emoji */
+        /* NUOVO CSS: Stile per l'emoji del razzo */
         .hero-title .rocket-emoji {
-            background: none; /* Remove background effect */
-            -webkit-background-clip: unset; /* Revert background clipping */
+            background: none; /* Rimuovi effetto di sfondo */
+            -webkit-background-clip: unset; /* Ripristina il ritaglio dello sfondo */
             background-clip: unset;
-            -webkit-text-fill-color: initial; /* Revert text fill color to default */
-            color: initial; /* Ensure emoji color is default (often colorful) */
-            text-shadow: none; /* Remove text shadow for the emoji if it impacts it negatively */
-            display: inline-block; /* Ensure it respects vertical alignment */
-            vertical-align: middle; /* Adjust vertical alignment if needed */
+            -webkit-text-fill-color: initial; /* Ripristina il colore di riempimento del testo al valore predefinito */
+            color: initial; /* Assicurati che il colore dell'emoji sia quello predefinito (spesso colorato) */
+            text-shadow: none; /* Rimuovi l'ombra del testo per l'emoji se la influisce negativamente */
+            display: inline-block; /* Assicurati che rispetti l'allineamento verticale */
+            vertical-align: middle; /* Regola l'allineamento verticale se necessario */
         }
         
         .hero-subtitle {
@@ -371,11 +371,11 @@ def build_home_tab_ui():
     """
     
     with gr.Column(scale=1, elem_classes="home-page-container"):
-        # Inject custom CSS
+        # Inietta CSS personalizzato
         gr.HTML(css_styles)
         
-        # Main hero section
-        # MODIFIED: Wrapped the rocket emoji in a <span> with class "rocket-emoji"
+        # Sezione principale "hero"
+        # MODIFICATO: Racchiuso l'emoji del razzo in uno <span> con la classe "rocket-emoji"
         gr.HTML("""
             <div class="hero-section">
                 <div class="hero-content">
@@ -383,64 +383,64 @@ def build_home_tab_ui():
                         <span class="rocket-emoji">🚀</span> LinkedIn Employer Brand Analytics
                     </h1>
                     <p class="hero-subtitle">
-                        Transform your LinkedIn presence with data-driven insights and actionable strategies
+                        Trasforma la tua presenza su LinkedIn con approfondimenti basati sui dati e strategie attuabili
                     </p>
                     <p class="hero-description">
-                        Measure, analyze, and enhance your employer brand to attract top talent and build a stronger digital presence
+                        Misura, analizza e migliora il tuo marchio del datore di lavoro per attrarre i migliori talenti e costruire una presenza digitale più forte
                     </p>
                 </div>
             </div>
         """)
 
-        # Overview section with improved spacing
+        # Sezione di panoramica con spaziatura migliorata
         gr.HTML("""
             <div class="overview-section">
                 <h2 class="overview-header">
-                    <span>📊</span> What This Dashboard Offers
+                    <span>📊</span> Cosa Offre Questa Dashboard
                 </h2>
                 <p class="overview-text">
-                    Our comprehensive analytics platform helps you understand and optimize your LinkedIn employer brand performance with real-time insights, automated reporting, and AI-powered recommendations.
+                    La nostra piattaforma di analisi completa ti aiuta a comprendere e ottimizzare le prestazioni del tuo marchio del datore di lavoro su LinkedIn con approfondimenti in tempo reale, report automatizzati e raccomandazioni basate sull'intelligenza artificiale.
                 </p>
                 <div class="features-grid">
                     <div class="feature-item">
                         <span class="feature-icon">📈</span>
-                        <span class="feature-text">Real-time data visualization and trend analysis</span>
+                        <span class="feature-text">Visualizzazione dei dati in tempo reale e analisi delle tendenze</span>
                     </div>
                     <div class="feature-item">
                         <span class="feature-icon">📋</span>
-                        <span class="feature-text">Automated quarterly and weekly performance reports</span>
+                        <span class="feature-text">Report automatici trimestrali e settimanali sulle prestazioni</span>
                     </div>
                     <div class="feature-item">
                         <span class="feature-icon">🎯</span>
-                        <span class="feature-text">AI-powered OKRs and actionable recommendations</span>
+                        <span class="feature-text">OKR basati sull'IA e raccomandazioni attuabili</span>
                     </div>
                     <div class="feature-item">
                         <span class="feature-icon">🚀</span>
-                        <span class="feature-text">Strategic insights to improve employer branding</span>
+                        <span class="feature-text">Approfondimenti strategici per migliorare il marchio del datore di lavoro</span>
                     </div>
                 </div>
             </div>
         """)
 
-        # Navigation cards with improved layout
+        # Schede di navigazione con layout migliorato
         gr.HTML("""
             <div class="nav-cards-container">
                 <div class="nav-card nav-card-graphs">
                     <div>
                         <h3 class="nav-card-header">
-                            <span class="nav-card-icon">📈</span> Interactive Graphs
+                            <span class="nav-card-icon">📈</span> Grafici Interattivi
                         </h3>
                         <p class="nav-card-description">
-                            Explore dynamic visualizations of your LinkedIn performance metrics. Track post engagement, 
-                            follower growth, mentions sentiment, and identify trends over time with interactive charts 
-                            and advanced filtering options.
+                            Esplora visualizzazioni dinamiche delle tue metriche di performance su LinkedIn. Tieni traccia del coinvolgimento dei post, 
+                            della crescita dei follower, del sentiment delle menzioni e identifica le tendenze nel tempo con grafici interattivi 
+                            e opzioni di filtro avanzate.
                         </p>
                     </div>
                     <div class="nav-card-footer">
                         <div class="nav-card-features">
-                            ✨ Real-time analytics<br/>
-                            📊 Multiple chart types<br/>
-                            🔍 Advanced filtering
+                            ✨ Analisi in tempo reale<br/>
+                            📊 Tipi di grafici multipli<br/>
+                            🔍 Filtri avanzati
                         </div>
                         <div class="nav-card-badge">
                             <span class="nav-card-badge-icon">📊</span>
@@ -451,19 +451,19 @@ def build_home_tab_ui():
                 <div class="nav-card nav-card-reports">
                     <div>
                         <h3 class="nav-card-header">
-                            <span class="nav-card-icon">📊</span> Analysis Reports
+                            <span class="nav-card-icon">📊</span> Report di Analisi
                         </h3>
                         <p class="nav-card-description">
-                            Access comprehensive quarterly and weekly reports powered by AI analysis. Get detailed 
-                            insights into your employer brand performance, competitor analysis, and market positioning 
-                            with automated report generation.
+                            Accedi a report trimestrali e settimanali completi basati sull'analisi dell'IA. Ottieni approfondimenti dettagliati 
+                            sulle prestazioni del tuo marchio del datore di lavoro, analisi della concorrenza e posizionamento di mercato 
+                            con la generazione automatica di report.
                         </p>
                     </div>
                     <div class="nav-card-footer">
                         <div class="nav-card-features">
-                            📋 Automated reports<br/>
-                            🤖 AI-powered insights<br/>
-                            📅 Weekly & quarterly
+                            📋 Report automatizzati<br/>
+                            🤖 Approfondimenti basati sull'IA<br/>
+                            📅 Settimanali e trimestrali
                         </div>
                         <div class="nav-card-badge">
                             <span class="nav-card-badge-icon">📄</span>
@@ -474,19 +474,19 @@ def build_home_tab_ui():
                 <div class="nav-card nav-card-okr">
                     <div>
                         <h3 class="nav-card-header">
-                            <span class="nav-card-icon">🎯</span> OKR Action Plan
+                            <span class="nav-card-icon">🎯</span> Piano d'Azione OKR
                         </h3>
                         <p class="nav-card-description">
-                            Discover AI-generated Objectives and Key Results (OKRs) with concrete action items. 
-                            Transform data insights into measurable goals and strategic initiatives to enhance 
-                            your employer brand effectively.
+                            Scopri Obiettivi e Risultati Chiave (OKR) generati dall'IA con azioni concrete. 
+                            Trasforma gli approfondimenti dei dati in obiettivi misurabili e iniziative strategiche per migliorare 
+                            efficacemente il tuo marchio del datore di lavoro.
                         </p>
                     </div>
                     <div class="nav-card-footer">
                         <div class="nav-card-features">
-                            🎯 Strategic objectives<br/>
-                            ✅ Actionable tasks<br/>
-                            📈 Measurable outcomes
+                            🎯 Obiettivi strategici<br/>
+                            ✅ Compiti attuabili<br/>
+                            📈 Risultati misurabili
                         </div>
                         <div class="nav-card-badge">
                             <span class="nav-card-badge-icon">🎯</span>
@@ -497,19 +497,19 @@ def build_home_tab_ui():
                 <div class="nav-card nav-card-help">
                     <div>
                         <h3 class="nav-card-header">
-                            <span class="nav-card-icon">💡</span> Getting Started
+                            <span class="nav-card-icon">💡</span> Per Iniziare
                         </h3>
                         <p class="nav-card-description">
-                            New to employer brand analytics? Start with the Graphs section to 
-                            understand your current performance, then check Reports for detailed 
-                            analysis, and finally explore OKRs for actionable next steps.
+                            Nuovo all'analisi del marchio del datore di lavoro? Inizia con la sezione Grafici per 
+                            comprendere le tue prestazioni attuali, quindi controlla i Report per un'analisi dettagliata 
+                            e infine esplora gli OKR per i prossimi passi attuabili.
                         </p>
                     </div>
                     <div class="nav-card-footer">
                         <div style="background: rgba(255,255,255,0.15); padding: 16px; border-radius: 12px; width: 100%; text-align: center;">
                             <div style="color: rgba(255,255,255,0.95); font-size: 1em;">
-                                <strong>💪 Pro Tip:</strong><br/>
-                                <span style="font-size: 0.9em;">Regular monitoring leads to 40% better employer brand performance</span>
+                                <strong>💪 Consiglio Pro:</strong><br/>
+                                <span style="font-size: 0.9em;">Il monitoraggio regolare porta a un miglioramento del 40% nelle prestazioni del marchio del datore di lavoro</span>
                             </div>
                         </div>
                     </div>
@@ -517,51 +517,51 @@ def build_home_tab_ui():
             </div>
         """)
         
-        # Create buttons with better spacing
+        # Crea pulsanti con una migliore spaziatura
         with gr.Row(equal_height=True):
             with gr.Column():
-                btn_graphs = gr.Button("🚀 Explore Graphs", variant="primary", size="lg", 
+                btn_graphs = gr.Button("🚀 Esplora Grafici", variant="primary", size="lg", 
                                        elem_classes="nav-button", scale=1)
                 
             with gr.Column():
-                btn_reports = gr.Button("📊 View Reports", variant="primary", size="lg", 
+                btn_reports = gr.Button("📊 Visualizza Report", variant="primary", size="lg", 
                                         elem_classes="nav-button", scale=1)
 
         with gr.Row(equal_height=True):
             with gr.Column():
-                btn_okr = gr.Button("🎯 Access OKRs", variant="primary", size="lg", 
-                                   elem_classes="nav-button", scale=1)
+                btn_okr = gr.Button("🎯 Accedi agli OKR", variant="primary", size="lg", 
+                                      elem_classes="nav-button", scale=1)
                 
             with gr.Column():
-                btn_help = gr.Button("📚 Documentation", variant="secondary", size="lg", 
+                btn_help = gr.Button("📚 Documentazione", variant="secondary", size="lg", 
                                          elem_classes="nav-button", scale=1)
 
-        # How it works section with enhanced styling
+        # Sezione "Come funziona" con stile migliorato
         gr.HTML("""
             <div class="how-it-works-section">
                 <h3 class="how-it-works-header">
-                    <span>ℹ️</span> How It Works
+                    <span>ℹ️</span> Come Funziona
                 </h3>
                 <div class="steps-grid">
                     <div class="step-item">
                         <div class="step-number">1</div>
                         <div class="step-content">
-                            <div class="step-title">Data Collection</div>
-                            <div class="step-description">Automatically syncs with your LinkedIn organization data and processes engagement metrics in real-time</div>
+                            <div class="step-title">Raccolta Dati</div>
+                            <div class="step-description">Si sincronizza automaticamente con i dati della tua organizzazione LinkedIn ed elabora le metriche di coinvolgimento in tempo reale</div>
                         </div>
                     </div>
                     <div class="step-item">
                         <div class="step-number">2</div>
                         <div class="step-content">
-                            <div class="step-title">AI Analysis</div>
-                            <div class="step-description">Advanced algorithms analyze trends, sentiment, and performance patterns to generate actionable insights</div>
+                            <div class="step-title">Analisi IA</div>
+                            <div class="step-description">Algoritmi avanzati analizzano tendenze, sentiment e modelli di performance per generare approfondimenti attuabili</div>
                         </div>
                     </div>
                     <div class="step-item">
                         <div class="step-number">3</div>
                         <div class="step-content">
-                            <div class="step-title">Actionable Results</div>
-                            <div class="step-description">Receive specific recommendations, measurable goals, and strategic action plans to improve your employer brand</div>
+                            <div class="step-title">Risultati Attuabili</div>
+                            <div class="step-description">Ricevi raccomandazioni specifiche, obiettivi misurabili e piani d'azione strategici per migliorare il tuo marchio del datore di lavoro</div>
                         </div>
                     </div>
                 </div>
@@ -571,6 +571,7 @@ def build_home_tab_ui():
     return btn_graphs, btn_reports, btn_okr, btn_help
 
 
+
 def create_analytics_plot_panel(plot_label_str, plot_id_str):
     """
     Creates an individual plot panel with its plot component and action buttons.