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

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

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

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

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

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

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

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

इसलिए आर्किटेक्चर ऑन-डिवाइस को * पहला * टियर के रूप में व्यवहार करता है, न केवल एक। कुछ असफल प्रयासों के बाद सहायक ** पूरे बातचीत को खत्म करने के लिए प्रदान करता है Available in: English(Original), Deutsch, Español, Français, 日本語, मानक हिन्दी, русский язык, tiếng Việt, தமிழ், తెలుగు, Português कम निष्ठा, मुक्त और निजी, जब आपको इसकी आवश्यकता होती है तो उच्च निष्ठा के लिए एक क्लिक पथ के साथ।.

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

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

आगे क्या है

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

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

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

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