গুগল ট্রান্সলেট এর মতো ওয়েবসাইট তৈরী করুন আপনিও

হ্যালো টেক লাভারসআবারো ফিরে এলাম নতুন একটি টিউটোরিয়াল নিয়েআজকের বিষয় হলো, কীভাবে গুগল ট্রান্সলেট এর মতো একটি ট্রান্সলেটর ওয়েবপেইজ বানাতে হয়? এর মাধ্যমে যে কোনো ভাষা আপনার বোধগম্য ভাষায় ট্রান্সলেট করতে পারবেন

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


ধরে নিচ্ছি, আপনার নিজের একটি ওয়েবসাইট আছে, না থাকলেও সমস্যা নেইআপনি এই ট্রান্সলেটর .html ফাইলে সেভ করে ব্যবহার করতে পারবেনতবে HTML ফাইলে সেভ করলে আপনি ছাড়া এটি অন্য কেউ ব্যবহার করতে পারবে নানিচে ধাপ অনুসারে সব কিছু বর্ণনা করেছিআশা করি বুঝতে কোনো সমস্যা হবে না
  • প্রথমে নিচে দেয়া এইচটিএমএল কোডগুলো কপি করে আপনার ওয়েবসাইটের যেই পেইজে ট্রান্সলেটরটি দেখাতে চান, সেখানে পেস্ট করুন 
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    <meta name=viewport content="width=device-width, initial-scale=1.0" charset=utf-8 />
    <script src="https://nguyenthanh1995.github.io/my.js"></script>
    <script src="https://nguyenthanh1995.github.io/lib/vue.min.js"></script>
    <link rel=stylesheet href="https://nguyenthanh1995.github.io/lib/awesome/css/all.min.css"></link>
    <link rel=stylesheet href="https://nguyenthanh1995.github.io/lib/bootstrap.min.css"></link>
    <style>
    
    </style>
    </head>
    <body>
    <div class='card bg-primary text-white'>
        <div class=card-header>
            <span class='h5 text-center'>
               R-Translator
            </span>
        </div>
        <div class='card-body container'>
            <div class='row header flex'>
                <div class='w-max col-5'>
                    <select-lang v-model=from>
                </div>
                <div class='w-max reverse col-2' @click=reverse>                                <i class=fa>
    <i class='fa-arrow-left'></i>
        <br>
    <i class='fa-arrow-right'></i>
                    </i>
                </div>
                <div class='w-max col-5'>
                    <select-lang v-model=to>
                </div>
            </div>
            <div class='row body'>
                <div class='input-group'>
                    <textarea class=form-control placeholder='Enter text' rows=5 v-model=input></textarea>
                    <div class=input-group-append @click=translate>
                        <span class=input-group-text v-html=completeToIcon>
<!-- arrow-->
<i class='fas fa-arrow-alt-circle-right ft-20'></i></span>
                    </div>
                </div>
                <div class='alert alert-primary w-100 h-134px'>
                    {{output}}
                </div>
            </div>
            <div class='row footer text-light'>
Translate App by Shahariar Rijon
            </div>
        </div>
      </div>
</body>
</html>
  • এরপর নিচের সিএসএস কোডটি  <styleট্যাগের নিচে পেস্ট করে দিন
* {
    margin: 0;
    padding: 0;
}
.flex {
    display: flex !important;
}
.w-max:nth-child(1), .w-max:nth-child(3) {
    width: 45%;
    padding: .5em 0.2em .5em 0.2em;
}
.w-max:nth-child(2) {
    width: 10%;
    padding: .5em 0.2em .5em 0.2em;
}
.h-134px {
    height: 134px;
}
.ft-20 {
    font-size: 20px !important;
}
.rtt {
    -webkit-animation: rtt 1.5s linear infinite;
}
@-webkit-keyframes rtt {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}
.reverse i {
    font-style: normal;
}
.reverse {
    text-align: center;
    line-height: 200%;
}
textarea:focus {
    box-shadow: 0 0 0 .2rem rgba(100, 255, 0,.25) !important;
}
  • এখন নিচের ট্যাগের ভেতরে থাকা কোডগুলো </body> ট্যাগের উপরে পেস্ট করে দিন

<script>
my().ready(loaded)
var url = "https://translate.yandex.net/api/v1.5/tr.json/translate";
var keyAPI = "trnsl.1.1.20190805T120232Z.0523a6991fcd184f.75d91c8953614377173228e9fc61b57678c66d4e";
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
xhr.open('get', 'https://nguyenthanh1995.github.io/json/lang.json', false)
xhr['onreadystatechange'] = function () {
if(this.readyState == 4)
window.json = this.responseText;
}
xhr.send()
var json = JSON.parse(json)[0].sort()
Vue.component('select-lang', {
data: function () {
return {
clas: 'custom-select'
}
},
template:
'<select class="custom-select" @change="$emit(\'input\', $event.target.value)" :value="value">' +
'<option v-for="lang in $root.lang" :value=lang.code :label=lang.name>{{lang.name}} ({{lang.nativeName}})</option>' +
'</select>',
props: ['value']
})
function loaded() {
new Vue({
el: '.container',
data: {
lang: json,
output: '',
input: '',
from: 'en',
to: 'vi',
status: 'wait'
},
methods: {
translate: function () {
var that = this
this.status = 'load'
my.ajax({
url: url,
type: 'post',
data: {
key: keyAPI,
text: this.input || ' ',
lang: this.from + '-' + this.to
},
successFull: function (r) {
that.output = JSON.parse(r).text[0]
},
error: function () {
console.log('Connect to server failed! Please check your connect to internet')
},
completed: function () {
that.status = 'wait'
},
timeout: 3e4
})
},
reverse: function () {
var co = this.from
this.from = this.to
this.to = co
}
},
computed: {
completeToIcon: function () {
return this.status == 'wait' ? "<i class='fas fa-arrow-alt-circle-right ft-20'></i>" : "<i class='fas fa-atom ft-20 rtt'></i>"
}
}
})
}
</script>

এবার নিজের ওয়েবপেইজ বা HTML ফাইল যেকোনো ওয়েব ব্রাউজার দিয়ে ভিজিট করে দেখুনখেয়াল রাখবেন, ইন্টারনেট কানেকশন যেনো চালু থাকে, নাহলে কোড ঠিকমতো রান করবে নাএখন আপনার বানানো ট্রান্সলেটর টি পরীক্ষা করার পালানিচে কিছু ডেমো ফটো দিয়ে দিয়েছি, চাইলে দেখে নিতে পারেন





সবসময় ট্রান্সলেটরটি সঠিক অনুবাদ দেখাতে পারে নাতবুও আমি এর থেকে মোটামোটি ভালো আউটপুট পেয়েছি 
পোস্টটি কেমন লাগলো জানাতে ভুলবেন নাআগামীতে এরকম আরো অনেক টিউটোরিয়াল পেতে আমার ব্লগের সাথেই থাকুনধন্যবাদ

Post a Comment

0 Comments