# Project export: Dressify This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 10.0 - Tagline: Dressify is an A.I. Outfit Generator and Stylist. It's goal is to help you choose what to wear on the days where you just can't make it work! - Devpost: https://devpost.com/software/dressify - GitHub: https://github.com/NonBlu/Dressify-Cal-Hacks-10.0 - Team: 4 GitHub contributor(s) — Sophia (9 commits), NonBlu (7 commits), Carol Li (4 commits), Martin Tran (1 commits) ## Devpost submission (written by the team) ### Overview Sophia Zheng, Aiden Sallows, Martin Tran, Carol Li ### Inspiration We've all been there: rushing around and running late, with piles of clothes scattered around the room, only to reach the realization that you have absolutely nothing suitable to wear. Dressify's mission is to provide a personalized experience by harnessing AI to curate outfits that truly resonate with your style. ### What it does Using this app, Dressify creates an AI generated outfit perfect for any user. By analyzing a series of user entries, this program will compare their desired clothing item to a database of 44,000 different clothing. Finding the best match for the given item, this program will create a thoroughly detailed prompt that then connects with together.ai’s API to create an AI image that represents a perfect outfit. Target audience: Anyone looking for unconventional style inspiration! Tools Reflex, together.ai, Python, Figma, Kaggle, Github, VSCode, Jupyter Notebook ### How we built it 1) Brainstorm(coming up with project scope, audience), and researching into the data to use 2) Frontend: prototyping through Figma, connecting mockups with Reflex 3) Backend (Data): Cleaning data (drop NaN values, converting data types, etc), accessing user input and using that information to filter CSV file, and creating a detailed script to generate outfit text 4) Backend (together.ai): input the detailed text to the together.ai model to generate image, implement photos on the web app 5) Deployment: connecting frontend and backend with Reflex ### Challenges we ran into Originally, we wanted to use an LLM/Clustering model but did not due to time constraints and lack of numerical data Generating the photos on the web app was time-consuming Integrating our design framework within Reflex (using python) Identifying when to narrow our vision ### What we learned Good teamwork and communication go a long way Web development in all forms-frontend, backend, etc Industry knowledge, sponsors provided great insight about their programs ### What's next Implementing more features (creating a wardrobe, individual user accounts, etc) Spreading the word, and getting users to experience our project! Parsing user entry to prevent confusion and/or error ## README (from the GitHub repository) # Dressify- CalHacks 10.0 2023 Submission :scarf: Sophia Zheng, Aiden Sallows, Martin Tran, Carol Li ## Inspiration :thought_balloon: We've all been there: rushing around and running late, with piles of clothes scattered around the room, only to reach the realization that you have absolutely nothing suitable to wear. Dressify's mission is to provide a personalized experience by harnessing AI to curate outfits that truly resonate with your style. ## What it does :dizzy: Using this app, Dressify creates an AI generated outfit perfect for any user. By analyzing a series of user entries, this program will compare their desired clothing item to a database of 44,000 different clothing. Finding the best match for the given item, this program will create a thoroughly detailed prompt that then connects with together.ai’s API to create an AI image that represents a perfect outfit. **Target audience**: Anyone looking for unconventional style inspiration! ## Tools :hammer_and_pick: Reflex, together.ai, Python, Figma, Kaggle, Github, VSCode, Jupyter Notebook ## How we built it: :computer: 1) Brainstorm(coming up with project scope, audience), and researching into the data to use 2) Frontend: prototyping through Figma, connecting mockups with Reflex 3) Backend (Data): Cleaning data (drop NaN values, converting data types, etc), accessing user input and using that information to filter CSV file, and creating a detailed script to generate outfit text 4) Backend (together.ai): input the detailed text to the together.ai model to generate image, implement photos on web app 5) Deployment: connecting frontend and backend with Reflex ## Challenges we ran into :monocle_face: - Originally, we wanted to use an LLM/Clustering model, but did not due to time constraints and lack of numerical data - Generating the photos on the web app was time consuming ## What we learned :bulb: - Good teamwork and communication go a long way - Web development in all forms-frontend, backend, etc - Industry knowledge, sponsors provided great insight about their programs ## What's next :arrow_right: - Implementing more features (creating a wardrobe, individual user accounts, etc) - Spreading the word, and getting users experience our project! ## Detected evidence (automated analysis) Indexed codebase: 39 recognized source files, 82 KB. - CSS (language) — detected in the code - JavaScript (language) — detected in the code - Next.js (technology) — detected in the code - Python (language) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code ## Codebase structure (from repository index) ### Files (55 of 55) ``` .gitignore .web/.gitignore .web/components/reflex/chakra_color_mode_provider.js .web/components/reflex/radix_themes_color_mode_provider.js .web/env.json .web/jsconfig.json .web/next.config.js .web/package.json .web/pages/_app.js .web/pages/_document.js .web/pages/404.js .web/pages/index.js .web/pages/results.js .web/pages/selections.js .web/pages/wardrobe.js .web/postcss.config.js .web/public/fonts .web/public/OFL.txt .web/public/README.txt .web/reflex.json .web/styles/styles.css .web/styles/tailwind.css .web/tailwind.config.js .web/utils/client_side_routing.js .web/utils/components.js .web/utils/context.js .web/utils/helpers/dataeditor.js .web/utils/helpers/range.js .web/utils/state.js .web/utils/theme.js all_clothes.db assets/fonts assets/OFL.txt assets/README.txt clothes_reflex.csv dressify/__init__.py dressify/all_clothes.db dressify/clothesDatabase.py dressify/components/__init__.py dressify/components/sidebar.py dressify/dressify.py dressify/pages/__init__.py dressify/pages/dashboard.py dressify/pages/index.py dressify/pages/settings.py dressify/results.py dressify/selections.py dressify/state.py dressify/styles.py dressify/templates/__init__.py dressify/templates/template.py dressify/wardrobe.py README.md requirements.txt rxconfig.py ``` ### Dependencies - .web/package.json: @chakra-ui/icons@^2.0.19, @chakra-ui/react@^2.6.1, @chakra-ui/system@^2.5.7, @emotion/react@^11.11.0, @emotion/styled@^11.11.0, autoprefixer@10.4.14, axios@1.4.0, focus-visible@5.2.0, framer-motion@^10.16.4, json5@2.2.3, next@14.0.1, next-sitemap@4.1.8, next-themes@0.2.0, postcss@8.4.31, react@18.2.0, react-dom@18.2.0, socket.io-client@4.6.1, tailwindcss@^3.3.2, universal-cookie@4.0.4 - requirements.txt: reflex@>=0.3.4 ### Recent commits (newest first) - Update README.md - deleted import PIL - is this right? - Update README.md second try :( - puuuuuuuush - finally oh my god - yall need my .web - 338PM generate button changed - latest commit 215AM - added clothes.db - commit from branch old - Merge branch 'main' of https://github.com/NonBlu/Dressify-Cal-Hacks-10.0 - old commit from carol branch to main - EVERYONE GET THIS ONE - Create wardrobe.py - 646PM commit - commit at 6:30PM - new commit 4PM - Merge pull request #1 from NonBlu/sofa_branch - message ## Key source files (fetched from GitHub, selected and truncated for size) ### requirements.txt ``` reflex>=0.3.4 ``` ### .web/package.json ``` { "name": "reflex", "scripts": { "dev": "next dev", "export": "next build", "export-sitemap": "next build && next-sitemap", "prod": "next start" }, "dependencies": { "@chakra-ui/icons": "^2.0.19", "@chakra-ui/react": "^2.6.1", "@chakra-ui/system": "^2.5.7", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "axios": "1.4.0", "focus-visible": "5.2.0", "framer-motion": "^10.16.4", "json5": "2.2.3", "next": "14.0.1", "next-sitemap": "4.1.8", "next-themes": "0.2.0", "react": "18.2.0", "react-dom": "18.2.0", "socket.io-client": "4.6.1", "tailwindcss": "^3.3.2", "universal-cookie": "4.0.4" }, "devDependencies": { "autoprefixer": "10.4.14", "postcss": "8.4.31" } } ``` ### dressify/pages/index.py ```python """The home page of the app.""" from dressify import styles from dressify.templates import template import reflex as rx @template(route="/", title="Home", image="/github.svg") def index() -> rx.Component: """The home page. Returns: The UI for the home page. """ with open("README.md", encoding="utf-8") as readme: content = readme.read() return rx.markdown(content, component_map=styles.markdown_style) ``` ### .web/pages/index.js ```javascript import { Fragment, useContext, useEffect, useRef, useState } from "react" import { useRouter } from "next/router" import { Event, getAllLocalStorageItems, getRefValue, getRefValues, isTrue, preventDefault, refs, spreadArraysOrObjects, uploadFiles, useEventLoop } from "/utils/state" import { ColorModeContext, EventLoopContext, initialEvents, StateContext } from "/utils/context.js" import range from "/utils/helpers/range.js" import "focus-visible/dist/focus-visible" import { Box, Button, Center, HStack, Image, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, SimpleGrid, Text, VStack } from "@chakra-ui/react" import { getEventURL } from "/utils/state.js" import { MoonIcon } from "@chakra-ui/icons" import NextHead from "next/head" export default function Component() { const state = useContext(StateContext) const router = useRouter() const [ colorMode, toggleColorMode ] = useContext(ColorModeContext) const focusRef = useRef(); // Main event loop. const [addEvents, connectError] = useContext(EventLoopContext) // Set focus to the specified element. useEffect(() => { if (focusRef.current) { focusRef.current.focus(); } }) // Route after the initial page hydration. useEffect(() => { const change_complete = () => addEvents(initialEvents()) router.events.on('routeChangeComplete', change_complete) return () => { router.events.off('routeChangeComplete', change_complete) } }, [router]) return ( {isTrue(connectError !== null) ? ( {`Connection Error`} {`Cannot connect to server: `} {(connectError !== null) ? connectError.message : ''} {`. Check if server is reachable at `} {getEventURL().href} ) : ( )}
{`Dressify`} {`GETTING STARTED`} {`browse wardrobe`} {`filter your selection`} {`generate your outfit`}
{`Reflex App`} ) } ``` ### rxconfig.py ```python import reflex as rx config = rx.Config( app_name="dressify", ) ``` ### .web/postcss.config.js ```javascript module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` ### .web/next.config.js ```javascript module.exports = {basePath: "", compress: true, reactStrictMode: true, trailingSlash: true}; ``` ### .web/tailwind.config.js ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./pages/**/*.{js,ts,jsx,tsx}"], theme: null, plugins: [ ], }; ``` ### dressify/state.py ```python import reflex as rx class State(rx.State): """The app state.""" def onclick(self): return rx.redirect("/selections") def handle_form(self, form_data): print(form_data) ``` ### dressify/clothesDatabase.py ```python # from stream_sqlite import stream_sqlite # import httpx # # Iterable that yields the bytes of a sqlite file # def sqlite_bytes(): # with httpx.stream('GET', 'http://www.parlgov.org/static/stable/2020/parlgov-stable.db') as r: # yield from r.iter_bytes(chunk_size=65_536) # # If there is a single table in the file, there will be exactly one iteration of the outer loop. # # If there are multiple tables, each can appear multiple times. # for table_name, pragma_table_info, rows in stream_sqlite(sqlite_bytes(), max_buffer_size=1_048_576): # for row in rows: # print(row) ``` [27 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]