എംബെഡ് ചെയ്യാവുന്ന വോയ്‌സ് വിജറ്റ്

ThunderPhone എംബെഡ്ഡുചെയ്യാവുന്ന വോയ്‌സ് വിജറ്റ് നിങ്ങളുടെ വെബ്സൈറ്റ് സന്ദർശകർക്ക് ബ്രൗസറിൽ നിന്ന് നേരിട്ട് ഒരു AI ഏജന്റിനോട് സംസാരിക്കാൻ അനുവദിക്കുന്നു. ഫോൺ കോൾ ആവശ്യമില്ല -- ഉപയോക്താക്കൾ ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്ത് ThunderPhone നൽകുന്ന തത്സമയ വോയ്‌സ് സംഭാഷണം ആരംഭിക്കുന്നു.

ഇഷ്ടാനുസൃതമാക്കാവുന്ന ആക്സന്റ് നിറങ്ങളും സ്ഥാനനിർണയവും സഹിതം, ലൈറ്റ്, ഡാർക്ക് തീമുകൾക്ക് അനുയോജ്യമായി മാറുന്ന ഒരു ഗ്ലാസ്മോർഫിക് ബാറായാണ് വിജറ്റ് റെൻഡർ ചെയ്യുന്നത്. ഇത് @thunderphone/widget npm പാക്കേജായി വിതരണം ചെയ്യപ്പെടുന്നു, കൂടാതെ ബണ്ട്ലർ ഇല്ലാത്ത പരിതസ്ഥിതികൾക്കായി CDN വഴിയും ലഭ്യമാണ്.

വിവിധ ആക്സന്റ് നിറങ്ങളോടെയുള്ള ലൈറ്റ്, ഡാർക്ക് തീമുകളിലെ ThunderPhone വിജറ്റ്

മുൻവ്യവസ്ഥകൾ

വിജറ്റ് എംബെഡ് ചെയ്യുന്നതിന് മുമ്പ്, ThunderPhone ഡാഷ്ബോർഡിൽ ഈ മൂന്ന് ഘട്ടങ്ങൾ പൂർത്തിയാക്കുക:

പ്രസിദ്ധീകരിക്കാവുന്ന API കീ സൃഷ്ടിക്കുക
ഡാഷ്ബോർഡ് ക്രമീകരണങ്ങളിലെ ഡെവലപ്പർമാർ എന്നതിലേക്ക് പോയി ഒരു പ്രസിദ്ധീകരിക്കാവുന്ന കീ സൃഷ്ടിക്കുക. പ്രസിദ്ധീകരിക്കാവുന്ന കീകൾ pk_live_ ഉപയോഗിച്ച് ആരംഭിക്കുന്നു; അവ ക്ലയന്റ്-സൈഡ് കോഡിൽ ഉൾപ്പെടുത്താൻ സുരക്ഷിതമാണ്.
അനുവദിച്ച ഡൊമെയ്‌നുകൾ ക്രമീകരിക്കുക
അതേ ഡെവലപ്പർമാർ ക്രമീകരണങ്ങളിൽ, വിജറ്റ് എംബെഡ് ചെയ്യുന്ന ഡൊമെയ്‌നുകൾ ചേർക്കുക. വികസനത്തിനായി localhost എപ്പോഴും അനുവദിച്ചിരിക്കും. വൈൽഡ്കാർഡുകൾ പിന്തുണയ്ക്കുന്നു (ഉദാഹരണത്തിന്, *.example.com).
ഒരു വെബ് വിജറ്റ് സൃഷ്ടിക്കുക
ഡാഷ്ബോർഡിലെ വെബ് വിജറ്റുകൾ എന്നതിലേക്ക് പോയി ഒരു വിജറ്റ് സൃഷ്ടിക്കുക. നിങ്ങൾ ലഭ്യമാക്കാൻ ആഗ്രഹിക്കുന്ന ഏജന്റും ഉപയോഗിക്കേണ്ട പ്രസിദ്ധീകരിക്കാവുന്ന കീയും തിരഞ്ഞെടുക്കുക. നിങ്ങളുടെ പ്രസിദ്ധീകരിക്കാവുന്ന കീ ക്രമീകരണത്തിൽ നിന്ന് ഏജന്റ് സ്വയമേവ നിർണയിക്കപ്പെടും.

പ്രസിദ്ധീകരിക്കാവുന്ന കീകൾ (pk_live_...) നിങ്ങളുടെ രഹസ്യ API ടോക്കണുകൾക്ക് സമാനമല്ല. പ്രസിദ്ധീകരിക്കാവുന്ന കീകൾ ക്ലയന്റ്-സൈഡ് ഉപയോഗത്തിനായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതും നിങ്ങളുടെ അനുവദിച്ച ഡൊമെയ്‌നുകളിലെ വിജറ്റ് സെഷനുകളിലേക്ക് പരിമിതപ്പെടുത്തിയിട്ടുള്ളതുമാണ്. ക്ലയന്റ്-സൈഡ് കോഡിൽ ഒരിക്കലും നിങ്ങളുടെ രഹസ്യ API ടോക്കൺ ഉപയോഗിക്കരുത്.

ദ്രുത ആരംഭം

പാക്കേജ് ഇൻസ്റ്റാൾ ചെയ്യുക:

npm install @thunderphone/widget

നിങ്ങളുടെ ആപ്പിലേക്ക് വിജറ്റ് ചേർക്കുക:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

