revert

.ipynb_checkpoints/app-checkpoint.py

@@ -1,27 +1,380 @@
 import gradio as gr
+import numpy as np
+from PIL import Image
+import io
+import os
+import requests
+import json
+from dotenv import load_dotenv
+import openai
+import base64
+import csv
+import tempfile
+import datetime
 
-def process_image(image):
-    # Simply return the image as is for display
-    return image
+# Load environment variables from .env file if it exists (for local development)
+# On Hugging Face Spaces, the secrets are automatically available as environment variables
+if os.path.exists(".env"):
+    load_dotenv()
 
-# Create the Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# Image Uploader and Viewer")
+from io import BytesIO
+import numpy as np
+import requests
+from PIL import Image
+
+# import libraries
+from library.utils_model import *
+from library.utils_html import *
+from library.utils_prompt import *
+
+OR = OpenRouterAPI()
+gemini = OpenRouterAPI(api_key = os.getenv("GEMINI_API_KEY"),base_url="https://generativelanguage.googleapis.com/v1beta/openai/")
+
+# Path for storing user preferences
+PREFERENCES_FILE = "data/user_preferences.csv"
+
+# Ensure directory exists
+os.makedirs(os.path.dirname(PREFERENCES_FILE), exist_ok=True)
+
+def get_sys_prompt(length="medium"):
+    if length == "short":
+        dev_prompt = """You are a museum curator tasked with generating alt-text (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be a maximum of 130 characters."""
+    elif length == "medium":
+        dev_prompt = """You are a museum curator tasked with generating long descriptions (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be between 250-300 characters in length."""
+    else:
+        dev_prompt = """You are a museum curator tasked with generating long descriptions (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be a maxium of 450 characters."""
+    return dev_prompt
+
+# This function is no longer needed since we removed A/B testing
+
+def create_csv_file_simple(results):
+    """Create a CSV file from the results and return the path"""
+    # Create a temporary file
+    fd, path = tempfile.mkstemp(suffix='.csv')
+    
+    with os.fdopen(fd, 'w', newline='') as f:
+        writer = csv.writer(f)
+        # Write header
+        writer.writerow(['image_id', 'content'])
+        # Write data
+        for result in results:
+            writer.writerow([
+                result.get('image_id', ''),
+                result.get('content', '')
+            ])
     
-    with gr.Row():
-        with gr.Column():
-            input_image = gr.Image(type="pil", label="Upload an image")
-            upload_button = gr.Button("Display Image")
+    return path
+
+# Extract original filename without path or extension
+def get_base_filename(filepath):
+    if not filepath:
+        return ""
+    # Get the basename (filename with extension)
+    basename = os.path.basename(filepath)
+    # Remove extension
+    filename = os.path.splitext(basename)[0]
+    return filename
+
+# Define the Gradio interface
+def create_demo():
+    with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
+        # Replace the existing logo code section:
+        with gr.Row():
+            with gr.Column(scale=3):
+                gr.Markdown("# AI Alt-text Generator")
+                gr.Markdown("Upload one or more images to generate alternative text (designed to meet WCAG 2.1 Guidelines)")
+                gr.Markdown("Developed by the Natural History Museum in Partnership with National Museums Liverpool. Funded by the DCMS Pilot Scheme")
+            with gr.Column(scale=1):
+                with gr.Row():
+                    # Use gr.Image with all interactive features disabled
+                    gr.Image("images/nhm_logo.png", show_label=False, height=120, 
+                            interactive=False, show_download_button=False, 
+                            show_share_button=False, show_fullscreen_button=False,
+                            container=False)
+                    gr.Image("images/nml_logo.png", show_label=False, height=120, 
+                            interactive=False, show_download_button=False,
+                            show_share_button=False, show_fullscreen_button=False,
+                            container=False)
+
+        
+        with gr.Row():
+            # Left column: Controls and uploads
+            with gr.Column(scale=1):
+                # Upload interface
+                upload_button = gr.UploadButton(
+                    "Click to Upload Images", 
+                    file_types=["image"], 
+                    file_count="multiple"
+                )
+                
+                # Define choices as a list of tuples: (Display Name, Internal Value)
+                model_choices = [
+                    # Gemini
+                    ("Gemini 2.0 Flash (default)", "google/gemini-2.0-flash-001"),
+                    # GPT-4.1 Series
+                    ("GPT-4.1 Nano", "gpt-4.1-nano"),
+                    ("GPT-4.1 Mini", "gpt-4.1-mini"),
+                    ("GPT-4.1", "gpt-4.1"),
+                    ("ChatGPT Latest", "openai/chatgpt-4o-latest"),
+                    # Other Models
+                    ("Claude 3.7 Sonnet", "anthropic/claude-3.7-sonnet"),
+                    ("Llama 4 Maverick", "meta-llama/llama-4-maverick"),
+                    # Experimental Models
+                    ("Gemini 2.5 Pro (Experimental, limited)", "gemini-2.5-pro-exp-03-25"),
+                    ("Gemini 2.0 Flash Thinking (Experimental, limited)", "gemini-2.0-flash-thinking-exp-01-21")
+                ]
+                
+                # Find the internal value of the default choice
+                default_model_internal_value = "google/gemini-2.0-flash-001"
+                
+                # Add model selection dropdown
+                model_choice = gr.Dropdown(
+                    choices=model_choices,
+                    label="Select Model",
+                    value=default_model_internal_value, # Use the internal value for the default
+                    # info="Choose the language model to use." # Optional: Add extra info tooltip
+                    visible=True
+                )
+
+                
+                # Add response length selection
+                length_choice = gr.Radio(
+                    choices=["short", "medium", "long"],
+                    label="Response Length",
+                    value="medium",
+                    info="Short: max 130 chars | Medium: 250-300 chars | Long: max 450 chars"
+                )
+                
+                # Preview gallery for uploaded images
+                gr.Markdown("### Uploaded Images")
+                input_gallery = gr.Gallery(
+                    label="",
+                    columns=3, 
+                    height=150,
+                    object_fit="contain"
+                )
+                
+                # Analysis button
+                analyze_button = gr.Button("Analyze Images", variant="primary", size="lg")
+                
+                # Hidden state component to store image info
+                image_state = gr.State([])
+                filename_state = gr.State([])
+                
+                # CSV download component
+                csv_download = gr.File(label="CSV Results")
+            
+            # Right column: Display area
+            with gr.Column(scale=2):
+                with gr.Column(elem_classes="image-container"):
+                    current_image = gr.Image(
+                     label="Current Image",
+                     height=600,         # Set the maximum desired height
+                     type="filepath",
+                     show_fullscreen_button=True,
+                     show_download_button=False,
+                     show_share_button=False
+                    )
+                
+                # Navigation row
+                with gr.Row():
+                    prev_button = gr.Button("← Previous", size="sm")
+                    image_counter = gr.Markdown("", elem_id="image-counter")
+                    next_button = gr.Button("Next →", size="sm")
+                
+                # Alt-text heading and output
+                gr.Markdown("### Generated Alt-text")
+                
+                # Alt-text
+                analysis_text = gr.Textbox(
+                    label="",
+                    value="Please analyze images to see results",
+                    lines=6,
+                    max_lines=10,
+                    interactive=False,
+                    show_label=False
+                )
+                
+                # Hidden state for gallery navigation
+                current_index = gr.State(0)
+                all_images = gr.State([])
+                all_results = gr.State([])
+        
+        # Handle file uploads - store files for use during analysis
+        def handle_upload(files):
+            file_paths = []
+            file_names = []
+            for file in files:
+                file_paths.append(file.name)
+                # Extract filename without path or extension for later use
+                file_names.append(get_base_filename(file.name))
+            return file_paths, file_paths, file_names
+        
+        upload_button.upload(
+            fn=handle_upload,
+            inputs=[upload_button],
+            outputs=[input_gallery, image_state, filename_state]
+        )
+        
+        # Function to analyze images
+        # Modify the analyze_images function in your code:
+
+        def analyze_images(image_paths, model_choice, length_choice, filenames):
+            if not image_paths:
+                return [], [], 0, "", "No images", "", ""
+            
+            # Get system prompt based on length selection
+            sys_prompt = get_sys_prompt(length_choice)
+            
+            image_results = []
+            
+            for i, image_path in enumerate(image_paths):
+                # Use original filename as image_id if available
+                if i < len(filenames) and filenames[i]:
+                    image_id = filenames[i]
+                else:
+                    image_id = f"Image {i+1}"
+                
+                try:
+                    # Open the image file for analysis
+                    img = Image.open(image_path)
+                    prompt0 = prompt_new()  # Using the new prompt function
+                    
+                    # Extract the actual model name (remove any labels like "(default)")
+                    if " (" in model_choice:
+                        model_name = model_choice.split(" (")[0]
+                    else:
+                        model_name = model_choice
+                    
+                    # Check if this is one of the Gemini models that needs special handling
+                    is_gemini_model = "gemini-2.5-pro" in model_name or "gemini-2.0-flash-thinking" in model_name
+                    
+                    if is_gemini_model:
+                        try:
+                            # First try using the dedicated gemini client
+                            result = gemini.generate_caption(
+                                img, 
+                                model=model_name, 
+                                max_image_size=512,
+                                prompt=prompt0, 
+                                prompt_dev=sys_prompt, 
+                                temperature=1
+                            )
+                        except Exception as gemini_error:
+                            # If gemini client fails, fall back to standard OR client
+                            result = OR.generate_caption(
+                                img, 
+                                model=model_name, 
+                                max_image_size=512,
+                                prompt=prompt0, 
+                                prompt_dev=sys_prompt, 
+                                temperature=1
+                            )
+                    else:
+                        # For all other models, use OR client directly
+                        result = OR.generate_caption(
+                            img, 
+                            model=model_name, 
+                            max_image_size=512,
+                            prompt=prompt0, 
+                            prompt_dev=sys_prompt, 
+                            temperature=1
+                        )
+                    
+                    # Add to results
+                    image_results.append({
+                        "image_id": image_id,
+                        "content": result
+                    })
+                    
+                except Exception as e:
+                    error_message = f"Error: {str(e)}"
+                    image_results.append({
+                        "image_id": image_id,
+                        "content": error_message
+                    })
+            
+            # Create a CSV file for download
+            csv_path = create_csv_file_simple(image_results)
+            
+            # Set up initial display with first image
+            if len(image_paths) > 0:
+                initial_image = image_paths[0]
+                initial_counter = f"{1} of {len(image_paths)}"
+                initial_text = image_results[0]["content"]
+            else:
+                initial_image = ""
+                initial_text = "No images analyzed"
+                initial_counter = "0 of 0"
+            
+            return (image_paths, image_results, 0, initial_image, initial_counter, 
+                    initial_text, csv_path)
+
+        
+        # Function to navigate to previous image
+        def go_to_prev(current_idx, images, results):
+            if not images or len(images) == 0:
+                return current_idx, "", "0 of 0", ""
+            
+            new_idx = (current_idx - 1) % len(images) if current_idx > 0 else len(images) - 1
+            counter_html = f"{new_idx + 1} of {len(images)}"
+            
+            return (new_idx, images[new_idx], counter_html, results[new_idx]["content"])
+        
+        # Function to navigate to next image
+        def go_to_next(current_idx, images, results):
+            if not images or len(images) == 0:
+                return current_idx, "", "0 of 0", ""
+            
+            new_idx = (current_idx + 1) % len(images)
+            counter_html = f"{new_idx + 1} of {len(images)}"
+            
+            return (new_idx, images[new_idx], counter_html, results[new_idx]["content"])
+        
+        # Connect the analyze button
+        analyze_button.click(
+            fn=analyze_images,
+            inputs=[image_state, model_choice, length_choice, filename_state],
+            outputs=[
+                all_images, all_results, current_index, current_image, image_counter,
+                analysis_text, csv_download
+            ]
+        )
+        
+        # Connect navigation buttons
+        prev_button.click(
+            fn=go_to_prev,
+            inputs=[current_index, all_images, all_results],
+            outputs=[current_index, current_image, image_counter, analysis_text]
+        )
+        
+        next_button.click(
+            fn=go_to_next,
+            inputs=[current_index, all_images, all_results],
+            outputs=[current_index, current_image, image_counter, analysis_text]
+        )
         
