modified app.py

app.py

@@ -27,7 +27,7 @@ def get_available_events():
 def load_event_data(event_name, format_type, view_type):
     """Load and render event data as HTML"""
     if not event_name:
-        return '<div class="no-data"><h2>Please select an event from the dropdown above.</h2></div>'
+        return '<div style="text-align: center; padding: 40px; color: #6c757d;"><h2>Please select an event from the dropdown above.</h2></div>'
     
     key = f"{format_type}_{view_type}"
     folder = FOLDER_MAP.get(key)
@@ -39,49 +39,55 @@ def load_event_data(event_name, format_type, view_type):
         
         return render_data_as_html(data, event_name, format_type, view_type)
     except FileNotFoundError:
-        return f'<div class="no-data"><h2>⚠ File not found</h2><p>{filename}</p></div>'
+        return f'<div style="text-align: center; padding: 40px;"><h2>⚠ File not found</h2><p>{filename}</p></div>'
     except Exception as e:
-        return f'<div class="no-data"><h2>⚠ Error</h2><p>{str(e)}</p></div>'
+        return f'<div style="text-align: center; padding: 40px;"><h2>⚠ Error</h2><p>{str(e)}</p></div>'
 
 def render_data_as_html(data, event_name, format_type, view_type):
-    """Render JSON data as HTML with modal support"""
+    """Render JSON data as HTML"""
     
+    # Estrai informazioni
     file_name = data.get('file_name', event_name)
     summary = data.get('summary', 'No summary available')
     summary_contexts = data.get('summary_contexts', {})
     
+    # Process clusters
     clusters = process_clusters(data, format_type)
     
-    # Start HTML with modal structure
+    # Render HTML con modal
     html_parts = ['''
-    <div id="citationModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3 class="modal-title">Citation Details</h3>
-                <span class="close">&times;</span>
+    <!-- Modal for citations -->
+    <div id="citationModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px);">
+        <div style="background: white; margin: 5% auto; padding: 0; border-radius: 15px; width: 90%; max-width: 700px; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);">
+            <div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 20px; border-radius: 15px 15px 0 0; display: flex; justify-content: space-between; align-items: center;">
+                <h3 style="font-size: 1.2em; font-weight: 600; margin: 0;">Citation Details</h3>
+                <span id="closeModal" style="color: white; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1;">&times;</span>
             </div>
-            <div class="modal-body">
-                <div class="context-section">
-                    <div class="context-label">Context:</div>
-                    <div class="context-content" id="modalContext"></div>
+            <div style="padding: 25px;">
+                <div style="margin-bottom: 20px;">
+                    <div style="font-weight: 600; color: #495057; margin-bottom: 8px; font-size: 1.05em;">Context:</div>
+                    <div id="modalContext" style="background: #f8f9fa; padding: 15px; border-radius: 8px; line-height: 1.6; border-left: 4px solid #007bff;"></div>
                 </div>
-                <div class="context-section">
-                    <div class="context-label">Title:</div>
+                <div style="margin-bottom: 20px;">
+                    <div style="font-weight: 600; color: #495057; margin-bottom: 8px; font-size: 1.05em;">Title:</div>
                     <div id="modalTitle"></div>
                 </div>
-                <div class="context-section context-url">
-                    <div class="context-label">Source URL:</div>
-                    <div><a id="modalUrl" href="#" target="_blank"></a></div>
+                <div style="margin-top: 15px;">
+                    <div style="font-weight: 600; color: #495057; margin-bottom: 8px; font-size: 1.05em;">Source URL:</div>
+                    <div><a id="modalUrl" href="#" target="_blank" style="color: #007bff; text-decoration: none; word-break: break-all; font-size: 0.95em;"></a></div>
                 </div>
             </div>
         </div>
     </div>
     
-    <div class="file-section">
-        <div class="file-header collapsible-header">📄 ''' + escape_html(file_name) + '''</div>
-        <div class="file-content collapsible-content">
-            <div>
-                <div class="summary"><strong>Summary:</strong><br>''' + process_citations(escape_html(summary), summary_contexts) + '''</div>
+    <div style="margin-bottom: 40px; border: 2px solid #e1e5e9; border-radius: 12px; overflow: hidden;">
+        <div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 20px; font-size: 1.3em; font-weight: 600;">
+            📄 ''' + escape_html(file_name) + '''
+        </div>
+        <div style="padding: 25px;">
+            <div style="background: #f8f9fa; border-left: 4px solid #667eea; padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; line-height: 1.6;">
+                <strong>Summary:</strong><br>''' + process_citations(escape_html(summary), summary_contexts) + '''
+            </div>
     ''']
     
     # Render clusters
