guesung / -alda Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 1.0 1.34 MB

인공지능 기반의 약물 정보 제공 챗봇 서비스

Home Page: https://aldaa.vercel.app/chat

JavaScript 12.83% TypeScript 86.66% CSS 0.51%

-alda's Introduction

🍞 Working Experience

Elice | Frontend Development Internship ( 2024.03 - 2024.06 )

🍞 Activities

DND 9th ( 2023.07 - 2023.08 )

🍞 Education

Gachon University ( 2019.03 - )

🍞 Skills

used as the main

used at least once

🍞 Contribution

-alda's People

Contributors

Watchers

Forkers

2093ab

-alda's Issues

csv파일 교체 & 약품 데이터

우선, 질문 선택지는 다음과 같다.

복용 방법과 시간
피해야 할 약, 음식
부작용 대법
보관 방법

prettier 오래 걸림 현상

띄어쓰기 2개 추가해서 저장을 눌렀을 때 영상이다.

처음에는 '곧 고쳐지겠지~'생각했는데, 그 생각을 한 지 어느덧 2주일이 넘었다. 어느새 이 기다리는 시간에 익숙해져 있었다. 익숙함이란 것이 이렇게나 무섭다. 이렇게 영상으로 찍고 보니 길게는 10초 가까이 걸리는 것이다. 이 기회에 이거를 꼭 바로잡아 금같은 시간을 아껴야겠다.

DB구조는 어떻게 하는 것이 좋을까?

�우선, 각 사용자 별로 데이터가 있다. 각 사용자는 각각의 PK를 가지고 있다. 이를테면 전화번호.

PK(전화번호 혹은 이름)
name : 사용자 이름
drug : 등록한 약물 정보
selectQuestion : 남은 선택지 질문
chatMessageList(채팅 메시지 목록)
- id : 1부터 1씩 증가
- message : 메시지 내용
- isMine : 내 것인지(true), chatBot것인지(false)

