20221125 TIL

오늘의 한 일

• 유화 제작 프로젝트

 

유화 제작 프로젝트

 

 

?? 머임 왜 이미지필드 json형태로 받아와짐??

 

경로로 잘 받아와져서 잘 띄워지나본데 Image 모델 만들고 Style 모델도 만들고 한게 헛짓거리였네요.. 스타일은 남겨서 아티클에 집어넣어도 괜찮겠지만

 

 

 

 

• 다크모드 변환

See the Pen darkmode by 야언 (@didjsrne) on CodePen.

간단하게 토글 스위치 형식으로 body의 클래스를 적용시켜

백그라운드 컬러와 폰트 컬러를 검회색 - 흰색으로 변환시켜 보았다

간편하고 괜찮은듯?

 

 

 

 

 

• 아티클 작성 모달 예시

 

See the Pen create_article by 야언 (@didjsrne) on CodePen.

 

 

각 radio에 style값을 value로 지정, 자바스크립트로 온클릭 이벤트를 달아놨다

 

실제로 사용할땐 작성하기 버튼과 클릭시 제목, 내용, 스타일 밸류가 모두 fromdata 형태로

ArticleView쪽에 post요청으로 보내지면 되겠다.

 

 

 

 

 

페이지네이션도 백엔드부분은 만들어졌고 프론트엔드에 적용시켜보고 싶은데 일단은 보류..

 

articles/views.py

from rest_framework.pagination import PageNumberPagination


class ArticlePagination(PageNumberPagination): # PageNumberPagination 상속
    page_size = 2  # 한 페이지 내 게시물 수

class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
    pagination_class = ArticlePagination

articles/urls.py

from django.urls import path, include
from articles import views
from rest_framework.routers import DefaultRouter

router = DefaultRouter()
router.register('', views.ArticleViewSet)  # 페이지네이션 적용 뷰셋

urlpatterns = [
    path("viewset/", include(router.urls)),
    path("", views.ArticleView.as_view()),
    path("<article_id>/", views.ArticleDetailView.as_view()), 
    path("comment/", views.CommentView.as_view()),
    path("comment/<comment_id>/", views.CommentView.as_view()),
]

 

 

 

 

 

TroubleShooting

 

• 이미지 모델, 스타일 모델 삭제 및 이미지 필드로 교체작업

 

으악!

 

머신러닝을 돌렸을때 결과값이 파일이 아닌 경로값이여서 생긴 문제로 추정됩니다..

 

articles/utils.py

from datetime import datetime
import cv2 
import numpy as np


def inference(img_input, style):
    # 이미지 불러오기
    npimg = np.fromstring(img_input, np.uint8)
    input_img = cv2.imdecode(npimg, cv2.IMREAD_COLOR)  
    style = cv2.dnn.readNetFromTorch(f"articles/models/{style}")
    
    # 전처리 코드
    h, w, c = input_img.shape
    input_img = cv2.resize(input_img, dsize=(500, int(h / w * 500)))
    MEAN_VALUE = [103.939, 116.779, 123.680]
    blob = cv2.dnn.blobFromImage(input_img, mean=MEAN_VALUE)
    
    # 결과 추론하기
    style.setInput(blob)
    output = style.forward()
    # 전처리한 이미지(blob)를 모델에 넣고 추론, output 변수에 추론한 결과 저장(forward)
    
    # 결과 후처리
    output = output.squeeze().transpose((1, 2, 0)) 
    output += MEAN_VALUE 
    output = np.clip(output, 0, 255) 
    output = output.astype("uint8")
    
    # 생성시간을 이름으로 저장
    time = datetime.now().strftime("%y%m%d%H%M%S")
    cv2.imwrite(f"media/{time}.jpeg", output) 
    result = f"media/{time}.jpeg"

    return result

보다시피 생성된 파일이 아닌 경로를 result로 만들었기 때문에 파일이 아니다

 

그럼 result를 파일로 어떻게 지정하지..?

 

원래 하던 방식으로는 

articles/views.py

def post(self, request):
        data = request.data
        style_info = Style.objects.get(category=request.data["style"])
        output_img = inference(
                img_input=request.FILES["input"].read(), 
                style=request.data.get("style", "") 
            )
        image_info = Image.objects.create(style=style_info, output_img=output_img)
        image_info.save()

        data = {
            "user" : request.user.id,
            "image" : output_img,
            "title" : request.data["title"],
            "content" : request.data["content"]
        }

이미지 모델로 create를 썻단 말이죠.. 근데 이건 왜 또 됨? 이것도 모르겠음.. 진짜 모르겠음..

 

해결책보다 그냥 원래 방식을 유지하는게 더 쉬울거같긴 하다..

 

 

 

 

 

• radio 버튼 밸류값 가져오기

 

 

참조 : https://living-only-today.tistory.com/107

[Jquery] 라디오 버튼 체크 값 가져오기, 체크 여부 확인

 

 

document.getElementById로는 radio에서의 밸류값을 가져오지 못하는 문제가 있었는데

 

구글링 후에 가져오는 방식 변경으로 해결!

 

function getStyle() {
  var style = $('input[name=setstyle]:checked').val();
  console.log(style)
}

 

 

그래서 이걸 적용시킨 post 요청 보내는 방식은

async function CreateArticle(input, style, title, content) {
  const input = document.getElementById('input').files[0]
  const style = $('input[name=setstyle]:checked').val();
  const title = document.getElementById('title').value
  const content = document.getElementById('content').value

  fromData = new FormData
  fromData.append('input', input)
  formData.append('style', style)
  formData.append('title', title)
  formData.append('content', content)
  
  const response = await fetch(
    `${backend_base_url}/articles/`,
    {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("access"),
      },
      method: "POST",
      body: formData,
    }
  );

  response_json = await response.json();
  console.log(response_json);

  if (response.status == 200) {
    window.location.replace(
      `${frontend_base_url}/articles/`
    );
  } else {
    alert(response.status);
  }
}

 

뭐 대충 이렇게 되겠죠? 확인차 console.log로도 짜보기 ㄱㄱ

 

async function ConsoleArticle() {
  const input = document.getElementById('input').files[0]
  const style = $('input[name=setstyle]:checked').val();
  const title = document.getElementById('title').value
  const content = document.getElementById('content').value

  // console.log(input)
  // console.log(style)
  // console.log(title)
  // console.log(content)
  formData = new FormData
  formData.append('input', input)
  formData.append('style', style)
  formData.append('title', title)
  formData.append('content', content)
  
  for (let value of formData.values()) {
    console.log(value)
  }
}

 

*참조 : formData에 들어있는 값 확인하기 - https://xively.tistory.com/65

[javascript] formData에 들어있는 값 반복문을 통해 확인하는 법

 

 

 

이미지까지 잘 들어간것을 확인

 

굿!