react native ai vision

네이티브 AI 반응

LLM 실시간/스트리밍 텍스트 및 채팅 UI, 이미지 서비스, 여러 모델을 사용하는 이미지에 대한 자연어, 이미지 처리를 지원하는 크로스 플랫폼 모바일 AI 앱을 구축하기 위한 풀 스택 프레임워크입니다.

여기에서 비디오 튜토리얼을 확인하세요

특징

• OpenAI ChatGPT, Anthropic Claude, Cohere, Cohere Web 및 Mistral에 대한 LLM 지원
• Fal.ai에서 제공하는 다양한 이미지 모델
• 모든 공급자의 실시간/스트리밍 응답
• 코드 해석기 및 검색을 포함한 OpenAI 도우미
• 선택한 인증 공급자를 통해 인증 및 권한 부여를 쉽게 활성화하는 서버 프록시입니다.
• 테마 지정(기본적으로 5가지 테마 제공) - 단 몇 줄의 코드만으로 추가 테마를 쉽게 추가할 수 있습니다.
• ByteScale을 사용한 이미지 처리

용법

다음을 실행하여 새 프로젝트를 생성합니다.

npx rn-ai

다음으로, CLI를 사용하여 환경 변수를 구성하거나 나중에 구성하십시오.

앱 실행

앱 디렉터리로 변경하고 다음을 실행합니다.

npm start

서버 실행

서버 디렉터리로 변경하고 다음을 실행합니다.

npm run dev

테마

새 테마를 추가하려면 app/src/theme.ts 열고 다음 구성으로 새 테마를 추가하세요.

 const christmas = {
  // extend an esisting theme or start from scratch
  ... lightTheme ,
  name : 'Christmas' ,
  label : 'christmas' ,
  tintColor : '#ff0000' ,
  textColor : '#378b29' ,
  tabBarActiveTintColor : '#378b29' ,
  tabBarInactiveTintColor : '#ff0000' ,
  placeholderTextColor : '#378b29' ,
}

파일 하단에서 새 테마를 내보냅니다.

 export {
  lightTheme , darkTheme , hackerNews , miami , vercel , christmas
} 

LLM 모델 구성

새로운 LLM 모델을 추가하거나 기존 LLM 모델을 제거하는 방법은 다음과 같습니다.

앱에서

constants.ts 에서 MODELS 업데이트하여 모델을 추가하거나 구성할 수 있습니다.

모델 제거의 경우 지원하지 않으려는 모델만 제거하면 됩니다.

모델을 추가하려면 모델 정의가 MODELS 배열에 추가되면 src/screens/chat.tsx 업데이트하여 새 모델을 지원해야 합니다.

1. 새 모델 데이터를 보관할 로컬 상태 만들기
2. 새로운 모델 유형을 처리하도록 chat() 함수 업데이트
3. 새로운 모델을 호출하기 위한 generateModelReponse 함수 생성
4. utils.ts 에서 getChatType 업데이트하여 서버 경로에 해당하는 LLM 유형을 구성하세요.
5. UI에서 새 모델 렌더링

 {
  chatType . label . includes ( 'newModel' ) && (
    < FlatList
      data = { newModelReponse . messages }
      renderItem = { renderItem }
      scrollEnabled = { false }
    / >
  )
}

서버에서

모바일 앱에서 생성한 모델 유형에 해당하는 server/src/chat 폴더에 새 파일을 생성합니다. 시작하려면 다른 기존 경로에서 많은 스트리밍 코드를 복사하고 재사용할 수 있습니다.

다음으로, 새 경로를 사용하도록 server/src/chat/chatRouter 업데이트하세요.

이미지 모델 구성

새 이미지 모델을 추가하거나 기존 이미지 모델을 제거하는 방법은 다음과 같습니다.

앱에서

constants.ts 에서 IMAGE_MODELS 업데이트하여 모델을 추가하거나 구성할 수 있습니다.

모델 제거의 경우 지원하지 않으려는 모델만 제거하면 됩니다.

모델을 추가하려면 모델 정의가 IMAGE_MODELS 배열에 추가되면 src/screens/images.tsx 업데이트하여 새 모델을 지원해야 합니다.

주요 고려사항은 입력입니다. 모델이 텍스트, 이미지 또는 둘 다를 입력으로 사용합니까?

앱은 두 가지를 모두 처리하도록 구성되어 있지만 그에 따라 값을 API에 전달하려면 generate 함수를 업데이트해야 합니다.

서버에서

Fal.ai

server/src/images/fal 에서 새 모델을 고려하도록 핸들러 함수를 업데이트합니다.

기타 API 제공업체

server/src/images/modelName 에 새 파일을 만들고 새 API 호출을 처리하도록 핸들러 함수를 업데이트합니다.

다음으로, 새 경로를 사용하도록 server/src/images/imagesRouter 업데이트하세요.