· 7 min read

Βοηθός Σχεδίου που Τρέχει στη Συσκευή σας — Χωρίς λογαριασμό, χωρίς εξυπηρετητή

Ο βοηθός του PinePaper on-device AI μετατρέπει μια άμεση σε μια πραγματική σκηνή χρησιμοποιώντας ένα μοντέλο γλώσσας που τρέχει εξ ολοκλήρου στον browser σας. Εδώ είναι η αρχιτεκτονική περιορισμένες κλήσεις εργαλείων, δύο πάροχοι, και μια ειλικρινή αφήγηση του τι μπορεί και τι δεν μπορεί να κάνει ένα μικροσκοπικό μοντέλο.

Η υπόθεση

Τα περισσότερα εργαλεία σχεδιασμού AI στέλνουν την προτροπή σας σε ένα διακομιστή, εκτελέστε ένα μεγάλο μοντέλο, και στείλτε κωδικό πίσω. Αυτό χρειάζεται ένα λογαριασμό, ένα δίκτυο μετ'επιστροφής, και εμπιστοσύνη ότι η εργασία σας σε εξέλιξη διαμετακομίζει τις υποδομές κάποιου άλλου.

Θέλαμε να μάθουμε πόσο μακριά φτάνει το άλλο άκρο: ένας βοηθός σχεδιασμού όπου το μοντέλο τρέχει στο δικό σας μηχάνημα. Χωρίς λογαριασμό. Δεν έχει αποστολή. Η ειδοποίηση δεν φεύγει ποτέ από το πρόγραμμα περιήγησης. Αυτό είναι τώρα ζωντανά στον επεξεργαστή του PinePaper ως ένα πειραματικό AI / Code → Assistant καρτέλα, και αυτή η ανάρτηση είναι μια έντιμη αφήγηση του πώς λειτουργεί και όπου υπολείπεται.

Γιατί δεν ρωτάς το μοντέλο για κωδικό?

Η προφανής προσέγγιση είναι να ζητήσετε από το μοντέλο on-device να γράψει JavaScript κατά του PinePaper API και να το εκτελέσετε. Το δοκιμάσαμε. Αποτυγχάνει άσχημα.

