AIWebRunners

• 

  default game page

• 

  game with chatgpt analysis

• 

  game with hints

• 

  lobby of game

Inspiration

We were inspired by wikiraces, but we wanted to put an AI spin as well as some quality of life changes onto it.

What it does

You race from one wikipedia article to the target article. We keep track of how many clicks and the path you go from each article to the next. There is a hint button that tells you the semantic embeddings of the links. We also have a ChatGPT hint button that will give more detail about the links pages that are more likely leading to the destination.

How we built it

We first built the frontend first to validate our ideas and as a demo using react components and tailwind css. This acted like our figma for our backend which was go and mongodb. The consequence was that it had to be adjusted frequently to work with the backend apis. Implementing the hints functionality required the use of the OpenAI embeddings api, which we used to extract the semantic vectors from the hyperlinks and display cosine similarity. We embedded ChatGPT into our website with an OpenAI library so that it could give helpful descriptions of the website links acting like a sneak peek.

Multiplayer: We organize the games into lobbies so that players can invite their friends to play together. Every lobby session is stored in MongoDB as a document, including the game stats and the active players. A major challenge for implementing multiplayer games is that we need to synchronize the game states among players. We used a polling approach due to the limited time frame, but we’re working on utilizing websocket in the project so that it can be more efficient and scalable.

Challenges we ran into

We ended up spending a lot of time adjusting our frontend code and design to align with our backend APIs, part of it was because we were not 100% clear of what we were going to do and we didn’t have an API specification designed before implementing our frontend. As we progressed, we realized that our API design needs to be adjusted frequently, which provided valuable insights into the importance of considering the implementation details early on.

In future projects, we will prioritize fleshing out the implementation details and have a comprehensive API specification ready before heading into implementation to minimize the adjustments along the way.

Accomplishments that we're proud of

This is our first time participating in a Hackathon! We are proud of building a pretty fleshed out game that is playable from start to end, and with a fully functional multiplayer available through using NextJS, Go and MongoDB.

What we learned

We gained a more thorough appreciation of how to integrate the frontend with the backend. We learned how player and game management works with the database and how we display that response in the front end. We learned more about React, typescript, and tailwind css in building out the UI of the website. We also learned that coding is hard.

What's next for AIWebRunners

We plan to add a bot that you can play against and give it different difficulties. We also thought about a login system that would give players the ability to track their personal bests as well as be on a global leaderboard. Another interesting add-on is themed games where you can decide the theme in the lobby. For performance optimization, we plan to use websocket to enable 2-way client-server communication.

Built With

• docker
• gin
• go
• mongodb
• nextui
• nginx
• openaiapi
• react
• tailwind
• typscript
• wikipedia