Team name: TeamAI
Project name: ChatWIT
ChatWIT (Women in Tech) uses the power of AI to enable you to chat directly with a range of pioneering women in tech from history to the present day.
Choose the woman you would like to chat to, and ask her any questions you have about her life and work, achievements and obstacles, and more!
The live site is deployed at: https://women-in-tech-hackathon.herokuapp.com/
The project brief was to create a product which helps to overcome some of the barriers women face in the tech industry.
ChatWIT aims to help contribute to the visibility and representation of women in tech, by reminding all of us that there have always been women who have claimed their place in the "traditionally male-dominated field" of computing, and enabling us to learn more about these women and their accomplishments.
ChatWIT's Women in Tech can also act as an AI mentor to people starting out in the field of tech by sharing the stories of their lives, the barriers they overcame and their tips for success.
The saying goes that, "You can't be what you can't see". ChatWIT acts as a link to just a selection of the many the women who have made their mark in the tech field, including women of colour, to reassert that women of varied backgrounds do have and have always had a well-deserved place in the tech industry.
- UX
- Design
- Features
- Testing
- Bugs during development
- Technologies and libraries used
- Deployment
- Credits
The target audience is mainly girls/women or anyone who is interested in learning about the experiences of women in the tech industry. This includes students and professionals in the tech industry.
-
As a user, I can navigate with ease throughout the web application.
-
As a woman studying computer science, I want to learn more about the experiences of other historical women in tech to inspire me in my studies and career.
-
As a user, I can use this web application on mobile as well as desktop with ease.
-
As a professional in the tech industry, I want to learn about the achievements and obstacles faced by women in this field to improve diversity and inclusion in my workplace.
-
As a user, I can communicate with the AI model in an online chat environment.
-
As someone interested in history, I want to learn about the contributions of women in the development of technology throughout history.
-
As a user, I can switch between different AI character models.
-
As a parent, I want to expose my child to the positive role models in the tech industry in order to encourage their interest in the field.
| Page | Description |
|---|---|
| Landing page | Main page where site visitors land with a clear outline of the web application |
| Chat page | Where users are able to navigate to engage with the AI chat (ChatGPT) |
| Selection page | A page where users can identify a list of AI mentors to chat with |
| Navigation | Found at the top of every page with a consistent design |
| Footer | Found across all pages with a consistent design |
A separate document for the wireframes can be found here.
We chose the current color palette for the website with the goal of creating a visually appealing and empowering experience for our users. The shades of pink represent femininity and convey the message that our platform is dedicated to supporting women in tech. The use of black adds a sense of sophistication and strength, while the light and dark grays create a subtle contrast and help to balance the overall look of the website. Together, these colors work to create a cohesive and inspiring visual identity for our brand.
- Raleway for the Headers
- Roboto for body and general text
-
H1,H2,H3 - Raleway bold
-
H3 - Raleway Medium
-
p,a,li - Roboto regular
-
Fallback font - Sans-serif
- Contains links for site navigation throughout the application, these being "Home" and "Chat".
- The brand logo is a clickable button that returns the user to home page.
- The navbar design has custom scroll effect which blends with the hero-image until scrolled downwards.
- Navbar also responds to smaller viewport sizes.
- The home page is the first page seen upon visiting the web app.
- It contains the navigation bar, introduction section + hero image, with a button to take users straight to the AI selection page.
- An about section of the landing page which explains the purpose and use of the web app.
- Contains five biography sections.
- Contains the web app footer.
- Selection page contains links and images of the AI models that can be engaged with.
- Each link will take the user to their respective historical figure.
- Chat page contains a side bar with all available AI models, which users can use to navigate the AI models.
- Contains the navbar for users to navigate their way back to the main page if necessary.
- Also contains footer.
- Chat with AI is modelled like a chat environment.
- Speech with the AI moves it way upwards.
- When AI is loading the conversation, a loading spinner is seen, indicating that data is being fetched.
- Below is a sampled conversation with the AI model:
- We would like to add more people to the chat.
- Other than that we would like to update the features for the chat based on new ChatGPT features.
Manual testing of user stories can be found below:
As a user, I can navigate with ease throughout the web application.
| Test | Issue | Result |
|---|---|---|
| 1 | Ensure the functionality of a navigation bar throughout the application | PASS |
As a woman studying computer science, I want to learn more about the experiences of other historical women in tech to inspire me in my studies and career.
| Test | Issue | Result |
|---|---|---|
| 1 | Allow users to have access to AI models of historical women figures in computer science history | PASS |
As a user, I can use this web application on mobile as well as desktop with ease.
| Test | Issue | Result |
|---|---|---|
| 1 | Ensure media query is apt for desktop screens | PASS |
| 2 | Ensure media query is apt for mobile screens | PASS |
As a professional in the tech industry, I want to learn about the achievements and obstacles faced by women in this field to improve diversity and inclusion in my workplace.
| Test | Issue | Result |
|---|---|---|
| 1 | Design the web application to be inviting to a diverse number of users | PASS |
As a user, I can communicate with the AI model in an online chat environment.
| Test | Issue | Result |
|---|---|---|
| 1 | Design the chat environment so that users feel they are speaking to another user | PASS |
As someone interested in history, I want to learn about the contributions of women in the development of technology throughout history.
| Test | Issue | Result |
|---|---|---|
| 1 | Allow users to have access to AI that teaches the historical role of women in the field of computer science | PASS |
As a user, I can switch between different AI character models.
| Test | Issue | Result |
|---|---|---|
| 1 | Create a variety of historical figures programmed in the AI chat environment for users to access | PASS |
As a parent, I want to expose my child to positive role models in the tech industry in order to encourage their interest in the field.
| Test | Issue | Result |
|---|---|---|
| 1 | Create a learning environment using ChatGPT AI modelled off tech industry historical figures | PASS |
Lighthouse testing reports:
- Home page (desktop):
- Home page (mobile):
- Selection page (desktop):
- Selection page (mobile):
- Chat page (desktop):
- Chat page (mobile):
- Internal and external links were all checked and found to be working correctly.
- Responsiveness was checked on a range of desktop and mobile devices and found to be functioning correctly.
-
W3C HTML Code Validator
- The deployed URL was run through the HTML Markup Validation Service and returned two errors which are related to Flask's template variables.
-
W3C CSS Jigsaw Validator
- CSS code was tested with W3C CSS Validator via direct input and returned no errors.
-
JSHint validator
- JavaScript code was tested with JSHint and returned no errors.
-
Python Validator
- All Python files across application have by validated during the development process using
pycodestyle.
- All Python files across application have by validated during the development process using
All fixed bugs can be found here.
Link will eventually be added with fixes in Kanban board.
There is a margin issue on mobile screens lower than 430px.
Other than this, there are no other known bugs or issues.
The languages used in this project are:
- Flask: Flask is a Python-based web application framework tool designed to be lightweight, flexible and easy to use.
- ChatGPT: ChatGPT is an AI model that interacts with users using over a trillion parameters and complex algorithms over many subjects.
- ChatGPT API: API integration to allow developers to dynamically use ChatGPT in their projects.
- Figma: Figma is a web-based design and prototyping tool used for creating UI, desktop and mobile app designs.
- Bootstrap: Bootstrap is a CSS library used to faciliate the design responsiveness of a web application and mobile-first web pages.
- Google Fonts: used to import font utilised throughout site.
- Font Awesome: used for icons across website.
- GitHub: used to store, develop and maintain project code.
- Heroku: a cloud-based platform that allows developers to store, manage and deploy web applications.
The development environment used for this project was GitPod and VSCode. Regular commits and pushes to Github have been employed to be able to track and trace the development process of the website, as well as the creation of various branches by various members of the hack-a-thon team to be able control the development process of the project using pull requests.
For local deployments instructions shall be written below, along with instructions with deployment to Heroku, the hosting service used to deploy this particular website. Heroku was chosen as the hosting service due to its database maintenance capabilities.
Note: Please git clone project. This can be done by going to the GitHub repository, copying and pasting the available URL link (https://github.com/keironchaudhry/women-in-tech-hackathon.git) and running the command git clone https://github.com/keironchaudhry/women-in-tech-hackathon.git in your IDE terminal.
Then use the following instructions:
- Use the terminal in your IDE (GitPod or VSCode) and go to the root directory of your project.
- Make sure you're up to date with the latest changes by running the command
git pull origin main. - Add a new file called 'env.py' to the root directory of you project folder (at the same level as the app.py file).
- Add the following to your env.py file and save it:
import os
os.environ["ENV_DEBUG"] = "True"
os.environ["IP"] = "0.0.0.0"
os.environ["PORT"] = "5000"
You will also need to add the ChatGPT API key - this can be accessed via request to the hack-a-thon backend team, or by entering your own.
- Install the project requirements by running the command
pip install -r requirements.txt - Start the development server by running the command
python app.py - If that's all worked, a few messages should pop up to say the server's running.
- If you're working locally (with VSCode or installed on your computer) one of the messages should say something like "Running on http://127.0.0.1:5000". Copy that address and paste it into your browser to view the site.
- If you're working in GitPod, when you start the server a popup should appear in the bottom right giving you a few options. Click "Open Browser" to view the site in a new browser window.
Deployment to Heroku can be done with the following guideline:
- Create an account on Heroku
- Create an app and give it the desired name and select a region
- No database is required for this project.
- Create a
Procfilewith the following text:web: gunicorn app:app - Make sure you add your environment variables (env.py) to Heroku's Config Vars
- Connect the app to GitHub, search for the repository and then enable automatic deploys from
main(or you can manually deploy). - Click 'deploy' to deploy your application to Heroku for the first time.
- Home Page picture : taken from Unsplash Author : Priscilla Du Preez
This project was created collaboratively by TeamAI: Erik, Kieron, Liam, Amen, Wesley, Ben and Charley