Update app.py

app.py

@@ -33,15 +33,15 @@ def generate_prisma_flow_chart(records_db, records_other, duplicates, excluded_s
     
     records_after_duplicates = records_db + records_other - duplicates
     
-    # Create SVG content for PRISMA flow chart with centered layout and larger boxes
+    # Create SVG content for PRISMA flow chart with clean and centered layout
     meta_analysis_section = ''
     if included_meta is not None:
         meta_analysis_section = f'''
-        <line x1="400" y1="490" x2="400" y2="530" class="arrow" />
-        <rect x="250" y="530" width="300" height="80" class="box" />
-        <text x="400" y="570" class="box-title">Meta-Analysis</text>
-        <text x="400" y="595">Studies included in quantitative synthesis</text>
-        <text x="400" y="610">(n = {included_meta})</text>
+        <line x1="400" y1="580" x2="400" y2="620" class="arrow" />
+        <rect x="300" y="620" width="200" height="80" class="box" />
+        <text x="400" y="650" class="box-title">Meta-Analysis</text>
+        <text x="400" y="670">Studies included in quantitative</text>
+        <text x="400" y="685">synthesis (n = {included_meta})</text>
         '''
     
     svg_content = f'''
@@ -61,9 +61,11 @@ def generate_prisma_flow_chart(records_db, records_other, duplicates, excluded_s
                 font-family: Arial, sans-serif;
                 font-size: 14px;
                 text-anchor: middle;
+                dominant-baseline: middle;
             }}
             .box-title {{
                 font-weight: bold;
+                font-size: 16px;
             }}
         </style>
         
@@ -73,67 +75,67 @@ def generate_prisma_flow_chart(records_db, records_other, duplicates, excluded_s
             </marker>
         </defs>
         
+        <!-- PRISMA Title -->
+        <text x="400" y="20" style="font-size: 18px; font-weight: bold; text-anchor: middle;">PRISMA Flow Diagram</text>
+        
         <!-- Identification Section -->
-        <rect x="200" y="30" width="400" height="80" class="box" />
-        <text x="400" y="70" class="box-title">Identification</text>
-        <text x="400" y="95">Records identified through database searching</text>
-        <text x="400" y="110">(n = {records_db})</text>
+        <rect x="250" y="60" width="300" height="80" class="box" />
+        <text x="400" y="100" class="box-title">Identification</text>
+        <text x="400" y="120">Records identified through</text>
+        <text x="400" y="135">database searching (n = {records_db})</text>
         
-        <rect x="600" y="30" width="200" height="80" class="box" />
-        <text x="700" y="70" class="box-title">Additional</text>
-        <text x="700" y="95">Other sources</text>
-        <text x="700" y="110">(n = {records_other})</text>
+        <rect x="550" y="60" width="200" height="80" class="box" />
+        <text x="650" y="100" class="box-title">Additional</text>
+        <text x="650" y="120">Other sources</text>
+        <text x="650" y="135">(n = {records_other})</text>
         
         <!-- Arrows -->
-        <line x1="400" y1="110" x2="400" y2="150" class="arrow" />
-        <line x1="700" y1="110" x2="700" y2="130" class="arrow" />
-        <line x1="700" y1="130" x2="400" y2="130" class="arrow" />
+        <line x1="400" y1="140" x2="400" y2="180" class="arrow" />
+        <line x1="650" y1="140" x2="650" y2="160" class="arrow" />
+        <line x1="650" y1="160" x2="400" y2="160" class="arrow" />
         
         <!-- Screening Section -->
-        <rect x="200" y="150" width="400" height="80" class="box" />
-        <text x="400" y="190" class="box-title">Screening</text>
-        <text x="400" y="215">Records after duplicates removed</text>
-        <text x="400" y="230">(n = {records_after_duplicates})</text>
+        <rect x="250" y="180" width="300" height="80" class="box" />
+        <text x="400" y="220" class="box-title">Screening</text>
+        <text x="400" y="240">Records after duplicates removed</text>
+        <text x="400" y="255">(n = {records_after_duplicates})</text>
         
-        <line x1="400" y1="230" x2="400" y2="270" class="arrow" />
+        <line x1="400" y1="260" x2="400" y2="300" class="arrow" />
         
-        <rect x="200" y="270" width="400" height="80" class="box" />
-        <text x="400" y="310" class="box-title">Title/Abstract Screening</text>
-        <text x="400" y="335">Records screened</text>
-        <text x="400" y="350">(n = {records_after_duplicates})</text>
+        <!-- Title/Abstract Screening Section -->
+        <rect x="250" y="300" width="300" height="80" class="box" />
+        <text x="400" y="340" class="box-title">Title/Abstract Screening</text>
+        <text x="400" y="360">Records screened</text>
+        <text x="400" y="375">(n = {records_after_duplicates})</text>
         
-        <rect x="600" y="270" width="200" height="80" class="box" />
-        <text x="700" y="310">Records excluded</text>
-        <text x="700" y="325">(n = {excluded_screening})</text>
+        <rect x="550" y="300" width="200" height="80" class="box" />
+        <text x="650" y="340">Records excluded</text>
+        <text x="650" y="355">(n = {excluded_screening})</text>
         
-        <line x1="400" y1="350" x2="400" y2="390" class="arrow" />
-        <line x1="500" y1="310" x2="600" y2="310" class="arrow" />
+        <line x1="400" y1="380" x2="400" y2="420" class="arrow" />
+        <line x1="500" y1="340" x2="550" y2="340" class="arrow" />
         
         <!-- Eligibility Section -->
-        <rect x="200" y="390" width="400" height="80" class="box" />
-        <text x="400" y="430" class="box-title">Eligibility</text>
-        <text x="400" y="455">Full-text articles assessed for eligibility</text>
-        <text x="400" y="470">(n = {fulltext_assessed})</text>
+        <rect x="250" y="420" width="300" height="80" class="box" />
+        <text x="400" y="460" class="box-title">Eligibility</text>
+        <text x="400" y="480">Full-text articles assessed for</text>
+        <text x="400" y="495">eligibility (n = {fulltext_assessed})</text>
         
-        <rect x="600" y="390" width="200" height="80" class="box" />
-        <text x="700" y="430">Full-text articles</text>
-        <text x="700" y="445">excluded, with reasons</text>
-        <text x="700" y="460">(n = {excluded_fulltext})</text>
+        <rect x="550" y="420" width="200" height="80" class="box" />
+        <text x="650" y="460">Full-text articles excluded,</text>
+        <text x="650" y="475">with reasons (n = {excluded_fulltext})</text>
         
-        <line x1="400" y1="470" x2="400" y2="510" class="arrow" />
-        <line x1="500" y1="430" x2="600" y2="430" class="arrow" />
+        <line x1="400" y1="500" x2="400" y2="540" class="arrow" />
+        <line x1="500" y1="460" x2="550" y2="460" class="arrow" />
         
         <!-- Included Section -->
-        <rect x="200" y="510" width="400" height="80" class="box" />
-        <text x="400" y="550" class="box-title">Included</text>
-        <text x="400" y="575">Studies included in qualitative synthesis</text>
-        <text x="400" y="590">(n = {included_studies})</text>
+        <rect x="250" y="540" width="300" height="80" class="box" />
+        <text x="400" y="580" class="box-title">Included</text>
+        <text x="400" y="600">Studies included in qualitative</text>
+        <text x="400" y="615">synthesis (n = {included_studies})</text>
         
         <!-- Optional Meta-Analysis Box -->
         {meta_analysis_section}
-        
-        <!-- PRISMA Title -->
-        <text x="400" y="10" style="font-size: 18px; font-weight: bold; text-anchor: middle;">PRISMA Flow Diagram</text>
     </svg>
     '''
     
@@ -263,7 +265,6 @@ def generate_systematic_review(pdf_files, review_question, prisma_numbers, inclu
         )
         
         # Find a suitable place to insert the PRISMA flow chart
-        # Look for the methodology section or PRISMA mentions
         prisma_html = f'''
         <div class="prisma-flow-chart">
             <h3>Figure 1: PRISMA Flow Diagram</h3>
@@ -271,22 +272,18 @@ def generate_systematic_review(pdf_files, review_question, prisma_numbers, inclu
         </div>
         '''
         
-        # Try to insert PRISMA diagram after methodology section or before results
         if "<h2>3. Methodology" in review_content:
             parts = review_content.split("<h2>3. Methodology", 1)
             if len(parts) > 1:
-                # Find the next h2 section after methodology
                 next_section = parts[1].find("<h2>")
                 if next_section > -1:
                     review_content = parts[0] + "<h2>3. Methodology" + parts[1][:next_section] + prisma_html + parts[1][next_section:]
                 else:
                     review_content = parts[0] + "<h2>3. Methodology" + parts[1] + prisma_html
         else:
-            # If methodology section not found, insert before results or at the end
             insert_pos = review_content.find("<h2>4.") if "<h2>4." in review_content else len(review_content) - 100
             review_content = review_content[:insert_pos] + prisma_html + review_content[insert_pos:]
         
-        # Apply professional academic paper styling
         styled_html = f"""
         <!DOCTYPE html>
         <html lang="en">
@@ -295,7 +292,6 @@ def generate_systematic_review(pdf_files, review_question, prisma_numbers, inclu
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Systematic Review</title>
             <style>
-                /* Academic Paper Styling */
                 body {{
                     font-family: 'Times New Roman', Times, serif;
                     line-height: 1.6;
@@ -453,9 +449,7 @@ def save_uploaded_files(files):
     saved_paths = []
     for file in files:
         if file is not None:
-            # Create a temporary file
             with tempfile.NamedTemporaryFile(delete=False, suffix=".pdf") as tmp_file:
-                # Read the content from the file path provided by Gradio
                 with open(file, "rb") as src_file:
                     tmp_file.write(src_file.read())
                 saved_paths.append(tmp_file.name)
@@ -467,11 +461,9 @@ def create_html_download_link(html_content):
     if not html_content or "<div style=\"color: red; padding: 20px;" in html_content or "Please upload at least one PDF file" in html_content:
         return None
     
-    # Create timestamp for the filename
     timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
     filename = f"systematic_review_{timestamp}.html"
     
-    # Encode the HTML content for download
     b64_html = base64.b64encode(html_content.encode()).decode()
     download_link = f'<a href="data:text/html;base64,{b64_html}" download="{filename}" class="download-button">Download HTML</a>'
     
@@ -480,39 +472,32 @@ def create_html_download_link(html_content):
 # Add CSS styling for the Gradio interface
 custom_css = """
 <style>
-    /* Main UI */
-    .gradio-container {
+    .gradio-container {{
         font-family: 'Arial', sans-serif;
         background-color: #f9f9f9;
-    }
-    
-    /* Header */
-    h1 {
+    }}
+    h1 {{
         font-size: 28px;
         color: #333;
         margin-bottom: 20px;
         text-align: center;
         padding-bottom: 10px;
         border-bottom: 2px solid #4a00e0;
-    }
-    
-    /* Primary Button */
-    #generate_button {
+    }}
+    #generate_button {{
         background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%);
         color: white;
         font-weight: bold;
         padding: 10px 20px;
         border-radius: 5px;
         transition: all 0.3s ease;
