React+FastAPI+MatplotlibでCSVデータを加工してグラフに出力

import axios from 'axios';
import React, { useState } from 'react';
import ImageGallery from './ImageGallery';

const App = () => {
  const [file, setFile] = useState(null);

  const handleFileUpload = (event) => {
    const uploadedFile = event.target.files[0];
    setFile(uploadedFile);
  };

  const handleUpload = () => {
    const formData = new FormData();
    formData.append('file', file);

    axios.post('http://localhost:8000/files', formData)
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  };
//----------------------------------------------------------------



  return (
    <div>
      <h1>SKLAB-MicroplateReader</h1>
      <input type="file" onChange={handleFileUpload} />
      <br></br>
      <br>
      </br>
      <button onClick={handleUpload}>Upload</button>
      <h1>Image Gallery</h1>
      <ImageGallery/>
    </div>
  );
};

export default App;

import React from 'react';
import Image from './getImages';

const ImageGallery = () => {
const images = require.context("../public/", true, /\.(png|jpe?g|svg)$/);
const imagePaths = images.keys();

  return (
    <div>
      {imagePaths.map((imagePath, index) => (
        <Image
          key={index}
          src={process.env.PUBLIC_URL + '/' + imagePath}
          alt={`Image ${index}`}
        />
      ))}
    </div>
  );
};

export default ImageGallery;

import React from 'react';

const Image = ({ src, alt }) => {
    return <img src={src} alt={alt} style={{ width: '240px', height: 'auto' }} />;
};

export default Image;

from fastapi import FastAPI, UploadFile, Query
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import FileResponse
import aiofiles
import matplotlib
matplotlib.use("Agg")
import matplotlib.pyplot as plt 
import numpy as np 
import uvicorn

app = FastAPI()
origins = [
    "http://localhost:3000"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/files")
async def upload_file(file: UploadFile):
    # CSVデータを処理するコードを追加する
    async with aiofiles.open(f"public/data.csv", mode='wb') as f:
        content = await file.read()
        await f.write(content)
    
    async with aiofiles.open(f"public/data.csv", mode='rb') as f:
        lines = [str(i).split(",") for i in await f.readlines()]
    row_i = [float(i) if i != "" else "" for i in lines[35][1:-1]]
    dataset = {lines[35][0][2:]:row_i}
    i = 35
    while True:
            i+= 1
            row_name = lines[i][0]
            row_i = [float(i) if i != "" else "" for i in lines[i][1:-1]]
            if row_i[0] == '':
                break
            dataset[row_name[2:]] = row_i
    keys = list(dataset.keys())
    ctrl_chars = [keys[0]]+[keys[i+1] for i in range(len(keys) -1) if keys[i][0] != keys[i+1][0]]

    ctrls = {i[0]:dataset[i] for i in ctrl_chars}
    for i in keys:
        to_sub = ctrls[i[0]]
        dataset[i] = [float(j)-float(k) for j,k in zip(dataset[i],to_sub)]

    fig = plt.figure()
    times = [180*i for i in range(1,len(dataset[ctrl_chars[0]])+1)]
    for i in keys:
        label = i 
        if i in ctrl_chars:
            label += "(Control)"
        plt.scatter(times,dataset[i],label = f"{label}",s=3)
    plt.xlabel("t (s)")
    plt.ylabel("OD (-)")
    plt.grid()
    plt.legend()
    fig.savefig("public/full.png",dpi = 100)
    plt.close()
    
    for i in ctrl_chars:
        fig_i = plt.figure()
        Char_i = ''.join([i for i in i if not i.isdigit()])
        for j in dataset.keys():
            if Char_i in j:
                if j not in ctrl_chars:
                    plt.scatter(times,dataset[j],s = 3,label = f"{j}")
        plt.yscale('log')
        plt.legend()
        plt.xlabel("Time elapsed (s)")
        plt.ylabel("OD (-)")
        plt.grid()
        plt.xlim(0,35000)
        fig_i.savefig(f"public/{Char_i}.png")
        plt.close()

    with open("public/text.txt", "w") as fpout:
        for i in ctrl_chars:
            fpout.write(i + ",\n")
    return {"message": "File uploaded successfully"}

# @app.get("/files/results")
# async def get_figures():
#     async with aiofiles.open(f"files/data.csv", mode='rb') as f:
#         lines = [str(i).split(",") for i in await f.readlines()]
#     row_i = [float(i) if i != "" else "" for i in lines[35][1:-1]]
#     dataset = {lines[35][0][2:]:row_i}
#     i = 35
#     while True:
#             i+= 1
#             row_name = lines[i][0]
#             row_i = [float(i) if i != "" else "" for i in lines[i][1:-1]]
#             if row_i[0] == '':
#                 break
#             dataset[row_name[2:]] = row_i
#     keys = list(dataset.keys())
#     ctrl_chars = [keys[0]]+[keys[i+1] for i in range(len(keys) -1) if keys[i][0] != keys[i+1][0]]

#     ctrls = {i[0]:dataset[i] for i in ctrl_chars}
#     for i in keys:
#         to_sub = ctrls[i[0]]
#         dataset[i] = [float(j)-float(k) for j,k in zip(dataset[i],to_sub)]

#     fig = plt.figure()
#     times = [180*i for i in range(1,len(dataset[ctrl_chars[0]])+1)]
#     for i in keys:
#         label = i 
#         if i in ctrl_chars:
#             label += "(Control)"
#         plt.scatter(times,dataset[i],label = f"{label}",s=3)
#     plt.xlabel("t (s)")
#     plt.ylabel("OD (-)")
#     plt.grid()
#     plt.legend()
#     fig.savefig("files/1.png",dpi = 100)
#     plt.close()

#     for i in ctrl_chars:
#         fig_i = plt.figure()
#         Char_i = ''.join([i for i in i if not i.isdigit()])
#         for j in dataset.keys():
#             if Char_i in j:
#                 if j not in ctrl_chars:
#                     plt.scatter(times,dataset[j],s = 3,label = f"{j}")
#         plt.yscale('log')
#         plt.legend()
#         plt.xlabel("Time elapsed (s)")
#         plt.ylabel("OD (-)")
#         plt.grid()
#         plt.xlim(0,35000)
#         fig_i.savefig(f"files/results/{Char_i}.png")
#         plt.close()
#     # dst = [FileResponse("files/1.png")] + [FileResponse(f"files/results/{''.join([i for i in i if not i.isdigit()])}.png") for i in ctrl_chars]
#     return FileResponse("files/1.png",media_type="image/png")