ValorAI: Making Professional Valorant E-Sports Easier

The professional Valorant scene can be difficult to keep up with, make life easier with Valor AI. Powered by Google Gemini, ValorAI takes information directly from VLR.gg to answer any question you have about the professional Valorant scene. Use ValorAI to make predictions for future match-ups, analyze player statistics, get caught up with the latest roster changes, and more. ValorAI, professional eSports your way.

Inspiration

VLR.gg is the most well-known website used for tracking the professional Valorant scene. From match results, upcoming matches, live updates, community forums, and breaking news, VLR.gg has everything a fan of professional Valorant needs. However, VLR.gg has a confusing UI and is not the most user-friendly, making it very hard for new incoming fans to keep up. Tracking player statistics, match results, and team performances can be difficult to find on VLR for any user. This very issue is what sparked the inspiration for ValorAI. The implementation of an AI chatbot to VLR that is able to answer any question based off a provided page could change everything. Predicting future match-ups to better one's chance at Valorant's Pick'ems system, analyzing individual player performance, match summaries, and much more could be easily accessible to anyone. From that, I decided to move forward with the concept of ValorAI.

What it does

ValorAI prompts the user to provide a link of any page from the VLR.gg website, then ask it any question the user needs an answer to, based off the provided page. Using Gemini API, ValorAI will process the page given by the user and provides the best answer possible. Different things you could do with ValorAI include:

• Analyze individual performances: ValorAI can analyze each player's statistics of a match and provide a detailed summary of how each player performed during a match. -Recount Matches: Because VLR provides round by round statistics, ValorAI can recount matches, providing detailed summaries that include whether a team made a comeback to if a player started to perform better in the second round.
• Predict Future Match-ups: Through the power of Google's Gemini API, ValorAI can predict future match-ups between two teams to better your chances at VLR Pick'ems.
• Summarize Articles: VLR has many different forums and long articles, give ValorAI a specific VLR forum/article and it will provide a summary to make it easier for you to keep up.

How we built it

ValorAI was built using the React framework and Google's Gemini API. React was used in order to create a presentable front end that can be easily connected to a back end, which was written using Node.js and Express. In order for ValorAI to process the user provided VLR page, the Gemini API's ability to process documents was used by converting the provided page into an HTML file for Gemini to process.

Challenges we ran into

The biggest challenge I ran into was figuring out a way to convert the provided VLR page into an HTML file for the Gemini API to process, which was eventually solved using Axios and the Node.js file system. Another challenge for me was designing the front end. I wanted to create a front end that was simple for users to use yet pleasing to look at.

Accomplishments that we're proud of

In creating this project, I am very proud that I was able to implement the Gemini API into my back end successfully, giving it the ability to scan a user provided website page. The function to scrape a website page is not implemented in the API, so being able to implement that myself through the document processing feature is the main part I am proud of. I am also extremely proud of the front end I was able to implement, while function is simple, the interface is very user friendly and simple while being very pleasing to the eye.

What we learned

This is the first project I've implemented artificial intelligence into and this is the first project I've created entirely on my own. I learned a lot about API implementation and about front end developing with the React framework.

What's next for ValorAI

Moving forward with ValorAI, its use can be amplified by giving training ValorAI on the entirety of VLR.gg, so that it can be entirely knowledgeable on the professional Valorant scene, rather than limiting it's knowledge to a single page. This would enhance the analysis of statistics and match outcomes. ValorAI could also extend its usability by doing it's own Pick'ems through prediction based on previous match statistics, and could even consider expanding to other eSports.

Built With

• axios
• css3
• express.js
• gemini
• gsap
• html5
• javascript
• node.js
• nodemon
• react
• tailwindcss