আপনার ব্লগের জন্য স্মার্ট ভয়েস ও টেক্সট কমান্ড গ্যাজেট যুক্ত করুণ: একটি সম্পূর্ণ টিউটোরিয়াল

 আপনি কি আপনার ব্লগের ভিজিটরদের জন্য আরও সহজ এবং ইন্টারেক্টিভ একটি অভিজ্ঞতা দিতে চান? এই স্মার্ট ভয়েস ও টেক্সট কমান্ড গ্যাজেটটি আপনার ব্লগে একটি ভয়েস-অ্যাকটিভেটেড নেভিগেশন সিস্টেম যোগ করবে, যা ব্যবহারকারীদের শুধুমাত্র টাইপ করেই নয়, ভয়েস কমান্ডের মাধ্যমেও ব্লগ পোস্ট, লেবেল বা নির্দিষ্ট পেজে যেতে সাহায্য করবে। এটি বাংলা এবং ইংরেজি উভয় ভাষাতেই কাজ করে!

---

এই গ্যাজেটের মূল ফিচারসমূহ

এই গ্যাজেটটি কিছু অসাধারণ ফিচার অফার করে যা আপনার ব্লগের ব্যবহারযোগ্যতাকে অনেক বাড়িয়ে দেবে:

• ভয়েস ও টেক্সট ইনপুট: ব্যবহারকারীরা টাইপ করে অথবা মাইক্রোফোনে কথা বলে কমান্ড দিতে পারবে।

• স্বয়ংক্রিয় ব্লগ পোস্ট ও লেবেল সনাক্তকরণ: গ্যাজেটটি স্বয়ংক্রিয়ভাবে আপনার ব্লগের পোস্টের শিরোনাম এবং লেবেলগুলোকে কমান্ড হিসেবে চিহ্নিত করবে।

• স্থির পেজ সমর্থন: 'About', 'Contact', 'Profile' এর মতো স্থির পেজগুলোকেও কমান্ড হিসেবে যুক্ত করা যাবে।

• দ্বিভাষিক সমর্থন (বাংলা/ইংরেজি): বাংলা ও ইংরেজি উভয় ভাষার কমান্ডই বুঝতে পারে।

• স্মার্ট কমান্ড ম্যাচিং: যদি কোনো কমান্ড পুরোপুরি ম্যাচ না করে, তবে এটি কাছাকাছি কমান্ড খুঁজে বের করার চেষ্টা করবে।

• সহজ ইন্টিগ্রেশন: ব্লগারে সহজেই যুক্ত করা যাবে।

---

এটি কিভাবে কাজ করে?

এই গ্যাজেটটি মূলত আপনার ব্লগের RSS ফিড থেকে ডেটা নিয়ে কাজ করে। যখন কোনো ভিজিটর আপনার ব্লগে আসে, তখন এই গ্যাজেটটি স্বয়ংক্রিয়ভাবে আপনার পোস্টের শিরোনাম, লেবেল এবং স্থির পেজগুলোর তথ্য সংগ্রহ করে সেগুলোকে ভয়েস বা টেক্সট কমান্ড হিসেবে ব্যবহারের জন্য প্রস্তুত রাখে।

উদাহরণস্বরূপ, যদি আপনার একটি পোস্টের শিরোনাম "আমার প্রথম ব্লগ পোস্ট" হয়, তবে ব্যবহারকারী "আমার প্রথম ব্লগ পোস্ট" টাইপ করে বা বলে সরাসরি সেই পোস্টে যেতে পারবে। একইভাবে, যদি আপনার "প্রযুক্তি" নামের একটি লেবেল থাকে, তবে "প্রযুক্তি" কমান্ড দিয়ে সেই লেবেলের সমস্ত পোস্ট দেখতে পারবে।

---

আপনার ব্লগে গ্যাজেটটি কিভাবে যুক্ত করবেন?

এই গ্যাজেটটি আপনার ব্লগারে যুক্ত করা খুবই সহজ। নিচের ধাপগুলো অনুসরণ করুন:

ধাপ ১: ব্লগারে লগইন করুন

আপনার ব্লগার অ্যাকাউন্টে লগইন করুন।

ধাপ ২: লেআউট সেকশনে যান

বাম পাশের মেনু থেকে "Layout" অপশনে ক্লিক করুন।

ধাপ ৩: একটি নতুন গ্যাজেট যোগ করুন

