File size: 9,722 Bytes
76254b2
b59fcf5
76254b2
 
 
 
8545c27
 
 
76254b2
 
b59fcf5
76254b2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8545c27
b59fcf5
 
 
 
 
 
8545c27
 
 
 
 
 
 
b59fcf5
 
76254b2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8545c27
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76254b2
 
 
b59fcf5
 
 
 
 
 
 
 
 
8545c27
b59fcf5
8545c27
76254b2
8545c27
b59fcf5
8545c27
b59fcf5
8aa1525
 
 
76254b2
8545c27
 
 
 
 
 
 
 
 
 
 
 
 
76254b2
8aa1525
 
8545c27
8aa1525
8545c27
8aa1525
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76254b2
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
import random
from typing import AnyStr

import streamlit as st
from bs4 import BeautifulSoup

import spacy
from spacy import displacy

from transformers import AutoTokenizer, AutoModelForSequenceClassification
from transformers import pipeline
import os
from transformers_interpret import SequenceClassificationExplainer

# Map model names to URLs
model_names_to_URLs = {
    'ml6team/distilbert-base-dutch-cased-toxic-comments':
        'https://huggingface.co/ml6team/distilbert-base-dutch-cased-toxic-comments',
    'ml6team/robbert-dutch-base-toxic-comments':
        'https://huggingface.co/ml6team/robbert-dutch-base-toxic-comments',
}

about_page_markdown = f"""# 🀬 Dutch Toxic Comment Detection Space

Made by [ML6](https://ml6.eu/).

Token attribution is performed using [transformers-interpret](https://github.com/cdpierse/transformers-interpret).
"""

regular_emojis = [
    '😐', 'πŸ™‚', 'πŸ‘Ά', 'πŸ˜‡',
]
undecided_emojis = [
    '🀨', '🧐', 'πŸ₯Έ', 'πŸ₯΄', '🀷',
]
potty_mouth_emojis = [
    '🀐', 'πŸ‘Ώ', '😑', '🀬', '☠️', '☣️', '☒️',
]

# Page setup
st.set_page_config(
    page_title="Toxic Comment Detection Space",
    page_icon="🀬",
    layout="centered",
    initial_sidebar_state="auto",
    menu_items={
        'Get help': None,
        'Report a bug': None,
        'About': about_page_markdown,
    }
)

# Model setup
@st.cache(allow_output_mutation=True,
          suppress_st_warning=True,
          show_spinner=False)
def load_pipeline(model_name):
    with st.spinner('Loading model (this might take a while)...'):
        toxicity_pipeline = pipeline(
            'text-classification',
            model=model_name,
            tokenizer=model_name)
        cls_explainer = SequenceClassificationExplainer(
            toxicity_pipeline.model,
            toxicity_pipeline.tokenizer)
    return toxicity_pipeline, cls_explainer


# Auxiliary functions
def format_explainer_html(html_string):
    """Extract tokens with attribution-based background color."""
    inside_token_prefix = '##'
    soup = BeautifulSoup(html_string, 'html.parser')
    p = soup.new_tag('p',
        attrs={'style': 'color: black; background-color: white;'})
    # Select token elements and remove model specific tokens
    current_word = None
    for token in soup.find_all('td')[-1].find_all('mark')[1:-1]:
        text = token.font.text.strip()
        if text.startswith(inside_token_prefix):
            text = text[len(inside_token_prefix):]
        else:
            # Create a new span for each word (sequence of sub-tokens)
            if current_word is not None:
                p.append(current_word)
                p.append(' ')
            current_word = soup.new_tag('span')
        token.string = text
        token.attrs['style'] = f"{token.attrs['style']}; padding: 0.2em 0em;"
        current_word.append(token)

    # Add last word
    p.append(current_word)

    # Add left and right-padding to each word
    for span in p.find_all('span'):
        span.find_all('mark')[0].attrs['style'] = (
            f"{span.find_all('mark')[0].attrs['style']}; padding-left: 0.2em;")
        span.find_all('mark')[-1].attrs['style'] = (
            f"{span.find_all('mark')[-1].attrs['style']}; padding-right: 0.2em;")

    return p

def list_all_article_names() -> list:
    filenames = []
    for file in os.listdir('./sample-articles/'):
        if file.endswith('.txt'):
            filenames.append(file.replace('.txt', ''))
    return filenames

def fetch_article_contents(filename: str) -> AnyStr:
    with open(f'./sample-articles/{filename.lower()}.txt', 'r') as f:
        data = f.read()
    return data

def fetch_summary_contents(filename: str) -> AnyStr:
    with open(f'./sample-summaries/{filename.lower()}.txt', 'r') as f:
        data = f.read()
    return data

def classify_comment(comment, selected_model):
    """Classify the given comment and augment with additional information."""
    toxicity_pipeline, cls_explainer = load_pipeline(selected_model)
    result = toxicity_pipeline(comment)[0]
    result['model_name'] = selected_model

    # Add explanation
    result['word_attribution'] = cls_explainer(comment, class_name="non-toxic")
    result['visualitsation_html'] = cls_explainer.visualize()._repr_html_()
    result['tokens_with_background'] = format_explainer_html(
        result['visualitsation_html'])

    # Choose emoji reaction
    label, score = result['label'], result['score']
    if label == 'toxic' and score > 0.1:
        emoji = random.choice(potty_mouth_emojis)
    elif label in ['non_toxic', 'non-toxic'] and score > 0.1:
        emoji = random.choice(regular_emojis)
    else:
        emoji = random.choice(undecided_emojis)
    result.update({'text': comment, 'emoji': emoji})

    # Add result to session
    st.session_state.results.append(result)


