feat(providers): add Prompt API Provider

packages/i18n/src/locales/en/settings.yaml

@@ -948,6 +948,9 @@ pages:
                     The base url used to connect to remote service. Often looks
                     like http://localhost:11434/v1 or https://example.com/v1.
                   placeholder: Base url...
+                download-model:
+                  label: Download Model
+                  description: Download Chromium Prompt API model
                 headers:
                   label: Custom HTTP Headers
                   description: Add custom HTTP headers
@@ -980,6 +983,9 @@ pages:
               title: List Models
             check-supports-chat-completion:
               title: Chat Completion
+          prompt-api:
+            check-availability:
+              title: Availability
           status:
             validating: Validating...
             valid: Passed
@@ -1450,6 +1456,9 @@ pages:
       browser-web-speech-api:
         description: Browser-native STT (requires Chrome/Edge/Safari)
         title: Web Speech API
+      prompt-api:
+        description: With the Prompt API, you can send natural language requests to the foundation model in Chrome.
+        title: Prompt API
       official:
         title: Official Provider
         description: Official AI provider by AIRI.

packages/stage-pages/package.json

@@ -53,6 +53,7 @@
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",
     "vue-sonner": "catalog:",
+    "xsai-chromium-prompt": "catalog:",
     "xsschema": "catalog:",
     "zod": "catalog:"
   },

packages/stage-pages/src/pages/settings/providers/chat/prompt-api.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import {
+  ProviderBasicSettings,
+  ProviderDownloadModel,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+  ProviderValidationAlerts,
+} from '@proj-airi/stage-ui/components'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
+import { checkPromptAvailability, downloadModel } from 'xsai-chromium-prompt'
+
+const providerId = 'prompt-api'
+// Define computed properties for credentials
+
+// Use the composable to get validation logic and state
+const {
+  t,
+  router,
+  providerMetadata,
+  isValidating,
+  isValid,
+  validationMessage,
+  handleResetSettings,
+  forceValid,
+  hasManualValidators,
+  isManualTesting,
+  manualTestPassed,
+  manualTestMessage,
+  runManualTest,
+} = useProviderValidation(providerId)
+
+async function checkAvailability() {
+  return await checkPromptAvailability()
+}
+
+async function download(onProgress: (progress: number) => void) {
+  return await downloadModel(onProgress)
+}
+
+function setVaild() {
+  isValid.value = true
+}
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName"
+    :provider-icon-color="providerMetadata?.iconColor"
+    :on-back="() => router.back()"
+  >
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        :title="t('settings.pages.providers.common.section.basic.title')"
+        :description="t('settings.pages.providers.common.section.basic.description')"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderDownloadModel
+          :label="t('settings.pages.providers.catalog.edit.config.common.fields.field.download-model.label')"
+          :description="t('settings.pages.providers.catalog.edit.config.common.fields.field.download-model.label')"
+          :check-availability="checkAvailability"
+          :download="download"
+          :set-vaild="setVaild"
+        />
+      </ProviderBasicSettings>
+      <ProviderValidationAlerts
+        :is-valid="isValid"
+        :is-validating="isValidating"
+        :validation-message="validationMessage"
+        :has-manual-validators="hasManualValidators"
+        :is-manual-testing="isManualTesting"
+        :manual-test-passed="manualTestPassed"
+        :manual-test-message="manualTestMessage"
+        :on-run-test="runManualTest"
+        :on-force-valid="forceValid"
+        :on-go-to-model-selection="() => router.push('/settings/modules/consciousness')"
+      />
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+</route>

packages/stage-ui/package.json

@@ -165,6 +165,7 @@
     "web-haptics": "catalog:",
     "xast-util-to-xml": "catalog:",
     "xastscript": "catalog:",
+    "xsai-chromium-prompt": "catalog:",
     "xsschema": "catalog:",
     "zod": "catalog:"
   },

packages/stage-ui/src/components/scenarios/providers/index.ts

@@ -3,6 +3,7 @@ export { default as ProviderAdvancedSettings } from './provider-advanced-setting
 export { default as ProviderApiKeyInput } from './provider-api-key-input.vue'
 export { default as ProviderBaseUrlInput } from './provider-base-url-input.vue'
 export { default as ProviderBasicSettings } from './provider-basic-settings.vue'
+export { default as ProviderDownloadModel } from './provider-download-model.vue'
 export { default as ProviderSettingsContainer } from './provider-settings-container.vue'
 export { default as ProviderSettingsLayout } from './provider-settings-layout.vue'
 export { default as ProviderValidationAlerts } from './provider-validation-alerts.vue'

