add diff view options for streamlit

Author: davidkhala

visualization/app/streamlit/deepdiff_json.py

@@ -0,0 +1,20 @@
+# uv add deepdiff --active
+# uv run --active streamlit run .\app\streamlit\deepdiff_json.py
+import streamlit as st
+from deepdiff import DeepDiff
+
+master_index = 0
+
+jsons = [{"name": "Alice", "age": 25}, {"name": "Bob", "age": 26}, {"name": "Alice", "age": 27}]
+cols = st.columns(len(jsons))
+
+for i, col in enumerate(cols):
+    _json = jsons[i]
+    with col:
+        st.subheader(_json['name'])
+        if st.button(f"按钮 {i + 1}", key=f"btn_{i}"):
+            st.write(f"你点击了按钮 {i + 1}")
+        if i == master_index:
+            st.json(_json)
+        else:
+            st.json(DeepDiff(jsons[master_index], _json, verbose_level=2))

visualization/app/streamlit/native_git.py

@@ -0,0 +1,13 @@
+# uvx streamlit run ./app/streamlit/<this>.py
+import streamlit as st
+import difflib
+
+text1 = st.text_area("原始文本")
+text2 = st.text_area("修改后文本")
+
+diff_lines = difflib.unified_diff(
+    text1.splitlines(), text2.splitlines(),
+    fromfile='原始', tofile='修改后', lineterm=''
+)
+# git bash style
+st.markdown("```diff\n" + "\n".join(diff_lines) + "\n```")

visualization/app/streamlit/native_table.py

@@ -0,0 +1,25 @@
+import streamlit as st
+import difflib
+
+text1 = st.text_area("原始文本", "This is the original text.\nIt has two lines.")
+text2 = st.text_area("修改后文本", "This is the modified text.\nIt has three lines.")
+
+diff = difflib.HtmlDiff().make_table(
+    text1.splitlines(), text2.splitlines(),
+    fromdesc='原始', todesc='修改后',
+    context=True, numlines=2
+)
+
+styled_html = f"""
+<style>
+table.diff {{ background-color: white; color: black; font-family: monospace; }}
+td.diff_header {{ background-color: #e0e0e0; }}
+td.diff_next {{ background-color: #f0f0f0; }}
+td.diff_add {{ background-color: #aaffaa; }}
+td.diff_chg {{ background-color: #ffffaa; }}
+td.diff_sub {{ background-color: #ffaaaa; }}
+</style>
+{diff}
+"""
+# No comparison, just list out
+st.components.v1.html(styled_html, scrolling=True)