Eco Trivia

Eco Trivia is a mix of mobile game and knowledge oracle about sustainability. Not enough people involved in climate action. Quiz helps education via bite-sized fun quizzes and the oracle teaches more.

Comment

Inspiration

At the Google Cloud Next conference a brand new managed generative chat agent was shown which provides a No Code level entry to sophisticated applications. 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 a team member ventured out and later shared his finding with the rest of the team. SDG (Sustainable Development Goal) specific reports and related documents were downloaded from the United Nations website, got curated for experiments. Even just a regular chat knowledge bot can be fun: every time we learned 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. However we wanted to go further. A quiz game was envisioned powered by the dataset which was extended by some other sustainability related documents, handbooks and publications (such as sustainability in engineering, forestry sustainability, apparel sustainability, etc.). We were also very curious if we could achieve our goal with a low-code full technology stack. So we picked FlutterFlow for the front-end to pair it up with the Agent Builder.

The problem

The problem is clear: climate change is an existential threat, but apathy, information overload or 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. On top of that everyone who is curious can engage with Eco Oracle knowledge bot to learn more whenever desired.

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 also 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 formatted 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.

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 now for the RAG to work reliably (but this is understandable for a preview phase technology).
  2. 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. At an office hour at Google I/O Csaba was told that the current Gemini 1.0 Pro 001 will be surpassed and the 002 version already has bug fixes. Hopefully the Gemini 1.5 Pro will arrive soon as well and that will help.
  3. Lately the agent stopped emitting 500 errors, and came back with a 200 but asking the caller to try again instead of a valid response. We realized that we might have gone overboard with 23 examples (each of which can be lengthy, 1200 characters or more) and if the back-end stuffs those into the prompt for few-shot prompting that could cause trouble. We decreased the examples to 6 and that seemed to help.
  4. 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.
  5. The other major hurdle besied the 500 errors turned out to be technicality: the FlutterFlow app's Cloud Function calls were rejected by the Google Cloud Platform back-end due to a CORS (Cross-origin resource sharing) error. 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 JavaScript header manipulations on the function's side, or trying special package cors to treat the issue unsuccessfully.
    • 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.
  6. 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 were 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
    • The blade separation for the animation was done by GIMP

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. For example recently Ren Hao added the Oracle page and we could work off of templates and examples, although we needed to adjust and wire it up, but it took about four hours. 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

  • Quizzes are not always the best options for sustaining interest. This is why we added the Eco Oracle knowledge agent, however there can be even more dimensions and aspects to widen the scope to fulfill the user. We could for example team up with projects such as https://github.com/team-hashing/hooli or other eco oriented arcade games and applications we saw at other hackathons.
  • Prompt engineering is needed to have more versatile quizzes
  • Support multiple languages
  • Customize the experience for age groups and knowledge levels
  • The document knowledge base could be widened (the RAG solution can index additional documents)
  • Releasing mobile game on Android and iOS platforms
  • Improving the game in general (such as music, more design and animations)
  • Fixing outstanding bugs
  • Making the history view working

Built With

Share this project:

Updates