-    }
-    #generate_button:hover {
+    }}
+    #generate_button:hover {{
         background: linear-gradient(135deg, #5b10f1 0%, #9f3ef3 100%);
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    }
-    
-    /* API Key Button */
-    #api_key_button {
+    }}
+    #api_key_button {{
         background: linear-gradient(135deg, #68d391 0%, #48bb78 100%);
         color: white;
         font-weight: bold;
@@ -520,56 +505,44 @@ custom_css = """
         padding: 10px 20px;
         border-radius: 5px;
         transition: all 0.3s ease;
-    }
-    #api_key_button:hover {
+    }}
+    #api_key_button:hover {{
         background: linear-gradient(135deg, #38a169 0%, #68d391 100%);
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    }
-    
-    /* Form Elements */
-    .input-container {
+    }}
+    .input-container {{
         background-color: white;
         padding: 20px;
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.05);
         margin-bottom: 20px;
-    }
-    
-    /* Labels */
-    label {
+    }}
+    label {{
         font-weight: 600;
         color: #555;
         margin-bottom: 8px;
-    }
-    
-    /* Instructions Accordion */
-    .accordion {
+    }}
+    .accordion {{
         background-color: white;
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         margin-bottom: 20px;
-    }
-    
-    /* Output Container */
-    .output-container {
+    }}
+    .output-container {{
         background-color: white;
         padding: 15px;
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    }
-    
-    /* File Upload Area */
-    .file-upload {
+    }}
+    .file-upload {{
         border: 2px dashed #ccc;
         border-radius: 5px;
         padding: 20px;
         text-align: center;
         margin-bottom: 20px;
-    }
-    
-    /* Download Button */
-    .download-button {
+    }}
+    .download-button {{
         display: inline-block;
         background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%);
         color: white;
@@ -579,47 +552,40 @@ custom_css = """
         text-decoration: none;
         margin-bottom: 10px;
         transition: all 0.3s ease;
-    }
-    .download-button:hover {
+    }}
+    .download-button:hover {{
         background: linear-gradient(135deg, #5b10f1 0%, #9f3ef3 100%);
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    }
-    
-    /* Download Container */
-    #download-container {
+    }}
+    #download-container {{
         display: flex;
         justify-content: center;
         margin: 20px 0;
         padding: 15px;
         background-color: #f5f5f5;
         border-radius: 8px;
