app.py

# -*- coding: utf-8 -*-
"""GradioWebsite.ipynb

Automatically generated by Colab.

Original file is located at
    https://colab.research.google.com/drive/14D-sxTs35_Vc9__q6maqZ6cb8OqfhTqt
"""

import gradio as gr
import torch
import torch.nn.functional as F
from transformers import BertTokenizer, BertForSequenceClassification
import os

def load_model():
    model_name = "indobenchmark/indobert-lite-large-p2"
    model = BertForSequenceClassification.from_pretrained(
        model_name, 
        num_labels=3,
        local_files_only=False,
        ignore_mismatched_sizes=True
    )

    try:
        local_model_path = "model.pt"  # Changed from .safetensors
        if os.path.exists(local_model_path):
            weights = torch.load(local_model_path)
            model.load_state_dict(weights)
            print("✅ Local model weights loaded successfully!")
        else:
            print("❌ No local model weights found. Using pre-trained weights.")
    except Exception as e:
        print(f"❌ Error loading local weights: {e}")

    model.eval()
    return model

# Load model globally
model = load_model()

# Load the tokenizer
tokenizer = BertTokenizer.from_pretrained('indobenchmark/indobert-lite-large-p2')

def predict_stress_with_accuracy(text_input):
    if not text_input.strip():
        return None, None, None, None

    # Print input for debugging
    print(f"🔍 Input Text: '{text_input}'")

    # Tokenize the input text
    inputs = tokenizer(text_input, return_tensors="pt", padding=True, truncation=True, max_length=512)
    
    # Print tokenization details
    print("🔍 Tokenization Details:")
    print(f"  Input IDs: {inputs['input_ids']}")
    print(f"  Attention Mask: {inputs['attention_mask']}")

    # Get the model's output
    with torch.no_grad():
        output = model(**inputs)

    # Print raw logits
    print("🔍 Raw Logits:")
    print(output.logits)

    # Apply softmax to get probabilities
    probabilities = F.softmax(output.logits, dim=1)

    # Get predictions for all classes
    probs = probabilities[0].tolist()
    confidence_scores = [round(p * 100, 1) for p in probs]

    # Print probabilities
    print("🔍 Class Probabilities:")
    print(f"  Neutral: {confidence_scores[0]}%")
    print(f"  Mild Stress: {confidence_scores[1]}%")
    print(f"  Very Stress: {confidence_scores[2]}%")

    # Get main prediction
    predicted_class = torch.argmax(probabilities, dim=1).item()
    main_confidence = confidence_scores[predicted_class]

    # Map the predicted class to stress level
    stress_levels = {0: "Neutral", 1: "Mild Stress", 2: "Very Stress"}
    prediction = stress_levels[predicted_class]

    print(f"🔍 Predicted Class: {prediction} ({main_confidence}% confident)")

    # Rest of the HTML generation code remains the same...
    result_html = f"""
        <div class="result-card">
            <div class="prediction-text">{prediction}</div>
            <div class="confidence-bar-container">
                <div class="confidence-bar" style="width: {main_confidence}%"></div>
                <span class="confidence-text">{main_confidence}% Confident</span>
            </div>
        </div>
    """

    detailed_html = f"""
        <div class="detailed-analysis">
            <div class="analysis-title">Detailed Analysis</div>
            <div class="analysis-bars">
                <div class="analysis-bar">
                    <div class="bar-label">Neutral</div>
                    <div class="bar-container">
                        <div class="bar neutral" style="width: {confidence_scores[0]}%"></div>
                        <span class="bar-value">{confidence_scores[0]}%</span>
                    </div>
                </div>
                <div class="analysis-bar">
                    <div class="bar-label">Mild Stress</div>
                    <div class="bar-container">
                        <div class="bar mild" style="width: {confidence_scores[1]}%"></div>
                        <span class="bar-value">{confidence_scores[1]}%</span>
                    </div>
                </div>
                <div class="analysis-bar">
                    <div class="bar-label">Very Stress</div>
                    <div class="bar-container">
                        <div class="bar very" style="width: {confidence_scores[2]}%"></div>
                        <span class="bar-value">{confidence_scores[2]}%</span>
                    </div>
                </div>
            </div>
        </div>
    """

    return result_html, detailed_html, prediction, main_confidence

