skip to Main Content

Good evening,
Today I’ve encountered a question/problem. I’ll get right into it. So basically I have form which is used to create meal. Meal table (migration) looks like this:

$table->uuid('id')->primary();
$table->uuid('restaurant_id')->nullable();
$table->string('name_lt', 100);
$table->string('name_en', 100);
$table->string('name_ru', 100);
$table->smallInteger('prep_time');
$table->string('image', 150);
$table->boolean('visibility')->default(0);
$table->boolean('deleted')->default(0);
$table->timestamps();

$table->foreign('restaurant_id')->references('id')->on('restaurants')->onDelete('cascade');

Aside the there’s tons of other stuff, like ingredients and stuff, which are related to that specific meal. In the form page I have 3 different forms for different languages that is my native lithuanian, english and russian. There is tab buttons for changing form to other language, all it does is just hide current form and show another (there is 3 identical forms in 1 page).

What I’m trying to achieve is if I fill in lithuanian language’s inputs, I want english and russian inputs to be filled also (that can be achieved with jquery or javascript change function), but it should fill in translated text.

Simple example:
In first form I fill in text name_lt = 'Obuolys', so name_en and name_ru should get filled too, but in different language, in this case name_en = 'Apple', name_ru = 'яблоко'

I never used translation api’s so I’m wondering what would be the best way, I’m thinking of using DeepL as it is quite cheap.
If someone could give me some advices or simple example would be nice, I could follow on from that.

2

Answers


  1. If you want to use javascript, you could use a button’s click event to fill out the other fields before submiting the form. If I understand it correctly you have 3 forms (1 per tab).

    You could do something like this for each form.

    <form id="form-lt" method="post">
        @csrf
        <input name="name_lt">
        <input type="hidden" name="name_en">
        <input type="hidden" name="name_ru">
    
        {{-- Not a true submit button --}}
        <button id="button-lt type="button">Submit</button>
    </form>
    

    Given a function that takes text input, the original language and the language you want to translate

    async function translate(text, from_language, to_language) {
        const response = await fetch(...);
        const data = await response.json();
        // get translated text from data
        return translated_text;
    }
    

    The js part could look like this

    const button_lt = document.getElementById('button-lt');
    
    button_lt.addEventListener('click', async event => {
        const form = event.target.form;
        const lt_value = form.querySelector('[name=name_lt]').value;
        const en_input = form.querySelector('[name=name_en]');
        const ru_input = form.querySelector('[name=name_ru]');
    
        en_input.value = await translate(lt_value, 'lt', 'en');
        ru_input.value = await translate(lt_value, 'lt', 'ru');
    
        form.submit();
    });
    

    Alternatively, if you want to do it server-side, you could try to call whatever translation API you end up using using the Http facade provided by laravel before validating the input data or before saving the model to the database.

    Login or Signup to reply.
  2. Are you using PHP or javascript?

    DeepL offers a NodeJS library (for the backend) and a PHP library to easily allow you to translate. For example, to translate in PHP, you can use the following snippet after installing the library:

    $authKey = "f63c02c5-f056-..."; // Replace with your key
    $translator = new DeepLTranslator($authKey);
    
    $result = $translator->translateText('Hello, world!', null, 'fr');
    echo $result->text; // Bonjour, le monde!
    

    To perform this when your users fill in some text, you will need to write the appropriate Laravel code. Please note that it is not safe to do this in the frontend, as it requires you to expose your $authKey.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search