장치에서 실행되는 디자인 보조 — 계정 없음, 서버 없음

이전의

대부분의 AI 디자인 도구는 서버로 프롬프트를 보내고 큰 모델을 실행하고 코드를 다시 보냅니다. 그것은 계정, 네트워크 왕복, 그리고 당신의 작업-in-progress transits 다른 사람의 인프라를 신뢰.

우리는 다른 극단적으로 간다는 방법을 알고 싶었습니다: ** 모형이 당신의 자신의 기계에 달리는 디자인 조수. ** 계정 없음. 다운로드 프롬프트는 결코 브라우저를 떠난다. PinePaper의 편집기에서 실험적인 AI / Code → Assistant 탭으로 라이브하고, 이 게시물은 어떻게 작동하는지 솔직한 계정이며, 부족한 곳이다.

왜 코드를 위해 모델을 묻지?

명백한 접근은 PinePaper의 API에 대한 JavaScript를 작성하기 위해 on-device 모델을 요청하고 실행하는 것입니다. 우리는 그것을 시도했다. 그것은 거의 실패.

작은 모델 - 노트북에 맞는 것들 - 특정 응용 프로그램의 API의 지식이 없습니다.** PinePaper.create()를 호출하기 위해 0.5–2B 모델을 요청하고 개선합니다. 중요한 방법은 API가 color를 기대하는 API가 color를 기대하는 (SVG 스타일 fill)를 읽지 않습니다. 출력 looks 같은 코드와 조용히 잘못된 일을합니다.

그래서 우리는 코드를 요청하지 않습니다. 우리는 도구 통화의 ** 계약 목록 요청 :**

[
  { "name": "pinepaper_set_background_color", "arguments": { "color": "#0F0F1A" } },
  { "name": "pinepaper_create_item", "arguments": { "itemType": "star", "x": 400, "y": 300, "radius": 90, "color": "#E74C3C", "animationType": "pulse" } }
]

동일한 vocabulary PinePaper의 [MCP 서버] (/api/guides/mcp-integration)는 외부 대리인에 노출합니다 - 그러나 국부적으로를 달리는 모형에 의해 방출되고, 작은 파견자를 통해서 화포에 실행하십시오.

불완전한 산출을 만들기

키 이동은 ** 변형 된 디코딩입니다. ** 모델이 유효한 형태를 생성하는 대신, 우리는 제약 *what 토큰을 방출 할 수 있습니다: *

• Chrome의 내장 Prompt API (Gemini Nano)에서 응답 제약으로 ** JSON Schema**를 통과합니다. 모델은 객체를 생성 할 수 있습니다 스키마 허용 - additionalProperties: false와 함께, 어떤 인수 스키마가 정의되지 않습니다.
• ** WebLLM** (WebGPU에서 실행되는 오픈 모델) **EBNF 문법 ** XGrammar를 통해. 문법은 구조에 영향을 미칩니다. 모델은 값에만 채울 수 있습니다.

둘 다 동일한 tool-call 모양을 생성합니다. 작은 수리 통행은 다음 작은 모델이 여전히 만들지 못합니다 - 떨어졌다 name, 그 래퍼없이 인수 - 인수 형태로 도구를 삽입하여. 결과는 "녹색 pentagon"이 오류 대신 실제 create_item 호출됩니다.

2개의 공급자, 1개의 계약

On-device AI는 한 가지가 아니며 브라우저에 따라 다릅니다

• ** Browser AI ** - 크롬 내장 ** Gemini 나노 ** (window.LanguageModel). 브라우저로 모델 배; 우리에서 다운로드 할 필요가 없습니다. 이것은 JSON-schema constraint가 싸고 잘 지원되기 때문에 오늘날 가장 신뢰할 수있는 장치 경로입니다.
• ** PinePaper AI ** - ** WebLLM ** 모든 WebGPU 브라우저에서 Qwen2.5 모델을 실행합니다. 한 번 모델을 다운로드합니다 (이후에 예정), 다음 오프라인 실행.
• Languages — non-English prompts는 Korean on-device first (브라우저의 내장 번역기를 통해)로 번역되어 있으므로 작은 코드 중심 모델은 영어 중심입니다. 생성된 장면은 신속한 언어와 동일합니다.

사용자는 엔진을 선택합니다. 모든 다운스트림 - 제약, 실행, 캔버스 - 동일합니다.

