Dominate

Inspiration

As young people about to enter the workforce, we noticed a significant barrier for women: navigating social situations and gaining the respect they deserve. Women often face the unfair burden of proving themselves and going the extra mile. To address this inequality, we created Dominate.

What it Does

Dominate is an interactive simulation that empowers women to handle challenging workplace scenarios with confidence. By providing practical training and feedback, we aim to equip women with the tools to stand up for themselves and demand the respect they deserve.

How We Built It

Key Features:

Scenario-Based Learning: Users engage with predefined workplace scenarios that simulate typical professional challenges, such as dealing with criticism or taking on leadership roles. AI-Powered Feedback: After users respond to each scenario, the backend uses OpenAI’s GPT model to provide feedback based on the tone and content of the response. Confidence-Building Exercises: Interactive exercises and real-time evaluations designed to help users improve their communication skills. Progressive Difficulty: As users interact with more scenarios, the complexity and emotional nuance of scenarios increase, allowing for continuous growth. Technical Architecture

Frontend:

Languages: HTML, CSS, JavaScript HTML is used to define the structure of the pages (landing page, scenario page, etc.). CSS handles the layout and styling, ensuring the app’s interface is clean, user-friendly, and responsive. JavaScript is responsible for dynamic behavior, such as form submission, handling user input, controlling the timer, and updating the user interface (UI) based on server responses.

Components:

Dynamic Timer: A countdown timer on the frontend tracks how much time remains for the user to respond to a scenario. This timer is controlled by JavaScript, and once the time expires, it triggers UI changes and disables further interactions. Score Tracking: The app dynamically updates the user’s score based on their responses. As the user interacts with the scenario, the score is updated in real-time, and the feedback is visually reflected in a score bar. The score bar changes color based on the score percentage, reflecting "good," "average," or "poor" responses. Scenario Interaction: Users input their responses to workplace scenarios. These responses are sent asynchronously to the backend via a RESTful API call, and the UI dynamically updates based on the server's feedback. Flow: When the page loads, the JavaScript dynamically extracts the scenario ID from the URL (e.g., /scenario/1). Upon form submission, JavaScript makes an asynchronous POST request to the Flask backend, sending the user’s input along with the scenario ID. The feedback and new scenario statements are then displayed on the page without requiring a page refresh (AJAX-style interactions).

Backend:

Framework: Flask (Python) Flask is a lightweight Python web framework used to handle both the HTTP requests and the AI logic. Flask's routing system is used to define the endpoints for rendering the HTML pages and handling API requests. Route GET /scenario/int:scenario_id: Renders the scenario page based on the scenario ID. Route POST /scenario/int:scenario_id: Accepts user input, processes it, and returns AI-generated feedback based on OpenAI’s GPT models.

AI Integration:

GPT-4 API: The backend uses OpenAI’s GPT model to generate conversational responses and to evaluate the user’s responses in terms of professionalism, emotional tone, and conflict resolution. AI Process: When a user submits their response, the backend sends the scenario and user’s message to OpenAI’s API. OpenAI processes the input and generates an appropriate response for "John" (the colleague in the scenario). In parallel, another request is made to evaluate the user's response in terms of emotional intelligence and communication quality (good, average, below average). The backend returns this feedback, and the frontend uses this data to update the user’s experience dynamically. Session Management:

Session State: Flask’s session management system is used to track the user's progress through scenarios. Each scenario is assigned a session ID, which is used to store the conversation history and the user's score. Sessions are stored in-memory (not using a database) for simplicity, making it a stateless design at the cost of persistence beyond the current session. Each user interaction is saved to the session, allowing for scenario progression without resetting the conversation context. Time Management: The backend tracks whether the user has exceeded the time limit (3 minutes) for a scenario. Once the timer expires, the backend will stop processing any further user input and mark the scenario as "over."

Hosting:

Platform: Render Render is used for both the frontend and backend. The backend (Flask app) and frontend assets (HTML, CSS, and JavaScript) are hosted on Render, which provides serverless deployment for Flask apps and static assets. Flask’s app.run() is used for local development but is configured to run in production mode on Render. Deployment: Flask is deployed to Render, where it serves the scenario pages and handles all API requests (both GET for page rendering and POST for submitting responses and receiving feedback). Render is configured to handle requests efficiently, with the app scaling based on demand.

Session Flow & Interaction

Scenario Start: When the user navigates to a specific scenario (e.g., /scenario/0), the backend retrieves the corresponding scenario data, renders the HTML page, and presents the user with an interactive scenario. User Input Handling: The user types a response to the scenario and submits it. The response is captured by JavaScript and sent to the backend via a POST request. The backend processes this response, sending the conversation history and user input to OpenAI’s GPT model for a response (the role of "John"). AI Feedback & Evaluation: Once OpenAI returns both "John's" statement and an evaluation of the user’s response, the frontend dynamically updates: John's statement is displayed as part of the scenario's ongoing conversation. AI evaluation is shown as feedback, affecting the user’s score. Score Updates: The score is calculated based on the AI evaluation (good, average, poor) and updated in real-time. The score is reflected visually via a progress bar that changes color depending on the score percentage. Timeout: If the user fails to respond within 3 minutes, the frontend disables the input field and shows an alert ("Time's up!"). The backend prevents any further input processing and notifies the user that the scenario has ended due to the time limit.

Technologies Breakdown

Frontend: HTML, CSS, and JavaScript to build interactive and dynamic user interfaces. JavaScript handles scenario submission, timer countdown, score updates, and dynamic UI changes based on user input and AI responses. Backend: Flask for handling routing and HTTP requests. OpenAI API (GPT-3 or GPT-4) for generating conversational responses and evaluating user input. Hosting & Deployment: Render provides serverless hosting for both the Flask backend and static frontend assets. Session Management: Flask sessions store the conversation state, allowing users to continue where they left off during their interactions. Time Management: JavaScript controls the scenario timer on the frontend, while Flask manages timeout logic on the backend.

Challenges We Ran Into

Developing Dominate presented several challenges. One of the primary hurdles was creating a robust and accurate AI model capable of analyzing complex social interactions and providing nuanced feedback. Additionally, designing a user-friendly and engaging interface that could adapt to users of varying technical abilities and learning styles was a major challenge. Ensuring the platform's scalability and performance as the user base grew was another significant challenge.

Accomplishments We're Proud Of

We're incredibly proud of the progress we've made in developing Dominate. We've successfully built a platform that offers a unique and valuable service to women, empowering them to navigate complex social situations with confidence. We're particularly proud of the development of our AI model, which can accurately assess user responses and provide tailored feedback. Additionally, we're excited about the positive impact Dominate has had on its users, as evidenced by the increasing number of active users and positive reviews.

What We Learned

Developing Dominate has been a valuable learning experience. We've learned the importance of high-quality training data for accurate AI models, the need to mitigate bias in AI, and the value of continuous model improvement. Additionally, we've gained insights into the significance of user testing, adaptive design, and accessibility in creating user-friendly interfaces. Furthermore, we've learned the importance of scalable backend infrastructure, efficient database queries, and robust security measures.

What's Next for Dominate

Our next step is to leverage data-driven insights to further enhance Dominate. By tracking user interactions and outcomes, we can identify common challenges women face and tailor the platform to address specific needs. This will allow us to provide even more effective and personalized support to our users.