নেক্সটজেএস এবং এক্সপ্রেসজেএস প্লেটোব্লকচেন ডেটা ইন্টেলিজেন্সের মাধ্যমে বক্তৃতাকে পিডিএফ-এ রূপান্তর করা হচ্ছে। উল্লম্ব অনুসন্ধান. আ.

নেক্সটজেএস এবং এক্সপ্রেসজেএস দিয়ে বক্তৃতা পিডিএফে রূপান্তর করা হচ্ছে

সময় স্ট্যাম্প: আগস্ট 4, 2022 8:55 এএম

বক্তৃতা ইন্টারফেসগুলি একটি জিনিস হয়ে উঠলে, বক্তৃতা মিথস্ক্রিয়াগুলির সাথে আমরা যা করতে পারি তার কিছু অন্বেষণ করা মূল্যবান। যেমন, আমরা যদি কিছু বলতে পারি এবং সেটিকে একটি ডাউনলোডযোগ্য পিডিএফ হিসাবে ট্রান্সক্রিপ্ট এবং পাম্প আউট করতে পারি?

ওয়েল, স্পয়লার সতর্কতা: আমরা একেবারে পারেন কর এটা! সেখানে লাইব্রেরি এবং ফ্রেমওয়ার্ক রয়েছে যা আমরা একসাথে করতে পারি এবং এটি আমরা এই নিবন্ধে একসাথে করতে যাচ্ছি।

এই টুল আমরা ব্যবহার করছি

প্রথমত, এই দুটি বড় খেলোয়াড়: Next.js এবং Express.js।

পরবর্তী.js স্ট্যাটিক সাইট তৈরির মূল বৈশিষ্ট্য সহ প্রতিক্রিয়া করার জন্য অতিরিক্ত কার্যকারিতার উপর ট্যাক। ডায়নামিক রাউটিং, ইমেজ অপ্টিমাইজেশান, বিল্ট-ইন-ডোমেইন এবং সাবডোমেন রাউটিং, দ্রুত রিফ্রেশ, ফাইল সিস্টেম রাউটিং, এবং API রুট... এর মধ্যে এটি অনেক ডেভেলপারদের জন্য একটি সুবিধাজনক। অনেক, অন্যান্য অনেক জিনিস.

আমাদের ক্ষেত্রে, আমাদের অবশ্যই এর জন্য Next.js দরকার API রুট আমাদের ক্লায়েন্ট সার্ভারে। আমরা এমন একটি রুট চাই যা একটি পাঠ্য ফাইল নেয়, এটিকে পিডিএফে রূপান্তর করে, এটিকে আমাদের ফাইল সিস্টেমে লিখে, তারপর ক্লায়েন্টকে একটি প্রতিক্রিয়া পাঠায়।

এক্সপ্রেস.জেএস আমাদের রাউটিং, HTTP সাহায্যকারী এবং টেমপ্লেটিং সহ একটি সামান্য Node.js অ্যাপ পেতে দেয়। এটি আমাদের নিজস্ব API-এর জন্য একটি সার্ভার, যা কিছুর মধ্যে ডেটা পাস এবং পার্স করার সময় আমাদের প্রয়োজন হবে।

আমাদের কিছু অন্যান্য নির্ভরতা রয়েছে যা আমরা ব্যবহার করব:

  1. প্রতিক্রিয়া-বক্তৃতা-স্বীকৃতি: বক্তৃতাকে টেক্সটে রূপান্তর করার জন্য একটি লাইব্রেরি, এটি প্রতিক্রিয়া উপাদানগুলিতে উপলব্ধ করে।
  2. regenerator-রানটাইম: সমস্যা সমাধানের জন্য একটি লাইব্রেরি "regeneratorRuntime react-speech-recognition ব্যবহার করার সময় Next.js-এ যে ত্রুটি দেখা যায় তা সংজ্ঞায়িত করা হয়নি
  3. html-pdf-নোড: একটি HTML পৃষ্ঠা বা সর্বজনীন URLকে PDF এ রূপান্তর করার জন্য একটি লাইব্রেরি৷
  4. axios: ব্রাউজার এবং Node.js উভয় ক্ষেত্রে HTTP অনুরোধ করার জন্য একটি লাইব্রেরি
  5. শিং: একটি লাইব্রেরি যা ক্রস-অরিজিন রিসোর্স শেয়ারিংয়ের অনুমতি দেয়

