코드는 나만의 비밀 다이어리가 아니야

개요

• ChatGPT API를 사용해서 택스트 입력받아 LaTeX로 변환하는 기능 완성
• 구글 익스텐션 UI 구현
• 구글 익스텐션을 시도했지만 Axios 를 불러오지 못해서 실패함

상세내용

• ChatGPT API와 Axios를 사용해서 텍스트를 입력받아 전달하여 ChatGPT의 출력값을 받아오는데 성공함.
• 추가로 입력으로 받는 질문의 내용을 가공하여, LaTeX만 반환할수 있도록 구현함.

문제점 및 해결

• ChatGPT API의 입출력을 받는 문제. ⇒ Axios를 활용한 아래 링크 코드로 해결함 (https://techbukket.com/blog/chatgpt-api-javascript)
• 다음과 같은 에러로 Axios 라이브러리를 불러오지 못함.

다음 단계 계획

• Math API를 사용해서 만들어진 LaTeX 를 png 파일로 전환
• 파이썬에 쓸수있는 library나 API가 있지 않을까?
• 여차하면 그냥 flask 로 개발하면 되지 않을까?

참고

LaTeX to equation API: https://meta.stackexchange.com/questions/53436/implement-an-api-call-to-display-latex-as-inline-image

LaTeX to PNG: https://github.com/joeraut/latex2image-web < 대체 얘는 어떻게 한거지? API가 어딨지?

오늘 새로 학습한 것들:

1. HTTP

https://diatomicarbon.shop/96

2. CDN

https://diatomicarbon.shop/95

개요

인간의 언어로 수식을 설명하면 LaTeX 로 변환시켜주고 수식 png 파일까지 제공해주는 웹페이지와 익스텐션을 개발하자.

개발동기

라텍스가 익숙한 사람은 그냥 코드쓰듯이 라텍스를 쓰면 되지만

처음 블로그 시작한 고등학생이나 많이 안써본 사람들은 라텍스를 일일히 입력하는게 힘들다.

챗지피티에게 수식을 설명하면 라텍스로 변환시켜준다는것을 발견했다. 

이 기능을 이용해서 gpt api를 사용한 크롬 익스텐션/웹사이트를 개발해보기로 했다. 

기능 설명

이 웹 페이지는 HTML, CSS 및 JavaScript를 사용하여 구축되었습니다. HTML 코드는 입력 상자, "변환" 버튼 및 이미지와 다운로드 버튼이 표시되는 출력 영역을 포함하여 페이지의 기본 구조를 정의합니다. CSS 코드는 페이지를 스타일링하고 시각적으로 매력적으로 만들기 위해 사용됩니다. JavaScript 코드는 응용 프로그램의 논리를 처리하며, 입력 텍스트를 LaTeX로 변환하기 위해 GPT API를 호출하고, 그런 다음 LaTeX를 다운로드 가능한 이미지 파일로 변환하기 위해 Math API를 호출합니다.

구현해야할 기능

웹

1. UI elements

• 채팅 입력창
• LaTeX 결과 나오는곳
• 수식 이미지 나오는곳
• 수식 이미지 저장하는 버튼

2. functions

[총 구현기능]

• 입력 받은 채팅을 ChatGPT API Input으로 넣는 기능
• ChatGPT API에서 나온 결과에서 LATEX만 추출하는 기능
• 추출한 LATEX를 실제 수식으로 바꾸는 기능
• 실제 바꾼 수식을 이미지로 바꾸는 기능

[1차구현 목표]

• 채팅을 입력 받아 ChatGPT에 나온 결과를 그대로 사용자에게 보여주기

[최종 구현목표]

• ChatGPT에 나온 결과를 전처리를 하여 원하는 부분만 추출,가공하여 원하는 파일 형태로 만들기
  • $$를 사용.

[부가 구현 목표]

• 음성인식을 ChatGPT에 입력할 텍스트로 바꾸기(구글 스피치 활용)

익스텐션

1. UI elements

• 채팅 입력창
• LaTeX 결과 나오는곳

2. functions

• 입력 받은 채팅을 ChatGPT API Input으로 넣는 기능
• ChatGPT API에서 나온 결과에서 LATEX만 추출하는 기능

마일스톤

헤커톤이 목표이기 때문이 1주일 안에 모든걸 완성해야 한다. 

사용할 프레임워크

React 를 사용하기로 했다. 

React 와 Vue 비교:

React와 Vue 모두 JavaScript 기반의 컴포넌트 아키텍처를 사용하지만, React는 학습 곡선이 높고 성능이 뛰어나며, Vue는 학습이 쉽고 크기가 작습니다. React는 단방향 데이터 바인딩을 사용하고 Vue는 양방향 데이터 바인딩을 사용합니다.

수식 투명 PNG 파일을 만들기 위한 프레임워크로는 React나 Vue 모두 사용할 수 있습니다. 다만, React는 학습 곡선이 높기 때문에 Vue가 더 쉽게 접근할 수 있을 것입니다. 하지만, 수식 투명 PNG 파일을 만드는 것은 복잡한 작업이므로 React의 성능이 더 뛰어나기 때문에 React를 사용하는 것이 더 나은 선택일 수도 있습니다.