আপনার পছন্দসই স্থানে, সাধারণত সাইডবারে বা ফুটার সেকশনে, "Add a Gadget" এ ক্লিক করুন।

ধাপ ৪: HTML/JavaScript গ্যাজেট নির্বাচন করুন

গ্যাজেটের তালিকা থেকে "HTML/JavaScript" নির্বাচন করুন।

ধাপ ৫: কোড পেস্ট করুন

এবার নিচের সম্পূর্ণ কোডটি "Content" বক্সে পেস্ট করুন:

HTML

<div id="voiceContainer" style="position:fixed;bottom:30px;right:30px;z-index:9999;display:flex;align-items:center;gap:5px;background:#fff;padding:5px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.2);">
  <input id="commandInput" list="commandSuggestions" placeholder="Type or speak (বাংলা/English)" 
    style="padding:8px;border-radius:4px;border:1px solid #ccc;min-width:180px;" />
  <datalist id="commandSuggestions"></datalist>

  <button id="voiceStart" title="Click to speak" 
    style="padding:8px 12px;background:#007bff;color:white;border:none;border-radius:4px;cursor:pointer;">
    🎙️
  </button>
</div>

<script>
(function(){
  const commands = {
    "হোমে যাও": () => go("https://aktermolla.blogspot.com"),
    "home": () => go("https://aktermolla.blogspot.com"),
    "চ্যাট ওপেন কর": () => toggle("#akt-toggle-button"),
    "open chat": () => toggle("#akt-toggle-button"),
    "চ্যাটবট টগল কর": () => toggle("#chatbot-toggle"),
    "toggle chatbot": () => toggle("#chatbot-toggle")
  };

  function go(url){ window.location.href = url; }
  function toggle(id){ document.querySelector(id)?.click(); }

  // 🔄 Blogger Feed থেকে লেবেল ও পেজ লিংক সংগ্রহ করা
  fetch("https://aktermolla.blogspot.com/feeds/posts/summary?alt=json&max-results=50")
  .then(res => res.json())
  .then(data => {
    const entries = data.feed.entry || [];
    const suggest = document.getElementById("commandSuggestions");

    entries.forEach(entry => {
      const title = entry.title.$t.trim();
      const url = entry.link.find(l => l.rel === "alternate").href;
      const labelList = (entry.category || []).map(c => c.term.trim());

      // Post title কে কমান্ড হিসেবে রাখি
      if (!commands[title]) {
        commands[title] = () => go(url);
        addToSuggestions(title);
      }

      // লেবেলগুলোকে command হিসেবে রাখি
      labelList.forEach(label => {
        const labelKey = label.toLowerCase();
        if (!commands[labelKey]) {
          commands[labelKey] = () => go(`https://aktermolla.blogspot.com/search/label/${encodeURIComponent(label)}`);
          addToSuggestions(labelKey);
        }
      });
    });
  });

  // Static page fetch (About, Contact, Profile)
  fetch("https://aktermolla.blogspot.com/feeds/pages/default?alt=json")
  .then(res => res.json())
  .then(data => {
    const pages = data.feed.entry || [];
    pages.forEach(page => {
      const title = page.title.$t.trim();
      const url = page.link.find(l => l.rel === "alternate").href;
      if (!commands[title]) {
        commands[title] = () => go(url);
        addToSuggestions(title);
      }
    });
  });

  function addToSuggestions(value){
    const opt = document.createElement("option");
    opt.value = value;
    document.getElementById("commandSuggestions").appendChild(opt);
  }

  // 🔁 Match close commands
  function findClosestCommand(input){
    input = input.trim();
    const keys = Object.keys(commands);
    let match = keys.find(k => k.toLowerCase() === input.toLowerCase());
    if (!match) {
      match = keys.find(k => input.toLowerCase().includes(k.toLowerCase()));
    }
    return match || null;
  }

  // 🗣️ Voice Setup
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  recognition.lang = 'bn-BD';
  recognition.continuous = false;

  recognition.onresult = e => {
    const result = e.results[0][0].transcript.trim();
    processCommand(result);
  };
  recognition.onend = () => recognition.start();

  document.getElementById("voiceStart").addEventListener("click", () => {
    recognition.start();
    document.getElementById("voiceStart").textContent = "🔊";
    document.getElementById("voiceStart").style.backgroundColor = "#28a745";
  });

  document.getElementById("commandInput").addEventListener("change", function(){
    let input = this.value.trim();
    const bn = /[\u0980-\u09FF]/;
    if (!bn.test(input)) input = input.toLowerCase();
    processCommand(input);
    this.value = "";
  });

  function processCommand(input){
    const match = findClosestCommand(input);
    if(match){
      commands[match]();
    } else {
      alert(`❌ "${input}" এর জন্য কোনো পৃষ্ঠা খুঁজে পাওয়া যায়নি।`);
    }
  }
})();
</script>

