Wixzel Voice के साथ Flutter ऐप में अपने एजेंट का मैस्कट दिखाएँ

शुरू करने से पहले आपको क्या चाहिए?

• एक Wixzel Voice एजेंट और क्रेडिट वाली API की, जो आपके सर्वर पर रहे। कोई भी एजेंट चलेगा: हर एजेंट के पास मैस्कट होता है, शुरुआत में डिफ़ॉल्ट हरे रंग वाला।
• Flutter 3.27 या नया।
• आपके कंट्रोल वाला एक सर्वर जो API कॉल कर सके। उदाहरण में Node.js और TypeScript SDK है।
• एक रिकॉर्डिंग प्लगइन जो 16-bit PCM स्ट्रीम करे, बेहतर हो कि 8 kHz मोनो पर echo cancellation के साथ, और एक प्लेयर जो raw PCM ले, जैसे record और flutter_pcm_sound।

इसे Wixzel Voice पर स्टेप-बाय-स्टेप कैसे बनाएँ?

1. 01पैकेज जोड़ें

   wixzel_voice_flutter मैस्कट बनाता है; wixzel_voice वह Dart SDK है जिस पर यह बना है:

   pubspec.yamlकॉपी करें

   dependencies:
     wixzel_voice: ^0.8.0
     wixzel_voice_flutter: ^0.1.0
     http: ^1.2.0

   यह पैकेज sensors_plus पर निर्भर है, ताकि मैस्कट की आँखें फ़ोन के झुकाव के साथ घूम सकें, और visibility_detector पर, ताकि वह सिर्फ़ स्क्रीन पर दिखते समय ही एनिमेट हो। यह ऑडियो रिकॉर्ड या प्ले नहीं करता।

2. 02ऐप को एजेंट और सेशन अपने सर्वर से दें

   आपकी API की कभी ऐप में नहीं जाती। आपका सर्वर एजेंट लाता है और एक मिनट का, एक बार इस्तेमाल होने वाला सेशन बनाता है, और ऐप दोनों आपके सर्वर से माँगता है:

   server.mjsकॉपी करें

   import express from 'express';
   import { WixzelVoice } from 'wixzel-voice';
   
   const wixzel = new WixzelVoice({ apiKey: process.env.WIXZEL_API_KEY });
   const app = express();
   const AGENT_ID = process.env.AGENT_ID;
   
   // Put your own sign-in check in front of both routes.
   app.get('/agent', async (req, res) => {
     res.json(await wixzel.agents.retrieve(AGENT_ID));
   });
   
   app.post('/session', async (req, res) => {
     res.json(await wixzel.realtime.createSession({ agent_id: AGENT_ID, max_duration_seconds: 300 }));
   });
   
   app.listen(3000);

   एजेंट के JSON में mascot.spec होता है, वह छोटा spec जिससे मैस्कट बनता है। सेशन बनाने का कोई खर्च नहीं; बिलिंग तब शुरू होती है जब ऐप कनेक्ट होता है।

3. 03मैस्कट दिखाएँ

   Agent.fromJson आपके सर्वर का भेजा डेटा पढ़ता है, और AgentMascotView उसे दिखाता है:

   agent_face.dartकॉपी करें

   import 'dart:convert';
   
   import 'package:flutter/widgets.dart';
   import 'package:http/http.dart' as http;
   import 'package:wixzel_voice/wixzel_voice.dart';
   import 'package:wixzel_voice_flutter/wixzel_voice_flutter.dart';
   
   const backendUrl = 'https://api.example.com';
   
   Future<Agent> loadAgent() async {
     final res = await http.get(Uri.parse('$backendUrl/agent'));
     return Agent.fromJson(jsonDecode(res.body) as Map<String, dynamic>);
   }
   
   Widget agentFace(Agent agent, MascotController controller) =>
       AgentMascotView(agent: agent, controller: controller, size: 220);
   
   // In a list, draw one frame and run no animation:
   Widget agentRow(Agent agent) => AgentMascotView(agent: agent, size: 40, still: true);

   जिस एजेंट का कोई spec नहीं है, उसे डिफ़ॉल्ट रूप मिलता है। लगभग काला या लगभग सफ़ेद मैस्कट अपने ही रंग के एक स्टेज पर दिखता है, ताकि वह गहरी या हल्की स्क्रीन में गायब न हो जाए; इसे stage: false से बंद करें। टैप करने पर एक expression चलता है, और MascotController नाम से मूव चलाता है, जैसे mascot.play('hello')।

