app.py

import streamlit as st
import pandas as pd
import numpy as np
import random
import os
from datetime import datetime
import ast

# Custom CSS for enhanced styling
def local_css():
    st.markdown("""
    <style>
    /* Global Styling */
    body {
        background-color: #f0f2f6;
        color: #333;
    }

    /* Game Container */
    .game-container {
        background-color: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    /* Sentences Styling */
    .sentence-container {
        background-color: #f8f9fa;
        border-left: 4px solid #3498db;
        padding: 10px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }

    .sentence-container:hover {
        background-color: #e9ecef;
        transform: translateX(5px);
    }

    /* Buttons */
    .stButton>button {
        background-color: #3498db;
        color: white;
        border-radius: 20px;
        border: none;
        padding: 10px 20px;
        transition: all 0.3s ease;
    }

    .stButton>button:hover {
        background-color: #2980b9;
        transform: scale(1.05);
    }

    /* Radio Buttons */
    .stRadio>div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .stRadio>div>label {
        background-color: #ecf0f1;
        padding: 10px;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    .stRadio>div>label:hover {
        background-color: #3498db;
        color: white;
    }

    /* Sidebar */
    .css-1aumxhk {
        background-color: #2c3e50;
        color: white;
    }

    /* Reason Validation */
    .reason-valid {
        color: #2ecc71;
        font-weight: bold;
    }

    .reason-invalid {
        color: #e74c3c;
        font-weight: bold;
    }
    </style>
    """, unsafe_allow_html=True)

class RoFTGame:
    # [Previous implementation remains the same]
    # ... [Copy the entire RoFTGame class from the previous implementation] ...

def main():
    # Apply custom CSS
    local_css()
    
    # Fancy title with animation
    st.markdown("""
    <h1 style='text-align: center; color: #2c3e50; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: fadeIn 2s;'>
    🕵️ Real or Fake Text Detective 🕵️‍♀️
    </h1>
    """, unsafe_allow_html=True)

    # Game introduction
    st.markdown("""
    <div class='game-container'>
    <p style='text-align: center; font-style: italic;'>
    Sharpen your AI detection skills! Read carefully and identify where human writing transforms into machine-generated text.
    </p>
    </div>
    """, unsafe_allow_html=True)
    
    # Initialize game session state
    if 'game' not in st.session_state:
        st.session_state.game = RoFTGame('roft.csv')
        st.session_state.game.load_random_sample()
        st.session_state.total_points = 0
        st.session_state.rounds_played = 0
    
    # Game container
    st.markdown("<div class='game-container'>", unsafe_allow_html=True)
    
    # Game information in sidebar with icons
    st.sidebar.markdown("## 🎮 Game Stats")
    st.sidebar.markdown(f"### 🏆 Total Points: {st.session_state.total_points}")
    st.sidebar.markdown(f"### 🎲 Rounds Played: {st.session_state.rounds_played}")
    
    # Animated difficulty indicator
    difficulty_map = {
        'gpt2': '🟢 Easy', 
        'gpt2-xl': '🟠 Medium', 
        'ctrl': '🔴 Hard'
    }
    current_model = st.session_state.game.current_sample['model']
    difficulty = difficulty_map.get(current_model, '⚪ Unknown')
    st.sidebar.markdown(f"### 🎯 Difficulty: {difficulty}")
    
    # Display sentences with enhanced styling
    st.subheader("🔍 Examine the Text Carefully")
    for i, sentence in enumerate(st.session_state.game.current_sentences):
        st.markdown(f"""
        <div class='sentence-container'>
        <strong>{i+1}.</strong> {sentence}
        </div>
        """, unsafe_allow_html=True)
    
    # Boundary selection with visual improvements
    st.markdown("### 🚨 Detect AI Transition Point")
    guess = st.radio(
        "Where do you think the AI-generated text begins?", 
        options=[str(i+1) for i in range(len(st.session_state.game.current_sentences))]
    )
    
    # Reason input with predefined options and visual enhancements
    st.markdown("### 🧐 Explain Your Reasoning")
    reason_options = st.session_state.game.predefined_reasons
    selected_predefined_reasons = st.multiselect(
        "Select indicators of AI generation",
        options=reason_options
    )
    
    # Custom reason input
    custom_reason = st.text_area("Additional detective notes (optional)")
    
    # Combine predefined and custom reasons
    full_reason = " ".join(selected_predefined_reasons)
    if custom_reason:
        full_reason += f" {custom_reason}"
    
    # Submit button with game metaphor
    if st.button("🕵️ Submit Detective Report"):
        if not full_reason.strip():
            st.warning("🚨 Every good detective needs evidence! Please provide a reason.")
        else:
            # [Rest of the submission logic remains the same as in previous implementation]
            # ... [Copy the entire submission block from previous implementation] ...

    st.markdown("</div>", unsafe_allow_html=True)

if __name__ == "__main__":
    main()