@@ -89,59 +95,53 @@ def render_data_as_html(data, event_name, format_type, view_type):
         html_parts.append(render_cluster(cluster, format_type))
     
     html_parts.append('''
-            </div>
         </div>
     </div>
     
     <script>
-        (function() {
-            // Initialize modal
-            const modal = document.getElementById('citationModal');
-            const closeBtn = modal.querySelector('.close');
-            
-            closeBtn.onclick = function() {
+    (function() {
+        const modal = document.getElementById('citationModal');
+        const closeBtn = document.getElementById('closeModal');
+        
+        // Close modal on click X
+        closeBtn.onclick = function() {
+            modal.style.display = 'none';
+        };
+        
+        // Close modal on click outside
+        window.onclick = function(event) {
+            if (event.target === modal) {
                 modal.style.display = 'none';
-            };
-            
-            window.onclick = function(event) {
-                if (event.target === modal) {
-                    modal.style.display = 'none';
-                }
-            };
-            
-            document.addEventListener('keydown', function(event) {
-                if (event.key === 'Escape' && modal.style.display === 'block') {
-                    modal.style.display = 'none';
-                }
-            });
-            
-            // Handle citation clicks
-            document.addEventListener('click', function(event) {
-                if (event.target.classList.contains('citation')) {
-                    const contextDataStr = event.target.getAttribute('data-context');
-                    if (!contextDataStr) return;
-                    
-                    try {
-                        const contextData = JSON.parse(decodeURIComponent(contextDataStr));
-                        document.getElementById('modalContext').textContent = contextData.context || 'No context available.';
-                        document.getElementById('modalTitle').textContent = contextData.title || 'No title available.';
-                        document.getElementById('modalUrl').textContent = contextData.url || 'No URL provided.';
-                        document.getElementById('modalUrl').href = contextData.url || '#';
-                        modal.style.display = 'block';
-                    } catch (error) {
-                        console.error('Error parsing context data:', error);
-                    }
-                }
-            });
-            
-            // Handle collapsibles
-            document.addEventListener('click', function(event) {
-                const header = event.target.closest('.collapsible-header');
-                if (header) {
-                    header.classList.toggle('active');
+            }
+        };
+        
+        // Close modal on ESC key
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape' && modal.style.display === 'block') {
+                modal.style.display = 'none';
+            }
+        });
+        
+        // Handle citation clicks
+        document.addEventListener('click', function(event) {
+            if (event.target && event.target.classList.contains('citation')) {
+                const contextDataStr = event.target.getAttribute('data-context');
+                if (!contextDataStr) return;
+                
+                try {
+                    const contextData = JSON.parse(decodeURIComponent(contextDataStr));
+                    document.getElementById('modalContext').textContent = contextData.context || 'No context available.';
+                    document.getElementById('modalTitle').textContent = contextData.title || 'No title available.';
+                    const urlElement = document.getElementById('modalUrl');
+                    urlElement.textContent = contextData.url || 'No URL provided.';
+                    urlElement.href = contextData.url || '#';
+                    modal.style.display = 'block';
+                } catch (error) {
+                    console.error('Error parsing context data:', error);
                 }
-            });
-        })();
+            }
+        });
+    })();
     </script>
     ''')
     
@@ -189,20 +189,22 @@ def render_cluster(cluster, format_type):
     header = cluster.get('cluster_headline', 'Cluster')
     
     html = f'''
-    <div class="cluster">
-        <div class="cluster-header collapsible-header">🎯 {escape_html(header)}</div>
-        <div class="cluster-content collapsible-content">
-            <div>
+    <div style="margin: 30px 0; border: 1px solid #dee2e6; border-radius: 10px; overflow: hidden;">
+        <details>
+            <summary style="background: linear-gradient(45deg, #28a745, #20c997); color: white; padding: 15px 20px; font-weight: 600; font-size: 1.1em; cursor: pointer;">
+                🎯 {escape_html(header)}
+            </summary>
+            <div style="padding: 20px;">
     '''
     
     if format_type == 'summary':
         summary_text = cluster.get('cluster_summary', 'No summary')
         contexts = cluster.get('used_contexts', {})