ঠিককরা

আমরা প্রথমে যা করতে চাই তা হল দুটি প্রোজেক্ট ফোল্ডার তৈরি করা, একটি ক্লায়েন্টের জন্য এবং একটি সার্ভারের জন্য। আপনি যা চান তাদের নাম দিন। আমি আমার নামকরণ করছি audio-to-pdf-client এবং audio-to-pdf-server, যথাক্রমে।

ক্লায়েন্ট সাইডে Next.js দিয়ে শুরু করার দ্রুততম উপায় হল এটি বুটস্ট্র্যাপ করা Create-next-app. সুতরাং, আপনার টার্মিনাল খুলুন এবং আপনার ক্লায়েন্ট প্রকল্প ফোল্ডার থেকে নিম্নলিখিত কমান্ড চালান:

npx create-next-app client

এখন আমাদের প্রয়োজন আমাদের এক্সপ্রেস সার্ভার। আমরা এটি দ্বারা পেতে পারেন cdসার্ভার প্রোজেক্ট ফোল্ডারে প্রবেশ করুন এবং চালান npm init আদেশ ক package.json ফাইলটি একবার হয়ে গেলে সার্ভার প্রকল্প ফোল্ডারে তৈরি করা হবে।

আমাদের এখনও এক্সপ্রেস ইন্সটল করতে হবে, তাই এখনই সেটা করা যাক npm install express. এখন আমরা একটি নতুন তৈরি করতে পারি index.js সার্ভার প্রকল্প ফোল্ডারে ফাইল করুন এবং এই কোডটি সেখানে ড্রপ করুন:

const express = require("express")
const app = express()

app.listen(4000, () => console.log("Server is running on port 4000"))

সার্ভার চালানোর জন্য প্রস্তুত?

node index.js

এগিয়ে যাওয়ার জন্য আমাদের আরও কয়েকটি ফোল্ডার এবং আরেকটি ফাইলের প্রয়োজন হবে:

  • একটা তৈরি কর components ক্লায়েন্ট প্রকল্প ফোল্ডারে ফোল্ডার।
  • একটা তৈরি কর SpeechToText.jsx ফাইলের মধ্যে components subfolder।

আমরা আরও এগিয়ে যাওয়ার আগে, আমাদের একটু পরিষ্কার করতে হবে। বিশেষত, আমাদের ডিফল্ট কোড প্রতিস্থাপন করতে হবে pages/index.js এটি দিয়ে ফাইল:

import Head from "next/head";
import SpeechToText from "../components/SpeechToText";

export default function Home() {
  return (
    <div className="home">
      <Head>
        <title>Audio To PDF</title>
        <meta
          name="description"
          content="An app that converts audio to pdf in the browser"
        />
        <link rel="icon" href="/bn/favicon.ico" />
      </Head>

      <h1>Convert your speech to pdf</h1>

      <main>
        <SpeechToText />
      </main>
    </div>
  );
}

আমদানিকৃত SpeechToText উপাদান অবশেষে থেকে রপ্তানি করা হবে components/SpeechToText.jsx.

এর অন্যান্য নির্ভরতা ইনস্টল করা যাক

ঠিক আছে, আমরা আমাদের অ্যাপের জন্য প্রাথমিক সেটআপ করেছি। এখন আমরা লাইব্রেরিগুলি ইনস্টল করতে পারি যা চারপাশে পাস করা ডেটা পরিচালনা করে।

আমরা আমাদের ক্লায়েন্ট নির্ভরতাগুলি এর সাথে ইনস্টল করতে পারি:

