Hugging Face's logo

Spaces:
Syntrex
/
2026_MLB_Model
Sleeping

App Files
Syntrex commited on
Commit
7725cc4
·
verified ·
1 Parent(s): 3895ea4

Update visualization/edge_strip.py

Browse files
Files changed (1) hide show
  1. visualization/edge_strip.py +77 -65
visualization/edge_strip.py CHANGED
@@ -2,7 +2,7 @@ from __future__ import annotations
2
 
3
  from typing import Any
4
 
5
- import streamlit as st
6
 
7
 
8
  def _fmt_odds(value: Any) -> str:
@@ -26,76 +26,88 @@ def render_live_edge_strip(edge: dict[str, Any]) -> None:
26
  batter_name = edge.get("batter_name", "") or "Current Batter"
27
 
28
  html = f"""
29
- <div style="
30
- margin-top:-4px;
31
- margin-bottom:14px;
32
- background: rgba(255,255,255,0.03);
33
- border: 1px solid rgba(148,163,184,0.14);
34
- border-radius: 16px;
35
- padding: 12px;
36
- ">
37
- <div style="color:#94a3b8;font-size:12px;font-weight:700;margin-bottom:8px;">
38
- LIVE EDGE STRIP • {batter_name}
39
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
 
41
- <div style="
42
- display:grid;
43
- grid-template-columns: 1.2fr 0.8fr 0.8fr 0.7fr;
44
- gap:8px;
45
- color:#94a3b8;
46
- font-size:11px;
47
- font-weight:700;
48
- margin-bottom:6px;
49
- ">
50
- <div>MARKET</div>
51
- <div>FAIR</div>
52
- <div>BOOK</div>
53
- <div>EDGE</div>
54
  </div>
55
 
56
- <div style="
57
- display:grid;
58
- grid-template-columns: 1.2fr 0.8fr 0.8fr 0.7fr;
59
- gap:8px;
60
- color:#e2e8f0;
61
- font-size:13px;
62
- font-weight:700;
63
- margin-bottom:4px;
64
- ">
65
- <div>Hit</div>
66
- <div>{_fmt_odds(edge.get("fair_hit_odds"))}</div>
67
- <div>{_fmt_odds(edge.get("book_hit_odds"))}</div>
68
- <div>{_fmt_edge(edge.get("hit_edge"))}</div>
69
  </div>
70
 
71
- <div style="
72
- display:grid;
73
- grid-template-columns: 1.2fr 0.8fr 0.8fr 0.7fr;
74
- gap:8px;
75
- color:#e2e8f0;
76
- font-size:13px;
77
- font-weight:700;
78
- margin-bottom:4px;
79
- ">
80
- <div>HR</div>
81
- <div>{_fmt_odds(edge.get("fair_hr_odds"))}</div>
82
- <div>{_fmt_odds(edge.get("book_hr_odds"))}</div>
83
- <div>{_fmt_edge(edge.get("hr_edge"))}</div>
84
  </div>
85
 
86
- <div style="
87
- display:grid;
88
- grid-template-columns: 1.2fr 0.8fr 0.8fr 0.7fr;
89
- gap:8px;
90
- color:#e2e8f0;
91
- font-size:13px;
92
- font-weight:700;
93
- ">
94
- <div>2+ TB</div>
95
- <div>{_fmt_odds(edge.get("fair_tb2p_odds"))}</div>
96
- <div>{_fmt_odds(edge.get("book_tb2p_odds"))}</div>
97
- <div>{_fmt_edge(edge.get("tb2p_edge"))}</div>
98
  </div>
99
- </div>
 
 
100
  """
101
- st.markdown(html, unsafe_allow_html=True)
 
2
 
3
  from typing import Any
4
 
5
+ import streamlit.components.v1 as components
6
 
7
 
8
  def _fmt_odds(value: Any) -> str:
 
26
  batter_name = edge.get("batter_name", "") or "Current Batter"
27
 
28
  html = f"""
29
+ <!DOCTYPE html>
30
+ <html>
31
+ <head>
32
+ <meta charset="utf-8" />
33
+ <style>
34
+ body {{
35
+ margin: 0;
36
+ padding: 0;
37
+ background: transparent;
38
+ font-family: Arial, sans-serif;
39
+ }}
40
+ .edge-strip {{
41
+ margin-top: -4px;
42
+ margin-bottom: 14px;
43
+ background: rgba(255,255,255,0.03);
44
+ border: 1px solid rgba(148,163,184,0.14);
45
+ border-radius: 16px;
46
+ padding: 12px;
47
+ box-sizing: border-box;
48
+ color: #e2e8f0;
49
+ }}
50
+ .title {{
51
+ color: #94a3b8;
52
+ font-size: 12px;
53
+ font-weight: 700;
54
+ margin-bottom: 8px;
55
+ }}
56
+ .grid-header, .grid-row {{
57
+ display: grid;
58
+ grid-template-columns: 1.2fr 0.8fr 0.8fr 0.7fr;
59
+ gap: 8px;
60
+ }}
61
+ .grid-header {{
62
+ color: #94a3b8;
63
+ font-size: 11px;
64
+ font-weight: 700;
65
+ margin-bottom: 6px;
66
+ }}
67
+ .grid-row {{
68
+ color: #e2e8f0;
69
+ font-size: 13px;
70
+ font-weight: 700;
71
+ margin-bottom: 4px;
72
+ }}
73
+ .grid-row.last {{
74
+ margin-bottom: 0;
75
+ }}
76
+ </style>
77
+ </head>
78
+ <body>
79
+ <div class="edge-strip">
80
+ <div class="title">LIVE EDGE STRIP • {batter_name}</div>
81
 
82
+ <div class="grid-header">
83
+ <div>MARKET</div>
84
+ <div>FAIR</div>
85
+ <div>BOOK</div>
86
+ <div>EDGE</div>
 
 
 
 
 
 
 
 
87
  </div>
88
 
89
+ <div class="grid-row">
90
+ <div>Hit</div>
91
+ <div>{_fmt_odds(edge.get("fair_hit_odds"))}</div>
92
+ <div>{_fmt_odds(edge.get("book_hit_odds"))}</div>
93
+ <div>{_fmt_edge(edge.get("hit_edge"))}</div>
 
 
 
 
 
 
 
 
94
  </div>
95
 
96
+ <div class="grid-row">
97
+ <div>HR</div>
98
+ <div>{_fmt_odds(edge.get("fair_hr_odds"))}</div>
99
+ <div>{_fmt_odds(edge.get("book_hr_odds"))}</div>
100
+ <div>{_fmt_edge(edge.get("hr_edge"))}</div>
 
 
 
 
 
 
 
 
101
  </div>
102
 
103
+ <div class="grid-row last">
104
+ <div>2+ TB</div>
105
+ <div>{_fmt_odds(edge.get("fair_tb2p_odds"))}</div>
106
+ <div>{_fmt_odds(edge.get("book_tb2p_odds"))}</div>
107
+ <div>{_fmt_edge(edge.get("tb2p_edge"))}</div>
 
 
 
 
 
 
 
108
  </div>
109
+ </div>
110
+ </body>
111
+ </html>
112
  """
113
+ components.html(html, height=150, scrolling=False)