최적화된 코드 생성 및 프레젠테이션을 위한 개방형 WebUI

2.3K 00

일반 소개

WebUI 열기 아티팩트 오버홀은 개발자 닉 톤줌이 개발한 오픈 웹UI 기반의 포크 프로젝트입니다. 코드 생성 및 프레젠테이션을 위한 AI의 기능을 개선하는 데 중점을 둔 오픈 소스 도구입니다. 사용자는 이 도구를 사용하여 AI가 코드를 생성하고 인터페이스에서 직접 결과를 편집하고 볼 수 있습니다. 이 도구는 로컬 배포를 지원하며 다음과 호환됩니다. Ollama 개발자가 코드를 빠르게 테스트하고 초보자가 프로그래밍을 배우는 데 적합합니다. 이 프로젝트는 현재 베타 버전이며, 사용자는 GitHub에서 무료로 다운로드할 수 있습니다. 코드 편집기, 실시간 미리보기 및 차이점 비교 기능을 제공하며 여러 프로그래밍 언어를 지원합니다.

기능 목록

코드 캔버스(컴퓨팅): 파일과 버전을 전환할 수 있는 VSCode와 유사한 모나코 편집기를 사용하여 AI가 생성한 코드가 오른쪽에 표시됩니다.
차이점 비교AI 코드를 수정할 때 변경된 부분을 강조 표시하고 클릭 한 번으로 비교 보기를 전환합니다.
디자인 미리보기HTML, CSS, 자바스크립트 실시간 미리보기 지원, 내장된 테일윈드 스타일, 리액트 컴포넌트도 렌더링 가능.
React 지원React 컴포넌트를 직접 미리 볼 수 있으며, 성공률은 약 80%입니다. export default.
다국어 지원자바스크립트, 파이썬, C#, 자바, PHP 및 기타 여러 언어를 지원합니다.
파일 보기채팅의 코드 블록이 파일로 표시되어 쉽게 관리할 수 있습니다.

도움말 사용

설치 프로세스

Open WebUI 아티팩트 오버홀은 로컬 배포가 필요합니다. 다음은 자세한 설치 단계입니다:

Docker로 설치하기

환경 확인
- Docker가 설치되어 실행 중인지 확인합니다.
- Nvidia GPU를 사용하는 경우 다음을 설치해야 합니다. 엔비디아 CUDA 툴킷.

풀 코드

터미널을 열고 프로젝트를 복제합니다:

git clone https://github.com/nick-tonjum/open-webui-artifacts-overhaul.git

카탈로그로 이동합니다:
```
cd open-webui-artifacts-overhaul
```

도커 실행

기본 명령(CPU 모드):

docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:main

GPU를 사용하는 경우:

docker run -d -p 3000:8080 --gpus all -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:cuda

올라마 통합으로:

docker run -d -p 3000:8080 -v ollama:/root/.ollama -v open-webui:/app/backend/data --name open-webui ghcr.io/open-webui/open-webui:ollama

액세스 인터페이스
- 설치가 완료되면 브라우저를 열고 다음과 같이 입력합니다. http://localhost:3000.

Python으로 설치하기

환경 준비하기
- Python 3.11 또는 3.10을 설치합니다. Conda를 사용하여 환경을 만드는 것이 좋습니다:
```
conda create -n open-webui python=3.11
conda activate open-webui
```
종속성 설치
- 프로젝트를 복제한 후 카탈로그로 이동합니다:
```
cd open-webui-artifacts-overhaul
```
- 프런트엔드 종속성을 설치합니다:
```
npm install --no-package-lock
npm install @floating-ui/utils
npm run build
```
- 백엔드 디렉토리로 이동하여 백엔드 종속성을 설치합니다:
```
cd backend
pip install -r requirements.txt
```
서비스 시작
- 실행 중입니다:
```
./start.sh
```
- 인터뷰 http://localhost:8080.

AI 모델 구성

