Eco Trivia

Eco Trivia is a mobile game about sustainability and SDGs. Apathy and information overload prevent people from acting on the climate crisis. We gamify the education via bite-sized fun quizzes.

Comment 1

Inspiration

A few weeks ago the team attended the Google Cloud Next conference. A brand new managed Large Language Model chat agent was shown which is based on the DialogFlow CX technology, however it elevates it into a lower No Code level. Developers need to only write so called playbooks (natural language) and the framework can automatically chunk and index documents which can be used as a basis for a managed RAG (Retrieval Augmented Generation) solution. This new Agent technology is in a preview phase, and it is powered by Google's world class Gemini Pro model. At the conference we downloaded some SDG (Sustainable Development Goal) specific reports and created an agent which was quite fun to use. Every time we learn something new, such as which goal is the most urgent, progress of various goals, or which travel method or plastic is the most sustainable to name a few.

The problem

The problem is clear: climate change is an existential threat, but apathy and misinformation are major roadblocks. People are overwhelmed by the sheer volume of information and struggle to grasp its significance.

What Eco Trivia does

By transforming sustainability data and Sustainable Development Goals into bite-sized trivia questions we make learning about sustainability fun and informative. Our busy life sometimes only gives us a short attention span for extracurricular activities, however little quizzes are easily digestible and can be explored any time quickly. By gamifying the experience, we tap into users' competitive spirit and reward them for knowledge gains.

How we built it

We tried to implement the whole technology stack in a no code manner.

  1. Agent Builder agents we mentioned above are no code type applications (playbooks are natural human language descriptions), and the document indexing for RAG is fully managed.
  2. For the application and end user interface we used FlutterFlow, which is a visual editor for web, mobile, and desktop applications for all major platforms. Only some custom actions required a little code, but Dart is a very easy language to learn.
  3. We needed only one glue code piece: the FlutterFlow front-end needed to call our trivia specialized agent, and for that we ended up establishing a Google Cloud Function.

The Agent is taught by example to supply JSON format structured responses, so the front-end could easily consume it. The application uses Firebase as a back-end to store trivia questions on a per-user basis and also to persist the experience points and levels. Firebase can even function in an anonymous authentication manner (Guest mode) where the user doesn't have to login, which lowers the barrier for anyone who is interested in sustainability and the trivia.

Challenges we ran into

Apart from usual software development challenges, notable one:

  1. Establishing the agent was hard. The managed document indexing for RAG is handy, we have some influence on how it is done (such as embedding methods (OCR, Layout, text), retrieval confidence threshold). Even with a very low confidence threshold, sometimes the agent complained that it didn't find relevant information, so we had to turn off that threshold completely for the RAG to work reliably.
  2. It was kind of meticulous to come up with examples, and the current simple examples seem to sometimes skew the agent away from generating more versatile questions.
  3. The biggest hurdle turned out to be technicality: the FlutterFlow app's Cloud Function calls were rejected by the Google Cloud Platform back-end. Several solutions were tried:
    • Applying a workaround in the cloud function to specify permissive CORS behavior with special attention to preflight HTTP OPTIONS calls. For some reason this didn't seem to help.
    • The function was rewritten in JavaScript to use similar header manipulations on the function's side, or trying special package cors to treat the issue for no avail.
    • The function was rewritten in FlutterFlow "native" cloud function. That is technically a JavaScript / Node 1st generation Firebase cloud function but it was not deploying.
    • The function was rewritten in Firebase style JavaScript 1st generation and 2nd generation style (Firebase function somewhat differs from the GCP / Google Cloud Platform style).
    • In the end there was a realization that if the GCP cloud function is called via the Firebase mapped URL then the nagging CORS problem disappeared.
  4. For the wind turbine animation needed an image facing us and then separating the blades from the rest. We've tried Gemini, Dall-E, and Runway Gen-2 and each was good only in one aspect:
    • Only Gemini understood that the turbine should face us
    • None of them was able to understand the image editing request to delete the blades. We ended up using Google Photos for that
    • The Gemini generated image was square and Runway Gen 2 was able to extend it to a wide screen
  5. Sometimes the structured responses from the agent are truncated so we needed to apply some workaround so the whole round doesn't flop in favor of the last hint to be truncated. Sometimes the agent also overflows token limits, and then we try to work that around by switching session ID thinking that the overflow is caused by a lengthy conversation history (downside is that there could be repeat quizzes with a higher probability). We need to debug other Internal Server errors which will need help from Google professionals.

Accomplishments that we're proud of

We were able to implement an MVP (Minimum Viable Product) low code front-end (containing even Rive animations) and back-end (powered but cutting edge Generative AI technology and Retrieval Augmented Generation) relatively quickly. We tackled hard problems (such as the CORS) where none of the suggestions (StackOverflow, FlutterFlow forums) worked. We bobbed and weaved to work around hurdles.

What we learned

Agent Builder Agents together with FlutterFlow allow extremely rapid prototype development (given that someone figures out the CORS problem and other problems). If we'd repeat the development we could be done in a day.

What's next for Eco Trivia

  • Support multiple languages
  • Customize the experience for age groups and knowledge levels
  • Prompt engineer to have more versatile quizzes
  • Widen the document base for the trivia (the RAG solution can index additional documents)
  • Fixing outstanding bugs (for example the response truncation can be possibly solved by separating the trivia from the hints, but in that case hints would incur extra delay for calling)
  • Making the history view working
  • Releasing mobile game on Android and iOS platforms
  • Improving the game in general (such as music, more design and animations)
  • Build a community around the game to engage people even more
  • Anti addiction measures (in case the game would be so popular)

Built With

  • agent-builder
  • cloud-function
  • dall-e
  • dialogflow-cx
  • firebase
  • flutter
  • flutterflow
  • gemini
  • genai
  • llm
  • music-fx
  • rag
  • rive
  • runway
Share this project:

Updates