Merge pull request #7 from awarefy/terada/show-result

画面の完成 #2

README.md

@@ -17,3 +17,40 @@ license: unknown
 - Python 3.11
 - Streamlit 1.33
 
+
+### 仮想環境
+
+venvを用いてインストールを行います。
+venvは、Pythonの標準ライブラリです。
+
+https://docs.python.org/ja/3/tutorial/venv.html
+
+
+```sh
+% cd (任意のフォルダ)
+% python3 -m venv venv
+% source venv/bin/activate
+```
+
+### インストール
+
+GitHubからパッケージをダウンロードしてインストール
+
+```sh
+(venv) % git clone https://github.com/awarefy/amp.git
+(venv) % cd amp
+(venv) % pip install -r requirements.txt -c constraints.txt
+```
+
+## 起動方法
+
+```
+(venv) % streamlit run app.py
+```
+
+## 表示確認
+
+起動すると、デフォルトブラウザが立ち上がり表示確認ができる。
+
+もし、ブラウザが立ち上がらない場合は、コンソールに表示されるポート付URLをブラウザで呼び出す。
+

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