Μικρά μοντέλα — αυτά που χωράνε σε φορητό υπολογιστή - δεν έχουν γνώση του API μιας συγκεκριμένης εφαρμογής. Ρωτήστε ένα μοντέλο 0.5–2B για να καλέσετε PinePaper.create() και αυτοσχεδιάζει: ένα κλειδί που η μέθοδος δεν διαβάζει (ένα SVG-style 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 εκθέτει σε εξωτερικούς παράγοντες - αλλά εκπέμπεται από ένα μοντέλο που τρέχει τοπικά, και εκτελείται στον καμβά μέσω ενός μικρού αποστολέα.

Αδύνατη η μη έγκυρη έξοδος

Η κίνηση κλειδί είναι περιορισμένη αποκωδικοποίηση. Αντί να ελπίζουμε ότι το μοντέλο παράγει ένα έγκυρο σχήμα, συγκρατούμε * τι σημεία επιτρέπεται ακόμη και να εκπέμπουν:*

  • Στο ενσωματωμένο Chrome Prompt API (Gemini Nano), περνάμε ένα JSON Schema ως περιορισμό απόκρισης. Το μοντέλο μπορεί να παράγει μόνο αντικείμενα που επιτρέπει το σχήμα - με additionalProperties: false, κάθε επιχείρημα που το σχήμα δεν ορίζει είναι κυριολεκτικά μη αντιπροσωπευτικό.
  • Σε WebLLM (ένα ανοιχτό μοντέλο που εκτελείται σε WebGPU), επισυνάπτουμε μια EBNF γραμματική μέσω XGrammar. Η γραμματική υπαγορεύει τη δομή· το μοντέλο συμπληρώνει μόνο τις τιμές.

Και οι δύο παράγουν το ίδιο σχήμα κλήσης εργαλείων. Ένα μικρό πέρασμα επισκευής στη συνέχεια διασώζει τις σχεδόν λείπει ένα μικροσκοπικό μοντέλο εξακολουθεί να κάνει - μια πτώση name, επιχειρήματα χωρίς περιτύλιγμα τους - συμπεραίνοντας το εργαλείο από το σχήμα επιχείρημα. Το αποτέλεσμα είναι ότι "συρετε ένα πράσινο πεντάγωνο" γίνεται μια πραγματική κλήση create_item αντί για ένα λάθος.

Εναλλαγή μεταξύ των τριών παρακάτω. Οι δύο περιοριστικές επιλογές φαίνονται πανομοιότυπες σκοπός: αυτός είναι ο ισχυρισμός. Αυτό που αλλάζει μεταξύ τους είναι ο μηχανισμός, όχι το αποτέλεσμα.

Interactive demo — open in editor pp:PinePaper

Δύο πάροχοι, μία σύμβαση

Η συσκευή AI δεν είναι ένα πράγμα εξαρτάται από τον περιηγητή:

  • Περιήγηση AI — Το Chrome είναι ενσωματωμένο Gemini Nano (window.LanguageModel). Τα πρότυπα πλοία με το πρόγραμμα περιήγησης? Δεν υπάρχει τίποτα για να κατεβάσετε από εμάς. Αυτή είναι η πιο αξιόπιστη διαδρομή on-device σήμερα, επειδή ο περιορισμός JSON-σχήμα είναι φθηνός και καλά υποστηριζόμενος.
  • PinePaper AIWebLLM εκτέλεση μοντέλου Qwen2.5 σε οποιοδήποτε πρόγραμμα περιήγησης WebGPU. Κατεβάζει ένα μοντέλο μια φορά (καλυμμένο στη συνέχεια), στη συνέχεια τρέχει offline.
  • Γλώσσες οι μη-αγγλικές ατάκες μεταφράζονται πρώτα στα αγγλικά on-device (μέσω του ενσωματωμένου μεταφραστή του προγράμματος περιήγησης), επειδή τα μικρά μοντέλα με κώδικα είναι αγγλοκεντρικά. Η σκηνή που δημιουργείται είναι η ίδια ανεξάρτητα από την άμεση γλώσσα.

Ο χρήστης επιλέγει τον κινητήρα· τα πάντα κατάντη — τον περιορισμό, τον εκτελεστή, τον καμβά — είναι πανομοιότυπο.

Επεξεργασία, όχι μόνο δημιουργία

Μια γεννήτρια μιας βολής δεν είναι βοηθός. Για την υποστήριξη "κάντε το αστέρι κόκκινο," το μοντέλο πρέπει να ξέρει τι είναι ήδη στον καμβά. Έτσι, κάθε στροφή το τροφοδοτούμε ένα συμπαγές στιγμιότυπο των τρεχόντων αντικειμένων - τις ταυτότητες, τους τύπους και τα χρώματά τους — ακριβώς όπως θα έκανε μια συνομιλία με τους σέρβερ. "Κάνε το αστέρι κόκκινο" κατόπιν αποφασίζει σε μια πραγματική κλήση modify_item ενάντια στην ταυτότητα του αντικειμένου. (Και επειδή ένα μικρό μοντέλο αναφέρεται μερικές φορές στο "the circle" όταν σημαίνει το αστέρι, ο εκτελεστής επιλύει χνουδωτές αναφορές ενάντια στον ζωντανό καμβά.)

Το αρχείο καταγραφής συνομιλίας φυλάσσεται στη συσκευή σας στην τοπική αποθήκευση. Τίποτα σχετικά με αυτό δεν αποστέλλεται πουθενά - εκτός κι αν επιλέξεις ρητά να μοιραστείς αποτυχημένες εντολές, κάτι που μας βοηθάει να βελτιώσουμε τις εντολές και τη γραμματική.

Όταν το μικρό μοντέλο δεν είναι αρκετό - κλιμακώνεται

Εδώ είναι το έντιμο μέρος: a 0.5–2B μοντέλο είναι η πιο αδύναμη βαθμίδα. Περιορισμένη αποκωδικοποίηση εγγυήσεις ισχύουσα δομή, αλλά το μοντέλο εξακολουθεί να πρέπει να επιλέξετε το σωστό εργαλείο και λογικές τιμές, και δεν θα είναι πάντα. Ζητήστε ένα πεντάγωνο και ένα υποκαθορισμένο μοντέλο σας δίνει ένα εξάγωνο? Ζητήστε δύο φορές για "κόκκινο" και θα μπορούσε να τρέξει μια γεννήτρια αντί.

Έτσι, η αρχιτεκτονική αντιμετωπίζει on-device ως την * πρώτη* βαθμίδα, όχι η μόνη. Μετά από μερικές αποτυχημένες προσπάθειες ο βοηθός προσφέρει να χέρι όλη τη συζήτηση μέχρι το μοντέλο Cloud - ίδια πρόθεση, ίδιος καμβάς, ένα πολύ πιο ικανό μοντέλο - και συνεχίζεις ακριβώς εκεί που σταμάτησες. Χαμηλή πίστη, ελεύθερη και ιδιωτική, με ένα κλικ διαδρομή προς την υψηλή πίστη όταν το χρειάζεστε.

Τι έχουμε μάθει

  • Οι περιορισμοί νικούν την υποκίνηση Μια γειωμένη προτροπή συστήματος βοηθά; μια γραμματική / σχήμα που καθιστά την άκυρη έξοδο αδύνατη βοηθά πολύ περισσότερο. Το μεγαλύτερο άλμα αξιοπιστίας προήλθε από τον περιορισμό της αποκωδικοποίησης, όχι από μια καλύτερη προτροπή.
  • Το μέγεθος του μοντέλου εξακολουθεί να κυριαρχεί. Πηγαίνοντας από ένα μοντέλο 0.5B σε 1,5B βελτιώθηκε αισθητά πόσο συχνά ο βοηθός επιλέγει το σωστό εργαλείο. Δεν υπάρχει κίνητρο που να μετατρέπει ένα μικρό μοντέλο σε έξυπνο.
  • Η πλήρης γραμματική μπορεί να είναι πολύ μεγάλη. Η πρώτη μας γραμματική κωδικοποιήθηκε * κάθε * πιθανή λειτουργία - συμπεριλαμβανομένης μιας καταπακτής διαφυγής περιορισμένου μήκους για αυθαίρετο κώδικα σχεδίασης. Ήταν τόσο μεγάλο που η αποκωδικοποίηση σταμάτησε τη σελίδα. Μια συμπαγής γραμματική που καλύπτει τις κοινές λειτουργίες είναι η σωστή προεπιλογή· η πλήρης επιφάνεια είναι opt-in.
  • Βγάλτο από το κύριο νήμα. Ένα μοντέλο που κάνει συμπέρανα στο νήμα UI παγώνει τη σελίδα. WebLLM τρέχει σε ένα Web Worker έτσι ώστε ο επεξεργαστής να εξακολουθεί να ανταποκρίνεται ενώ ένα μοντέλο φορτώνει και παράγει.

Τι ακολουθεί

Είναι πειραματικό και βελτιώνεται. Στο χάρτη πορείας:

  • Κάλυψη του εργαλείου από τα εργαλεία στην περιορισμένη διαδρομή — περισσότερες από τις λειτουργίες του PinePaper είναι ευδιάκριτες χωρίς την καταπακτή διαφυγής freeform.
  • Larger on-device μοντέλα όπως WebGPU καταλόγους μοντέλων αναπτύσσονται, το μέγεθος των συναλλαγών λήψης για την αξιοπιστία.
  • Ένας πιο σφιχτός βρόχος eval - χρησιμοποιώντας τις αναφορές αποτυχίας που έχουν επιλεγεί για να μετρήσουν το οποίο παρακινεί τα μοντέλα on-device και σκληρύνει τη γραμματική εναντίον τους.
  • Μια ομαλότερη on-device → Αποκόλληση Cloud, έτσι η κλιμάκωση αισθάνεται σαν να ανεβάζει την ποιότητα κλήσης και όχι να αλλάζει εργαλεία.

Η διοχέτευση: το ίδιο δηλωτικό λεξιλόγιο εργαλείων οδηγεί ένα μοντέλο εκατέρωθεν του ορίου του προγράμματος περιήγησης. Ένας εξωτερικός παράγοντας καλεί αυτά τα εργαλεία πάνω από MCP; ένα μοντέλο on-device καλεί τα ίδια σχήματα τοπικά. Ένα συμβόλαιο, πράκτορες όπου κι αν τρέχουν.

Δοκιμάστε το στον επεξεργαστή - ανοιχτό AI / Κωδικός → Βοηθός. Είναι δωρεάν, λειτουργεί στη συσκευή σας, και δεν χρειάζεται λογαριασμό.

Ready to create?

Start making animated GIFs, videos, and graphics — free, no signup.

Open PinePaper Editor