അത്രയേ ഉള്ളൂ. ഒരൊറ്റ ക്ലിക്കിലൂടെ നിങ്ങളുടെ AI ഏജന്റുമായി അവരെ ബന്ധിപ്പിക്കുന്ന ഗ്ലാസ്മോർഫിക് കോൾ ബാർ നിങ്ങളുടെ ഉപയോക്താക്കൾ കാണും.

ഇഷ്ടാനുസൃതമാക്കൽ

വിജറ്റിന് നാല് രൂപഭാവ പ്രോപ്-കൾ ഉണ്ട്:

പ്രോപ്	ഡിഫോൾട്ട്	വിവരണം
`theme`	`'light'`	വെളുത്ത ഗ്ലാസിന് `'light'`, ഇരുണ്ട ഗ്ലാസിന് `'dark'`
`primaryColor`	`'#000000'` (ലൈറ്റ്) / `'#ffffff'` (ഡാർക്ക്)	ആരംഭ ബട്ടൺ, വേവ്ഫോം, കണക്റ്റിംഗ് സൂചകം എന്നിവയ്ക്കുള്ള ആക്സന്റ് നിറം
`title`	`'Voice assistant'`	വിജറ്റിൽ പ്രദർശിപ്പിക്കുന്ന വാചകം
`position`	`'bottom-right'`	വ്യൂപോർട്ട് കോണുകൾ: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

രൂപഭാവത്തിനുപകരം സെഷൻ ഇഷ്ടാനുസൃതമാക്കാൻ മൂന്ന് പ്രോപ്-കൾ കൂടിയുണ്ട് -- കോൾ ആരംഭിക്കുമ്പോൾ അവയെല്ലാം സെഷൻ അഭ്യർത്ഥനയിലേക്ക് കൈമാറപ്പെടുന്നു:

പ്രോപ്	വിവരണം
`language`	ഓരോ സെഷനിലുമുള്ള ഭാഷാ ഓവർറൈഡ് -- `en`, `es`, അല്ലെങ്കിൽ `fr-FR` പോലുള്ള ഒരു കോഡോ ലൊക്കേലോ
`voice`	ഓരോ സെഷനിലുമുള്ള വോയ്‌സ് ഓവർറൈഡ് -- `maria` പോലുള്ള ഒരു വോയ്‌സ് നാമം
`context`	ഏജന്റിന് കൈമാറുന്ന വസ്തുതാപരമായ പേജ് അല്ലെങ്കിൽ സൈറ്റ് സന്ദർഭം (സെർവർ-സൈഡിൽ 12,000 പ്രതീകങ്ങളായി ചുരുക്കപ്പെടുന്നു)

പൂർണ്ണ പ്രോപ് പട്ടികയ്ക്കായി React കോംപോണന്റ് റഫറൻസ് കാണുക.

പൂർണ്ണമായും ഇഷ്ടാനുസൃതമായ UI-ക്കായി, നിങ്ങളുടെ സ്വന്തം ഇന്റർഫേസ് നിർമിക്കുമ്പോൾ വോയ്‌സ് സെഷൻ നിയന്ത്രിക്കാൻ ഹെഡ്‌ലെസ് hook ഉപയോഗിക്കുക. ഓഡിയോ-പ്രതികരണ ദൃശ്യവത്കരണങ്ങൾ നിർമിക്കുന്നതിനായി hook തത്സമയ ഓഡിയോ നിലകൾ ലഭ്യമാക്കുന്നു.

ഇന്റഗ്രേഷൻ ഓപ്ഷനുകൾ

നിങ്ങളുടെ സ്റ്റാക്കിന് അനുയോജ്യമായ ഇന്റഗ്രേഷൻ രീതി തിരഞ്ഞെടുക്കുക:

React കോംപോണന്റ്

ബിൽറ്റ്-ഇൻ കോൾ നിയന്ത്രണങ്ങളും സ്റ്റാറ്റസ് ഡിസ്പ്ലേയുമുള്ള മുൻകൂട്ടി നിർമിച്ച UI കോംപോണന്റ്. ഇംപോർട്ട് ചെയ്യുക, props നൽകുക, പൂർത്തിയായി.

ഹെഡ്‌ലെസ് ഹുക്ക്

UI-യിൽ പൂർണ നിയന്ത്രണം. നിങ്ങൾ സ്വന്തം ഇന്റർഫേസ് നിർമ്മിക്കുമ്പോൾ useThunderPhone ഹുക്ക് വോയ്‌സ് സെഷൻ നിയന്ത്രിക്കുന്നു.

CDN / സ്ക്രിപ്റ്റ് ടാഗ്

ബണ്ട്ലർ ആവശ്യമില്ല. സ്റ്റാറ്റിക് സൈറ്റുകൾ, WordPress, മറ്റ് React ഇതര പരിതസ്ഥിതികൾ എന്നിവയ്ക്കായി സ്ക്രിപ്റ്റ് ടാഗ് വഴി വിഡ്ജറ്റ് ലോഡ് ചെയ്യുക.

സ്റ്റൈലിംഗ്

theme prop നിയന്ത്രിക്കുന്ന ബിൽറ്റ്-ഇൻ ലൈറ്റ്, ഡാർക്ക് തീമുകളും primaryColor prop നിയന്ത്രിക്കുന്ന ആക്സെന്റ് നിറവും വിഡ്ജറ്റിൽ ഉൾപ്പെടുന്നു. കൂടുതൽ ആഴത്തിലുള്ള കസ്റ്റമൈസേഷനായി, CSS കസ്റ്റം പ്രോപ്പർട്ടികളും ക്ലാസുകളും ഓവർറൈഡ് ചെയ്യാം. വിശദാംശങ്ങൾക്ക് സ്റ്റൈലിംഗ് ഗൈഡ് കാണുക.