app.py

import gradio as gr
from functools import lru_cache
from inference.aspect_extraction.model import PredictAspect
from inference.sentiment_classification.model import PredictSentiment


# Cache model agar load sekali saja
@lru_cache()
def get_aspect_model():
    return PredictAspect()

@lru_cache()
def get_sentiment_model():
    return PredictSentiment()

# Function prediksi end-to-end untuk Gradio
def predict_absa(text_input):
    # Split by newline
    texts = [line.strip() for line in text_input.strip().split('\n') if line.strip()]

    # Load model dari cache
    aspect_model = get_aspect_model()
    sentiment_model = get_sentiment_model()

    # Prediksi
    df_aspects = aspect_model.predict(texts)
    df_sentiments = sentiment_model.predict(df_aspects)

    # Format hasil
    result = df_sentiments.to_dict(orient="records")

    result_str = ""
    for row in result:
        result_str += f"Text: {row['text']}\n"
        result_str += f"Aspect: {row['aspect']}\n"
        result_str += f"Sentiment: {row['predicted_sentiment']}\n\n"

    return result_str


# UI Gradio
# Define additional HTML for the footer
additional_html = """
<div style="text-align: center; margin-top: 30px; padding: 20px; background-color: rgba(0, 0, 0, 0.8); border-top: 2px solid #8B0000; border-radius: 0 0 10px 10px;">
    <img src="https://i.imgur.com/Q7cAm9u.png" alt="GTA VI Artwork" style="width: 100%; max-width: 600px; border-radius: 8px; margin-bottom: 20px; border: 2px solid #FFD700;">
    <p style="color: #FFD700; font-family: 'Impact', sans-serif; font-size: 1.1em; text-shadow: 1px 1px 2px #000000;">
        Crafted with chaos and precision by Alwan Rahmana
    </p>
    <p style="color: #FFA500; font-family: 'Impact', sans-serif; font-size: 1em;">
        <a href="mailto:alwanrahmana@gmail.com" style="color: #00FF00; text-decoration: none;">
            <img src="https://img.icons8.com/fluency/24/000000/apple-mail.png" alt="Email Icon" style="vertical-align: middle; margin-right: 5px;"/>
            alwanrahmana@gmail.com
        </a><br>
        <a href="https://www.linkedin.com/in/alwanrahmana/" target="_blank" style="color: #00FF00; text-decoration: none;">
            <img src="https://img.icons8.com/color/24/000000/linkedin.png" alt="LinkedIn Icon" style="vertical-align: middle; margin-right: 5px;"/>
            LinkedIn
        </a><br>
        <a href="https://huggingface.co/alwanrahmana/" target="_blank" style="color: #00FF00; text-decoration: none;">
            <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="HF Icon" style="vertical-align: middle; margin-right: 5px; width:20px; height:20px;"/>
            Hugging Face
        </a>
    </p>
    <p style="color: #FFA500; font-family: 'Impact', sans-serif; font-size: 1em; margin-top: 15px;">
        Explore the source code on GitHub: 
        <a href="https://github.com/alwanrahmanas/aspect-based-sentiment-analysis-GTA-VI" target="_blank" style="color: #00FFFF; text-decoration: none; text-shadow: 1px 1px 2px #000000;">
            <img src="https://img.icons8.com/ios-glyphs/24/00FFFF/github.png" alt="GitHub Icon" style="vertical-align: middle; margin-right: 5px;"/>
            GitHub Repo
        </a>
    </p>
</div>
"""

iface = gr.Interface(
    fn=predict_absa,
    inputs=gr.Textbox(label="Enter your comment.", lines=4, placeholder="Make new line to add more comments!"),
    outputs=gr.Textbox(label="Aspects and Sentiments", lines=10, placeholder="Results will be displayed here..."),
    title="<h1 style='color: #FFD700; text-align: center; font-family: \"impactful\", sans-serif; text-shadow: 2px 2px 4px #000000;'>Grand Theft Auto VI: Sentiment Showdown</h1>",
    description="<p style='color: #FFA500; text-align: center; font-family: \"impactful\", sans-serif;'>Drop your in-game thoughts and let's see if it's <b>wanted</b> or <b>wasted</b>!</p>",
    css="""
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Permanent+Marker&family=Impact&display=swap');
    body {
        background-image: url('https://upload.wikimedia.org/wikipedia/en/thumb/5/53/Grand_Theft_Auto_VI_logo.png/640px-Grand_Theft_Auto_VI_logo.png'); /* GTA VI logo as a background for the page */
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .gradio-container {
        background-color: rgba(0, 0, 0, 0.85); /* Darker, more opaque background for the main container */
        border: 4px solid #8B0000; /* Darker red border for more impact */
        border-radius: 15px; /* More rounded corners */
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.9); /* Stronger red glow effect */
        padding: 30px; /* More padding */
        max-width: 800px; /* Set a max width for better presentation */
        width: 90%;
        margin: 30px auto; /* Center the container with more top/bottom margin */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    .gr-textbox label {
        color: #00FF00 !important; /* Bright green text for labels */
        font-family: 'Press Start 2P', cursive; /* Pixelated font for labels */
        font-size: 1.2em; /* Slightly larger font */
        text-shadow: 1px 1px 3px #000000; /* Text shadow for labels */
    }
    .gr-textbox textarea {
        background-color: #222222 !important; /* Even darker input background */
        color: #FFD700 !important; /* Gold text in input */
        border: 2px solid #A52A2A !important; /* Brownish-red border for inputs */
        font-family: 'Permanent Marker', cursive; /* A slightly rougher, "graffiti" style font for input text */
        font-size: 1.1em;
        padding: 10px;
        border-radius: 8px; /* Rounded corners for text areas */
    }
    .gradio-button {
        background-color: #8B0000 !important; /* Dark red button */
        color: #FFD700 !important; /* Gold text on button */
        border: 3px solid #FFD700 !important; /* Thicker gold border */
        font-family: 'Press Start 2P', cursive; /* Pixelated font for buttons */
        font-size: 1.3em; /* Larger button text */
        text-shadow: 2px 2px 4px #000000; /* Stronger text shadow */
        border-radius: 10px; /* Rounded corners for buttons */
        padding: 12px 25px; /* More padding for buttons */
        transition: all 0.3s ease-in-out; /* Smooth transition on hover */
    }
    .gradio-button:hover {
        background-color: #FF0000 !important; /* Brighter red on hover */
        box-shadow: 0 0 15px #FFD700; /* Gold glow on hover */
        transform: scale(1.05); /* Slightly enlarge on hover */
    }
    h1 {
        font-family: 'Impact', sans-serif; /* A font that resembles GTA titles */
        color: #FFD700; /* Gold color */
        text-shadow: 3px 3px 6px #000000; /* Stronger black shadow for title */
        letter-spacing: 2px; /* Add some letter spacing */
        margin-bottom: 20px;
    }
    p {
        font-family: 'Permanent Marker', cursive; /* Graffiti-style font for description */
        color: #FFA500; /* Orange color */
        text-shadow: 1px 1px 2px #000000;
    }
    a {
        text-decoration: none;
        font-weight: bold;
    }
    a:hover {
        text-decoration: underline;
    }
    /* Styles for the footer */
    .gradio-container + div { /* Selects the div immediately after .gradio-container (where additional_html is inserted) */
        margin-top: 30px;
        width: 100%;
        box-sizing: border-box;
    }
    """
)

# Run app
if __name__ == "__main__":
    iface.launch()