npm install react-speech-recognition regenerator-runtime axios

আমাদের এক্সপ্রেস সার্ভার নির্ভরতা পরবর্তীতে, তাই আসুন cd সার্ভার প্রকল্প ফোল্ডারে এবং সেগুলি ইনস্টল করুন:

npm install html-pdf-node cors

আমাদের প্রোজেক্ট ফোল্ডারে থাকা ফাইলগুলি কৌশলে আছে তা নিশ্চিত করার এবং বিরতি দেওয়ার জন্য সম্ভবত একটি ভাল সময়। এই মুহুর্তে ক্লায়েন্ট প্রকল্প ফোল্ডারে আপনার যা থাকা উচিত তা এখানে:

/audio-to-pdf-web-client
├─ /components
|  └── SpeechToText.jsx
├─ /pages
|  ├─ _app.js
|  └── index.js
└── /styles
    ├─globals.css
    └── Home.module.css

এবং সার্ভার প্রকল্প ফোল্ডারে আপনার যা থাকা উচিত তা এখানে:

/audio-to-pdf-server
└── index.js

UI তৈরি করা

ঠিক আছে, আমাদের বক্তৃতা-টু-পিডিএফ এতটা দুর্দান্ত হবে না যদি এটির সাথে যোগাযোগ করার কোনও উপায় না থাকে, তাই আসুন এটির জন্য একটি প্রতিক্রিয়া উপাদান তৈরি করি যা আমরা কল করতে পারি <SpeechToText>.

আপনি সম্পূর্ণরূপে আপনার নিজস্ব মার্কআপ ব্যবহার করতে পারেন. আমরা যে টুকরোগুলো একসাথে রাখছি সে সম্পর্কে আপনাকে ধারণা দিতে আমি যা পেয়েছি তা এখানে:

import React from "react";

const SpeechToText = () => {
  return (
    <>
      <section>
        <div className="button-container">
          <button type="button" style={{ "--bgColor": "blue" }}>
            Start
          </button>
          <button type="button" style={{ "--bgColor": "orange" }}>
            Stop
          </button>
        </div>
        <div
          className="words"
          contentEditable
          suppressContentEditableWarning={true}
        ></div>
        <div className="button-container">
          <button type="button" style={{ "--bgColor": "red" }}>
            Reset
          </button>
          <button type="button" style={{ "--bgColor": "green" }}>
            Convert to pdf
          </button>
        </div>
      </section>
    </>
  );
};

export default SpeechToText;

এই উপাদানটি একটি প্রদান করে খণ্ড প্রতিক্রিয়া যেটিতে একটি HTML রয়েছে <``section``> উপাদান যা তিনটি div ধারণ করে:

  • .button-container দুটি বোতাম রয়েছে যা বক্তৃতা শনাক্তকরণ শুরু এবং বন্ধ করতে ব্যবহার করা হবে।
  • .words হয়েছে contentEditable এবং suppressContentEditableWarning বৈশিষ্ট্যগুলি এই উপাদানটিকে সম্পাদনাযোগ্য করে তোলে এবং প্রতিক্রিয়া থেকে যেকোনো সতর্কতা দমন করে।
  • অন্য .button-container আরও দুটি বোতাম রয়েছে যা যথাক্রমে পিডিএফ-এ স্পিচ রিসেট এবং রূপান্তর করতে ব্যবহৃত হবে।

স্টাইলিং সম্পূর্ণ অন্য জিনিস. আমি এখানে এটিতে যাব না, তবে আপনার নিজের জন্য শুরুর পয়েন্ট হিসাবে আমি লিখেছি এমন কিছু শৈলী ব্যবহার করতে আপনাকে স্বাগত জানাই styles/global.css ফাইল.

সম্পূর্ণ CSS দেখুন 
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.home {
  background-color: #333;
  min-height: 100%;
  padding: 0 1rem;
  padding-bottom: 3rem;
}

