تطبيق تحويل الصوت لنص عربي

import React, { useState, useRef } from 'react';

const App = () => {
  const [audio, setAudio] = useState(null);
  const [transcribedText, setTranscribedText] = useState('');
  const [notes, setNotes] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const audioRef = useRef(null);

  const handleAudioUpload = (event) => {
    const file = event.target.files[0];
    setAudio(file);
  };

  const transcribeAudio = () => {
    // Placeholder for transcription logic
    setTranscribedText('Transcribed text will appear here.');
  };

  const handleAddNote = () => {
    setNotes([...notes, { id: notes.length + 1, content: '', imageUrl: '' }]);
  };

  const handleNoteChange = (id, content) => {
    const updatedNotes = notes.map(note => note.id === id ? { ...note, content } : note);
    setNotes(updatedNotes);
  };

  const handleImageUpload = (id, event) => {
    const file = event.target.files[0];
    const imageUrl = URL.createObjectURL(file);
    const updatedNotes = notes.map(note => note.id === id ? { ...note, imageUrl } : note);
    setNotes(updatedNotes);
  };

  const handleSearch = () => {
    window.open(`https://www.google.com/search?q=${searchTerm}`, '_blank');
  };

  return (
    <div className="container mx-auto px-4 py-8">
      {/* Audio Upload Section */}
      <div className="mb-8">
        <h2 className="text-2xl font-bold mb-4">Audio Upload & Transcription</h2>
        <input type="file" onChange={handleAudioUpload} className="mb-4" />
        <button onClick={transcribeAudio} className="bg-blue-500 text-white px-4 py-2 rounded">Transcribe Audio</button>
        <div className="mt-4">
          <p className="text-gray-700">{transcribedText}</p>
        </div>
      </div>

      {/* Notes Section */}
      <div className="mb-8">
        <h2 className="text-2xl font-bold mb-4">Notes Management</h2>
        <button onClick={handleAddNote} className="bg-green-500 text-white px-4 py-2 rounded mb-4">Add Note</button>
        <div className="space-y-4">
          {notes.map(note => (
            <div key={note.id} className="p-4 border rounded">
              <textarea
                value={note.content}
                onChange={(e) => handleNoteChange(note.id, e.target.value)}
                className="w-full p-2 border rounded mb-2"
                placeholder="Write your note here..."
              />
              <input type="file" onChange={(e) => handleImageUpload(note.id, e)} className="mb-2" />
              {note.imageUrl && <img src={note.imageUrl} alt="Note" className="w-32 h-32 object-cover rounded" />}
            </div>
          ))}
        </div>
      </div>

      {/* Search Section */}
      <div>
        <h2 className="text-2xl font-bold mb-4">Online Search</h2>
        <input
          type="text"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="p-2 border rounded mr-2"
          placeholder="Enter search term..."
        />
        <button onClick={handleSearch} className="bg-purple-500 text-white px-4 py-2 rounded">Search Online</button>
      </div>
    </div>
  );
};

export default App;