{"id":20027990,"url":"https://github.com/vojay-dev/gemini-movie-detectives-ui","last_synced_at":"2026-05-15T11:36:17.588Z","repository":{"id":233181003,"uuid":"781685063","full_name":"vojay-dev/gemini-movie-detectives-ui","owner":"vojay-dev","description":"Vue3 + Vite based Frontend for Movie Detectives, which uses Gemini Pro LLM via VertexAI to create an engaging quiz game incorporating TMDB API data","archived":false,"fork":false,"pushed_at":"2024-04-12T13:45:49.000Z","size":4059,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-14T11:00:23.307Z","etag":null,"topics":["ai","artificial-intelligence","game-development","gemini-pro","llm","vite","vitejs","vue3","vuejs","web-development"],"latest_commit_sha":null,"homepage":"https://movie-detectives.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vojay-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-03T21:03:10.000Z","updated_at":"2024-04-14T11:00:32.321Z","dependencies_parsed_at":"2024-04-19T10:00:50.041Z","dependency_job_id":null,"html_url":"https://github.com/vojay-dev/gemini-movie-detectives-ui","commit_stats":null,"previous_names":["vojay-dev/gemini-movie-detectives-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojay-dev%2Fgemini-movie-detectives-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojay-dev%2Fgemini-movie-detectives-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojay-dev%2Fgemini-movie-detectives-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojay-dev%2Fgemini-movie-detectives-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vojay-dev","download_url":"https://codeload.github.com/vojay-dev/gemini-movie-detectives-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241460042,"owners_count":19966516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","artificial-intelligence","game-development","gemini-pro","llm","vite","vitejs","vue3","vuejs","web-development"],"created_at":"2024-11-13T09:12:46.670Z","updated_at":"2026-05-15T11:36:12.549Z","avatar_url":"https://github.com/vojay-dev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gemini Movie Detectives UI\n\n![logo](doc/logo.png)\n\nGemini Movie Detectives harnesses Google's AI to revolutionize educational gaming, transforming movie trivia\ninto a proof-of-concept gateway for AI-driven, adaptive learning across all subjects, challenging your inner\nmovie nerd while showcasing how AI can reshape education in schools and universities.\n\n**Try it yourself**: [movie-detectives.com](https://movie-detectives.com/)\n\n## Backend\n\nThe backend infrastructure is built with FastAPI and Python, employing the Retrieval-Augmented Generation (RAG)\nmethodology to enrich queries with real-time metadata. Utilizing Jinja templating, the backend modularizes\nprompt generation into base, personality, and data enhancement templates, enabling the generation of accurate\nand engaging quiz questions in different game modes. Each game mode uses a different combination of data source\nshowcasing the broad range of possibilities how to employ advanced Gemini applications.\n\nIn addition to Gemini, the application leverages Google's state-of-the-art Text-to-Speech AI to synthesize quiz\nquestions, dramatically enhancing the immersive atmosphere of a professional trivia game show. Moreover, the\nSequel Salad game mode demonstrates the power of AI integration by utilizing Gemini to generate creative prompts.\nThese prompts are then seamlessly fed into Google's cutting-edge Imagen text-to-image diffusion model, producing\nfake movie posters. This sophisticated interplay of various AI models showcases the limitless potential for\ncreating captivating and dynamic game experiences, pushing the boundaries of what's possible in interactive\nentertainment.\n\nThe application's infrastructure is further strengthened by the integration of Google Firebase. This integration\nenables secure user authentication, facilitating personalized interactions within the app. Firestore is used to\nstore and manage essential user data, powering the dynamic rendering of user profiles with game statistics.\nAdditionally, it handles crucial metadata, including movie franchise information and game mode usage metrics\ntogether with configurable limits, allowing for precise control over daily operational costs.\n\n## Frontend\n\nThe frontend is powered by Vue 3 and Vite, supported by daisyUI and Tailwind CSS for efficient frontend\ndevelopment. Together, these tools provide users with a sleek and modern interface for seamless interaction\nwith the backend.\n\n## Summary\n\nIn Movie Detectives, quiz answers are interpreted by the Language Model (LLM) once again, allowing for dynamic\nscoring and personalized responses. This showcases the potential of integrating LLM with RAG in game design and\ndevelopment, paving the way for truly individualized gaming experiences. Furthermore, it demonstrates the\npotential for creating engaging quiz trivia or educational games by involving LLM. Adding and changing personalities\nis as easy as adding more Jinja template modules. With very little effort, this can change the full game experience,\nreducing the effort for developers. Try it yourself and change the AI personality in the quiz configuration.\n\nMovie Detectives tackles the challenge of maintaining student interest, improving knowledge retention, and making\nlearning enjoyable. It's not just a movie quiz; it’s a glimpse into AI-enhanced education, pushing boundaries\nfor accessible, engaging, and effective learning experiences.\n\n![mockup](doc/mockup.png)\n\n---\n\n## Examples\n\n![demo bttf trivia](doc/demo-bttf-trivia.png)\n*Game mode: Back to the Future Trivia*\n\n![demo profile](doc/demo-profile.png)\n*User profile*\n\n![demo sequel salad](doc/demo-sequel-salad.png)\n*Game mode: Sequel Salad*\n\n---\n\n**Backend**: [gemini-movie-detectives-api](https://github.com/vojay-dev/gemini-movie-detectives-api)\n\n## Tech stack and project overview\n\n- [VueJS](https://vuejs.org/) 3.4 for frontend development\n- [Vite](https://vitejs.dev/) for frontend tooling\n- [Firebase](https://firebase.google.com/) for user authentication\n- [Tailwind CSS](https://tailwindcss.com/) as a utility-first CSS framework\n- [daisyUI](https://daisyui.com/) as a component library for Tailwind CSS\n- [Vue Flow](https://vueflow.dev/) for flowcharts and graphs \n\n![system overview](doc/architecture.png)\n*Movie Detectives - System Overview*\n\nThe frontend experience is best on desktop browser *but* everything is responsive using Tailwind CSS and daisyUI so\nall quiz modes and pages can be used on mobile as well.\n\n## Quiz client\n\nEven though Movie Detectives offers different game modes, all of them are handled via the same start and finish quiz\nendpoints. To reduce code duplication, there is a centralized quiz client in `src/quiz.js`.\n\n## Components\n\n![components](doc/frontend-components.png)\n*Components*\n\nThe frontend is separated into the following components:\n\n- 📚 **Quiz Components**\n  - Selection: Component to select a game mode\n  - Configuration: Personality configuration for the selected game mode\n  - TitleDetectives: Title Detectives game mode\n  - SequelSalad: Sequel Salad game mode\n  - BttfTrivia: Back to the Future Trivia game mode\n  - Trivia: Movie Fun Facts game mode\n- 📄 **Page Components**\n  - Home: Start page\n  - About: About page with basic project information\n  - System: System overview implemented with Vue Flow\n  - Profile: Profile page for authenticated users\n- ⚙️ **Utility Components**\n  - CustomCursor: Custom cursor implementation\n  - LoadingAnimation: Loading animation with customizable loading text\n\n## Project setup\n\nEnsure to configure the correct API endpoint for local or live usage in `src/config.js`.\n\n```sh\nnpm install\n```\n\n## Run\n\n```sh\nnpm run dev\n```\n\n## Build\n\n```sh\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvojay-dev%2Fgemini-movie-detectives-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvojay-dev%2Fgemini-movie-detectives-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvojay-dev%2Fgemini-movie-detectives-ui/lists"}