# Project export: Task Taka This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 11.0 - Tagline: Task Taka is an action-priority matrix webapp powered by Reflex.dev with integration of Gemini AI to help interpret and manage priority and non-priority tasks. - Devpost: https://devpost.com/software/notetaka - GitHub: https://github.com/gverango/TaskTaka - Team: 3 GitHub contributor(s) β€” Gevilee (20 commits), TPColor (14 commits), Royal-Fred (2 commits) ## Devpost submission (written by the team) ### Overview πŸ” Task Taka: One Stop Task Management at Your Fingertips Our project, Task Taka, was inspired by the need for an efficient way to manage tasks and priorities in an increasingly fast-paced world. As a team, we recognized that balancing multiple tasks with varying levels of importance and effort could easily become overwhelming without a clear system in place. We wanted to create a solution that not only organizes tasks but dynamically updates them based on real-time input. πŸ’‘ Motivations The core inspiration came from the Action-Priority Matrix, a tool we’ve encountered in the productivity cornner of Youtube. We were particularly drawn to the matrix’s ability to categorize tasks into quadrants based on impact and effortβ€”Quick Wins, Major Projects, Fill-Ins, and Time Wasters. However, we saw an opportunity to automate this process using AI, and that’s when we decided to integrate Reflex.dev and Gemini AI into the project. This combination allows Task Taka to intelligently interpret user inputs and place tasks in the correct quadrant. 🌿 Our Team's First Hack Building the project was an exciting yet challenging process. This was our entire team's first hackathon. We started by designing the user interface, ensuring that it was simple enough to be accessible but powerful enough to handle complex task lists. We then integrated Gemini AI to handle the interpretation and categorization of tasks, allowing the application to update in real-time as new data is provided. Using Reflex.dev was key in making the app responsive and dynamic, ensuring that user inputs immediately reflect on the Action-Priority Matrix. 🚧 Challenges We Faced During the hackathon, one of the key challenges we faced was integrating Gemini AI into the codebase. The process of generating and managing the API key proved to be more complex than anticipated, as we struggled to get the AI to accurately interpret user inputs. For example, tasks like β€œI have a math exam tomorrow” needed to be categorized as high-impact, high-effort, which required refining the AI's logic. We also encountered difficulties with UI/UX elements, especially with Reflex overlaps affecting the client-side experience. As a team, we deliberated over which AI tool to use for the project and eventually chose Google’s Gemini AI, despite initial challenges in selecting the most suitable API. πŸš€ What We've Learned Through this project, we learned a great deal about using APIs, collaborating as a team, and solving complex technical issues. Ultimately, Task Taka not only taught us how to build an intelligent web application but also developed our soft skills as developers. ## README (from the GitHub repository) # TaskTaka **TaskTaka** is an intuitive web application designed to help users manage and prioritize their tasks efficiently. By leveraging the **Action-Priority Matrix**, the application categorizes tasks based on Impact and Effort (Low/High). TaskTaka is powered by **Reflex.dev** and incorporates **Gemini**, an AI that interprets user inputs to dynamically assign tasks to the appropriate quadrant of the matrix (Quick Wins, Major Projects, Fill-Ins, or Time Wasters). ## Features - **AI-Powered Task Management**: The AI helps interpret tasks and sorts them based on the Effort and Impact required. - **Dynamic Task Updates**: Tasks are automatically updated and moved across the matrix as new data is provided. - **User-Friendly Interface**: Simple and intuitive design to help users quickly categorize and manage their tasks. ## Installation and Running the Project To run **TaskTaka** locally, follow these steps: 1. **Clone the repository**: ``` git clone https://github.com/your-repo/tasktaka.git cd tasktaka ``` 2. Set up a Virtual Environment (Optional but Recommended) To keep the project environment isolated and dependencies portable, you can create a virtual environment: ``` python3 -m venv .venv source .venv/bin/activate # Activate the virtual environment ``` 3. Install Dependencies: If you don't already have Reflex.dev installed, you can install it using pip: ```bash pip install reflex.dev ``` Initialize project with ```bash reflex init ``` Then, install API library: ```bash pip install -U google-generativeai ``` 4. Run the application: Once Reflex.dev is installed, you can run the project locally: ```bash reflex run ``` 5. Access the application: After running the application, open your browser and navigate to: ```http://localhost:3000``` ## Use-Case Example Imagine you are juggling several tasks with varying degrees of importance and complexity. For example: Imagine you are a project manager with a list of tasks that need to be prioritized. Using TaskTaka, you input each task with details about its expected impact and the effort required. The AI interprets the information and places each task on the Action-Priority Matrix. High-impact, low-effort tasks appear in the top-right quadrant, indicating they should be prioritized. As you complete tasks or as new tasks come in, the matrix updates in real time, helping you stay focused and organized. Task 1: "Complete client proposal" (High Impact, High Effort) β†’ Major Projects Task 2: "Reply to emails" (Low Impact, Low Effort) β†’ Fill-Ins Task 3: "Plan team lunch" (Low Impact, High Effort) β†’ Time Wasters Task 4: "Prepare for strategy meeting" (High Impact, Low Effort) β†’ Quick Wins You can simply enter these tasks into TaskTaka, and the AI will intelligently place them in the appropriate quadrant based on the impact and effort levels. ## Special Considerations Customization: You can tweak the AI's interpretation model to fit your specific task management needs. Dependencies: Ensure that you have Python and Reflex.dev installed. Additional packages required for AI handling may need to be installed based on the Reflex.dev setup. Scaling: TaskTaka is designed to handle small to medium-sized task lists. Performance may degrade if handling a large number of tasks simultaneously. ## Project Directory ``` . β”œβ”€β”€ README.md β”œβ”€β”€ TaskTaka β”‚ β”œβ”€β”€ TaskTaka.py β”‚ β”œβ”€β”€ __init__.py β”‚ β”œβ”€β”€ __pycache__ β”‚ β”‚ β”œβ”€β”€ TaskTaka.cpython-312.pyc β”‚ β”‚ β”œβ”€β”€ __init__.cpython-312.pyc β”‚ β”‚ └── matrix.cpython-312.pyc β”‚ └── matrix.py β”œβ”€β”€ __pycache__ β”‚ └── rxconfig.cpython-312.pyc β”œβ”€β”€ assets β”‚ └── favicon.ico β”œβ”€β”€ requirements.txt └── rxconfig.py ``` # Contributors Freddie Gutierrez, Lily Zhang, Gevilee Mariane Verango, Wallace Tang (CAL HACKS 11.0 CCSF CS Club) License ## Detected evidence (automated analysis) Indexed codebase: 9 recognized source files, 17 KB. - Python (language) β€” detected in the code - Google Gemini (technology) β€” claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (13 of 13) ``` .gitignore .idea/.gitignore .idea/inspectionProfiles/profiles_settings.xml .idea/misc.xml .idea/modules.xml .idea/TaskTaka.iml .idea/vcs.xml README.md requirements.txt rxconfig.py TaskTaka/__init__.py TaskTaka/matrix.py TaskTaka/TaskTaka.py ``` ### Dependencies - requirements.txt: reflex@==0.6.3 ### Recent commits (newest first) - Update README.md - Update README.md - Merge pull request #15 from gverango/gev-branch - Added README directory and secured personal API KEY - Merge pull request #14 from gverango/gev-branch - WIP trying to secure API Key - DEMO'd AF and deleted multipart import - Documentation and snippets - Merge pull request #13 from gverango/gev-branch - Getting the AI sorting and response to work - Merge pull request #12 from gverango/gev-branch - Added an axis - idk - idk - Merge pull request #11 from gverango/gev-branch - Tried adding the Gemini API (still lost) - Increased gap between check and text - Merge branch 'main' of https://github.com/gverango/TaskTaka - Implemented Check mark and delete - Update README.md ## Key source files (fetched from GitHub, selected and truncated for size) ### requirements.txt ``` reflex==0.6.3 ``` ### rxconfig.py ```python import reflex as rx config = rx.Config( app_name="TaskTaka", ) ``` ### .idea/vcs.xml ```xml ``` ### .idea/misc.xml ```xml ``` ### .idea/modules.xml ```xml ``` ### TaskTaka/TaskTaka.py ```python """Welcome to Reflex! This file outlines the steps to create a basic app.""" import reflex as rx from rxconfig import config from .matrix import matrixpage class State(rx.State): """The app state.""" ... def index() -> rx.Component: # Welcome Page (Index) return rx.container( rx.color_mode.button(position="top-right"), rx.vstack( rx.heading("Welcome to TaskTaka!", size="9", text_align="center"), rx.text( "One Stop Task Management at Your Fingertips", #rx.code(f"{config.app_name}/{config.app_name}.py"), size="7", text_align="center", ), rx.link( rx.button("Try it out!", size="4", _hover={"cursor": "pointer"}), #href="matrix.py", is_external=False, on_click=rx.redirect("/matrix"), text_align="center", ), spacing="5", justify="center", align_items="center", min_height="85vh", ) #rx.logo() ) app = rx.App() app.add_page(index) ``` ### TaskTaka/matrix.py ```python import reflex as rx import os import google.generativeai as genai from google.generativeai import configure # Loads environment variables from Github Repository Secrets, initializes GEMINI_API_KEY with secret one GEMINI_API_KEY = os.environ['GEMINI_API_KEY'] if not GEMINI_API_KEY: #error if backend retrieval unsuccessful raise ValueError("API Key not found. Make sure GEMINI_API_KEY is set in the backend.env file") # Set the API key for the Gemini client, from Google Gemini API Quickstart guide genai.configure(api_key=GEMINI_API_KEY) class State(rx.State): """The app state.""" # Pink going hard on the tuple based todo tracker # Track todos: (checked, text) todos: list[list[tuple[bool, str]]] = [[], [], [], []] # User input from the text box user_input: str = "" # AI output after processing user input, to be used in API call ai_output: str = "" async def add_todo_to_box(self): if not self.user_input.strip(): self.user_input = "" # Clear the input if empty return # Call the Gemini AI API to categorize the task category, explanation = await self.call_gemini_api(self.user_input) # map category to one of the quadrants using a dictionary(0 = Low Effort, Low Impact) quadrant_mapping = { "low_effort_high_impact": 0, # quick wins, yellow "high_effort_high_impact": 1, # major projects, red "low_effort_low_impact": 2, # fill ins, blue "high_effort_low_impact": 3, #time wasters, green } # Get the corresponding quadrant for the task quadrant = quadrant_mapping.get(category, 2) # Default to "Fill-Ins" if no match # Append the task (is_checked, text) to the appropriate quadrant self.todos[quadrant].append((False, self.user_input)) # Initialize as unchecked # Clear the input field and store the AI explanation self.user_input = "" self.ai_output = explanation # Freddie's collab on the eisen-hower matrix async def call_gemini_api(self, task_description: str): try: # Create an instance of the GenerativeModel model = genai.GenerativeModel("gemini-1.5-flash") # Gemini AI prompt that appears at the bottom of the screen response = model.generate_content( f"Please categorize the following task into one of the categories: " f"low effort high impact, high effort high impact, low effort low impact, " f"or high effort low impact. Task description: '{task_description}'" ) # Gev's solution for AI task sorting # Extract the AI response text result_text = response.text.lower() # Searches dictionary and sets todo category if "low effort" in result_text and "high impact" in result_text: category = "low_effort_high_impact" elif "high effort" in result_text and "high impact" in result_text: category = "high_effort_high_impact" elif "low effort" in result_text and "low impact" in result_text: category = "low_effort_low_impact" elif "high effort" in result_text and "low impact" in result_text: category = "high_effort_low_impact" else: # Default category if interpretation fails category = "low_effort_low_impact" #fill ins return category, result_text # uses AI's explanation as result text except Exception as e: #appears when the generate content prompt is faulty return "low_effort_low_impact", f"Error calling Gemini AI: {str(e)}" def toggle_todo_checked(self, box_index: int, todo_index: int): """Toggle the checked state of the specified todo item.""" checked, text = self.todos[box_index][todo_index] self.todos[box_index][todo_index] = (not checked, text) # Toggle checked state def remove_todo_from_box(self, box_index: int, todo_index: int): """Remove the specified todo item.""" self.todos[box_index].pop(todo_index) @rx.page(route="/matrix") def matrixpage() -> rx.Component: #reflex uses color_mode_cond to switch item color based on the theme axis_color = rx.color_mode_cond( light="black", # axis color in light dark="white" # axis color in dark ) # Properties of the cards (as before) grid_card_props = { "flex": "1", # Make each card flexible to fill available space "height": "100%", # card and header should fill respect quadrant "width": "100%", # Equal widths across quadrants "text_align": "center", "padding": "20px", "overflow_y": "auto" } grid_button_props = { "max_width": "350px", "overflow": "visible", "white_space": "normal", "word_wrap": "break-words", "word_break": "break-all", # word wrap for long words "color": "inherit", "text_align": "left", "variant": "ghost", # button transparent "size": "3", "_hover": {"textDecoration": "underline"} # Underline on hover } card_subtitles = [ "Quick Wins", "Major Projects", "Fill-Ins", "Time Wasters" ] # CARD COLORS card_colors = [ {"background_color": "#FFC90E", "color": "black"}, # yellow, low effort, high impact {"background_color": "#E00A0D", "color": "white"}, # red, high effort, high impact {"background_color": "#1E90FF", "color": "white"}, # blue low effort, low impact {"background_color": "#B5E61D", "color": "black"}, # green, high effort, low impact ] # Modify the quadrant_layout lambda to include on_click event for task removal quadrant_layout = lambda subtitle, todos, box_index, color: rx.vstack( rx.text(subtitle, font_size="24px", font_weight [truncated β€” 5059 more characters] ``` ### .idea/inspectionProfiles/profiles_settings.xml ```xml ```