diff --git a/.gitignore b/.gitignore index 4683401..3b462cb 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,3 @@ Thumbs.db # Vite vite.config.js.timestamp-* vite.config.ts.timestamp-* - -# Local notes (not pushed) -docs/ diff --git a/docs/chaewon_chatlog.md b/docs/chaewon_chatlog.md new file mode 100644 index 0000000..a314ffa --- /dev/null +++ b/docs/chaewon_chatlog.md @@ -0,0 +1,213 @@ +# AI Development Chat Log — AI Florist + +> Course submission: Cursor **My chat** log + +**Tool:** Cursor + +--- + +## 1. Project setup & upload page UI + +### My chat + +> Implement the upload page from Figma (Moodboard and SNS Feed variants). Reuse existing tokens and components; keep it responsive, not hard-coded pixels. + +> Center the description card and vase horizontally. Display the vase SVG as a plain image. + +### Outcome + +- Initial SvelteKit scaffold, upload route shell, `MoodboardGrid.svelte`, `SnsFeedUpload.svelte` + +--- + +## 2. Page flow scaffold + +### My chat + +> Add the full page flow: create → upload → message → generating → options → result → map. Match the existing dummy-page pattern for any missing routes. + +> Shared header with step nav; commit message should mention header scaffolding. + +### Outcome + +- Routes for message, generating, options, map; shared layout header + +--- + +## 3. Backend flower-flow pipeline + +### My chat + +> Build the backend (not UI) for the flower-flow pipeline. Plan first, don't do everything at once. Stack: Gemini for images, Kakao Places as recommended. Options page = three bouquet size choices; result page will support edit/refine. + +> Wire create and message inputs to the API so we can test the full flow end-to-end. + +> Image generation keeps failing on Gemini (quota, 404, 503). Switch image generation to OpenAI. Don't fall back to mock — wait until a real image is ready before showing results. Fix generating page being skipped. + +### Outcome + +- `/api/flower-flow/*` routes, Gemini text + OpenAI image providers, mock fallback removed from happy path, generating page polling + +--- + +## 4. Supabase job storage + +### My chat + +> Replace in-memory pipeline storage with Supabase. Store images in Supabase Storage; keep only URLs in the DB. + +> Add an edit page after generating: generated image on the left, reprompting chat on the right, pencil-style area selection for partial edits. + +> Remove the options page — flow goes edit → result. Single image size only (no S/M/L variations). Chat-style edit history: image → chat → image → chat, alternating. + +### Outcome + +- `jobStore.js` → Supabase, `supabase/schema.sql`, edit page scaffold, options page removed + +--- + +## 5. Visual branding & layout + +### My chat + +> Replace the header square with `flower.svg`; animate the icon for the current step. Swap in `logo.svg`, match nav color, add as favicon. + +> Custom cursor — pixel style, logo color, white border. Fix hotspot so the click point matches the graphic tip. + +> Unify description card width across pages; white/off-white background with subtle shadow. Header matches card color. + +> Page background: canvas/paper texture from asset, cover fill (not tile repeat). + +> Upload page: redesign moodboard layout per reference — his/her labels from create gender, uniform 4:3 / 3:4 tile ratios, text-only "continue" with hover underline. + +### Outcome + +- `logo.svg`, custom cursor SVG, `DescriptionCard.svelte`, canvas background, upload layout redesign + +--- + +## 6. Flower database & recipe prompts + +### My chat + +> Expand `flowerDB.js` with additional catalog entries. Apply notes: keep Caspia and Statice separate; silver/beige/brown flowers lean on mood tags; Snowball Viburnum and Lotus OK as recipe candidates. + +> Improve matching logic and sync prompts so recipe generation uses the same catalog rules. + +> Card message should pick flowers whose meaning matches the message sentiment. No em-dash (—) in any user-facing copy across the app. + +### Outcome + +- Expanded `flowerDB.js`, `resolveRecipeFlowers.js`, synced Gemini recipe prompts in `text.js` + +--- + +## 7. Result page & flower cards + +### My chat + +> Result page: artwork on the left (final bouquet photo), scrollable flower cards on the right. Remove floristNote; move a short summary into the description card. + +> Flower cards: square crop showing the top of each stem, flip animation on click for Kor/Eng meaning. Fixed card size, no selection border. Hide filler/greenery cards. + +> Description should explain why this bouquet fits the person — mood, colors, message — not generic filler. Use "their" for the recipient, not "your". Don't truncate with ellipsis; keep copy short instead. + +> After edit (e.g. swap tulip → rose), recipe and result cards must stay in sync. + +### Outcome + +- `FlowerCarousel.svelte`, flip cards, `buildResultDescription.js`, recipe sync on edit + +--- + +## 8. Edit page UX + +### My chat + +> Remove the edit toggle. Always show a pencil icon on the chat image; click to draw a red selection stroke, icon becomes X to cancel. Area selection sends a partial edit request. + +> Move "Tell us how you want to refine it" into the description card; remove page title clutter. Apply Edit → send-button style next to chat input. Chat shows user prompt on the right, "editing…" on the left; auto-scroll to bottom. + +> Fix duplicate bouquets appearing after edit — investigate prompt/flow. Reduce suggestion chips to three, lighter gray, tighter spacing. Fix left border clipping on chat bubbles. Errors only in chat, not duplicated below. + +> Bouquet images should match artwork aspect ratio (768×1024). Chat thumbnails same ratio, scaled down only. + +### Outcome + +- Pencil overlay area selection, chat UI polish, `bouquetImageFormat.js` aspect ratio, duplicate-image fix + +--- + +## 9. Upload UX & flow navigation + +### My chat + +> Upload description card: step intro copy (not dummy title/description), updates dynamically on tab switch and each upload. + +> Don't block on "Analyzing mood…" — navigate immediately, run mood analysis in the background. + +> Replace per-page Continue buttons with mini nav under header: ← Back / Continue → on both ends. Back must restore previous inputs and uploaded images. + +> Reduce heading font size on message ("Write something…") and create ("Who are we making flowers for?") and similar prompts on other pages. + +### Outcome + +- `StepNav.svelte`, background mood analysis, session restore, typography tweaks + +--- + +## 10. QA, providers & recipe alignment + +### My chat + +> Lock AI providers for production — one provider per task, no dev-only switches. Clean up `.env.example` to required keys only. OpenAI image output 3:4 ratio. + +> Verify result cards match the bouquet recipe; bouquet must not show flowers outside the recipe. On edit, constrain recipe changes to flowerDB catalog names only. Cards follow recipe — if a flower isn't in the recipe, don't show it on a card. Bouquet image may include extra flowers not on cards; that's OK. + +> Area edit: selecting ribbon and saying "change color" was changing the wrong region or the whole image. Fix mask alignment and prompt so only the selected area changes — prompt-only, no image compositing. + +> Map description card: keep "Ready to order" title; body = brief flower theme only, no markdown bold, no truncation ellipsis — generate short copy. Remove floristNote usage project-wide. + +### Outcome + +- Provider lock in `.env.example`, 3:4 image size, `applyRecipeEdit` catalog constraint, area-edit prompt tuning, floristNote removal + +--- + +## 11. Map, deploy & production hardening + +### My chat + +> Pre-deploy review: fix lint/format warnings, add API auth & cost protection, upload size limits, duplicate edit-request guard, remove silent Kakao mock fallback. + +> Deploy on Railway — set adapter, maxDuration, and tell me what env vars I need to configure externally. + +> Kakao Map SDK not loading on Railway domain — what do I register on developers.kakao.com? + +> Result and map pages: add download button for the final bouquet image. + +### Outcome + +- Railway adapter, API hardening, Kakao domain setup docs, image download on result/map + +--- + +## 12. Bouquet image realism + +### My chat + +> Generated bouquet looks fake, not photorealistic. Can we pass reference images to the generation API? + +> White-background catalog shot and no hands/people is good, but the bouquet doesn't feel like a real arrangement. Check if the initial generation API supports reference input and wire it if possible. + +> STRICT RECIPE rules ("every species must be clearly visible" + "no other species") make the model prioritize species accuracy over realism — revert recent changes and fix that tradeoff. + +### Outcome + +- Reference-image support explored, `bouquetImageFormat.js` prompt rebalancing (later iterations) + +--- + +## Teammate scope (outside my chat) + +- create/message page UI (initial), dev seed button, museum frame (p5), map shop search & order message, flower catalog batch images (`generate-flower-catalog.js`), area-edit intent docs diff --git a/docs/jieun_chatlog.md b/docs/jieun_chatlog.md new file mode 100644 index 0000000..6da953f --- /dev/null +++ b/docs/jieun_chatlog.md @@ -0,0 +1,192 @@ +# AI Development Chat Log — AI Florist + +> Course submission: Cursor **My chat** log + +**Tool:** Cursor + +--- + + + +## 1. Dev dummy-data button + +### My chat + +> I want a dev debug button that fills dummy data (pre-made images, no AI) so I don't re-enter everything when jumping between steps. Will mute it later. + +### Outcome + +- `DevSeedButton`, `devSeed.js`, `static/dev/` fixtures + +--- + +## 2. Message page UI + +### My chat + +> Follow message1.png, keep button styles consistent with create/upload. Add a message route folder. + +> "Write something from your heart" should be a text input. + +> Don't use pills for presets — use the same style as Friend/Family on create. + +### Outcome + +- `message/+page.svelte`, `MessageForm.svelte`, `MessagePresetList.svelte` + +--- + +## 3. Create selection & title behavior + +### My chat + +> On create, remove the default pre-selected option — landing should look unselected like message. + +> Don't wait for both WHO and WHAT FOR — update the title as soon as any one of the three fields is selected. + +### Outcome + +- Create landing unselected; title updates on partial selection + +--- + +## 4. Post–main-pull options & map build + +### My chat + +> Pulled main — what's new on the teammate's side? How is image prompt engineering set up? Is create-step input actually used in the pipeline? + +> Start building options and map using the same file structure as create/upload. Add component folders as needed. + +### Outcome + +- options/map 2-column Artwork layout, `components/ui/options/`, `components/ui/map/` + +--- + +## 5. Kakao Map + order message + +### My chat + +> I entered Kakao public + REST API keys — does it find nearby florists from my location? + +> Markers don't show on the map. + +> Add a refresh button after moving the map to reload shops in that area. + +> Show shop info when clicking a marker or list item. + +> On map top: generate a copyable florist order message from create input, flowers used, and mood keywords. + +> Add Kor/Eng toggle below the copy button. + +### Outcome + +- `api/map/shops`, `MapPanel`, `buildFloristOrderMessage.js` + +--- + +## 6. Artwork & description card layout + +### My chat + +> Center the description card. Artwork shifts when card is 1 vs 2 lines — fix so artwork stays put when card height changes. + +> Upload page artwork position is off — match other pages. + +> Too much gap between flower SVG and description — move card up, but never move/resize the artwork above. + +### Outcome + +- `Artwork.svelte` layout split (fixed illustration + separate description) + +--- + +## 7. flowerDB 93-flower image batch + +### My chat + +> I'm not building the UI yet — my role is adding images to the flower DB. I made a sample image in OpenAI. The prompt was: +> `A single [rose] flower stem, isolated object, transparent background, realistic botanical style, front-facing, centered composition, no vase, no bouquet, no hand, no text, soft natural lighting, consistent scale, PNG asset for UI card` + +> So it's not generating an image on every request — it gets saved to the DB, right? I don't want to change the frontend; I only want to update the DB, without modifying the existing DB records. + +> OK, go ahead and run it. Check the file structure and organize the files to match the teammate's style. + +### Outcome + +- `scripts/generate-flower-catalog.js`, `static/flowers/{id}.png`, `flowerCatalogPrompt.js`, `flowerImagePaths.js` + +--- + +## 8. Museum frame (p5) + +### My chat + +> Museum frame on left panel (p5, 768×1024). Frame position fixed across pages; only inner image swaps. + +> create: create1.svg when empty, create2.svg as soon as anything is selected. + +> Slightly enlarge artwork inside frame only. + +> Description card per reference image; artwork must not move when card grows. + +### Outcome + +- `MuseumFrame.svelte`, `museumFrameGeometry.js`, `artworkVariants.js` + +--- + +## 9. Map & result dev polish + +### My chat + +> Can't navigate to /map — allow in dev only? + +> Map: remove line above order message, move message up, fix shop info overflow, no line breaks in English order text. + +> Map description card: 1–2 lines, Ready to order, brief flower theme only. + +> Can't go to /result — show dummy in dev. Limit DescriptionCard length. + +### Outcome + +- Dev access to result/map, `truncateDescription`, map UI fixes + +--- + +## 10. Bouquet image prompt & area edit + +### My chat + +> Add to suffix without deleting existing prompts: catalog scene + no person/hands. +> `A professional florist product photograph of a handcrafted bouquet…` +> `Bouquet only. No person. No hands. No body parts visible` + +> (Pasted English spec for area edit — mask as hint only, edit ribbon surface only.) + +> Implement it. Write image-pipeline.md and overall-pipeline.md in docs. + +### Outcome + +- `bouquetImageFormat.js`, `areaEditIntent.js`, `refinedAreaMask.js`, pipeline docs + +--- + +## 11. Git branch push + +### My chat + +> Push current state to new branch `0615-refinement`. + +> Switch to main, then commit and push to new branch `0615-refinement2`. + +### Outcome + +- `0615-refinement`, `0615-refinement2` pushed + +--- + +## Teammate scope (outside my chat) + +- upload, edit core, flower-flow API, `flowerDB.js` original, Gemini server modules