-        with gr.Column():
-            output_image = gr.Image(label="Displayed Image")
+        # Optional: Add additional information
+        with gr.Accordion("About", open=False):
+            gr.Markdown("""
+            ## About this demo
+            
+            This demo generates alternative text for images.
+            
+            - Upload one or more images using the upload button
+            - Choose a model and response length for generation
+            - Navigate through the images with the Previous and Next buttons
+            - Download CSV with all results
+            
+            Developed by the Natural History Museum in Partnership with National Museums Liverpool.
+            
+            If you find any bugs/have any problems/have any suggestions please feel free to get in touch:
+            chris.addis@nhm.ac.uk
+            """)
     
-    upload_button.click(
-        fn=process_image, 
-        inputs=input_image, 
-        outputs=output_image
-    )
+    return demo
 
 # Launch the app
 if __name__ == "__main__":
-    demo.launch()
+    app = create_demo()
+    app.launch()

.ipynb_checkpoints/app2-checkpoint.py

@@ -0,0 +1,27 @@
+import gradio as gr
+
+def process_image(image):
+    # Simply return the image as is for display
+    return image
+
+# Create the Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("# Image Uploader and Viewer")
+    
+    with gr.Row():
+        with gr.Column():
+            input_image = gr.Image(type="pil", label="Upload an image")
+            upload_button = gr.Button("Display Image")
+        
+        with gr.Column():
+            output_image = gr.Image(label="Displayed Image")
+    
+    upload_button.click(
+        fn=process_image, 
+        inputs=input_image, 
+        outputs=output_image
+    )
+
+# Launch the app
+if __name__ == "__main__":
+    demo.launch()

app-Copy1.py

