ভয়েস চালিত ওয়েব অ্যাপস - ওয়েব স্পিচ API এর পরিচিতি

নতুন জাভাস্ক্রিপ্ট ওয়েব স্পিচ API আপনার ওয়েব পৃষ্ঠাগুলিতে বক্তৃতা শনাক্তকরণ যোগ করা সহজ করে তোলে। এই API Chrome সংস্করণ 25 এবং পরবর্তীতে স্পিচ শনাক্তকরণ ক্ষমতার উপর সূক্ষ্ম নিয়ন্ত্রণ এবং নমনীয়তার অনুমতি দেয়। এখানে একটি উদাহরণ রয়েছে যেখানে স্বীকৃত পাঠ্য কথা বলার সময় প্রায় সঙ্গে সঙ্গে উপস্থিত হয়।

ওয়েব স্পিচ API ডেমো

ডেমো / সোর্স

এর ফণা অধীনে কটাক্ষপাত করা যাক. প্রথমে, আমরা webkitSpeechRecognition অবজেক্টটি বিদ্যমান কিনা তা পরীক্ষা করে ব্রাউজারটি ওয়েব স্পিচ API সমর্থন করে কিনা তা পরীক্ষা করে দেখতে পারি। যদি না হয়, আমরা ব্যবহারকারীকে তাদের ব্রাউজার আপগ্রেড করার পরামর্শ দিই। (যেহেতু API এখনও পরীক্ষামূলক, এটি বর্তমানে বিক্রেতা উপসর্গযুক্ত।) অবশেষে, আমরা webkitSpeechRecognition অবজেক্ট তৈরি করি যা স্পিচ ইন্টারফেস প্রদান করে এবং এর কিছু বৈশিষ্ট্য এবং ইভেন্ট হ্যান্ডলার সেট করি।

if (!('webkitSpeechRecognition' in window)) {
    upgrade();
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onstart = function() { ... }
    recognition.onresult = function(event) { ... }
    recognition.onerror = function(event) { ... }
    recognition.onend = function() { ... }
    ...

continuous জন্য ডিফল্ট মান মিথ্যা, যার অর্থ হল যে যখন ব্যবহারকারী কথা বলা বন্ধ করে, তখন বক্তৃতা শনাক্তকরণ শেষ হয়ে যাবে। এই মোডটি ছোট ইনপুট ক্ষেত্রগুলির মতো সাধারণ পাঠ্যের জন্য দুর্দান্ত। এই ডেমোতে , আমরা এটি সত্যে সেট করেছি, যাতে ব্যবহারকারী কথা বলার সময় বিরতি দিলেও স্বীকৃতি অব্যাহত থাকবে।

interimResults এর ডিফল্ট মানটি মিথ্যা, যার অর্থ শুধুমাত্র স্বীকৃতিদাতার দ্বারা প্রত্যাবর্তিত ফলাফলগুলি চূড়ান্ত এবং পরিবর্তন হবে না। ডেমো এটিকে সত্য হিসাবে সেট করে যাতে আমরা তাড়াতাড়ি, অন্তর্বর্তী ফলাফল পেতে পারি যা পরিবর্তিত হতে পারে। ডেমোটি সাবধানে দেখুন, ধূসর পাঠ্যটি এমন একটি পাঠ্য যা অন্তর্বর্তীকালীন এবং কখনও কখনও পরিবর্তিত হয়, যেখানে কালো পাঠ্যটি সনাক্তকারীর প্রতিক্রিয়া যা চূড়ান্ত হিসাবে চিহ্নিত এবং পরিবর্তন হবে না।

শুরু করতে, ব্যবহারকারী মাইক্রোফোন বোতামে ক্লিক করে, যা এই কোডটি ট্রিগার করে:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

আমরা স্পিচ শনাক্তকারী "ল্যাং"-এর জন্য কথ্য ভাষা সেট করি BCP-47 মান যা ব্যবহারকারী নির্বাচন ড্রপ-ডাউন তালিকার মাধ্যমে নির্বাচন করেছেন, উদাহরণস্বরূপ ইংরেজি-যুক্তরাষ্ট্রের জন্য "en-US"৷ এটি সেট করা না থাকলে, এটি HTML নথির মূল উপাদান এবং অনুক্রমের ল্যাংয়ের সাথে ডিফল্ট হয়। ক্রোম স্পিচ রিকগনিশন অসংখ্য ভাষা সমর্থন করে (ডেমো উৎসে “ langs ” টেবিল দেখুন), সেইসাথে কিছু ডান-থেকে-বাম ভাষা যা এই ডেমোতে অন্তর্ভুক্ত নয়, যেমন he-IL এবং ar-EG।

ভাষা সেট করার পরে, আমরা স্পিচ শনাক্তকারী সক্রিয় করতে recognition.start() কল করি। একবার এটি অডিও ক্যাপচার করা শুরু করলে, এটি onstart ইভেন্ট হ্যান্ডলারকে কল করে এবং তারপরে প্রতিটি নতুন ফলাফলের জন্য, এটি onresult ইভেন্ট হ্যান্ডলারকে কল করে।

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            final_transcript += event.results[i][0].transcript;
        } else {
            interim_transcript += event.results[i][0].transcript;
        }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    };
}