-    }
-    
-    /* PRISMA Flow Chart Container */
-    .prisma-section {
+    }}
+    .prisma-section {{
         background-color: white;
         padding: 20px;
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.05);
         margin-bottom: 20px;
-    }
-    
-    .prisma-form {
+    }}
+    .prisma-form {{
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 15px;
-    }
-    
-    /* Responsive adjustments */
-    @media screen and (max-width: 768px) {
-        .gradio-container {
+    }}
+    @media screen and (max-width: 768px) {{
+        .gradio-container {{
             padding: 10px;
-        }
-        .prisma-form {
+        }}
+        .prisma-form {{
             grid-template-columns: 1fr;
-        }
-    }
+        }}
+    }}
 </style>
 """
 
@@ -723,10 +689,10 @@ with gr.Blocks(css=custom_css) as demo:
                 <div style="width: 30%; height: 100%; background: linear-gradient(90deg, #4a00e0, #8e2de2); animation: progress 2s infinite linear;"></div>
             </div>
             <style>
-                @keyframes progress {
-                    0% { margin-left: -30%; }
-                    100% { margin-left: 100%; }
-                }
+                @keyframes progress {{
+                    0% {{ margin-left: -30%; }}
+                    100% {{ margin-left: 100%; }}
+                }}
             </style>
         </div>
         """