@@ -1,380 +0,0 @@
-import gradio as gr
-import numpy as np
-from PIL import Image
-import io
-import os
-import requests
-import json
-from dotenv import load_dotenv
-import openai
-import base64
-import csv
-import tempfile
-import datetime
-
-# Load environment variables from .env file if it exists (for local development)
-# On Hugging Face Spaces, the secrets are automatically available as environment variables
-if os.path.exists(".env"):
-    load_dotenv()
-
-from io import BytesIO
-import numpy as np
-import requests
-from PIL import Image
-
-# import libraries
-from library.utils_model import *
-from library.utils_html import *
-from library.utils_prompt import *
-
-OR = OpenRouterAPI()
-gemini = OpenRouterAPI(api_key = os.getenv("GEMINI_API_KEY"),base_url="https://generativelanguage.googleapis.com/v1beta/openai/")
-
-# Path for storing user preferences
-PREFERENCES_FILE = "data/user_preferences.csv"
-
-# Ensure directory exists
-os.makedirs(os.path.dirname(PREFERENCES_FILE), exist_ok=True)
-
-def get_sys_prompt(length="medium"):
-    if length == "short":
-        dev_prompt = """You are a museum curator tasked with generating alt-text (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be a maximum of 130 characters."""
-    elif length == "medium":
-        dev_prompt = """You are a museum curator tasked with generating long descriptions (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be between 250-300 characters in length."""
-    else:
-        dev_prompt = """You are a museum curator tasked with generating long descriptions (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be a maxium of 450 characters."""
-    return dev_prompt
-
-# This function is no longer needed since we removed A/B testing
-
-def create_csv_file_simple(results):
-    """Create a CSV file from the results and return the path"""
-    # Create a temporary file
-    fd, path = tempfile.mkstemp(suffix='.csv')
-    
-    with os.fdopen(fd, 'w', newline='') as f:
-        writer = csv.writer(f)
-        # Write header
-        writer.writerow(['image_id', 'content'])
-        # Write data
-        for result in results:
-            writer.writerow([
-                result.get('image_id', ''),
-                result.get('content', '')
-            ])
-    
-    return path
-
-# Extract original filename without path or extension
-def get_base_filename(filepath):
-    if not filepath:
-        return ""
-    # Get the basename (filename with extension)
-    basename = os.path.basename(filepath)
-    # Remove extension
-    filename = os.path.splitext(basename)[0]
-    return filename
-
-# Define the Gradio interface
-def create_demo():
-    with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
-        # Replace the existing logo code section:
-        with gr.Row():
-            with gr.Column(scale=3):
-                gr.Markdown("# AI Alt-text Generator")
-                gr.Markdown("Upload one or more images to generate alternative text (designed to meet WCAG 2.1 Guidelines)")
-                gr.Markdown("Developed by the Natural History Museum in Partnership with National Museums Liverpool. Funded by the DCMS Pilot Scheme")
-            with gr.Column(scale=1):
-                with gr.Row():
-                    # Use gr.Image with all interactive features disabled
-                    gr.Image("images/nhm_logo.png", show_label=False, height=120, 
-                            interactive=False, show_download_button=False, 
-                            show_share_button=False, show_fullscreen_button=False,
-                            container=False)
-                    gr.Image("images/nml_logo.png", show_label=False, height=120, 
-                            interactive=False, show_download_button=False,
-                            show_share_button=False, show_fullscreen_button=False,
-                            container=False)
-
-        
-        with gr.Row():
-            # Left column: Controls and uploads
-            with gr.Column(scale=1):
-                # Upload interface
-                upload_button = gr.UploadButton(
-                    "Click to Upload Images", 
-                    file_types=["image"], 
-                    file_count="multiple"
-                )
-                
-                # Define choices as a list of tuples: (Display Name, Internal Value)
-                model_choices = [
-                    # Gemini
-                    ("Gemini 2.0 Flash (default)", "google/gemini-2.0-flash-001"),
-                    # GPT-4.1 Series
-                    ("GPT-4.1 Nano", "gpt-4.1-nano"),
-                    ("GPT-4.1 Mini", "gpt-4.1-mini"),
-                    ("GPT-4.1", "gpt-4.1"),
-                    ("ChatGPT Latest", "openai/chatgpt-4o-latest"),
-                    # Other Models
-                    ("Claude 3.7 Sonnet", "anthropic/claude-3.7-sonnet"),
-                    ("Llama 4 Maverick", "meta-llama/llama-4-maverick"),
-                    # Experimental Models
-                    ("Gemini 2.5 Pro (Experimental, limited)", "gemini-2.5-pro-exp-03-25"),
-                    ("Gemini 2.0 Flash Thinking (Experimental, limited)", "gemini-2.0-flash-thinking-exp-01-21")
-                ]
-                
-                # Find the internal value of the default choice
-                default_model_internal_value = "google/gemini-2.0-flash-001"
-                
-                # Add model selection dropdown
-                model_choice = gr.Dropdown(
-                    choices=model_choices,
-                    label="Select Model",
-                    value=default_model_internal_value, # Use the internal value for the default
-                    # info="Choose the language model to use." # Optional: Add extra info tooltip
-                    visible=True
-                )
-
-                
-                # Add response length selection
-                length_choice = gr.Radio(
-                    choices=["short", "medium", "long"],
-                    label="Response Length",
-                    value="medium",
-                    info="Short: max 130 chars | Medium: 250-300 chars | Long: max 450 chars"
-                )
-                
-                # Preview gallery for uploaded images
-                gr.Markdown("### Uploaded Images")
-                input_gallery = gr.Gallery(
-                    label="",
-                    columns=3, 
-                    height=150,
-                    object_fit="contain"
-                )
-                
-                # Analysis button
-                analyze_button = gr.Button("Analyze Images", variant="primary", size="lg")
-                
-                # Hidden state component to store image info
-                image_state = gr.State([])
-                filename_state = gr.State([])
-                
-                # CSV download component
-                csv_download = gr.File(label="CSV Results")
-            
-            # Right column: Display area
-            with gr.Column(scale=2):
-                with gr.Column(elem_classes="image-container"):
-                    current_image = gr.Image(
-                     label="Current Image",
-                     height=600,         # Set the maximum desired height
-                     type="filepath",
-                     show_fullscreen_button=True,
-                     show_download_button=False,
-                     show_share_button=False
-                    )
-                
-                # Navigation row
-                with gr.Row():
-                    prev_button = gr.Button("← Previous", size="sm")
-                    image_counter = gr.Markdown("", elem_id="image-counter")
-                    next_button = gr.Button("Next →", size="sm")
-                
-                # Alt-text heading and output
-                gr.Markdown("### Generated Alt-text")
-                
-                # Alt-text
-                analysis_text = gr.Textbox(
-                    label="",
-                    value="Please analyze images to see results",
-                    lines=6,
-                    max_lines=10,
-                    interactive=False,
-                    show_label=False
-                )
-                
-                # Hidden state for gallery navigation
-                current_index = gr.State(0)
-                all_images = gr.State([])
-                all_results = gr.State([])
-        
-        # Handle file uploads - store files for use during analysis
-        def handle_upload(files):
-            file_paths = []
-            file_names = []
-            for file in files:
-                file_paths.append(file.name)
-                # Extract filename without path or extension for later use
-                file_names.append(get_base_filename(file.name))
-            return file_paths, file_paths, file_names
-        
-        upload_button.upload(
-            fn=handle_upload,
-            inputs=[upload_button],
-            outputs=[input_gallery, image_state, filename_state]
-        )
-        
-        # Function to analyze images
-        # Modify the analyze_images function in your code:
-
-        def analyze_images(image_paths, model_choice, length_choice, filenames):
-            if not image_paths:
-                return [], [], 0, "", "No images", "", ""
-            
-            # Get system prompt based on length selection
-            sys_prompt = get_sys_prompt(length_choice)
-            
-            image_results = []
-            
-            for i, image_path in enumerate(image_paths):
-                # Use original filename as image_id if available
-                if i < len(filenames) and filenames[i]:
-                    image_id = filenames[i]
-                else:
-                    image_id = f"Image {i+1}"
-                
-                try:
-                    # Open the image file for analysis
-                    img = Image.open(image_path)
-                    prompt0 = prompt_new()  # Using the new prompt function
-                    
-                    # Extract the actual model name (remove any labels like "(default)")
-                    if " (" in model_choice:
-                        model_name = model_choice.split(" (")[0]
-                    else:
-                        model_name = model_choice
-                    
-                    # Check if this is one of the Gemini models that needs special handling
-                    is_gemini_model = "gemini-2.5-pro" in model_name or "gemini-2.0-flash-thinking" in model_name
-                    
-                    if is_gemini_model:
-                        try:
-                            # First try using the dedicated gemini client
-                            result = gemini.generate_caption(
-                                img, 
-                                model=model_name, 
-                                max_image_size=512,
-                                prompt=prompt0, 
-                                prompt_dev=sys_prompt, 
-                                temperature=1
-                            )
-                        except Exception as gemini_error:
-                            # If gemini client fails, fall back to standard OR client
-                            result = OR.generate_caption(
-                                img, 
-                                model=model_name, 
-                                max_image_size=512,
-                                prompt=prompt0, 
-                                prompt_dev=sys_prompt, 
-                                temperature=1
-                            )
-                    else:
-                        # For all other models, use OR client directly
-                        result = OR.generate_caption(
-                            img, 
-                            model=model_name, 
-                            max_image_size=512,
-                            prompt=prompt0, 
-                            prompt_dev=sys_prompt, 
-                            temperature=1
-                        )
-                    
-                    # Add to results
-                    image_results.append({
-                        "image_id": image_id,
-                        "content": result
-                    })
-                    
-                except Exception as e:
-                    error_message = f"Error: {str(e)}"
-                    image_results.append({
-                        "image_id": image_id,
-                        "content": error_message
-                    })
-            
-            # Create a CSV file for download
-            csv_path = create_csv_file_simple(image_results)
-            
-            # Set up initial display with first image
-            if len(image_paths) > 0:
-                initial_image = image_paths[0]
-                initial_counter = f"{1} of {len(image_paths)}"
-                initial_text = image_results[0]["content"]
-            else:
-                initial_image = ""
-                initial_text = "No images analyzed"
-                initial_counter = "0 of 0"
-            
-            return (image_paths, image_results, 0, initial_image, initial_counter, 
-                    initial_text, csv_path)
-
-        
-        # Function to navigate to previous image
-        def go_to_prev(current_idx, images, results):
-            if not images or len(images) == 0:
-                return current_idx, "", "0 of 0", ""
-            
-            new_idx = (current_idx - 1) % len(images) if current_idx > 0 else len(images) - 1
-            counter_html = f"{new_idx + 1} of {len(images)}"
-            
-            return (new_idx, images[new_idx], counter_html, results[new_idx]["content"])
-        
-        # Function to navigate to next image
-        def go_to_next(current_idx, images, results):
-            if not images or len(images) == 0:
-                return current_idx, "", "0 of 0", ""
-            
-            new_idx = (current_idx + 1) % len(images)
-            counter_html = f"{new_idx + 1} of {len(images)}"
-            
-            return (new_idx, images[new_idx], counter_html, results[new_idx]["content"])
-        
-        # Connect the analyze button
-        analyze_button.click(
-            fn=analyze_images,
-            inputs=[image_state, model_choice, length_choice, filename_state],
-            outputs=[
-                all_images, all_results, current_index, current_image, image_counter,
-                analysis_text, csv_download
-            ]
-        )
-        
-        # Connect navigation buttons
-        prev_button.click(
-            fn=go_to_prev,
-            inputs=[current_index, all_images, all_results],
-            outputs=[current_index, current_image, image_counter, analysis_text]
-        )
-        
-        next_button.click(
-            fn=go_to_next,
-            inputs=[current_index, all_images, all_results],
-            outputs=[current_index, current_image, image_counter, analysis_text]
-        )
-        
-        # Optional: Add additional information
-        with gr.Accordion("About", open=False):
-            gr.Markdown("""
-            ## About this demo
-            
-            This demo generates alternative text for images.
-            
-            - Upload one or more images using the upload button
-            - Choose a model and response length for generation
-            - Navigate through the images with the Previous and Next buttons
-            - Download CSV with all results
-            
-            Developed by the Natural History Museum in Partnership with National Museums Liverpool.
-            
-            If you find any bugs/have any problems/have any suggestions please feel free to get in touch:
-            chris.addis@nhm.ac.uk
-            """)
-    
-    return demo
-
-# Launch the app
-if __name__ == "__main__":
-    app = create_demo()
-    app.launch()

