DEV Community

Ahmad Fauzan
Ahmad Fauzan

Posted on

Building "PitchPassion AI": Transforming Football Passion into Data with Google AI

#devchallenge #weekendchallenge

This is a submission for Weekend Challenge: Passion Edition

What I Built

I built PitchPassion AI, a web application that transforms text-based football match narratives into informative player performance visualizations using AI. The goal is to help fans quickly understand statistics without having to read lengthy reports.

Demo

I will include a video demo link below.
Video Demo: Video File

Code

  1. Back-End: Repository Back End
  2. Front-End: Repository Front End

How I Built It

  • Tech Stack: React for front end, Flask for back end, Google Gemini API.
  • AI Integration: The biggest challenge in sports data analysis is the unstructured nature of the data sources. Match reports typically consist of lengthy paragraphs written by journalists or narratives from spectators. While humans can easily read them, computers (databases) cannot directly process such text into charts or graphs.

This is where I utilize the Google Gemini API as a data extraction engine:

  1. Natural Language Processing (NLP): Gemini reads the match narrative to comprehend the context—identifying the players involved, the actions performed (goals, assists, tackles), and the quality of those actions.

  2. Structured Transformation: I provide specific instructions (prompts) to the model so that it not only understands the text but also transforms it into a JSON format.

  3. Data Cleaning: Since AI sometimes includes conversational text in its output, I implemented middleware in Flask to clean the response and ensure that only pure JSON data enters my application.

  • Problem solving:
  1. API Stability Issues (Error 503) During development, I frequently encountered 503 Unavailable responses from the Google Gemini API. This was caused by traffic spikes on the server side.
  • Solution: I didn't let the application simply fail. I implemented a retry strategy in my Flask backend. If the API failed due to server load, the system would automatically wait for 2 seconds and retry up to three times before returning an error message to the user. This made the application feel more robust and professional.

Inconsistent Data Formatting
Another major challenge was the AI's tendency to be "too chatty." Instead of providing pure JSON data, the AI ​​would often include introductory text like "Here is the data you requested..." This caused my frontend application to fail when parsing the data.

  • Solution: I implemented two layers of protection:

  • Prompt Engineering: I reinforced the system instructions with the command: "Provide only the JSON, without any additional explanation."

  • Backend Sanitization: I added a cleaning function in Python using replace() and strip() to remove Markdown characters (such as '''json) before passing the data to json.loads().

Prize Categories

I am submitting this project for the Best use of Google AI category.

PitchPassion AI relies entirely on the Google Gemini API to bridge the gap between unstructured sports narratives and structured data visualization. By leveraging Gemini's natural language processing capabilities, the application is able to extract player names and performance scores from messy, human-written match reports in real-time. Without the sophisticated data extraction power of Google AI, transforming narrative content into the dynamic charts displayed in this app would not have been possible.

Top comments (0)