저장소

이번 포스팅에는 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

목적 fabric.js 와 svelte를 사용하여 이미지 에디터를 만들어 보았는데 그 과정을 정리할 필요성을 느끼게 되었다. 이 포스팅에서는 svelte는 제외한 typescript위주로 각각 기능의 제작과정을 정리할 예정이다. 이번 포스팅에서는 간단하게 input file change 또는 드래그 앤 드롭으로 에디터에 사용할 이미지를 캔버스에 넣어보도록하자 Interface CustomCanvas interface CustomCanvas extends fabric.Canvas { imageSize?: { width: number height: number } cornerSize?: number imagePath?: string } 우선 fabric의 기본으로 정의된 member이외의 별도의 데이터를 추..

fabric.js 2023. 3. 19. 13:55

추후 포스팅할 fabric js를 사용하여 이미지 에디터를 제작하던중 타입스크립트 에러가 출력되었다 🤔 뭔가 이상하니 document를 살펴보자 fabric js의 document에서는 다음과 같이 사용할 수 있다고 나와있다 타입이 지정되어 있지 않은지 확인하기 위해 @types/fabric을 살펴보니 interface IAllFilters 의 하위의 각각 Blur와 HueRotation이 별도로 선언되어있지 않았다 타입이 누락된 이유는 모르겠지만 자료형이 정의되고 패키지가 업데이트된 것이 반영되지 않아서 빠졌을 수도 있고, 단순 누락되었을 수도 있다 타입스크립트를 사용할때 패키지 내부에 포함되어있지 않고 @types로 추가되는 ts디펜던시는 많은 개발자가 기여하여 만들어진 경우가 대부분이다 그에 대한 ..

카테고리 없음 2023. 3. 19. 13:49

javascript에서 import 하여 이미지를 불러오거나 input file에서 이미지를 업로드 할 때 file이 아닌 이미지의 정보를 일부 활용하고 싶을때가 있다 그럴때 우선 readfile을 활용하여 파일을 읽은 뒤, new Image()로 이미지의 정보에 접근하여 활용하는 방법이다. 이때 각각 동작을 비동기로 처리하고 한번에 후처리 하도록 하였다 new FileReader() 우선 파일을 read 함수를 만들어준다 async function readFile (file: File) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = async (event) => resolve(event..

카테고리 없음 2023. 3. 19. 13:47

배열을 전달하여 sample데이터 생성하기 1. 함수의 첫번째 parameter(data)는 Object 형태의 n개의 값을 전달한다 2. 두번째 prarmeter(option)는 Object을 전달한다 3. count(생성갯수), duplicate(중복여부), maximum(숫자생성 최대값), floor(반올림) // 함수에 사용될 임의값 const tier = ['IRON','BRONZE'...] const users = ['pellentesque','dignissim'...] (a) loop가 될 배열을 선언해준다 count가 전달되지 않으면 기본값은 10으로 한다 function generator (d, o) { const result = new Array(o?.count ? o?.count : ..

카테고리 없음 2023. 3. 19. 13:45

map, reduce key: {value1, value2}를 배열로 변환하기 조건: Object key 안에 value 구조를 가진 데이터가 있다 목적: 해당 값을 배열로 변환 const tier = { BRONZE: {count: 545, price: 952} DIAMOND: {count: 870, price: 848} GOLD: {count: 176, price: 133} IRON: {count: 357, price: 175} MASTER: {count: 379, price: 95} Platinum: {count: 109, price: 439} SILVER: {count: 580, price: 563} } 변환은 다음과 같이 한다 Array const result = _.map(tier, (valu..

lodash 2023. 3. 19. 13:43