Crea tu propia IA

import React, { useState } from 'react';

const App = () => {
  const [files, setFiles] = useState([]);
  const [response, setResponse] = useState('');

  const handleFileUpload = (event) => {
    const uploadedFiles = Array.from(event.target.files);
    setFiles(uploadedFiles);
  };

  const handleSubmit = async () => {
    const formData = new FormData();
    files.forEach((file) => {
      formData.append('files', file);
    });

    try {
      const res = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      const data = await res.json();
      setResponse(data.message);
    } catch (error) {
      console.error('Error uploading files:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-3xl font-bold text-gray-800 mb-6">Create My Own AI</h1>
        <p className="text-gray-600 mb-8">Upload .docx, .pdf, and .txt files to feed your AI.</p>
        <div className="mb-6">
          <input
            type="file"
            multiple
            onChange={handleFileUpload}
            className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
          />
        </div>
        <button
          onClick={handleSubmit}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-300"
        >
          Upload and Train AI
        </button>
        {response && (
          <div className="mt-6 p-4 bg-green-50 text-green-700 rounded-md">
            {response}
          </div>
        )}
      </div>
    </div>
  );
};

export default App;