Upload 2 files

README.md

@@ -1,20 +1,79 @@
----
-title: LABEL IT
-emoji: 🚀
-colorFrom: red
-colorTo: red
-sdk: docker
-app_port: 8501
-tags:
-- streamlit
-pinned: false
-short_description: Streamlit template space
-license: mit
----
-
-# Welcome to Streamlit!
-
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
-
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+# LabelIt! - Multilingual Image Labeling Platform
+
+A collaborative web application for multilingual image labeling built with Streamlit. Users can upload images and add labels in multiple languages, creating a rich multilingual dataset.
+
+## Features
+
+- **Multilingual Support**: English, Hindi (हिन्दी), and Telugu (తెలుగు)
+- **User Authentication**: Registration and login system with detailed profiles
+- **Image Upload**: Support for PNG, JPG, JPEG, GIF formats (max 10MB)
+- **Automatic Location Capture**: GPS coordinates captured on login
+- **Category System**: Organize images by Animals, Food, Objects, Nature, People, Transportation
+- **Collaborative Labeling**: Users can add alternative labels in different languages
+- **Instagram-style Feed**: Browse and label existing images
+- **Responsive Design**: Mobile-friendly interface
+
+## Installation
+
+1. Clone or download this repository
+2. Install Python 3.8 or higher
+3. Install dependencies:
+   ```bash
+   pip install streamlit pillow
+   ```
+
+## Running the Application
+
+1. Navigate to the project directory
+2. Run the Streamlit app:
+   ```bash
+   streamlit run app.py --server.port 5000
+   ```
+3. Open your browser and go to `http://localhost:5000`
+
+## Usage
+
+1. **Register**: Create an account with your details and language preference
+2. **Login**: Access the application with your credentials
+3. **Location**: Allow location access for automatic GPS coordinate capture
+4. **Upload Images**: Add images with titles, descriptions, categories, and initial labels
+5. **Browse Feed**: View uploaded images and add alternative labels in different languages
+6. **Collaborate**: Contribute translations and additional labels to existing images
+
+## Data Storage
+
+- User data stored in `data/users.json`
+- Image metadata and labels in `data/labels.json`
+- Uploaded images saved in `data/images/` directory
+
+## File Structure
+
+```
+label-it/
+├── app.py                 # Main Streamlit application
+├── translations.py        # Multilingual translation system
+├── utils.py              # Utility functions
+├── pyproject.toml        # Project dependencies
+├── README.md             # This file
+├── .streamlit/
+│   └── config.toml       # Streamlit configuration
+└── data/                 # Data storage directory
+    ├── users.json        # User accounts
+    ├── labels.json       # Image metadata and labels
+    └── images/           # Uploaded image files
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Submit a pull request
+
+## License
+
+MIT License - feel free to use and modify for your projects.
+
+## Support
+
+For issues or questions, please create an issue in the repository or contact the development team.

app.py

@@ -0,0 +1,668 @@
+import streamlit as st
+import json
+import os
+import uuid
+import base64
+from datetime import datetime
+from PIL import Image
+import io
+import streamlit.components.v1 as components
+from translations import get_translation, SUPPORTED_LANGUAGES
+from utils import load_users, save_users, load_labels, save_labels, validate_image, get_categories
+
+# Initialize session state
+if 'user' not in st.session_state:
+    st.session_state.user = None
+if 'language' not in st.session_state:
+    st.session_state.language = 'en'
+if 'location_fetched' not in st.session_state:
+    st.session_state.location_fetched = False
+if 'user_location' not in st.session_state:
+    st.session_state.user_location = {"lat": None, "lon": None}
+
+# Ensure data directory exists
+if not os.path.exists('data'):
+    os.makedirs('data')
+
+# Ensure data files exist
+if not os.path.exists('data/users.json'):
+    with open('data/users.json', 'w') as f:
+        json.dump({}, f)
+
+if not os.path.exists('data/labels.json'):
+    with open('data/labels.json', 'w') as f:
+        json.dump({}, f)
+
+def get_user_location():
+    """Get and store user's location in session state"""
+    # Session state is already initialized at the top of the file
+    if not st.session_state.location_fetched:
+        # Create a placeholder for location status
+        location_placeholder = st.empty()
+        
+        # JavaScript component to get location
+        location_data = components.html(
+            """
+            <script>
+            function getLocation() {
+                document.getElementById("status").innerHTML = "🔄 Requesting location permission...";
+                
+                if (navigator.geolocation) {
+                    navigator.geolocation.getCurrentPosition(
+                        function(position) {
+                            const lat = position.coords.latitude;
+                            const lon = position.coords.longitude;
+                            document.getElementById("status").innerHTML = "📍 Location captured: " + lat.toFixed(6) + ", " + lon.toFixed(6);
+                            // Send data to Streamlit
+                            window.parent.postMessage({
+                                type: 'streamlit:setComponentValue', 
+                                value: {lat: lat, lon: lon, success: true}
+                            }, '*');
+                        },
+                        function(error) {
+                            let errorMsg = "📍 Location unavailable";
+                            switch(error.code) {
+                                case error.PERMISSION_DENIED:
+                                    errorMsg = "📍 Location access denied by user";
+                                    break;
+                                case error.POSITION_UNAVAILABLE:
+                                    errorMsg = "📍 Location information unavailable";
+                                    break;
+                                case error.TIMEOUT:
+                                    errorMsg = "📍 Location request timed out";
+                                    break;
+                            }
+                            document.getElementById("status").innerHTML = errorMsg;
+                            window.parent.postMessage({
+                                type: 'streamlit:setComponentValue', 
+                                value: {lat: null, lon: null, success: false}
+                            }, '*');
+                        },
+                        {enableHighAccuracy: true, timeout: 10000, maximumAge: 300000}
+                    );
+                } else {
+                    document.getElementById("status").innerHTML = "📍 Location not supported by this browser";
+                    window.parent.postMessage({
+                        type: 'streamlit:setComponentValue', 
+                        value: {lat: null, lon: null, success: false}
+                    }, '*');
+                }
+            }
+            
+            // Run immediately
+            getLocation();
+            </script>
+            <div id="status" style="padding: 12px; background: linear-gradient(45deg, #74b9ff, #0984e3); color: white; border-radius: 10px; text-align: center; font-weight: 500; box-shadow: 0 4px 15px rgba(116, 185, 255, 0.3);">
+                🔄 Getting your location...
+            </div>
+            """,
+            height=70
+        )
+        
+        # Process location data
+        if location_data and isinstance(location_data, dict):
+            if location_data.get('success') == True:
+                st.session_state.user_location = {
+                    "lat": float(location_data['lat']),
+                    "lon": float(location_data['lon'])
+                }
+                st.session_state.location_fetched = True
+                location_placeholder.success(f"✅ Location captured: {st.session_state.user_location['lat']:.6f}, {st.session_state.user_location['lon']:.6f}")
+            elif location_data.get('success') == False:
+                st.session_state.location_fetched = True
+                location_placeholder.warning("⚠️ Location not available - uploads will continue without location data")
+    
+    # Return the current location status
+    return st.session_state.user_location if st.session_state.location_fetched else None
+
+def authenticate_user(username, password):
+    """Authenticate user with username and password"""
+    users = load_users()
+    if username in users and users[username]['password'] == password:
+        return users[username]
+    return None
+
+def register_user(username, password, full_name, email, phone, age, language_preference):
+    """Register a new user"""
+    users = load_users()
+    if username in users:
+        return False
+    
+    user_data = {
+        'password': password,
+        'full_name': full_name,
+        'email': email,
+        'phone': phone,
+        'age': age,
+        'language_preference': language_preference,
+        'registered_at': datetime.now().isoformat()
+    }
+    
+    users[username] = user_data
+    save_users(users)
+    return True
+
+def login_logout_section():
+    """Handle login and logout functionality"""
+    if st.session_state.user:
+        # User is logged in - show user details and logout
+        with st.sidebar:
+            # Display user profile with clean formatting
+            user = st.session_state.user
+            
+            st.markdown("### 👤 Profile")
+            
+            # Create a clean profile display
+            profile_info = f"""
+            **Name:** {user.get('full_name', 'N/A')}
+            **Username:** {st.session_state.user['username']}
+            **Email:** {user.get('email', 'N/A')}
+            **Phone:** {user.get('phone', 'N/A')}
+            **Age:** {user.get('age', 'N/A')}
+            **Language:** {SUPPORTED_LANGUAGES.get(user.get('language_preference', 'en'), 'English')}
+            """
+            
+            st.markdown(profile_info)
+            
+            # Language selector
+            st.markdown("### 🌐 Language")
+            language_options = list(SUPPORTED_LANGUAGES.keys())
+            language_labels = [f"{SUPPORTED_LANGUAGES[lang]} ({lang})" for lang in language_options]
+            
+            current_index = language_options.index(st.session_state.language) if st.session_state.language in language_options else 0
+            
+            selected_language = st.selectbox(
+                "Select Language",
+                options=language_options,
+                format_func=lambda x: f"{SUPPORTED_LANGUAGES[x]} ({x})",
+                index=current_index,
+                key="language_selector"
+            )
+            
+            if selected_language != st.session_state.language:
+                st.session_state.language = selected_language
+                st.rerun()
+            
+            # Logout button
+            if st.button("🚪 " + get_translation("logout", st.session_state.language), use_container_width=True):
+                st.session_state.user = None
+                st.session_state.location_fetched = False
+                st.session_state.user_location = {"lat": None, "lon": None}
+                st.rerun()
+        
+        # Get user location automatically after login
+        get_user_location()
+        
+    else:
+        # User is not logged in - show login/register forms
+        st.header(get_translation("welcome", st.session_state.language))
+        
+        tab1, tab2 = st.tabs([get_translation("login", st.session_state.language), get_translation("register", st.session_state.language)])
+        
+        with tab1:
+            # Login form
+            with st.form("login_form"):
+                username = st.text_input(get_translation("username", st.session_state.language))
+                password = st.text_input(get_translation("password", st.session_state.language), type="password")
+                login_button = st.form_submit_button(get_translation("login", st.session_state.language))
+                
+                if login_button:
+                    if username and password:
+                        user = authenticate_user(username, password)
+                        if user:
+                            user['username'] = username
+                            st.session_state.user = user
+                            # Set language preference
+                            st.session_state.language = user.get('language_preference', 'en')
+                            st.success(get_translation("login_success", st.session_state.language))
+                            st.rerun()
+                        else:
+                            st.error(get_translation("invalid_credentials", st.session_state.language))
+                    else:
+                        st.error(get_translation("please_fill_all_fields", st.session_state.language))
+        
+        with tab2:
+            # Registration form
+            with st.form("register_form"):
+                new_username = st.text_input(get_translation("username", st.session_state.language), key="reg_username")
+                new_password = st.text_input(get_translation("password", st.session_state.language), type="password", key="reg_password")
+                full_name = st.text_input(get_translation("full_name", st.session_state.language))
+                email = st.text_input(get_translation("email", st.session_state.language))
+                phone = st.text_input(get_translation("phone", st.session_state.language))
+                age = st.number_input(get_translation("age", st.session_state.language), min_value=1, max_value=120, value=25)
+                
+                # Language preference
+                language_options = list(SUPPORTED_LANGUAGES.keys())
+                language_pref = st.selectbox(
+                    get_translation("preferred_language", st.session_state.language),
+                    options=language_options,
+                    format_func=lambda x: f"{SUPPORTED_LANGUAGES[x]} ({x})",
+                    index=language_options.index('en')
+                )
+                
+                register_button = st.form_submit_button(get_translation("register", st.session_state.language))
+                
+                if register_button:
+                    if new_username and new_password and full_name and email:
+                        if register_user(new_username, new_password, full_name, email, phone, age, language_pref):
+                            st.success(get_translation("registration_success", st.session_state.language))
+                        else:
+                            st.error(get_translation("username_exists", st.session_state.language))
+                    else:
+                        st.error(get_translation("please_fill_required_fields", st.session_state.language))
+
+def upload_image_section():
+    """Image upload section"""
+    st.header(get_translation("upload_image", st.session_state.language))
+    
+    # Initialize upload counter for form reset
+    if 'upload_counter' not in st.session_state:
+        st.session_state.upload_counter = 0
+    
+    # Show current location status with coordinates
+    if st.session_state.get('user_location', {}).get('lat'):
+        lat, lon = st.session_state.user_location['lat'], st.session_state.user_location['lon']
+        st.markdown(f"""
+        <div style="background: linear-gradient(45deg, #00b894, #00cec9); color: white; padding: 12px; border-radius: 10px; margin: 10px 0; text-align: center; font-weight: 500; box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);">
+            📍 Location ready: {lat:.6f}, {lon:.6f}
+        </div>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown(f"""
+        <div style="background: linear-gradient(45deg, #fd79a8, #e84393); color: white; padding: 12px; border-radius: 10px; margin: 10px 0; text-align: center; font-weight: 500; box-shadow: 0 4px 15px rgba(253, 121, 168, 0.3);">
+            📍 Location not available - uploads will continue without location data
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with st.form(f"upload_form_{st.session_state.upload_counter}"):
+        uploaded_file = st.file_uploader(
+            get_translation("choose_image", st.session_state.language),
+            type=['png', 'jpg', 'jpeg', 'gif']
+        )
+        
+        title = st.text_input(get_translation("image_title", st.session_state.language))
+        description = st.text_area(get_translation("description", st.session_state.language))
+        
+        # Category selection
+        categories = get_categories()
+        category = st.selectbox(
+            get_translation("category", st.session_state.language),
+            options=categories,
+            format_func=lambda x: get_translation(x.lower(), st.session_state.language)
+        )
+        
+        # Labels section
+        st.subheader(get_translation("labels", st.session_state.language))
+        
+        # Language selection for label
+        label_language = st.selectbox(
+            get_translation("label_language", st.session_state.language),
+            options=list(SUPPORTED_LANGUAGES.keys()),
+            format_func=lambda x: f"{SUPPORTED_LANGUAGES[x]} ({x})",
+            index=list(SUPPORTED_LANGUAGES.keys()).index(st.session_state.language)
+        )
+        
+        label_text = st.text_input(get_translation("label_text", st.session_state.language))
+        
+        submit_button = st.form_submit_button(get_translation("upload_image", st.session_state.language))
+        
+        if submit_button:
+            if uploaded_file and title and description and label_text:
+                # Validate image
+                validation_result = validate_image(uploaded_file)
+                if not validation_result['valid']:
+                    st.error(validation_result['error'])
+                    return
+                
+                # Process and save image
+                try:
+                    # Create images directory if it doesn't exist
+                    images_dir = 'data/images'
+                    if not os.path.exists(images_dir):
+                        os.makedirs(images_dir)
+                    
+                    # Generate unique filename
+                    file_extension = uploaded_file.name.split('.')[-1]
+                    unique_filename = f"{uuid.uuid4()}.{file_extension}"
+                    file_path = os.path.join(images_dir, unique_filename)
+                    
+                    # Save image file
+                    with open(file_path, 'wb') as f:
+                        f.write(uploaded_file.read())
+                    
+                    # Convert image to base64 for display
+                    uploaded_file.seek(0)  # Reset file pointer
+                    image = Image.open(uploaded_file)
+                    buffered = io.BytesIO()
+                    image.save(buffered, format="PNG")
+                    img_base64 = base64.b64encode(buffered.getvalue()).decode()
+                    
+                    # Prepare image data
+                    image_data = {
+                        'id': str(uuid.uuid4()),
+                        'title': title,
+                        'description': description,
+                        'category': category,
+                        'filename': unique_filename,
+                        'file_path': file_path,
+                        'image_base64': img_base64,
+                        'uploader': st.session_state.user['username'],
+                        'upload_time': datetime.now().isoformat(),
+                        'labels': [
+                            {
+                                'text': label_text,
+                                'language': label_language,
+                                'contributor': st.session_state.user['username'],
+                                'timestamp': datetime.now().isoformat()
+                            }
+                        ]
+                    }
+                    
+                    # Add location if available
+                    if st.session_state.get('user_location', {}).get('lat'):
+                        image_data['location'] = st.session_state.user_location.copy()
+                    
+                    # Save to labels.json
+                    labels_data = load_labels()
+                    labels_data[image_data['id']] = image_data
+                    save_labels(labels_data)
+                    
+                    st.success(get_translation("image_uploaded", st.session_state.language))
+                    
+                    # Reset form by incrementing counter
+                    st.session_state.upload_counter += 1
+                    st.rerun()
+                    
+                except Exception as e:
+                    st.error(f"Error uploading image: {str(e)}")
+            else:
+                st.error(get_translation("please_fill_all_fields", st.session_state.language))
+
+def view_images_section():
+    """View and label images section"""
+    st.header(get_translation("image_feed", st.session_state.language))
+    
+    # Category filter
+    categories = ['All'] + get_categories()
+    category_filter = st.selectbox(
+        get_translation("filter_by_category", st.session_state.language),
+        options=categories,
+        format_func=lambda x: get_translation(x.lower(), st.session_state.language) if x != 'All' else get_translation("all", st.session_state.language)
+    )
+    
+    # Load and display images
+    labels_data = load_labels()
+    
+    if not labels_data:
+        st.info(get_translation("no_images", st.session_state.language))
+        return
+    
+    # Filter by category
+    filtered_data = labels_data
+    if category_filter != 'All':
+        filtered_data = {k: v for k, v in labels_data.items() if v.get('category') == category_filter}
+    
+    if not filtered_data:
+        st.info(get_translation("no_images_in_category", st.session_state.language))
+        return
+    
+    # Custom CSS for better image display
+    st.markdown("""
+    <style>
+    .image-container {
+        border: 2px solid #e0e0e0;
+        border-radius: 10px;
+        padding: 15px;
+        margin: 10px 0;
+        background: white;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .image-title {
+        font-size: 1.2em;
+        font-weight: bold;
+        color: #2c3e50;
+        margin-bottom: 8px;
+    }
+    .image-description {
+        color: #555;
+        margin-bottom: 10px;
+    }
+    .labels-section {
+        background: #f8f9fa;
+        padding: 10px;
+        border-radius: 8px;
+        margin: 10px 0;
+    }
+    .label-item {
+        background: linear-gradient(45deg, #74b9ff, #0984e3);
+        color: white;
+        padding: 5px 10px;
+        border-radius: 15px;
+        margin: 2px;
+        display: inline-block;
+        font-size: 0.9em;
+    }
+    .location-badge {
+        background: linear-gradient(45deg, #00b894, #00cec9);
+        color: white;
+        padding: 5px 10px;
+        border-radius: 15px;
+        margin: 5px 0;
+        display: inline-block;
+        font-size: 0.85em;
+        font-weight: 500;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Display images
+    for image_id, data in filtered_data.items():
+        with st.container():
+            st.markdown('<div class="image-container">', unsafe_allow_html=True)
+            
+            col1, col2 = st.columns([1, 2])
+            
+            with col1:
+                # Display image
+                try:
+                    if data.get('image_base64'):
+                        st.image(f"data:image/png;base64,{data['image_base64']}", width=250)
+                    else:
+                        st.error("Image not available")
+                except Exception as e:
+                    st.error(f"Error displaying image: {str(e)}")
+            
+            with col2:
+                # Image details
+                st.markdown(f'<div class="image-title">{data.get("title", "Untitled")}</div>', unsafe_allow_html=True)
+                st.markdown(f'<div class="image-description">{data.get("description", "No description")}</div>', unsafe_allow_html=True)
+                
+                # Category
+                if data.get('category'):
+                    category_translation = get_translation(data['category'].lower(), st.session_state.language)
+                    st.write(f"🏷️ **{get_translation('category', st.session_state.language)}:** {category_translation}")
+                
+                # Upload info
+                if data.get('uploader'):
+                    st.write(f"👤 {data['uploader']}")
+                
+                if data.get('upload_time'):
+                    try:
+                        upload_time = datetime.fromisoformat(data['upload_time']).strftime("%Y-%m-%d %H:%M")
+                    except:
+                        upload_time = data['upload_time']
+                    st.write(f"📅 {upload_time}")
+                
+                # Location information with enhanced display
+                if data.get('location') and data['location'].get('lat') and data['location'].get('lon'):
+                    lat, lon = data['location']['lat'], data['location']['lon']
+                    st.markdown(f"""
+                    <div class="location-badge">
+                        📍 Coordinates: {lat:.6f}, {lon:.6f}
+                    </div>
+                    """, unsafe_allow_html=True)
+                else:
+                    st.markdown(f"""
+                    <div class="location-badge" style="background: linear-gradient(45deg, #fd79a8, #e84393);">
+                        📍 Location not available
+                    </div>
+                    """, unsafe_allow_html=True)
+                
+                # Labels section
+                st.markdown('<div class="labels-section">', unsafe_allow_html=True)
+                st.write(f"**{get_translation('labels', st.session_state.language)}:**")
+                
+                if data.get('labels'):
+                    labels_html = ""
+                    for label in data['labels']:
+                        lang_name = SUPPORTED_LANGUAGES.get(label.get('language', 'en'), 'English')
+                        labels_html += f'<span class="label-item">{label.get("text", "")} ({lang_name})</span> '
+                    st.markdown(labels_html, unsafe_allow_html=True)
+                else:
+                    st.write(get_translation("no_labels", st.session_state.language))
+                
+                st.markdown('</div>', unsafe_allow_html=True)
+                
+                # Add new label form
+                with st.expander(get_translation("add_label", st.session_state.language)):
+                    with st.form(f"label_form_{image_id}"):
+                        new_label_language = st.selectbox(
+                            get_translation("label_language", st.session_state.language),
+                            options=list(SUPPORTED_LANGUAGES.keys()),
+                            format_func=lambda x: f"{SUPPORTED_LANGUAGES[x]} ({x})",
+                            index=list(SUPPORTED_LANGUAGES.keys()).index(st.session_state.language),
+                            key=f"label_lang_{image_id}"
+                        )
+                        
+                        new_label_text = st.text_input(
+                            get_translation("label_text", st.session_state.language),
+                            key=f"label_text_{image_id}"
+                        )
+                        
+                        add_label_button = st.form_submit_button(get_translation("add_label", st.session_state.language))
+                        
+                        if add_label_button and new_label_text:
+                            # Add new label
+                            new_label = {
+                                'text': new_label_text,
+                                'language': new_label_language,
+                                'contributor': st.session_state.user['username'],
+                                'timestamp': datetime.now().isoformat()
+                            }
+                            
+                            # Update labels data
+                            labels_data = load_labels()
+                            if 'labels' not in labels_data[image_id]:
+                                labels_data[image_id]['labels'] = []
+                            labels_data[image_id]['labels'].append(new_label)
+                            save_labels(labels_data)
+                            
+                            st.success(get_translation("label_added", st.session_state.language))
+                            st.rerun()
+            
+            st.markdown('</div>', unsafe_allow_html=True)
+            st.markdown("---")
+
+def main():
+    """Main application function"""
+    # Page configuration
+    st.set_page_config(
+        page_title="LabelIt! - Multilingual Image Labeling",
+        page_icon="🏷️",
+        layout="wide"
+    )
+    
+    # Apply light theme styling
+    st.markdown("""
+    <style>
+    .main {
+        background-color: #ffffff;
+        color: #000000;
+    }
+    .stApp {
+        background-color: #ffffff;
+    }
+    /* Ensure all text is visible */
+    .stMarkdown, .stText, p, span, div {
+        color: #000000 !important;
+    }
+    /* Make form labels visible */
+    .stSelectbox label, .stTextInput label, .stTextArea label, .stFileUploader label {
+        color: #000000 !important;
+        font-weight: 500 !important;
+    }
+    /* Sidebar styling */
+    .css-1d391kg {
+        background-color: #f8f9fa;
+    }
+    /* Button styling */
+    .stButton > button {
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        padding: 0.5rem 1rem;
+    }
+    .stButton > button:hover {
+        background-color: #0056b3;
+    }
+    /* Tab styling */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 8px;
+    }
+    .stTabs [data-baseweb="tab"] {
+        background-color: #e9ecef;
+        color: #000000;
+        border-radius: 5px;
+        padding: 0.5rem 1rem;
+    }
+    .stTabs [aria-selected="true"] {
+        background-color: #007bff;
+        color: white;
+    }
+    /* Form styling */
+    .stForm {
+        background-color: #f8f9fa;
+        padding: 1rem;
+        border-radius: 10px;
+        border: 1px solid #dee2e6;
+    }
+    /* Success/Error message styling */
+    .stSuccess {
+        background-color: #d4edda;
+        color: #155724;
+        border: 1px solid #c3e6cb;
+    }
+    .stError {
+        background-color: #f8d7da;
+        color: #721c24;
+        border: 1px solid #f5c6cb;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    # Main title
+    st.title("🏷️ LabelIt! - " + get_translation("multilingual_image_labeling", st.session_state.language))
+    
+    # Login/logout section
+    login_logout_section()
+    
+    # Main application content (only show if user is logged in)
+    if st.session_state.user:
+        # Navigation tabs
+        tab1, tab2 = st.tabs([
+            get_translation("upload_image", st.session_state.language),
+            get_translation("view_images", st.session_state.language)
+        ])
+        
+        with tab1:
+            upload_image_section()
+        
+        with tab2:
+            view_images_section()
+    else:
+        # Show welcome message for non-logged in users
+        st.info(get_translation("please_login", st.session_state.language))
+
+if __name__ == "__main__":
+    main()