Spaces:
Runtime error
Runtime error
File size: 6,442 Bytes
06cb2a3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
import gradio as gr
import html
def create_player_card_component(player_data=None):
"""
Creates a Gradio HTML component to display player information based on test.ipynb structure.
Args:
player_data (dict, optional): Dictionary containing player data.
Expected keys: 'Name', 'Position', 'Jersey_number',
'headshot_url', 'College', 'Height', 'Weight',
'Years_in_nfl', 'instagram_url'. Defaults to None.
Returns:
gr.HTML: A Gradio HTML component displaying the player card, or empty if no data.
"""
print("--- Entered create_player_card_component ---") # DEBUG LOG
if not player_data or not isinstance(player_data, dict):
print("Component received no player data, returning empty.") # DEBUG LOG
return gr.HTML("")
print(f"Component received player_data: {player_data}") # DEBUG LOG
try:
# Extract data with defaults, using html.escape
name = html.escape(player_data.get('Name', 'N/A'))
position = html.escape(player_data.get('Position', ''))
number = html.escape(str(player_data.get('Jersey_number', '')))
headshot_url = html.escape(player_data.get('headshot_url', ''))
college = html.escape(player_data.get('College', 'N/A'))
height = html.escape(player_data.get('Height', 'N/A'))
weight = html.escape(player_data.get('Weight', 'N/A'))
exp = html.escape(str(player_data.get('Years_in_nfl', 'N/A')))
instagram_url = html.escape(player_data.get('instagram_url', ''))
# CSS from test.ipynb, adapted slightly for theme integration
css = """
<style>
.player-card-container {
/* Add a container to allow for centering or specific placement */
padding: 10px 0;
}
.player-card {
background-color: #222222; /* Dark background */
border: 1px solid #333333;
margin: 0.5rem auto; /* Center card */
padding: 1rem;
border-radius: 8px;
width: 320px; /* Slightly wider */
box-sizing: border-box;
font-family: 'Arial', sans-serif;
color: #E6E6E6; /* Light text */
overflow: hidden; /* Clear float */
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.player-photo {
width: 80px;
height: 80px;
background-color: #444; /* Darker placeholder */
float: left;
margin-right: 1rem;
border-radius: 50%; /* Make it round */
object-fit: cover; /* Cover ensures image fills circle */
border: 2px solid #B3995D; /* Gold accent */
}
.card-content {
float: left;
width: calc(100% - 100px); /* Adjust width considering photo and margin */
}
.card-content h4 {
margin: 0 0 0.5rem 0;
font-size: 1.2em;
color: #FFFFFF; /* White name */
font-weight: bold;
}
.card-content ul {
margin: 0.25rem 0;
padding-left: 1.2rem;
list-style: none; /* Remove default bullets */
font-size: 0.9em;
color: #B0B0B0;
}
.card-content ul li {
margin-bottom: 4px; /* Space between list items */
}
.player-social-link {
margin-top: 10px;
clear: both; /* Ensure it appears below floated elements if needed */
}
.player-social-link a {
display: inline-block;
text-decoration: none;
color: #FFFFFF;
background-color: #AA0000; /* 49ers Red */
padding: 5px 10px;
border-radius: 4px;
font-size: 0.8em;
transition: background-color 0.2s ease;
}
.player-social-link a:hover {
background-color: #B3995D; /* Gold accent on hover */
}
</style>
"""
# HTML structure based on test.ipynb
# Using an outer container for better layout control in Gradio
html_content = f"""
{css}
<div class="player-card-container">
<div class="player-card">
<img src="{headshot_url}" class="player-photo" alt="{name} Headshot" onerror="this.style.display='none'" />
<div class="card-content">
<h4>{name} {f'- #{number}' if number else ''} {f'({position})' if position else ''}</h4>
<ul>
<li>Ht: {height} | Wt: {weight} lbs</li>
<li>College: {college}</li>
<li>Experience: {exp} Years</li>
</ul>
"""
# Add Instagram link conditionally
if instagram_url:
html_content += f"""
<div class="player-social-link">
<a href="{instagram_url}" target="_blank">Instagram Profile</a>
</div>
"""
html_content += """
</div>
</div>
</div>
"""
print(f"Component generated HTML (first 100 chars): {html_content[:100]}...") # DEBUG LOG
return gr.HTML(html_content)
except Exception as e:
print(f"Error creating player card component: {str(e)}")
# Return a simple error message component
return gr.HTML("<div style='padding: 1rem; color: red;'>⚠️ Error loading player card.</div>")
# Example Usage (for testing component independently if needed)
# if __name__ == '__main__':
# example_data = {
# 'Name': 'Brock Purdy',
# 'headshot_url': 'https://a.espncdn.com/i/headshots/nfl/players/full/4433216.png', # Example URL
# 'instagram_url': 'https://www.instagram.com/brock.purdy13/',
# 'Position': 'QB',
# 'Number': '13'
# }
# component = create_player_card_component(example_data)
#
# with gr.Blocks() as demo:
# gr.Markdown("## Player Card Example")
# demo.add(component)
#
# demo.launch() |