[UI/UX] Video2Article AI assisted writing UI

[sleeep23]

No description provided.

[ParkJumyung]

새로운 write-article에 적절히 합쳐질 수 있도록
component를 분리하고, 코드를 깔끔하게 정리하고 있습니다.

[ParkJumyung]

write page에서 글 쓰는 부분 위에 섹션을 만들고 아래에 글 쓰는 내용 기반해서 AI로 추천해주는 것을 띄워 주는 방식으로 하고 있습니다.

1. 제목 쓰는 Step
   제목을 쓰면 그와 관련하여 검색해볼 만한 검색어를 GPT로 추천합니다. 추천된 검색어는 Step2에서 쓰입니다.
2. 문제 상황 쓰는 Step
   Step1에서 추천된 검색어로 관련 Youtube 뉴스 채널 영상을 모아 Carousel로 보여주는데, 각 Card는 유튜브 영상, 원본 자막, AI로 추출한 문제 상황으로 구성되며, 가져오기 버튼을 누르면 아래의 Text Editor로 내용이 복사됩니다.
3. 해결 방안 쓰는 Step
   Step2에 유저가 쓴 문제 상황을 기반으로 해결 방안을 GPT로 생성하고 Carousel의 형태로 추천 Draft를 디스플레이 합니다. 가져오기 버튼을 누르면 아래의 Text Editor로 가져와집니다.

[ParkJumyung]

현재 해결하고 있는 문제들

1. Google 공식 API는 돈으로도 늘릴 수 없는 할당량 한계가 있어서(승인 받으려면 Youtube 팀이랑 티키타카 하면서 승인 받아야 하고 2달 정도 걸린다네요...) 하다 보니 막혔어요. Scrapping 기반 외부 package를 사용해야 할 것 같은데, 단순 검색어 기반 검색 뿐만 아니라, 업로드 시기랑, 채널 ID(뉴스 채널만 검색하도록)로 필터링할 수 있어야 합니다. 알고 있는 거 있으면 추천해주세요.
2. Step2에서 보여주는 것들이 다 되게 무겁고 병렬화가 안되어서(Youtube 검색 -> Youtube 동영상 가져오고 자막 가져오기 -> GPT한테 요청 보내기 -> GPT응답 디스플레이하기) Step2만 되면 현저히 버벅거립니다. 이를 해결하기 위해 Youtube 검색을 Step1에서 미리하고, Youtube Embed component를 일단 썸네일만 가져오고 클릭하면 동영상으로 바뀌게 최적화하고, Carousel에서 지금 보고 있는 Card 앞뒤로 2개의 Card만 요청보내고 렌더링하고, GPT 응답을 Streaming대신 끝나면 통째로 받는 걸로 바꾸고, Skeleton적용해서 응답 오는 동안 화면이 그냥 하얗지 않게 하고, React.memo적용해서 최적화했는데, 다른 방법 있으면 알려주세요.
3. Editor에 코드로 내용을 어떻게 넣는지 모르겠어요. form.setValues로 해 봤는데 내용이 들어가긴 하는데 들어간 내용이 Editor에서 바로 보이는게 아니고 다른 Step갔다가 다시 오면 Editor에 내용이 들어있는 그런 상태에요. 이거 어떻게 하는지 모르겠네요.
4. &quote; 이런식으로 글 나오는거 어떻게 Decode하는지 모르겠어요...
5. step2에서 Carousel 내부를 클릭할 때마다
   TypeError: _a2.clickAllowed is not a function
   에러가 뜨는데 구글에서는 Carousel.Slide x.clickAllowed is not a function mantinedev/mantine#4174
   mantine embla 버전 문제라고 하는데 뭔 소린지 잘 모르겠어요....

[ParkJumyung]

지금까지 한 거 Demo

[ParkJumyung]

Write Article에 병합하기 전 버전 Demo

[sleeep23]

지금까지 한 거 Demo

요거 비공개 영상으로 뜹니다!

현재 해결하고 있는 문제들

1. Google 공식 API는 돈으로도 늘릴 수 없는 할당량 한계가 있어서(승인 받으려면 Youtube 팀이랑 티키타카 하면서 승인 받아야 하고 2달 정도 걸린다네요...) 하다 보니 막혔어요. Scrapping 기반 외부 package를 사용해야 할 것 같은데, 단순 검색어 기반 검색 뿐만 아니라, 업로드 시기랑, 채널 ID(뉴스 채널만 검색하도록)로 필터링할 수 있어야 합니다. 알고 있는 거 있으면 추천해주세요.
2. Step2에서 보여주는 것들이 다 되게 무겁고 병렬화가 안되어서(Youtube 검색 -> Youtube 동영상 가져오고 자막 가져오기 -> GPT한테 요청 보내기 -> GPT응답 디스플레이하기) Step2만 되면 현저히 버벅거립니다. 이를 해결하기 위해 Youtube 검색을 Step1에서 미리하고, Youtube Embed component를 일단 썸네일만 가져오고 클릭하면 동영상으로 바뀌게 최적화하고, Carousel에서 지금 보고 있는 Card 앞뒤로 2개의 Card만 요청보내고 렌더링하고, GPT 응답을 Streaming대신 끝나면 통째로 받는 걸로 바꾸고, Skeleton적용해서 응답 오는 동안 화면이 그냥 하얗지 않게 하고, React.memo적용해서 최적화했는데, 다른 방법 있으면 알려주세요.
3. Editor에 코드로 내용을 어떻게 넣는지 모르겠어요. form.setValues로 해 봤는데 내용이 들어가긴 하는데 들어간 내용이 Editor에서 바로 보이는게 아니고 다른 Step갔다가 다시 오면 Editor에 내용이 들어있는 그런 상태에요. 이거 어떻게 하는지 모르겠네요.
4. &quote; 이런식으로 글 나오는거 어떻게 Decode하는지 모르겠어요...
5. step2에서 Carousel 내부를 클릭할 때마다
   TypeError: _a2.clickAllowed is not a function
   에러가 뜨는데 구글에서는 Carousel.Slide x.clickAllowed is not a function mantinedev/mantine#4174
   mantine embla 버전 문제라고 하는데 뭔 소린지 잘 모르겠어요....