h1 {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: 2rem 0;
  text-align: center;
  text-transform: capitalize;
  color: white;
  font-size: 1rem;
}

.button-container {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 3rem;
}

button {
  color: white;
  background-color: var(--bgColor);
  font-size: 1.2rem;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: scale(0.99);
}

.words {
  max-width: 700px;
  margin: 50px auto;
  height: 50vh;
  border-radius: 5px;
  padding: 1rem 2rem 1rem 5rem;
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#d9eaf3),
    color-stop(4%, #fff)
  ) 0 4px;
  background-size: 100% 3rem;
  background-attachment: scroll;
  position: relative;
  line-height: 3rem;
  overflow-y: auto;
}

.success,
.error {
  background-color: #fff;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  width: max-content;
  text-align: center;
  display: block;
}

.success {
  color: green;
}

.error {
  color: red;
}

সেখানে থাকা CSS ভেরিয়েবলগুলি বোতামগুলির পটভূমির রঙ নিয়ন্ত্রণ করতে ব্যবহার করা হচ্ছে।

চলুন সর্বশেষ পরিবর্তন দেখুন! চালান npm run dev টার্মিনালে এবং তাদের চেক আউট.

আপনি যখন যান ব্রাউজারে এটি দেখতে হবে http://localhost:3000:

নেক্সটজেএস এবং এক্সপ্রেসজেএস দিয়ে বক্তৃতা পিডিএফে রূপান্তর করা হচ্ছে

পাঠ্য রূপান্তর আমাদের প্রথম বক্তৃতা!

নেওয়ার জন্য প্রথম পদক্ষেপটি আমাদের মধ্যে প্রয়োজনীয় নির্ভরতা আমদানি করা <SpeechToText> উপাদান:

import React, { useRef, useState } from "react";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
import axios from "axios";

তারপরে আমরা ব্রাউজার দ্বারা স্পিচ রিকগনিশন সমর্থিত কিনা তা পরীক্ষা করি এবং সমর্থিত না হলে একটি নোটিশ রেন্ডার করি:

const speechRecognitionSupported =
  SpeechRecognition.browserSupportsSpeechRecognition();

if (!speechRecognitionSupported) {
  return <div>Your browser does not support speech recognition.</div>;
}

পরবর্তী, এর নিষ্কাশন করা যাক transcript এবং resetTranscript থেকে useSpeechRecognition() হুক:

const { transcript, resetTranscript } = useSpeechRecognition();

যে রাষ্ট্র পরিচালনা করে তার জন্য এটি আমাদের প্রয়োজন listening:

const [listening, setListening] = useState(false);

আমরা একটি প্রয়োজন ref জন্য div সাথে contentEditable বৈশিষ্ট্য, তারপর আমাদের যোগ করতে হবে ref এটি এবং পাস বৈশিষ্ট্য transcript as children:

const textBodyRef = useRef(null);

…এবং:

<div
  className="words"
  contentEditable
  ref={textBodyRef}
  suppressContentEditableWarning={true}
  >
  {transcript}
</div>

আমাদের এখানে শেষ জিনিসটি প্রয়োজন একটি ফাংশন যা স্পিচ রিকগনিশনকে ট্রিগার করে এবং সেই ফাংশনটিকে টাই করতে onClick আমাদের বোতাম ইভেন্ট শ্রোতা. বোতাম শুনতে সেট করে true এবং এটি ক্রমাগত চালায়। অতিরিক্ত ইভেন্টগুলি বন্ধ করতে আমাদের প্রতিরোধ করতে আমরা বোতামটি সেই অবস্থায় থাকাকালীন অক্ষম করব৷

const startListening = () => {
  setListening(true);
  SpeechRecognition.startListening({
    continuous: true,
  });
};

…এবং:

<button
  type="button"
  onClick={startListening}
  style={{ "--bgColor": "blue" }}
  disabled={listening}
>
  Start
</button>

বোতামে ক্লিক করলে এখন ট্রান্সক্রিপশন শুরু করা উচিত।

আরও ফাংশন