গুরুত্বপূর্ণ দ্রষ্টব্য:

• কোডের https://aktermolla.blogspot.com এই URL গুলো আপনার ব্লগের URL দিয়ে পরিবর্তন করতে হবে। বিশেষ করে go("https://aktermolla.blogspot.com") এবং fetch("https://aktermolla.blogspot.com/feeds/posts/summary?alt=json&max-results=50"), fetch("https://aktermolla.blogspot.com/feeds/pages/default?alt=json") এই লাইনগুলোতে আপনার ব্লগের সঠিক URL ব্যবহার করুন।

• আপনি চাইলে commands অবজেক্টে আপনার কাস্টম কমান্ড যোগ করতে পারেন, যেমন "হোমে যাও" বা "ওপেন চ্যাট"।

ধাপ ৬: সংরক্ষণ করুন

"Save" বাটনে ক্লিক করে গ্যাজেটটি সংরক্ষণ করুন।

---

গ্যাজেটটি কিভাবে ব্যবহার করবেন?

একবার গ্যাজেটটি আপনার ব্লগে যুক্ত হয়ে গেলে, এটি আপনার ব্লগের নিচের ডানদিকে একটি ছোট বক্স হিসেবে দেখা যাবে।

• টেক্সট কমান্ডের জন্য:

  • বক্সের মধ্যে "Type or speak (বাংলা/English)" লেখা ইনপুট ফিল্ডে ক্লিক করুন।

  • আপনি যে পোস্টের শিরোনাম, লেবেল বা পেজে যেতে চান তার নাম টাইপ করুন (যেমন: "আমার প্রথম পোস্ট", "প্রযুক্তি", "যোগাযোগ")।

  • টাইপ করার সাথে সাথে সাজেশন দেখতে পাবেন। এন্টার চাপুন বা সাজেশন থেকে নির্বাচন করুন।

• ভয়েস কমান্ডের জন্য:

  • মাইক্রোফোন আইকন (🎙️) বাটনে ক্লিক করুন।

  • প্রথমবার ব্যবহার করার সময় ব্রাউজার আপনার মাইক্রোফোন ব্যবহারের অনুমতি চাইতে পারে, অনুমতি দিন।

  • বাটনটি "🔊" এ পরিবর্তিত হলে এবং সবুজ রঙ ধারণ করলে, আপনি আপনার কমান্ডটি বলুন (যেমন: "হোমে যাও", "আমার ব্লগ পোস্ট", "প্রযুক্তি")।

  • কমান্ড বলা শেষ হলে গ্যাজেটটি স্বয়ংক্রিয়ভাবে প্রক্রিয়া করবে এবং আপনাকে নির্দিষ্ট পেজে নিয়ে যাবে।

---

কাস্টমাইজেশন টিপস

• স্টাইল পরিবর্তন: div#voiceContainer এর style অ্যাট্রিবিউটে পরিবর্তন করে গ্যাজেটের রঙ, আকার, অবস্থান ইত্যাদি কাস্টমাইজ করতে পারেন।

• ডিফল্ট কমান্ড যোগ/পরিবর্তন: const commands অবজেক্টের মধ্যে আপনার প্রয়োজন অনুযায়ী আরও কাস্টম কমান্ড যুক্ত করতে পারেন বা বিদ্যমান কমান্ডগুলো পরিবর্তন করতে পারেন।

এই স্মার্ট ভয়েস ও টেক্সট কমান্ড গ্যাজেটটি আপনার ব্লগকে আরও আধুনিক এবং ব্যবহারকারী-বান্ধব করে তুলবে। আপনার ভিজিটররা দ্রুত এবং সহজে আপনার ব্লগের কন্টেন্ট অ্যাক্সেস করতে পারবে, যা তাদের সামগ্রিক অভিজ্ঞতাকে উন্নত করবে।

যদি আপনার এই গ্যাজেট নিয়ে কোনো প্রশ্ন থাকে বা এটি সেটআপ করতে কোনো সমস্যা হয়, তবে নিচে মন্তব্য করে জানাতে পারেন।