Ollama부팅 후 설정으로 이동하여 로컬 올라마 주소를 입력합니다(예 http://localhost:11434).
OpenAI API설정에서 API 키를 입력하거나 Docker를 사용할 때 매개 변수를 추가합니다:
```
-e OPENAI_API_KEY=your_secret_key
```

주요 기능

코드 캔버스(컴퓨팅)

채팅창에 "버튼이 있는 HTML 페이지 작성"과 같은 요구 사항을 입력합니다.
AI가 코드를 생성하면 오른쪽에 편집기가 표시됩니다.
파일 또는 버전을 전환하려면 위쪽 화살표를 클릭합니다.
편집기에서 직접 코드를 변경하고 저장한 후 채팅을 업데이트하세요.

차이점 비교

"버튼을 녹색으로 변경"이라고 입력하면 AI가 새 코드를 반환합니다.
'차이점' 버튼을 클릭하면 녹색 부분이 추가 항목이고 빨간색 부분이 삭제 항목입니다.
'차이점 닫기'를 클릭하여 일반 보기를 복원합니다.

디자인 미리보기

HTML 생성 또는 React 코드를 입력한 후 '디자인 보기'를 클릭합니다.
오른쪽에는 버튼 스타일과 같은 웹 효과가 표시됩니다.
테일윈드로 글쓰기 <div>그러면 빨간색 배경이 보입니다.
미리 보기가 작동하려면 React 컴포넌트가 구문적으로 정확해야 합니다.

다국어 지원

"파이썬으로 정렬 함수 작성"과 같이 언어를 지정합니다.
코드는 오른쪽에 표시되며 로컬에서 실행할 수 있도록 복사를 지원합니다.

작동 예

코드 생성
- 입력 : "시간을 표시하는 자바스크립트 함수를 작성하세요."
- 오른쪽 편집기에 코드가 표시됩니다.
미리보기 효과
- '디자인 보기'를 클릭하여 시간이 어떻게 표시되는지 확인합니다.
- "시간 글꼴 크기 변경"을 입력하면 AI가 코드를 업데이트합니다.
불일치 확인
- '차이' 버튼을 클릭하면 글꼴 크기가 변경되는 것을 확인할 수 있습니다.
- 새 버전을 저장합니다.
관리되는 버전
- 상단의 '버전 1'과 '버전 2' 사이를 전환하여 변경 사항을 비교합니다.

주의

이 프로젝트는 베타 버전으로 버그가 있을 수 있으므로 문제가 발생하면 GitHub에 이슈를 제출하세요.
React 미리보기 성공률 80%, 복잡한 컴포넌트가 실패할 수 있습니다.
간단하고 안정적인 Docker를 사용하여 설치하는 것이 좋습니다.

이 도구는 직관적이며 개발자가 코드를 빠르게 생성하고 테스트하는 데 사용할 수 있습니다. 초보자도 AI를 통해 프로그래밍 로직을 배울 수 있습니다.

애플리케이션 시나리오

프런트엔드 개발
웹 페이지를 빠르게 작성해야 할 때 HTML과 CSS를 생성하고 결과를 실시간으로 미리 볼 수 있습니다.
프로그래밍 학습
간단한 요구 사항을 입력하고 AI가 생성한 코드를 관찰하고 수정한 후 변경 사항을 확인합니다.
코드 디버깅
AI로 수정된 코드를 서로 다르게 비교하여 요구 사항을 준수하는지 확인하세요.

QA

어떤 모델이 지원되나요?
설정 후 바로 사용할 수 있는 기본 Ollama 모델 및 OpenAI API를 지원합니다.
React 미리보기가 가끔 실패하는 이유는 무엇인가요?
현재 성공률 80%, 복잡한 코드 또는 누락됨 export default 오류가 발생했습니다. 개발자가 개선 중입니다.
버전 업데이트는 어떻게 하나요?
Docker를 사용하는 사용자는 Watch타워를 사용할 수 있습니다:
```
docker run --rm --volume /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower --run-once open-webui
```