.webp&w=3840&q=95)
Impact
Introducing the ElevenLabs Impact Program × Professors
A global initiative supporting educators using voice AI in teaching and research.
.webp&w=3840&q=95)
मूर्ति की फोटो लें। उसमें दिख रहे किरदारों की पहचान करें। फिर उनके साथ रियल-टाइम वॉइस में बातचीत करें – हर किरदार अपनी अलग, उस दौर के हिसाब से आवाज़ में बोलेगा।
यही सब आप ElevenLabs के वॉइस डिज़ाइन और एजेंट API से बना सकते हैं। इस पोस्ट में हम एक मोबाइल वेब ऐप की आर्किटेक्चर बताते हैं, जो कंप्यूटर विज़न और वॉइस जनरेशन को जोड़कर सार्वजनिक स्मारकों को इंटरैक्टिव अनुभव में बदलता है। नीचे दिए गए API और कोड सैंपल्स से आप यह सब खुद भी बना सकते हैं।
ट्यूटोरियल छोड़ें – एक ही प्रॉम्प्ट में बनाएं
नीचे दिया गया पूरा ऐप सिर्फ एक प्रॉम्प्ट से बना है, जिसेकर्सर में Claude Opus 4.5 (high) के साथ एक खाली NextJS प्रोजेक्ट में टेस्ट किया गया। अगर आप सीधे बनाना चाहते हैं, तो इसे अपने एडिटर में पेस्ट करें:
| 1 | We need to make an app that: |
| 2 | - is optimised for mobile |
| 3 | - allows the user to take a picture (of a statue, picture, monument, etc) that includes one or more people |
| 4 | - uses an OpenAI LLM api call to identify the statue/monument/picture, characters within it, the location, and name |
| 5 | - allows the user to check it's correct, and then do either a deep research or a standard search to get information about the characters and the statue's history, and it's current location |
| 6 | - then create an ElevenLabs agent (allowing multiple voices), that the user can then talk to as though they're talking to the characters in the statue. Each character should use voice designer api to create a matching voice. |
| 7 | The purpose is to be fun and educational. |
| 8 | |
| 9 | https://elevenlabs.io/docs/eleven-api/guides/cookbooks/voices/voice-design |
| 10 | https://elevenlabs.io/docs/eleven-agents/quickstart |
| 11 | https://elevenlabs.io/docs/api-reference/agents/create |
आपElevenLabs एजेंट स्किल्स का भी इस्तेमाल कर सकते हैं, डॉक्युमेंटेशन लिंक करने की बजाय। ये डॉक्युमेंटेशन पर आधारित हैं और इससे और भी अच्छे नतीजे मिल सकते हैं।
बाकी पोस्ट में हम बताते हैं कि यह प्रॉम्प्ट क्या-क्या बनाता है।
यह कैसे काम करता है
इस पाइपलाइन के पाँच स्टेज हैं:
- इमेज कैप्चर करें
- आर्टवर्क और उसके किरदार पहचानें (OpenAI)
- इतिहास की रिसर्च करें (OpenAI)
- हर किरदार के लिए अलग वॉइस जनरेट करें (ElevenAPI)
- WebRTC के ज़रिए रियल-टाइम वॉइस कन्वर्सेशन शुरू करें (ElevenAgents)
विज़न से मूर्ति की पहचान
जब कोई यूज़र मूर्ति की फोटो लेता है, तो इमेज OpenAI के विज़न मॉडल को भेजी जाती है। एक स्ट्रक्चर्ड सिस्टम प्रॉम्प्ट आर्टवर्क का नाम, लोकेशन, आर्टिस्ट, तारीख और – सबसे ज़रूरी – हर किरदार के लिए डिटेल्ड वॉइस डिस्क्रिप्शन निकालता है। सिस्टम प्रॉम्प्ट में अपेक्षित JSON आउटपुट फॉर्मेट भी शामिल है:
| 1 | { |
| 2 | "statueName": "string - name of the statue, monument, or artwork", |
| 3 | "location": "string - where it is located (city, country)", |
| 4 | "artist": "string - the creator of the artwork", |
| 5 | "year": "string - year completed or unveiled", |
| 6 | "description": "string - brief description of the artwork and its historical significance", |
| 7 | "characters": [ |
| 8 | { |
| 9 | "name": "string - character name", |
| 10 | "description": "string - who this person was and their historical significance", |
| 11 | "era": "string - time period they lived in", |
| 12 | "voiceDescription": "string - detailed voice description for Voice Design API (include audio quality marker, age, gender, vocal qualities, accent, pacing, and personality)" |
| 13 | } |
| 14 | ] |
| 15 | } |
| 1 | const response = await openai.chat.completions.create({ |
| 2 | model: "gpt-5.2", |
| 3 | response_format: { type: "json_object" }, |
| 4 | messages: [ |
| 5 | { role: "system", content: SYSTEM_PROMPT }, |
| 6 | { |
| 7 | role: "user", |
| 8 | content: [ |
| 9 | { |
| 10 | type: "text", |
| 11 | text: "Identify this statue/monument/artwork and all characters depicted.", |
| 12 | }, |
| 13 | { |
| 14 | type: "image_url", |
| 15 | image_url: { |
| 16 | url: `data:image/jpeg;base64,${base64Data}`, |
| 17 | detail: "high", |
| 18 | }, |
| 19 | }, |
| 20 | ], |
| 21 | }, |
| 22 | ], |
| 23 | max_completion_tokens: 2500, |
| 24 | }); |
अगर फोटो लंदन के वेस्टमिंस्टर ब्रिज पर बौडिका की मूर्ति की है, तो जवाब कुछ ऐसा दिखेगा:
| 1 | { |
| 2 | "statueName": "Boudica and Her Daughters", |
| 3 | "location": "Westminster Bridge, London, UK", |
| 4 | "artist": "Thomas Thornycroft", |
| 5 | "year": "1902", |
| 6 | "description": "Bronze statue depicting Queen Boudica riding a war chariot with her two daughters, commemorating her uprising against Roman occupation of Britain.", |
| 7 | "characters": [ |
| 8 | { |
| 9 | "name": "Boudica", |
| 10 | "description": "Queen of the Iceni tribe who led an uprising against Roman occupation", |
| 11 | "era": "Ancient Britain, 60-61 AD", |
| 12 | "voiceDescription": "Perfect audio quality. A powerful woman in her 30s with a deep, resonant voice and a thick Celtic British accent. Her tone is commanding and fierce, with a booming quality that projects authority. She speaks at a measured, deliberate pace with passionate intensity." |
| 13 | }, |
| 14 | // Other characters in the statue |
| 15 | ] |
| 16 | } |
असरदार वॉइस डिस्क्रिप्शन कैसे लिखें
वॉइस डिस्क्रिप्शन की क्वालिटी सीधे जनरेटेड वॉइस की क्वालिटी तय करती है। वॉइस डिज़ाइन प्रॉम्प्टिंग गाइड में यह विस्तार से बताया गया है, लेकिन मुख्य बातें हैं: ऑडियो क्वालिटी मार्कर ("Perfect audio quality."), उम्र और जेंडर, टोन/टिम्बर (गहरी, गूंजदार, खुरदरी), सटीक एक्सेंट ("thick Celtic British accent" सिर्फ "British" की बजाय), और बोलने की गति। जितना डिटेल में प्रॉम्प्ट देंगे, उतना सटीक रिजल्ट मिलेगा – "60 साल की थकी हुई न्यू यॉर्कर, जिसमें हल्का ह्यूमर है" हमेशा "एक बुजुर्ग महिला की आवाज़" से बेहतर रिजल्ट देगा।
गाइड से कुछ बातें ध्यान देने लायक: एक्सेंट की मजबूती बताने के लिए "thick" शब्द का इस्तेमाल करें, "foreign" जैसे अस्पष्ट शब्दों से बचें, और काल्पनिक या ऐतिहासिक किरदारों के लिए असली दुनिया के एक्सेंट को इंस्पिरेशन के तौर पर सुझा सकते हैं (जैसे, "एक प्राचीन सेल्टिक रानी, जिसकी ब्रिटिश एक्सेंट मोटी, शाही और दमदार है").
वॉइस डिज़ाइन से किरदारों की आवाज़ बनाना
वॉइस डिज़ाइन API टेक्स्ट डिस्क्रिप्शन से नई सिंथेटिक आवाज़ें बनाता है – न वॉइस सैंपल चाहिए, न क्लोनिंग। यह खासतौर पर उन ऐतिहासिक किरदारों के लिए बढ़िया है, जिनकी असली ऑडियो मौजूद नहीं है।
इस प्रक्रिया में दो स्टेप होते हैं।
प्रीव्यू जनरेट करें
| 1 | const { previews } = await elevenlabs.textToVoice.design({ |
| 2 | modelId: "eleven_multilingual_ttv_v2", |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | text: sampleText, |
| 5 | }); |
टेक्स्ट पैरामीटर मायने रखता है। लंबा, किरदार के हिसाब से सैंपल टेक्स्ट (50+ शब्द) ज़्यादा स्थिर रिजल्ट देता है – डायलॉग को किरदार के मुताबिक रखें, न कि कोई सामान्य ग्रीटिंग। वॉइस डिज़ाइन प्रॉम्प्टिंग गाइड में यह और विस्तार से बताया गया है।
वॉइस सेव करें
प्रीव्यू जनरेट होने के बाद, एक चुनें और परमानेंट वॉइस बनाएं:
| 1 | const voice = await elevenlabs.textToVoice.create({ |
| 2 | voiceName: `StatueScanner - ${character.name}`, |
| 3 | voiceDescription: character.voiceDescription, |
| 4 | generatedVoiceId: previews[0].generatedVoiceId, |
| 5 | }); |
अगर मूर्ति में कई किरदार हैं, तो वॉइस क्रिएशन एक साथ चलता है। पाँच किरदारों की आवाज़ें लगभग उतने ही समय में बन जाती हैं, जितना एक की लगती है:
| 1 | const results = await Promise.all( |
| 2 | characters.map((character) => createVoiceForCharacter(character)) |
| 3 | ); |
मल्टी-वॉइस ElevenLabs एजेंट बनाना
वॉइस बन जाने के बाद अगला स्टेप है ElevenLabs एजेंट को सेटअप करना, जो रियल-टाइम में किरदारों की आवाज़ बदल सके।
| 1 | const agent = await elevenlabs.conversationalAi.agents.create({ |
| 2 | name: `Statue Scanner - ${statueName}`, |
| 3 | tags: ["statue-scanner"], |
| 4 | conversationConfig: { |
| 5 | agent: { |
| 6 | firstMessage, |
| 7 | language: "en", |
| 8 | prompt: { |
| 9 | prompt: systemPrompt, |
| 10 | temperature: 0.7, |
| 11 | }, |
| 12 | }, |
| 13 | tts: { |
| 14 | voiceId: primaryCharacter.voiceId, |
| 15 | modelId: "eleven_v3", |
| 16 | supportedVoices: otherCharacters.map((c) => ({ |
| 17 | voiceId: c.voiceId, |
| 18 | label: c.name, |
| 19 | description: c.voiceDescription, |
| 20 | })), |
| 21 | }, |
| 22 | turn: { |
| 23 | turnTimeout: 10, |
| 24 | }, |
| 25 | conversation: { |
| 26 | maxDurationSeconds: 600, |
| 27 | }, |
| 28 | }, |
| 29 | }); |
मल्टी-वॉइस स्विचिंग
supportedVoices ऐरे एजेंट को बताता है कि कौन-कौन सी आवाज़ें उपलब्ध हैं। Agents प्लेटफॉर्म वॉइस स्विचिंग खुद ही संभालता है – जब LLM के जवाब से पता चलता है कि कोई दूसरा किरदार बोल रहा है, तो TTS इंजन उस हिस्से को सही वॉइस में भेज देता है।
ग्रुप कन्वर्सेशन के लिए प्रॉम्प्ट इंजीनियरिंग
कई किरदारों को असली ग्रुप जैसा महसूस कराने के लिए – न कि सिर्फ सवाल-जवाब – प्रॉम्प्ट को सोच-समझकर डिजाइन करना पड़ता है:
| 1 | const multiCharacterRules = ` |
| 2 | MULTI-CHARACTER DYNAMICS: |
| 3 | You are playing ALL ${characters.length} characters simultaneously. |
| 4 | Make this feel like a group conversation, not an interview. |
| 5 | |
| 6 | - Characters should interrupt each other: |
| 7 | "Actually, if I may -" / "Wait, I must say -" |
| 8 | |
| 9 | - React to what others say: |
| 10 | "Well said." / "I disagree with that..." / "Always so modest..." |
| 11 | |
| 12 | - Have side conversations: |
| 13 | "Do you remember when -" / "Tell them about the time you -" |
| 14 | |
| 15 | The goal is for users to feel like they are witnessing a real exchange |
| 16 | between people who happen to include them. |
| 17 | `; |
WebRTC पर रियल-टाइम वॉइस
आखिरी हिस्सा है क्लाइंट कनेक्शन। ElevenLabs Agents WebRTC सपोर्ट करते हैं, जिससे वॉइस कन्वर्सेशन में बहुत कम लेटेंसी रहती है – यह WebSocket कनेक्शन से तेज़ है, जिससे बातचीत और नेचुरल लगती है।
सर्वर-साइड: कन्वर्सेशन टोकन लें
| 1 | const { token } = await client.conversationalAi.conversations.getWebrtcToken({ |
| 2 | agentId, |
| 3 | }); |
क्लाइंट-साइड: सेशन शुरू करें
| 1 | import { useConversation } from "@elevenlabs/react"; |
| 2 | |
| 3 | const conversation = useConversation({ |
| 4 | onConnect: () => setIsSessionActive(true), |
| 5 | onDisconnect: () => setIsSessionActive(false), |
| 6 | onMessage: (message) => { |
| 7 | if (message.source === "ai") { |
| 8 | setMessages((prev) => [...prev, { role: "agent", text: message.message }]); |
| 9 | } |
| 10 | }, |
| 11 | }); |
| 12 | |
| 13 | await conversation.startSession({ |
| 14 | agentId, |
| 15 | conversationToken: token, |
| 16 | connectionType: "webrtc", |
| 17 | }); |
useConversation हुक ऑडियो कैप्चर, स्ट्रीमिंग, वॉइस एक्टिविटी डिटेक्शन और प्लेबैक संभालता है।
वेब सर्च से रिसर्च को गहराई दें
अगर यूज़र बातचीत शुरू करने से पहले ज़्यादा ऐतिहासिक जानकारी चाहते हैं, तो आप OpenAI के वेब सर्च टूल से एक एडवांस्ड रिसर्च मोड जोड़ सकते हैं:
| 1 | const response = await openai.responses.create({ |
| 2 | model: "gpt-5.2", |
| 3 | instructions: RESEARCH_SYSTEM_PROMPT, |
| 4 | tools: [{ type: "web_search_preview" }], |
| 5 | input: `Research ${identification.statueName}. Search for current information |
| 6 | including location, visiting hours, and recent news about the artwork.`, |
| 7 | }); |
हमने क्या सीखा
इस प्रोजेक्ट से पता चलता है कि जब हम AI के अलग-अलग मोड – टेक्स्ट, रिसर्च, विज़न और ऑडियो – को जोड़ते हैं, तो ऐसे अनुभव बना सकते हैं जो डिजिटल और असली दुनिया, दोनों को जोड़ते हैं। मल्टी-मोडल एजेंट्स में बहुत संभावनाएं हैं, जिन्हें हम चाहते हैं कि और लोग एजुकेशन, काम और मज़े के लिए एक्सप्लोर करें।
शुरू करें
इस प्रोजेक्ट में इस्तेमाल हुए API – वॉइस डिज़ाइन,ElevenAgents, और OpenAI – ये सभी अभी उपलब्ध हैं।
ElevenLabs टीम के लेखों को देखें
Developer
How to use Agent Skils
Agent Skills are one of the highest-leverage ways to use LLMs. They provide the appropriate context for the task you want to accomplish in a repeatable manner.