File size: 4,954 Bytes
c49cebe
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
# app.py
import gradio as gr
from classifier import classify_toxic_comment

# Clear function for resetting the UI
def clear_inputs():
    return "", 0, "", []

# Custom CSS for styling
custom_css = """
.gr-button-primary {
    background-color: #4CAF50 !important;
    color: white !important;
}
.gr-button-secondary {
    background-color: #f44336 !important;
    color: white !important;
}
.gr-textbox textarea {
    border: 2px solid #2196F3 !important;
    border-radius: 8px !important;
}
.gr-slider {
    background-color: #e0e0e0 !important;
    border-radius: 10px !important;
}
"""

# Main UI function
with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
    gr.Markdown(
        """
        # Toxic Comment Classifier
        Enter a comment below to check if it's toxic or non-toxic. This app uses a fine-tuned XLM-RoBERTa model to classify comments as part of a four-stage pipeline for automated toxic comment moderation.
        """
    )

    with gr.Row():
        with gr.Column(scale=3):
            comment_input = gr.Textbox(
                label="Your Comment",
                placeholder="Type your comment here...",
                lines=3,
                max_lines=5
            )
        with gr.Column(scale=1):
            submit_btn = gr.Button("Classify Comment", variant="primary")
            clear_btn = gr.Button("Clear", variant="secondary")

    gr.Examples(
        examples=[
            "I love this community, it's so supportive!",
            "You are an idiot and should leave this platform.",
            "This app is amazing, great work!"
        ],
        inputs=comment_input,
        label="Try these examples:"
    )

    with gr.Row():
        with gr.Column(scale=2):
            prediction_output = gr.Textbox(label="Prediction", placeholder="Prediction will appear here...")
        with gr.Column(scale=1):
            confidence_output = gr.Slider(
                label="Confidence",
                minimum=0,
                maximum=1,
                value=0,
                interactive=False
            )

    with gr.Row():
        label_display = gr.HTML()
        threshold_display = gr.HTML()

    with gr.Accordion("Prediction History", open=False):
        history_output = gr.JSON(label="Previous Predictions")

    with gr.Accordion("Provide Feedback", open=False):
        feedback_input = gr.Radio(
            choices=["Yes, the prediction was correct", "No, the prediction was incorrect"],
            label="Was this prediction correct?"
        )
        feedback_comment = gr.Textbox(label="Additional Comments (optional)", placeholder="Let us know your thoughts...")
        feedback_submit = gr.Button("Submit Feedback")
        feedback_output = gr.Textbox(label="Feedback Status")

    def handle_classification(comment, history):
        if history is None:
            history = []
        prediction, confidence, color = classify_toxic_comment(comment)
        history.append({"comment": comment, "prediction": prediction, "confidence": confidence})
        threshold_message = "High Confidence" if confidence >= 0.7 else "Low Confidence"
        threshold_color = "green" if confidence >= 0.7 else "orange"
        return prediction, confidence, color, history, threshold_message, threshold_color

    def handle_feedback(feedback, comment):
        return f"Thank you for your feedback: {feedback}\nAdditional comment: {comment}"

    submit_btn.click(
        fn=lambda: ("Classifying...", 0, "", None, "", ""),  # Show loading state
        inputs=[],
        outputs=[prediction_output, confidence_output, label_display, history_output, threshold_display, threshold_display]
    ).then(
        fn=handle_classification,
        inputs=[comment_input, history_output],
        outputs=[prediction_output, confidence_output, label_display, history_output, threshold_display, threshold_display]
    ).then(
        fn=lambda prediction, confidence, color: f"<span style='color: {color}; font-size: 20px; font-weight: bold;'>{prediction}</span>",
        inputs=[prediction_output, confidence_output, label_display],
        outputs=label_display
    ).then(
        fn=lambda threshold_message, threshold_color: f"<span style='color: {threshold_color}; font-size: 16px;'>{threshold_message}</span>",
        inputs=[threshold_display, threshold_display],
        outputs=threshold_display
    )

    feedback_submit.click(
        fn=handle_feedback,
        inputs=[feedback_input, feedback_comment],
        outputs=feedback_output
    )

    clear_btn.click(
        fn=clear_inputs,
        inputs=[],
        outputs=[comment_input, confidence_output, label_display, history_output]
    )

    gr.Markdown(
        """
        ---
        **About**: This app is part of a four-stage pipeline for automated toxic comment moderation with emotional intelligence via RLHF. Built with ❤️ using Hugging Face and Gradio.
        """
    )

demo.launch()