एक डिज़ाइन सहायक जो आपके डिवाइस पर चलता है - कोई खाता नहीं, कोई सर्वर नहीं

Premise

अधिकांश AI डिज़ाइन टूल एक सर्वर पर अपना प्रॉम्प्ट भेजते हैं, एक बड़ा मॉडल चलाते हैं और कोड वापस भेजते हैं।. इसके लिए एक खाता, एक नेटवर्क राउंड-ट्रिप की आवश्यकता होती है, और इस बात पर भरोसा करते हैं कि आपके वर्क-इन-प्रोग्रेशन किसी और के बुनियादी ढांचे को पार करते हैं।.

हम जानना चाहते थे कि अन्य चरम कितने समय तक चलता है: ** एक डिजाइन सहायक जहां मॉडल अपनी मशीन पर चलता है।* कोई खाता नहीं. कोई अपलोड नहीं।. शीघ्र कभी भी ब्राउज़र को छोड़ देता है।. यह अब PinePaper के संपादक में एक प्रायोगिक ** AI / कोड → सहायक* टैब के रूप में लाइव है, और यह पोस्ट एक ईमानदार खाता है कि यह कैसे काम करता है और यह कहाँ कम हो जाता है।.

क्यों न केवल कोड के लिए मॉडल पूछो?

स्पष्ट दृष्टिकोण PinePaper के API के खिलाफ जावास्क्रिप्ट लिखने और इसे चलाने के लिए ऑन-डिवाइस मॉडल से पूछना है।. हमने इसकी कोशिश की।. यह बुरी तरह से विफल रहता है।.

लघु मॉडल — जो लोग लैपटॉप पर फिट होते हैं - ** किसी विशिष्ट ऐप के API का ज्ञान नहीं है।* PinePaper.create() को कॉल करने के लिए 0.5-2B मॉडल से पूछो और यह सुधार करता है: एक महत्वपूर्ण तरीका पढ़ा नहीं जाता है (एक SVG-शैली fill जहां API color की उम्मीद करता है), एक तरीका यह कल्पना की गई, गलत आकार में तर्क।. आउटपुट * जैसे कोड और चुपचाप गलत बात करता है।.

इसलिए हम कोड के लिए नहीं पूछते।. हम उपकरण कॉल की ** नियंत्रित सूची के लिए पूछते हैं:*

[
  { "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" } }
]

समान शब्दावली PinePaper का [MCP सर्वर] (/api/guides/mcp-integration) बाहरी एजेंटों को उजागर करता है - लेकिन स्थानीय रूप से चल रहे एक मॉडल द्वारा उत्सर्जित, और एक छोटे से प्रेषक के माध्यम से कैनवास पर निष्पादित किया।.

अवैध उत्पादन असंभव बनाना

कुंजी चाल ** बंद डिकोडिंग है।* मॉडल को उम्मीद करने के बजाय एक वैध आकार का उत्पादन करता है, हम बाधा डालते हैं * क्या टोकन इसे उत्सर्जन करने की भी अनुमति है:*

• क्रोम के बिल्ट-इन प्रॉम्प्ट API (Gemini Nano) पर हम एक JSON स्कीमा* को एक प्रतिक्रिया बाधा के रूप में पास करते हैं।. मॉडल केवल स्कीमा परमिट वस्तुओं का उत्पादन कर सकते हैं - additionalProperties: false के साथ, कोई भी तर्क स्कीमा को परिभाषित नहीं किया गया है, वास्तव में प्रतिनिधित्व योग्य है।.
• WebLLM* (WebGPU पर चलने वाला एक खुला मॉडल), हम XGrammar के माध्यम से एक EBNF व्याकरण संलग्न करते हैं।. व्याकरण संरचना को निर्धारित करता है; मॉडल केवल मूल्यों में भर जाता है।.

