modified app.py

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import json
 import os
 from datetime import datetime
+import urllib.parse
 
 # Data folder paths
 DATA_BASE = "Viewer/Data/Our_system"
@@ -54,94 +55,130 @@ def render_data_as_html(data, event_name, format_type, view_type):
     # Process clusters
     clusters = process_clusters(data, format_type)
     
+    # Genera un ID unico per questa istanza
+    unique_id = f"viewer_{abs(hash(event_name + format_type + view_type)) % 100000}"
+    
     # Render HTML con modal
-    html_parts = ['''
-    <!-- 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 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>
+    html_parts = [f'''
+    <div id="{unique_id}_container">
+        <!-- Modal for citations -->
+        <div id="{unique_id}_modal" class="citation-modal" style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px);">
+            <div class="citation-modal-content" 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); animation: slideIn 0.3s ease-out;">
+                <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 class="citation-close" style="color: white; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; transition: opacity 0.3s;">&times;</span>
                 </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 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 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 class="citation-context" style="background: #f8f9fa; padding: 15px; border-radius: 8px; line-height: 1.6; border-left: 4px solid #007bff;"></div>
+                    </div>
+                    <div style="margin-bottom: 20px;">
+                        <div style="font-weight: 600; color: #495057; margin-bottom: 8px; font-size: 1.05em;">Title:</div>
+                        <div class="citation-title"></div>
+                    </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 class="citation-url" href="#" target="_blank" style="color: #007bff; text-decoration: none; word-break: break-all; font-size: 0.95em;"></a></div>
+                    </div>
                 </div>
             </div>
         </div>
-    </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 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, unique_id)}
+                </div>
     ''']
     
     # Render clusters
     for cluster in clusters:
-        html_parts.append(render_cluster(cluster, format_type))
+        html_parts.append(render_cluster(cluster, format_type, unique_id))
     
-    html_parts.append('''
+    html_parts.append(f'''
+            </div>
         </div>
     </div>
     
+    <style>
+        @keyframes slideIn {{
+            from {{ transform: translateY(-50px); opacity: 0; }}
+            to {{ transform: translateY(0); opacity: 1; }}
+        }}
+        .citation-close:hover {{
+            opacity: 0.7;
+        }}
+        .citation-badge {{
+            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;
+        }}
+        .citation-badge:hover {{
+            background: #0056b3;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
+        }}
+    </style>
+    
     <script>
-    (function() {
-        const modal = document.getElementById('citationModal');
-        const closeBtn = document.getElementById('closeModal');
+    (function() {{
+        const container = document.getElementById('{unique_id}_container');
+        const modal = container.querySelector('#{unique_id}_modal');
+        const closeBtn = modal.querySelector('.citation-close');
         
-        // Close modal on click X
-        closeBtn.onclick = function() {
+        // Close on X button
+        closeBtn.addEventListener('click', function() {{
             modal.style.display = 'none';
-        };
+        }});
         
-        // Close modal on click outside
-        window.onclick = function(event) {
-            if (event.target === modal) {
+        // Close on outside click
+        modal.addEventListener('click', function(event) {{
+            if (event.target === modal) {{
                 modal.style.display = 'none';
-            }
-        };
+            }}
+        }});
         
-        // Close modal on ESC key
-        document.addEventListener('keydown', function(event) {
-            if (event.key === 'Escape' && modal.style.display === 'block') {
+        // Close on ESC
+        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;
+        container.addEventListener('click', function(event) {{
+            const target = event.target;
+            if (target.classList && target.classList.contains('citation-badge')) {{
+                const contextData = target.getAttribute('data-context');
+                const titleData = target.getAttribute('data-title');
+                const urlData = target.getAttribute('data-url');
                 
-                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 || '#';
+                if (contextData || titleData || urlData) {{
+                    const contextEl = modal.querySelector('.citation-context');
+                    const titleEl = modal.querySelector('.citation-title');
+                    const urlEl = modal.querySelector('.citation-url');
+                    
+                    contextEl.textContent = decodeURIComponent(contextData || 'No context available.');
+                    titleEl.textContent = decodeURIComponent(titleData || 'No title available.');
+                    urlEl.textContent = decodeURIComponent(urlData || 'No URL provided.');
+                    urlEl.href = decodeURIComponent(urlData || '#');
+                    
                     modal.style.display = 'block';
-                } catch (error) {
-                    console.error('Error parsing context data:', error);
-                }
-            }
-        });
-    })();
+                }}
+            }}
+        }});
+    }})();
     </script>
     ''')
     
@@ -184,7 +221,7 @@ def process_clusters(data, format_type):
     
     return clusters
 
-def render_cluster(cluster, format_type):
+def render_cluster(cluster, format_type, unique_id):
     """Render a single cluster as HTML"""
     header = cluster.get('cluster_headline', 'Cluster')
     
@@ -200,7 +237,7 @@ def render_cluster(cluster, format_type):
     if format_type == 'summary':
         summary_text = cluster.get('cluster_summary', 'No summary')
         contexts = cluster.get('used_contexts', {})
-        html += f'<div style="background: #e8f5e8; border-radius: 8px; padding: 15px; line-height: 1.6;">{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, unique_id)}</div>'
     else:
         qas = cluster.get('questions_and_answers', [])
         if not qas:
@@ -217,7 +254,7 @@ def render_cluster(cluster, format_type):
                         ❓ {escape_html(question)}
                     </div>
                     <div style="color: #6c757d; line-height: 1.5;">
-                        {process_citations(escape_html(answer), contexts)}
+                        {process_citations(escape_html(answer), contexts, unique_id)}
                     </div>
                 </div>
                 '''
@@ -225,7 +262,7 @@ def render_cluster(cluster, format_type):
     html += '</div></details></div>'
     return html
 
-def process_citations(text, contexts):
+def process_citations(text, contexts, unique_id):
     """Add citation spans with popup data"""
     import re
     
@@ -236,17 +273,11 @@ def process_citations(text, contexts):
         if not ctx:
             return match.group(0)
         
-        context_data = {
-            'context': ctx.get('context', ''),
-            'title': ctx.get('title', ''),
-            'url': ctx.get('url', '')
-        }
-        
-        # URL encode the JSON data
-        import urllib.parse
-        encoded = urllib.parse.quote(json.dumps(context_data))
+        context_text = urllib.parse.quote(ctx.get('context', '')[:500])
+        title_text = urllib.parse.quote(ctx.get('title', ''))
+        url_text = urllib.parse.quote(ctx.get('url', ''))
         
-        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 f'<span class="citation-badge" data-context="{context_text}" data-title="{title_text}" data-url="{url_text}">[{cit_id}]</span>'
     
     return re.sub(r'\[(\d+)\]', replace_citation, text)
 
@@ -288,20 +319,17 @@ def save_feedback(event, format_type, view_type, rating, comment):
 # Get events
 events = get_available_events()
 
-# CSS personalizzato - solo per lo sfondo
+# CSS personalizzato con font originale
 custom_css = """
+* {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+}
 body {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .gradio-container {
     max-width: 1200px !important;
 }
-/* Hover effect for citations */
-.citation:hover {
-    background: #0056b3 !important;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
-}
 """
 
 # Create Gradio interface