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

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

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

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

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

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

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

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

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

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

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

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

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

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

export async function requestWebGpuDevice() {
  if (!('gpu' in navigator)) {
    return null;
  }

  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: 'high-performance',
  });

  if (!adapter) {
    return null;
  }

  return adapter.requestDevice();
}

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

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

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

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

• λιγότερες κλήσεις διακομιστή για απλές εργασίες.
• δεδομένα που ενδέχεται να παραμείνουν στη συσκευή·
• χαμηλότερη καθυστέρηση?
• εμπειρίες εκτός σύνδεσης ή ημι-εκτός σύνδεσης.
• Πιο φυσικό UX για γραφή και μετάφραση.

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

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

export async function getLocalSummarizerCapability(): Promise<LocalCapability> {
  const SummarizerApi = (globalThis as any).Summarizer;

  if (!SummarizerApi?.availability) {
    return 'unsupported';
  }

  const availability = await SummarizerApi.availability();

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

  return 'unsupported';
}

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

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

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

interface AiRequest {
  task: 'summarize' | 'rewrite' | 'classify';
  input: string;
}

interface AiResult {
  output: string;
  runtime: 'local' | 'cloud';
}

export async function runAiTask(request: AiRequest): Promise<AiResult> {
  const local = await tryLocalAi(request);

  if (local) {
    return { output: local, runtime: 'local' };
  }

  const cloud = await fetch('/api/ai', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(request),
  }).then((res) => res.json());

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

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

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

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

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

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

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

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

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

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

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

• XSS;
• τυχαία κούτσουρα?
• δεδομένα που αποθηκεύονται στην αποθήκευση·
• έγκαιρη έγχυση από μη αξιόπιστο περιεχόμενο.
• δικαιώματα που χορηγούνται στο μοντέλο·
• εξόδους που χρησιμοποιούνται σε αυτόματες ενέργειες.

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

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

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

• σύνθετοι τρισδιάστατοι επεξεργαστές.
• Gaussian splatting στο πρόγραμμα περιήγησης.
• φίλτρα βίντεο σε πραγματικό χρόνο.
• Ελαφρύ CAD;
• επιστημονικές απεικονίσεις?
• δημιουργικά εργαλεία με άμεση προεπισκόπηση.
• συμπέρασμα όρασης κοντά στη διεπαφή χρήστη.
• πιο φιλόδοξα παιχνίδια προγράμματος περιήγησης.

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

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

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

1. Στοχεύστε προγράμματα περιήγησης και συσκευές.
2. Εναλλακτικό σύννεφο ή κομψή υποβάθμιση.
3. Χρόνος λήψης και προσωρινή μνήμη μοντέλου.
4. Μνήμη και μπαταρία κατά μέσο όρο υλικού.
5. Ποιότητα σε σύγκριση με την έκδοση cloud.
6. Πολιτική απορρήτου και μηνύματα χρήστη.
7. Δοκιμές με εχθρικές εισροές.
8. Ξεχωριστές μετρήσεις για τοπικό και χρόνο εκτέλεσης στο cloud.
9. Σχεδιάστε να ενημερώσετε ή να απενεργοποιήσετε το πρότυπο.

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

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

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

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

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

• WebGPU API - MDN
• Προδιαγραφή WebGPU - W3C
• Ενσωματωμένο AI - Chrome για προγραμματιστές
• Ενσωματωμένα API AI - Chrome για προγραμματιστές
• WebNN API