-        html += f'<div class="cluster-summary">{process_citations(escape_html(summary_text), contexts)}</div>'
+        html += f'<div style="background: #e8f5e8; border-radius: 8px; padding: 15px; line-height: 1.6;">{process_citations(escape_html(summary_text), contexts)}</div>'
     else:
         qas = cluster.get('questions_and_answers', [])
         if not qas:
-            html += '<div class="no-data">No Q&A available</div>'
+            html += '<div style="text-align: center; color: #6c757d; font-style: italic;">No Q&A available</div>'
         else:
             for qa in qas:
                 question = qa.get('question') or qa.get('Question', 'No question')
@@ -210,21 +212,21 @@ def render_cluster(cluster, format_type):
                 contexts = qa.get('used_contexts') or qa.get('summary_contexts', {})
                 
                 html += f'''
-                <div class="qa-item">
-                    <div class="question">❓ {escape_html(question)}</div>
-                    <div class="answer">{process_citations(escape_html(answer), contexts)}</div>
+                <div style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #007bff;">
+                    <div style="font-weight: 600; color: #495057; margin-bottom: 10px; font-size: 1.05em;">
+                        ❓ {escape_html(question)}
+                    </div>
+                    <div style="color: #6c757d; line-height: 1.5;">
+                        {process_citations(escape_html(answer), contexts)}
+                    </div>
                 </div>
                 '''
     
-    html += '''
-            </div>
-        </div>
-    </div>
-    '''
+    html += '</div></details></div>'
     return html
 
 def process_citations(text, contexts):
-    """Add citation spans with data for modal popup"""
+    """Add citation spans with popup data"""
     import re
     
     def replace_citation(match):
@@ -239,9 +241,12 @@ def process_citations(text, contexts):
             'title': ctx.get('title', ''),
             'url': ctx.get('url', '')
         }
-        encoded = escape_html(json.dumps(context_data))
         
-        return f'<span class="citation" data-context="{encoded}">[{cit_id}]</span>'
+        # URL encode the JSON data
+        import urllib.parse
+        encoded = urllib.parse.quote(json.dumps(context_data))
+        
+        return f'<span class="citation" data-context="{encoded}" style="display: inline; background: #007bff; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; font-weight: 600; cursor: pointer; margin: 0 2px; transition: all 0.3s ease;">[{cit_id}]</span>'
     
     return re.sub(r'\[(\d+)\]', replace_citation, text)
 
@@ -283,151 +288,19 @@ def save_feedback(event, format_type, view_type, rating, comment):
 # Get events
 events = get_available_events()
 
