Upload 12 files

api/__init__.py

@@ -0,0 +1,3 @@
+"""
+API client module for DGaze
+""" 

api/client.py

@@ -0,0 +1,86 @@
+"""
+API client for communicating with the DGaze backend.
+Similar to the client.ts in the React frontend.
+"""
+
+import requests
+from typing import Dict, Any, Optional
+from config.settings import settings
+
+
+class DGazeAPIClient:
+    """Client for interacting with the DGaze verification API."""
+    
+    def __init__(self):
+        self.base_url = settings.API_BASE_URL
+        self.verify_endpoint = settings.API_ENDPOINT
+        self.health_endpoint = settings.HEALTH_ENDPOINT
+    
+    def verify_news(self, input_text: str, access_token: Optional[str] = None) -> Dict[str, Any]:
+        """
+        Send news text to backend for verification.
+        
+        Args:
+            input_text: The news text or URL to verify
+            access_token: Optional JWT token for authenticated requests
+            
+        Returns:
+            Dict containing the verification results
+            
+        Raises:
+            requests.exceptions.RequestException: For API errors
+        """
+        if not input_text.strip():
+            raise ValueError("Input text cannot be empty")
+        
+        # Prepare the request payload
+        payload = {
+            "input": input_text,
+            "input_type": "text"
+        }
+        
+        # Prepare headers
+        headers = {"Content-Type": "application/json"}
+        if access_token:
+            headers["Authorization"] = f"Bearer {access_token}"
+        
+        # Make API request to backend
+        response = requests.post(
+            self.verify_endpoint,
+            json=payload,
+            timeout=60,
+            headers=headers
+        )
+        
+        if response.status_code == 401:
+            raise ValueError("Authentication required. Please log in to continue.")
+        elif response.status_code == 403:
+            raise ValueError("Access denied. You don't have permission to perform this action.")
+        elif response.status_code != 200:
+            raise requests.exceptions.HTTPError(
+                f"API Error: Server returned status {response.status_code}"
+            )
+        
+        data = response.json()
+        
+        if data.get("status") != "success":
+            raise ValueError(f"Verification Failed: {data.get('message', 'Unknown error')}")
+        
+        return data
+    
+    def check_health(self) -> bool:
+        """
+        Check if the backend service is healthy.
+        
+        Returns:
+            True if backend is accessible, False otherwise
+        """
+        try:
+            response = requests.get(self.health_endpoint, timeout=5)
+            return response.status_code == 200
+        except requests.exceptions.RequestException:
+            return False
+
+
+# Create a default client instance
+api_client = DGazeAPIClient() 

app.py