4. 04मैस्कट को कॉल से जोड़ें

   Dart SDK के RealtimeConnection से कनेक्ट करें और उसे MascotRealtimeLink को दें। लिंक कॉल कनेक्ट होते समय मैस्कट को सोचता हुआ दिखाता है, hello में हाथ हिलवाता है, यूज़र के बोलते समय सुनता हुआ दिखाता है, और एजेंट के ऑडियो के साथ उसका मुँह हिलाता है:

   talk.dartकॉपी करें

   import 'dart:async';
   import 'dart:convert';
   import 'dart:typed_data';
   
   import 'package:http/http.dart' as http;
   import 'package:wixzel_voice/wixzel_voice.dart';
   import 'package:wixzel_voice_flutter/wixzel_voice_flutter.dart';
   
   /// Your audio plugins, behind a small interface.
   abstract class PcmPlayer {
     void add(Int16List samples); // 16-bit PCM, 8 kHz mono
     void clear();
   }
   
   class MascotCall {
     MascotCall(this.mascot, this.player);
   
     final MascotController mascot;
     final PcmPlayer player;
     RealtimeConnection? _conn;
     MascotRealtimeLink? _link;
     StreamSubscription<Int16List>? _mic;
   
     /// [micFrames] is 16-bit PCM at 8 kHz in 160-sample (20 ms) frames.
     Future<void> start(Stream<Int16List> micFrames) async {
       final res = await http.post(Uri.parse('https://api.example.com/session'));
       final session = RealtimeSession.fromJson(jsonDecode(res.body) as Map<String, dynamic>);
   
       final conn = RealtimeConnection.forSession(session);
       _conn = conn;
       _link = MascotRealtimeLink(mascot, conn);
       conn.events.listen((event) {
         switch (event) {
           case RealtimeAudio(:final mulaw):
             player.add(mulawToPcm16(mulaw)); // the mouth follows this audio through the link
           case RealtimeAudioClear():
             player.clear(); // the user spoke over the agent
           case RealtimeEnded():
             unawaited(end());
           default:
         }
       });
       await conn.ready;
       _mic = micFrames.listen((frame) {
         conn.sendAudio(pcm16ToMulaw(frame));
         _link?.micAudio(frame); // it leans in while the user talks
       });
     }
   
     Future<void> end() async {
       await _mic?.cancel();
       await _link?.dispose(); // leaves the mascot idle; does not end the call
       await _conn?.end();
       _mic = null;
       _link = null;
       _conn = null;
     }
   }

   इसे AgentMascotView(agent: agent, controller: mascot) से दिखाएँ, उसी controller के साथ जिसे कॉल चलाती है। स्क्रीन हटने पर controller को dispose करें।

   अपने रिकॉर्डर में प्लेटफ़ॉर्म का echo cancellation चालू करें, नहीं तो एजेंट स्पीकर से अपनी ही आवाज़ सुनता है और खुद को बीच में टोक देता है।

5. 05अगर आपका प्लेयर ऑडियो शेड्यूल करता है, तो lip-sync बिल्कुल सटीक करें

   डिफ़ॉल्ट रूप से लिंक मानता है कि आपका प्लेयर हर chunk आने के लगभग 120 ms बाद उसे चलाना शुरू करता है। अगर आपके प्लेयर को ठीक-ठीक पता है कि कोई chunk कब चलेगा, तो लिंक को वही बताएँ:

   exact_timing.dartकॉपी करें

   import 'dart:typed_data';
   
   import 'package:wixzel_voice/wixzel_voice.dart';
   import 'package:wixzel_voice_flutter/wixzel_voice_flutter.dart';
   
   MascotRealtimeLink exactLink(MascotController mascot, RealtimeConnection conn) =>
       MascotRealtimeLink(mascot, conn, estimatePlayback: false);
   
   // In your player, each time it schedules a chunk, on the player's own clock:
   void scheduled(MascotRealtimeLink link, Int16List pcm, double playAt, double now) {
     link.agentAudio(pcm, playAt: playAt, currentTime: now, sampleRate: 8000);
   }

Wixzel Voice पर इस बिल्ड की लागत कितनी है?

इस बिल्ड पर Wixzel Voice की कौन-सी सीमाएँ लागू होती हैं?

• पैकेज ऑडियो रिकॉर्ड या प्ले नहीं करता। दोनों आपका ऐप अपनी पसंद के प्लगइन से देता है।
• फ़ोन जैसा ऑडियो: दोनों दिशाओं में 8 kHz पर G.711 µ-law।
• सेशन अकाउंट की एक साथ चलने वाली कॉल की सीमा में गिने जाते हैं, जो डिफ़ॉल्ट रूप से पाँच है।
• Flutter 3.27 या नया। झुकाव के लिए accelerometer चाहिए; उसके बिना मैस्कट खुद ही इधर-उधर देखता है।
• मैस्कट का रूप बदलना आपके सर्वर से होने वाली API कॉल है (agents.updateMascot), ऐप से नहीं, क्योंकि इसके लिए आपकी API की चाहिए।