app.py

@@ -45,6 +45,8 @@ def get_sys_prompt(length="medium"):
         dev_prompt = """You are a museum curator tasked with generating long descriptions (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be a maxium of 450 characters."""
     return dev_prompt
 
+# This function is no longer needed since we removed A/B testing
+
 def create_csv_file_simple(results):
     """Create a CSV file from the results and return the path"""
     # Create a temporary file
@@ -73,264 +75,153 @@ def get_base_filename(filepath):
     filename = os.path.splitext(basename)[0]
     return filename
 
-# Define custom CSS for the application
-custom_css = """
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-.header {
-    text-align: center;
-    margin-bottom: 20px;
-    border-bottom: 2px solid #eee;
-    padding-bottom: 15px;
-}
-.model-card {
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 15px;
-    background-color: #f9f9f9;
-    margin-bottom: 15px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-.upload-box {
-    border: 2px dashed #ccc;
-    border-radius: 8px;
-    padding: 20px;
-    text-align: center;
-    margin-bottom: 15px;
-    background-color: #f7f7f7;
-    transition: all 0.3s ease;
-}
-.upload-box:hover {
-    border-color: #2196F3;
-    background-color: #f0f8ff;
-}
-.gallery-container {
-    background-color: #f5f5f5;
-    border-radius: 8px;
-    padding: 10px;
-    margin-bottom: 15px;
-}
-.result-container {
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 15px;
-    margin-top: 20px;
-    background-color: white;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-.nav-buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 10px 0;
-}
-.footer {
-    text-align: center;
-    margin-top: 30px;
-    padding-top: 15px;
-    border-top: 1px solid #eee;
-    color: #666;
-    font-size: 0.9em;
-}
-.logo-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 20px;
-    margin-bottom: 10px;
-}
-.length-selector {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 15px;
-}
-.progress-indicator {
-    height: 4px;
-    background-color: #f0f0f0;
-    border-radius: 2px;
-    overflow: hidden;
-    margin-bottom: 15px;
-}
-.progress-bar {
-    height: 100%;
-    background-color: #4CAF50;
-    width: 0%;
-    transition: width 0.3s ease;
-}
-"""
-
-# Define the Gradio interface with the new design
+# Define the Gradio interface
 def create_demo():
-    # Use the Monochrome theme with custom CSS for better compatibility
-    theme = gr.themes.Monochrome()
-
-    with gr.Blocks(theme=theme, css=custom_css) as demo:
-        # Header section
-        with gr.Row(elem_classes="header"):
+    with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
+        # Replace the existing logo code section:
+        with gr.Row():
             with gr.Column(scale=3):
                 gr.Markdown("# AI Alt-text Generator")
-                gr.Markdown("Upload images to generate accessible alternative text that meets WCAG 2.1 Guidelines")
-            
-            with gr.Column(scale=1, elem_classes="logo-container"):
-                gr.Image("images/nhm_logo.png", show_label=False, height=80, 
-                        interactive=False, show_download_button=False, 
-                        show_share_button=False, show_fullscreen_button=False)
-                gr.Image("images/nml_logo.png", show_label=False, height=80, 
-                        interactive=False, show_download_button=False,
-                        show_share_button=False, show_fullscreen_button=False)
+                gr.Markdown("Upload one or more images to generate alternative text (designed to meet WCAG 2.1 Guidelines)")
+                gr.Markdown("Developed by the Natural History Museum in Partnership with National Museums Liverpool. Funded by the DCMS Pilot Scheme")
+            with gr.Column(scale=1):
+                with gr.Row():
+                    # Use gr.Image with all interactive features disabled
+                    gr.Image("images/nhm_logo.png", show_label=False, height=120, 
+                            interactive=False, show_download_button=False, 
+                            show_share_button=False, show_fullscreen_button=False,
+                            container=False)
+                    gr.Image("images/nml_logo.png", show_label=False, height=120, 
+                            interactive=False, show_download_button=False,
+                            show_share_button=False, show_fullscreen_button=False,
+                            container=False)
 
