Update app.py

app.py

@@ -5,7 +5,7 @@ import tempfile
 import os
 import requests
 
-# 1. Load system prompt from a file
+# Load system prompt from file
 with open("system_instructions.txt", "r", encoding="utf-8") as f:
     ECO_PROMPT = f.read()
 
@@ -14,7 +14,7 @@ DEEPSEEK_API_KEY = os.environ.get("DEEPSEEK_API_KEY")
 DEEPSEEK_API_URL = "https://api.deepseek.com/v1/chat/completions"
 
 def score_qa(question, answer):
-    """Query DeepSeek API to get a score for Q&A pair"""
+    """Get score from DeepSeek API"""
     try:
         prompt = ECO_PROMPT.format(question=question, answer=answer)
         
@@ -39,10 +39,10 @@ def score_qa(question, answer):
 
     except Exception as e:
         print(f"API Error: {str(e)}")
-        return 1
+        return 1  # Fallback score
 
 def judge_ecolinguistics_from_csv(csv_file):
-    """Process CSV and return results"""
+    """Process CSV and generate results"""
     rows = []
     with open(csv_file.name, "r", encoding="utf-8") as f:
         reader = csv.DictReader(f)
@@ -54,7 +54,10 @@ def judge_ecolinguistics_from_csv(csv_file):
     for r in rows:
         sc = score_qa(r.get("question", ""), r.get("answer", ""))
         total_score += sc
-        results.append({"question_number": r.get("question_number", ""), "score": sc})
+        results.append({
+            "question_number": r.get("question_number", ""),
+            "score": sc
+        })
     
     with tempfile.NamedTemporaryFile(mode="w", delete=False, suffix=".csv", encoding="utf-8") as out_file:
         writer = csv.DictWriter(out_file, fieldnames=["question_number", "score"])
@@ -65,45 +68,119 @@ def judge_ecolinguistics_from_csv(csv_file):
 
     percentage = (total_score / (len(rows) * 5)) * 100 if rows else 0.0
     percentage_display = f"""
-    <div style="padding: 20px; background: #f0fff4; border-radius: 10px; margin-top: 20px;">
-        <h3 style="color: #22543d; margin: 0;">Overall Score: {percentage:.1f}%</h3>
+    <div style="
+        padding: 25px;
+        background: #f0fff4;
+        border-radius: 12px;
+        margin: 20px 0;
+        text-align: center;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    ">
+        <h3 style="color: #22543d; margin: 0; font-size: 1.4em;">
+            🌱 Overall Score: <span style="color: #38a169;">{percentage:.1f}%</span>
+        </h3>
     </div>
     """
 
     return out_path, percentage_display
 
-# Custom theme
+# Custom theme and styling
 custom_theme = gr.themes.Default().set(
-    body_background_fill="#f0fff4",
+    body_background_fill="#f8fff9",
     button_primary_background_fill="#38a169",
     button_primary_text_color="#ffffff",
+    button_primary_background_fill_hover="#2e7d32",
 )
 
-with gr.Blocks(theme=custom_theme) as demo:
-    # Header with logo and title
+css = """
+.gradio-container { max-width: 800px !important; }
+#upload-box {
+    border: 2px dashed #38a169 !important;
+    padding: 30px !important;
+    border-radius: 15px !important;
+    background: #f8fff9 !important;
+    min-height: 150px !important;
+}
+#upload-box:hover {
+    border-color: #2e7d32 !important;
+    background: #f0fff4 !important;
+}
+#download-box {
+    border: 2px solid #38a169 !important;
+    padding: 20px !important;
+    border-radius: 15px !important;
+    background: #f8fff9 !important;
+}
+#logo {
+    border-radius: 15px !important;
+    border: 2px solid #38a169 !important;
+    padding: 5px !important;
+    background: white !important;
+}
+.dark #logo { background: #f0fff4 !important; }
+.footer {
+    text-align: center;
+    padding: 15px !important;
+    background: #e8f5e9 !important;
+    border-radius: 8px !important;
+    margin-top: 25px !important;
+}
+"""
+
+with gr.Blocks(theme=custom_theme, css=css) as demo:
+    # Header Section
     with gr.Row():
         gr.Image("logo.png", 
-                show_label=False,
-                width=200,
-                height=200,
-                elem_id="logo",
-                show_download_button=False)
+               show_label=False,
+               width=200,
+               height=200,
+               elem_id="logo")
         
         gr.Markdown("""
-        <div style="margin-left: 20px;">
-            <h1 style="margin-bottom: 0; color: #22543d;">🌿 EcoLingua</h1>
-            <p style="margin-top: 0.5em; color: #38a169; font-size: 1.1em;">
-                Sustainable Communication Evaluator
+        <div style="margin-left: 25px;">
+            <h1 style="margin: 0; color: #22543d; font-size: 2.2em;">🌿 EcoLingua</h1>
+            <p style="margin: 10px 0 0 0; color: #38a169; font-size: 1.1em;">
+                Sustainable Communication Assessment Platform
             </p>
         </div>
         """)
 
-    # Main interface
-    with gr.Column():
-        gr.Markdown("## 📤 Upload Q&A CSV")
+    # Main Content
+    with gr.Column(variant="panel"):
+        gr.Markdown("""
+        ## 📤 Upload Your Q&A CSV
+        <div style="
+            background: #f0fff4;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 15px 0;
+        ">
+            <p style="margin: 0 0 10px 0; font-weight: 500;">Required CSV format:</p>
+            <div style="
+                background: white;
+                padding: 15px;
+                border-radius: 8px;
+                font-family: monospace;
+            ">
+                question_number,question,answer<br>
+                1,"Question text...","Answer text..."<br>
+                2,"Another question...","Another answer..."
+            </div>
+        </div>
+        """)
+        
         with gr.Row():
-            csv_input = gr.File(label="Upload your CSV", file_types=[".csv"])
-            csv_output = gr.File(label="Download Results", interactive=False)
+            csv_input = gr.File(
+                label=" ",
+                file_types=[".csv"],
+                elem_id="upload-box"
+            )
+            
+            csv_output = gr.File(
+                label="Download Results",
+                interactive=False,
+                elem_id="download-box"
+            )
         
         html_output = gr.HTML()
         
@@ -114,7 +191,13 @@ with gr.Blocks(theme=custom_theme) as demo:
         )
 
     # Footer
-    gr.Markdown("---\n*System powered by DeepSeek AI | Sustainable communication analysis*")
+    gr.Markdown("""
+    <div class="footer">
+        <p style="margin: 0; color: #2e7d32; font-size: 0.9em;">
+            🍃 Powered by DeepSeek AI | Environmentally Conscious Language Analysis 🍃
+        </p>
+    </div>
+    """)
 
 if __name__ == "__main__":
     demo.launch()