दोनों एक ही टूल-कॉल आकार का उत्पादन करते हैं।. एक छोटी मरम्मत पास तब निकट-मिस एक छोटे से मॉडल को बचाता है जो अभी भी बनाता है - एक गिरा name, उनके रैपर के बिना तर्क - तर्क आकार से उपकरण को प्रभावित करके।. परिणाम यह है कि "एक ग्रीन पेंटागन" एक त्रुटि के बजाय एक वास्तविक create_item कॉल हो जाता है।.

नीचे तीनों के बीच स्विच करें।. दो प्रतिबंधित विकल्प पर समान दिखते हैं उद्देश्य: यह दावा है।. उनके बीच क्या परिवर्तन तंत्र है, नहीं परिणाम।.

दो प्रदाता, एक अनुबंध

On-device AI एक बात नहीं है — यह ब्राउज़र पर निर्भर करता है:

• ** ब्राउज़र AI* क्रोम का अंतर्निहित Gemini Nano (window.LanguageModel). ब्राउज़र के साथ मॉडल जहाजों; हम से डाउनलोड करने के लिए कुछ भी नहीं है।. यह आज सबसे विश्वसनीय ऑन-डिवाइस पथ है, क्योंकि JSON-schema बाधा सस्ते और अच्छी तरह से समर्थित है।.
• ** PinePaper AI* WebLLM किसी भी WebGPU ब्राउज़र में Qwen2.5 मॉडल चला रहा है।. यह एक मॉडल को एक बार डाउनलोड करता है (इसके बाद पकड़े गए), फिर ऑफ़लाइन चलाता है।.
• ** गैर-अंग्रेजी संकेत अंग्रेजी ऑन-डिवाइस पहले ( ब्राउज़र के अंतर्निहित अनुवादक के माध्यम से) में अनुवादित हैं क्योंकि छोटे कोड-उन्मुख मॉडल अंग्रेजी केंद्रित हैं।. उत्पन्न दृश्य तत्काल भाषा की परवाह किए बिना भी समान है।.

उपयोगकर्ता इंजन को चुनता है; सब कुछ डाउनस्ट्रीम - बाधा, निष्पादक, कैनवास — समान है।.

संपादन, न केवल उत्पन्न करना

