React translation error

[escottgoodwin]

I created a new react app with create react app and then just copied over the App.js and worker.js (and lint file) from your react translator example with the nllb-200-distilled-600M model.

However, I get the model loading error - 'Unexpected token '<', "<!DOCTYPE "... is not valid JSON'

Not sure what the issue is.

[xenova]

This is most likely because it is trying to load the models locally first, and I assume you didn't download the model files from here? You can check this by inspecting the requests made from your network tab.

If you don't want to host the models locally, then you can add the following code to worker.js:

import { pipeline, env } from "@xenova/transformers";

// Disable local models
env.allowLocalModels = false;

Edit: That said, it probably makes sense to include this in the demo :)

[escottgoodwin]

You mean pre-download them? I used the exact same worker file as your example. How does that work and why is this not working in my app. Is there a difference between your example code and a basic new react app?

…

On Fri, Jun 9, 2023 at 9:59 AM Joshua Lochner ***@***.***> wrote: This is most likely because it is trying to load the models locally first, and I assume you didn't download the model files from here <https://huggingface.co/Xenova/nllb-200-distilled-600M/tree/main>? You can confirm this by inspecting your network tab. If you don't want to host the models locally, then you can add the following code to worker.js: import { pipeline, env } from ***@***.***/transformers"; // Disable local modelsenv.allowLocalModels = false; — Reply to this email directly, view it on GitHub <#142 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFZCSEJDWTHDXPZ5LUO5N5DXKNJATANCNFSM6AAAAAAZA4INA4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[escottgoodwin]

here is the code: https://github.com/escottgoodwin/transformer_translate

…

On Fri, Jun 9, 2023 at 9:59 AM Joshua Lochner ***@***.***> wrote: This is most likely because it is trying to load the models locally first, and I assume you didn't download the model files from here <https://huggingface.co/Xenova/nllb-200-distilled-600M/tree/main>? You can confirm this by inspecting your network tab. If you don't want to host the models locally, then you can add the following code to worker.js: import { pipeline, env } from ***@***.***/transformers"; // Disable local modelsenv.allowLocalModels = false; — Reply to this email directly, view it on GitHub <#142 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFZCSEJDWTHDXPZ5LUO5N5DXKNJATANCNFSM6AAAAAAZA4INA4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[xenova]

I used the exact same worker file as your example. How does that work and
why is this not working in my app. Is there a difference between your
example code and a basic new react app?

The default behaviour is to first try the local model files, and then fallback to remote model files (if local models are not found). You can you open your network tab in the browser to make sure that the fallback request is made. So, assuming your other code is correct, it should have the same behaviour. As mentioned above, you can override this by setting env.allowLocalModels=false.

[xenova]

Please confirm whether this is still an issue, or did the above setting fix this?

[escottgoodwin]

I just switched to developing in vite. I think it has something to do with different handling of environment variables in vite and cra apps.

…

On Wed, Jun 21, 2023 at 1:54 PM Joshua Lochner ***@***.***> wrote: Please confirm whether this is still an issue, or did the above setting fix this? — Reply to this email directly, view it on GitHub <#142 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFZCSELJ2PV2IN4PXVR5JMDXMNNQTANCNFSM6AAAAAAZA4INA4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[xenova]

Gotcha! 👍 iirc, create-react-app has been deprecated, and I've been loving using vite lately! So, I'll close this issue for now, but feel free to reopen or create a new issue if you have any other questions.

[jonnykry]

Wanted to comment to add that I also ran into this issue using create-react-app. Tried running with env.allowLocalModels = false; to no avail. This is from running similar code to the examples provided.

Here's the full error in case it's helpful:

VM110:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at getModelJSON (hub.js:532:1)
    at async Promise.all (:3000/index 1)
    at async loadTokenizer (tokenizers.js:50:1)
    at async AutoTokenizer.from_pretrained (tokenizers.js:3205:1)
    at async Promise.all (:3000/index 0)
    at async pipeline (pipelines.js:1524:1)
    at async doAsync (SpeechToText.js:8:1)

Had no clue CRA was deprecated, today I learned. Will give Vite a go, though I am a bit curious about this issue.

[Swaraj9]

Hello, I've been getting the same error. Initially I was using create-react-app but switched to vite after seeing this thread, but still getting the same error. I also tried the nextJS example but received the same error there as well.

[iamsorenl]

I have been unable to work around this issue locally but once I hosted it (I opted for firebase) the issue went away.

[erkkimon]

Same here, I tried with Ionic / React / Vite, but got this same error. Here is the simple component which causes incalid JSON error:

import './ExploreContainer.css';
import { pipeline, env } from '@xenova/transformers';
import { IonButton } from '@ionic/react';

env.allowRemoteModels = true;

interface ContainerProps { }

const ExploreContainer: React.FC<ContainerProps> = () => {
  const handleClick = async () => {

    let translator = await pipeline('translation', 'Xenova/nllb-200-distilled-600M');

    let result = await translator('I like to walk my dog.', {
      src_lang: 'eng_Latn',
      tgt_lang: 'ell_Grek'
    });

    let result2 = await translator(result[0].translation_text, {
      src_lang: 'ell_Grek',
      tgt_lang: 'eng_Latn'
    });
  }
  return (
    <div id="container">
      <IonButton onClick={handleClick}>Hello</IonButton>
    </div>
  );
};

export default ExploreContainer;

[xenova]

@erkkimon As stated above, please try:

env.allowLocalModels=false;

Note that you need to clear browser clash.

[erkkimon]

@xenova Thanks! I also tried that one but it didn't help alone. This code was one of my multiple approaches. :)

However, just as a note for everyone who bumps into this ticket, the solution seems to be in this ticket.

So for the record, I tried Ionic / Vite / React, NextJS and pure React (npx create-react-app), and I always bumped into the same problem. In all those cases the solution from the linked ticket seems to work:

env.allowLocalModels = false;
env.useBrowserCache = false;

This is obviously a workaround as stated in the linked ticket, but it works well as a temporary fix. At least it makes developing apps possible until there is a solution which doesn't force user to download the model every time again.

Thanks @xenova for developing this great library and I guess this problem will be fixed as people dig deeper into the problem in the linked ticket.

Cheers!

[xenova]

@erkkimon Can you please detail how you are ensuring that browser cache has been emptied (without setting env.useBrowserCache = false;)? My suspicion is that you are not doing it correctly. It should be:

1. Open devtools
2. Go to "Application" tab
3. Go to "Storage"
4. Click "Clear site data"

[erkkimon]

That did the trick, thanks @xenova! No need to disable cache anymore.

[vishwajeetraj11]

Thanks @xenova

[adrianlyjak]

pretty sure what happens here is that vite's dev server has the somewhat annoying behavior of serving index.html for all unhandled request paths, rather than 404ing. It's somewhat difficult to disable. What makes this even messier with transformers, is that first request for the html response gets cached, so its somewhat hard to debug, since it stops showing up in the network log after the first request. Perhaps would be neat if transformers.js purged the cache if it failed to parse the json and proceeded to download from huggingface

[gandli]

I also encountered this problem. At present, it seems that adding two lines in src\worker.js is effective：

import { pipeline, env  } from '@xenova/transformers';
env.allowLocalModels = false;
env.useBrowserCache = false;

……