## Inspiration

Learning about some environmental impact of the retail industry led us to wonder about what companies have aimed for in terms of sustainability goals. The textile industry is notorious for its carbon and water footprints with statistics widely available. How does a company promote sustainability? Do people know and support about these movements?

With many movements by certain retail companies to have more sustainable clothes and supply-chain processes, we wanted people to know and support these sustainability movements, all through an interactive and fun UI :)

## What it does

We built an application to help users select suitable outfit pairings that meet environmental standards. The user is prompted to upload a picture of a piece of clothing they currently own. Based on this data, we generate potential outfit pairings from a database of environmentally friendly retailers. Users are shown prices, means of purchase, reasons the company is sustainable, as well as an environmental rating.

## How we built it

**Backend**: Google Vision API, MySQL, AWS, Python with Heroku and Flask deployment

Using the Google Vision API, we learn of the features (labels, company, type of clothes and colour) from pictures of clothes. With these features, we use Python to interact with our MySQL database of clothes to both select a recommended outfit and additional recommended clothes for other potential outfit combinations.

To generate more accurate label results, we additionally perform a Keras (with Tensorflow backend) image segmentation to crop out the background, allowing the Google Vision API to extract more accurate features.

**Frontend**: JavaScript, React, Firebase

We built the front-end with React, using Firebase to handle user authentications and act as a content delivery network.

## Challenges we ran into

The most challenging part of the project was learning to use the Google Vision API, and deploying the API on Heroku with all its dependencies.

## Accomplishments that we're proud of

Intuitive and clean UI for users that allows ease of mix and matching while raising awareness of sustainability within the retail industry, and of course, the integration and deployment of our technology stack.

## What we learned

After viewing some misfit outfit recommendations, such as a jacket with shorts, had we added a "seasonal" label, and furthermore a "dress code" label (by perhaps, integrating transfer learning to label the images), we could have given better outfit recommendations. This made us realize importance of brainstorming and planning.

## What's next for Fabrical

Deploy more sophisticated clothes matching algorithms, saving the user's outfits into a closet, in addition to recording the user's age, and their preferences as they like / dislike new outfit combinations; incorporate larger database, more metrics, and integrate the machine learning matching / cropping techniques.
## Inspiration

The main inspiration of the idea was in our own personal experience when we are in the middle of a live lecture or watching a pre recorded zoom lecture, and we had a question regarding the topic. The process of googling a result one the side while the lecture is going on is usually a herculean task that involves managing multiple tabs and usually always falling behind on the notes. Our website solves this problem.

## What it does

Zazu is a video call platform designed for teachers and students. It allows students to have access to an AI TA right in their video call so that they can ask questions to the TA while not disturbing the teacher and the flow of the lecture. The teacher can also use a slew of AI powered features, such as generating quiz questions on demand to ask the students to check engagement. The teacher can also generate polls in lecture simply by asking Zazu to "generate poll" and a poll will be sent to all students instantly. At the end of the lecture once a student leaves call, a summary is created of the lecture with bullet point notes for the student, basically eliminating the need for students to manually take notes. The video call platform also supports all the features of Zoom and has AI features built on top of it.

## How we built it

The front end of the website was built using the Dolby.io framework and React which allowed us to quickly implement most of the video call features. The backend is powered by Flask where we make multiple open ai requests to their Davinci model to get our results. We use Firebase Cloud Firestore to store our data and socket.io to communicate data between our server and client. We hosted our server on [server]. Most of the development revolved around building out features in React for the front end and building out API endpoints in Python on the backend. We heavily use OpenAI's Davinci LLM and a lot of time was spent prompt engineering to get the data that we require for each of our different features.

## Challenges we ran into

The main challenge we ran into was getting the data from the Davinci LLM in a format that was consistent with every API call. We had to spend a large part of our time designing specific prompts for the LLM so that we get the response in the same format every time regardless of the topic of the lecture. We also had to spend a decent chunk of time on parsing the transcript of the lecture and filtering out meaningless remarks and noise in the data. To solve this, we had to use NLP filters in the backend and models to periodically summarize the transcript which makes it easier to send to the LLM to get results.

## Accomplishments that we're proud of

We are extremely proud of the verbal speech-to-text commands that we built to help support teachers during their lecture. By simply invoking the command, "generate quiz", a multiple choice question about the topic of the lecture is generated by the Davinci LLM and instantly sent to all the students on call. This is powered by a slew of APIs and frameworks which is extremely impressive since our team is made up of mostly beginner hackers and this is most of our's first hackathon.

## What we learned

The main concept we learned was how to build an end-to-end application with a complete feature set. We also got a significant amount of experience in using OpenAI's APIs and Dolby.io framework to create a front end video call app. Large portion of the time was dedicated to bug fixing and we learned a lot about version control and how to build a large project in parallel with different members contributing to different features.

## What's next for Zazu

Zazu has the potential to become a great tool for educators around the world. The immediate next steps are to expand the feature set and make it complete with all the features of Zoom. We would also want to add support for using our feature set not only on video calls but also on pre-recorded lectures. Then we would ideally publish the app and market it to teachers, specifically college professors where this would largely come into play.
## Inspiration