편집, 뿐만 아니라 유전

한 샷 발전기는 조수가 아닙니다. "스타 레드를 만들려면"모델은 캔버스에 이미 알고 있어야합니다. 그래서 각 차례로 우리는 현재 항목의 컴팩트 스냅 샷을 공급 — 그들의 ids, 유형, 및 색상 - 서버 측 채팅처럼 정확히. "스타 레드를 마시"다음 항목의 ID에 대한 실제 modify_item 호출에 해결. (그리고 작은 모델이 때때로 "the circle"을 의미하는 경우 스타, executor는 라이브 캔버스에 대한 fuzzy 참조를 해결합니다.)

대화 로그가 유지됩니다 ** 장치에 ** 로컬 저장소에. 어떤 것도 어디에서나 전송되지 않습니다. 명시적으로 실패한 프롬프트를 공유하기 위해 선택하지 않는 한, 우리는 프롬프트와 문법을 개선하는 데 도움이.

작은 모델이 충분하지 않을 때 — escalate

여기에 정직한 부분 : ** 0.5–2B 모델은 가장 약한 계층입니다.** 변형된 디코딩 보증 valid Structure, 하지만 모델은 여전히 올바른 도구와 감각적인 값을 선택해야 하며 항상 이지 않습니다. pentagon 및 under-specified 모델에 대한 요청은 6각형을 제공합니다. "red"를 두 번 묻고 발전기를 대신 실행할 수 있습니다.

그래서 건축은 first 계층으로 on-device를, 단지 1개를 대우합니다. 몇 가지 실패한 시도는 조수가 제공 한 후 ** 전체 대화를 Cloud model** — 동일한 intent, 동일한 캔버스, 훨씬 더 가능한 모델 — 그리고 당신은 당신이 꺼진 곳을 정확히 계속. 낮은 fidelity, 무료 및 개인, 당신이 그것을 필요로 할 때 높은 fidelity에 한 번 클릭 경로.

우리가 배운 것

• Constraints 비트 프롬프트. 지상 시스템 신속한 도움; 잘못된 출력을 가능하게하는 문법/schema는 훨씬 더 돕습니다. 단일 가장 큰 신뢰성 점프는 더 나은 프롬프트에서 제약 디코딩에서 왔습니다.
• ** 모델 크기는 여전히 지배합니다. ** 0.5B에서 1.5B 모델로 이동하여 종종 보조가 올바른 도구를 선택하는 방법을 개선했습니다. 작은 모델을 스마트 하나로 전환하는 것은 불가능합니다.
• ** 전체 문법은 너무 커질 수 있습니다. ** 우리의 첫 번째 문법 인코딩 every 가능한 작업 — 포함 경계 길이 탈출 해치 arbitrary 그림 코드. 그것은 그렇게 큰 그 constrained decoding는 페이지를 넣었습니다. 일반적인 작업을 다루는 컴팩트 한 문법은 올바른 기본입니다; 전체 표면은 선택입니다.
• **주요 실을 끄십시오. ** UI 스레드에 inference를 하는 모델은 페이지를 동결. WebLLM은 Web Worker에서 실행되므로 에디터는 모델의 로드와 생성을 통해 응답을 유지한다.

다음 것

이 실험 및 개선입니다. 로드맵:

• **변환 경로에서 더 많은 도구 적용 ** — PinePaper의 작업은 프리폼 탈출 해치없이 표현할 수 있습니다.
• **Larger on-device 모델 ** WebGPU 모델 카탈로그로 성장, 신뢰할 수있는 거래 다운로드 크기.
• ** 더 단단한 eval 루프 ** - opted-in 실패 보고서를 사용하여 on-device 모델을 여행하고 그에 대한 문법을 강하게합니다.
• ** 부드러운 on-device → Cloud Handoff **, 그래서 에스컬레이션은 전환 도구보다 품질 다이얼을 돌리고 같은 느낌.

Throughline: 동일한 declarative 도구 vocabulary는 브라우저 경계의 한쪽에 모델을 구동한다. 외부 에이전트는 MCP에 이러한 도구를 호출; on-device 모델은 로컬 같은 모양을 호출. 1개의 계약, 그들이 달리는 대리인.

• 편집기에서 제공 — open AI / Code → Assistant. 그것은 무료입니다, 당신의 장치에 실행, 그리고 계정이 필요하지 않습니다. *