Update app.py

app.py

@@ -1,6 +1,5 @@
 import gradio as gr
 import os
-import re
 from openai import OpenAI
 import json
 import requests
@@ -10,6 +9,7 @@ import base64
 
 # Constants
 DEFAULT_MODEL = "opengvlab/internvl3-14b:free"
+# No need for placeholder text as we'll use password type input
 DEFAULT_SITE_URL = "https://dynamic-nature-trail-guide.app"
 DEFAULT_SITE_NAME = "Dynamic Nature Trail Guide"
 
@@ -21,9 +21,8 @@ found on nature trails. For any image sent, please:
 2. Provide educational information about identified elements
 3. Mention any seasonal characteristics visible in the image
 4. Note any ecological significance or conservation considerations
-5. Offer suggestions for what to observe or learn next on the trail
+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):
@@ -31,98 +30,14 @@ 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 with improved section handling"""
-    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>'
-    
-    # Parse sections using regex patterns
-    # Look for patterns like "### 1. Identification of Elements" or "## Plants:"
-    sections = re.split(r'(?:#{1,3}\s*\d*\.?\s*|\*\*)([\w\s]+)(?:\*\*|:)', text)
-    
-    # If splitting didn't work well, fall back to a simpler approach
-    if len(sections) <= 1:
-        # Simple formatting with paragraphs
-        text = text.replace('\n\n', '</p><p>')
-        return f'<div style="padding: 15px; font-family: Arial, sans-serif; line-height: 1.6;"><p>{text}</p></div>'
-    
-    # Build HTML from sections
-    html_parts = ['<div style="padding: 15px; font-family: Arial, sans-serif; line-height: 1.6;">']
-    
-    for i in range(1, len(sections), 2):
-        if i < len(sections) - 1:
-            section_title = sections[i].strip()
-            section_content = sections[i+1].strip()
-            
-            # Apply formatting to section content
-            section_content = format_section_content(section_content)
-            
-            html_parts.append(f'<div class="section">')
-            html_parts.append(f'<h3 style="color: #336699; border-bottom: 1px solid #ccc; padding-bottom: 5px;">{section_title}</h3>')
-            html_parts.append(f'<div class="content">{section_content}</div>')
-            html_parts.append('</div>')
-    
-    # If we couldn't parse sections properly, use the original text
-    if len(html_parts) == 1:
-        text = format_section_content(text)
-        html_parts.append(f'<p>{text}</p>')
-    
-    html_parts.append('</div>')
-    return ''.join(html_parts)
-
-def format_section_content(content):
-    """Format the content of a section with enhanced styling"""
-    # Replace line breaks with paragraph breaks for better readability
-    content = re.sub(r'\n\s*\n', '</p><p>', content)
-    content = re.sub(r'\n(?!<\/p>)', '<br>', content)
-    
-    # Convert bullet points
-    content = re.sub(r'^\s*-\s*(.+?)$', r'<li>\1</li>', content, flags=re.MULTILINE)
-    content = re.sub(r'(<li>.*?</li>)', r'<ul>\1</ul>', content, flags=re.DOTALL)
-    # Fix nested lists (remove empty ul tags)
-    content = re.sub(r'<ul>\s*</ul>', '', content)
-    
-    # Handle subsections like "**Plants:**"
-    content = re.sub(r'\*\*([\w\s]+):\*\*', r'<h4 style="margin-bottom: 5px; color: #336699;">\1</h4>', content)
-    
-    # Enhance species names with bold and italics for scientific names
-    content = re.sub(r'\b([A-Z][a-z]+\s+[a-z]+)\b(?!\<\/)', r'<strong><em>\1</em></strong>', content)
-    
-    # Add some color to certain keywords
-    color_mappings = {
-        'endangered': '#e74c3c',
-        'rare': '#FF6600',
-        'native': '#27ae60',
-        'invasive': '#CC0000',
-        'ecosystem': '#3498db',
-        'habitat': '#336699',
-        'conservation': '#16a085',
-        'protected': '#9b59b6',
-        'biodiversity': '#2ecc71'
-    }
-    
-    for keyword, color in color_mappings.items():
-        content = re.sub(r'\b' + keyword + r'\b', f'<span style="color: {color}; font-weight: bold;">{keyword}</span>', content, flags=re.IGNORECASE)
-    
-    # Ensure the content starts and ends with paragraph tags if needed
-    if not content.startswith('<p>') and not content.startswith('<ul>') and not content.startswith('<h4'):
-        content = '<p>' + content
-    if not content.endswith('</p>') and not content.endswith('</ul>'):
-        content = content + '</p>'
-        
-    return content
-
 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 "<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Please provide an OpenRouter API key.</div>"
+        return "Please provide an OpenRouter API key."
     
     if image is None:
-        return "<div style='color: red; padding: 10px; border: 1px solid red; border-radius: 5px;'>Please upload an image to analyze.</div>"
+        return "Please upload an image to analyze."
     
     # Save the image temporarily
     temp_image_path = "temp_image.jpg"
@@ -166,11 +81,10 @@ def analyze_image(api_key, image, prompt="What can you identify in this nature t
         )
         
         analysis_result = response.choices[0].message.content
-        return format_response_as_html(analysis_result)
+        return analysis_result
     
     except Exception as 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>'
+        return f"Error analyzing image: {str(e)}"
     
     finally:
         # Clean up the temporary file
@@ -203,7 +117,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}\n\nIMPORTANT: Structure your response with clear sections and headings for better readability."
+    return f"For this nature trail image, please: \n{numbered_prompt}"
 
 def create_interface():
     """Create the Gradio interface for the Dynamic Nature Trail Guide"""
@@ -251,7 +165,7 @@ def create_interface():
                 analyze_button = gr.Button("Analyze Nature Image", variant="primary")
             
             with gr.Column(scale=1):
-                output_text = gr.HTML(label="Analysis Results")
+                output_text = gr.Markdown(label="Analysis Results")
         
         # Set up the click event for the analyze button
         analyze_button.click(