एक शॉट जनरेटर एक सहायक नहीं है।. "स्टार रेड" का समर्थन करने के लिए, मॉडल को यह जानने की जरूरत है कि पहले से ही कैनवास पर क्या है।. इसलिए प्रत्येक मोड़ हम इसे वर्तमान वस्तुओं का एक कॉम्पैक्ट स्नैपशॉट खिलाते हैं - उनके ids, प्रकार और रंग — वास्तव में एक सर्वर-साइड चैट की तरह होगा।. "स्टार रेड बनाएं" तब आइटम के आईडी के खिलाफ वास्तविक modify_item कॉल को हल करता है।. (और क्योंकि एक छोटा मॉडल कभी-कभी "the circle" को संदर्भित करता है जब इसका मतलब स्टार होता है, तो निष्पादक लाइव कैनवास के खिलाफ फजी संदर्भों को हल करता है।

वार्तालाप लॉग को आपके डिवाइस* पर स्थानीय भंडारण में रखा गया है।. इसके बारे में कुछ भी नहीं - जब तक आप स्पष्ट रूप से विफल होने वाले प्रॉम्प्ट को साझा करने का विकल्प चुनते हैं, जो हमें प्रॉम्प्ट और व्याकरण को बेहतर बनाने में मदद करता है।.

जब छोटा मॉडल पर्याप्त नहीं है - escalate

यहाँ ईमानदार हिस्सा है: ** 0.5-2B मॉडल सबसे कमजोर स्तर है।* नियंत्रित डिकोडिंग *वैलिड संरचना * की गारंटी देता है, लेकिन मॉडल को अभी भी सही उपकरण और समझदार मूल्यों को चुनना है, और यह हमेशा नहीं होगा।. एक पेंटागन के लिए पूछो और एक अंडर-निर्दिष्ट मॉडल आपको एक हेक्सागन देता है; "लाल" के लिए दो बार पूछो और यह बजाय एक जनरेटर चला सकता है।.

इसलिए आर्किटेक्चर ऑन-डिवाइस को * पहला * टियर के रूप में व्यवहार करता है, न केवल एक।. कुछ असफल प्रयासों के बाद सहायक ** पूरे बातचीत को क्लाउड मॉडल तक पहुंचाने के लिए प्रदान करता है* - समान, एक ही कैनवास, एक बहुत अधिक सक्षम मॉडल — और आप वास्तव में जहां आप छोड़ दिया जारी है।. कम निष्ठा, मुक्त और निजी, जब आपको इसकी आवश्यकता होती है तो उच्च निष्ठा के लिए एक क्लिक पथ के साथ।.

हमने क्या सीखा है

• ** एक ग्राउंडेड सिस्टम प्रॉम्प्ट मदद करता है; एक व्याकरण / स्कीमा जो अमान्य आउटपुट को असंभव बनाता है, कहीं अधिक मदद करता है।. एकल सबसे बड़ी विश्वसनीयता जंप बाधित डिकोडिंग से आया, न कि एक बेहतर प्रॉम्प्ट से।.
• ** मॉडल आकार अभी भी हावी है।* एक 0.5B से 1.5B मॉडल तक जाने के बाद देखा गया कि कितनी बार सहायक सही उपकरण चुनता है।. वहाँ कोई संकेत नहीं है कि एक स्मार्ट एक में एक छोटे से मॉडल बदल जाता है।.
• ** पूर्ण व्याकरण बहुत बड़ा हो सकता है* हमारे पहले व्याकरण ने * हर संभव * संभव ऑपरेशन को एन्कोड किया - मनमाने ढंग से ड्राइंग कोड के लिए एक सीमा-लंबाई भागो हैच सहित।. यह इतना बड़ा था कि प्रतिबंधित डिकोडिंग ने पृष्ठ को बंद कर दिया।. सामान्य संचालन को कवर करने वाला एक कॉम्पैक्ट व्याकरण सही डिफ़ॉल्ट है; पूरी सतह ऑप्ट-इन है।.
• ** एक मॉडल जो यूआई धागे पर हस्तक्षेप करता है, पृष्ठ को फ्रीज करता है।. WebLLM एक वेब कार्यकर्ता में चलाता है इसलिए संपादक उत्तरदायी रहता है जबकि एक मॉडल लोड और उत्पन्न होता है।.

आगे क्या है

यह प्रयोगात्मक और सुधारात्मक है।. रोडमैप पर:

• *नियंत्रित पथ में विडर टूल कवरेज - PinePaper के संचालन से मुक्त रूप से बचे हुए हैच के बिना व्यक्त किया जा सकता है।.
• बड़े ऑन-डिवाइस मॉडल के रूप में WebGPU मॉडल कैटलॉग बढ़ती है, विश्वसनीयता के लिए व्यापार डाउनलोड आकार।.
• ** एक तंग eval पाश* यह मापने के लिए ऑप्ट-इन विफलता रिपोर्ट का उपयोग करना जो ऑन-डिवाइस मॉडल की यात्रा करने और उनके खिलाफ व्याकरण को सख्त करने के लिए प्रेरित करता है।.
• एक चिकनी ऑन-डिवाइस → क्लाउड हैंडऑफ़, इसलिए अलगाव स्विचिंग टूल के बजाय गुणवत्ता डायल को मोड़ने की तरह महसूस करता है।.

थ्रूलाइन: वही घोषणात्मक उपकरण शब्दावली ब्राउज़र सीमा के दोनों तरफ एक मॉडल ड्राइव करती है।. एक बाहरी एजेंट इन उपकरणों को MCP पर कॉल करता है; एक ऑन-डिवाइस मॉडल स्थानीय रूप से समान आकार कहता है।. जहां भी वे चल रहे हैं वहां एक अनुबंध एजेंट।.

इसे संपादक में आज़माएं - खुला ** AI / कोड → सहायक. यह मुफ्त है, आपके डिवाइस पर चलता है और उसे कोई खाता नहीं है।.*