Copy Translations

[IsaiahPaget]

Added the ability to 'copy from' one language to another, this will aid users workflow because they will be able to see the structure of what they wrote in one language and make tweaks to it inline rather than manually copying or maybe even trying to remember what they wrote.

The original issue(90) was just about the repeater, but this PR includes this functionality for every ML formwidget.

I also updated the readme for some clearer examples of accessing json attributes on models.

[AIC-BV]

Very nice,
Very fast,
Very intuïtive

It's very easy to use and works very fast.
I am a big fan. Especially for the grouped repeaters (though they take a bit longer). Amazing!

[AIC-BV]

IDEA

---

Currently, switching languages at once works well while holding down CTRL.
Perhaps the same could be done to copy all field values at once.

In this stage, since it is not auto translated, copying fields is perhaps not ideal (except for repeaters).
But once the auto translations are in place it would allow to instantly translate the entire record, and you would only need to adjust some words or sentences to your preference.

[AIC-BV]

FIXED

• The offset is adjusted

---

The mediafinder field has wrong popup offset

[AIC-BV]

IDEA

---

On a sidenote, we add the same image for each language for SEO purposes.
For example

• /nl/afbeelding.jpg
• /en/image.jpg
• /fr/photo.jpg

When copying an image field to another language, it would be great, in our case, to:

• Automatically duplicate the image
• Translate the filename/path. It could be in a root-folder nl/en/fr , or in the same folder

[AIC-BV]

FIXED

• A confirmation popup will show "Are you sure?"

---

When clicking "Copy from English", it copies as it should.
But if you clicked it by accident you cannot use "Copy from Nederlands" (because the value has been replaced by the English one)

