Story map

Engine architecture

Frontend:

UI:

Once the user signs in, they can access most major features from the Home screen. Users can upload clothing items via camera or gallery, with background removal and color detection handled automatically. Items are then tagged using a mix of preset and custom fields and added to the wardrobe view grid. From there, users can log outfits by selecting garments and optionally uploading a photo (shared to the social feed). The recommendation view shows generated outfits based on weather and past wear, with options to shuffle, swap, or add items. The analytics view displays usage stats and wear frequency via charts, while the declutter view suggests rarely worn items for removal. Recent outfits are shown as a scrollable list, and the social feed view shows shared outfits with the option to like posts. Every view communicates to the backend via the API Layer.

Sign-In

• Sign-In View
• Username Validation

Home Page

• Navbar
• Parent home page component
• Pre-fetched recommended outfits component
• Feed - list view
• Feed - individual item

Upload and Tag Item

• Choose Tags and Categories for Item
• Busines Logic and Data Manipulation
• Primary and Secondary Color Displays
• Fetching Image processing API, converting color values into local color variable to display

Log an Outfit

• Component
• Function to make POST request to log outfit to backend

Viewing Previous Outfits

• Recent Outfits Display
• Fetching Recent Outfits API
• Process and Load in images from API

Recommendation View

• Display each clothing item with ability to delete or swap item
• Add new item to outfit
• Confirm Item
• Helper Function Handlers
• Rotate through recommended outfits

Viewing all wardrobe items

• Main scrollable component
• Function to GET wardrobe info from backend
• Individual item detailed view component

Wardrobe analytics

• Parent component
• Total utilization component
• Type utilization component
• Most reworn component
• Getting utilization information from the backend

Declutter Frontend

• JSON Response Structs
• Declutter View
• Garment Deletion
• Fetching Declutter API Call (Modification of Ryan’s Analytics Frontend for API calling)
• Convert Counts to Text
• Posting Declutter API Call (Adapted from existing parts of the project like LogOutfit and GenerateView which make post calls)

Core Engine

Analytics

The analytics component of the backend returns insightful statistics about clothing wearing habits to the frontend for display. This is performed by calling an API endpoint on our server. The first piece of data returned is the total percent of the wardrobe the user has utilized within the past month. Following this, the server returns for every type of clothing that a user has in their wardrobe, the percent utilization for it in in the last month (i.e, bottoms, dresses, etc.). Finally, the backend returns for each type the garment that has been worn the most in the month along with the number of wears.

Beyond providing wardrobe statistics, the analytics component also provides declutter recommendations to a separate view on the frontend via a different endpoint than the utilization information (see API documentation for more detail). The declutter recommendations consist of suggesting that the user delete items that were last worn more than a month ago (or never worn at all) and orders them in ascending order by the number of times they have been worn. Note, this recommendation will not include items that were added to the wardrobe within the last month so the backend does not suggest that the user remove items they have just acquired and have not had time to wear.

Analytics Backend

• SQL Query (Utilization)
• SQL Query (Rewears)
• Query Execution Function
• Python Data Manipulation (Utilization)
• Python Data Manipulation (Rewears)
• API Controller

Declutter Backend

• Declutter Recommendation API Endpoint Controller
• Clothing Item Soft Delete API Endpoint Controller
• SQL Query
• API Controller Endpoint
• Query Execution Call
• Query Execution Function

Recommendations:

The recommendation component of the backend relies on an algorithm pipeline with weather filtering, item ranking, outfit formation, and layering stages to suggest pre-formed outfits to the user. The weather filtering stage relies on the OpenWeatherMap API (see below) for forecast insights and outfit formation utilizes color data extracted from a clothing image using the ColorThief library.

For a more detailed treatment of the recommendation algorithm, please consult its specification in the Wiki

Backend

• Reranking Section of Query
• Ranking SQL Query
• Query Execution Function
• Python Data Manipulation
• API Controller

Logging Outfits:

Users can log their outfit by selecting items in their wardrobe or choosing one of the recommended outfits on the home screen. By logging an outfit, the analytics component can then use that data to return the insights and statistics about the user's wear history. Moreover, it also allows the user to see their previous outfits.

