React Tensorflow JS加载用户上传的csv文件

Question

我可以从外部加载 csv 文件 URL，但是当我尝试加载用户上传到网络的文件时，它显示一个空对象。

对象似乎已加载，但您无法以任何方式访问信息。我在网上找到的解决方案是设置服务器，但我不想这样做。我想要一个带有 tensorflowJS 的客户端网络应用程序。

main.js:

export default function Main() {
  const [archivo, setArchivo] = useState();

  const cargarArchivo = (archivo) => {
    setArchivo(archivo);
  };

  async function realizarCalculos() {
    await preprocesamiento(archivo);
  }

  return (
    <div>
      <Dropzone cargarArchivo={cargarArchivo} />
      <Button
        onClick={realizarCalculos}
        style={{ margin: "5vh" }}
        variant="outlined"
      >
        Calcular Caudales
      </Button>
    </div>
  );
}

Dropzone.js:

class Dropzone extends Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [],
    };
  }
  handleChange(files) {
    this.props.cargarArchivo(files[0]);
    this.setState({
      files: files,
    });
  }
  render() {
    return (
      <DropzoneArea
        acceptedFiles={[".csv"]}
        onChange={this.handleChange.bind(this)}
      />
    );
  }
}

export default Dropzone;

Tensorflow JS：

    import * as tf from "@tensorflow/tfjs";   

    export async preprocesamiento(archivo){ 
        const csvDataset = tf.data.csv(archivo.path);
    }

Answer 1

TensorflowJS tf.data.csv works with fetch under the hood. Meaning that you can't load local files, see 。我通过使用 URL class 创建一个 URL 对象并将 url 提供给 tensorflow 解决了这个问题：

import * as tf from "@tensorflow/tfjs";   

export async preprocesamiento(archivo){ 
    const url = URL.createObjectURL(archivo);
    const csvDataset = tf.data.csv(url);
}

React Tensorflow JS加载用户上传的csv文件

React Tensorflow JS load the csv file uploaded by the user

javascript

reactjs

csv

tensorflow.js

main.js:

Dropzone.js:

Tensorflow JS：