-# CSS completo dal tuo HTML originale
+# CSS personalizzato - solo per lo sfondo
 custom_css = """
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { 
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
-    min-height: 100vh; 
-    color: #333; 
+body {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .gradio-container {
     max-width: 1200px !important;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-}
-.file-section { margin-bottom: 40px; border: 2px solid #e1e5e9; border-radius: 12px; overflow: hidden; }
-.file-header { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 20px; font-size: 1.3em; font-weight: 600; }
-.file-content { padding: 25px; }
-.summary { background: #f8f9fa; border-left: 4px solid #667eea; padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; line-height: 1.6; white-space: pre-wrap; }
-.cluster { margin: 30px 0; border: 1px solid #dee2e6; border-radius: 10px; overflow: hidden; }
-.cluster-header { background: linear-gradient(45deg, #28a745, #20c997); color: white; padding: 15px 20px; font-weight: 600; font-size: 1.1em; }
-.cluster-content { padding: 20px; }
-.cluster-summary { background: #e8f5e8; border-radius: 8px; padding: 15px; line-height: 1.6; white-space: pre-wrap; }
-.qa-item { margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #007bff; }
-.question { font-weight: 600; color: #495057; margin-bottom: 10px; font-size: 1.05em; }
-.answer { color: #6c757d; line-height: 1.5; white-space: pre-wrap; }
-.no-data { text-align: center; color: #6c757d; font-style: italic; padding: 40px; }
-
-.citation { 
-    display: inline; 
-    background: #007bff; 
-    color: white; 
-    padding: 2px 6px; 
-    border-radius: 4px; 
-    font-size: 0.85em; 
-    font-weight: 600; 
-    cursor: pointer; 
-    margin: 0 2px; 
-    transition: all 0.3s ease; 
-    position: relative; 
-}
-.citation:hover { 
-    background: #0056b3; 
-    transform: translateY(-1px); 
-    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); 
-}
-
-.modal { 
-    display: none; 
-    position: fixed; 
-    z-index: 1000; 
-    left: 0; 
-    top: 0; 
-    width: 100%; 
-    height: 100%; 
-    background-color: rgba(0, 0, 0, 0.5); 
-    backdrop-filter: blur(3px); 
-}
-.modal-content { 
-    background: white; 
-    margin: 5% auto; 
-    padding: 0; 
-    border-radius: 15px; 
-    width: 90%; 
-    max-width: 700px; 
-    max-height: 80vh; 
-    overflow-y: auto; 
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); 
-    animation: modalSlideIn 0.3s ease-out; 
-}
-@keyframes modalSlideIn { 
-    from { transform: translateY(-50px); opacity: 0; } 
-    to { transform: translateY(0); opacity: 1; } 
-}
-.modal-header { 
-    background: linear-gradient(135deg, #667eea, #764ba2); 
-    color: white; 
-    padding: 20px; 
-    border-radius: 15px 15px 0 0; 
-    display: flex; 
-    justify-content: space-between; 
-    align-items: center; 
-}
-.modal-title { font-size: 1.2em; font-weight: 600; margin: 0; }
-.close { 
-    color: white; 
-    font-size: 28px; 
-    font-weight: bold; 
-    cursor: pointer; 
-    line-height: 1; 
-    transition: opacity 0.3s; 
-}
-.close:hover { opacity: 0.7; }
-.modal-body { padding: 25px; }
-.context-section { margin-bottom: 20px; }
-.context-label { font-weight: 600; color: #495057; margin-bottom: 8px; font-size: 1.05em; }
-.context-content { 
-    background: #f8f9fa; 
-    padding: 15px; 
-    border-radius: 8px; 
-    line-height: 1.6; 
-    border-left: 4px solid #007bff; 
 }
-.context-url { margin-top: 15px; }
-.context-url a { 
-    color: #007bff; 
-    text-decoration: none; 
-    word-break: break-all; 
-    font-size: 0.95em; 
-}
-.context-url a:hover { text-decoration: underline; }
-
-.collapsible-header { 
-    cursor: pointer; 
-    position: relative; 
-    transition: background-color 0.2s ease; 
-}
-.collapsible-header:hover { filter: brightness(1.1); }
-.collapsible-header::after { 
-    content: '+'; 
-    font-family: monospace; 
-    font-weight: bold; 
-    position: absolute; 
-    right: 20px; 
-    top: 50%; 
-    transform: translateY(-50%); 
-    font-size: 1.6em; 
-    line-height: 1; 
-    transition: transform 0.3s ease; 
-}
-.collapsible-header.active::after { 
-    content: '−'; 
-    transform: translateY(-50%) rotate(180deg); 
-}
-
-.collapsible-content {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows 0.4s ease-out;
-}
-
-.collapsible-header.active + .collapsible-content {
-    grid-template-rows: 1fr;
-}
-
-.collapsible-content > div {
-    overflow: hidden;
+/* Hover effect for citations */
+.citation:hover {
+    background: #0056b3 !important;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
 }
 """
 
@@ -436,8 +309,8 @@ with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft(), css=custom_css) as
     
     gr.Markdown("""
     <div style="text-align: center; color: white; margin-bottom: 30px;">
-        <h1 style="font-size: 2.5em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">Our Report</h1>
-        <p style="font-size: 1.2em; opacity: 0.9;">Select an event and view to visualize the data</p>
+        <h1 style="font-size: 2.5em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">📊 Our Report Viewer</h1>
+        <p style="font-size: 1.2em; opacity: 0.9;">Explore events organized by topics or SDGs</p>
     </div>
     """)
     
@@ -463,7 +336,7 @@ with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft(), css=custom_css) as
                 )
         
         content_html = gr.HTML(
-            '<div class="no-data"><h2>Please select an event from the dropdown above.</h2></div>'
+            '<div style="text-align: center; padding: 40px; color: #6c757d;"><h2>Please select an event from the dropdown above.</h2></div>'
         )
         
         # Update on any change