modified app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 import json
 import os
-from pathlib import Path
+from datetime import datetime
 
 # Data folder paths
 DATA_BASE = "Viewer/Data/Our_system"
@@ -24,14 +24,158 @@ def get_available_events():
                         events.add(event_name)
     return sorted(list(events))
 
-def get_folder_index(folder_key):
-    """Create index.json for a folder"""
-    folder = FOLDER_MAP.get(folder_key)
-    if not folder or not os.path.exists(folder):
-        return []
-    
-    files = [f for f in os.listdir(folder) if f.endswith('_combined_data.json')]
-    return files
+def load_event_data(event_name, format_type, view_type):
+    """Load and render event data as HTML"""
+    if not event_name:
+        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)
+    filename = f"{folder}/{event_name}_combined_data.json"
+    
+    try:
+        with open(filename, 'r', encoding='utf-8') as f:
+            data = json.load(f)
+        
+        return render_data_as_html(data, event_name, format_type, view_type)
+    except FileNotFoundError:
+        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 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"""
+    
+    # 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)
+    
+    # Render HTML
+    html_parts = [f'''
+    <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
+    for cluster in clusters:
+        html_parts.append(render_cluster(cluster, format_type))
+    
+    html_parts.append('</div></div>')
+    
+    return ''.join(html_parts)
+
+def process_clusters(data, format_type):
+    """Extract clusters from data"""
+    if 'clusters' in data and isinstance(data['clusters'], list):
+        return data['clusters']
+    
+    ignore_keys = ['file_name', 'summary', 'summary_contexts']
+    clusters = []
+    
+    for key, value in data.items():
+        if key in ignore_keys:
+            continue
+            
+        if format_type == 'qa':
+            clusters.append({
+                'cluster_headline': key,
+                'questions_and_answers': value if isinstance(value, list) else []
+            })
+        else:
+            if isinstance(value, list):
+                summary_text = '\n\n'.join([
+                    v.get('cluster_summary') or v.get('summary', '') 
+                    for v in value if isinstance(v, dict)
+                ])
+                clusters.append({
+                    'cluster_headline': key,
+                    'cluster_summary': summary_text or 'No summary',
+                    'used_contexts': value[0].get('used_contexts', {}) if value else {}
+                })
+            elif isinstance(value, dict):
+                clusters.append({
+                    'cluster_headline': key,
+                    'cluster_summary': value.get('cluster_summary') or value.get('summary', 'No summary'),
+                    'used_contexts': value.get('used_contexts', {})
+                })
+    
+    return clusters
+
+def render_cluster(cluster, format_type):
+    """Render a single cluster as HTML"""
+    header = cluster.get('cluster_headline', 'Cluster')
+    
+    html = f'''
+    <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 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 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')
+                answer = qa.get('updated_retrieved_answer') or qa.get('retrieved_answer') or qa.get('answer', 'No answer')
+                contexts = qa.get('used_contexts') or qa.get('summary_contexts', {})
+                
+                html += f'''
+                <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></details></div>'
+    return html
+
+def process_citations(text, contexts):
+    """Add citation links to text"""
+    import re
+    
+    def replace_citation(match):
+        cit_id = match.group(1)
+        ctx = contexts.get(cit_id, {})
+        
+        if not ctx:
+            return match.group(0)
+        
+        title = ctx.get('title', 'Source')
+        url = ctx.get('url', '#')
+        context_text = ctx.get('context', 'No context available')
+        
+        return f'<a href="{url}" target="_blank" title="{escape_html(context_text)[:200]}..." style="background: #007bff; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; text-decoration: none; margin: 0 2px;">[{cit_id}]</a>'
+    
+    return re.sub(r'\[(\d+)\]', replace_citation, text)
+
+def escape_html(text):
+    """Escape HTML special characters"""
+    if not text:
+        return ''
+    return str(text).replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;').replace("'", '&#039;')
 
 def save_feedback(event, format_type, view_type, rating, comment):
     """Save feedback to JSON file"""
@@ -40,18 +184,14 @@ def save_feedback(event, format_type, view_type, rating, comment):
     
     feedback_dir = "feedback"
     os.makedirs(feedback_dir, exist_ok=True)
-    
     feedback_file = os.path.join(feedback_dir, "feedback.json")
     
-    # Load existing feedback
     if os.path.exists(feedback_file):
         with open(feedback_file, 'r', encoding='utf-8') as f:
             feedbacks = json.load(f)
     else:
         feedbacks = []
     
-    # Add new feedback
-    from datetime import datetime
     feedbacks.append({
         "timestamp": datetime.now().isoformat(),
         "event": event,
@@ -61,84 +201,86 @@ def save_feedback(event, format_type, view_type, rating, comment):
         "comment": comment
     })
     
-    # Save
     with open(feedback_file, 'w', encoding='utf-8') as f:
         json.dump(feedbacks, f, indent=2, ensure_ascii=False)
     
     return "✅ Thank you for your feedback!"
 
-# Create index.json files for each folder
-print("Creating index files...")
-for key, folder in FOLDER_MAP.items():
-    if os.path.exists(folder):
-        index_path = os.path.join(folder, "index.json")
-        files = get_folder_index(key)
-        with open(index_path, 'w') as f:
-            json.dump(files, f)
-        print(f"Created {index_path} with {len(files)} files")
-    else:
-        print(f"WARNING: Folder {folder} does not exist")
+# Get events
+events = get_available_events()
 
-# Read HTML file - prova diversi percorsi possibili
-html_paths = ["Viewer/viewer_v2.html", "viewer_v2.html", "./viewer_v2.html"]
-original_html = None
-
-for html_path in html_paths:
-    if os.path.exists(html_path):
-        with open(html_path, "r", encoding="utf-8") as f:
-            original_html = f.read()
-        print(f"✅ Found HTML at: {html_path}")
-        break
-
-if original_html is None:
-    print("❌ ERROR: viewer_v2.html not found in any expected location!")
-    print(f"Current directory: {os.getcwd()}")
-    print(f"Files in current directory: {os.listdir('.')}")
-    if os.path.exists('Viewer'):
-        print(f"Files in Viewer directory: {os.listdir('Viewer')}")
-    original_html = "<h1>Error: viewer_v2.html not found</h1><p>Please check the file structure.</p>"
+# CSS personalizzato
+custom_css = """
+body {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+.gradio-container {
+    max-width: 1200px !important;
+}
+"""
 
 # Create Gradio interface
-with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 📊 Our Report Viewer")
-    gr.Markdown("Explore events organized by topics or SDGs")
+with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft(), css=custom_css) as demo:
+    
+    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 Viewer</h1>
+        <p style="font-size: 1.2em; opacity: 0.9;">Explore events organized by topics or SDGs</p>
+    </div>
+    """)
     
     with gr.Tab("📖 Viewer"):
