view_image.py

import streamlit as st
from pymongo import MongoClient
import os
from dotenv import load_dotenv
from datetime import datetime

# Load environment variables
load_dotenv()
MONGO_URI = os.getenv("MONGO_URI")
DB_NAME = os.getenv("DB_NAME")
COLLECTION_NAME = os.getenv("COLLECTION_NAME")

mongo_client = MongoClient(MONGO_URI)
db = mongo_client[DB_NAME]
collection = db[COLLECTION_NAME]


def format_date(timestamp):
    """Convert timestamp to a readable date format."""
    return datetime.fromtimestamp(timestamp).strftime("%B %d, %Y")


# Custom CSS to control image and expander container width and styling


def view_images():
    if st.button("Back"):
        st.session_state.page = "home"
        st.rerun()
    st.title("Your Uploaded Images")

    # Fetch all uploaded images from MongoDB
    images = list(collection.find({"type": {"$regex": "Image", "$options": "i"},"status":"processed"}))

    if not images:
        st.write("You have not uploaded any images yet.")
        return

    # Display images in a grid (4 images per row)
    cols = st.columns(4)
    for idx, image in enumerate(images):
        col = cols[idx % 4]

        with col:
            # Container for each image and its expander
            st.markdown("<div class='image-wrapper'>", unsafe_allow_html=True)

            # Display the image using HTML

            st.markdown(
                f"""
                                <div style='text-align: center;'>
                                    <img src='{image['object_url']}' alt='{image.get('name', 'Image')}' style='width:250px; height:250px; object-fit: cover; border-radius: 8px;' />

                                </div>
                                """,
                unsafe_allow_html=True
            )

            st.markdown("</div>", unsafe_allow_html=True)  # Close image container

            # Expander for image details
            with st.expander("View Image Details"):
                st.write(f"**File Name:** {image.get('name', 'N/A')}")
                st.write(f"**Date Uploaded:** {format_date(image.get('upload_date', datetime.now().timestamp()))}")
                st.write(f"**Table Description**: {image.get('table_data').get('description','')}")

                st.markdown(
                    f"<a href='{image['object_url']}' class='download-link' download>Download Image</a>",
                    unsafe_allow_html=True
                )

                if st.button("View Table Analysis",key=f"image_analysis_{idx}"):
                    st.session_state.page="view_image_analysis"
                    st.session_state.image_url=image['object_url']
                    st.rerun()

        # Move to a new row after every 4 images
        if (idx + 1) % 4 == 0:
            st.write("")  # Line break to move to the next row