It would perhaps be a nice safety fallback to be able to refetch the data from the database column since the value is not yet overwritten/saved. (or data-attribute 'original' holding the original data or something so you don't have to query the DB)

[AIC-BV]

FIXED

• Buttons disappear when focussing the field

---

Perhaps some more padding on the textarea's so that the text is more/better visible

[AIC-BV]

FIXED

• You can disable this through a config

---

For me it doesn't really matter, but what if you do not want this functionality?
I remember @mjauvin being sceptical about this?

Should this be a seperate plugin extending Winter.Translate?
Or should this be enabled in a config file?

[IsaiahPaget]

@AIC-BV Looks like the padding issue in the textarea is pretty straightforward, and the spacing on the mediafinder. So I will go ahead and just make those adjustments.

@LukeTowers I know you are on vacation, but when you get back, I am happy to discuss some of the other feature requests, the accidentally copying thing, is I think a decent quality of life improvement. Because you do run the risk of writing a bunch of stuff without saving, then accidentally copying, and now you have to refresh the page, loosing all your progress. Maybe a simple warning pop-up: "Are you sure you want to copy?"

[IsaiahPaget]

Perhaps some more padding on the textarea's so that the text is more/better visible

Would this be better to have transparency, what do you think?

[IsaiahPaget]

@AIC-BV I fixed the overlap and the wrong dropdown positioning, do you wanna have another try at this branch see if it's working as expected? :)

[AIC-BV]

@AIC-BV I fixed the overlap and the wrong dropdown positioning, do you wanna have another try at this branch see if it's working as expected? :)

Position is fixed!

But the overlap is still there?
Would say it would need atleast 4.5rem padding-right

.field-multilingual.field-multilingual-textarea textarea {
    padding-right: 4.75rem;
}

[IsaiahPaget]

@AIC-BV I fixed the overlap and the wrong dropdown positioning, do you wanna have another try at this branch see if it's working as expected? :)

Position is fixed!

But the overlap is still there? Would say it would need atleast 4.5rem padding-right

.field-multilingual.field-multilingual-textarea textarea {
    padding-right: 4.75rem;
}

Ohh I am sorry I see what you mean, I was thinking you were just talking about the rich editor as per your previous screenshot, so thats what I changed, did you try that? The text area doesn't show the translate stuff when you are typing in it right, so I figured that was ok to leave the same. @LukeTowers what do you think? We could use the same button styling that is on the repeater and the editors on the textarea?

[AIC-BV]

We could use the same button styling that is on the repeater and the editors on the textarea?

I see what you did there.
I'm not opposed to the idea but I think the color & size should be changed.

It would also be nice if it was a solution for all translatable fields so that everything has the same style

@mjauvin what do you think about moving the buttons to the top to avoid overlap with the text?

[LukeTowers]

@mjauvin could you elaborate on that? What are your objections to having it enabled always and / or by default?

[mjauvin]

@mjauvin could you elaborate on that? What are your objections to having it enabled always and / or by default?

In my opinion, if the functionality is not going to be used for specific people, it will clutter the UI more than it already does.

I don't really mind if it's on by default (as long as it can easily be changed programatically), but I really want this as an optional feature.

[AIC-BV]

@AIC-BV If you could source some existing examples of user interfaces for handling the machine translation from a content editor perspective that would be helpful in designing the feature.

RESEARCH

My Logitech mouse has some software that opens on one of the button clicks and looks like this

It basically allows to add some instructions (edit it inline or use a prefab-recipe on the left)

Then it sends the prompt + input + optional parameters to ChatGPT website itself.
In our case it would save the reply in the database instead.

To conclude, it needs an input for a prompt (or predefined prompt in settings) and the other input is the field you are auto-translating.

ANSWER TO YOUR QUESTION

So if this answers your question; a simple suggestion of how it could look like for a Field to Field translation is this;
Instead of a confirmation popup "Are you sure?"
It will show an "Instructions" popup. If you press "Translate", you are sure.

• The prompt is optional
• The input is already defined (the field you are copying)
• The parameters are written by us behind the screen. A repeater prompt will be different than a textarea prompt (see example grouped repeater prompt above)

If translating an entire model at once is easy/easier/better
It would have a button near the top (or next to the save buttons?), showing the same popup but it will do multiple requests: one per column. Perhaps you could check/uncheck columns like you can do on an export controller.
If this would work and already give the correct translations for 90% it will be a massive timesaver for content editor:

1. They didn't have to duplicate a (grouped) repeater structure which can take a very long time because I have many options
2. The text will already have a nice translation that might only need some tweaking
3. Adding a new language to a big website will be so quick compared to manual labor

This is just an idea of how I imagined it, feel free to share your ideas
I will get back to you on this in a week or two because my collegue is on holliday

LIVE EXAMPLE

An example of a ChatGPT translated grouped repeater (block per block) without any spelling/content check (I just pasted the result without checking it to get started quickly): https://www.maatkastenonline.be/en/our-closets/laundry-closet

This costed me 45 minuts to manually find out the prompt (which probably took around 25-30 minuts) and send it block per block to ChatGPT. I imagine if you do this manually, with rebuilding the grouped repeater content, it would take atleast 5-hours of boring monkey labor.

I am no English expert but I think this demonstrates the power of auto-translating and I cannot imagine this not to be a popular translation extension.
The blog might need some tweaking, it might not. This will be checked within 2 weeks after the vacation.
With an extra instruction I probably should've said to use 'closet' instead of 'cabinet' because thats the word we try to use most of the time but ChatGPT translated it to 'cabinet' by default.

IDEA

---

So maybe it needs a:

1. Settings field with default user prompt rules
   This counts for every single auto-translation. For example: 'cabinet' should be translated to 'closet' instead
2. Settings field with predefined prompt rules by WinterCMS
   Which cannot be edited but viewed only? Because you don't want people asking the same question every day trying to figure out what is going on.
   We only want JSON code or text as an answer. No ChatGPT explanation text (is this even possible? Perhaps with the right prompt?)
3. 'Live' input field with additional prompt rules (the optional instructions defined in the popup while translating)

All three prompt fields will be merged in to a single prompt + the content that is selected for translation.

It is up to the user to define the right prompts for the right answer.
With the user defined prompt it could perhaps cancel out one or multiple items of the default WinterCMS prompt by default (if that won't make ChatGPT to go tilt with instructions telling to ignore other instructions)

[AIC-BV]

@LukeTowers Can you still see the forest through the trees? 😅
Feel free to share your ideas/suggestions!

[mjauvin]

@IsaiahPaget using this PR in version 2.3.1, the placement for the language selector / copyfrom button is all over the place... what am I missing?

Also, there should have been an entry added to the config to show how to disable the copyfrom... I see it in the code, but no mention in the config file.

[mjauvin]

Somehow, I had to force my browser to clear its cache to get the new multilingual CSS... not sure why as the addCss() call uses the plugin name, which should have used the new plugin version (which should have forced the new css file to get fetched)...

All working fine now.

[mjauvin]

Ok, brain cramp: forgot to run artisan migrate... all good, sorry for the noise!