1. 이거는 아마 몇개 있는 걸로 알고 있긴한데 한 번 찾아볼게용
2. 이거 혹시 코드 올라와있나요?
3. 이건 아마도 리렌더링 이후에 적용되는 것을 보면 setValues가 즉시 적용되는게 아니라고 보이는데 한번 코드를 확인해봐야겠네요. mantine의 useForceUpdate 훅을 사용하거나, 렌더링 로직을 바꿔보는 것을 추천합니당. 추가로 이건 mantine의 richTextEditor 설정을 수정해야 하는 부분이라 코드 올려주시면 제가 고쳐볼게용
4. 이건 출력된 &quote; 텍스트가 html 엔티티코드라서 그럴 거에요. 받아온 텍스트가 html의 문자열이라면, 아래처럼 html 텍스트를 삽입하고 mantine의 TypographyStylesProvider로 감싸면 스타일이 적용될 겁니다!

function Demo({data}:{data: string}) {
  return (
    <TypographyStylesProvider>
      <div dangerouslySetInnerHTML={{ __html: 여기에 받아온 텍스트 데이터(만약 html 문자열인 경우) }} />
    </TypographyStylesProvider>
  );
}

5. 저도 다른 프로젝트에서 이 문제 겪었던 것 같아요. carousel 문제는 찾아주신 링크처럼 버전을 낮추던가 아님 여기 참고해보면 좋을 것 같아요 - 버전 바꾸지 않고 해결할 수 있는 방법입니다! (embla는 캐러셀용 외부 라이브러리고, mantine이 이 라이브러리를 디자인시스템에 적용했다고 보면 됩니다! 그래서 라이브러리 에러라 버전을 7로 낮추거나 event propagation을 막으면 해결된다고 하네요. 코드는 링크에!)

[ParkJumyung]

감사합니다 ㅎㅎ
영상 비공개는 풀었어요;;
코드는 내일 즈음에 올릴게요.

[ParkJumyung]

완성했어요!
Mefeto Copilot Demo
jumyung-feature/ai-copilot branch에 올려두었어요.

코드가 다소 스파게티 같아요;;;👀

[ParkJumyung]

아직 해결이 필요한 문제

1. 가져오기 기능(이미 알린 문제)
   가져오기 버튼을 누르면 해당 카드의 내용이 아래의 input에 들어와야 하는데 form.setValues()로 했을 때 내용이 바로 들어가긴 했지만 input이 새로 바뀐 내용으로 다시 렌더링 되지 않는 문제

2. Carousel Click(이미 알린 문제)
   Carousel Click error문제는 알려주신 stop propagation으로 하니 없어지는데, Carousel의 슬라이드 사이 틈을 클릭하면 아직 error message가 찍힙니다.

3. 써드파티 Youtube 검색(이미 알린 문제)
   Google Data API Quota Limit이 매우 빡셉니다....

4. GPT 응답 속도 UX(새로운 문제)
   GPT의 응답이 매우 오래걸려서 UX가 별로입니다. Skeleton, Progress Bar, 상태 메세지 등으로 어떻게든 보완해 보려 했으나 여전히 좀 답답합니다. Streaming으로 실시간으로 GPT의 응답을 받아올 수도 있으나, 수많은 카드의 state가 계속 업데이트 되면서 다시 렌더링되어서 streaming도중에는 아래의 input에 뭘 쓸때 많이 버벅입니다.
   step3, 4에서는 vercel의 useChat을 쓰지 않고 직접 api이용해서 구현하여 각 카드 별로 완성되는 대로 보여줄 수 있으나, step2에서는 Promise.all과 useChat을 사용하면서 모든 카드의 응답이 도착해야 렌더링됩니다.

[sleeep23]

확인했습니다! 엄청 잘 만들어주셨는데요...ㄷㄷ 코드 몇몇부분 수정할 것들이나 ui 몇개 더 확인하고 응답 속도 해결할 방안 모색해볼게요!

[sleeep23]

속도 향상은 webworker 를 이용해서 요청을 병렬화하여 구현되면 빨라질 것 같아요. 사용할 라이브러리로는 useWorker를 사용하지 않을 까 싶네요.. 아마 gpt에서도 병렬화 작업이 있는걸로 알아서 이거랑 적당히 버무리면 맛있는 결과가 나올 것 같네요...ㅎㅎ