[Streamlit] 2차 프로토타입

[baekkr95]

Background

• api request와 기능이 많아짐으로써 현재 단순한 UI를 개선할 필요가 있어보임
• 현재 UI가 왼쪽(input), 중간(구름 예시 사진), 오른쪽(결과)로 구성됨

Content

• 상단과 하단을 분리해서 2대2 구조로 바꿀 생각임
• 상단 왼쪽(input), 상단 오른쪽(dehazed 결과 이미지)
• 하단 왼쪽(구름 예시 사진), 하단 오른쪽(구름까지 적용된 최종 이미지)

Details

[baekkr95]

6/4

frontend.py

• 다운로드 버튼 함수

  def save_btn_click(option, bytes):
  files = [
      ('files', (bytes))
  ]
  
  if option == 'a pink sky':
      cloud_option = 'a_pink_sky'
  elif option == 'a blue sky':
      cloud_option = 'a_blue_sky'
  elif option == 'a_sunset_sky':
      cloud_option = 'a_sunset_sky'
  elif option == 'a sky with small clouds':
      cloud_option = 'a_sky_with_small_clouds'
  elif option == 'a sky with large clouds':
      cloud_option = 'a_sky_with_large_clouds'
  elif option == 'a dark night sky':
      cloud_option = 'a_dark_night_sky'
  else:
      cloud_option = 'the_starry_night_sky'
  
  st.write(f"{cloud_option}으로 다운로드")
  db_save(cloud_option, files)

• 구름 예시 사진 보여줄 때, 사진이 columns 밖으로 나오는 경우, use_column_width 옵션 사용

• 도연님 front에서 194번째 줄 st.image('이미지 경로', width=386, caption='번째', use_column_width='always')

main.py

• save api

  @app.post("/save/{cloud_option}", description="cloud 이미지들을 요청합니다.")
  async def save_order(files: List[UploadFile] = File(...), cloud_option: str =None):      # 사진 1장, string 값 1개 (총 2개를 받는다)
  ### 
  ### 사진이랑 string을 db에 저장
  print('--------------post save 실행--------------------')
  dehaze_image_bytes = await files[0].read()
  print('구름 옵션:', cloud_option)
  
  # dehaze_image_bytes 이미지 자체를 저장
  haze_img = Image.open(io.BytesIO(dehaze_image_bytes))
  haze_img = haze_img.convert("RGB")
  
  base_url = '/opt/ml/final-project-level3-cv-17/data/input_image/'
  path, dirs, files = next(os.walk(base_url))
  file_count = len(files)
  
  img_url = base_url+'input'+(file_count+1)+'.png'
  haze_img.save(img_url, 'png')
  
  save_image = ImageModel(inputimage=img_url, cloudoption=cloud_option)
  await mongodb.engine.save(save_image) # db에 저장  
  print('-----save 완료-----')
  
  return {"cloud" : "images"}