Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
-import tempfile
-import os
 import base64
+import os
 from openai import OpenAI
 
 def generate_systematic_review(api_key, pdf_files):
@@ -16,10 +15,20 @@ def generate_systematic_review(api_key, pdf_files):
         str: Generated systematic review text
     """
     if not api_key.strip():
-        return "Please provide a valid OpenAI API key."
+        return """
+        <div class="error-message">
+            <h3>Error</h3>
+            <p>Please provide a valid OpenAI API key.</p>
+        </div>
+        """
     
     if not pdf_files:
-        return "Please upload at least one PDF file."
+        return """
+        <div class="error-message">
+            <h3>Error</h3>
+            <p>Please upload at least one PDF file.</p>
+        </div>
+        """
     
     try:
         # Initialize OpenAI client with the provided API key
@@ -28,9 +37,13 @@ def generate_systematic_review(api_key, pdf_files):
         # Create a list to hold file inputs for the API
         file_inputs = []
         
+        # List of uploaded file names for display
+        file_names = []
+        
         # Process each uploaded PDF file
         for pdf_file in pdf_files:
             file_name = os.path.basename(pdf_file.name)
+            file_names.append(file_name)
             
             # Read the file as binary data
             with open(pdf_file.name, "rb") as f:
@@ -120,38 +133,206 @@ By following these steps, you can ensure that your systematic review paper is we
                     result_text += item.text
             
             if result_text:
-                return result_text
+                # Format the file names for display
+                files_html = ""
+                for name in file_names:
+                    files_html += f'<div class="file-pill"><span class="file-icon">📄</span> {name} <span class="file-x">×</span></div>'
+                
+                # Create a nicely formatted response interface
+                return f"""
+                <div class="response-container">
+                    <div class="files-container">
+                        {files_html}
+                    </div>
+                    <div class="assistant-label">Assistant</div>
+                    <div class="review-content">
+                        <p>Here is a <strong>systematic review</strong> of the provided papers:</p>
+                        <hr>
+                        {result_text}
+                    </div>
+                </div>
+                """
         
-        return "Failed to generate a systematic review. Please try again."
+        return """
+        <div class="error-message">
+            <h3>Error</h3>
+            <p>Failed to generate a systematic review. Please try again.</p>
+        </div>
+        """
         
     except Exception as e:
-        return f"An error occurred: {str(e)}"
+        return f"""
+        <div class="error-message">
+            <h3>Error</h3>
+            <p>An error occurred: {str(e)}</p>
+        </div>
+        """
+
+# Custom CSS for the interface
+custom_css = """
+.gradio-container {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.response-container {
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 10px;
+    font-size: 16px;
+}
+
+.files-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 15px;
+}
+
+.file-pill {
+    background-color: #f0f0f0;
+    border-radius: 16px;
+    padding: 4px 12px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 14px;
+}
+
+.file-icon {
+    margin-right: 4px;
+}
+
+.file-x {
+    margin-left: 4px;
+    color: #888;
+}
+
+.assistant-label {
+    font-weight: 600;
+    margin-bottom: 5px;
+    color: #444;
+}
+
+.review-content {
+    background-color: white;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.review-content h1, .review-content h2, .review-content h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
+.review-content h1 {
+    font-size: 24px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+}
+
+.review-content h2 {
+    font-size: 20px;
+}
+
+.review-content h3 {
+    font-size: 18px;
+}
+
+.review-content p {
+    margin-bottom: 15px;
+    line-height: 1.5;
+}
+
+.review-content hr {
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #eee;
+}
+
+.review-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 20px 0;
+}
+
+.review-content th, .review-content td {
+    border: 1px solid #ddd;
+    padding: 8px 12px;
+    text-align: left;
+}
+
+.review-content th {
+    background-color: #f2f2f2;
+    font-weight: 600;
+}
+
+.review-content tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+.error-message {
+    background-color: #fff0f0;
+    border-left: 4px solid #ff5252;
+    padding: 15px;
+    border-radius: 4px;
+    margin-top: 10px;
+}
+
+.error-message h3 {
+    color: #d32f2f;
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+"""
 
 # Create the Gradio interface
-with gr.Blocks(title="Systematic Review Generator") as app:
+with gr.Blocks(css=custom_css, title="Systematic Review Generator") as app:
     gr.Markdown("# Systematic Review Generator")
     gr.Markdown("Upload PDF files and generate a systematic review using OpenAI's GPT-4.1 model.")
     
     with gr.Row():
-        with gr.Column():
-            # Input components
-            api_key = gr.Textbox(
-                label="OpenAI API Key", 
-                placeholder="Enter your OpenAI API key...",
-                type="password"
-            )
+        with gr.Column(scale=1):
+            with gr.Box():
+                gr.Markdown("### Settings")
+                api_key = gr.Textbox(
+                    label="OpenAI API Key", 
+                    placeholder="Enter your OpenAI API key...",
+                    type="password"
+                )
+                
+                pdf_files = gr.File(
+                    label="Upload PDF Files", 
+                    file_count="multiple",
+                    file_types=[".pdf"]
+                )
+                
+                model_info = gr.Markdown("""
+                **Model**: gpt-4.1  
+                **Tokens**: 4000 (max output)  
+                **Temperature**: 0.7
+                """)
+                
+                submit_btn = gr.Button("Generate Systematic Review", variant="primary", size="lg")
             
-            pdf_files = gr.File(
-                label="Upload PDF Files", 
-                file_count="multiple",
-                file_types=[".pdf"]
-            )
-            
-            submit_btn = gr.Button("Generate Systematic Review", variant="primary")
-            
-        with gr.Column():
-            # Output component
-            output = gr.Markdown(label="Generated Systematic Review")
+            with gr.Accordion("How to Use", open=False):
+                gr.Markdown("""
+                1. Enter your OpenAI API key in the field above
+                2. Upload two or more PDF research papers
+                3. Click "Generate Systematic Review"
+                4. The systematic review will be displayed in the output area
+                
+                **Note**: This application requires a valid OpenAI API key with access to the GPT-4.1 model.
+                Your API key is not stored and is only used to make the API call to OpenAI.
+                
+                Please be aware that large PDF files may cause issues with the API due to size limits.
+                """)
+        
+        with gr.Column(scale=2):
+            # HTML output for better formatting
+            output = gr.HTML(label="Generated Review")
     
     # Set up the event handler
     submit_btn.click(
@@ -159,22 +340,6 @@ with gr.Blocks(title="Systematic Review Generator") as app:
         inputs=[api_key, pdf_files],
         outputs=output
     )
-    
-    gr.Markdown("""
-    ## How to Use
-    
-    1. Enter your OpenAI API key
-    2. Upload two or more PDF research papers
-    3. Click "Generate Systematic Review"
-    4. The systematic review will be displayed in the output area
-    
-    ## Note
-    
-    This application requires a valid OpenAI API key with access to the GPT-4.1 model. 
-    Your API key is not stored and is only used to make the API call to OpenAI.
-    
-    Please note that large PDF files may cause issues with the API due to size limits.
-    """)
 
 if __name__ == "__main__":
-    app.launch(share=True)
+    app.launch()