-        # Main content area
+        
         with gr.Row():
-            # Left panel - Controls
-            with gr.Column(scale=1, elem_classes="control-panel"):
-                # Upload area with styling
-                with gr.Column(elem_classes="upload-box"):
-                    upload_button = gr.UploadButton(
-                        "📷 Upload Images", 
-                        file_types=["image"], 
-                        file_count="multiple",
-                        size="lg"
-                    )
-                    gr.Markdown("*Drag and drop or click to upload multiple images*")
+            # Left column: Controls and uploads
+            with gr.Column(scale=1):
+                # Upload interface
+                upload_button = gr.UploadButton(
+                    "Click to Upload Images", 
+                    file_types=["image"], 
+                    file_count="multiple"
+                )
                 
-                # Options card
-                with gr.Column(elem_classes="model-card"):
-                    gr.Markdown("### Model Settings")
-                    
-                    # Model selection dropdown
-                    model_choices = [
-                        # Gemini
-                        ("Gemini 2.0 Flash (default)", "google/gemini-2.0-flash-001"),
-                        # GPT-4.1 Series
-                        ("GPT-4.1 Nano", "gpt-4.1-nano"),
-                        ("GPT-4.1 Mini", "gpt-4.1-mini"),
-                        ("GPT-4.1", "gpt-4.1"),
-                        ("ChatGPT Latest", "openai/chatgpt-4o-latest"),
-                        # Other Models
-                        ("Claude 3.7 Sonnet", "anthropic/claude-3.7-sonnet"),
-                        ("Llama 4 Maverick", "meta-llama/llama-4-maverick"),
-                        # Experimental Models
-                        ("Gemini 2.5 Pro (Experimental)", "gemini-2.5-pro-exp-03-25"),
-                        ("Gemini 2.0 Flash Thinking (Experimental)", "gemini-2.0-flash-thinking-exp-01-21")
-                    ]
-                    
-                    default_model_internal_value = "google/gemini-2.0-flash-001"
-                    
-                    model_choice = gr.Dropdown(
-                        choices=model_choices,
-                        label="AI Model",
-                        value=default_model_internal_value,
-                        info="Select the AI model for generating descriptions",
-                        visible=True
-                    )
-                    
-                    # Length selector with visual indicators
-                    gr.Markdown("### Response Length")
-                    with gr.Row(elem_classes="length-selector"):
-                        length_choice = gr.Radio(
-                            choices=["short", "medium", "long"],
-                            label="Response Length",
-                            value="medium",
-                            info="Short: max 130 chars | Medium: 250-300 chars | Long: max 450 chars"
-                        )
+                # Define choices as a list of tuples: (Display Name, Internal Value)
+                model_choices = [
+                    # Gemini
+                    ("Gemini 2.0 Flash (default)", "google/gemini-2.0-flash-001"),
+                    # GPT-4.1 Series
+                    ("GPT-4.1 Nano", "gpt-4.1-nano"),
+                    ("GPT-4.1 Mini", "gpt-4.1-mini"),
+                    ("GPT-4.1", "gpt-4.1"),
+                    ("ChatGPT Latest", "openai/chatgpt-4o-latest"),
+                    # Other Models
+                    ("Claude 3.7 Sonnet", "anthropic/claude-3.7-sonnet"),
+                    ("Llama 4 Maverick", "meta-llama/llama-4-maverick"),
+                    # Experimental Models
+                    ("Gemini 2.5 Pro (Experimental, limited)", "gemini-2.5-pro-exp-03-25"),
+                    ("Gemini 2.0 Flash Thinking (Experimental, limited)", "gemini-2.0-flash-thinking-exp-01-21")
+                ]
                 
-                # Image preview gallery
-                with gr.Column(elem_classes="gallery-container"):
-                    gr.Markdown("### Uploaded Images")
-                    input_gallery = gr.Gallery(
-                        label="",
-                        columns=3, 
-                        height=180,
-                        object_fit="contain"
-                    )
-                    
-                    # Analysis button
-                    analyze_button = gr.Button("🔍 Analyze Images", variant="primary", size="lg")
+                # Find the internal value of the default choice
+                default_model_internal_value = "google/gemini-2.0-flash-001"
                 
-                # CSV Download section
-                with gr.Column(visible=False, elem_id="download-section", elem_classes="model-card") as download_section:
-                    gr.Markdown("### Download Results")
-                    csv_download = gr.File(label="CSV Results", elem_id="csv-download")
+                # Add model selection dropdown
+                model_choice = gr.Dropdown(
+                    choices=model_choices,
+                    label="Select Model",
+                    value=default_model_internal_value, # Use the internal value for the default
+                    # info="Choose the language model to use." # Optional: Add extra info tooltip
+                    visible=True
+                )
+
+                
+                # Add response length selection
+                length_choice = gr.Radio(
+                    choices=["short", "medium", "long"],
+                    label="Response Length",
+                    value="medium",
+                    info="Short: max 130 chars | Medium: 250-300 chars | Long: max 450 chars"
+                )
+                
+                # Preview gallery for uploaded images
+                gr.Markdown("### Uploaded Images")
+                input_gallery = gr.Gallery(
+                    label="",
+                    columns=3, 
+                    height=150,
+                    object_fit="contain"
+                )
                 
-                # Hidden state components
+                # Analysis button
+                analyze_button = gr.Button("Analyze Images", variant="primary", size="lg")
+                
+                # Hidden state component to store image info
                 image_state = gr.State([])
                 filename_state = gr.State([])
                 
-            # Right panel - Results display
-            with gr.Column(scale=2, elem_classes="results-panel"):
-                with gr.Column(elem_classes="result-container"):
-                    # Progress indicator
-                    with gr.Row(elem_id="progress-container", visible=False) as progress_container:
-                        with gr.Column():
-                            gr.HTML('<div class="progress-indicator"><div class="progress-bar" id="progress-bar"></div></div>')
-                            progress_text = gr.Markdown("Processing...", elem_id="progress-text")
-                    
-                    # Image display
+                # CSV download component
+                csv_download = gr.File(label="CSV Results")
+            
+            # Right column: Display area
+            with gr.Column(scale=2):
+                with gr.Column(elem_classes="image-container"):
                     current_image = gr.Image(
-                        label="Image Preview",
-                        height=400,
-                        type="filepath",
-                        show_fullscreen_button=True,
-                        show_download_button=False,
-                        show_share_button=False,
-                        elem_classes="current-image"
-                    )
-                    
-                    # Navigation controls
-                    with gr.Row(elem_classes="nav-buttons"):
-                        prev_button = gr.Button("← Previous", size="sm", variant="secondary")
-                        image_counter = gr.Markdown("", elem_id="image-counter")
-                        next_button = gr.Button("Next →", size="sm", variant="secondary")
-                    
-                    # Alt-text results
-                    gr.Markdown("### Generated Alt-text", elem_id="result-heading")
-                    analysis_text = gr.Textbox(
-                        label="",
-                        value="Images will appear here after analysis. Please upload and analyze images to see results.",
-                        lines=6,
-                        max_lines=10,
-                        interactive=False,
-                        show_label=False,
-                        elem_classes="result-text"
+                     label="Current Image",
+                     height=600,         # Set the maximum desired height
+                     type="filepath",
+                     show_fullscreen_button=True,
+                     show_download_button=False,
+                     show_share_button=False
                     )
                 