@@ -0,0 +1,913 @@
+"""
+DGaze - Simplified Auth0 + Gradio Implementation
+Based on proven patterns from successful implementations.
+"""
+
+import os
+import gradio as gr
+import uvicorn
+import time
+import uuid
+from fastapi import FastAPI, Request, Depends
+from fastapi.responses import RedirectResponse, FileResponse
+from starlette.middleware.sessions import SessionMiddleware
+from urllib.parse import quote_plus, urlencode
+from starlette.config import Config
+from authlib.integrations.starlette_client import OAuth, OAuthError
+
+# Import our modular components
+from config.settings import settings
+from api.client import api_client
+from components.verification_result import format_verification_results
+
+# Create FastAPI app
+app = FastAPI(title="DGaze - News Verification")
+
+# Add CORS middleware for better API access
+from fastapi.middleware.cors import CORSMiddleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, this should be more restrictive
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Static files handler to fix 404 errors with Gradio assets
+@app.get("/assets/{path:path}")
+async def get_assets(path: str):
+    """Handle asset requests that might be missing when Gradio is mounted."""
+    # Try to serve from demo assets first
+    demo_asset_path = f"/demo/assets/{path}"
+    return RedirectResponse(url=demo_asset_path)
+
+# Configure OAuth
+config_data = {
+    'AUTH0_CLIENT_ID': settings.AUTH0_CLIENT_ID,
+    'AUTH0_CLIENT_SECRET': settings.AUTH0_CLIENT_SECRET
+}
+starlette_config = Config(environ=config_data)
+oauth = OAuth(starlette_config)
+
+oauth.register(
+    "auth0",
+    client_id=settings.AUTH0_CLIENT_ID,
+    client_secret=settings.AUTH0_CLIENT_SECRET,
+    client_kwargs={
+        "scope": "openid profile email",
+    },
+    server_metadata_url=f'https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration',
+)
+
+# Add session middleware
+app.add_middleware(SessionMiddleware, secret_key=settings.SECRET_KEY)
+
+# Simple user dependency
+def get_user(request: Request):
+    """Get current user from session."""
+    user = request.session.get('user')
+    if user:
+        return user.get('name') or user.get('email', 'Unknown User')
+    return None
+
+# Free trial management functions
+# In-memory trial tracking (since session data doesn't persist properly with mounted Gradio apps)
+trial_tracker = {}
+session_timestamps = {}
+
+def get_or_create_session_id(request: Request) -> str:
+    """Get existing session ID or create a new one."""
+    session_id = request.session.get('session_id')
+    if not session_id:
+        session_id = f"trial_{uuid.uuid4().hex[:12]}"
+        request.session['session_id'] = session_id
+        print(f"DEBUG: Created new session ID: {session_id}")
+    return session_id
+
+def cleanup_old_sessions():
+    """Clean up sessions older than 24 hours."""
+    current_time = time.time()
+    old_sessions = []
+    for session_id, timestamp in session_timestamps.items():
+        if current_time - timestamp > 86400:  # 24 hours
+            old_sessions.append(session_id)
+    
+    for session_id in old_sessions:
+        trial_tracker.pop(session_id, None)
+        session_timestamps.pop(session_id, None)
+    
+    if old_sessions:
+        print(f"DEBUG: Cleaned up {len(old_sessions)} old sessions")
+
+def get_trial_count(request: Request) -> int:
+    """Get current trial verification count from in-memory tracker."""
+    session_id = get_or_create_session_id(request)
+    cleanup_old_sessions()  # Periodic cleanup
+    count = trial_tracker.get(session_id, 0)
+    print(f"DEBUG: get_trial_count() for session {session_id}: {count}")
+    return count
+
+def increment_trial_count(request: Request) -> int:
+    """Increment and return trial verification count."""
+    session_id = get_or_create_session_id(request)
+    current_count = trial_tracker.get(session_id, 0)
+    new_count = current_count + 1
+    trial_tracker[session_id] = new_count
+    session_timestamps[session_id] = time.time()  # Update timestamp
+    print(f"DEBUG: increment_trial_count() for session {session_id}: {current_count} -> {new_count}")
+    print(f"DEBUG: Trial tracker state: {dict(list(trial_tracker.items())[-3:])}")  # Show last 3 for brevity
+    return new_count
+
+def has_remaining_trials(request: Request) -> bool:
+    """Check if user has remaining free trials."""
+    remaining = get_trial_count(request) < 2
+    print(f"DEBUG: has_remaining_trials() returning: {remaining}")
+    return remaining
+
+# Authentication routes
+@app.get('/')
+def public(user: str = Depends(get_user), request: Request = None):
+    # Check if this is an Auth0 callback (has code parameter)
+    if request:
+        query_params = dict(request.query_params)
+        if 'code' in query_params and 'state' in query_params:
+            # This is an Auth0 callback, redirect to auth handler
+            return RedirectResponse(url=f'/auth?{request.url.query}')
+    
+    if user:
+        # Authenticated user - go to full demo
+        return RedirectResponse(url='/demo')
+    else:
+        # Unauthenticated user - go to free trial
+        return RedirectResponse(url='/trial')
+
+@app.route('/login')
+async def login(request: Request):
+    # Use root URL as redirect_uri to match React app pattern
+    redirect_uri = f"http://localhost:{settings.GRADIO_SERVER_PORT}/"
+    return await oauth.auth0.authorize_redirect(request, redirect_uri)
+
+@app.route('/logout')
+async def logout(request: Request):
+    # Clean up trial data
+    session_id = request.session.get('session_id')
+    if session_id:
+        trial_tracker.pop(session_id, None)
+        session_timestamps.pop(session_id, None)
+        print(f"DEBUG: Cleaned up trial data for session {session_id}")
+    
+    request.session.pop('user', None)
+    request.session.pop('session_id', None)
+    return RedirectResponse(url=
+        "https://"
+        + settings.AUTH0_DOMAIN
+        + "/v2/logout?"
+        + urlencode(
+            {
+                "returnTo": f"http://localhost:{settings.GRADIO_SERVER_PORT}/",
+                "client_id": settings.AUTH0_CLIENT_ID,
+            },
+            quote_via=quote_plus,
+        )
+    )
+
+@app.route('/auth')  # callback
+async def auth(request: Request):
+    try:
+        access_token = await oauth.auth0.authorize_access_token(request)
+        userinfo = dict(access_token)["userinfo"]
+        print(f"DEBUG: Auth successful, userinfo: {userinfo}")  # Debug log
+        request.session['user'] = userinfo
+        print(f"DEBUG: Session after setting user: {dict(request.session)}")  # Debug log
+        return RedirectResponse(url='/')
+    except OAuthError as e:
+        print(f"DEBUG: Auth error: {e}")  # Debug log
+        return RedirectResponse(url='/')
+
+@app.get('/api/user')
+async def get_user_info(request: Request):
+    """API endpoint to get current user info for JavaScript."""
+    print(f"DEBUG: /api/user endpoint called!")
+    print(f"DEBUG: Request headers: {dict(request.headers)}")
+    print(f"DEBUG: Request cookies: {request.cookies}")
+    user = request.session.get('user')
+    print(f"DEBUG: Session user data: {user}")  # Debug log
+    print(f"DEBUG: All session data: {dict(request.session)}")  # Debug log
+    if user:
+        user_response = {
+            "authenticated": True,
+            "user": {
+                "name": user.get('name'),
+                "email": user.get('email'),
+                "picture": user.get('picture')
+            }
+        }
+        print(f"DEBUG: Returning user response: {user_response}")
+        return user_response
+    else:
+        print("DEBUG: No user found in session")
+        return {"authenticated": False}
+
+# Enhanced verification function with trial tracking
+def verify_news_with_trial_check(input_text: str, request: gr.Request) -> str:
+    """Verification function with free trial tracking."""
+    if not input_text.strip():
+        return "Please enter some text or URL to verify"
+    
+    try:
+        # Debug logging for session tracking
+        print(f"DEBUG: Request type: {type(request)}")
+        print(f"DEBUG: Request attributes: {dir(request)}")
+        
+        # Get the FastAPI request object from Gradio request
+        fastapi_request = None
+        if hasattr(request, 'request'):
+            fastapi_request = request.request
+        elif hasattr(request, 'fastapi_request'):
+            fastapi_request = request.fastapi_request
+        else:
+            print(f"DEBUG: Cannot find FastAPI request in Gradio request object")
+            # Fallback - proceed without trial tracking for now
+            data = api_client.verify_news(input_text)
+            result = format_verification_results(data)
+            return f"""
+            <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 1rem; margin: 1rem 0; border-radius: 4px;">
+                <p style="margin: 0; color: #856404; font-size: 0.9rem;">
+                    ⚠️ Session tracking unavailable. Please sign in for full functionality.
+                    <a href="/login" style="color: #856404; text-decoration: underline;">Sign in here</a>
+                </p>
+            </div>
+            """ + result
+        
+        print(f"DEBUG: FastAPI request found: {fastapi_request is not None}")
+        
+        if fastapi_request:
+            # Check current trial count
+            current_count = get_trial_count(fastapi_request)
+            print(f"DEBUG: Current trial count: {current_count}")
+            print(f"DEBUG: Session data: {dict(fastapi_request.session)}")
+            
+            # Check if user is authenticated
+            user = get_user(fastapi_request)
+            print(f"DEBUG: User authenticated: {user is not None}")
+            
+            if not user:
+                # For non-authenticated users, check trial limits
+                if current_count >= 2:  # Changed from has_remaining_trials to direct check
+                    print(f"DEBUG: Trial limit reached, showing sign-in prompt")
+                    # Redirect to sign up page
+                    return """
+                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                                padding: 2rem; border-radius: 12px; color: white; text-align: center;
+                                box-shadow: 0 10px 25px rgba(0,0,0,0.1);">
+                        <h2 style="margin: 0 0 1rem 0; font-size: 1.5rem; color: white !important;">🔐 Please Sign In for More Searches</h2>
+                        <p style="margin: 0 0 1.5rem 0; opacity: 0.9; color: white !important;">
+                            You've used your 2 free verifications! Sign in to continue using DGaze with unlimited access.
+                        </p>
+                        <a href="/login" style="
+                            display: inline-block;
+                            background-color: #4f46e5;
+                            color: white !important;
+                            padding: 12px 30px;
+                            text-decoration: none;
+                            border-radius: 8px;
+                            font-weight: 600;
+                            transition: all 0.3s ease;
+                            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+                        " onmouseover="this.style.backgroundColor='#4338ca'; this.style.transform='translateY(-2px)'" 
+                           onmouseout="this.style.backgroundColor='#4f46e5'; this.style.transform='translateY(0)'">
+                            🚀 Sign In Now
+                        </a>
+                        <p style="margin: 1.5rem 0 0 0; font-size: 0.9rem; opacity: 0.8; color: white !important;">
+                            Free • Secure • No spam
+                        </p>
+                    </div>
+                    """
+                
+                # Increment trial count for non-authenticated users
+                new_count = increment_trial_count(fastapi_request)
+                remaining = 2 - new_count
+                print(f"DEBUG: Incremented trial count to: {new_count}, remaining: {remaining}")
+                
+                # Proceed with verification
+                data = api_client.verify_news(input_text)
+                result = format_verification_results(data)
+                
+                # Add trial info for non-authenticated users
+                trial_info = f"""
+                <div style="background: #e3f2fd; border-left: 4px solid #2196f3; padding: 1rem; margin: 1rem 0; border-radius: 4px;">
+                    <p style="margin: 0; color: #1565c0; font-size: 0.9rem;">
+                        ⚡ Free Trial: <strong>{remaining} verification{'s' if remaining != 1 else ''} remaining</strong>
+                        {' • <a href="/login" style="color: #1565c0; text-decoration: underline;">Sign in for unlimited access</a>' if remaining > 0 else ''}
+                    </p>
+                </div>
+                """
+                result = trial_info + result
+                return result
+            else:
+                # Authenticated user - proceed normally
+                data = api_client.verify_news(input_text)
+                return format_verification_results(data)
+        else:
+            # Fallback if we can't access session
+            data = api_client.verify_news(input_text)
+            return format_verification_results(data)
+            
+    except Exception as e:
+        print(f"DEBUG: Error in verify_news_with_trial_check: {e}")
+        return f"Error: {str(e)}"
+
+# Regular verification function for authenticated users
+def verify_news(input_text: str) -> str:
+    """Main verification function for authenticated users."""
+    if not input_text.strip():
+        return "Please enter some text or URL to verify"
+    
+    try:
+        data = api_client.verify_news(input_text)
+        return format_verification_results(data)
+    except Exception as e:
+        return f"Error: {str(e)}"
+
+# Gradio interfaces
+def create_trial_interface():
+    """Create free trial interface for non-authenticated users."""
+    with gr.Blocks(
+        title="DGaze - Free Trial",
+        css="""
+        /* White theme - full width design */
+        html, body {
+            background-color: white !important;
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+        
+        .gradio-container {
+            background-color: white !important;
+            max-width: none !important;
+            margin: 0 !important;
+            padding: 20px !important;
+            min-height: 100vh !important;
+        }
+        
+        .main {
+            background-color: white !important;
+            max-width: 1200px !important;
+            margin: 0 auto !important;
+            padding: 0 20px !important;
+        }
+        
+        /* Block elements */
+        .block {
+            background-color: white !important;
+        }
+        
+        .block.padded {
+            background-color: white !important;
+        }
+        
+        /* Trial banner styling */
+        .trial-banner {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            color: white !important;
+            padding: 1.5rem !important;
+            border-radius: 12px !important;
+            margin-bottom: 2rem !important;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+            text-align: center !important;
+        }
+        
+        /* Ensure all text in trial banner is white */
+        .trial-banner h1, 
+        .trial-banner h2, 
+        .trial-banner h3, 
+        .trial-banner h4, 
+        .trial-banner h5, 
+        .trial-banner h6,
+        .trial-banner p, 
+        .trial-banner span, 
+        .trial-banner div {
+            color: white !important;
+        }
+        
+        /* Input styling - white background, dark text */
+        .gr-textbox, .gr-text-input, textarea {
+            background-color: white !important;
+            border: 1px solid #e0e0e0 !important;
+            color: #212529 !important;
+            border-radius: 8px !important;
+        }
+        
+        .gr-textbox input, .gr-textbox textarea {
+            background-color: white !important;
+            color: #212529 !important;
+            border: 1px solid #e0e0e0 !important;
+        }
+        
+        /* Focus states */
+        .gr-textbox:focus-within, textarea:focus, input:focus {
+            border-color: #4263eb !important;
+            outline: none !important;
+            box-shadow: 0 0 0 2px rgba(66, 99, 235, 0.1) !important;
+        }
+        
+        /* Button styling */
+        .gr-button {
+            background-color: #4263eb !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 8px !important;
+        }
+        
+        .gr-button:hover {
+            background-color: #364fc7 !important;
+        }
+        
+        /* Form containers */
+        .gr-form {
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+        }
+        
+        /* Examples styling */
+        .gr-examples {
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+        }
+        
+        /* Labels and text */
+        label, .gr-form label {
+            color: #212529 !important;
+            font-weight: 500 !important;
+        }
+        
+        /* Ensure proper text contrast everywhere */
+        p, span, div, h1, h2, h3, h4, h5, h6 {
+            color: #212529 !important;
+        }
+        
+        /* Output HTML container */
+        .gr-html {
+            background-color: white !important;
+        }
+        
+        /* Main title styling */
+        .main-title {
+            color: #212529 !important;
+            text-align: center !important;
+            font-size: 3rem !important;
+            font-weight: 800 !important;
+            margin: 2rem 0 0.5rem 0 !important;
+        }
+        
+        /* Subtitle styling */
+        .subtitle {
+            text-align: center !important;
+            color: #495057 !important;
+            font-size: 1.2rem !important;
+            margin-top: 0 !important;
+            margin-bottom: 2rem !important;
+        }
+        """
+    ) as demo:
+        # Trial banner
+        gr.HTML("""
+        <div class="trial-banner">
+            <h2 style="margin: 0 0 0.5rem 0; font-size: 1.8rem; font-weight: bold; color: white !important;">🚀 Free Trial - DGaze</h2>
+            <p style="margin: 0; opacity: 0.9; font-size: 1.1rem; color: white !important;">Try our news verification system with 2 free searches!</p>
+            <p style="margin: 0.5rem 0 0 0; font-size: 0.9rem; opacity: 0.8; color: white !important;">No signup required • Sign in for unlimited access</p>
+        </div>
+        """)
+        
+        # Main title
+        gr.HTML('<h1 class="main-title">DGaze</h1>')
+        gr.HTML('<p class="subtitle">Advanced News Verification System</p>')
+        
+        # Auth options
+        with gr.Row():
+            with gr.Column():
+                gr.HTML("""
+                <div style="text-align: center; margin: 1rem 0;">
+                    <a href="/login" style="
+                        display: inline-block;
+                        background-color: #4263eb;
+                        color: white;
+                        padding: 12px 24px;
+                        text-decoration: none;
+                        border-radius: 8px;
+                        font-weight: 600;
+                        margin-right: 1rem;
+                        transition: all 0.3s ease;
+                    " onmouseover="this.style.backgroundColor='#364fc7'" 
+                       onmouseout="this.style.backgroundColor='#4263eb'">
+                        🔐 Sign In for Unlimited Access
+                    </a>
+                    <span style="color: #6c757d; font-size: 0.9rem;">or continue with free trial below</span>
+                </div>
+                """)
+        
+        # Main interface
+        with gr.Column():
+            input_text = gr.Textbox(
+                label="Enter news text or URL to verify",
+                placeholder="Paste news text to verify...",
+                lines=5,
+                max_lines=10
+            )
+            
+            submit_btn = gr.Button("Check Truthfulness (Free Trial)", variant="primary")
+        
+        with gr.Column():
+            output_html = gr.HTML(label="Verification Results", visible=True)
+        
+        # Handle submission with trial tracking
+        submit_btn.click(fn=verify_news_with_trial_check, inputs=input_text, outputs=output_html)
+        input_text.submit(fn=verify_news_with_trial_check, inputs=input_text, outputs=output_html)
+        
+        # Examples
+        gr.Examples(
+            examples=[
+                ["""BREAKING: Revolutionary AI breakthrough! 🚀 Scientists at MIT have developed a new quantum AI system that can predict earthquakes with 99.7% accuracy up to 6 months in advance. The system, called "QuakeNet AI", uses quantum computing combined with machine learning to analyze seismic patterns invisible to current technology. Dr. Sarah Chen, lead researcher, claims this could save millions of lives and prevent billions in damages. The technology will be commercially available by 2026 according to insider sources. This comes just weeks after similar breakthroughs in cancer detection AI. What do you think about this amazing discovery? #AI #Earthquake #MIT #Science"""],
+                ["""SpaceX conducted another major test for their Starship program yesterday, with Elon Musk claiming on social media that Flight 10 is "ready to revolutionize space travel forever." The company fired up all 33 Raptor engines on their Super Heavy booster at the Starbase facility in Texas. According to various reports and this detailed article (https://www.space.com/space-exploration/launches-spacecraft/spacex-fires-up-super-heavy-booster-ahead-of-starships-10th-test-flight-video), the test was part of preparations for the upcoming 10th test flight. However, some critics argue that SpaceX is moving too fast without proper safety protocols, especially after Flight 9 experienced issues. The FAA is still investigating the previous mission where both the booster and ship were lost. Industry experts remain divided on whether this aggressive testing schedule is beneficial or dangerous for the future of commercial spaceflight. 🚀 #SpaceX #Starship #Space"""]
+            ],
+            inputs=[input_text]
+        )
+    
+    return demo
+
+def create_login_interface():
+    """Create login page interface."""
+    with gr.Blocks(
+        title="DGaze - Login",
+        css="""
+        /* White theme - full width design */
+        html, body {
+            background-color: white !important;
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+        
+        .gradio-container {
+            max-width: none !important;
+            width: 100% !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            background-color: white !important;
+            min-height: 100vh !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+        }
+        
+        .login-card {
+            background: #f8f9fa !important;
+            border-radius: 12px !important;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
+            padding: 3rem !important;
+            text-align: center !important;
+            border: 1px solid #e9ecef !important;
+            width: 100% !important;
+            max-width: 500px !important;
+            margin: 2rem !important;
+        }
+        
+        /* Ensure all text is visible */
+        h1, h2, h3, h4, h5, h6, p, span, div, label {
+            color: #212529 !important;
+        }
+        """
+    ) as demo:
+        gr.HTML("""
+        <div class="login-card">
+            <div style="margin-bottom: 2rem;">
+                <h1 style="color: #212529; margin-bottom: 1rem; font-size: 2.5rem; font-weight: bold;">🔐 DGaze</h1>
+                <p style="color: #495057; font-size: 1.2rem; margin-bottom: 0.5rem;">News Verification System</p>
+                <p style="color: #6c757d;">Sign in for unlimited verifications</p>
+            </div>
+            
+            <div style="margin: 2rem 0;">
+                <a href="/login" style="
+                    display: inline-block;
+                    background-color: #4263eb;
+                    color: white;
+                    padding: 15px 40px;
+                    text-decoration: none;
+                    border-radius: 8px;
+                    font-weight: 600;
+                    font-size: 1.1rem;
+                    transition: all 0.3s ease;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                " onmouseover="this.style.backgroundColor='#364fc7'; this.style.transform='translateY(-1px)'" 
+                   onmouseout="this.style.backgroundColor='#4263eb'; this.style.transform='translateY(0)'">
+                    🚀 Login with Auth0
+                </a>
+            </div>
+            
+            <div style="margin: 1.5rem 0;">
+                <p style="color: #6c757d; font-size: 0.9rem;">Or try our free version:</p>
+                <a href="/trial" style="
+                    color: #4263eb;
+                    text-decoration: underline;
+                    font-weight: 500;
+                ">
+                    Continue with 2 Free Verifications
+                </a>
+            </div>
+            
+            <p style="color: #6c757d; font-size: 0.9rem; margin-top: 1rem;">
+                Powered by Auth0 • Secure & Private
+            </p>
+        </div>
+        """)
+    return demo
+
+def create_main_interface():
+    """Create main authenticated interface."""
+    with gr.Blocks(
+        title="DGaze - News Verification", 
+        css="""
+        /* White theme - keeping original format */
+        html, body {
+            background-color: white !important;
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+        
+        .gradio-container {
+            background-color: white !important;
+            max-width: none !important;
+            margin: 0 !important;
+            padding: 20px !important;
+            min-height: 100vh !important;
+        }
+        
+        .main {
+            background-color: white !important;
+            max-width: 1200px !important;
+            margin: 0 auto !important;
+            padding: 0 20px !important;
+        }
+        
+        /* Block elements */
+        .block {
+            background-color: white !important;
+        }
+        
+        .block.padded {
+            background-color: white !important;
+        }
+        
+        /* User info section - keeping original format but white */
+        .user-info {
+            background: #f8f9fa !important;
+            color: #212529 !important;
+            padding: 1.5rem !important;
+            border-radius: 12px !important;
+            margin-bottom: 2rem !important;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+            border: 1px solid #e9ecef !important;
+        }
+        
+        /* Input styling - white background, dark text */
+        .gr-textbox, .gr-text-input, textarea {
+            background-color: white !important;
+            border: 1px solid #e0e0e0 !important;
+            color: #212529 !important;
+            border-radius: 8px !important;
+        }
+        
+        .gr-textbox input, .gr-textbox textarea {
+            background-color: white !important;
+            color: #212529 !important;
+            border: 1px solid #e0e0e0 !important;
+        }
+        
+        /* Ensure textarea content is visible */
+        textarea, input[type="text"] {
+            background-color: white !important;
+            color: #212529 !important;
+            border: 1px solid #e0e0e0 !important;
+        }
+        
+        /* Focus states */
+        .gr-textbox:focus-within, textarea:focus, input:focus {
+            border-color: #4263eb !important;
+            outline: none !important;
+            box-shadow: 0 0 0 2px rgba(66, 99, 235, 0.1) !important;
+        }
+        
+        /* Button styling */
+        .gr-button {
+            background-color: #4263eb !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 8px !important;
+        }
+        
+        .gr-button:hover {
+            background-color: #364fc7 !important;
+        }
+        
+        .gr-button[variant="secondary"] {
+            background-color: #6b7280 !important;
+            color: white !important;
+        }
+        
+        .gr-button[variant="secondary"]:hover {
+            background-color: #4b5563 !important;
+        }
+        
+        /* Form containers */
+        .gr-form {
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+        }
+        
+        /* Examples styling */
+        .gr-examples {
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+        }
+        
+        /* Labels and text */
+        label, .gr-form label {
+            color: #212529 !important;
+            font-weight: 500 !important;
+        }
+        
+        /* Ensure proper text contrast everywhere */
+        p, span, div, h1, h2, h3, h4, h5, h6 {
+            color: #212529 !important;
+        }
+        
+        /* Output HTML container */
+        .gr-html {
+            background-color: white !important;
+        }
+        
+        /* Main title styling - keeping original format */
+        .main-title {
+            color: #212529 !important;
+            text-align: center !important;
+            font-size: 3rem !important;
+            font-weight: 800 !important;
+            margin: 2rem 0 0.5rem 0 !important;
+        }
+        
+        /* Subtitle styling */
+        .subtitle {
+            text-align: center !important;
+            color: #495057 !important;
+            font-size: 1.2rem !important;
+            margin-top: 0 !important;
+            margin-bottom: 2rem !important;
+        }
+        """
+    ) as demo:
+        # User info section - load user data server-side using our existing get_user function
+        def format_user_info(request: gr.Request):
+            """Format user info HTML based on current user session"""
+            try:
+                # Use our existing user detection logic
+                user_name = get_user(request.request) if hasattr(request, 'request') else None
+                print(f"DEBUG: Gradio user detection result: {user_name}")
+                
+                if user_name:
+                    return f"""
+                    <div class="user-info" id="user-section">
+                        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+                            <div style="flex: 1;">
+                                <h3 style="margin: 0; font-size: 1.3rem; color: #212529;">👋 Welcome!</h3>
+                                <p style="margin: 5px 0 0 0; color: #495057; font-size: 1rem;">Hello, {user_name}! Unlimited verifications available 🎉</p>
+                            </div>
+                            <div style="margin-top: 10px;">
+                                <a href="/logout" style="
+                                    background-color: #dc3545;
+                                    color: white;
+                                    padding: 10px 20px;
+                                    text-decoration: none;
+                                    border-radius: 8px;
+                                    font-size: 0.95rem;
+                                    font-weight: 500;
+                                    transition: background-color 0.3s ease;
+                                " onmouseover="this.style.backgroundColor='#c82333'" 
+                                   onmouseout="this.style.backgroundColor='#dc3545'">
+                                    Logout
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    """
+                else:
+                    return """
+                    <div class="user-info" id="user-section">
+                        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+                            <div style="flex: 1;">
+                                <h3 style="margin: 0; font-size: 1.3rem; color: #212529;">👋 Welcome!</h3>
+                                <p style="margin: 5px 0 0 0; color: #495057; font-size: 1rem;">Please log in to continue</p>
+                            </div>
+                            <div style="margin-top: 10px;">
+                                <a href="/logout" style="
+                                    background-color: #dc3545;
+                                    color: white;
+                                    padding: 10px 20px;
+                                    text-decoration: none;
+                                    border-radius: 8px;
+                                    font-size: 0.95rem;
+                                    font-weight: 500;
+                                    transition: background-color 0.3s ease;
+                                ">
+                                    Logout
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    """
+            except Exception as e:
+                print(f"DEBUG: Error formatting user info: {e}")
+                return """
+                <div class="user-info" id="user-section">
+                    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+                        <div style="flex: 1;">
+                            <h3 style="margin: 0; font-size: 1.3rem; color: #212529;">👋 Welcome!</h3>
+                            <p style="margin: 5px 0 0 0; color: #495057; font-size: 1rem;">Loading user info...</p>
+                        </div>
+                        <div style="margin-top: 10px;">
+                            <a href="/logout" style="
+                                background-color: #dc3545;
+                                color: white;
+                                padding: 10px 20px;
+                                text-decoration: none;
+                                border-radius: 8px;
+                                font-size: 0.95rem;
+                                font-weight: 500;
+                            ">
+                                Logout
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                """
+        
+        user_info_html = gr.HTML()
+        demo.load(format_user_info, None, user_info_html)
+        
+        # Main title - keeping original format
+        gr.HTML('<h1 class="main-title">DGaze</h1>')
+        gr.HTML('<p class="subtitle">Advanced News Verification System - Unlimited Access</p>')
+        
+        # Main interface - keeping original format
+        with gr.Column():
+            input_text = gr.Textbox(
+                label="Enter news text or URL to verify",
+                placeholder="Paste news text to verify...",
+                lines=5,
+                max_lines=10
+            )
+            
+            submit_btn = gr.Button("Check Truthfulness", variant="primary")
+        
+        with gr.Column():
+            output_html = gr.HTML(label="Verification Results", visible=True)
+        
+        # Handle submission
+        submit_btn.click(fn=verify_news, inputs=input_text, outputs=output_html)
+        input_text.submit(fn=verify_news, inputs=input_text, outputs=output_html)
+        
+        # Examples - keeping original format
+        gr.Examples(
+            examples=[
+                ["""BREAKING: Revolutionary AI breakthrough! 🚀 Scientists at MIT have developed a new quantum AI system that can predict earthquakes with 99.7% accuracy up to 6 months in advance. The system, called "QuakeNet AI", uses quantum computing combined with machine learning to analyze seismic patterns invisible to current technology. Dr. Sarah Chen, lead researcher, claims this could save millions of lives and prevent billions in damages. The technology will be commercially available by 2026 according to insider sources. This comes just weeks after similar breakthroughs in cancer detection AI. What do you think about this amazing discovery? #AI #Earthquake #MIT #Science"""],
+                ["""SpaceX conducted another major test for their Starship program yesterday, with Elon Musk claiming on social media that Flight 10 is "ready to revolutionize space travel forever." The company fired up all 33 Raptor engines on their Super Heavy booster at the Starbase facility in Texas. According to various reports and this detailed article (https://www.space.com/space-exploration/launches-spacecraft/spacex-fires-up-super-heavy-booster-ahead-of-starships-10th-test-flight-video), the test was part of preparations for the upcoming 10th test flight. However, some critics argue that SpaceX is moving too fast without proper safety protocols, especially after Flight 9 experienced issues. The FAA is still investigating the previous mission where both the booster and ship were lost. Industry experts remain divided on whether this aggressive testing schedule is beneficial or dangerous for the future of commercial spaceflight. 🚀 #SpaceX #Starship #Space"""]
+            ],
+            inputs=[input_text]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    # Create interfaces
+    trial_demo = create_trial_interface()
+    login_demo = create_login_interface()
+    main_demo = create_main_interface()
+    
+    # Mount Gradio apps
+    gr.mount_gradio_app(app, trial_demo, path="/trial")
+    gr.mount_gradio_app(app, login_demo, path="/login-page")
+    gr.mount_gradio_app(app, main_demo, path="/demo")
+    
+    # Run the application
+    uvicorn.run(
+        app,
+        host=settings.GRADIO_SERVER_NAME,
+        port=settings.GRADIO_SERVER_PORT,
+        reload=False
+    ) 

components/__init__.py

@@ -0,0 +1,3 @@
+"""
+Components module for DGaze - News Verification System
+""" 

components/verification_result.py

@@ -0,0 +1,347 @@
+"""
+Verification result formatting components.
+Similar to MultiClaimVerificationResult.tsx in the React frontend.
+"""
+
+import html
+from typing import Dict, Any, List
+from utils.markdown_utils import convert_markdown_to_html
+
+
+def format_verification_results(data: Dict[str, Any]) -> str:
+    """Format verification results in HTML to match the React frontend structure."""
+    
+    verification_data = data.get("data", {})
+    verified_claims = verification_data.get("verified_claims", [])
+    
+    if not verified_claims:
+        return """
+        <div style="text-align: center; padding: 2rem; background: white; border-radius: 8px; border: 1px solid #dee2e6;">
+            <h3>No Claims Found</h3>
+            <p>No specific claims found to verify in the provided text.</p>
+        </div>
+        """
+    
+    # Get summary data
+    summary = verification_data.get("verification_summary", {})
+    
+    html_parts = []
+    
+    # Header Section
+    html_parts.append(_format_header(summary))
+    
+    # Summary Stats Grid
+    html_parts.append(_format_stats_grid(summary))
+    
+    # Truthfulness Distribution
+    html_parts.append(_format_truthfulness_distribution(summary))
+    
+    # Individual Claims Section
+    html_parts.append(_format_claims_header())
+    
+    # Individual Claim Cards
+    for i, claim in enumerate(verified_claims, 1):
+        html_parts.append(_format_claim_card(claim, i))
+    
+    # Processing Time Breakdown
+    html_parts.append(_format_processing_time(summary))
+    
+    return "".join(html_parts)
+
+
+def _format_header(summary: Dict[str, Any]) -> str:
+    """Format the header section."""
+    return f"""
+    <div style="text-align: center; margin-bottom: 2rem;">
+        <h1 style="font-size: 2rem; font-weight: bold; color: #212529; margin-bottom: 0.5rem;">Verification Results</h1>
+        <p style="color: #495057;">
+            Analyzed {summary.get('total_claims_found', 'N/A')} claims in {summary.get('processing_time', {}).get('total_seconds', 0):.1f} seconds
+        </p>
+    </div>
+    """
+
+
+def _format_stats_grid(summary: Dict[str, Any]) -> str:
+    """Format the statistics grid."""
+    avg_confidence = summary.get('average_confidence', 0) * 100
+    verification_rate = summary.get('verification_rate', '0%')
+    if isinstance(verification_rate, (int, float)):
+        verification_rate = f"{verification_rate:.1f}%"
+    
+    return f"""
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
+        <div style="background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; text-align: center;">
+            <div style="font-size: 2rem; font-weight: bold; color: #4263eb; margin-bottom: 0.5rem;">{summary.get('total_claims_found', 'N/A')}</div>
+            <div style="font-size: 0.9rem; color: #495057; font-weight: 500;">Total Claims</div>
+        </div>
+        <div style="background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; text-align: center;">
+            <div style="font-size: 2rem; font-weight: bold; color: #15aabf; margin-bottom: 0.5rem;">{summary.get('successful_verifications', 'N/A')}</div>
+            <div style="font-size: 0.9rem; color: #495057; font-weight: 500;">Verified</div>
+        </div>
+        <div style="background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; text-align: center;">
+            <div style="font-size: 2rem; font-weight: bold; color: #4263eb; margin-bottom: 0.5rem;">{avg_confidence:.0f}%</div>
+            <div style="font-size: 0.9rem; color: #495057; font-weight: 500;">Avg Confidence</div>
+        </div>
+        <div style="background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; text-align: center;">
+            <div style="font-size: 2rem; font-weight: bold; color: #fab005; margin-bottom: 0.5rem;">{verification_rate}</div>
+            <div style="font-size: 0.9rem; color: #495057; font-weight: 500;">Success Rate</div>
+        </div>
+    </div>
+    """
+
+
+def _format_truthfulness_distribution(summary: Dict[str, Any]) -> str:
+    """Format the truthfulness distribution section."""
+    truthfulness_dist = summary.get('truthfulness_distribution', {})
+    if not truthfulness_dist:
+        return ""
+    
+    dist_items = []
+    color_map = {
+        'TRUE': '#e8f5e9',
+        'MOSTLY TRUE': '#e3f2fd', 
+        'NEUTRAL': '#fff8e1',
+        'MOSTLY FALSE': '#ffebee',
+        'FALSE': '#ffebee'
+    }
+    
+    for category, count in truthfulness_dist.items():
+        bg_color = color_map.get(category.upper(), '#f5f5f5')
+        dist_items.append(f"""
+        <div style="text-align: center; padding: 1rem; border-radius: 8px; background: {bg_color};">
+            <div style="font-size: 0.9rem; font-weight: 500; color: #212529; margin-bottom: 0.5rem;">{category}</div>
+            <div style="font-size: 1.2rem; font-weight: bold; color: #495057;">{count}</div>
+        </div>
+        """)
+    
+    return f"""
+    <div style="background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; margin-bottom: 2rem;">
+        <h3 style="font-size: 1.2rem; font-weight: 600; color: #212529; margin-bottom: 1rem;">Truthfulness Distribution</h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
+            {"".join(dist_items)}
+        </div>
+    </div>
+    """
+
+
+def _format_claims_header() -> str:
+    """Format the claims section header."""
+    return """
+    <h2 style="font-size: 1.5rem; font-weight: bold; color: #212529; margin: 2rem 0 1rem 0;">Verified Claims</h2>
+    """
+
+
+def _format_claim_card(claim: Dict[str, Any], index: int) -> str:
+    """Format an individual claim card."""
+    truthfulness = claim.get("truthfulness", "UNKNOWN").upper()
+    confidence = claim.get("confidence", 0)
+    claim_text = claim.get("claim", "").strip()
+    evidence = claim.get("evidence", "").strip()
+    explanation = claim.get("explanation", "").strip()
+    sources = claim.get("sources", [])
+    
+    # Status color
+    status_colors = {
+        'TRUE': 'background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9;',
+        'MOSTLY TRUE': 'background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb;',
+        'NEUTRAL': 'background: #fff8e1; color: #ff8f00; border: 1px solid #ffecb3;',
+        'MOSTLY FALSE': 'background: #ffebee; color: #c62828; border: 1px solid #ffcdd2;',
+        'FALSE': 'background: #ffebee; color: #c62828; border: 1px solid #ffcdd2;'
+    }
+    status_style = status_colors.get(truthfulness, 'background: #f5f5f5; color: #424242; border: 1px solid #e0e0e0;')
+    
+    # Confidence color
+    conf_color = '#1565c0' if confidence >= 0.8 else '#ff8f00' if confidence >= 0.6 else '#c62828'
+    
+    # Check if we have valid evidence separate from explanation
+    has_valid_evidence = (evidence and 
+                        evidence.strip() and 
+                        evidence.lower() != 'evidence' and
+                        evidence != '[object Object]' and
+                        '[object Object]' not in evidence and
+                        evidence.strip() not in ['# EVIDENCE', 'EVIDENCE', 'Evidence'] and
+                        len(evidence.strip()) > 20 and
+                        'Evidence analysis is included in the explanation section' not in evidence)
+    
+    # Format sources
+    sources_html = _format_sources(sources)
+    
+    # Convert markdown to HTML for explanation and evidence
+    explanation_html = convert_markdown_to_html(str(explanation)) if explanation else "No analysis available for this claim."
+    evidence_html = convert_markdown_to_html(str(evidence)) if has_valid_evidence else ""
+    
+    # Only first claim is expanded by default
+    is_expanded = (index == 1)
+    
+    return f"""
+    <details {"open" if is_expanded else ""} style="background: white; border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 1.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
+        <summary style="padding: 1.5rem; cursor: pointer; background: white; color: #212529; border-bottom: 1px solid #e9ecef; list-style: none;">
+            <div style="display: flex; align-items: center; margin-bottom: 1rem;">
+                <span style="display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #4263eb; color: white !important; font-size: 0.9rem; font-weight: 500; margin-right: 0.75rem; text-align: center; line-height: 1;">
+                    <span style="color: white !important;">{index}</span>
+                </span>
+                <h3 style="font-size: 1.1rem; font-weight: 600; color: #212529; margin: 0;">
+                    Claim {index}
+                </h3>
+            </div>
+            
+            <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+                <span style="padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; {status_style}">
+                    {truthfulness}
+                </span>
+                <div style="display: flex; align-items: center; gap: 0.25rem;">
+                    <span style="font-weight: 600; font-size: 0.875rem; color: {conf_color};">
+                        {confidence * 100:.0f}%
+                    </span>
+                    <span style="font-size: 0.875rem; color: #495057;">confidence</span>
+                </div>
+            </div>
+            
+            <p style="color: #212529; font-size: 1rem; line-height: 1.6; margin: 0 0 1rem 0;">{claim_text}</p>
+            
+            <div style="display: flex; align-items: center; color: #4263eb; font-weight: 500; font-size: 0.9rem;">
+                <span style="margin-right: 0.5rem;">{'Hide Evidence' if is_expanded else 'Show Evidence'}</span>
+                <svg style="width: 1rem; height: 1rem; fill: none; stroke: #4263eb; transition: transform 0.2s; transform: {'rotate(180deg)' if is_expanded else 'rotate(0deg)'};" viewBox="0 0 24 24" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </div>
+        </summary>
+        
+        <!-- Evidence and Analysis Section -->
+        <div class="claim-content" style="padding: 1.5rem; background: #f8f9fa;">
+            <!-- Add CSS to ensure all text is visible -->
+            <style>
+                .claim-content * {{
+                    color: #212529 !important;
+                }}
+                .claim-content strong {{
+                    color: #212529 !important;
+                    font-weight: 600 !important;
+                }}
+                .claim-content em {{
+                    color: #495057 !important;
+                }}
+                .claim-content h1, .claim-content h2, .claim-content h3, .claim-content h4, .claim-content h5, .claim-content h6 {{
+                    color: #212529 !important;
+                }}
+                .claim-content p {{
+                    color: #495057 !important;
+                }}
+                /* Fix Confidence Notes: text color specifically */
+                .claim-content p:contains("Confidence Notes:") {{
+                    color: #212529 !important;
+                }}
+                .claim-content p strong:contains("Confidence Notes:") {{
+                    color: #212529 !important;
+                }}
+            </style>
+            
+            <!-- Analysis Section -->
+            {f'''
+            <div style="margin-bottom: 1.5rem;">
+                <h4 style="font-size: 1rem; font-weight: 600; color: #212529; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1.25rem; height: 1.25rem; fill: none; stroke: #4263eb;" viewBox="0 0 24 24" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    Analysis
+                </h4>
+                <div style="background: white; padding: 1rem; border-radius: 6px; border: 1px solid #dee2e6;">
+                    <div style="color: #495057; line-height: 1.6;">{explanation_html}</div>
+                </div>
+            </div>
+            ''' if explanation else ''}
+            
+            <!-- Evidence Section -->
+            <div style="margin-bottom: 1.5rem;">
+                <h4 style="font-size: 1rem; font-weight: 600; color: #212529; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <svg style="width: 1.25rem; height: 1.25rem; fill: none; stroke: #15aabf;" viewBox="0 0 24 24" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    Evidence
+                </h4>
+                <div style="background: white; padding: 1rem; border-radius: 6px; border: 1px solid #dee2e6;">
+                    {f'<div style="color: #495057; line-height: 1.6;">{evidence_html}</div>' if has_valid_evidence else '''
+                    <div style="text-align: center; padding: 1rem; color: #868e96; font-style: italic;">
+                        <svg style="width: 2rem; height: 2rem; margin: 0 auto 0.5rem; fill: none; stroke: #adb5bd;" viewBox="0 0 24 24" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                        <p style="color: #868e96; margin: 0.5rem 0;">Detailed evidence analysis is included in the explanation above.</p>
+                        <p style="font-size: 0.75rem; margin-top: 0.25rem; color: #868e96;">This claim's verification is based on the comprehensive analysis provided.</p>
+                    </div>
+                    '''}
+                </div>
+            </div>
+            
+            {sources_html}
+        </div>
+    </details>
+    """
+
+
+def _format_sources(sources: List) -> str:
+    """Format the sources section."""
+    if not sources:
+        return ""
+    
+    source_links = []
+    for j, source in enumerate(sources[:3], 1):
+        if source:
+            # Handle both string URLs and source objects
+            if isinstance(source, str):
+                safe_url = html.escape(source)
+                # Extract domain name for title
+                try:
+                    domain = source.split('/')[2] if '/' in source and len(source.split('/')) > 2 else source[:30]
+                    safe_title = html.escape(domain)
+                except:
+                    safe_title = html.escape(source[:30])
+            else:
+                safe_url = html.escape(source.get('url', ''))
+                safe_title = html.escape(source.get('title', 'Source'))
+            
+            source_links.append(f"""
+                <a href="{safe_url}" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; color: #4263eb; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; margin-bottom: 0.5rem;" onmouseover="this.style.background='#e7f1ff'; this.style.borderColor='#4263eb';" onmouseout="this.style.background='#f8f9fa'; this.style.borderColor='#dee2e6';">
+                    <svg style="width: 1rem; height: 1rem; fill: none; stroke: #4263eb;" viewBox="0 0 24 24" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                    </svg>
+                    {safe_title}
+                </a>
+            """)
+    
+    return f"""
+    <div style="margin-top: 1.5rem;">
+        <h4 style="font-size: 1rem; font-weight: 600; color: #212529; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;">
+            <svg style="width: 1.25rem; height: 1.25rem; fill: none; stroke: #4263eb;" viewBox="0 0 24 24" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+            </svg>
+            Sources ({len(sources)})
+        </h4>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">{"".join(source_links)}</div>
+    </div>
+    """
+
+
+def _format_processing_time(summary: Dict[str, Any]) -> str:
+    """Format the processing time breakdown section."""
+    step_breakdown = summary.get('processing_time', {}).get('step_breakdown', {})
+    if not step_breakdown:
+        return ""
+    
+    breakdown_items = []
+    for step, time in step_breakdown.items():
+        step_name = step.replace('_', ' ').title()
+        breakdown_items.append(f"""
+        <div style="text-align: center; padding: 1rem; border-radius: 8px; background: #f8f9fa;">
+            <div style="font-size: 1.1rem; font-weight: bold; color: #4263eb; margin-bottom: 0.25rem;">{time:.1f}s</div>
+            <div style="font-size: 0.875rem; color: #495057;">{step_name}</div>
+        </div>
+        """)
+    
+    return f"""
+    <div style="background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #e9ecef; margin-top: 2rem;">
+        <h3 style="font-size: 1.2rem; font-weight: 600; color: #212529; margin-bottom: 1rem;">Processing Time Breakdown</h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
+            {"".join(breakdown_items)}
+        </div>
+    </div>
+    """ 

config/__init__.py

@@ -0,0 +1,3 @@
+"""
+Configuration module for DGaze
+""" 

config/settings.py

@@ -0,0 +1,70 @@
+"""
+Configuration module for DGaze Gradio application.
+Loads settings from environment variables and .env file.
+"""
+
+import os
+import sys
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+
+class Settings:
+    """Application settings loaded from environment variables."""
+    
+    def __init__(self):
+        # Backend API Configuration - MANDATORY from .env
+        self.API_BASE_URL = self._get_required_env("API_BASE_URL")
+        self.API_ENDPOINT = f"{self.API_BASE_URL}/api/verify"
+        self.HEALTH_ENDPOINT = f"{self.API_BASE_URL}/api/health"
+        
+        # Auth0 Configuration - MANDATORY for authentication
+        self.AUTH0_DOMAIN = self._get_required_env("AUTH0_DOMAIN")
+        self.AUTH0_CLIENT_ID = self._get_required_env("AUTH0_CLIENT_ID")
+        self.AUTH0_CLIENT_SECRET = self._get_required_env("AUTH0_CLIENT_SECRET")
+        self.AUTH0_AUDIENCE = self._get_required_env("AUTH0_AUDIENCE")
+        
+        # Gradio Application Configuration
+        self.GRADIO_SERVER_NAME = os.getenv("GRADIO_SERVER_NAME", "0.0.0.0")
+        self.GRADIO_SERVER_PORT = int(os.getenv("GRADIO_SERVER_PORT", "3000"))
+        self.GRADIO_SHARE = os.getenv("GRADIO_SHARE", "false").lower() == "true"
+        
+        # Health Check Configuration
+        self.HEALTH_CHECK_ENABLED = os.getenv("HEALTH_CHECK_ENABLED", "true").lower() == "true"
+        self.HEALTH_CHECK_INTERVAL = int(os.getenv("HEALTH_CHECK_INTERVAL", "30"))
+        
+        # Security
+        self.SECRET_KEY = os.getenv("SECRET_KEY", "your-secret-key-for-sessions")
+        
+        # Logging Configuration
+        self.LOG_LEVEL = os.getenv("LOG_LEVEL", "INFO")
+        self.DEBUG = os.getenv("DEBUG", "false").lower() == "true"
+        
+        # Rate Limiting
+        self.RATE_LIMIT_ENABLED = os.getenv("RATE_LIMIT_ENABLED", "true").lower() == "true"
+        self.RATE_LIMIT_REQUESTS = int(os.getenv("RATE_LIMIT_REQUESTS", "100"))
+        self.RATE_LIMIT_WINDOW = int(os.getenv("RATE_LIMIT_WINDOW", "3600"))
+        
+        # Cache Configuration
+        self.CACHE_ENABLED = os.getenv("CACHE_ENABLED", "true").lower() == "true"
+        self.CACHE_TTL = int(os.getenv("CACHE_TTL", "3600"))
+        
+        # OAuth Configuration - Use from .env if provided, otherwise build dynamically
+        self.OAUTH_REDIRECT_URI = os.getenv("AUTH0_REDIRECT_URI")
+        if not self.OAUTH_REDIRECT_URI:
+            self.OAUTH_REDIRECT_URI = f"http://localhost:{self.GRADIO_SERVER_PORT}/auth"
+            if self.GRADIO_SERVER_NAME != "localhost" and self.GRADIO_SERVER_NAME != "127.0.0.1":
+                self.OAUTH_REDIRECT_URI = f"http://{self.GRADIO_SERVER_NAME}:{self.GRADIO_SERVER_PORT}/auth"
+    
+    def _get_required_env(self, var_name: str) -> str:
+        """Get a required environment variable or exit with error."""
+        value = os.getenv(var_name)
+        if not value:
+            print(f"ERROR: Required environment variable '{var_name}' not found in .env file!")
+            print(f"Please add '{var_name}=<your-value>' to your .env file")
+            sys.exit(1)
+        return value
+
+# Create a settings instance
+settings = Settings() 

requirements.txt

@@ -0,0 +1,8 @@
+gradio>=4.0.0
+requests>=2.25.0
+python-dotenv
+fastapi>=0.100.0
+uvicorn[standard]>=0.23.0
+authlib>=1.2.0
+itsdangerous>=2.1.0
+python-multipart>=0.0.6 

spaces_README.md

@@ -0,0 +1,114 @@
+---
+title: DGaze News Verification
+emoji: 🔍
+colorFrom: blue
+colorTo: purple
+sdk: gradio
+sdk_version: 4.0.0
+app_file: app.py
+pinned: false
+license: mit
+short_description: Advanced news verification system using AI with Auth0 authentication
+---
+
+# DGaze - Advanced News Verification System
+
+An advanced AI-powered news verification system with authentication that helps identify potentially misleading or false information.
+
+## Features
+
+- **🔐 Authentication**: Secure Auth0 integration with trial and full access modes
+- **🆓 Free Trial**: 2 free verifications for unauthenticated users  
+- **🔍 Real-time Analysis**: Instant verification of news articles and URLs
+- **📊 Credibility Scoring**: Detailed credibility scores for news content
+- **🌐 Source Verification**: Check the reliability of news sources
+- **📱 Multiple Interfaces**: Trial, login, and authenticated user interfaces
+- **🎨 Beautiful UI**: Professional gradient design with responsive layout
+
+## How to Use
+
+### Free Trial (No Login Required)
+1. Visit the **trial interface** at `/trial`
+2. **Paste news text** or **URL** in the input box
+3. **Click "Verify News"** to analyze the content  
+4. **Get detailed results** including credibility score and analysis
+5. Enjoy **2 free verifications** per session
+
+### Full Access (With Login)
+1. **Click "Sign In"** to authenticate via Auth0
+2. Get **unlimited verifications**
+3. Access to **premium features**
+4. **Session persistence** across visits
+
+## Configuration
+
+This Space requires the following environment variables to be set in the Space settings:
+
+### Required Environment Variables
+
+```bash
+# Backend API Configuration (REQUIRED)
+API_BASE_URL=your-backend-api-url
+
+# Auth0 Configuration (REQUIRED for authentication)
+AUTH0_DOMAIN=your-auth0-domain
+AUTH0_CLIENT_ID=your-auth0-client-id  
+AUTH0_CLIENT_SECRET=your-auth0-client-secret
+AUTH0_AUDIENCE=your-auth0-audience
+
+# Security
+SECRET_KEY=your-session-secret-key
+
+# Optional: App Configuration
+GRADIO_SERVER_NAME=0.0.0.0
+GRADIO_SERVER_PORT=7860
+DEBUG=false
+```
+
+### Setting Environment Variables
+1. Go to your **Space Settings**
+2. Find **"Repository secrets"** or **"Variables and secrets"**
+3. Add each variable with **"Private"** visibility for sensitive data
+4. **Restart the Space** after adding variables
+
+## Try the Examples
+
+We've included sample news articles to demonstrate the verification capabilities:
+- Suspicious breakthrough claims with questionable sources
+- Real news with proper sourcing and verification
+
+## Architecture
+
+This application uses:
+- **FastAPI**: Backend API framework with Auth0 integration
+- **Gradio**: Interactive web interface with multiple mounted apps
+- **Auth0**: Secure authentication and user management
+- **Session Management**: Trial tracking and user state management
+- **Modular Design**: Clean separation of concerns with api/, config/, and components/ modules
+
+## API Integration
+
+The app connects to a backend API for news verification. Make sure your backend API supports:
+- `POST /api/verify` - Main verification endpoint
+- `GET /api/health` - Health check endpoint
+
+## Local Development
+
+To run locally:
+1. Clone this repository
+2. Install dependencies: `pip install -r requirements.txt`
+3. Set up your `.env` file with the required variables
+4. Run: `python app.py`
+5. Access at `http://localhost:3000`
+
+## Built With
+
+- **Gradio**: Interactive web interface
+- **FastAPI**: Modern, fast web framework
+- **Auth0**: Authentication platform
+- **Python**: Backend processing
+- **Hugging Face Spaces**: Hosting platform
+
+---
+
+*Built with ❤️ for fighting misinformation and promoting media literacy* 

utils/__init__.py

@@ -0,0 +1,3 @@
+"""
+Utils package for DGaze Gradio application.
+""" 

utils/markdown_utils.py

@@ -0,0 +1,63 @@
+"""
+Markdown utilities for converting markdown to HTML.
+"""
+
+import re
+import html
+
+
+def convert_markdown_to_html(markdown_text: str) -> str:
+    """
+    Convert markdown text to HTML with basic formatting.
+    
+    Args:
+        markdown_text: The markdown text to convert
+        
+    Returns:
+        HTML formatted string
+    """
+    if not markdown_text or not isinstance(markdown_text, str):
+        return ""
+    
+    # Escape HTML special characters first
+    text = html.escape(markdown_text.strip())
+    
+    # Convert markdown to HTML
+    # Headers
+    text = re.sub(r'^### (.*?)$', r'<h3>\1</h3>', text, flags=re.MULTILINE)
+    text = re.sub(r'^## (.*?)$', r'<h2>\1</h2>', text, flags=re.MULTILINE)
+    text = re.sub(r'^# (.*?)$', r'<h1>\1</h1>', text, flags=re.MULTILINE)
+    
+    # Bold text
+    text = re.sub(r'\*\*(.*?)\*\*', r'<strong>\1</strong>', text)
+    text = re.sub(r'__(.*?)__', r'<strong>\1</strong>', text)
+    
+    # Special handling for "Confidence Notes:" to ensure proper styling
+    text = re.sub(r'<strong>Confidence Notes:</strong>', r'<strong style="color: #212529 !important;">Confidence Notes:</strong>', text)
+    text = re.sub(r'\*\*Confidence Notes:\*\*', r'<strong style="color: #212529 !important;">Confidence Notes:</strong>', text)
+    
+    # Italic text
+    text = re.sub(r'\*(.*?)\*', r'<em>\1</em>', text)
+    text = re.sub(r'_(.*?)_', r'<em>\1</em>', text)
+    
+    # Code blocks (triple backticks)
+    text = re.sub(r'```(.*?)```', r'<pre><code>\1</code></pre>', text, flags=re.DOTALL)
+    
+    # Inline code
+    text = re.sub(r'`(.*?)`', r'<code>\1</code>', text)
+    
+    # Convert line breaks to paragraphs
+    paragraphs = text.split('\n\n')
+    html_paragraphs = []
+    
+    for paragraph in paragraphs:
+        paragraph = paragraph.strip()
+        if paragraph:
+            # Check if it's already wrapped in HTML tags
+            if not (paragraph.startswith('<') and paragraph.endswith('>')):
+                # Replace single line breaks with <br>
+                paragraph = paragraph.replace('\n', '<br>')
+                paragraph = f'<p>{paragraph}</p>'
+            html_paragraphs.append(paragraph)
+    
+    return '\n'.join(html_paragraphs)