저장소

이번 포스팅에는 slack bot을 생성하고 앞서만든 openai api와 채팅을 하도록 추가해보자 slack GPT앱은 현재는 정식 출시되진 않았고 베타로 이용신청을 할 수 있다 https://slack.com/intl/ko-kr/blog/news/how-i-built-the-chatgpt-app-for-slack How I built the ChatGPT app for Slack A conversation with Simón Posada Fishman, the OpenAI solutions engineer who developed the breakthrough app slack.com 정식 출시되면 연동 및 작업은 크게 의미가 없어지지만 그 전까지 사용할 수 있도록 작업해보도록 하자 Slack bot..

Vue & Nuxt 2023. 3. 26. 18:14

이번 포스팅에는 GPT를 연동하고 브라우저에서 질문 및 답변까지 하도록 구성해보도록 한다 server 💻 추후 slack을 연동할 것이기 때문에 서버의 디렉토리 구성은 다음과같이 한다 순수하게 gpt와 통신은 openai_completion.ts에서 담당하고 클라이언트에서 api 호출은 browser.post.ts에서 한다 Nuxt3에서는 서버도 디렉토리로 라우팅을 하고 그 안에서 [name].[method].ts로 구분하면 http method와 매칭까지 시켜준다 https://nuxt.com/docs/guide/directory-structure/server#matching-http-method server/ · Nuxt Directory Structure Nuxt automatically scans..

Vue & Nuxt 2023. 3. 26. 14:59

Nuxt.js로 서버를 구성하고 openai api를 연동하여 브라우저에서 GPT와 채팅을 하는 기능을 만들어보자 추가적으로 slack과 연동하여 슬랙 내부에서도 채팅을 가능하도록 만들어보자 이번 포스팅에서는 기본적인 환경구성을 하도록한다 KEY api를 호출하려면 apiKey 가 필요한데 secret key를 이곳에서 발급받을 수 있다 chat으로만 구현할 것이기 때문에 organization은 필요없다 OPENAI_SECRET_KEY=sk-... .env에 위와같이 저장해둔다 Nuxt💡 이후 Nuxt 환경을 구성하자 프로젝트명은 nuxt-gpt로 만든다 이 포스팅에서는 Nuxt3를 사용한다 🤔npm 까지는 설명하지 않겠습니다... npx nuxi@latest init nuxt-gpt cd nuxt-g..

Vue & Nuxt 2023. 3. 26. 13:19

목적 이번 포스팅에는 기존에 canvas를 resize하는 방법이 아닌 canvas의 일부를 잘라서 적용하는 crop 기능을 만들어보도록하자 캔버스에 svg 이미지를 삽입한다(이미지 로드기능 생략용) 이때 이미지는 크기나 위치를 컨트롤 할 수 없게한다 드래그 혹은 정의된 비율로 crop 박스를 생성한다 드래그 박스는 자유크기, 비율 박스는 비율에 맞게 크기조절을 한다 이때 드래그 혹은 크기를 변경할때 총 canvas의 넓이를 벗어나지 않게한다 이번에도 동일하게 클래스로 생성하지만 전역변수와 함수로도 충분히 구현할 수 있다 Reference base64로 인코딩된 문자열을 불러올 수도 있지만 이번에는 svg태그에서 문자열을 추출하여 canvas에 예제이미지를 넣어보도록 하자 사용된 이미지는 다음과같다 sv..

fabric.js 2023. 3. 20. 16:40

목적 이번 포스팅에는 canvas에 객체를 삽입하는 기능을 만들도록 하자 이때 특정 위치에 객체를 생성해버리면 크기조정을 다시 해야하기 때문에 드래그로 생성하도록 하자 이번 포스팅에서 만들 내용은 fabric.js의 기본 클래스인 Rect, Ellipse, Triangle, IText을 사용하고 커스텀 도형은 Polygon를 사용한다 버튼을 클릭하여 객체를 준비하고 드래그하여 캔버스에 그린다 객체를 그리고 mouse up 순간 새로 그려진 객체를 선택한다 객체의 선굵기, 선색깔, 채움색깔을 선택 혹은 변경할 수 있다 버튼 -> 드래그 -> 종료 순서를 반복해야하기 때문에 shape는 클래스로 작성을 하고 이 포스팅에서는 static, private 없이 심플하게 작성해보자 Class interface와 ..

fabric.js 2023. 3. 19. 14:01