Spaces:
No application file
No application file
Commit
·
a226f50
1
Parent(s):
e30aaa7
Revamp styles proposal
Browse files- api/event_handlers/gradio_handler.py +5 -5
- api/server_gradio.py +26 -22
api/event_handlers/gradio_handler.py
CHANGED
@@ -8,7 +8,7 @@ from langchain_core.messages import BaseMessage
|
|
8 |
TEAM_LOGO_BASE_URL = "https://huggingface.co/spaces/yamilsteven/ifx-assets/resolve/main/assets/team_logos/"
|
9 |
|
10 |
image_base = """
|
11 |
-
<div style="background-color: #
|
12 |
<div style="margin-right: 25px;">
|
13 |
<img src="https://huggingface.co/spaces/ryanbalch/IFX-huge-league/resolve/main/assets/profiles/players_pics/{filename}" alt="{filename} Pic" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #444;">
|
14 |
</div>
|
@@ -23,7 +23,7 @@ image_base = """
|
|
23 |
"""
|
24 |
|
25 |
game_card_html = """
|
26 |
-
<div style="text-align: center; padding: 20px; margin: 10px 0; border-radius: 8px; background-color: #
|
27 |
<h3 style="margin-top: 0; margin-bottom: 10px; font-size: 20px; color: #E0E0E0;">{game_title}</h3>
|
28 |
<div style="display: flex; justify-content: space-around; align-items: center; margin-bottom: 15px;">
|
29 |
<div style="text-align: center; width: 40%;">
|
@@ -52,10 +52,10 @@ game_card_html = """
|
|
52 |
"""
|
53 |
|
54 |
team_info_card_html = """
|
55 |
-
<div style="text-align: center; padding: 50px; margin:10px 0; border-radius: 8px; background-color: #
|
56 |
<img src="{team_logo_url}" alt="{team_display_name} Logo" style="max-width: 80px; max-height: 80px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; border-radius: 5px;" onerror="this.onerror=null; this.src='{default_logo_url}';">
|
57 |
-
<h3 style="margin-top: 0; margin-bottom: 8px; font-size: 22px; color: #
|
58 |
-
<p style="font-size: 15px; color: #
|
59 |
{team_page_cta_html}
|
60 |
</div>
|
61 |
"""
|
|
|
8 |
TEAM_LOGO_BASE_URL = "https://huggingface.co/spaces/yamilsteven/ifx-assets/resolve/main/assets/team_logos/"
|
9 |
|
10 |
image_base = """
|
11 |
+
<div style="background-color: #1f2937; border-radius: 10px; padding: 25px; display: flex; align-items: center; width: 450px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);">
|
12 |
<div style="margin-right: 25px;">
|
13 |
<img src="https://huggingface.co/spaces/ryanbalch/IFX-huge-league/resolve/main/assets/profiles/players_pics/{filename}" alt="{filename} Pic" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #444;">
|
14 |
</div>
|
|
|
23 |
"""
|
24 |
|
25 |
game_card_html = """
|
26 |
+
<div style="text-align: center; padding: 20px; margin: 10px 0; border-radius: 8px; background-color: #1f2937; color: #FFFFFF; font-family: Arial, sans-serif; max-width: 500px; margin-left: auto; margin-right: auto;">
|
27 |
<h3 style="margin-top: 0; margin-bottom: 10px; font-size: 20px; color: #E0E0E0;">{game_title}</h3>
|
28 |
<div style="display: flex; justify-content: space-around; align-items: center; margin-bottom: 15px;">
|
29 |
<div style="text-align: center; width: 40%;">
|
|
|
52 |
"""
|
53 |
|
54 |
team_info_card_html = """
|
55 |
+
<div style="text-align: center; padding: 50px; margin:10px 0; border-radius: 8px; background-color: #1f2937; color: #333333; max-width: 450px; margin-left: auto; margin-right: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
|
56 |
<img src="{team_logo_url}" alt="{team_display_name} Logo" style="max-width: 80px; max-height: 80px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; border-radius: 5px;" onerror="this.onerror=null; this.src='{default_logo_url}';">
|
57 |
+
<h3 style="margin-top: 0; margin-bottom: 8px; font-size: 22px; color: #FFFFFF;">{team_display_name}</h3>
|
58 |
+
<p style="font-size: 15px; color: #FFFFFF; margin-bottom: 15px;">{city_display}</p>
|
59 |
{team_page_cta_html}
|
60 |
</div>
|
61 |
"""
|
api/server_gradio.py
CHANGED
@@ -125,76 +125,80 @@ def submit_helper(state, handler, user_query):
|
|
125 |
|
126 |
### Interface ###
|
127 |
|
128 |
-
with gr.Blocks() as demo:
|
129 |
state = gr.State(AppState())
|
130 |
handler = GradioEventHandler()
|
131 |
|
132 |
gr.Markdown("# Huge League Soccer")
|
133 |
-
with gr.Row(
|
134 |
email = gr.Textbox(label="Email",
|
135 |
type="email",
|
136 |
interactive=True,
|
137 |
lines=1,
|
138 |
-
value=state.value.email
|
|
|
139 |
first_name = gr.Textbox(label="First Name",
|
140 |
lines=1,
|
141 |
interactive=True,
|
142 |
-
value=state.value.first_name
|
|
|
143 |
last_name = gr.Textbox(label="Last Name",
|
144 |
lines=1,
|
145 |
interactive=True,
|
146 |
-
value=state.value.last_name
|
|
|
147 |
|
148 |
with gr.Row():
|
149 |
-
|
150 |
-
|
151 |
-
|
152 |
-
|
153 |
-
|
|
|
|
|
154 |
|
155 |
-
with gr.Row(
|
156 |
-
with gr.Column(scale=1):
|
157 |
persona = gr.Radio(
|
158 |
choices=["Casual Fan", "Super Fan"],
|
159 |
value="Casual Fan",
|
160 |
label="Select Persona",
|
161 |
)
|
162 |
-
with gr.Column(scale=
|
163 |
user_query = gr.Textbox(
|
164 |
label="User Query",
|
165 |
placeholder="Ask me about Huge League Soccer...",
|
166 |
-
# lines=3,
|
167 |
autofocus=True,
|
168 |
show_label=False,
|
169 |
)
|
170 |
-
|
171 |
-
|
172 |
-
|
173 |
|
174 |
-
with gr.Row(visible=show_state, variant="compact"
|
175 |
count_disp = gr.Number(
|
176 |
label="Count",
|
177 |
interactive=False,
|
178 |
value=state.value.count,
|
179 |
-
scale=
|
180 |
)
|
181 |
persona_disp = gr.Text(
|
182 |
label="Persona",
|
183 |
interactive=False,
|
184 |
value=state.value.persona,
|
185 |
-
scale=
|
186 |
)
|
187 |
zep_session_id_disp = gr.Text(
|
188 |
label="Zep Session ID",
|
189 |
interactive=False,
|
190 |
value=state.value.zep_session_id,
|
191 |
-
scale=
|
192 |
)
|
193 |
freeplay_session_id_disp = gr.Text(
|
194 |
label="Freeplay Session ID",
|
195 |
interactive=False,
|
196 |
value=state.value.freeplay_session_id,
|
197 |
-
scale=
|
198 |
)
|
199 |
|
200 |
### Events
|
|
|
125 |
|
126 |
### Interface ###
|
127 |
|
128 |
+
with gr.Blocks(theme="soft") as demo:
|
129 |
state = gr.State(AppState())
|
130 |
handler = GradioEventHandler()
|
131 |
|
132 |
gr.Markdown("# Huge League Soccer")
|
133 |
+
with gr.Row():
|
134 |
email = gr.Textbox(label="Email",
|
135 |
type="email",
|
136 |
interactive=True,
|
137 |
lines=1,
|
138 |
+
value=state.value.email,
|
139 |
+
scale=1)
|
140 |
first_name = gr.Textbox(label="First Name",
|
141 |
lines=1,
|
142 |
interactive=True,
|
143 |
+
value=state.value.first_name,
|
144 |
+
scale=1)
|
145 |
last_name = gr.Textbox(label="Last Name",
|
146 |
lines=1,
|
147 |
interactive=True,
|
148 |
+
value=state.value.last_name,
|
149 |
+
scale=1)
|
150 |
|
151 |
with gr.Row():
|
152 |
+
with gr.Column(scale=3):
|
153 |
+
llm_response = gr.Textbox(label="LLM Response", lines=15)
|
154 |
+
with gr.Column(scale=2):
|
155 |
+
ots_box = gr.HTML(
|
156 |
+
label="OTS",
|
157 |
+
value=state.value.ots_content,
|
158 |
+
)
|
159 |
|
160 |
+
with gr.Row():
|
161 |
+
with gr.Column(scale=1, min_width=200):
|
162 |
persona = gr.Radio(
|
163 |
choices=["Casual Fan", "Super Fan"],
|
164 |
value="Casual Fan",
|
165 |
label="Select Persona",
|
166 |
)
|
167 |
+
with gr.Column(scale=3):
|
168 |
user_query = gr.Textbox(
|
169 |
label="User Query",
|
170 |
placeholder="Ask me about Huge League Soccer...",
|
|
|
171 |
autofocus=True,
|
172 |
show_label=False,
|
173 |
)
|
174 |
+
with gr.Row():
|
175 |
+
submit_btn = gr.Button("Submit", variant="primary", scale=1)
|
176 |
+
clear_state_btn = gr.Button("Clear State", scale=1)
|
177 |
|
178 |
+
with gr.Row(visible=show_state, variant="compact"):
|
179 |
count_disp = gr.Number(
|
180 |
label="Count",
|
181 |
interactive=False,
|
182 |
value=state.value.count,
|
183 |
+
scale=1,
|
184 |
)
|
185 |
persona_disp = gr.Text(
|
186 |
label="Persona",
|
187 |
interactive=False,
|
188 |
value=state.value.persona,
|
189 |
+
scale=1
|
190 |
)
|
191 |
zep_session_id_disp = gr.Text(
|
192 |
label="Zep Session ID",
|
193 |
interactive=False,
|
194 |
value=state.value.zep_session_id,
|
195 |
+
scale=2
|
196 |
)
|
197 |
freeplay_session_id_disp = gr.Text(
|
198 |
label="Freeplay Session ID",
|
199 |
interactive=False,
|
200 |
value=state.value.freeplay_session_id,
|
201 |
+
scale=2
|
202 |
)
|
203 |
|
204 |
### Events
|