WebGPU και AI στη συσκευή: Το πρόγραμμα περιήγησης γίνεται σοβαρός χρόνος εκτέλεσης

spinny:~/writing $ less webgpu-on-device-ai-browser.md

1 
2Για χρόνια το πρόγραμμα περιήγησης ήταν το ωραίο πρόσωπο της εφαρμογής και το cloud ήταν το μέρος όπου συνέβαιναν τα δύσκολα πράγματα. Ο χρήστης γράφει, κάνει κλικ, ανεβάζει ένα αρχείο. το frontend στέλνει τα πάντα στον διακομιστή. ο διακομιστής καλεί ένα μοντέλο. η απάντηση επιστρέφει.
3 
4Αυτό το σχήμα παραμένει πολύ χρήσιμο, αλλά δεν είναι δωρεάν. Κάθε κλήση φέρνει λανθάνουσα κατάσταση, κόστος, εξάρτηση από το δίκτυο και ερωτήσεις απορρήτου. Εάν ο χρήστης γράφει μια πρόταση και θέλει μια πρόταση, ζυγίζει μισό δευτερόλεπτο. Εάν ταξινομείτε χιλιάδες μικρές εισροές, οι πένες γίνονται πραγματικά χρήματα. Εάν το κείμενο είναι ευαίσθητο, η αποστολή του από τη συσκευή δεν είναι ουδέτερη επιλογή.
5 
6Αυτός είναι ο λόγος για τον οποίο το WebGPU και η τεχνητή νοημοσύνη στη συσκευή είναι σε διαφημιστική εκστρατεία. Όχι επειδή αύριο θα τρέξουμε κάθε μοντέλο στο πρόγραμμα περιήγησης. Επειδή ορισμένες από τις έξυπνες λειτουργίες μπορούν να έρθουν πιο κοντά στον χρήστη.
7 
8## Δεν χρειάζεται να γίνουν όλα τοπικά
9 
10Η παιδική εκδοχή του επιχειρήματος είναι: "σύννεφο έναντι συσκευής". Η χρήσιμη έκδοση είναι υβριδική.
11 
12Ορισμένες εργασίες φαίνονται υπέροχες στη συσκευή: σύντομες περιλήψεις, ανίχνευση γλώσσας, επαναγραφές φωτός, απλές ταξινομήσεις, φίλτρα εικόνας, μοντέλα μικρής όρασης, δημιουργικές εμπειρίες με άμεση ανατροφοδότηση.
13 
14Άλλες εργασίες παραμένουν καλύτερες στο cloud: πολύπλοκη συλλογιστική, μοντέλα συνόρων, δεδομένα διακομιστή, κεντρικός έλεγχος, ομοιόμορφη ποιότητα, ροή εργασιών όπου πρέπει να ελέγχετε προσεκτικά κάθε βήμα.
15 
16Η υγιής αρχιτεκτονική αποφασίζει κατά την εκτέλεση:
17 
18```mermaid
19flowchart TD
20    User[Χρήστης] --> Browser[Προγράμματα περιήγησης]
21    Browser --> Detect[Ανίχνευση χαρακτηριστικών]
22    Detect -->|Υποστηρίζεται| Local[Τοπικό συμπέρασμα]
23    Detect -->|Δεν υποστηρίζεται| Cloud[Εναλλακτικό σύννεφο]
24    Local --> UX[Γρήγορη ανταπόκριση]
25    Cloud --> UX
26    UX --> Metrics[Μετρήσεις και ποιότητα]
27```
28 
29Το πρόγραμμα περιήγησης δεν χρειάζεται να κερδίζει ενάντια στο σύννεφο. Πρέπει να σώσει το cloud από την εκτέλεση εργασιών που δεν χρειάζεται να γίνουν εκεί.
30 
31## Γιατί έχει σημασία το WebGPU
32 
33Το WebGPU είναι ένα σύγχρονο API για τη χρήση της GPU από το πρόγραμμα περιήγησης. Δεν είναι μόνο για ωραιότερα 3D γραφικά. Είναι επίσης σημαντικό γιατί εκθέτει πρωτόγονα κατάλληλα για υπολογιστές: παράλληλους φόρτους εργασίας, shaders, αγωγούς πιο κοντά σε αυτό που κάνουν καλά οι GPU.
34 
35Για την τεχνητή νοημοσύνη, την επιστημονική οπτικοποίηση, τους τρισδιάστατους επεξεργαστές, τα φίλτρα βίντεο και τα δημιουργικά εργαλεία, αυτή η διαφορά είναι αισθητή. Το WebGL έχει κάνει πολλά για τον Ιστό, αλλά το WebGPU γεννήθηκε με ένα μοντέλο που ταιριάζει καλύτερα στο παρόν.
36 
37Το πρώτο πράγμα που πρέπει να γράψετε, ωστόσο, δεν είναι shader. Είναι μια νηφάλια ανίχνευση χαρακτηριστικών:
38 
39```typescript
40export async function requestWebGpuDevice() {
41  if (!('gpu' in navigator)) {
42    return null;
43  }
44 
45  const adapter = await navigator.gpu.requestAdapter({
46    powerPreference: 'high-performance',
47  });
48 
49  if (!adapter) {
50    return null;
51  }
52 
53  return adapter.requestDevice();
54}
55```
56 
57Αυτή η δυνατότητα λέει ένα σημαντικό πράγμα: το WebGPU δεν είναι δικαίωμα που παρέχεται σε κάθε συσκευή. Είναι μια ικανότητα προς επαλήθευση. Ορισμένα προγράμματα περιήγησης δεν το υποστηρίζουν πλήρως, ορισμένες GPU έχουν περιορισμούς, ορισμένα εταιρικά περιβάλλοντα απενεργοποιούν τις λειτουργίες, ορισμένοι χρήστες χρησιμοποιούν μέτριο υλικό.
58 
59## Ενσωματωμένο AI: όταν το πρόγραμμα περιήγησης φέρνει το μοντέλο
60 
61Το Chrome προωθεί ενσωματωμένα API για εργασίες όπως τοπικά μηνύματα προτροπής, σύνοψη, γραφή, επανεγγραφή, μετάφραση, ανίχνευση γλώσσας και διόρθωση. Η ιδέα είναι πολύ ενδιαφέρουσα: το πρόγραμμα περιήγησης διαχειρίζεται το μοντέλο, τη διαθεσιμότητα και τις ενημερώσεις. η εφαρμογή χρησιμοποιεί ένα API πιο κοντά στην πλατφόρμα.
62 
63Εάν λειτουργεί καλά, αλλάζει πολύ:
64 
65- λιγότερες κλήσεις διακομιστή για απλές εργασίες.
66- δεδομένα που ενδέχεται να παραμείνουν στη συσκευή·
67- χαμηλότερη καθυστέρηση?
68- εμπειρίες εκτός σύνδεσης ή ημι-εκτός σύνδεσης.
69- Πιο φυσικό UX για γραφή και μετάφραση.
70 
71Αλλά θα πρέπει να αντιμετωπίζεται ως προοδευτική ενίσχυση. Ορισμένα API είναι σταθερά, άλλα σε δοκιμαστική έκδοση ή προεπισκόπηση, άλλα εξακολουθούν να εξαρτώνται από την έκδοση, τη γλώσσα και τη συσκευή.
72 
73```typescript
74type LocalCapability = 'available' | 'downloadable' | 'unsupported';
75 
76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {
77  const SummarizerApi = (globalThis as any).Summarizer;
78 
79  if (!SummarizerApi?.availability) {
80    return 'unsupported';
81  }
82 
83  const availability = await SummarizerApi.availability();
84 
85  if (availability === 'available') return 'available';
86  if (availability === 'downloadable') return 'downloadable';
87 
88  return 'unsupported';
89}
90```
91 
92Ο συγκεκριμένος κωδικός θα αλλάξει, αλλά το μοτίβο παραμένει: ελέγχετε τη διαθεσιμότητα, εξηγείτε τυχόν λήψεις, προσφέρετε εναλλακτικές λύσεις και μετράτε την ποιότητα.
93 
94## Η επιστροφή δεν είναι ένα θλιβερό σχέδιο Β
95 
96Το cloudback δεν είναι ήττα. Είναι μέρος του προϊόντος.
97 
98```typescript
99interface AiRequest {
100  task: 'summarize' | 'rewrite' | 'classify';
101  input: string;
102}
103 
104interface AiResult {
105  output: string;
106  runtime: 'local' | 'cloud';
107}
108 
109export async function runAiTask(request: AiRequest): Promise<AiResult> {
110  const local = await tryLocalAi(request);
111 
112  if (local) {
113    return { output: local, runtime: 'local' };
114  }
115 
116  const cloud = await fetch('/api/ai', {
117    method: 'POST',
118    headers: { 'Content-Type': 'application/json' },
119    body: JSON.stringify(request),
120  }).then((res) => res.json());
121 
122  return { output: cloud.output, runtime: 'cloud' };
123}
124```
125 
126Αυτή η αρχιτεκτονική σάς επιτρέπει να βελτιώνεστε σταδιακά. Εκείνοι με τοπική υποστήριξη έχουν καλύτερο λανθάνοντα χρόνο και απόρρητο. Όσοι δεν το έχουν εξακολουθούν να χρησιμοποιούν τη δυνατότητα. Μπορείτε να μετρήσετε το ποσοστό των τοπικών αιτημάτων, τους χρόνους, τα σφάλματα, τη μνήμη, την αντιληπτή ποιότητα και το κόστος.
127 
128Χωρίς μετρήσεις, η τεχνητή νοημοσύνη στη συσκευή γίνεται αισθητική επιλογή. Με τις μετρήσεις, γίνεται μοχλός προϊόντος.
129 
130## Το UX του μοντέλου έχει σημασία
131 
132Εάν το πρόγραμμα περιήγησης χρειάζεται να κατεβάσει ένα μοντέλο, ο χρήστης το αντιλαμβάνεται. Μην το κρύβετε πίσω από ένα ασαφές κλώστη. Καλύτερα να είμαστε σαφείς: "Ετοιμάζουμε το μοντέλο να χρησιμοποιήσει αυτή τη λειτουργία πιο γρήγορα και ακόμη και εκτός σύνδεσης."
133 
134Μια καλή εμπειρία:
135 
136- δείχνει την κατάσταση προετοιμασίας.
137- δεν μπλοκάρει ολόκληρη τη σελίδα.
138- σας επιτρέπει να συνεχίσετε με το cloud backback.
139- Αποφύγετε εκπλήξεις μπαταρίας και μνήμης.
140- θυμηθείτε το μοντέλο όποτε είναι δυνατόν.
141- εξηγήστε το όφελος με μια συγκεκριμένη πρόταση.
142 
143Το χειρότερο πράγμα είναι μια "έξυπνη" λειτουργία που εμφανίζεται σπασμένη επειδή κατεβάζει κάτι σιωπηλά.
144 
145## Απόρρητο: καλύτερο, όχι αυτόματα ασφαλές
146 
147Η επεξεργασία δεδομένων στη συσκευή μπορεί να είναι ένα μεγάλο πλεονέκτημα. Ένα πρόχειρο email, εσωτερικό έγγραφο ή προσωπική σημείωση δεν χρειάζεται να φύγει από το πρόγραμμα περιήγησής σας για να λάβει μια πρόταση.
148 
149Ωστόσο, το τοπικό δεν σημαίνει αυτόματα ασφαλές. Ωστόσο, πρέπει να σκεφτείτε:
150 
151- XSS;
152- τυχαία κούτσουρα?
153- δεδομένα που αποθηκεύονται στην αποθήκευση·
154- έγκαιρη έγχυση από μη αξιόπιστο περιεχόμενο.
155- δικαιώματα που χορηγούνται στο μοντέλο·
156- εξόδους που χρησιμοποιούνται σε αυτόματες ενέργειες.
157 
158Εάν ένα τοπικό μοντέλο μπορεί να διαβάσει μια ιστοσελίδα και στη συνέχεια να συμπληρώσει μια φόρμα, αυτή η σελίδα μπορεί να προσπαθήσει να τη χειριστεί. Εάν μπορεί να καλέσει το εργαλείο, απαιτείται επιβεβαίωση. Εάν παράγει δομημένη έξοδο, πρέπει να επικυρωθεί. Το γεγονός ότι εκτελείται στη συσκευή μειώνει ορισμένους κινδύνους απορρήτου, αλλά δεν εξαλείφει το μοντέλο ασφαλείας.
159 
160## Εκεί που αποκτά πραγματικά ενδιαφέρον
161 
162Το κείμενο είναι μόνο η αρχή. Το WebGPU κάνει αξιόπιστες τις εμπειρίες ιστού που μέχρι πρόσφατα έμοιαζαν με εγγενή εφαρμογή:
163 
164- σύνθετοι τρισδιάστατοι επεξεργαστές.
165- Gaussian splatting στο πρόγραμμα περιήγησης.
166- φίλτρα βίντεο σε πραγματικό χρόνο.
167- Ελαφρύ CAD;
168- επιστημονικές απεικονίσεις?
169- δημιουργικά εργαλεία με άμεση προεπισκόπηση.
170- συμπέρασμα όρασης κοντά στη διεπαφή χρήστη.
171- πιο φιλόδοξα παιχνίδια προγράμματος περιήγησης.
172 
173Εδώ το frontend, τα γραφικά και η μηχανική εκμάθηση αρχίζουν να συνδυάζονται. Είναι μια κάπως άβολη περιοχή, αλλά και γόνιμη: το πρόγραμμα περιήγησης επιστρέφει ως μια σοβαρή πλατφόρμα εφαρμογών, όχι μόνο το μέρος όπου τοποθετούμε φόρμες και πίνακες εργαλείων.
174 
175## Λίστα ελέγχου πριν από την παραγωγή
176 
177Προτού βάλω μια δυνατότητα στη συσκευή μπροστά στους χρήστες, θα έλεγξα:
178 
1791. Στοχεύστε προγράμματα περιήγησης και συσκευές.
1802. Εναλλακτικό σύννεφο ή κομψή υποβάθμιση.
1813. Χρόνος λήψης και προσωρινή μνήμη μοντέλου.
1824. Μνήμη και μπαταρία κατά μέσο όρο υλικού.
1835. Ποιότητα σε σύγκριση με την έκδοση cloud.
1846. Πολιτική απορρήτου και μηνύματα χρήστη.
1857. Δοκιμές με εχθρικές εισροές.
1868. Ξεχωριστές μετρήσεις για τοπικό και χρόνο εκτέλεσης στο cloud.
1879. Σχεδιάστε να ενημερώσετε ή να απενεργοποιήσετε το πρότυπο.
188 
189Είναι μια συγκεκριμένη λίστα γιατί το πρόβλημα είναι συγκεκριμένο. Μια αργή, εύθραυστη ή αδιαφανής λειτουργία AI δεν βελτιώνεται μόνο και μόνο επειδή εκτελείται στο πρόγραμμα περιήγησης.
190 
191## Ο σωστός συμβιβασμός
192 
193Δεν πιστεύω ότι το μέλλον είναι «όλα στη συσκευή». Και δεν νομίζω ότι το σύννεφο θα παραμείνει το μόνο εύλογο μέρος για συμπεράσματα. Το πιο πιθανό μέλλον είναι ένα μείγμα: τοπικό όταν βελτιώνει τον λανθάνοντα χρόνο, το απόρρητο ή το κόστος. cloud όταν απαιτούνται ποιότητα, ενημερωμένα δεδομένα και κεντρικός έλεγχος.
194 
195Τα WebGPU, WebNN και τα ενσωματωμένα API AI δεν καθιστούν το πρόγραμμα περιήγησης παντοδύναμο. Τον κάνουν πιο ενήλικο. Και για όσους κατασκευάζουν προϊόντα Ιστού, αυτά είναι τεράστια νέα.
196 
197## Χρήσιμες πηγές
198 
199- [WebGPU API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [Προδιαγραφή WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [Ενσωματωμένο AI - Chrome για προγραμματιστές](https://developer.chrome.com/docs/ai/built-in)
202- [Ενσωματωμένα API AI - Chrome για προγραμματιστές](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API](https://webnn.io/)
204

:WebGPU και AI στη συσκευή: Το πρόγραμμα περιήγησης γίνεται σοβαρός χρόνος εκτέλεσηςlines 1-204 (END) — press q to close

2Για χρόνια το πρόγραμμα περιήγησης ήταν το ωραίο πρόσωπο της εφαρμογής και το cloud ήταν το μέρος όπου συνέβαιναν τα δύσκολα πράγματα. Ο χρήστης γράφει, κάνει κλικ, ανεβάζει ένα αρχείο. το frontend στέλνει τα πάντα στον διακομιστή. ο διακομιστής καλεί ένα μοντέλο. η απάντηση επιστρέφει.

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

6Αυτός είναι ο λόγος για τον οποίο το WebGPU και η τεχνητή νοημοσύνη στη συσκευή είναι σε διαφημιστική εκστρατεία. Όχι επειδή αύριο θα τρέξουμε κάθε μοντέλο στο πρόγραμμα περιήγησης. Επειδή ορισμένες από τις έξυπνες λειτουργίες μπορούν να έρθουν πιο κοντά στον χρήστη.

8## Δεν χρειάζεται να γίνουν όλα τοπικά

10Η παιδική εκδοχή του επιχειρήματος είναι: "σύννεφο έναντι συσκευής". Η χρήσιμη έκδοση είναι υβριδική.

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

14Άλλες εργασίες παραμένουν καλύτερες στο cloud: πολύπλοκη συλλογιστική, μοντέλα συνόρων, δεδομένα διακομιστή, κεντρικός έλεγχος, ομοιόμορφη ποιότητα, ροή εργασιών όπου πρέπει να ελέγχετε προσεκτικά κάθε βήμα.

16Η υγιής αρχιτεκτονική αποφασίζει κατά την εκτέλεση:

18```mermaid

19flowchart TD

20 User[Χρήστης] --> Browser[Προγράμματα περιήγησης]

21 Browser --> Detect[Ανίχνευση χαρακτηριστικών]

22 Detect -->|Υποστηρίζεται| Local[Τοπικό συμπέρασμα]

23 Detect -->|Δεν υποστηρίζεται| Cloud[Εναλλακτικό σύννεφο]

24 Local --> UX[Γρήγορη ανταπόκριση]

25 Cloud --> UX

26 UX --> Metrics[Μετρήσεις και ποιότητα]

27```

29Το πρόγραμμα περιήγησης δεν χρειάζεται να κερδίζει ενάντια στο σύννεφο. Πρέπει να σώσει το cloud από την εκτέλεση εργασιών που δεν χρειάζεται να γίνουν εκεί.

31## Γιατί έχει σημασία το WebGPU

33Το WebGPU είναι ένα σύγχρονο API για τη χρήση της GPU από το πρόγραμμα περιήγησης. Δεν είναι μόνο για ωραιότερα 3D γραφικά. Είναι επίσης σημαντικό γιατί εκθέτει πρωτόγονα κατάλληλα για υπολογιστές: παράλληλους φόρτους εργασίας, shaders, αγωγούς πιο κοντά σε αυτό που κάνουν καλά οι GPU.

35Για την τεχνητή νοημοσύνη, την επιστημονική οπτικοποίηση, τους τρισδιάστατους επεξεργαστές, τα φίλτρα βίντεο και τα δημιουργικά εργαλεία, αυτή η διαφορά είναι αισθητή. Το WebGL έχει κάνει πολλά για τον Ιστό, αλλά το WebGPU γεννήθηκε με ένα μοντέλο που ταιριάζει καλύτερα στο παρόν.

37Το πρώτο πράγμα που πρέπει να γράψετε, ωστόσο, δεν είναι shader. Είναι μια νηφάλια ανίχνευση χαρακτηριστικών:

39```typescript

40export async function requestWebGpuDevice() {

41 if (!('gpu' in navigator)) {

42 return null;

43 }

45 const adapter = await navigator.gpu.requestAdapter({

46 powerPreference: 'high-performance',

47 });

49 if (!adapter) {

50 return null;

51 }

53 return adapter.requestDevice();

54}

55```

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

59## Ενσωματωμένο AI: όταν το πρόγραμμα περιήγησης φέρνει το μοντέλο

61Το Chrome προωθεί ενσωματωμένα API για εργασίες όπως τοπικά μηνύματα προτροπής, σύνοψη, γραφή, επανεγγραφή, μετάφραση, ανίχνευση γλώσσας και διόρθωση. Η ιδέα είναι πολύ ενδιαφέρουσα: το πρόγραμμα περιήγησης διαχειρίζεται το μοντέλο, τη διαθεσιμότητα και τις ενημερώσεις. η εφαρμογή χρησιμοποιεί ένα API πιο κοντά στην πλατφόρμα.

63Εάν λειτουργεί καλά, αλλάζει πολύ:

65- λιγότερες κλήσεις διακομιστή για απλές εργασίες.

66- δεδομένα που ενδέχεται να παραμείνουν στη συσκευή·

67- χαμηλότερη καθυστέρηση?

68- εμπειρίες εκτός σύνδεσης ή ημι-εκτός σύνδεσης.

69- Πιο φυσικό UX για γραφή και μετάφραση.

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

73```typescript

74type LocalCapability = 'available' | 'downloadable' | 'unsupported';

76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {

77 const SummarizerApi = (globalThis as any).Summarizer;

79 if (!SummarizerApi?.availability) {

80 return 'unsupported';

81 }

83 const availability = await SummarizerApi.availability();

85 if (availability === 'available') return 'available';

86 if (availability === 'downloadable') return 'downloadable';

88 return 'unsupported';

89}

90```

92Ο συγκεκριμένος κωδικός θα αλλάξει, αλλά το μοτίβο παραμένει: ελέγχετε τη διαθεσιμότητα, εξηγείτε τυχόν λήψεις, προσφέρετε εναλλακτικές λύσεις και μετράτε την ποιότητα.

94## Η επιστροφή δεν είναι ένα θλιβερό σχέδιο Β

96Το cloudback δεν είναι ήττα. Είναι μέρος του προϊόντος.

98```typescript

99interface AiRequest {

100 task: 'summarize' | 'rewrite' | 'classify';

101 input: string;

102}

103

104interface AiResult {

105 output: string;

106 runtime: 'local' | 'cloud';

107}

108

109export async function runAiTask(request: AiRequest): Promise<AiResult> {

110 const local = await tryLocalAi(request);

111

112 if (local) {

113 return { output: local, runtime: 'local' };

114 }

115

116 const cloud = await fetch('/api/ai', {

117 method: 'POST',

118 headers: { 'Content-Type': 'application/json' },

119 body: JSON.stringify(request),

120 }).then((res) => res.json());

121

122 return { output: cloud.output, runtime: 'cloud' };

123}

124```

125

126Αυτή η αρχιτεκτονική σάς επιτρέπει να βελτιώνεστε σταδιακά. Εκείνοι με τοπική υποστήριξη έχουν καλύτερο λανθάνοντα χρόνο και απόρρητο. Όσοι δεν το έχουν εξακολουθούν να χρησιμοποιούν τη δυνατότητα. Μπορείτε να μετρήσετε το ποσοστό των τοπικών αιτημάτων, τους χρόνους, τα σφάλματα, τη μνήμη, την αντιληπτή ποιότητα και το κόστος.

127

128Χωρίς μετρήσεις, η τεχνητή νοημοσύνη στη συσκευή γίνεται αισθητική επιλογή. Με τις μετρήσεις, γίνεται μοχλός προϊόντος.

129

130## Το UX του μοντέλου έχει σημασία

131

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

133

134Μια καλή εμπειρία:

135

136- δείχνει την κατάσταση προετοιμασίας.

137- δεν μπλοκάρει ολόκληρη τη σελίδα.

138- σας επιτρέπει να συνεχίσετε με το cloud backback.

139- Αποφύγετε εκπλήξεις μπαταρίας και μνήμης.

140- θυμηθείτε το μοντέλο όποτε είναι δυνατόν.

141- εξηγήστε το όφελος με μια συγκεκριμένη πρόταση.

142

143Το χειρότερο πράγμα είναι μια "έξυπνη" λειτουργία που εμφανίζεται σπασμένη επειδή κατεβάζει κάτι σιωπηλά.

144

145## Απόρρητο: καλύτερο, όχι αυτόματα ασφαλές

146

147Η επεξεργασία δεδομένων στη συσκευή μπορεί να είναι ένα μεγάλο πλεονέκτημα. Ένα πρόχειρο email, εσωτερικό έγγραφο ή προσωπική σημείωση δεν χρειάζεται να φύγει από το πρόγραμμα περιήγησής σας για να λάβει μια πρόταση.

148

149Ωστόσο, το τοπικό δεν σημαίνει αυτόματα ασφαλές. Ωστόσο, πρέπει να σκεφτείτε:

150

151- XSS;

152- τυχαία κούτσουρα?

153- δεδομένα που αποθηκεύονται στην αποθήκευση·

154- έγκαιρη έγχυση από μη αξιόπιστο περιεχόμενο.

155- δικαιώματα που χορηγούνται στο μοντέλο·

156- εξόδους που χρησιμοποιούνται σε αυτόματες ενέργειες.

157

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

159

160## Εκεί που αποκτά πραγματικά ενδιαφέρον

161

162Το κείμενο είναι μόνο η αρχή. Το WebGPU κάνει αξιόπιστες τις εμπειρίες ιστού που μέχρι πρόσφατα έμοιαζαν με εγγενή εφαρμογή:

163

164- σύνθετοι τρισδιάστατοι επεξεργαστές.

165- Gaussian splatting στο πρόγραμμα περιήγησης.

166- φίλτρα βίντεο σε πραγματικό χρόνο.

167- Ελαφρύ CAD;

168- επιστημονικές απεικονίσεις?

169- δημιουργικά εργαλεία με άμεση προεπισκόπηση.

170- συμπέρασμα όρασης κοντά στη διεπαφή χρήστη.

171- πιο φιλόδοξα παιχνίδια προγράμματος περιήγησης.

172

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

174

175## Λίστα ελέγχου πριν από την παραγωγή

176

177Προτού βάλω μια δυνατότητα στη συσκευή μπροστά στους χρήστες, θα έλεγξα:

178

1791. Στοχεύστε προγράμματα περιήγησης και συσκευές.

1802. Εναλλακτικό σύννεφο ή κομψή υποβάθμιση.

1813. Χρόνος λήψης και προσωρινή μνήμη μοντέλου.

1824. Μνήμη και μπαταρία κατά μέσο όρο υλικού.

1835. Ποιότητα σε σύγκριση με την έκδοση cloud.

1846. Πολιτική απορρήτου και μηνύματα χρήστη.

1857. Δοκιμές με εχθρικές εισροές.

1868. Ξεχωριστές μετρήσεις για τοπικό και χρόνο εκτέλεσης στο cloud.

1879. Σχεδιάστε να ενημερώσετε ή να απενεργοποιήσετε το πρότυπο.

188

189Είναι μια συγκεκριμένη λίστα γιατί το πρόβλημα είναι συγκεκριμένο. Μια αργή, εύθραυστη ή αδιαφανής λειτουργία AI δεν βελτιώνεται μόνο και μόνο επειδή εκτελείται στο πρόγραμμα περιήγησης.

190

191## Ο σωστός συμβιβασμός

192

193Δεν πιστεύω ότι το μέλλον είναι «όλα στη συσκευή». Και δεν νομίζω ότι το σύννεφο θα παραμείνει το μόνο εύλογο μέρος για συμπεράσματα. Το πιο πιθανό μέλλον είναι ένα μείγμα: τοπικό όταν βελτιώνει τον λανθάνοντα χρόνο, το απόρρητο ή το κόστος. cloud όταν απαιτούνται ποιότητα, ενημερωμένα δεδομένα και κεντρικός έλεγχος.

194

195Τα WebGPU, WebNN και τα ενσωματωμένα API AI δεν καθιστούν το πρόγραμμα περιήγησης παντοδύναμο. Τον κάνουν πιο ενήλικο. Και για όσους κατασκευάζουν προϊόντα Ιστού, αυτά είναι τεράστια νέα.

196

197## Χρήσιμες πηγές

198

199- [WebGPU API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)

200- [Προδιαγραφή WebGPU - W3C](https://www.w3.org/TR/webgpu/)

201- [Ενσωματωμένο AI - Chrome για προγραμματιστές](https://developer.chrome.com/docs/ai/built-in)

202- [Ενσωματωμένα API AI - Chrome για προγραμματιστές](https://developer.chrome.com/docs/ai/built-in-apis)

203- [WebNN API](https://webnn.io/)

204