Back End Source Code

• Log Outfit API Endpoint Controller

Previous Outfits:

By calling an API endpoint, the backend will return to the user up to 15 of their most recently worn outfits with a timestamp for each. The outfits are sorted in reverse order by time (i.e, the most recently worn outfit comes first).

Backend Code

• SQL Query
• Query Execution Function
• Python Data Manipulation
• API Controller

Closet CRUD:

The user can manage their wardrobe by uploading their clothes with additional metadata like fit, tags etc., view their clothes, and delete them. When storing clothing items, we use convert the RGB value extracted by ColorThief in image processing stage to CIELAB for better presentation of differences between different colors, and we would convert it back to RGB when presenting these colors to the client.

We also recommend users what clothing item to delete based on how often they have worn a particular piece of clothing in the past month.

Back End Source Code

• Clothing Item Creation API Endpoint Controller
• Image Save in Temporary Directory Helper Function
• RGB to CIELAB Conversion Function
• Get User closet API Endpoint Controller
• CIELAB to RGB Conversion Function

Social Features:

When logging an outfit, users can choose to also upload an outfit picture of them wearing the items that they've selected. This is 'posting' onto the feed. Outfit posts will show up in the 'Recent Activity' feed at the bottom of the home page, where other users will be able to see the outfit image as well as the wardrobe items that were part of each outfit. Further, users are able to interact with the posts, by liking (or unliking posts).

Back End Source Code:

• Outfit model change
• Save outfit image
• Controller to return the feed
• Controller to handle liking outfit posts
• Controller to handle unliking outfit posts

Front End Source Code:

• Main feed component
• Functions to query data from the backend
• Feed item component and like handler

Image Processing:

After selecting an image or taking a photo of a clothing item, the image is sent and first have its background removed, giving the clothing item image a clean look. Then, its primary and secondary is extracted for color matching. The user also have the option to choose another image, and this process will repeat until the user settles for a satisfactory image and officially creates the clothing item.

Back End Source Code:

• Image process API Endpoint Controller (Color Extraction + Background Removal)
• Save image in temp directory helper function
• Image Background Removal helper function
• Color Palette Extraction helper function
• Image Compression helper function

Self-Hosted Server Instance

Our Django Python backend is not hosted on a 3rd-party cloud platform, but instead on a server configured by one of our team members (Brian) using their own hardware. The server is accessed by the front end using ngrok API endpoints.

Database (PostgreSQL):

Our Django API connects to and performs queries on a Postgres Database. We define the following tables for persistent data storage for our application:

Table	Description
core_users	Records user ids and usernames
core_clothing	Records data about individual garments such as the data created, color, fit, subtype, type, occasion, weather, precipitation, and its owner.
core_outfit	Records outfits uniquely and their dates worn
core_outfititem	Tracks the garment-outfit relation. That is, it records what garments were worn in what outfits
core_tags	Custom tags created by the user as additional metadata, associated with garments

Django database setup for Postgres

File Storage (Cloudflare R2 Object Storage):

Image processing and retrieval is critical to Threadline. Therefore, we rely on Cloudflare's R2 Object Storage to host image files of user clothing. On file upload, the backend will perform image processing tasks like color detection and background removal and will then push the processed image to R2 for storage and record the file path in the database. On the frontend, the app will receive image information from the server in the form of a file path. It will use this path in combination with the domain for the R2 object storage to fetch the image directly from cloudflare.

Example call to R2 from frontend

OpenWeatherMap API

Threadline uses the /weather endpoint from the OpenWeatherMap API for current weather insights based on the user's location.

The user's location (latitude and longitude) are retrieved on their device, which is passed via query parameter to the backend during any HTTP GET request to /recommendation/get, which will (1) check if we have weather data cached for that location within the last 6 hours, and if not, (2) makes a call to OpenWeatherMap's /weather endpoint to retrieve the current weather, and (3) caches it for future use.

This information is then used as part of the context that goes into our outfit recommendation algorithm, so that we can recommend outfits that are suitable for the current weather.

For a more detailed treatment of this API call and example source code for it, please see the API Documentation Section