-                # Hidden states for navigation
+                # Navigation row
+                with gr.Row():
+                    prev_button = gr.Button("← Previous", size="sm")
+                    image_counter = gr.Markdown("", elem_id="image-counter")
+                    next_button = gr.Button("Next →", size="sm")
+                
+                # Alt-text heading and output
+                gr.Markdown("### Generated Alt-text")
+                
+                # Alt-text
+                analysis_text = gr.Textbox(
+                    label="",
+                    value="Please analyze images to see results",
+                    lines=6,
+                    max_lines=10,
+                    interactive=False,
+                    show_label=False
+                )
+                
+                # Hidden state for gallery navigation
                 current_index = gr.State(0)
                 all_images = gr.State([])
                 all_results = gr.State([])
         
-        # Footer section
-        with gr.Row(elem_classes="footer"):
-            gr.Markdown("""
-            Developed by the Natural History Museum in Partnership with National Museums Liverpool. 
-            Funded by the DCMS Pilot Scheme. For support, contact: chris.addis@nhm.ac.uk
-            """)
-        
-        # Handle file uploads
+        # Handle file uploads - store files for use during analysis
         def handle_upload(files):
             file_paths = []
             file_names = []
             for file in files:
                 file_paths.append(file.name)
+                # Extract filename without path or extension for later use
                 file_names.append(get_base_filename(file.name))
-            
-            # Show a message about the number of files uploaded
-            upload_message = f"✅ {len(files)} image{'s' if len(files) != 1 else ''} uploaded successfully!"
-            
-            return file_paths, file_paths, file_names, upload_message
+            return file_paths, file_paths, file_names
         
         upload_button.upload(
             fn=handle_upload,
             inputs=[upload_button],
-            outputs=[input_gallery, image_state, filename_state, progress_text]
+            outputs=[input_gallery, image_state, filename_state]
         )
         
-        # Function to analyze images with visual feedback
+        # Function to analyze images
+        # Modify the analyze_images function in your code:
+
         def analyze_images(image_paths, model_choice, length_choice, filenames):
             if not image_paths:
-                return [], [], 0, "", "No images uploaded", "", gr.update(visible=False)
+                return [], [], 0, "", "No images", "", ""
             
             # Get system prompt based on length selection
             sys_prompt = get_sys_prompt(length_choice)
@@ -347,12 +238,15 @@ def create_demo():
                 try:
                     # Open the image file for analysis
                     img = Image.open(image_path)
-                    prompt0 = prompt_new()
+                    prompt0 = prompt_new()  # Using the new prompt function
                     
-                    # Use model_choice directly since it's the internal value
-                    model_name = model_choice
+                    # Extract the actual model name (remove any labels like "(default)")
+                    if " (" in model_choice:
+                        model_name = model_choice.split(" (")[0]
+                    else:
+                        model_name = model_choice
                     
-                    # Check if this is one of the Gemini models
+                    # Check if this is one of the Gemini models that needs special handling
                     is_gemini_model = "gemini-2.5-pro" in model_name or "gemini-2.0-flash-thinking" in model_name
                     
                     if is_gemini_model:
@@ -413,11 +307,9 @@ def create_demo():
                 initial_text = "No images analyzed"
                 initial_counter = "0 of 0"
             
-            # Make the download section visible now that we have results
-            download_visible = gr.update(visible=True)
-            
             return (image_paths, image_results, 0, initial_image, initial_counter, 
-                    initial_text, csv_path, download_visible)
+                    initial_text, csv_path)
+
         
         # Function to navigate to previous image
         def go_to_prev(current_idx, images, results):
@@ -439,24 +331,14 @@ def create_demo():
             
             return (new_idx, images[new_idx], counter_html, results[new_idx]["content"])
         
-        # Show progress indicator during analysis
+        # Connect the analyze button
         analyze_button.click(
-            fn=lambda: (gr.update(visible=True), "Processing images... Please wait"),
-            inputs=[],
-            outputs=[progress_container, progress_text],
-            queue=False
-        ).then(
             fn=analyze_images,
             inputs=[image_state, model_choice, length_choice, filename_state],
             outputs=[
                 all_images, all_results, current_index, current_image, image_counter,
-                analysis_text, csv_download, download_section
+                analysis_text, csv_download
             ]
-        ).then(
-            fn=lambda: (gr.update(visible=False), "Analysis complete!"),
-            inputs=[],
-            outputs=[progress_container, progress_text],
-            queue=False
         )
         
         # Connect navigation buttons
@@ -472,33 +354,22 @@ def create_demo():
             outputs=[current_index, current_image, image_counter, analysis_text]
         )
         
-        # Additional information accordion
-        with gr.Accordion("About this Tool", open=False):
+        # Optional: Add additional information
+        with gr.Accordion("About", open=False):
             gr.Markdown("""
-            ## About the AI Alt-text Generator
-            
-            This tool uses advanced AI models to automatically generate alternative text descriptions for images, 
-            helping museums and cultural institutions make their digital content more accessible for visually impaired users.
-            
-            ### Features:
-            
-            - **Multiple AI Models**: Choose from various AI models including Gemini, GPT-4.1, Claude, and others
-            - **Customizable Length**: Select short, medium, or long descriptions based on your needs
-            - **Batch Processing**: Upload and process multiple images at once
-            - **CSV Export**: Download all generated descriptions in a single file
+            ## About this demo
             
-            ### How to Use:
+            This demo generates alternative text for images.
             
-            1. Upload one or more images using the upload button
-            2. Select your preferred AI model and description length
-            3. Click "Analyze Images" to generate descriptions
-            4. Navigate through results with the Previous and Next buttons
-            5. Download all results as a CSV file
+            - Upload one or more images using the upload button
+            - Choose a model and response length for generation
+            - Navigate through the images with the Previous and Next buttons
+            - Download CSV with all results
             
             Developed by the Natural History Museum in Partnership with National Museums Liverpool.
-            Funded by the DCMS Pilot Scheme.
             
-            For support, feedback, or suggestions, please contact: chris.addis@nhm.ac.uk
+            If you find any bugs/have any problems/have any suggestions please feel free to get in touch:
+            chris.addis@nhm.ac.uk
             """)
     
     return demo

.ipynb_checkpoints/app-Copy1-checkpoint.py → app2.py

@@ -45,8 +45,6 @@ def get_sys_prompt(length="medium"):
         dev_prompt = """You are a museum curator tasked with generating long descriptions (as defined in WCAG 2.1) of museum objects for visually impaired and blind users from images. Use British English and follow museum accessibility best practices. Do not start with phrases like 'The image shows' or 'This is an image of'. Be precise, concise and avoid filler and subjective statements. Repsonses should be a maxium of 450 characters."""
     return dev_prompt
 
-# This function is no longer needed since we removed A/B testing
-
 def create_csv_file_simple(results):
     """Create a CSV file from the results and return the path"""
     # Create a temporary file
@@ -75,153 +73,264 @@ def get_base_filename(filepath):
     filename = os.path.splitext(basename)[0]
     return filename
 
-# Define the Gradio interface
+# Define custom CSS for the application
+custom_css = """
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.header {
+    text-align: center;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #eee;
+    padding-bottom: 15px;
+}
+.model-card {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.upload-box {
+    border: 2px dashed #ccc;
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+    margin-bottom: 15px;
+    background-color: #f7f7f7;
+    transition: all 0.3s ease;
+}
+.upload-box:hover {
+    border-color: #2196F3;
+    background-color: #f0f8ff;
+}
+.gallery-container {
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 15px;
+}
+.result-container {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 20px;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.nav-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
+}
+.footer {
+    text-align: center;
+    margin-top: 30px;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+    color: #666;
+    font-size: 0.9em;
+}
+.logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 10px;
+}
+.length-selector {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+.progress-indicator {
+    height: 4px;
+    background-color: #f0f0f0;
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+.progress-bar {
+    height: 100%;
+    background-color: #4CAF50;
+    width: 0%;
+    transition: width 0.3s ease;
+}
+"""
+
+# Define the Gradio interface with the new design
 def create_demo():
