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

import React, { useState, useRef } from 'react';
import './App.css';

const App = () => {
  const [text, setText] = useState('');
  const [notes, setNotes] = useState([]);
  const [images, setImages] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const audioRef = useRef(null);

  const handleAudioToText = () => {
    // Placeholder for audio to text conversion logic
    setText('Converted text from audio...');
  };

  const handleAddNote = () => {
    setNotes([...notes, text]);
    setText('');
  };

  const handleAddImage = () => {
    const newImage = 'https://placehold.co/300X300';
    setImages([...images, newImage]);
  };

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

  return (
    <div className="App">
      <header className="bg-blue-500 text-white p-4">
        <h1 className="text-2xl font-bold">Voice to Text Converter</h1>
      </header>

      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Convert Audio to Text</h2>
          <audio ref={audioRef} controls className="mb-4"></audio>
          <button onClick={handleAudioToText} className="bg-green-500 text-white px-4 py-2 rounded">Convert</button>
        </section>

        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Text Output</h2>
          <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            className="w-full p-2 border rounded"
            rows="4"
          ></textarea>
          <button onClick={handleAddNote} className="bg-blue-500 text-white px-4 py-2 rounded mt-2">Add Note</button>
        </section>

        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Notes</h2>
          <div className="space-y-2">
            {notes.map((note, index) => (
              <div key={index} className="p-2 border rounded">{note}</div>
            ))}
          </div>
        </section>

        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Images</h2>
          <div className="grid grid-cols-3 gap-4">
            {images.map((image, index) => (
              <img key={index} src={image} alt="placeholder" className="w-full h-auto rounded" />
            ))}
          </div>
          <button onClick={handleAddImage} className="bg-purple-500 text-white px-4 py-2 rounded mt-2">Add Image</button>
        </section>

        <section className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Search Online</h2>
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full p-2 border rounded"
            placeholder="Enter search term"
          />
          <button onClick={handleSearch} className="bg-red-500 text-white px-4 py-2 rounded mt-2">Search</button>
        </section>
      </main>

      <footer className="bg-gray-800 text-white p-4 text-center">
        <p>© 2025 Voice to Text Converter. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;