এই হ্যান্ডলারটি এখন পর্যন্ত প্রাপ্ত সমস্ত ফলাফলকে দুটি স্ট্রিংয়ে একত্রিত করে: final_transcript এবং interim_transcript । ফলস্বরূপ স্ট্রিংগুলিতে "\n" অন্তর্ভুক্ত থাকতে পারে, যেমন ব্যবহারকারী যখন "নতুন অনুচ্ছেদ" বলে, তাই আমরা এইগুলিকে HTML ট্যাগে রূপান্তর করতে linebreak ফাংশন ব্যবহার করি <br> বা <p> । অবশেষে এটি এই স্ট্রিংগুলিকে তাদের সংশ্লিষ্ট <span> উপাদানগুলির অভ্যন্তরীণ HTML হিসাবে সেট করে: final_span যা কালো টেক্সট দিয়ে স্টাইল করা হয় এবং interim_span যা ধূসর টেক্সট দিয়ে স্টাইল করা হয়।

interim_transcript একটি স্থানীয় পরিবর্তনশীল, এবং প্রতিবার এই ইভেন্টটি কল করার সময় এটি সম্পূর্ণরূপে পুনর্নির্মাণ করা হয় কারণ এটি সম্ভব যে শেষ onresult ইভেন্টের পর থেকে সমস্ত অন্তর্বর্তী ফলাফল পরিবর্তিত হয়েছে। আমরা final_transcript জন্য 0-এ লুপ শুরু করে একই কাজ করতে পারি। যাইহোক, যেহেতু চূড়ান্ত পাঠ্য কখনই পরিবর্তিত হয় না, আমরা final_transcript গ্লোবাল করে এখানে কোডটিকে আরও দক্ষ করে তুলেছি, যাতে এই ইভেন্টটি লুপ শুরু করতে পারে। event.resultIndex এ এবং শুধুমাত্র নতুন কোনো চূড়ান্ত পাঠ্য যোগ করুন।

তাই তো! বাকি কোড আছে শুধু সবকিছু সুন্দর দেখাতে. এটি স্থিতি বজায় রাখে, ব্যবহারকারীকে কিছু তথ্যপূর্ণ বার্তা দেখায় এবং স্থির মাইক্রোফোন, মাইক-স্ল্যাশ চিত্র এবং স্পন্দিত লাল বিন্দুর সাথে মাইক-অ্যানিমেটের মধ্যে মাইক্রোফোন বোতামে GIF চিত্র অদলবদল করে।

যখন recognition.start() কল করা হয় তখন মাইক-স্ল্যাশ ইমেজটি দেখানো হয়, এবং তারপরে ফায়ার onstart হলে মাইক-অ্যানিমেট দিয়ে প্রতিস্থাপিত হয়। সাধারণত এটি এত দ্রুত ঘটে যে স্ল্যাশটি লক্ষ্য করা যায় না, কিন্তু প্রথমবার স্পিচ রিকগনিশন ব্যবহার করা হলে, ক্রোমকে ব্যবহারকারীর কাছে মাইক্রোফোন ব্যবহার করার অনুমতি চাইতে হয়, এই ক্ষেত্রে onstart শুধুমাত্র তখনই ফায়ার হয় যখন এবং যদি ব্যবহারকারী অনুমতি দেয়। HTTPS-এ হোস্ট করা পৃষ্ঠাগুলির অনুমতির জন্য বারবার জিজ্ঞাসা করার প্রয়োজন নেই, যেখানে HTTP হোস্ট করা পৃষ্ঠাগুলি করে৷

তাই আপনার ওয়েব পৃষ্ঠাগুলিকে আপনার ব্যবহারকারীদের কথা শুনতে সক্ষম করে জীবন্ত করে তুলুন!

আমরা আপনার প্রতিক্রিয়া শুনতে চাই...

Google কীভাবে এই API থেকে ভয়েস ডেটা পরিচালনা করছে তা জানতে Chrome গোপনীয়তা হোয়াইটপেপার পড়ুন।