packages/stage-ui/src/components/scenarios/providers/provider-download-model.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { Availability } from 'xsai-chromium-prompt'
+
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  checkAvailability: () => Promise<Availability>
+  download: (onProgress: (progress: number) => void) => Promise<Availability>
+  setVaild: () => void
+}>()
+
+const availability = ref('unavailable')
+const progress = ref(0)
+
+onMounted(async () => {
+  const availabilityNow = await props.checkAvailability()
+  availability.value = availabilityNow
+  if (availabilityNow === 'available') {
+    progress.value = 1
+    props.setVaild()
+  }
+})
+
+async function download() {
+  const resultAvailability = await props.download(p => progress.value = p)
+  availability.value = resultAvailability
+}
+</script>
+
+<template>
+  <div class="max-w-full">
+    <label class="flex flex-col gap-4">
+      <div>
+        <div class="flex items-center gap-1 text-sm font-medium">
+          <slot name="label">
+            {{ props.label }}
+          </slot>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-wrap>
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </div>
+      </div>
+    </label>
+    <div w-full flex flex-row gap-2>
+      <div w-full>
+        <div
+          class="flex items-center justify-between whitespace-nowrap rounded-lg bg-violet-100 px-3 py-2 text-sm dark:bg-violet-900"
+          :style="{ width: `${(progress * 100)}%` }"
+        >
+          <span>{{ availability }}</span>
+          <span>({{ (progress * 100).toFixed(2) }}%)</span>
+        </div>
+      </div>
+      <button rounded-lg bg="blue-100 dark:blue-900" px-4 py-2 @click="download">
+        Download
+      </button>
+    </div>
+  </div>
+</template>

packages/stage-ui/src/libs/providers/providers/index.ts

@@ -47,6 +47,7 @@ import './mimo-audio'
 import './cloudflare-workers-ai'
 import './azure-ai-foundry'
 import './official'
+import './prompt-api'
 import './speech-noop'
 import './unspeech'
 

packages/stage-ui/src/libs/providers/providers/prompt-api/index.ts

@@ -0,0 +1,83 @@
+import { errorMessageFrom } from '@moeru/std'
+import { checkPromptAvailability, createChatProvider } from 'xsai-chromium-prompt'
+import { z } from 'zod'
+
+import { defineProvider } from '../registry'
+
+const openAICompatibleConfigSchema = z.object({
+  apiKey: z
+    .string('API Key')
+    .optional(),
+  baseUrl: z
+    .string('Base URL')
+    .optional()
+    .default('http://localhost:5173/settings/providers/chat/prompt-api'),
+})
+
+type OpenAICompatibleConfig = z.input<typeof openAICompatibleConfigSchema>
+
+export const providerPromptAPICompatible = defineProvider<OpenAICompatibleConfig>({
+  id: 'prompt-api',
+  name: 'Prompt API',
+  nameLocalize: ({ t }) => t('settings.pages.providers.provider.prompt-api.title'),
+  description: 'With the Prompt API, you can send natural language requests to the foundation model in Chrome.',
+  descriptionLocalize: ({ t }) => t('settings.pages.providers.provider.prompt-api.description'),
+  tasks: ['chat'],
+  icon: 'i-simple-icons:googlechrome',
+  iconColor: 'i-logos:chrome',
+
+  createProviderConfig: () => openAICompatibleConfigSchema,
+  createProvider() {
+    return createChatProvider()
+  },
+
+  validationRequiredWhen(config) {
+    return !!config.apiKey?.trim()
+  },
+  validators: {
+    validateConfig: [
+      ({ t }) => ({
+        id: 'prompt-api:check-availability',
+        name: t('settings.pages.providers.catalog.edit.validators.prompt-api.check-availability.title'),
+        schedule: {
+          mode: 'interval',
+          intervalMs: 15_000,
+        },
+        validator: async () => {
+          const errors: Array<{ error: unknown }> = []
+          let reason = ''
+          try {
+            const availability = await checkPromptAvailability()
+            switch (availability) {
+              case 'available':
+                break
+              case 'downloadable':
+                reason = 'The model is downloadable'
+                errors.push({ error: new Error(reason) })
+                break
+              case 'downloading':
+                reason = 'The model is downloading'
+                errors.push({ error: new Error(reason) })
+                break
+              case 'unavailable':
+                reason = 'The Prompt API is unavailable'
+                errors.push({ error: new Error(reason) })
+                break
+            }
+          }
+          catch (e) {
+            const errorMessage = errorMessageFrom(e) || 'Unknown error.'
+            const reason = `Connectivity check failed: ${errorMessage}`
+            errors.push({ error: new Error(reason) })
+          }
+          return {
+            errors,
+            reason: errors.length > 0 ? errors.map(item => (item.error as Error).message).join(', ') : '',
+            reasonKey: '',
+            valid: errors.length === 0,
+          }
+        },
+      }),
+    ],
+  },
+})