modified app.py

app.py

@@ -2,8 +2,13 @@ import gradio as gr
 import json
 import os
 from pathlib import Path
+from threading import Thread
+from flask import Flask, send_from_directory, jsonify
+import socket
+
+# Flask app to serve static files
+flask_app = Flask(__name__)
 
-# Data folder paths
 DATA_BASE = "Viewer/Data/Our_system"
 FOLDER_MAP = {
     "qa_subtopics": f"{DATA_BASE}/QA+Topics",
@@ -12,6 +17,64 @@ FOLDER_MAP = {
     "summary_sdgs": f"{DATA_BASE}/Summary+SDG"
 }
 
+@flask_app.route('/Data/<path:filepath>')
+def serve_data(filepath):
+    """Serve JSON files from Data folder"""
+    return send_from_directory('Viewer/Data', filepath)
+
+@flask_app.route('/api/list-files/<folder_key>')
+def list_files(folder_key):
+    """List files in a specific folder"""
+    folder = FOLDER_MAP.get(folder_key)
+    if not folder or not os.path.exists(folder):
+        return jsonify([])
+    
+    files = [f for f in os.listdir(folder) if f.endswith('_combined_data.json')]
+    return jsonify(files)
+
+def find_free_port():
+    """Find a free port for Flask"""
+    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+        s.bind(('', 0))
+        s.listen(1)
+        port = s.getsockname()[1]
+    return port
+
+def run_flask(port):
+    """Run Flask server"""
+    flask_app.run(host='0.0.0.0', port=port, debug=False, use_reloader=False)
+
+# Start Flask server in background
+FLASK_PORT = find_free_port()
+flask_thread = Thread(target=run_flask, args=(FLASK_PORT,), daemon=True)
+flask_thread.start()
+
+print(f"Flask server started on port {FLASK_PORT}")
+
+# Read your original HTML and inject Flask port
+with open("Viewer/viewer_v2.html", "r", encoding="utf-8") as f:
+    original_html = f.read()
+
+# Modify the folderMap to use Flask server
+modified_html = original_html.replace(
+    'const folderMap = {',
+    f'''const FLASK_PORT = {FLASK_PORT};
+    const folderMap = {{'''
+).replace(
+    '"./Data/Our_system/QA+Topics"',
+    f'"http://localhost:{FLASK_PORT}/Data/Our_system/QA+Topics"'
+).replace(
+    '"./Data/Our_system/QA+SDGs"',
+    f'"http://localhost:{FLASK_PORT}/Data/Our_system/QA+SDGs"'
+).replace(
+    '"./Data/Our_system/Summary+Topics"',
+    f'"http://localhost:{FLASK_PORT}/Data/Our_system/Summary+Topics"'
+).replace(
+    '"./Data/Our_system/Summary+SDG"',
+    f'"http://localhost:{FLASK_PORT}/Data/Our_system/Summary+SDG"'
+)
+
+# Feedback functions
 def get_available_events():
     """Get all available events from JSON files"""
     events = set()
@@ -20,34 +83,10 @@ def get_available_events():
             for file in os.listdir(folder):
                 if file.endswith('_combined_data.json'):
                     event_name = file.replace('_combined_data.json', '')
-                    # Skip pure numeric names
                     if not event_name.isdigit():
                         events.add(event_name)
     return sorted(list(events))
 
-def load_json_data(event_base, format_type, view_type):
-    """Load JSON data for selected event and view"""
-    if not event_base:
-        return None
-        
-    key = f"{format_type}_{view_type}"
-    folder = FOLDER_MAP.get(key)
-    
-    if not folder:
-        return None
-    
-    filepath = os.path.join(folder, f"{event_base}_combined_data.json")
-    
-    if not os.path.exists(filepath):
-        return None
-    
-    try:
-        with open(filepath, 'r', encoding='utf-8') as f:
-            return json.load(f)
-    except Exception as e:
-        print(f"Error loading {filepath}: {e}")
-        return None
-
 def save_feedback(event, format_type, view_type, rating, comment):
     """Save feedback to JSON file"""
     if not event:
@@ -82,482 +121,13 @@ def save_feedback(event, format_type, view_type, rating, comment):
     
     return "✅ Thank you for your feedback!"
 
-def create_full_html(json_data=None):
-    """Create complete HTML with embedded data"""
-    
-    # Convert data to JavaScript
-    js_data = "null"
-    if json_data:
-        js_data = json.dumps(json_data, ensure_ascii=False)
-    
-    return f"""
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        /* Reset Gradio styles */
-        .gradio-container {{ padding: 0 !important; }}
-        
-        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
-        body, html {{ 
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-            min-height: 100vh; 
-            color: #333;
-            overflow-x: hidden;
-        }}
-        .viewer-container {{ 
-            max-width: 1400px; 
-            margin: 0 auto; 
-            padding: 20px;
-        }}
-        .content {{ 
-            background: rgba(255, 255, 255, 0.95); 
-            border-radius: 15px; 
-            padding: 30px; 
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
-            backdrop-filter: blur(10px); 
-            min-height: 400px;
-        }}
-        .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; 
-            cursor: pointer; 
-            position: relative;
-            user-select: none;
-        }}
-        .file-header::after {{ 
-            content: '+'; 
-            position: absolute; 
-            right: 20px; 
-            top: 50%; 
-            transform: translateY(-50%); 
-            font-size: 1.6em; 
-            transition: transform 0.3s ease;
-        }}
-        .file-header.active::after {{ 
-            content: '−'; 
-        }}
-        .file-content {{ 
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.4s ease-out;
-        }}
-        .file-header.active + .file-content {{ 
-            max-height: 10000px;
-            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; 
-            cursor: pointer; 
-            position: relative;
-            user-select: none;
-        }}
-        .cluster-header::after {{ 
-            content: '+'; 
-            position: absolute; 
-            right: 20px; 
-            top: 50%; 
-            transform: translateY(-50%); 
-            font-size: 1.4em;
-            transition: transform 0.3s ease;
-        }}
-        .cluster-header.active::after {{ 
-            content: '−'; 
-        }}
-        .cluster-content {{ 
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.4s ease-out;
-        }}
-        .cluster-header.active + .cluster-content {{ 
-            max-height: 10000px;
-            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; 
-        }}
-        .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.2s ease;
-        }}
-        .citation:hover {{ 
-            background: #0056b3;
-            transform: translateY(-1px);
-        }}
-        .no-data {{ 
-            text-align: center; 
-            color: #6c757d; 
-            font-style: italic; 
-            padding: 40px; 
-        }}
-        .modal {{ 
-            display: none; 
-            position: fixed; 
-            z-index: 10000; 
-            left: 0; 
-            top: 0; 
-            width: 100%; 
-            height: 100%; 
-            background-color: rgba(0, 0, 0, 0.6); 
-            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; 
-        }}
-        .close {{ 
-            color: white; 
-            font-size: 28px; 
-            font-weight: bold; 
-            cursor: pointer; 
-            line-height: 1;
-            transition: opacity 0.2s;
-        }}
-        .close:hover {{ 
-            opacity: 0.7; 
-        }}
-        .modal-body {{ 
-            padding: 25px; 
-        }}
-        .context-label {{ 
-            font-weight: 600; 
-            color: #495057; 
-            margin-bottom: 8px; 
-            margin-top: 15px;
-            font-size: 1.05em;
-        }}
-        .context-content {{ 
-            background: #f8f9fa; 
-            padding: 15px; 
-            border-radius: 8px; 
-            line-height: 1.6; 
-            border-left: 4px solid #007bff;
-            margin-bottom: 15px;
-        }}
-        .context-url a {{ 
-            color: #007bff; 
-            text-decoration: none; 
-            word-break: break-all;
-        }}
-        .context-url a:hover {{ 
-            text-decoration: underline; 
-        }}
-    </style>
-</head>
-<body>
-    <div class="viewer-container">
-        <div class="content" id="content">
-            <div class="no-data"><h2>⏳ Loading data...</h2></div>
-        </div>
-    </div>
-    
-    <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>
-            </div>
-            <div class="modal-body">
-                <div class="context-label">Context:</div>
-                <div class="context-content" id="modalContext"></div>
-                <div class="context-label">Title:</div>
-                <div class="context-content" id="modalTitle"></div>
-                <div class="context-label">Source URL:</div>
-                <div class="context-url"><a id="modalUrl" href="#" target="_blank"></a></div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let currentData = {js_data};
-        
-        function renderContent() {{
-            const content = document.getElementById('content');
-            
-            if (!currentData) {{
-                content.innerHTML = '<div class="no-data"><h2>⚠️ No data available</h2><p>Please select an event from the controls above</p></div>';
-                return;
-            }}
-            
-            const clusters = processFileData(currentData);
-            
-            content.innerHTML = `
-                <div class="file-section">
-                    <div class="file-header">
-                        📄 ${{escapeHtml(currentData.file_name || 'Report')}}
-                    </div>
-                    <div class="file-content">
-                        <div class="summary"><strong>Summary:</strong><br>${{processCitations(escapeHtml(currentData.summary || 'No summary available'), currentData.summary_contexts || {{}})}}}</div>
-                        ${{renderClusters(clusters)}}
-                    </div>
-                </div>
-            `;
-            
-            initializeCollapsibles();
-            initializeCitations();
-        }}
-        
-        function processFileData(data) {{
-            if (Array.isArray(data.clusters)) return data.clusters;
-            
-            const ignore = ['file_name', 'summary', 'summary_contexts'];
-            const clusters = [];
-            
-            for (const key in data) {{
-                if (!data.hasOwnProperty(key) || ignore.includes(key)) continue;
-                const val = data[key];
-                
-                if (Array.isArray(val)) {{
-                    const hasQA = val.some(v => v.question || v.Question);
-                    if (hasQA) {{
-                        clusters.push({{ cluster_headline: key, questions_and_answers: val }});
-                    }} else {{
-                        const summary = val.map(v => v.cluster_summary || v.summary || '').filter(Boolean).join('\\n\\n');
-                        clusters.push({{ 
-                            cluster_headline: key, 
-                            cluster_summary: summary || 'No summary available',
-                            used_contexts: val[0]?.used_contexts || {{}}
-                        }});
-                    }}
-                }}
-            }}
-            return clusters;
-        }}
-        
-        function renderClusters(clusters) {{
-            if (!clusters || clusters.length === 0) {{
-                return '<div class="no-data">No content available</div>';
-            }}
-            return clusters.map(c => `
-                <div class="cluster">
-                    <div class="cluster-header">
-                        🎯 ${{escapeHtml(c.cluster_headline || 'Cluster')}}
-                    </div>
-                    <div class="cluster-content">
-                        ${{c.questions_and_answers ? renderQA(c.questions_and_answers) : renderSummary(c)}}
-                    </div>
-                </div>
-            `).join('');
-        }}
-        
-        function renderSummary(cluster) {{
-            return `<div class="cluster-summary">${{processCitations(escapeHtml(cluster.cluster_summary || 'No summary available'), cluster.used_contexts || {{}})}}</div>`;
-        }}
-        
-        function renderQA(qas) {{
-            return qas.map(qa => `
-                <div class="qa-item">
-                    <div class="question">❓ ${{escapeHtml(qa.question || qa.Question || 'No question provided')}}</div>
-                    <div class="answer">${{processCitations(escapeHtml(qa.updated_retrieved_answer || qa.retrieved_answer || qa.answer || qa.updated_answer || 'No answer available'), qa.used_contexts || qa.summary_contexts || {{}})}}</div>
-                </div>
-            `).join('');
-        }}
-        
-        function processCitations(text, contexts) {{
-            if (!text || !contexts) return text || '';
-            return text.replace(/\\[(\\d+)\\]/g, (match, id) => {{
-                const ctx = contexts[id];
-                if (ctx) {{
-                    const data = JSON.stringify({{ 
-                        context: ctx.context || '', 
-                        title: ctx.title || '', 
-                        url: ctx.url || '' 
-                    }});
-                    return `<span class="citation" data-context="${{escapeHtml(data)}}">[${{id}}]</span>`;
-                }}
-                return match;
-            }});
-        }}
-        
-        function initializeCollapsibles() {{
-            document.querySelectorAll('.file-header, .cluster-header').forEach(header => {{
-                header.onclick = function() {{
-                    this.classList.toggle('active');
-                }};
-            }});
-        }}
-        
-        function initializeCitations() {{
-            document.querySelectorAll('.citation').forEach(citation => {{
-                citation.onclick = function() {{
-                    try {{
-                        const data = JSON.parse(this.getAttribute('data-context'));
-                        document.getElementById('modalContext').textContent = data.context || 'No context available';
-                        document.getElementById('modalTitle').textContent = data.title || 'No title available';
-                        const urlElem = document.getElementById('modalUrl');
-                        urlElem.textContent = data.url || 'No URL provided';
-                        urlElem.href = data.url || '#';
-                        document.getElementById('citationModal').style.display = 'block';
-                    }} catch(e) {{
-                        console.error('Error showing citation:', e);
-                    }}
-                }};
-            }});
-        }}
-        
-        const modal = document.getElementById('citationModal');
-        const closeBtn = document.querySelector('.close');
-        
-        closeBtn.onclick = () => modal.style.display = 'none';
-        window.onclick = e => {{ if (e.target === modal) modal.style.display = 'none'; }};
-        document.onkeydown = e => {{ if (e.key === 'Escape') modal.style.display = 'none'; }};
-        
-        function escapeHtml(text) {{
-            if (text === null || text === undefined) return '';
-            return String(text)
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;')
-                .replace(/"/g, '&quot;')
-                .replace(/'/g, '&#039;');
-        }}
-        
-        // Auto-render on load
-        if (currentData) {{
-            renderContent();
-        }}
-    </script>
-</body>
-</html>
-"""
-
-# Gradio Interface
-with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft(), css=".gradio-container { padding: 0 !important; }") as demo:
+# Create Gradio interface
+with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft()) as demo:
     gr.Markdown("# 📊 Our Report Viewer")