-    with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
-        # Replace the existing logo code section:
-        with gr.Row():
+    # Use the Monochrome theme with custom CSS for better compatibility
+    theme = gr.themes.Monochrome()
+
+    with gr.Blocks(theme=theme, css=custom_css) as demo:
+        # Header section
+        with gr.Row(elem_classes="header"):
             with gr.Column(scale=3):
                 gr.Markdown("# AI Alt-text Generator")
-                gr.Markdown("Upload one or more images to generate alternative text (designed to meet WCAG 2.1 Guidelines)")
-                gr.Markdown("Developed by the Natural History Museum in Partnership with National Museums Liverpool. Funded by the DCMS Pilot Scheme")
-            with gr.Column(scale=1):
-                with gr.Row():
-                    # Use gr.Image with all interactive features disabled
-                    gr.Image("images/nhm_logo.png", show_label=False, height=120, 
-                            interactive=False, show_download_button=False, 
-                            show_share_button=False, show_fullscreen_button=False,
-                            container=False)
-                    gr.Image("images/nml_logo.png", show_label=False, height=120, 
-                            interactive=False, show_download_button=False,
-                            show_share_button=False, show_fullscreen_button=False,
-                            container=False)
+                gr.Markdown("Upload images to generate accessible alternative text that meets WCAG 2.1 Guidelines")
+            
+            with gr.Column(scale=1, elem_classes="logo-container"):
+                gr.Image("images/nhm_logo.png", show_label=False, height=80, 
+                        interactive=False, show_download_button=False, 
+                        show_share_button=False, show_fullscreen_button=False)
+                gr.Image("images/nml_logo.png", show_label=False, height=80, 
+                        interactive=False, show_download_button=False,
+                        show_share_button=False, show_fullscreen_button=False)
 
-        
+        # Main content area
         with gr.Row():
-            # Left column: Controls and uploads
-            with gr.Column(scale=1):
-                # Upload interface
-                upload_button = gr.UploadButton(
-                    "Click to Upload Images", 
-                    file_types=["image"], 
-                    file_count="multiple"
-                )
-                
-                # Define choices as a list of tuples: (Display Name, Internal Value)
-                model_choices = [
-                    # Gemini
-                    ("Gemini 2.0 Flash (default)", "google/gemini-2.0-flash-001"),
-                    # GPT-4.1 Series
-                    ("GPT-4.1 Nano", "gpt-4.1-nano"),
-                    ("GPT-4.1 Mini", "gpt-4.1-mini"),
-                    ("GPT-4.1", "gpt-4.1"),
-                    ("ChatGPT Latest", "openai/chatgpt-4o-latest"),
-                    # Other Models
-                    ("Claude 3.7 Sonnet", "anthropic/claude-3.7-sonnet"),
-                    ("Llama 4 Maverick", "meta-llama/llama-4-maverick"),
-                    # Experimental Models
-                    ("Gemini 2.5 Pro (Experimental, limited)", "gemini-2.5-pro-exp-03-25"),
-                    ("Gemini 2.0 Flash Thinking (Experimental, limited)", "gemini-2.0-flash-thinking-exp-01-21")
-                ]
-                
-                # Find the internal value of the default choice
-                default_model_internal_value = "google/gemini-2.0-flash-001"
-                
-                # Add model selection dropdown
-                model_choice = gr.Dropdown(
-                    choices=model_choices,
-                    label="Select Model",
-                    value=default_model_internal_value, # Use the internal value for the default
-                    # info="Choose the language model to use." # Optional: Add extra info tooltip
-                    visible=True
-                )
-
+            # Left panel - Controls
+            with gr.Column(scale=1, elem_classes="control-panel"):
+                # Upload area with styling
+                with gr.Column(elem_classes="upload-box"):
+                    upload_button = gr.UploadButton(
+                        "📷 Upload Images", 
+                        file_types=["image"], 
+                        file_count="multiple",
+                        size="lg"
+                    )
+                    gr.Markdown("*Drag and drop or click to upload multiple images*")
                 
-                # Add response length selection
-                length_choice = gr.Radio(
-                    choices=["short", "medium", "long"],
-                    label="Response Length",
-                    value="medium",
-                    info="Short: max 130 chars | Medium: 250-300 chars | Long: max 450 chars"
-                )
+                # Options card
+                with gr.Column(elem_classes="model-card"):
+                    gr.Markdown("### Model Settings")
+                    
+                    # Model selection dropdown
+                    model_choices = [
+                        # Gemini
+                        ("Gemini 2.0 Flash (default)", "google/gemini-2.0-flash-001"),
+                        # GPT-4.1 Series
+                        ("GPT-4.1 Nano", "gpt-4.1-nano"),
+                        ("GPT-4.1 Mini", "gpt-4.1-mini"),
+                        ("GPT-4.1", "gpt-4.1"),
+                        ("ChatGPT Latest", "openai/chatgpt-4o-latest"),
+                        # Other Models
+                        ("Claude 3.7 Sonnet", "anthropic/claude-3.7-sonnet"),
+                        ("Llama 4 Maverick", "meta-llama/llama-4-maverick"),
+                        # Experimental Models
+                        ("Gemini 2.5 Pro (Experimental)", "gemini-2.5-pro-exp-03-25"),
+                        ("Gemini 2.0 Flash Thinking (Experimental)", "gemini-2.0-flash-thinking-exp-01-21")
+                    ]
+                    
+                    default_model_internal_value = "google/gemini-2.0-flash-001"
+                    
+                    model_choice = gr.Dropdown(
+                        choices=model_choices,
+                        label="AI Model",
+                        value=default_model_internal_value,
+                        info="Select the AI model for generating descriptions",
+                        visible=True
+                    )
+                    
+                    # Length selector with visual indicators
+                    gr.Markdown("### Response Length")
+                    with gr.Row(elem_classes="length-selector"):
+                        length_choice = gr.Radio(
+                            choices=["short", "medium", "long"],
+                            label="Response Length",
+                            value="medium",
+                            info="Short: max 130 chars | Medium: 250-300 chars | Long: max 450 chars"
+                        )
                 
-                # Preview gallery for uploaded images
-                gr.Markdown("### Uploaded Images")
-                input_gallery = gr.Gallery(
-                    label="",
-                    columns=3, 
-                    height=150,
-                    object_fit="contain"
-                )
+                # Image preview gallery
+                with gr.Column(elem_classes="gallery-container"):
+                    gr.Markdown("### Uploaded Images")
+                    input_gallery = gr.Gallery(
+                        label="",
+                        columns=3, 
+                        height=180,
+                        object_fit="contain"
+                    )
+                    
+                    # Analysis button
+                    analyze_button = gr.Button("🔍 Analyze Images", variant="primary", size="lg")
                 
-                # Analysis button
-                analyze_button = gr.Button("Analyze Images", variant="primary", size="lg")
+                # CSV Download section
+                with gr.Column(visible=False, elem_id="download-section", elem_classes="model-card") as download_section:
+                    gr.Markdown("### Download Results")
+                    csv_download = gr.File(label="CSV Results", elem_id="csv-download")
                 
-                # Hidden state component to store image info
+                # Hidden state components
                 image_state = gr.State([])
                 filename_state = gr.State([])
                 
