Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import os
+import re
 from openai import OpenAI
 import json
 import requests
@@ -25,6 +26,8 @@ found on nature trails. For any image sent, please:
 5. Offer suggestions for what to observe or learn about next on the trail
 
 Keep explanations informative yet accessible to people of all ages and backgrounds.
+
+IMPORTANT: Structure your responses with clear sections and headings.
 """
 
 def encode_image_to_base64(image_path):
@@ -32,14 +35,60 @@ def encode_image_to_base64(image_path):
     with open(image_path, "rb") as image_file:
         return base64.b64encode(image_file.read()).decode('utf-8')
 
+def format_response_as_html(text):
+    """Convert the model's text response to formatted HTML"""
+    if not text:
+        return ""
+    
+    # Check if the response is an error message
+    if text.startswith("Error analyzing image:"):
+        return f'<div style="color: red; padding: 10px; border: 1px solid red; border-radius: 5px;">{text}</div>'
+    
+    # Replace newlines with HTML breaks
+    text = text.replace('\n\n', '</p><p>').replace('\n', '<br>')
+    
+    # Handle headings - look for patterns like "1. Identification:" or "Species Identified:"
+    heading_patterns = [
+        (r'([A-Za-z\s]+):(?=<br>|</p>)', r'<h3>\1</h3>'),  # "Category:" at start of line
+        (r'(\d+\.\s+[A-Za-z\s]+):(?=<br>|</p>)', r'<h3>\1</h3>'),  # "1. Category:" format
+    ]
+    
+    for pattern, replacement in heading_patterns:
+        text = re.sub(pattern, replacement, text)
+    
+    # Enhance species names with bold
+    text = re.sub(r'\b([A-Z][a-z]+\s+[a-z]+)\b(?!\<\/)', r'<strong>\1</strong>', text)
+    
+    # Add some color to certain keywords
+    color_mappings = {
+        'endangered': 'red',
+        'rare': '#FF6600',
+        'native': '#006600',
+        'invasive': '#CC0000',
+        'ecosystem': '#006699',
+        'habitat': '#336699',
+    }
+    
+    for keyword, color in color_mappings.items():
+        text = re.sub(r'\b' + keyword + r'\b', f'<span style="color: {color};">{keyword}</span>', text, flags=re.IGNORECASE)
+    
+    # Wrap the entire content in a styled div
+    html = f'''
+    <div style="padding: 15px; font-family: Arial, sans-serif; line-height: 1.6;">
+        <p>{text}</p>
+    </div>
+    '''
+    
+    return html
+
 def analyze_image(api_key, image, prompt="What can you identify in this nature trail image? Provide detailed educational information.", site_url=DEFAULT_SITE_URL, site_name=DEFAULT_SITE_NAME, model=DEFAULT_MODEL):
     """Analyze the uploaded image using the InternVL3 model via OpenRouter"""
     # Remove the placeholder text check
     if not api_key:
-        return "Please provide an OpenRouter API key."
+        return "<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Please provide an OpenRouter API key.</div>"
     
     if image is None:
-        return "Please upload an image to analyze."
+        return "<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Please upload an image to analyze.</div>"
     
     # Save the image temporarily
     temp_image_path = "temp_image.jpg"
@@ -83,10 +132,11 @@ def analyze_image(api_key, image, prompt="What can you identify in this nature t
         )
         
         analysis_result = response.choices[0].message.content
-        return analysis_result
+        return format_response_as_html(analysis_result)
     
     except Exception as e:
-        return f"Error analyzing image: {str(e)}"
+        error_message = f"Error analyzing image: {str(e)}"
+        return f'<div style="color: red; padding: 10px; border: 1px solid red; border-radius: 5px;">{error_message}</div>'
     
     finally:
         # Clean up the temporary file
@@ -119,7 +169,7 @@ def build_custom_prompt(identification=True, education=True, seasonal=True, cons
         return "What can you identify in this nature trail image?"
     
     numbered_prompt = "\n".join([f"{i+1}. {part}" for i, part in enumerate(prompt_parts)])
-    return f"For this nature trail image, please: \n{numbered_prompt}"
+    return f"For this nature trail image, please: \n{numbered_prompt}\n\nIMPORTANT: Structure your response with clear sections and headings for better readability."
 
 def create_interface():
     """Create the Gradio interface for the Dynamic Nature Trail Guide"""
@@ -167,7 +217,7 @@ def create_interface():
                 analyze_button = gr.Button("Analyze Nature Image", variant="primary")
             
             with gr.Column(scale=1):
-                output_text = gr.Markdown(label="Analysis Results")
+                output_text = gr.HTML(label="Analysis Results")
         
         # Set up the click event for the analyze button
         analyze_button.click(