ঠিক আছে, তাই আমরা একটি উপাদান আছে যে করতে পারেন শুরু শোনা কিন্তু এখন আমরা এটি প্রয়োজন হিসাবে ভাল কিছু অন্যান্য জিনিস করতে, যেমন stopListening, resetText এবং handleConversion. এর যারা ফাংশন করা যাক.

const stopListening = () => {
  setListening(false);
  SpeechRecognition.stopListening();
};

const resetText = () => {
  stopListening();
  resetTranscript();
  textBodyRef.current.innerText = "";
};

const handleConversion = async () => {}

প্রতিটি ফাংশন একটি যোগ করা হবে onClick উপযুক্ত বোতামে ইভেন্ট শ্রোতা:

<button
  type="button"
  onClick={stopListening}
  style={{ "--bgColor": "orange" }}
  disabled={listening === false}
>
  Stop
</button>

<div className="button-container">
  <button
    type="button"
    onClick={resetText}
    style={{ "--bgColor": "red" }}
  >
    Reset
  </button>
  <button
    type="button"
    style={{ "--bgColor": "green" }}
    onClick={handleConversion}
  >
    Convert to pdf
  </button>
</div>

সার্জারির handleConversion ফাংশন অ্যাসিঙ্ক্রোনাস কারণ আমরা অবশেষে একটি API অনুরোধ করব। "স্টপ" বোতামে একটি অক্ষম বৈশিষ্ট্য রয়েছে যা শোনা মিথ্যা হলে ট্রিগার করা হবে।

যদি আমরা সার্ভার রিস্টার্ট করি এবং ব্রাউজার রিফ্রেশ করি, আমরা এখন ব্রাউজারে আমাদের স্পিচ ট্রান্সক্রিপশন শুরু করতে, বন্ধ করতে এবং রিসেট করতে পারি।

এখন আমাদের যা দরকার তা হল অ্যাপটির জন্য নকল করা এটি একটি পিডিএফ ফাইলে রূপান্তর করে স্বীকৃত বক্তৃতা। এর জন্য, আমাদের Express.js থেকে সার্ভার-সাইড পাথ প্রয়োজন।

API রুট সেট আপ করা হচ্ছে

এই রুটের উদ্দেশ্য হল একটি টেক্সট ফাইল নেওয়া, এটিকে পিডিএফে রূপান্তর করা, সেই পিডিএফটি আমাদের ফাইল সিস্টেমে লিখুন, তারপর ক্লায়েন্টকে একটি প্রতিক্রিয়া পাঠান।

সেটআপ করতে, আমরা খুলব server/index.js ফাইল এবং আমদানি করুন html-pdf-node এবং fs নির্ভরতা যা আমাদের ফাইল সিস্টেম লিখতে এবং খুলতে ব্যবহার করা হবে।