At the moment, the fashion industry is a mess. In terms of sustainability, 20% of Global Waste Water comes from textile dyeing according to the UN Environmental Program. Furthermore, 85% of textiles are thrown away or dumped into landfills, including completely unused clothing. However, one major concern is that the fact 60% of clothing does not even have the ability to be recycled.

One of the other major issues is costs in order to remain sustainable. For the most part, buying sustainable clothes means paying a premium, which makes it hard for most people to afford. Sustainable clothing is not affordable. On top of that, Fast Fashion higher costs due to extremely fast turn around times, further reinforcing unsustainable fashion. Getting cheap sustainable clothing is hard by itself, forget trendy clothing due to current fast fashion.

In consideration of all of these issues brought us to create a sustainable solution: Fashion Flipped or F^2.
Our product is based on the concept of up cycling previous clothing in order to match up and coming trends, while keeping costs low with reused clothing. A network of vendors are asked on application basis to present their creative portfolio, who then design new clothing for consumers. On the consumer end, a subscription based fee is charged and following a quick survey, our algorithm is able to determine the preferences of the user. Based on our inventory of vendor received up cycled clothing, we present the user monthly a customized box of outfits depending on the selected tier level. At the end of the month, the clothing is returned and a new box of outfits is provided.

## What it does

For our UI, we use MUI library to help with UI creation and component creation. For our authentication, you can go ahead and press the login in button to trigger the popup to sign in with 0Auth. Following your login, you will be prompted with a new user navigation at the top. You can go ahead and start off by going to your profile to select some pieces of clothing that you would like. After completing this quiz, the algorithm will have calculated and stored your preferences in Convex.

The algorithm uses OpenAI's ML model to test data minimizing real design preference decision making. After each profile question is answered, the data is stored in Convex in a profile and is then later rendered for customization. Using the average score, the customization algorithm will index the database for closest scores.

For Stripe, using secure form fields, the UI passes a payment token along with user to the Vercel server which then talks directly to Stripe for the transaction. At the moment, we are facing some Stripe deployment issues to the production website so please check out the live demo during judging if you are interested.

## How we built it

FashionFlipped is built using convex, a serverless backend, Auth0 for authentication, and a React.JS frontend. The dataset of clothing items was prefilled using OpenAI's CLIP machine learning model using test data through a process that mimics the way real designs would be input. From there, we use custom convex functions to build a profile of the user's style by averaging preferred styles selected during onboarding. Another set of convex functions calculates the cosine similarity between the user's style profile and the other clothing items to pick out an assortment of clothes users are comfortable with while introducing new styles.

**Primary Features**

* Auth0 Authentication
* Convex (Serverless Backend), populating with users
* Our Clothing Customization ML Model/Algorithm, populating average ratings in results in Convex
* Stripe API for payment transactions
* Vendor Registration, populating users in Convex
* React-Routing for passing through screens and sending data through screens

## Challenges we ran into

After experimenting with larger datasets we figured out convex has a strict memory limit. The combination of intense runtime calculations and large dataset rows due to the CLIP features meant we easily hit the limit. This prevented us from demoing the larger dataset but did push us to build more efficient operations by sharing the computing between the client and server.

Another challenge we encountered was the usage of a new technology. Trying out a new technology like Convex meant we did not have nearly as much experience with it than other products. The docs were recently created, so our unfamiliarity pushed us into a lot of learning with the platform. Convex was unfamiliar, but also serverless backends were a completely new concept that we had to learn rapidly to implement the technology.

Another major issues we had was deploying the project to Vercel. Due to Github ownership issues, unfamiliarity with implementing a serverless backend to production and server management issues, Vercel deployment had some challenges. Declaring environment variables and reassigning the deployment command in Vercel helped solved the issues we were having with Convex and were able to make it work.

## Accomplishments that we're proud of

Our recommendation engine is exceptional. It learns your style preferences with very little input and allows us to categorize a large selection of changing styles, creating a seamless user experience. By utilizing cutting-edge technology, we are able to achieve high accuracy and adaptability presenting our platform as a great choice for anyone.

* Convex (Serverless Backend), populating with users
* Our Clothing Customization ML Model/Algorithm, populating average ratings in results in Convex
* Stripe API for payment transactions
* Vendor Registration
* Vercel Deployment for Live Application
* Passing data between routes with React-Routing
* Responsive, Dynamic UI

## What we learned

We learned how to integrate new services such as a server-less backend such as Convex. We also learned how to integrate a recommendation algorithm using OpenAI and Python into React. Furthermore, we learned the different considerations we had to take in order to deploying to a live domain.

All of us also learned a ton about UI. Developing efficient UI with so many layers overwriting each other became trouble, especially when importing difference components. We had much troubleshooting with being able to center select items or apply the proper style. After having so much practice with UI across the board, it likely will be much faster development going forward.

## What's next for FashionFlipped

We plan to add a feedback form to provide more user input into our algorithm for more accurate customization. On top of that, we plan on creating a vendor side platform to view orders and manage demanded styles from admin. Creating an admin portion of the platform will become important as well to manage what trends and inventory is being created by vendors. We hope to deploy this as a business idea, and how to learn the logistical and technical aspects of running a business with a more sophisticated
sophisticated supply chain.