Data publikacji: 28 kwietnia 2025 r., ostatnia aktualizacja: 21 maja 2025 r.
Szybki rozwój AI otwiera nowe możliwości dla aplikacji internetowych, zwłaszcza w przypadku funkcji działających na urządzeniu. Dowiedz się, jak CyberAgent, wiodąca japońska firma internetowa, korzysta z wbudowanej AI w Chrome i interfejsu Prompt API, aby ulepszyć blogowanie na swojej platformie Ameba Blog.
Opowiadamy o ich celach, korzyściach wynikających z korzystania z wbudowanej AI, napotkanych wyzwaniach i cennych spostrzeżeniach dla innych deweloperów korzystających z wbudowanej AI.
Czym jest interfejs Prompt API?
| Wyjaśnienie | Sieć | Rozszerzenia | Stan Chrome | Intencja |
|---|---|---|---|---|
| GitHub | Wyświetl | Zamiar przeprowadzenia eksperymentu |
Prompt API pomaga deweloperom korzystać z dużych modeli językowych, aby dodawać funkcje AI bezpośrednio do swoich aplikacji. Dzięki zdefiniowaniu niestandardowych promptów aplikacje mogą wykonywać zadania takie jak wyodrębnianie danych, generowanie treści i udzielanie spersonalizowanych odpowiedzi. W Chrome interfejs Prompt API przeprowadza wnioskowanie po stronie klienta za pomocą Gemini Nano. To przetwarzanie lokalne, niezależnie od używanego modelu, zwiększa prywatność danych i szybkość odpowiedzi. Niezależnie od użytego modelu szybkość reakcji klienta.
Pomoc AI dla autorów bloga Ameba
Firma CyberAgent dostrzegła powszechny problem autorów: czasochłonny proces tworzenia atrakcyjnych treści, zwłaszcza tytułów. Postawili hipotezę, że zintegrowanie funkcji opartych na AI w interfejsie tworzenia bloga może znacznie poprawić jakość i wydajność tworzenia treści. Ich celem było udostępnienie narzędzi, które będą inspirować i pomagać blogerom tworzyć angażujące treści.
CyberAgent opracował rozszerzenie do Chrome z interfejsem Prompt API. To rozszerzenie oferuje pakiet funkcji opartych na AI, które pomagają autorom bloga Ameba w generowaniu tytułów i nagłówków, kolejnych akapitów oraz ogólnych ulepszeń tekstu.
Firma CyberAgent potrzebowała elastyczności funkcji, dlatego zdecydowała się na interfejs Prompt API. Dzięki nieograniczonym możliwościom jednego interfejsu API firma CyberAgent mogła dokładnie określić, co będzie najlepsze i najbardziej przydatne dla autorów Ameby.
Firma CyberAgent przetestowała rozszerzenie na wybranej grupie blogerów, co pozwoliło jej uzyskać cenne informacje na temat praktyczności oferowanych funkcji. Opinie pomogły firmie CyberAgent znaleźć lepsze zastosowania dla pomocy AI i ulepszyć projekt rozszerzenia. Na podstawie pozytywnych wyników i opinii firma CyberAgent planuje w przyszłości udostępnić tę funkcję, aby zapewnić społeczności blogerów dostęp do sztucznej inteligencji po stronie klienta.
Przyjrzyjmy się bliżej tym funkcjom.
Tworzenie lepszych tytułów i nagłówków
Rozszerzenie generuje kilka sugestii tytułów na podstawie pełnej treści bloga. Autorzy blogów mogą dodatkowo dopracowywać te sugestie, korzystając z opcji takich jak „Wygeneruj ponownie”, „Bardziej uprzejmy”, „Bardziej swobodny” czy „Wygeneruj podobne tytuły”.
Firma CyberAgent zaprojektowała interfejs użytkownika w taki sposób, aby użytkownicy nie musieli pisać żadnych promptów. Dzięki temu użytkownicy, którzy nie znają inżynierii promptów, mogą również korzystać z możliwości AI.
Rozszerzenie może też generować atrakcyjne nagłówki poszczególnych sekcji bloga. Autorzy mogą o to poprosić, wybierając odpowiedni tekst na nagłówek.
Kod do generowania tytułu za pomocą interfejsu Prompt API zawiera prompt początkowy i prompt użytkownika. Prompt początkowy zawiera kontekst i instrukcje, które pozwalają uzyskać określony typ wyniku, natomiast prompty użytkownika proszą model o reagowanie na to, co pisze użytkownik. Więcej informacji o ich kodzie znajdziesz w artykule Wdrażanie pomocy AI.
Generowanie kolejnych akapitów
Rozszerzenie pomaga blogerom pokonać blokadę pisarską, generując kolejne akapity na podstawie wybranego tekstu. Na podstawie kontekstu z poprzedniego akapitu AI tworzy jego kontynuację, dzięki czemu autorzy mogą zachować ciągłość procesu twórczego.
Ulepszanie i edytowanie tekstu
Gemini Nano analizuje zaznaczony tekst i może zaproponować ulepszenia. Użytkownicy mogą ponownie wygenerować ulepszenia, dodając dodatkowe uwagi dotyczące tonu i wyboru języka, aby tekst był „bardziej uroczy” lub „prostszy”.
Wdrażanie pomocy AI
Firma CyberAgent podzieliła kod rozszerzenia na 3 etapy: tworzenie sesji, wywoływanie i wyświetlanie modelu.
Najpierw sprawdzają, czy wbudowana AI jest dostępna i obsługiwana w przeglądarce. Jeśli tak, tworzy sesję z parametrami domyślnymi.
if (!LanguageModel) {
// Detect the feature and display "Not Supported" message as needed
return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;
async function createAISession({ initialPrompts, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await LanguageModel.availability();
// "readily", "after-download", or "no"
if (available === "no") {
return Promise.reject(new Error('AI not available'));
}
const params = {
monitor(monitor) {
monitor.addEventListener('downloadprogress', event => {
console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
});
},
initialPrompts: initialPrompts || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await LanguageModel.create(params);
return session;
}
Każda funkcja ma funkcję pomocniczą wywoływaną przez użytkownika. Po wywołaniu, gdy użytkownik kliknie odpowiedni przycisk, sesja zostanie odpowiednio zaktualizowana.
async function updateSession({ initialPrompts, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
initialPrompts,
topK,
temperature,
});
}
Po zaktualizowaniu sesji model jest proszony o wykonanie działania zgodnie z funkcją. Oto na przykład kod, który generuje tytuł i ponownie generuje tytuł w bardziej formalnym tonie.
async function generateTitle() {
// Initialize the model session
await updateSession({
initialPrompts: [
{ role: 'system',
content: `Create 3 titles suitable for the blog post's content,
within 128 characters, and respond in JSON array format.`,
}
]
});
const prompt = `Create a title for the following
blog post.${textareaEl.textContent}`;
const result = await session.prompt(prompt);
try {
const fixedJson = fixJSON(result);
// display result
displayResult(fixedJSON);
} catch (error) {
// display error
displayError();
}
}
async function generateMoreFormalTitle() {
// Do not execute updateSession to reuse the session during regeneration
const prompt = 'Create a more formal title.';
const result = await session.prompt(prompt);
...
}
Korzyści wynikające z wbudowanej AI
Wbudowana AI to rodzaj AI po stronie klienta, co oznacza, że wnioskowanie odbywa się na urządzeniu użytkownika. Firma CyberAgent zdecydowała się na korzystanie z wbudowanych interfejsów AI API z Gemini Nano ze względu na korzyści, jakie to rozwiązanie zapewnia zarówno deweloperom aplikacji, jak i użytkownikom.
Najważniejsze korzyści, na których skupiła się firma CyberAgent, to:
- Bezpieczeństwo i prywatność
- Koszt
- Elastyczność i niezawodność
- Łatwość tworzenia
Bezpieczeństwo i prywatność
Możliwość uruchamiania modeli AI bezpośrednio na urządzeniu użytkownika bez przesyłania danych na serwery zewnętrzne jest najważniejsza. Wersje robocze blogów nie są przeznaczone do wyświetlania publicznego, dlatego firma CyberAgent nie chce wysyłać ich na serwer zewnętrzny.
Wbudowana AI pobiera Gemini Nano na urządzenia użytkowników, eliminując konieczność wysyłania i odbierania danych z serwerów. Jest to szczególnie przydatne podczas pisania, ponieważ wersje robocze mogą zawierać informacje poufne lub niezamierzone wyrażenia. Wbudowana AI przechowuje oryginalne i wygenerowane treści lokalnie, zamiast wysyłać je na serwer, co może zwiększyć bezpieczeństwo i chronić prywatność treści.
Oszczędności
Główną zaletą korzystania z wbudowanej AI jest to, że przeglądarka zawiera Gemini Nano, a interfejsy API są bezpłatne. Nie ma żadnych dodatkowych ani ukrytych kosztów.
Wbudowana AI znacznie obniża koszty serwera i może całkowicie wyeliminować koszty związane z wnioskowaniem AI. To rozwiązanie można szybko dostosować do dużej bazy użytkowników. Umożliwia ono przesyłanie kolejnych promptów w celu ulepszania wyników bez ponoszenia dodatkowych opłat.
Elastyczność i niezawodność
Wbudowana AI zapewnia stały i krótki czas reakcji niezależnie od warunków sieciowych. Umożliwia to użytkownikom wielokrotne generowanie treści, co znacznie ułatwia wypróbowywanie nowych pomysłów i szybkie tworzenie satysfakcjonujących wyników.
Łatwość tworzenia
Wbudowana w Chrome technologia AI upraszcza proces programowania, udostępniając gotowy interfejs API. Deweloperzy korzystają z łatwości tworzenia funkcji opartych na AI w swoich aplikacjach.
Gemini Nano i wbudowane interfejsy API AI są zainstalowane w Chrome, więc nie musisz wprowadzać dodatkowych ustawień ani zarządzać modelami. Interfejsy API korzystają z JavaScriptu, podobnie jak inne interfejsy API przeglądarki, i nie wymagają wiedzy z zakresu uczenia maszynowego.
Pokonywanie wyzwań w celu uzyskania lepszych wyników
Współpraca firmy CyberAgent z interfejsem Prompt API dostarczyła cennych informacji o nietypowych aspektach pracy z modelami LLM po stronie klienta.
- Niespójne odpowiedzi: podobnie jak inne duże modele językowe, Gemini Nano nie gwarantuje identycznych wyników w przypadku tego samego prompta. CyberAgent napotkał odpowiedzi w nieoczekiwanych formatach (np. Markdown i nieprawidłowy JSON). Nawet przy zastosowaniu instrukcji wyniki mogą się znacznie różnić. W przypadku wdrażania aplikacji lub rozszerzenia do Chrome z wbudowaną AI warto dodać obejście, aby mieć pewność, że dane wyjściowe będą zawsze w prawidłowym formacie.
- Limit tokenów: zarządzanie wykorzystaniem tokenów jest bardzo ważne. CyberAgent używał właściwości i metod takich jak
inputUsage,inputQuotaimeasureInputUsage(), aby zarządzać sesjami, zachowywać kontekst i zmniejszać zużycie tokenów. Było to szczególnie ważne podczas dopracowywania tytułów. - Ograniczenia rozmiaru modelu: model jest pobierany i przechowywany na urządzeniu użytkownika, więc jest znacznie mniejszy niż model oparty na serwerze. Oznacza to, że aby uzyskać zadowalające wyniki, zwłaszcza w przypadku podsumowywania, w prompcie należy podać wystarczający kontekst. Dowiedz się więcej o rozmiarach dużych modeli językowych.
CyberAgent podkreśla, że chociaż modele po stronie klienta nie są jeszcze powszechnie dostępne we wszystkich przeglądarkach i na wszystkich urządzeniach, a mniejsze modele mają pewne ograniczenia, to w przypadku konkretnych zadań mogą one zapewniać imponującą wydajność. Możliwość szybkiego wprowadzania zmian i eksperymentowania bezpłatnie po stronie serwera sprawia, że jest to cenne narzędzie.
Zalecają znalezienie równowagi i uznanie, że uzyskanie idealnych odpowiedzi jest trudne w przypadku każdej AI, niezależnie od tego, czy działa po stronie serwera, czy po stronie klienta. Na koniec przewidują przyszłość, w której podejście hybrydowe łączące zalety AI po stronie serwera i po stronie klienta otworzy jeszcze większe możliwości.
Perspektywy
Badania firmy CyberAgent nad wbudowaną AI pokazują ekscytujące możliwości płynnej integracji AI w celu zwiększenia komfortu użytkowników. Ich rozszerzenie stworzone do współpracy z blogiem Ameba pokazuje, jak można praktycznie wykorzystać te technologie do rozwiązywania rzeczywistych problemów, i oferuje cenne lekcje dla szerszej społeczności programistów internetowych.
W miarę rozwoju technologii i rozszerzania obsługi przeglądarek i urządzeń spodziewamy się jeszcze bardziej innowacyjnych zastosowań wbudowanej AI i innych form AI po stronie klienta.
Zasoby
- Więcej informacji o interfejsie Prompt API
- Rozpoczynanie korzystania z wbudowanych interfejsów API w Chrome
- Studium przypadku CyberAgent dotyczące AI w internecie, które obejmuje ten sam temat.
- Obejrzyj Przyszłość AI jest już tu, czyli studia przypadków firmy CyberAgent dotyczące AI po stronie klienta
Podziękowania
Dziękujemy blogerom z Ameby: ao, Nodoka, Erin, Chiaki i socchi, którzy przekazali nam swoje opinie i pomogli ulepszyć to rozszerzenie. Dziękujemy Thomasowi Steinerowi, Alexandrze Klepper i Sebastianowi Benzowi za pomoc w napisaniu i sprawdzeniu tego posta na blogu.