# Start session
if 'results' not in st.session_state:
    st.session_state.results = []

# Page
# st.title('🀬 Dutch Toxic Comment Detection')
# st.markdown("""This demo showcases two Dutch toxic comment detection models.""")
#
# # Introduction
# st.markdown(f"""Both models were trained using a sequence classification task on a translated [Jigsaw Toxicity dataset](https://www.kaggle.com/c/jigsaw-toxic-comment-classification-challenge) which contains toxic online comments.
#     The first model is a fine-tuned multilingual [DistilBERT](https://huggingface.co/distilbert-base-multilingual-cased) model whereas the second is a fine-tuned Dutch RoBERTa-based model called [RobBERT](https://huggingface.co/pdelobelle/robbert-v2-dutch-base).""")
# st.markdown(f"""For a more comprehensive overview of the models check out their model card on πŸ€— Model Hub: [distilbert-base-dutch-toxic-comments]({model_names_to_URLs['ml6team/distilbert-base-dutch-cased-toxic-comments']}) and [RobBERT-dutch-base-toxic-comments]({model_names_to_URLs['ml6team/robbert-dutch-base-toxic-comments']}).
# """)
# st.markdown("""Enter a comment that you want to classify below. The model will determine the probability that it is toxic and highlights how much each token contributes to its decision:
#     <font color="black">
#         <span style="background-color: rgb(250, 219, 219); opacity: 1;">r</span><span style="background-color: rgb(244, 179, 179); opacity: 1;">e</span><span style="background-color: rgb(238, 135, 135); opacity: 1;">d</span>
#     </font>
#     tokens indicate toxicity whereas
#     <font color="black">
#     <span style="background-color: rgb(224, 251, 224); opacity: 1;">g</span><span style="background-color: rgb(197, 247, 197); opacity: 1;">re</span><span style="background-color: rgb(121, 236, 121); opacity: 1;">en</span>
#     </font> tokens indicate the opposite.
#
# Try it yourself! πŸ‘‡""",
#     unsafe_allow_html=True)


# Demo
# with st.form("dutch-toxic-comment-detection-input", clear_on_submit=True):
#     selected_model = st.selectbox('Select a model:', model_names_to_URLs.keys(),
#     )#index=0, format_func=special_internal_function, key=None, help=None, on_change=None, args=None, kwargs=None, *, disabled=False)
#     text = st.text_area(
#         label='Enter the comment you want to classify below (in Dutch):')
#     _, rightmost_col = st.columns([6,1])
#     submitted = rightmost_col.form_submit_button("Classify",
#                                                  help="Classify comment")

with st.form("article-input"):
    # TODO: should probably set a minimum length of article or something
    selected_article = st.selectbox('Select an article or provide your own:', list_all_article_names(),
    )#index=0, format_func=special_internal_function, key=None, help=None, on_change=None, args=None, kwargs=None, *, disabled=False)
    st.session_state.article_text = fetch_article_contents(selected_article)
    article_text = st.text_area(
        label='Enter the comment you want to classify below (in Dutch):',
        value = st.session_state.article_text)
    _, rightmost_col = st.columns([6,1])
    get_summary = rightmost_col.form_submit_button("Generate summary",
                                                 help="Generate summary for the given article text")


def display_summary(article_name: str):
    st.subheader("GENERATED SUMMARY")
    st.markdown("######")
    summary_content = fetch_summary_contents(article_name)
    nlp = spacy.load('en_core_web_sm')
    doc = nlp(summary_content)
    html = displacy.render(doc, style="ent")
    html = html.replace("\n", " ")
    HTML_WRAPPER = """<div style="overflow-x: auto; border: 1px solid #e6e9ef; border-radius: 0.25rem; padding: 1rem; margin-bottom: 2.5rem">{}</div>"""
    st.write(HTML_WRAPPER.format(html), unsafe_allow_html=True)
    st.markdown(summary_content)

# Listener
if get_summary:
    if article_text:
        with st.spinner('Generating summary...'):
            #classify_comment(article_text, selected_model)
            display_summary(selected_article)
    else:
        st.error('**Error**: No comment to classify. Please provide a comment.')

# Results
if 'results' in st.session_state and st.session_state.results:
    first = True
    for result in st.session_state.results[::-1]:
        if not first:
            st.markdown("---")
        st.markdown(f"Text:\n> {result['text']}")
        col_1, col_2, col_3 = st.columns([1,2,2])
        col_1.metric(label='', value=f"{result['emoji']}")
        col_2.metric(label='Label', value=f"{result['label']}")
        col_3.metric(label='Score', value=f"{result['score']:.3f}")
        st.markdown(f"Token Attribution:\n{result['tokens_with_background']}",
         unsafe_allow_html=True)
        st.caption(f"Model: {result['model_name']}")
        first = False