Project Info

DripAI

This project did not submit a demo video on Devpost.

Inspiration

As Berkeley students, it is often difficult to gauge the weather and decide what clothes to wear. Students end up wearing clothes that suit either the morning chill or the afternoon heat, and it can be frustrating and uncomfortable while they perform their daily activities. An app/website that helps people to select the right clothes for the varying weather conditions would be extremely helpful.

What it does

DripAI solves this problem by making accurate recommendations on what clothes to bring/wear based on daily weather conditions and a person’s style. The user first answers questions about where they live, what time they will be outside for, what activities they will be doing out, and what clothes they prefer to wear. The user’s location and time they will be out are fed into a weather API, and an LLM makes recommendations and an image that displays what clothes would be ideal in the given weather conditions.

How we built it

We used a Weather API to generate a result of the weather at a given location and time range. This information is fed into the Llama LLM from TogetherAI, which generates a recommendation. Stable diffusion is then used to generate an image based on the recommendation. This is outputted to the user via the website we created using Reflex.

Challenges we ran into

Integrating the front end and the back end together using State Ensuring that the LLM outputted accurate recommendations based on the user’s data. Handling the delay in generating answers from the LLM.

Accomplishments we're proud of

Able to successfully generate an image to illustrate the response given by the AI Developed an easy-to-use UI to get users their outfit plans ASAP Combined the response from the Llama LLM and the UI into a product that users can easily interact with.

What we learned

We learned how to extract information from an API. Using the info from the API, we learned how exactly to feed it into the LLM. Using state-of-the-art models to power our product and output recommendations

What's next

A user login system that customizes their wardrobes online & saves input data so that the user can run the app with the same parameters for similar days Allow users to upload pictures of themselves to see how the suggested outfits would look on them A VR try-on to allow users to see their recommended fit in real-time A way to share and comment on fits in a social media sense, from which we can feed this data back into the recommendation system

Welcome to Reflex!

This is the base Reflex template - installed when you run reflex init.

If you want to use a different template, pass the --template flag to reflex init. For example, if you want a more basic starting point, you can run:

reflex init --template blank

About this Template

This template has the following directory structure:

├── README.md
├── assets
├── rxconfig.py
└── {your_app}
    ├── __init__.py
    ├── components
    │   ├── __init__.py
    │   └── sidebar.py
    ├── pages
    │   ├── __init__.py
    │   ├── dashboard.py
    │   ├── index.py
    │   └── settings.py
    ├── state.py
    ├── styles.py
    ├── templates
    │   ├── __init__.py
    │   └── template.py
    └── {your_app}.py

See the Project Structure docs for more information on general Reflex project structure.

Adding Pages

In this template, the pages in your app are defined in {your_app}/pages/. Each page is a function that returns a Reflex component. For example, to edit this page you can modify {your_app}/pages/index.py. See the pages docs for more information on pages.

In this template, instead of using rx.add_page or the @rx.page decorator, we use the @template decorator from {your_app}/templates/template.py.

To add a new page:

Add a new file in {your_app}/pages/. We recommend using one file per page, but you can also group pages in a single file.
Add a new function with the @template decorator, which takes the same arguments as @rx.page.
Import the page in your {your_app}/pages/__init__.py file and it will automatically be added to the app.

Adding Components

In order to keep your code organized, we recommend putting components that are used across multiple pages in the {your_app}/components/ directory.

In this template, we have a sidebar component in {your_app}/components/sidebar.py.

Adding State

In this template, we define the base state of the app in {your_app}/state.py. The base state is useful for general app state that is used across multiple pages.

In this template, the base state handles the toggle for the sidebar.

As your app grows, we recommend using substates to organize your state. You can either define substates in their own files, or if the state is specific to a page, you can define it in the page file itself.

Analysis

Compare with all teams

View

Metric

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only

PythonIn code

1 of 1 appear in the indexed code.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

24 KB

Source files

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.