yamilsteven commited on
Commit
a226f50
·
1 Parent(s): e30aaa7

Revamp styles proposal

Browse files
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: #2C2C2C; 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,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: #3A3B3C; 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,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: #FFFFFF; color: #333333; font-family: Arial, sans-serif; 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: #000000;">{team_display_name}</h3>
58
- <p style="font-size: 15px; color: #333333; margin-bottom: 15px;">{city_display}</p>
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(scale=1):
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
- llm_response = gr.Textbox(label="LLM Response", lines=15)
150
- ots_box = gr.HTML(
151
- label="OTS",
152
- value=state.value.ots_content,
153
- )
 
 
154
 
155
- with gr.Row(scale=1):
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=2):
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
- submit_btn = gr.Button("Submit", variant="primary", scale=0)
171
-
172
- clear_state_btn = gr.Button("Clear State", variant="stop", scale=1)
173
 
174
- with gr.Row(visible=show_state, variant="compact", scale=1):
175
  count_disp = gr.Number(
176
  label="Count",
177
  interactive=False,
178
  value=state.value.count,
179
- scale=0,
180
  )
181
  persona_disp = gr.Text(
182
  label="Persona",
183
  interactive=False,
184
  value=state.value.persona,
185
- scale=0
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=1
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=1
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