생성형 AI를 이용한 개인 창작 마법 프로젝트

Description: JS 기반의 풀스택 프로젝트에 AI를 접목한 프로젝트개요입니다. express와 react를 기반으로 openai api를 사용하여 사용자 맞춤형 고유 마법을 만들어주는 서비스입니다.

현재 노트: KR-110.40 생성형 AI를 이용한 개인 창작 마법 프로젝트
하위 분류

#magic_prompt #개인프로젝트 #프로젝트경험

Magic Game Web Application

현재 코드 https://github.com/murphybread/magic-prompt-game.git

프로젝트 소개

사용자별, 시도 횟수별 고유한 마법을 생성형 AI를 통해 만들고 이를 카드화 하여 개인의 창작 즐거울을 제공하는 프로젝트입니다.

프로젝트 동작

  1. 로그인
  2. 대화 입력
  3. 대화 중 마법을 만들고 싶으면 특수 키워드 ww입력
  4. 지금까지 대화를 기반으로 텍스트 및 이미지 생성

주요 기능

현재 버전 구현 데모(1.4.1기준)

chrome-capture-2024-12-5.webm

기술 스택

버전 기록

1.0.0: 백엔드(Express)와 프론트엔드(React)간의 연동. 백엔드의 API 기능을 프론트엔드의 버튼을 클릭하였을 때 동작 가능 여부 확인 (Key Word CORS )

1.1.0: DB와의 연동. 기존 In-memory에 저장하던 유저정보를 Postgresql 외부 DB에 저장. NEON 플랫폼을 사용하여 유저 생성, 삭제등으로 DB변하는 것과, 유저 목록시 해당 DB를 참조하는 점으로 연결여부 확인 (Postgresql pool)

1.1.1: 소셜 트위터, 구글 로그인. 일단 로그인 버튼 구현하기 위한 환경변수들 발급 후 설정.
   - 현재 둘다 동작에 문제가 있으며 트위터 먼저 구현중, 트위터의 경우 인증까지 됐지만 이후 다시 홈페이지 돌아왔을때 문제 생김
   - 원하는 기능
      -  처음 소셜 로그인 시 인증 후 유저가 DB에 없다면 Create User 기능 수행 후 로그인
      -  이후 소셜 로그인 시 DB에 유저가 있다면 해당 정보로 로그인

1.1.2: 트위터 소셜 로그인 성공

1.2.0: openai chat서비스 기능 추가

1.3.0: openai chatbot 및 이미지생성기능 추가

1.3.1: structured output 기능을 통해 정해진 양식 출력

1.3.2: multiturnconversation 방식 구현. 최종적으로 특정 키워드 입력시  structured output기능 사용. 이후 기존 generated Image동작, 리팩토링 CommonJS->ESM

1.4.1: 대화시 표기화면 UI변경 및 multiconversation 반영시 기존의 대화를 기반으로 동작

추가 예정 기능