AI 풀스택 도구 오픈소스! 클릭 한 번으로 웹사이트를 생성하는 Ollama+Qwen2.5-Code runbolt.new로 여러분을 안내합니다!

최근 커서, V0, 볼트닷뉴, 그리고 가장 최근에는 윈드서프까지 AI 프로그래밍 도구의 인기가 매우 뜨겁습니다.

이 게시물에서는 제품 출시 후 단 4주 만에 400만 달러의 수익을 창출한 오픈 소스 솔루션인 Bolt.new에 대한 이야기부터 시작하겠습니다.

도움이 되지 않는 사이트국내 접속 속도 제한그리고무료 토큰 할당량이 제한되어 있습니다..

더 많은 사람들이 사용할 수 있도록 로컬에서 실행하고 AI를 가속화할 수 있는 방법을 찾는 것이 Monkey의 사명입니다.

오늘의 공유.로컬 Ollama로 배포된 대형 모델을 통해 bolt.new를 구동하는 방법을 안내합니다.다음과 같은 사실을 깨달은 AI 프로그래머 토큰 자유.

1. Bolt.new 소개

Bolt.new 기본 LLM 기반 인텔리전스와 브라우저 내에서 코딩 및 실행을 가능하게 하는 WebContainers 기술이 결합된 SaaS 기반 AI 코딩 플랫폼으로 다음과 같은 장점이 있습니다:

• 프론트엔드 및 백엔드 개발 동시 지원.;
• 프로젝트 폴더 구조 시각화.;
• 종속 요소가 자동으로 설치되는 자체 호스팅 환경(예: Vite, Next.js 등).;
• 배포에서 프로덕션까지 Node.js 서버 실행하기

볼트.new의 목표는 프로그래밍 초보자도 간단한 자연어를 통해 아이디어를 실현할 수 있도록 더 많은 사람들이 웹 애플리케이션 개발에 더 쉽게 접근할 수 있도록 하는 것입니다.

이 프로젝트는 공식적으로 오픈 소스화되었습니다: https://github.com/stackblitz/bolt.new

하지만 공식 오픈 소스인 bolt.new는 지원 모델이 제한되어 있으며, 많은 국내 파트너가 해외 LLM API를 호출할 수 없습니다.

커뮤니티에는 신이 있습니다. bolt.new-any-llm현지 지원을 이용할 수 있습니다. Ollama 모델을 직접 살펴보세요.

2. Qwen2.5-코드 로컬 배포

얼마 전 Ali는 Qwen2.5-Coder 시리즈 모델을 오픈소스화했으며, 그 중 32B 모델은 10회 이상의 벤치마크 평가에서 최고의 오픈소스 결과를 달성했습니다.

여러 가지 주요 기능에서 GPT-4o를 능가하는 세계에서 가장 강력한 오픈 소스 모델이라고 할 만합니다.

올라마 모델 리포지토리도 qwen2.5-coder에 대해 라이브 상태입니다:

Ollama는 대형 모델을 배포하기 위한 가젯 친화적인 도구입니다.

2.1 모델 다운로드

다운로드할 모델의 크기는 자신의 비디오 메모리에 따라 선택할 수 있으며, 32B 모델의 경우 최소 24G 비디오 메모리가 보장됩니다.

아래에서는 7b 모델을 통해 이를 설명합니다:

ollama pull qwen2.5-coder

2.2 모델 수정

올라마의 기본 최대 출력량은 4096개이므로 코드 생성 작업에는 턱없이 부족합니다.

이렇게 하려면 컨텍스트 토큰의 수를 늘리도록 모델 매개변수를 수정해야 합니다.

먼저 새 모델파일 파일을 생성하고 채웁니다:

FROM qwen2.5-coder
PARAMETER num_ctx 32768

그런 다음 모델 변환이 시작됩니다:

ollama create -f Modelfile qwen2.5-coder-extra-ctx

전환에 성공한 후 모델 목록을 다시 확인합니다:

2.3 모델 실행

마지막으로 서버 측에서 모델을 성공적으로 호출할 수 있는지 확인합니다:

def test_ollama():
    url = 'http://localhost:3002/api/chat'
    data = {
        "model": "qwen2.5-coder-extra-ctx",
        "messages": [
            { "role": "user", "content": '你好'}
        ],
        "stream": False
    }
    response = requests.post(url, json=data)
    if response.status_code == 200:
        text = response.json()['message']['content']
        print(text)
    else:
        print(f'{response.status_code},失败')

문제가 없으면 bolt.new에서 호출할 수 있습니다.

3. 로컬에서 실행 중인 Bolt.new

3.1 로컬 배포

step1로컬 모델을 지원하는 bolt.new-any-llm을 다운로드하세요:

git clone https://github.com/coleam00/bolt.new-any-llm

2단계환경 변수의 복사본을 만듭니다:

cp .env.example .env

3단계환경 변수를 다음과 같이 수정합니다.OLLAMA_API_BASE_URL자신의 것으로 교체하세요:

# You only need this environment variable set if you want to use oLLAMA models
# EXAMPLE http://localhost:11434
OLLAMA_API_BASE_URL=http://localhost:3002

step4설치 종속성(로컬에 설치된 노드 포함)

sudo npm install -g pnpm # pnpm需要全局安装
pnpm install

step5원클릭 조작

pnpm run dev

다음 출력을 보면 시작에 성공했음을 알 수 있습니다:

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

3.2 효과 데모

브라우저에서 열기http://localhost:5173/올라마 유형 모델이 선택됩니다:

참고: 처음 로드할 때 Ollama에서 모델이 나타나지 않으면 몇 번 새로고침하여 어떻게 보이는지 확인하세요.

테스트해 보겠습니다.

写一个网页端贪吃蛇游戏

왼쪽에 있습니다.流程执行영역이 있고 오른쪽에는代码编辑영역, 그 아래에는终端영역. 코드 작성, 종속성 설치, 터미널 명령 등 모든 것을 AI가 알아서 해줍니다!

오류가 발생하면 오류를 던지고 다시 실행하고 문제가 없으면 오른쪽의Preview페이지가 성공적으로 열립니다.

참고: 이 예제에서는 작은 7b 모델을 사용하므로 필요한 경우 32b 모델을 사용하면 효과가 크게 향상됩니다.

마지막에 쓰기

이 문서에서는 qwen2.5 코드 모델의 로컬 배포를 통해 AI 프로그래밍 도구 bolt.new를 성공적으로 구동하는 방법을 안내합니다.

물론 프런트 엔드 프로젝트를 개발하는 데 사용하는 것은 여전히 매우 강력하며, 잘 사용하고 기본적인 프런트 엔드 및 백엔드 개념을 알고 있으면 두 배 더 효과적입니다.