-    gr.Markdown("Select an event and view to visualize the data")
+    gr.Markdown("Explore events organized by topics or SDGs")
     
     with gr.Tab("📖 Viewer"):
-        with gr.Row():
-            with gr.Column(scale=1):
-                event_dropdown = gr.Dropdown(
-                    choices=get_available_events(),
-                    label="Select Event",
-                    value=None,
-                    interactive=True
-                )
-                
-                view_type = gr.Radio(
-                    choices=["subtopics", "sdgs"],
-                    label="Arranged by",
-                    value="subtopics"
-                )
-                
-                format_type = gr.Radio(
-                    choices=["qa", "summary"],
-                    label="Presented as",
-                    value="qa"
-                )
-                
-                refresh_btn = gr.Button("🔄 Load Data", variant="primary")
-        
-        html_output = gr.HTML(create_full_html())
-        
-        def update_viewer(event, fmt, view):
-            if not event:
-                return create_full_html()
-            
-            data = load_json_data(event, fmt, view)
-            return create_full_html(data)
-        
-        # Update on button click
-        refresh_btn.click(
-            update_viewer,
-            inputs=[event_dropdown, format_type, view_type],
-            outputs=html_output
-        )
-        
-        # Also update on dropdown change
-        event_dropdown.change(
-            update_viewer,
-            inputs=[event_dropdown, format_type, view_type],
-            outputs=html_output
-        )
+        gr.HTML(modified_html)
     
     with gr.Tab("💬 Feedback"):
         gr.Markdown("### Leave your feedback on the results")
@@ -603,4 +173,6 @@ with gr.Blocks(title="Report Viewer", theme=gr.themes.Soft(), css=".gradio-conta
         )
 
 if __name__ == "__main__":
-    demo.launch()
+    import time
+    time.sleep(1)  # Wait for Flask to start
+    demo.launch(server_port=7860)