一通りの表示を作った

app.py

@@ -1,7 +1,10 @@
 import random
 
+import numpy as np
 import streamlit as st
 
+from visualization import heatmap, html_hext
+
 ID2CAT = {
     0: "マイクロアグレッションではない",
     1: "マイクロアグレッションである",
@@ -20,7 +23,6 @@ provide_by = """提供元: オールマイノリティプロジェクト
 [https://all-minorities.com/](https://all-minorities.com/)
 """
 
-
 st.title("マイクロアグレッション判別モデル")
 st.markdown(explanation_text)
 
@@ -33,8 +35,15 @@ if st.button("判定"):
     else:
         st.markdown(attention_text)
         st.divider()
-        random_id = random.randint(0, 1)
+        random_id = random.randint(0, 1)  # TODO: make dummy data
         st.markdown(f"判定結果: **{ID2CAT[random_id]}**")
-        st.divider()
+        if random_id == 1:
+            rng = np.random.default_rng()  # TODO: make dummy data
+            html_hext_result = html_hext(((f"単語{i}", rng.random()) for i in range(7)))  # TODO: make dummy data
+            st.markdown(html_hext_result, unsafe_allow_html=True)
+            data = rng.random((10, 1)).reshape(-1, 1)  # TODO: make dummy data
+            st.plotly_chart(heatmap(data), use_container_width=True)
+
 
-st.markdown(provide_by)
+st.divider()
+st.markdown(provide_by)

requirements.txt

@@ -1 +1,4 @@
 streamlit
+numpy
+pandas
+plotly

visualization.py

@@ -0,0 +1,31 @@
+from typing import Iterable
+
+import numpy as np
+import plotly.express as px  # type: ignore
+
+
+def highlight(word: str, attn: float) -> str:
+    color = "#%02X%02X%02X" % (255, int(255 * (1 - attn)), int(255 * (1 - attn)))
+    return f'<span style="background-color: {color}">{word}</span>'
+
+
+def html_hext(words_attn: Iterable[tuple[str, float]]) -> str:
+    return " ".join(highlight(word, attn) for word, attn in words_attn)
+
+
+def heatmap(data: np.ndarray):
+    y_labels = [
+        "嘲笑や特性を理解されない",
+        "特性や能力への攻撃",
+        "学校や職場で受け入れられない",
+        "特性をおかしいとみなされる",
+        "障害への差別や苦悩をなかったことにされる",
+        "うまくコミュニケーションがとれない",
+        "障害について理解されない",
+        "侮蔑される，認められない",
+        "周囲の理解不足",
+        "障害をなかったことにされる，責められる",
+    ]
+    fig = px.imshow(data, labels=dict(x="判定", y="名称"), y=y_labels)
+    fig.update_layout(coloraxis_colorbar=dict(title="得点"))
+    return fig