-                # CSV download component
-                csv_download = gr.File(label="CSV Results")
-            
-            # Right column: Display area
-            with gr.Column(scale=2):
-                with gr.Column(elem_classes="image-container"):
+            # Right panel - Results display
+            with gr.Column(scale=2, elem_classes="results-panel"):
+                with gr.Column(elem_classes="result-container"):
+                    # Progress indicator
+                    with gr.Row(elem_id="progress-container", visible=False) as progress_container:
+                        with gr.Column():
+                            gr.HTML('<div class="progress-indicator"><div class="progress-bar" id="progress-bar"></div></div>')
+                            progress_text = gr.Markdown("Processing...", elem_id="progress-text")
+                    
+                    # Image display
                     current_image = gr.Image(
-                     label="Current Image",
-                     height=600,         # Set the maximum desired height
-                     type="filepath",
-                     show_fullscreen_button=True,
-                     show_download_button=False,
-                     show_share_button=False
+                        label="Image Preview",
+                        height=400,
+                        type="filepath",
+                        show_fullscreen_button=True,
+                        show_download_button=False,
+                        show_share_button=False,
+                        elem_classes="current-image"
+                    )
+                    
+                    # Navigation controls
+                    with gr.Row(elem_classes="nav-buttons"):
+                        prev_button = gr.Button("← Previous", size="sm", variant="secondary")
+                        image_counter = gr.Markdown("", elem_id="image-counter")
+                        next_button = gr.Button("Next →", size="sm", variant="secondary")
+                    
+                    # Alt-text results
+                    gr.Markdown("### Generated Alt-text", elem_id="result-heading")
+                    analysis_text = gr.Textbox(
+                        label="",
+                        value="Images will appear here after analysis. Please upload and analyze images to see results.",
+                        lines=6,
+                        max_lines=10,
+                        interactive=False,
+                        show_label=False,
+                        elem_classes="result-text"
                     )
                 
-                # Navigation row
-                with gr.Row():
-                    prev_button = gr.Button("← Previous", size="sm")
-                    image_counter = gr.Markdown("", elem_id="image-counter")
-                    next_button = gr.Button("Next →", size="sm")
-                
-                # Alt-text heading and output
-                gr.Markdown("### Generated Alt-text")
-                
-                # Alt-text
-                analysis_text = gr.Textbox(
-                    label="",
-                    value="Please analyze images to see results",
-                    lines=6,
-                    max_lines=10,
-                    interactive=False,
-                    show_label=False
-                )
-                
-                # Hidden state for gallery navigation
+                # Hidden states for navigation
                 current_index = gr.State(0)
                 all_images = gr.State([])
                 all_results = gr.State([])
         
-        # Handle file uploads - store files for use during analysis
+        # Footer section
+        with gr.Row(elem_classes="footer"):
+            gr.Markdown("""
+            Developed by the Natural History Museum in Partnership with National Museums Liverpool. 
+            Funded by the DCMS Pilot Scheme. For support, contact: chris.addis@nhm.ac.uk
+            """)
+        
+        # Handle file uploads
         def handle_upload(files):
             file_paths = []
             file_names = []
             for file in files:
                 file_paths.append(file.name)
-                # Extract filename without path or extension for later use
                 file_names.append(get_base_filename(file.name))
-            return file_paths, file_paths, file_names
+            
+            # Show a message about the number of files uploaded
+            upload_message = f"✅ {len(files)} image{'s' if len(files) != 1 else ''} uploaded successfully!"
+            
+            return file_paths, file_paths, file_names, upload_message
         
         upload_button.upload(
             fn=handle_upload,
             inputs=[upload_button],
-            outputs=[input_gallery, image_state, filename_state]
+            outputs=[input_gallery, image_state, filename_state, progress_text]
         )
         
-        # Function to analyze images
-        # Modify the analyze_images function in your code:
-
+        # Function to analyze images with visual feedback
         def analyze_images(image_paths, model_choice, length_choice, filenames):
             if not image_paths:
-                return [], [], 0, "", "No images", "", ""
+                return [], [], 0, "", "No images uploaded", "", gr.update(visible=False)
             
             # Get system prompt based on length selection
             sys_prompt = get_sys_prompt(length_choice)
@@ -238,15 +347,12 @@ def create_demo():
                 try:
                     # Open the image file for analysis
                     img = Image.open(image_path)
-                    prompt0 = prompt_new()  # Using the new prompt function
+                    prompt0 = prompt_new()
                     
-                    # Extract the actual model name (remove any labels like "(default)")
-                    if " (" in model_choice:
-                        model_name = model_choice.split(" (")[0]
-                    else:
-                        model_name = model_choice
+                    # Use model_choice directly since it's the internal value
+                    model_name = model_choice
                     
-                    # Check if this is one of the Gemini models that needs special handling
+                    # Check if this is one of the Gemini models
                     is_gemini_model = "gemini-2.5-pro" in model_name or "gemini-2.0-flash-thinking" in model_name
                     
                     if is_gemini_model:
@@ -307,9 +413,11 @@ def create_demo():
                 initial_text = "No images analyzed"
                 initial_counter = "0 of 0"
             
+            # Make the download section visible now that we have results
+            download_visible = gr.update(visible=True)
+            
             return (image_paths, image_results, 0, initial_image, initial_counter, 
-                    initial_text, csv_path)
-
+                    initial_text, csv_path, download_visible)
         
         # Function to navigate to previous image
         def go_to_prev(current_idx, images, results):
@@ -331,14 +439,24 @@ def create_demo():
             
             return (new_idx, images[new_idx], counter_html, results[new_idx]["content"])
         
-        # Connect the analyze button
+        # Show progress indicator during analysis
         analyze_button.click(
+            fn=lambda: (gr.update(visible=True), "Processing images... Please wait"),
+            inputs=[],
+            outputs=[progress_container, progress_text],
+            queue=False
+        ).then(
             fn=analyze_images,
             inputs=[image_state, model_choice, length_choice, filename_state],
             outputs=[
                 all_images, all_results, current_index, current_image, image_counter,
-                analysis_text, csv_download
+                analysis_text, csv_download, download_section
             ]
+        ).then(
+            fn=lambda: (gr.update(visible=False), "Analysis complete!"),
+            inputs=[],
+            outputs=[progress_container, progress_text],
+            queue=False
         )
         
         # Connect navigation buttons
@@ -354,22 +472,33 @@ def create_demo():
             outputs=[current_index, current_image, image_counter, analysis_text]
         )
         
-        # Optional: Add additional information
-        with gr.Accordion("About", open=False):
+        # Additional information accordion
+        with gr.Accordion("About this Tool", open=False):
             gr.Markdown("""
-            ## About this demo
+            ## About the AI Alt-text Generator
+            
+            This tool uses advanced AI models to automatically generate alternative text descriptions for images, 
+            helping museums and cultural institutions make their digital content more accessible for visually impaired users.
+            
+            ### Features:
+            
+            - **Multiple AI Models**: Choose from various AI models including Gemini, GPT-4.1, Claude, and others
+            - **Customizable Length**: Select short, medium, or long descriptions based on your needs
+            - **Batch Processing**: Upload and process multiple images at once
+            - **CSV Export**: Download all generated descriptions in a single file
             
-            This demo generates alternative text for images.
+            ### How to Use:
             
-            - Upload one or more images using the upload button
-            - Choose a model and response length for generation
-            - Navigate through the images with the Previous and Next buttons
-            - Download CSV with all results
+            1. Upload one or more images using the upload button
+            2. Select your preferred AI model and description length
+            3. Click "Analyze Images" to generate descriptions
+            4. Navigate through results with the Previous and Next buttons
+            5. Download all results as a CSV file
             
             Developed by the Natural History Museum in Partnership with National Museums Liverpool.
+            Funded by the DCMS Pilot Scheme.
             
-            If you find any bugs/have any problems/have any suggestions please feel free to get in touch:
-            chris.addis@nhm.ac.uk
+            For support, feedback, or suggestions, please contact: chris.addis@nhm.ac.uk
             """)
     
     return demo