const HTMLToPDF = require("html-pdf-node");
const fs = require("fs");
const cors = require("cors)

পরবর্তী, আমরা আমাদের রুট সেটআপ করব:

app.use(cors())
app.use(express.json())

app.post("/", (req, res) => {
  // etc.
})

তারপরে আমরা ব্যবহার করার জন্য প্রয়োজনীয় আমাদের বিকল্পগুলি সংজ্ঞায়িত করতে এগিয়ে যাই html-pdf-node রুটের ভিতরে:

let options = { format: "A4" };
let file = {
  content: `<html><body><pre style='font-size: 1.2rem'>${req.body.text}</pre></body></html>`,
};

সার্জারির options বস্তু কাগজের আকার এবং শৈলী সেট করার জন্য একটি মান গ্রহণ করে। কাগজের আকারগুলি আমরা সাধারণত ওয়েবে যে সাইজিং ইউনিটগুলি ব্যবহার করি তার থেকে অনেক আলাদা সিস্টেম অনুসরণ করে৷ উদাহরণ স্বরূপ, A4 হল সাধারণ অক্ষরের আকার.

সার্জারির file অবজেক্ট একটি সর্বজনীন ওয়েবসাইটের URL বা HTML মার্কআপ গ্রহণ করে। আমাদের এইচটিএমএল পৃষ্ঠা তৈরি করার জন্য, আমরা ব্যবহার করব html, body, pre এইচটিএমএল ট্যাগ এবং টেক্সট থেকে req.body.

আপনি আপনার পছন্দের যে কোনও স্টাইলিং প্রয়োগ করতে পারেন।

পরবর্তী, আমরা একটি যোগ করব trycatch পথ ধরে পপ আপ হতে পারে যে কোনো ত্রুটি পরিচালনা করতে:

try {

} catch(error){
  console.log(error);
  res.status(500).send(error);
}

পরবর্তী, আমরা ব্যবহার করব generatePdf থেকে html-pdf-node একটি তৈরি করতে লাইব্রেরি pdfBuffer (কাঁচা পিডিএফ ফাইল) আমাদের ফাইল থেকে এবং একটি অনন্য তৈরি করুন pdfName:

HTMLToPDF.generatePdf(file, options).then((pdfBuffer) => {
  // console.log("PDF Buffer:-", pdfBuffer);
  const pdfName = "./data/speech" + Date.now() + ".pdf";

  // Next code here
}

সেখান থেকে, আমরা ফাইল সিস্টেম মডিউলটি লিখতে, পড়তে এবং (হ্যাঁ, অবশেষে!) ক্লায়েন্ট অ্যাপে একটি প্রতিক্রিয়া পাঠাতে ব্যবহার করি:

fs.writeFile(pdfName, pdfBuffer, function (writeError) {
  if (writeError) {
    return res
      .status(500)
      .json({ message: "Unable to write file. Try again." });
  }

  fs.readFile(pdfName, function (readError, readData) {
    if (!readError && readData) {
      // console.log({ readData });
      res.setHeader("Content-Type", "application/pdf");
      res.setHeader("Content-Disposition", "attachment");
      res.send(readData);
      return;
    }

    return res
      .status(500)
      .json({ message: "Unable to write file. Try again." });
  });
});

আসুন এটিকে কিছুটা ভেঙে দেওয়া যাক:

  • সার্জারির writeFile ফাইলসিস্টেম মডিউল একটি ফাইলের নাম, ডেটা এবং একটি কলব্যাক ফাংশন গ্রহণ করে যা ফাইলটিতে লিখতে সমস্যা হলে একটি ত্রুটি বার্তা প্রদান করতে পারে। আপনি যদি এমন একটি CDN এর সাথে কাজ করছেন যা ত্রুটির শেষ পয়েন্ট প্রদান করে, আপনি পরিবর্তে সেগুলি ব্যবহার করতে পারেন।
  • সার্জারির readFile ফাইল সিস্টেম মডিউল একটি ফাইলের নাম এবং একটি কলব্যাক ফাংশন গ্রহণ করে যা সক্ষম বা একটি পঠিত ত্রুটির পাশাপাশি পঠিত ডেটা ফেরত দেয়। একবার আমাদের পড়ার কোনো ত্রুটি না থাকলে এবং পঠিত ডেটা উপস্থিত হলে, আমরা ক্লায়েন্টকে একটি প্রতিক্রিয়া তৈরি করব এবং পাঠাব। আবার, এটি আপনার CDN এর শেষ পয়েন্ট দিয়ে প্রতিস্থাপন করা যেতে পারে যদি আপনার কাছে থাকে।
  • সার্জারির res.setHeader("Content-Type", "application/pdf"); ব্রাউজারকে বলে যে আমরা একটি পিডিএফ ফাইল পাঠাচ্ছি।
  • সার্জারির res.setHeader("Content-Disposition", "attachment"); ব্রাউজারকে প্রাপ্ত ডেটা ডাউনলোডযোগ্য করতে বলে।

যেহেতু API রুট প্রস্তুত, আমরা এটি আমাদের অ্যাপে ব্যবহার করতে পারি http://localhost:4000. আমরা সম্পূর্ণ করার জন্য আমাদের আবেদনের ক্লায়েন্ট অংশে এগিয়ে যেতে পারি handleConversion ফাংশন.

রূপান্তর পরিচালনা করা

আমরা একটি কাজ শুরু করার আগে handleConversion ফাংশন, আমাদের এমন একটি অবস্থা তৈরি করতে হবে যা লোডিং, ত্রুটি, সাফল্য এবং অন্যান্য বার্তাগুলির জন্য আমাদের API অনুরোধগুলি পরিচালনা করে। আমরা প্রতিক্রিয়া ব্যবহার করতে যাচ্ছি useState এটি সেট আপ করার জন্য হুক:

const [response, setResponse] = useState({
  loading: false,
  message: "",
  error: false,
  success: false,
});

মধ্যে handleConversion ফাংশন, আমরা আমাদের কোড চালানোর আগে ওয়েব পৃষ্ঠাটি কখন লোড হয়েছে তা পরীক্ষা করব এবং নিশ্চিত করব div সাথে editable বৈশিষ্ট্য খালি নয়:

if (typeof window !== "undefined") {
const userText = textBodyRef.current.innerText;
  // console.log(textBodyRef.current.innerText);

  if (!userText) {
    alert("Please speak or write some text.");
    return;
  }
}

আমরা আমাদের শেষ এপিআই অনুরোধকে এ র‌্যাপ করে এগিয়ে যাই trycatch, দেখা দিতে পারে এমন কোনো ত্রুটি পরিচালনা করা এবং প্রতিক্রিয়া অবস্থা আপডেট করা:

try {

} catch(error){
  setResponse({
    ...response,
    loading: false,
    error: true,
    message:
      "An unexpected error occurred. Text not converted. Please try again",
    success: false,
  });
}

এর পরে, আমরা প্রতিক্রিয়া অবস্থার জন্য কিছু মান সেট করি এবং এর জন্য কনফিগারও সেট করি axios এবং সার্ভারে একটি পোস্ট অনুরোধ করুন:

setResponse({
  ...response,
  loading: true,
  message: "",
  error: false,
  success: false,
});
const config = {
  headers: {
    "Content-Type": "application/json",
  },
  responseType: "blob",
};

const res = await axios.post(
  "http://localhost:4000",
  {
    text: textBodyRef.current.innerText,
  },
  config
);

একবার আমরা একটি সফল প্রতিক্রিয়া পেয়ে গেলে, আমরা উপযুক্ত মান সহ প্রতিক্রিয়া স্থিতি সেট করি এবং প্রাপ্ত পিডিএফ ডাউনলোড করার জন্য ব্রাউজারকে নির্দেশ দিই:

setResponse({
  ...response,
  loading: false,
  error: false,
  message:
    "Conversion was successful. Your download will start soon...",
  success: true,
});

// convert the received data to a file
const url = window.URL.createObjectURL(new Blob([res.data]));
// create an anchor element
const link = document.createElement("a");
// set the href of the created anchor element
link.href = url;
// add the download attribute, give the downloaded file a name
link.setAttribute("download", "yourfile.pdf");
// add the created anchor tag to the DOM
document.body.appendChild(link);
// force a click on the link to start a simulated download
link.click();

এবং আমরা নিম্নলিখিত বিষয়বস্তু সম্পাদনাযোগ্য ব্যবহার করতে পারি div বার্তা প্রদর্শনের জন্য:

<div>
  {response.success && <i className="success">{response.message}</i>}
  {response.error && <i className="error">{response.message}</i>}
</div>

চূড়ান্ত কোড

আমি GitHub-এ সবকিছু প্যাকেজ করেছি যাতে আপনি সার্ভার এবং ক্লায়েন্ট উভয়ের জন্য সম্পূর্ণ সোর্স কোডটি পরীক্ষা করতে পারেন।

সময় স্ট্যাম্প:

থেকে আরো সিএসএস কৌশল