Spaces:
Running
Running
File size: 2,426 Bytes
0b598b9 f762ee5 0b598b9 f762ee5 0b598b9 f762ee5 0b598b9 f762ee5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import { useState, useEffect } from 'react'
import API from './API'
function App() {
const [count, setCount] = useState<number>(0)
const [csvRows, setCsvRows] = useState<string[][]>([])
const [csvHeader, setCsvHeader] = useState<string[]>([])
const [loading, setLoading] = useState<boolean>(true)
const [error, setError] = useState<string | null>(null)
useEffect(() => {
API.fetchStaticFile('data/ravdess_1k_audio_benchmark.csv')
.then((csvText) => {
const rows = csvText.trim().split('\n').map(row => row.split(','))
setCsvHeader(rows[0])
setCsvRows(rows.slice(1))
setLoading(false)
})
.catch((err) => {
setError('Failed to fetch CSV: ' + err.message)
setLoading(false)
})
}, [])
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="card w-11/12 max-w-4xl bg-base-100 shadow-xl mb-8">
<div className="card-body">
<h2 className="card-title">Flask + React + Docker</h2>
<p>Simple proof of concept with Flask backend serving a React frontend.</p>
<div className="card-actions justify-center mt-4">
<button
className="btn btn-primary"
onClick={() => setCount((count: number) => count + 1)}
>
Count is {count}
</button>
</div>
</div>
</div>
<div className="w-11/12 max-w-4xl bg-white rounded shadow p-4 overflow-auto">
<h3 className="font-bold mb-2">ravdess_1k_audio_benchmark.csv</h3>
{loading && <div>Loading...</div>}
{error && <div className="text-red-500">{error}</div>}
{!loading && !error && (
<div className="overflow-x-auto">
<table className="table table-zebra w-full text-xs">
<thead>
<tr>
{csvHeader.map((col, idx) => (
<th key={idx}>{col}</th>
))}
</tr>
</thead>
<tbody>
{csvRows.map((row, i) => (
<tr key={i}>
{row.map((cell, j) => (
<td key={j}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
)
}
export default App
|