# Create the interface
with gr.Blocks(css="""
    #component-0 {
        max-width: 900px;
        margin: auto;
        padding: 0 20px;
    }

    .container {
        background: linear-gradient(135deg, #1a1c29, #2d3748);
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    .header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .title {
        font-size: 2.5rem;
        font-weight: bold;
        background: linear-gradient(45deg, #00c6ff, #0072ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.5rem;
    }

    .subtitle {
        color: #a0aec0;
        font-size: 1.1rem;
    }

    /* Input styles */
    .input-container {
        background: rgba(255,255,255,0.05);
        border-radius: 15px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    textarea {
        background: rgba(255,255,255,0.07) !important;
        border: 2px solid rgba(255,255,255,0.1) !important;
        border-radius: 12px !important;
        color: white !important;
        font-size: 1.1rem !important;
        transition: all 0.3s ease !important;
    }

    textarea:focus {
        border-color: #00c6ff !important;
        box-shadow: 0 0 20px rgba(0,198,255,0.2) !important;
    }

    /* Result card styles */
    .result-card {
        background: rgba(255,255,255,0.07);
        border-radius: 15px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        animation: fadeIn 0.5s ease-out;
    }

    .prediction-text {
        font-size: 1.8rem;
        font-weight: bold;
        color: white;
        text-align: center;
        margin-bottom: 1rem;
    }

    .confidence-bar-container {
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
        height: 20px;
        position: relative;
        overflow: hidden;
    }

    .confidence-bar {
        background: linear-gradient(90deg, #00c6ff, #0072ff);
        height: 100%;
        border-radius: 10px;
        transition: width 0.5s ease-out;
    }

    .confidence-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    /* Detailed analysis styles */
    .detailed-analysis {
        background: rgba(255,255,255,0.07);
        border-radius: 15px;
        padding: 1.5rem;
        animation: fadeIn 0.5s ease-out;
    }

    .analysis-title {
        color: white;
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 1rem;
        text-align: center;
    }

    .analysis-bar {
        margin-bottom: 1rem;
    }

    .bar-label {
        color: #a0aec0;
        margin-bottom: 0.5rem;
    }

    .bar-container {
        background: rgba(255,255,255,0.1);
        border-radius: 8px;
        height: 15px;
        position: relative;
        overflow: hidden;
    }

    .bar {
        height: 100%;
        transition: width 0.5s ease-out;
    }

    .bar.neutral { background: linear-gradient(90deg, #00f2c3, #0098f0); }
    .bar.mild { background: linear-gradient(90deg, #ffd600, #ff9100); }
    .bar.very { background: linear-gradient(90deg, #ff5724, #ff2d55); }

    .bar-value {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 0.9rem;
        font-weight: bold;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
        .container {
            padding: 1rem;
        }

        .title {
            font-size: 2rem;
        }

        .prediction-text {
            font-size: 1.5rem;
        }
    }
""") as iface:
    gr.HTML("""
        <div class="header">
            <div class="title">Klasifikasi Tingkat Stress</div>
            <div class="subtitle">Jelaskan keadaan emosi Anda dan biarkan AI menganalisis tingkat stres Anda</div>
        </div>
    """)

    with gr.Column(elem_classes="container"):
        text_input = gr.Textbox(
            label="Describe Your Emotional State",
            placeholder="Apa kabar hari ini?",
            lines=4,
            elem_classes="input-container"
        )

        result_html = gr.HTML()
        detailed_html = gr.HTML()
        prediction = gr.State()
        confidence = gr.State()

        text_input.change(
            predict_stress_with_accuracy,
            inputs=[text_input],
            outputs=[result_html, detailed_html, prediction, confidence]
        )

iface.launch(share=True)