Xenova

/

slimsam-77-uniform

like 12

Hi there - do you maybe have any error logs you can share?

both parcel and vite show this message

import { useEffect } from 'react'
import { SamModel, AutoProcessor, RawImage } from '@xenova/transformers'

import { AutoModel, AutoTokenizer } from '@xenova/transformers';

export default function Component () {
  useEffect(() => {
    ;(async () => {
      try {
        // let tokenizer = await AutoTokenizer.from_pretrained('Xenova/bert-base-uncased');
        // let model = await AutoModel.from_pretrained('Xenova/bert-base-uncased');

        // let inputs = await tokenizer('I love transformers!');
        // let { logits } = await model(inputs);


        const model = await SamModel.from_pretrained('Xenova/slimsam-77-uniform')
        // const processor = await AutoProcessor.from_pretrained('Xenova/slimsam-77-uniform')

        // const img_url = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/corgi.jpg'
        // const raw_image = await RawImage.read(img_url)
        // const input_points = [[[340, 250]]] // 2D localization of a window
        // const masks = await processor.post_process_masks(outputs.pred_masks, inputs.original_sizes, inputs.reshaped_input_sizes)
        // console.log(masks)
      } catch (ex) {
        console.log(ex)
      }
    })()
  }, [])

  return (
    <div>1</div>
  )
}

SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at getModelJSON (@xenova_transformers.js?v=6ff487fd:15671:15)
    at async loadConfig (@xenova_transformers.js?v=6ff487fd:21869:14)
    at async PretrainedConfig.from_pretrained (@xenova_transformers.js?v=6ff487fd:21899:26)
    at async Promise.all (:5173/index 0)
    at async SamModel.from_pretrained (@xenova_transformers.js?v=6ff487fd:22926:14)
    at async App.jsx:17:23

import { useEffect } from 'react'
import { SamModel, AutoProcessor, RawImage } from '@xenova/transformers'

import { AutoModel, AutoTokenizer } from '@xenova/transformers';

export default function Component () {
  useEffect(() => {
    ;(async () => {
      try {
        let tokenizer = await AutoTokenizer.from_pretrained('Xenova/bert-base-uncased');
        let model = await AutoModel.from_pretrained('Xenova/bert-base-uncased');

        let inputs = await tokenizer('I love transformers!');
        let { logits } = await model(inputs);


        // const model = await SamModel.from_pretrained('Xenova/slimsam-77-uniform')
        // const processor = await AutoProcessor.from_pretrained('Xenova/slimsam-77-uniform')

        // const img_url = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/corgi.jpg'
        // const raw_image = await RawImage.read(img_url)
        // const input_points = [[[340, 250]]] // 2D localization of a window
        // const masks = await processor.post_process_masks(outputs.pred_masks, inputs.original_sizes, inputs.reshaped_input_sizes)
        // console.log(masks)
      } catch (ex) {
        console.log(ex)
      }
    })()
  }, [])

  return (
    <div>1</div>
  )
}

SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at getModelJSON (@xenova_transformers.js?v=6ff487fd:15671:15)
    at async Promise.all (:5173/index 0)
    at async loadTokenizer (@xenova_transformers.js?v=6ff487fd:18704:16)
    at async AutoTokenizer.from_pretrained (@xenova_transformers.js?v=6ff487fd:21804:46)
    at async App.jsx:10:25

this is the env

Hi there - this looks like the following issue: https://github.com/xenova/transformers.js/issues/366

You can fix it with:

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

(just remember to reset your browser cache).

This will be the default in Transformers.js v3

thanks
after these two settings, it works

env.allowLocalModels = false
env.useBrowserCache = false

import { useEffect } from 'react'
import { SamModel, AutoProcessor, RawImage, env } from '@xenova/transformers'

env.allowLocalModels = false
env.useBrowserCache = false

console.log(env)

export default function Component () {
  useEffect(() => {
    ;(async () => {
      try {
        const model = await SamModel.from_pretrained('Xenova/slimsam-77-uniform')
        const processor = await AutoProcessor.from_pretrained('Xenova/slimsam-77-uniform')

        const img_url = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/corgi.jpg'
        const raw_image = await RawImage.read(img_url)
        const input_points = [[[340, 250]]] // 2D localization of a window

        const inputs = await processor(raw_image, input_points);
        const outputs = await model(inputs);

        const masks = await processor.post_process_masks(outputs.pred_masks, inputs.original_sizes, inputs.reshaped_input_sizes)
        console.log(masks)
      } catch (ex) {
        console.log(ex)
      }
    })()
  }, [])

  return (
    <div>{faker.lorem.sentence()}</div>
  )
}

export { default as layout } from '$c/blank'

I'd recommend enabling env.useBrowserCache = true, and just going into your browser dev tools to reset the browser cache.

I'd recommend enabling env.useBrowserCache = true, and just going into your browser dev tools to reset the browser cache.

yes i've disabled browser cache, but the same error shows sometimes after HMR, i will post an repo

I don't think you are clearing the cache correctly. You should do:

1. Open dev tools (F12 on Chrome)
2. Navigate to "Application" window
3. Click on "Storage" tab
4. Click "Clear site data"

I don't think you are clearing the cache correctly. You should do:

1. Open dev tools (F12 on Chrome)
2. Navigate to "Application" window
3. Click on "Storage" tab
4. Click "Clear site data"

oh oh okay i see， yes i just toggle disable cache on network tab

No worries :) Hopefully that fixed your issue?