셀레니움이에 이모지 읽히기 : markup

2024년 11월 6일 수요일

Today I Learned

날짜

2024년 11월 6일 수요일

내용

손님받아라!

하루에 20개의 고객 데이터가 추가된다! 이렇게 반응이 즉각적으로 이루어지는 건 진짜 처음이라, 문제 없이 잘 돌아가는지 하루종일 열심히 살폈다. 그 덕분인지 대참사가 터질뻔한걸 빠르게 캐치할 수 있었다.

  1. 엄격한 AI

    인스타그램에 작성된 댓글을 이미지로 만드는데 선별하는 AI가 너무 엄격했다. 우리 서비스에 가입한 스토어들의 인스타그램 계정에는 댓글들이 그렇게 많지 않았다.. 적게는 게시글마다 1~2개 씩 총 20개 정도 되는 스토어들이 많았다. 이런 곳은 비록 그 댓글이 우리가 기획할 때 설정한 목표와 적확하게 일치하지 않더라도 이미지로 처리되길 바라지 않을까? 그리고 실제로 내용도 충분히 올라갈법 했다.

    AI에게 데이터를 훈련시킬 때, 유명한 패션, 뷰티 인스타그램의 댓글들을 줬기 떄문에 상당히 고퀄리티, 장문의 댓글들을 많이 봐서 그런듯 했다. 댓글은 0~10점 사이인데 0점이면 어떤 경우에도 이미지에 포함되지 않도록 해놨다. 이미지가 자동 갱신되어 상품페이지에 올라가는 만큼 혹시나 이상한 댓글이 올라가면 정말 큰일날까봐.. 긍정적인 댓글이지만, 상품과 크게 무관한 이모지 댓글 등은 1점으로 처리하도록 지시를 추가했다. 댓글이 적은 현재는 이미지에 포함되겠지만 좋은 댓글이 추가되면 우선순위가 최하위가 되어서 이미지에 포함되지 않도록..

    그랬더니 이 금쪽이같은 놈이 죄다 점수를 퍼줘서 온갖 댓글들이 다 올라갔다. 계정 주인이 공지로 올린 댓글이라던가, 그냥 친구 태그한 댓글까지 싹다… 어쩔수 없이 일일이 직접 댓글들의 점수를 수정하고 그 데이터를 AI 모델이 파인튜닝하는데 썼다. 오늘 보고 수정한 댓글이 200개는 된다 하… 자식농사 실패에 대한 책임이다.

  2. 이모지 인식

    인스타그램 댓글을 Jinja2 로 렌더링하여 HTML을 만들고, 그 HTML을 헤드리스 브라우저에 띄워 캡쳐한다. 근데 이 헤드리스 브라우저에 HTML을 출력하면 이모지가 제대로 인식되지 않는다. ❤️ 이런 애들이 다 검은색 하트로 뜨는 등 이모지가 아닌 텍스트 형태로 뜬다..

    이 하트가 파이썬의 검은색 하트로 떠서 이미지가 되면 상당히 볼품없어지기 떄문에 꼭 해결하고 싶었다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
     from markupsafe import Markup
        
     for i in comments:
     	i.text = Markup(
     	        i.text.replace(
     	            "❤️",
     	            '<span style="color:red; padding:0;">\u2764\uFE0F</span>',
     	        )
     	    )
        	
    

    우선 하트는 이렇게처리했다. HTML에서 제대로 인식할 수 있도록.. 하트만큼은 크로니움이나 HTML이 문제가 아니라 파이썬의 문제였다.

    1
    2
    3
    4
    5
    6
    7
    
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
           href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"
           rel="stylesheet"
         />
         <script src="https://cdn.jsdelivr.net/npm/apple-color-emoji@1.0.1/index.min.js"></script>
    

    그리고 HMTL 헤더에 이걸 추가해줬다. 이모지를 인식하기 위한 폰트를 받아오는 내용이다. 처음에는 애플 컬러 이모지 스크립트를 가장 위에 뒀는데, 일부 이모지만 인식되고 어떤 이모지는 깨져서 나와버렸다.. 혹시나 싶어 순서를 바꿔봤다. 구글이 더 가벼울 수도 있고, 혹시나 더 많은 이모지를 지원하지 않을까하여 해봤는데 잘된다.

회고

기가막힌 1주년이었다.