-        gr.HTML(original_html)
+        with gr.Row():
+            with gr.Column(scale=2):
+                event_dropdown = gr.Dropdown(
+                    choices=events,
+                    label="Select Event",
+                    value=None
+                )
+            with gr.Column(scale=1):
+                view_radio = gr.Radio(
+                    choices=["subtopics", "sdgs"],
+                    label="Arranged by",
+                    value="subtopics"
+                )
+            with gr.Column(scale=1):
+                format_radio = gr.Radio(
+                    choices=["qa", "summary"],
+                    label="Presented as",
+                    value="qa"
+                )
+        
+        content_html = gr.HTML(
+            '<div style="text-align: center; padding: 40px; color: #6c757d;"><h2>Please select an event from the dropdown above.</h2></div>'
+        )
+        
+        # Update on any change
+        event_dropdown.change(
+            load_event_data,
+            inputs=[event_dropdown, format_radio, view_radio],
+            outputs=content_html
+        )
+        format_radio.change(
+            load_event_data,
+            inputs=[event_dropdown, format_radio, view_radio],
+            outputs=content_html
+        )
+        view_radio.change(
+            load_event_data,
+            inputs=[event_dropdown, format_radio, view_radio],
+            outputs=content_html
+        )
     
     with gr.Tab("💬 Feedback"):
         gr.Markdown("### Leave your feedback on the results")
         
         with gr.Row():
-            fb_event = gr.Dropdown(
-                choices=get_available_events(),
-                label="Event",
-                value=None
-            )
-            fb_format = gr.Radio(
-                choices=["qa", "summary"],
-                label="Format",
-                value="qa"
-            )
-            fb_view = gr.Radio(
-                choices=["subtopics", "sdgs"],
-                label="View",
-                value="subtopics"
-            )
+            fb_event = gr.Dropdown(choices=events, label="Event")
+            fb_format = gr.Radio(choices=["qa", "summary"], label="Format", value="qa")
+            fb_view = gr.Radio(choices=["subtopics", "sdgs"], label="View", value="subtopics")
         
-        fb_rating = gr.Slider(
-            minimum=1,
-            maximum=5,
-            step=1,
-            label="Rating (1-5 stars)",
-            value=3
-        )
-        
-        fb_comment = gr.Textbox(
-            label="Comment (optional)",
-            lines=5,
-            placeholder="Write your feedback here..."
-        )
+        fb_rating = gr.Slider(minimum=1, maximum=5, step=1, label="Rating (1-5 stars)", value=3)
+        fb_comment = gr.Textbox(label="Comment (optional)", lines=5, placeholder="Write your feedback here...")
         
         fb_submit = gr.Button("Submit Feedback", variant="primary")
         fb_output = gr.Textbox(label="Status", interactive=False)
@@ -150,9 +292,4 @@ with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft()) as demo:
         )
 
 if __name__ == "__main__":
-    # Launch with file serving enabled
-    demo.launch(
-        server_name="0.0.0.0",  # Necessario per Hugging Face Spaces
-        server_port=7860,  # Porta standard di Gradio
-        allowed_paths=[".", "Viewer", "Viewer/Data"]  # Permetti accesso a più cartelle
-    )
+    demo.launch()