Skip to content

Design& Planning

Jump to bottom
Namhyeon Heo edited this page Dec 10, 2022 · 9 revisions

Design&Planning

Rev. 1.2 2022-11-06 - fix sprint plan

System Architecture

image
  • Frontend
    • React
  • Backend
    • Django
      • main app: letter writing api
      • gift app: gift api
  • AI Server
    • 초반: Kakao KoGPT API
    • 후반: BentoML + Pytorc

View

image

Functionality and Requirements are described as below.

     

1. Index Page

  • Landing page

  • Show D-day for occasion like Valentine, Christmas ,etc

  • Button to create Letter page

2.Create Letter Page

  • Create a Letter

  • Input fields( name, occasion, style, …)

  • Pressing create button will send request to Django backend

  • After creation show button to gift recommendation page or decorate letter page    

3. Gift Recommendation Page

  • Can choose price, gender, occasion

  • Pressing recommendation button wil send request to backend

  • Show list of recommended gift and clicking it will lead to naver smart store

4. Decorate Letter Page

  • Get created letter as props from create letter page

  • Can choose backgrounds and fonts

  • Pressing recommendation button will show up pdf with given backgrounds and fonts

  • User can download it with download button

Design Details

Frontend

image

1.1 Index

-main page of our view -show d-dates til couple’s holiday. onCreateClick(): route to create Letter

1.2 calender

-highlight the date today and upcoming holiday

1.3 create Letter

  • onCreateClick: send request(POST/generate_letter) to the backend.and untul api call returns created letter show circular progress

  • onParameterChange: setnewstate to parameters when input changes

  • onDecorateClick: route to decorate Letter

  • onGiftClick: routr to gift Recommendation

1.4 decorate Letter

  • createPreview : return component preview with given fonts and backgrounds

  • onFontsChange= set new state to fonts and call createPreview to rerender

  • onBackgroundsChange= set new state to backgrounds and call createPreview to rerender

  • onDownloadClick= download current image to pdf

1.5 preview

  • render image of letters with given fonts and background

1.6 gift Recommendation

  • getRecommend: : send request(POST/gift) to the backend. And decode json response so it can create and initialize gift

1.7 gift-recomment-list : a components with list of component gift

1.8 gift : a component with gift infos

2.Backend & AI Server

  1. Main.app letter writing API
  • POST /generate-letter
  • letter_type (string): Type of letter (ex: anniversary)
  • emotion (string): What emotion to convey.
  • tone (string): Tone of voice
  • example (string): User supplied text for generation For each options, hyperparameter and prompt engineering will be done, and AI Server will be called.
  1. Gift.app gift API

  • GET /gift

  • price(int): price range of the gift. 0 for the below 10,000 won, 1 for the 10,000~30,000 won …

  • gender(int): gender of whom present for. 0 for man and 1 for woman

  • POST /gift/shop_keywords

  • age_gender(str) : age and gender for shop_keywords

  • category(str) : category for shop_keywords

  1. AI server

Using KoGPT API for prototype

Using our AI server (Bentoml)

  • POST /generate
  • prompt (string): The prompt for generation
  • max_tokens (int): Maximum number of tokens to generate
  • Other hyperparameters will be exposed after experimentation

Implementation Plan

Page Feature Difficulties Time(days) sprint Assignees
. Project dev env ci/cd setup 4 1 2 김민준
. Cloud deployment,Domain Registeration 5 2 5 김민준
CalendarPage See D-Day of anniversary and calender 2 1 3 허남현
CalendarPage Give detail explanation of anniversary 1 0.5 4 허남현
createLetter Generate letter by A.I. 3 3 3 김민준
createLetter Fine-tuning AI model 4 3 4 김민준
decorateLetter Decorate the letter 3 2 3 조주환
decorateLetter Save letter as pdf and see the preview 3 1.5 4 조주환
giftRecommendation See the recommend gift list 3 3 4 허남현
giftRecommendation Go to the link to buy the gift 2 3 4 허남현

Sprint Plan for Each team mates.

. 민준 남현 주환
Sprint2 Frontend, Backend, Docker, CI/CD Setup requirement and spec revise, progress report Design&Planning
Sprint3 Letter feature Calender and D-day DecorateLetter FE
Sprint4 AI Model Training Gift recommendation Required data crawling
Sprint5 Cloud Deployment, Domain Registration Modify design and add feature got the feedback DecorateLetter Testing

Testing Plan

Unit Test

In each sprint, we would test implemented modules by following frameworks. We force every commit to pass the unit test and accomplish over 80% coverage

  • Django: Python unit test

  • React: Jest, Enzyme

Functional Test

Since we have only few APIS. All APIs should be tested completely. Functional Test will be performed at Sprint 4.

  • Django: Python unit test

  • React: Jest, Enzyme

Acceptance & Integration Testing

Acceptance and Integration testing will be performed at Sprint 5.

  • Integrity Test: Travis Cl, Sentry.io ,UptimeRobot

  • QA Test: manually by team members

  • User Acceptance Test: with auto

Clone this wiki locally