openai.createFile -> 'no such file or directory, open~' 에러

          [Fine-Tuning](https://platform.openai.com/docs/guides/fine-tuning/preparing-your-dataset)을 하기 위해 file업로드를 하려고하는데, 자꾸 `no such file or directory, open~'`에러가 뜬다.

const createFineTune = async () => {
  const response = await openai.createFile(
    fs.createReadStream("data2.csv"),
    "fine-tune"
  );
  console.log(response);
};

Originally posted by @guesung in #17 (comment)

고민 1. isSelected를 바꾸는 로직을 어디에 둘 것인가?

chatMessageList는 현재 recoil로 전역으로 관리하고 있다. runOpenAI에서도 chatMessageList를 바꾸는 로직이 계속 있기에, chatMessageList를 인자로 넘겨줄 때 해당 요소의 isSelected를 true로 바꿔서 전달해주면 될 것이다.
즉, isSelected를 runOpenAI바깥에서 먼저 변경하고, 변경한 값을 인자로 넘겨 runOpenAI 안에서 set함수(recoil)를 이용해 변경하여 렌더링을 수행한다.

순서는 다음과 같다.

tailwind css 동적으로 적용이 안됨

<div className={clsx(absolute h-[3.125rem] overflow-scroll)} >처럼 값을 직접 넣어주면 적용이 되지만,
<div className={clsx( absolute h-[${
3.125 * autoCompleteWordList.length
}rem] overflow-scroll )} >
처럼 외부 변수를 사용하면

style에는 h-[15.625rem]라고 정상적으로 적혀있지만 실제로 화면에서 보면 화면 전체를 차지하는 것을 볼 수 있다. 왜적용이 안되는 걸까?

Next.js에서 'fs'관련 메소드 사용 시 "readFile is not a function" 에러 발생

          CSVLoader을 사용하니 아래와 같은 오류 발생

Originally posted by @guesung in #2 (comment)

Open AI API -> Langchain으로 교체

채팅 - 선택지

해당 선택지는 채팅 메시지 중간중간에 나와야 함
ChatMessageList배열에서 함께 다루되, type으로 message인지, select인지 구분 => select라면 특수하게 처리

TTS 추가

불필요한 렌더링

          ![Jun-02-2023 16-21-24](https://github.com/guesung/teck-tree/assets/62178788/9465d40e-e836-4e66-83a8-3f077fa26fe7)

recoil을 이용하여 구현하였다. stream 메시지를 받을 때마다 렌더링이 일어난다. 메시지를 받고 있는 말풍선은 re-rendering이 일어나는 것이 맞는데, 다른 컴포넌트에서 일어나는 렌더링은 불필요하다.

Originally posted by @guesung in #43 (comment)

웹앱 Script 추가

Flutter 공식문서 - Setup Web

Next.js 공식문서 - <Script />

프롬프트 수정

Langchain.js 세팅

입력 - 자동완성 기능

'fs'이용한 CSV 파일 모양이 이상하다.

          그런데, CSV 파일 모양이 이상하다.

그 이유는, encoding의 default값이 'utf-8'인데, 현재 csv파일은 한글을 포함하고 있기 때문이다.
추가 공부 : UTF8과 EUC-KR

Originally posted by @guesung in #6 (comment)

질문 선택지 보완

선택지 수정 selectQuestion: [ "복용 방법과 시간", "피해야 할 약, 음식", "부작용 대법", "보관 방법", ],
선택지 선택 시 해당 요소 제거

Langchain에서 docs넣기

[
    new Document({ pageContent: "Harrison went to Harvard." }),
    new Document({ pageContent: "Ankush went to Princeton." }),
  ]

에는 적용이 되지만, Next.js API를 이용하여 불러온 data에서는 적용이 안됨

Originally posted by @guesung in #9 (reply in thread)

Can't resolve 'fs' 에러

Next.js는 페이지를 구성할 때 기본적으로 SSG이다. 즉, 서버 측에서 html을 파싱해서 client측에 넘겨준다. 'fs'는 클라이언트, 즉 컴퓨터에 있는 파일을 읽는 라이브러리이기 때문에 server측에서 페이지를 파싱할 때 에러가 발생하게 된다. 이를 어떻게 해결해야 할까?

약 정보 DB 구축

LLM -> 약 정보 DB에서만 데이터를 검색하여 오류 없는 데이터 전달할 수 있도록

Chat Message 컴포넌트

폴더 구조 : src > components

OpenAI api로 구현

자동 완성 기능 구현

firebase 연결

참고

Input 컴포넌트

TTS - 멈춤/재생 기능 구현

// src/utils/makeTTS.ts
export class TTS {
  message: string;
  isPlaying: boolean;
  constructor(message: string) {
    this.message = message;
    this.isPlaying = false;
  }
  play() {
    const tts = new SpeechSynthesisUtterance(this.message);
    tts.lang = "ko-KR";
    tts.pitch = 1;
    tts.rate = 0.8;
    window.speechSynthesis.speak(tts);
    window.speechSynthesis.resume();
    this.isPlaying = true;
  }
  stop() {
    window.speechSynthesis.pause();
    this.isPlaying = false;
  }
}

export const makeTTS = (message: string) => {
  const tts = new SpeechSynthesisUtterance(message);
  tts.lang = "ko-KR";
  tts.pitch = 1;
  tts.rate = 0.8;
  window.speechSynthesis.speak(tts);
};

// src/components/chatMessage.tsx
  const handleSpeaker = () => {
    if (tts.isPlaying) tts.stop();
    else tts.play();
  };

TTS class를 만들어, 버튼을 눌렀을 때 isPlaying===true이면 재생 중이므로 멈추고, else이면 멈춰 있으므로 다시 재생합니다.

휴대폰 화면인지 인식해서 Header 제거
채팅창 올라왔을 때 자동완성 기능 제거
아래 텍스트 필드쪽 ui가 디바이스 화면이 넓어지면 양쪽이 너무 넓고 좁아지면 아예 잘리는 현상
텍스트 입력중인 상태일때 메시지 보내기 버튼이 디자인이 달라져야 하고
border가 주황색이 되는데 이것도 주황색이 되지않게 예외처리해야 할 것
채팅메시지 가려지면 스크롤 맨 아래로 내리기

1. Next.js API

// app>api>get-data>route.ts
import { CSVLoader } from "langchain/document_loaders/fs/csv";
import { NextResponse } from "next/server";

export async function GET() {
  const loader = new CSVLoader("public/data.csv");
  const docs = await loader.load();
  return NextResponse.json(docs);
}

Next.js API에서는 csv파일을 불러와 CSVLoader로 parsing을 한 data를 response로 넘겨준다.

프롬프트 수정

기본 질문 프롬프트
1. Given the following extracted parts of a long document and a question, create a final answer. If you don't know the answer, just say that you don't know. Don't try to make up an answer.
2. 사용자의 이름은 ${userInfo.name}이야
3. ${inputValue} 에 대해 말해줘 => inputValue : 효능/복용 방법과 시간 혹은 사용자가 입력하는 메시지
처음 약물 선택할 때 추가하는 프롬프트 : 사용자는 ${word}약물을 복용하고 있어.

OpenAI API key not found 에러

기존 chain().call코드에서는 문제 없이 실행이 되었다. 그런데 ConversationalRetrievalQAChain.fromLLM()으로 실행하니 위 사진과 같은 에러가 발생하였다.

Next.js 어떤 api를 전송해도 500에러 발생

/app/pages.tsx

const runHnswlibVectorStore = async () => {
  await axios.get("api/get-data");
};

/app/api/get-data.ts

export async function GET() {
  return 1
}

정말 통신에 필요한 코드만 남겨두고 api를 쏘는데도 500 에러가 발생한다. 왜지 ?

남은 작업

아래 텍스트 필드쪽 ui가 디바이스 화면이 넓어지면 양쪽이 너무 넓고 좁아지면 아예 잘리는 현상

Originally posted by @guesung in #71 (comment)